Responsive web design is becoming common place in the web design industry. How we accurately create a design which suits each and every device and screen size causes many discussions on the subject.
The arguments for responsive web design to be the norm are common-place, sometimes a responsive web design isn't necessary. Every day we find new challenges and are faced with elements of a design which need to be incorporated on various screen sizes.
Responsive web design brings a whole new set of interesting challenges and one I've been thinking about at Obox is the use of a responsive slider in our themes.
What we have now
Inherently, we currently have this;
The slider is max-width: 100%, so when it scales down it reduces in height and width. It's ridiculous, you can't see anything of the slider, never mind the promotions/images or text within it.
The example above only shows a slider when using an image, but what happens if we have text like this;
This also isn't great as the content within the slider can also become unreadable.
Having done a few searches for responsive sliders, I couldn't find any which modelled the behaviour of what I've sketched in my notebook, adding to the thoughts that sliders need to be taken a step further in some way when using them in responsive web design.
What can we do?
This isn't a 'this is how you should do it' post. I'm not sure I have all the answers yet so this is much more of a presentation about my ideas which could open a discussion about how responsive sliders could be evolved.
I do think that sliders have a purpose, head over to most if not all eCommerce stores and you'll find a slider in some way shape or form. eCommerce stores aren't the only ones who use sliders, think of most business websites or online portfolios.
My thoughts are;
For sliders made up of images, we could provide more options so that we can adjust the width rather than height of a slider image. The implications of this would be the many different options you'd have to secure on each and every single slider item. The benefit would be a larger slider item instead of something you cannot see.
It's not so bad when you have a slider made up of portrait images, however, portrait sliders are rare in comparison to landscape sliders.
If a slider is meant to contain text and images, then when on a smaller screen size the text/images would stack. The implications would be down to the background. If the background is using a set height, once the screen size was reduced and the items stacked, the height might be greater than the slider background.
The benefits would be that we no longer have information hidden and the slider size isn't reduced.
What are your thoughts on retaining the height of a slider when on smaller devices as opposed to shrinking them down? Do you have any ideas on furthering what I've said above? Leave a comment below.