| SitePoint Sponsor |
I'm looking to get a new website designed for a new blog I'm thinking about. Wanted to know what everyone thought of responsive design. Is it really important? Or should I not worry to much?
I saw a couple random articles that said it's really important but I'm not sure I know exactly what it is or means...
Thanks for your help!
There's a huge buzz around it at the moment, and it's the latest fashion, but that doesn't mean it's good. Some people don't like it, because they want the site to look the same on all devices. I'm in two minds about it. It's fun to do, but on some devices at least (like iPhone) it's easy to double tap to zoom in and out, and you have a sense of where everything is.
One good thing about this issue is it's making people question whether they really need all that clutter on their site. My preference is to have the site look pretty much the same on all devices, but through ditching a lot of the distracting clutter on desktop versions.
We've survived this long without using responsive designs. It's a new trend, and the idea is c ertainly cool, but as Ralph said, it's not for everyone.Originally Posted by ACigar
I personally don't incorporate it. Not worth my time to use on my personal website (which I hardly even work on anymore, I'm lazy).
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
Responsive design is a buzzword. The underlying idea is not new, however. It simply means to make your design flexible and allow people the best possible viewing experience, regardless of the device they use, at least to my understanding.
Elastic, hybrid, and fluid layouts have been implemented for almost a decade. The only somewhat "new-ish" thing are @media-queries, a method you can use to make your design even more flexible for smaller devices, such as smartphones.
It's a natural progression once mobile devices became too numerous to overlook.
The first thing you need to understand: responsive design it's not to conditionally control resource download. Media queries are not conditional comments. Like the name says, they are queries. They establish a dialog between the web page and the browser and the device. Thing of it like providing dynamic CSS capabilities. And looking at dynamic HTML, I'm sure it's not bad nor will it go away soon.
<hr>
So, it has nothing to do with serving lesser content or different version of the same page. It's simply about being responsive to a simple 90 degrees rotation of a mobile device, from portrait to landscape or vice-versa.
Even more, it's about providing you with a all-in-one flexible layout, that will make for a good browsing experience across a wide range of screen sizes, from as low as 240px to as high as 1900px or more.
A powerful concept, since, from experience, you want to serve just one CSS stylesheet per website. The same website, for all mobile and desktop. Adapting it self. Need more?
<hr>
It became so talked about that some mistake it for buzzword. It's not. It's such a powerful concept it gained traction by allowing web developers to keep the pace with the technology advancement and not make their design look like something from 1990's.
Tapping the screen to zoom in to better see content doesn't help much the user when there is also a form to be filled up and to send to the server. Try it on mobile and you'll see a bad UX. Responsive design helps you exactly and precisely with that: user experience.
<hr>
And finally, no, an old flexible or elastic layout it's not the same with responsive design. Those that relied on that understood their error the moment they tried it on a mobile device.
And you can't possibly understand what's so peculiar about responsive design until you seriously try to shake your old ways and start mobile first. Providing a 960px-and-up flexible or elastic design that degrades well just won't cut it.
Or for huge displays, like MS Surface: http://www.youtube.com/watch?v=0b8sHd5BKRs
MQs aren't for degrading. MQs are a complete solution. From bottom to top. Not from top down, or from middle down.
Yes, I struggled a bit too to let go. One wouldn't think too much, but going with MQs and mobile first *is* a shift in concepts, yet if feels right once you adopt it and work it for real.
The simplest form of responsive design is a fluid/elastic site where elements stretch or shrink to fit the space available, and you maybe position some elements with floats, which means that if the available width gets too narrow then they will stack, giving the appearance of a linear flow. But that isn't what most people mean when they talk about responsive design these days – what they're talking about are media queries.
It's important to be aware of media queries, and to have them in your toolbox, but they aren't necessarily a good idea for all sites.
Two principle reasons – cost and practicality. Obviously the more work you put into the design, the more it costs to make, in terms of your time if nothing else. And what responsive design is, in effect, is making several different designs for the same website. Sure, there will be lots of commonality between them, but there's still extra work involved. Depending on the expected traffic – volume, demographic and purpose – it might be worth investing in a responsive design, or it might not. And sometimes it just isn't practical. Sometimes you need to work in a spatial plane that just doesn't translate into being linearised for a mobile screen (which is the main reason most people use media queries).
The other factor to consider when looking at media queries is that they don't allow you to optimise your site for mobile users. They don't allow you to serve smaller low-bandwidth images, or to strip out unnecessary scripts or hidden content that might slow down mobile browsers. If you build a separate mobile site – one that is optimised for mobiles, and only serves the content and styling that they really need – you can get a better ROI and improve the user experience at the same time.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
The funny thing is that the web was fully responsive when it started. CSS, for all its glories, has taken us further away from responsive sites with fixed widths and so on. Now CSS itself is helping to reverse that a bit. The "mobile first" approach also helps to reverse this problem, as it starts with basic, fluid site that works on anything and only adds fancy CSS to devices that handle it appropriately.
Hm, it works really well on an iPhone, but I can't speak for other devices.
This is not responsive, not by far!
And let's not forget inline-blocks.
<hr>
They are. Always.
<hr>
It's not making different design for the same website. At all. Obviously, you nee some practice with it. And MQs aren't meant for mobile. But they help with mobile too. But they help with huge screens too.
<hr>
The reason you build a m.* version has nothing to do with media queries or responsive design, it has to do with resources.
But even if you build a m.* version of your site, it still has to have to be based on MQs, simply because mobile nowadays comes from 240px up to 1200px wide.
<hr>
This kind of misconceptions and half understandings are the reason people misunderstand responsive design and MQs.
Tapping doesn't always go as planned, zooming or otherwise, but I'm sure you know that already...
...but when it works, *if* you manage to tap correctly to first select a field in the form, then, Safari together with iOs take over and provide the user with a better interface to go through the form. But that's Safari&iOS merit.
For a good mobile comparison, try to log on SPF (non-responsive) and then try to log on gmail or yahoo mail (responsive). I'm sure you'll notice the difference, first by not needing to tap to zoom, secondly by how well the login form is fit to the screen and how well it flows on gmail and yahoo mail.
And I'm sure you also know that "it eventually works" is not what a normal user appreciates most.
Yes, it's certainly nicer not to need to tap like that. I'm also hesitant to let my experiences on the iPhone form my opinion about using mobiles in general, as I realize they are all different.
I was all for responsive design, but recently a developer I really admire went on a surprising tirade against it. He prefers a site to have the same layout in all devices, even if he has to scroll or tap. It certainly gave me cause to stop and consider a few things. In the end, I still lean towards responsive design, but I prefer to keep items to a minimum on all devices to minimize the differences. I also hate it when mobile style sheets hide the main menu and other important page items. That just seems like madness to me.
Well, the problem with him wanting to scroll (without zooming first, I suppose) means fixed width layouts, since fluid or elastic would make the site fill the screen, not go overboard. So, points down for the respective developer.
Tapping and zooming means you can accidentally perform unwanted actions on the web page. Again, points down for the respective developer.
If you ask me, he's very unrealistic. I certainly wouldn't want to read an article, scrolling left and right on each line of text. Nor would I want to rely on my imagination to complete to left half side of an image... to see the big picture.
<hr>
Hiding part of the menu, or the whole menu, is comparable to what you have with classic desktop menus and toolbars. I don't see how you could possibly fit all the commands in it, so it's only logical to show only a few of them, or provide a collapse button instead for the rest of them.
It depends on what setup you've got. I'm running Opera on a Nokia, and it contradicts both of those points.
When using a site with a regular desktop stylesheet, it assumes a width of about 800px or so and lays the site out to fit that size, even if there is no fixed width and a strict interpretation of the stylesheet on a small screen would give a nicely linearised rendering that scrolled in a single plane only, meaning you need to zoom in and pan around to read the text and access all areas of the page. (That is the default behaviour but it can be switched to automatically linearise it in a traditional 'mobile' view)
When there is a block of text, even if it has a fixed-width that is wider than the screen resolution, it constrains the width of the column to the width of the screen, meaning you only need to scroll in one plane to read the whole thing from top to bottom.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
I fail to see how it contradicts what I've said:
...or how it's a good thing altogether.
Instead of taking the control, as a developer, you hand over the problem to the browser or the user. You expect somebody else to do the media queries for you. Since that's what you're describing, only that it's done in a bad manner.
But my guess is that you are confused about what Opera Mini is and does and what makes it different from Opera Mobile.
Because the behaviour that you're describing is the opposite of what happens on my phone. Sites that don't have fixed widths or layouts are nevertheless displayed in a way that requires 2-plane scrolling, whereas you said that that would only happen with a fixed width.
There's no need to be patronising, particularly when you're wrong. I didn't specify whether I was using Mini or Mobile. It's irrelevant, in any case. I'm talking about what happens on my mobile phone. It doesn't matter what version of the browser I'm using, because what I get is what I get, and it is different from what you have declaimed as the only way that things happen.But my guess is that you are confused about what Opera Mini is and does and what makes it different from Opera Mobile.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
For once, it does matter whether it's Opera Mini or Opera Mobile. I feel I should "patronize" you further if you believe otherwise.
Secondly, you're the one testing the waters and patronizing me guessing I wouldn't know the difference between Mini and Mobile when you only specify Opera and nothing more.
Thirdly, I've covered the so called "only way":
Finally, your particular experience (and expertise) alone as a user is irrelevant and produces no effects on the whole concept of adopting the responsive design since it's not even quantifiable to a reasonable target group. I can also produce weird overriding tweaks on my phone, or my laptop, or my desktop, in any browser that I choose, it doesn't mean nothing to any of the web developing techniques in general, good or bad.
Responsive design techniques aren't necessarily the right answer.
All the extra media queries required for responsive design to work from a layout point of view have additional bandwidth and power costs. Is that the right thing to do to human beings who are using a mobile phone which needs a battery to function?
Your visitors DON'T CARE if your site is responsive. They DON'T CARE if it's a separate mobile site. They DON'T CARE if it's just a plain old desktop site. But they DO CARE if they can't get done what they need to get done. They DO CARE when your site takes over 10 seconds to load. They DO CARE when interactions are awkward and broken.
Ask yourself this question:
Do you really need to include a hundred media queries and jump through a thousand hoops just so you can proclaim that your site is "top notch, grass fed, 100% certified" responsive?
Your goal should be to do whatever is necessary to create a great user experience.
I've only used @media queries a few times, for fairly simple sites, where all I really did was unfloat columns and a few other bits and pieces. So there's not necessarily a lot of extra code involved. It may be just a few lines. But I guess on bigger sites it could blow out.
I guess it's not as efficient to have completely separate style sheets for different devices. Does anyone know if devices download style sheets not intended for them? E.g. Would an iPhone download this?
If not, possibly the best approach is to place shared styles in one style sheet, and device-specific styles in secondary ones.Code:<link type="text/css" rel="stylesheet" href="/desktop.css" media="only screen and (min-width : 1224px)">
It looks like that the stylesheets not intended for the media type, will not be downloaded.
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
One thing though I'd ask of you: what qualifies as "whatever" to you? Since responsive design, MQs, different mobile versions are out of the question. Aren't those in the "whatever" category too?
And no, responsive design is not hundreds of media queries. And media queries don't have additional bandwidth and power costs.
The idea of adding more code (and more to download) to make your site "responsive" for mobile devices should be your very first clue that this is a bad solution. These are a good read:
How media queries slow the mobile web
http://n.survol.fr/n/how-media-queri...the-mobile-web
Do media queries within CSS stylesheets slow down page load times?
http://quora.com/Media-Queries/Do-me...age-load-times
CSS Media Query for Mobile is Fool's Gold
http://blog.cloudfour.com/css-media-...-is-fools-gold
Getting Started With (and Gotchas of) CSS Media Queries
http://thinkvitamin.com/design/getti...-media-queries
My own worst enemy? I have a number of problems (just like everyone) but limited knowledge and resistance to learn certainly aren't two of them. Perhaps next time you should do a little research about a person before you make an even bigger fool of yourself?
Thanks Luvtrov, I look forward to reading those links. Keep the debate going, guys. This is great. Let the facts speak for themselves ... no need to get personal.
It''s hard to take the author seriously when he has something like this in its css:...and I don't care where it comes from!Code:a.nd_e506252a6b7649eb9640b54befbe7519_settings_btn_status_on
...and when the only point is "bad things to do with your images" that has nothing to do with MQs.
I don't know why you're trying me to convince me that MQs aren't bad? Since this one is in tune with what I stand behind, not with what you try to prove:Do media queries within CSS stylesheets slow down page load times?
No, [...] stylesheet parsing is rarely the number one concern for improving speed (you're better off optimizing images, implementing a spritesheet, minifying your assets, refactoring your Javascript ... you get the idea).
Again, it's hard for me to take this one seriously too:Code:<p style="text-align:center;">
This one uses MQs, so again, what's your point with that?
<hr>
If you seek for a battle of the articles, here are some really *useful* ones, providing good information, along with solutions and alternatives, instead of some random venting:
http://coding.smashingmagazine.com/2...media-queries/Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.
[...]
Mobile and desktop browsers that lack support will present a subpar experience to the user unless we step up and take action. I’ll outline some of techniques that developers can follow to address this problem.
http://blog.mailchimp.com/mailchimp-and-media-queries/[...]media queries are a way to optimize email for mobile devices, and MailChimp v6.8 now supports them in the normal campaign workflow.
[...]
Though the ideal would be a mobile-first approach (to keep the overhead for such devices as small as possible), this is a pipe dream for now. If you take pains to ensure your initial markup is as clean as possible and your images are optimised, then you are doing best by all your recipients. The few lines of code for your media queries (that’s really all it takes) are a negligible additional download.
The above says it all.
And a SASS support for MQs:
http://thesassway.com/intermediate/r...ies-in-sass-32
I personally, use SASS for multiple good reasons like productivity, programmable support, reusability across projects.
<hr>
Back to *personal knowledge and *practice**.
Me using responsive design and media queries required a proper understanding from my part of the concepts involved. And what I needed to understand first: MQs are not CCs. Once I understood that, once I get past the fact that MQs are not to control resource downloading, then I was set on the right path with responsive design.
Responsive Design doesn't spell as Download Control to me. Also, I don't know how much experience others have with SQL, but Media Queries doesn't spell to me as Media Inserts, Media Updates or Media Deletes.
So, a media query doesn't manipulate resources, it only asks for some CSS code. The CSS code and its mechanisms are responsible for that. What this means? It means that if I put garbage CSS code in a media query, I'm left with garbage CSS code, not with garbage media query.
Furthermore, by actual coding, now I have a good understanding of how proper MQs work: a base stylesheet (which I already had when I was not targeting responsive design), making for the bulk of my CSS code, with added media queries code, accounting for an almost insignificant size of CSS code. As an example, normally, the whole MQs code in my website would be smaller in size than any CSS reset or CSS normalize code I choose.
Posting Permissions
Reply With Quote
Bookmarks