fsimage

The new Hantweb feature slider is here

Hardi Darweish, March 8 2016

We were looking for a great way to display related content that may be too long or large to be comfortably fitted onto a devices screen. We wanted this content to either be scrolled via a mouse or simply swiped into view should the user be on a touchscreen / mobile device.

Deciding on researching and building what we termed as a ‘Feature Slider’, we set about sketching out potential layouts for the slider and producing our development criteria:

  • Horizontal image sliding via left and right controls
  • Fully device responsive
  • Finger touch and swipe support (mobile device and touch screens)
  • Had a ‘no JavaScript’ fall back
  • Extensible enough to include light box video / HTML content should we wish to add these enhancements in the future.

Research

During our research phase we looked at how other websites such as bbc.co.ukmanchester.gov.uk and online retailers such as Nike and Amazon were implementing sliding galleries or carousels as they may also be referred to. On initial inspection, these all seemed to look like they offered everything we needed. However on closer inspection these all seemed to be relying on external plugins (sometimes more than one!) to support their visual and navigation features. Some also seemed to be not as configurable as we would of liked in termed of visual display – such as turning off image pop up light boxes.

Taking our research a step further we researched pre-existing slider frameworks to help us with the build and again we found many current offerings were too code dense, utilising unnecessary JavaScript to enhance animation and bloated mark up.  This would make for slow page loading, especially for users on a 3G mobile device, and we also had to think about our Hantweb website editors – how would they add / update feature sliders using our current CMS system without having direct access to the HTML?

Implementation

After our research stage was complete, we discovered the best option would be to utilise the BX Slider Gallery (bxslider.com). Meeting all of our wish list criteria, the framework was based on the JQuery JavaScript library and best of all was built on on a simple unordered list.

Once we had added the mark up to our testing environment, it was evident that some CSS modification would be needed in order to strip out any unwanted visual and transitional behaviours. Unnecessary JQuery script was also removed in order to minimise overall file size of the Feature Slider.

Once the Beta version of Feature Slider was complete, we noticed that it was not quite clear to users on mobile devices that the slider had come to an end. So with the use of a small line of JQuery, we ensured that the far left and right menus were hidden when they were not needed, for clearer navigation. The file size of the Feature Slider was further reduced by converting the previous and next slide buttons into pure CSS over PNG images.

Once we were happy that our Feature Slider was performing how we would like it to,  it was time to deploy our no JavaScript version. Fortunately due to unordered list mark up, this was a relatively simple task as our CSS allowed for a simple stacked gallery format to be displayed should a user have their JavaScript turned off.

Release

You can view the new Feature Slider here. Why not let us know your thoughts and of course any suggestions for it’s improvement?

feature slider

 

Leave a Reply

Your email address will not be published. Required fields are marked *