I see this slider named 'Responsive Text Slider". Can you tell me what makes part makes it ‘responsive’:
There’s nothing there that seems to be responsive.
The width of the <div> element is set to 100% so the width of the slider is the width of browser window.
Try changing the width to say 50% in the slider class CSS and then change the width of your browser window. You will find the width of the slider responds to browser width: always maintaining 50% width.
1 Like
I thought responsive was more about using things like media queries to change the layout to work better on mobile or tablets or desktop computers.
Setting width to a percentage, I believe still comes under the ‘responsive’ heading.
Example
1 Like
Perhaps we should only describe it as fluid or mobile-friendly.
Perhaps it should be described as being suitable for use within a responsive website.
It is important to understand that responsive web design isn’t a separate technology — it is a term used to describe an approach to web design or a set of best practices, used to create a layout that can respond to the device being used to view the content. In Marcotte’s original exploration this meant flexible grids (using floats) and media queries, however in the almost 10 years since that article was written, working responsively has become the default. Modern CSS layout methods are inherently responsive, and we have new things built into the web platform to make designing responsive sites easier.
3 Likes
I think that there is an important distinction to be made here though.
What responsive means is changing the layout design based on screen resolution, so that the layout can change from a single column for narrow cellphones and possibly less content, up to a multi-sectioned layout for a full desktop screen.
What responsive means is using flexible grids so that between major layout boundaries the grid size elegantly accommodates the available space.
What is not responsive is just forcing everything to be at 100% width. That does not make it a responsive slider. Calling something like that responsive, strongly reminds me of the Ralph Wiggum meme from The Simpsons where he says “I’m helping.”
You’re not helping. No, you are not.
Calling such a slider responsive is disingenuous at best, and muddies the waters when it comes to helping people understand the differences between what is responsive and non-responsive design.
I think they called this responsive because it’s not a fixed width setup. Most sliders/carousels were fixed width and they would slide by that fixed width. This hard sets the width to a percentage (100%) and slides it by that percentage instead.
Is it responsive? Technically, yes.
Should it be called responsive? Probably not. Variable width or some such sort, sure, but not responsive.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.