This whole practice of using media queries for responsive web design has captured my imagination. I mean it looks really cool if nothing else. However, I have come across arguments against it that are pretty compelling.
Just wondering if anyone has insights about it. I am pretty convinced of the liquid images thing. Loading huge images so that they can be dynamically sized down, doesn’t solve the page loading problem. Forcing phones to download huge images for no good reason doesn’t seem very user friendly to me. But what about the other points?
I’ve been reading up on Responsive Web Design myself recently and have realized it’s not the solution to everything. I do think however it is quite useful for a simple site. But there are many things to consider for the type of site you have. I’m trying to figure out how to redesign some sites I’m in charge of and we have links to a lot of PDF files and also audio files. So I’ve been thinking how do those work on mobile devices and if I have one site to adapt to whatever device it’s being viewed on, how would things like that work on a mobile device? And ecommerce sites, to me those would be better to have a mobile version and a desktop version. But then there’s the question of a mobile app vs. a mobile website. Man…there is so much to consider and I’m a little overwhelmed at this point not quite knowing where to begin.
So in short in my opinion there is a place for responsive web design and I think it’s how very simple sites should be designed, but we still need to consider whether or not some sites need a mobile website version and/or a mobile app.
I’d definitely like to read more opinions and insights on this subject.
Yeah the thing that concerns me about it is this: Responsive web design seems to HIDE things, but does not REMOVE things. So big memory/battery drainers that you want to remove from a mobile site, or just aren’t suitable for one, are being downloaded anyway. That’s a big B[/B] for me.
I think you are right. It depends on your goals. My fear is for a simple site is this: it works fine if you are ok with having the same content on mobile as in desktop and do not have huge components that download on the phone regardless of whether it is hidden by the media query or not. BUT, the problem could be if you set up the site as responsive, then begin to ADD things, whereby the site grows and becomes a site that you would not want to be responsive, but have already set it up that way.
There was another one I read too but I can’t find it at the moment. But basically I think there is a way to design a responsive site so you begin with the mobile “version” first and then use CSS3 Media Queries to add things for the desktop version. That way your mobile device wouldn’t download the things meant for the desktop. At least that’s my understanding of it. I haven’t yet worked with it.
So that’s a start at least for a simpler site that doesn’t have too much interactivity or is a blog site perhaps. But yes there is still the question of what sites do deserve a separate mobile site? And then what to include in the mobile version vs. the desktop version. I’ve also been reading up on jQuery mobile. I still just have no idea where to begin with redesigning websites to work with mobile devices. When I learned web design in the late 90’s it was merely for desktop and the only issue at that time was how to make it work in different browsers. I feel like I have to relearn everything and the way I’ve been doing things. So at this point I’m just reading, reading, and reading some more and trying to learn as much as possible on the subject. The way of web design is definitely changing over to a new era. It’s exciting but also overwhelming.
I’m thinking a good way to go about this would be to combine the 2 ideas somehow: Responsive Web Design and jQuery mobile. I mean ideally it seems it would be very cool to have a site that works on all devices so you don’t have to create multiple sites for however many different devices and browsers, etc. When I read about jQuery mobile my thought was that it’s meant for a separate mobile version of your site, but now looking at it again I’m wondering if there’s a way to incorporate both to make a site that is device agnostic.
Here are sample sites built using jQuery mobile: jQuery Mobile Examples - JQM Gallery
Here are sample sites that are built with the Responsive Web Design concept and CSS3 Media Queries: Media Queries
I checked out some of those sites on the Media Queries site on my Windows phone and not all of them work that well. Some took a really long time to load and didn’t look that great on my phone. I have a Samsung Omnia II and used Opera Mobile to view the sites.
But isn’t the concept the same? I mean you start with the mobile version, then add things to the desktop version, it’s basically still hiding things, not removing them right? In other words, you are adding things to the desktop version at the end, but when the user resizes the window it hides certain things from the mobile version that were added later.
So the mobile user is still downloading the bigger background image and the javascript that the desktop verison employs right? Or does that method solve that problem? I did not see where it does on that page.
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
And if you’re viewing the site on a mobile device, say for example your iPhone, you won’t ever expand your window beyond that viewport. So it sounds to me that only on the desktop would those assets be downloaded.
The “320 and up” idea is interesting, never thought about building a site for mobile users then scaling it for the desktop users. It seems to me to be the same idea though, of scaling down a desktop site to a mobile site.
I have just started doing the responsive design thing with @media queries, but I’m not too far into it and I’m starting to resize the pitfalls and the gothas with this method just might outweigh the pros.
I am looking into jQuery mobile, looks very interesting and the sites that are using it seem to be lickety-split performance wise. I also like the idea of using a jQuery since that is what I know. Takes more work, but with usability in mind, it seems to be the better route.
Addressing the bandwidth issue, Smashing Magazine in an article on “How to build a mobile site” tells us to set any unnecessary content and background images to display: none;. The problem with this is, the images and content are still getting downloaded, just hidden on the client-side.
How does “320 and up” present the right syle info to versions of IE that don’t understand the media queries? or do those browsers just get the same as handhelds do?
While reading Ethan Marcotte’s book “Responsive Web Design”, I came across this paragraph in the last chapter that I think pretty much addresses the arguments against responsive/adaptive web design article.
But most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites. Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on. Perhaps there’s a compelling reason to keep your site’s desktop and mobile experiences separate, or perhaps your content would be better served by a responsive approach. Only you and your users know for certain.
While I agree with mobile web designers who say that certain users of certain sites deserve different content, I think the reverse is also true: many sites can <em>benefit</em> from serving one document to multiple contexts or devices. And those are perfect candidates for a responsive approach.
(pp. 108-109 <em>Responsive Web Design</em> by Ethan Marcotte)
At first I was a little hesitant to look at what has been said objectively. However, after reading the article I think there are some valid points made. Particularly, in the case of creating a separate website when the workflow needs to change from desktop or mobile. This will probably never need to happen for simple, static sites, but dynamically driven ones where the user is trying to accomplish a goal through the UI, I can agree with.
That said I don’t think much of a case can be made for resizing images, since there are several services available including io (formally tinySrc) that make image optimizing a none issue across multiple devices.
The same can be said for hiding things. In many cases those items can be hidden or omitted based on server side logic. Though I do agree that hiding things client-side is a terrible solution.
Good points made. My only reservation about that is if the site eventually expands to include scripts that should not be downloaded to mobile but are.
I will say though that the non support with IE legacy is not much of an issue for me. For desktop browsers I consider adaptive design as progressive enhancement anyway unless you REALLY care about 800x600ers which I don’t. The trouble is if mobile browers don’t support queries, which I am pretty sure the lot of them do.
Yeah I have heard of that. I’m gonna look into it. The liquid image thing is a non starter for me. Serving up huge images to dynamically resize, solves problems for the web dev but actually creates problems for the user, especially the mobile user. Not my thing. But if they can be sized down in more ways than just dimension, then that’s something.
I always want to question the large images even if the user is on desktop. To paraphrase someone:
“Mobile users want to find our opening times, menu and prices. Desktop users definitely want a 1MB image of someone smiling at a salad.”
My only reservation about that is if the site eventually expands to include scripts that should not be downloaded to mobile but are.
I like isMedia() and there’s something related out there called matchMedia(). The problem with it I ran into was, because it’s checking if a style applies to a div who is placed in the document, there has to be a document first. Meaning I have to wait for window.onload, which means loading any libraries like jQuery who also wait for window.onload don’t notice the page is already loaded, and never run. That bugged me. If a mobile user isn’t going to use anything that needs the library, I don’t want them even bothering loading the library then.
Are you talking about “liquid images,” where the mobile user is forced to download images way bigger than it needs to, so it can dynamically resize them, costing on processing as well, in a browser they aren’t even able to resize anyway?
