11

I want to redesign my blog and website on wordpress to accommodate ever increasing mobile users and tablet users.

I am also hearing about responsive design. I want to know does a responsive web design download the same amount of data on a computer screen as well a mobile device?

I have also seen many big marketing firms have not invested in responsive web design and are still going for a separate website optimized for mobile. So what should I go for, a responsive web design or a separate website optimized for mobile?

Improve this question

3 Answers 3

Reset to default
8

As defined by Ethan Marcotte in ALA 306, the term "responsive design" refers to the technique of applying differing style rules to your HTML depending on user screen size. For more explanation of responsive design, here's a nice deck by Mike Bollinger.

In this model, you send the exact same HTML to the client whether the screen is small or large. However, if resources (images primarily) referenced in the CSS are not displayed for certain screen resolutions, they may not be downloaded. For instance, for big screens you can use high-res.png in your CSS and for small screens low-res.png - the web client may choose to only download the image in the active style. (See @DBUK's comment for at least one important client that currently downloads both! Hopefully clients will smarten up!)

This technique might make sense in your case, or it may make more sense to create a separate mobile site.

Different devices can imply different usage contexts. Mobile phones are always in your pocket - how would the user use your site in the grocery line? Would you want to send them the whole site? Or just a few features? Or totally different features? What if they are on the couch with the TV on casually perusing their iPad?

Mobile devices tend to have slower processors, less memory, and slower connection rates (all of those "truths" become less true every year, btw) - you may want to send a separate mobile site out strictly for performance reasons.

I would venture that, in general, the more static, textual, and content-driven the site (i.e. a blog), the better chance there is to use existing HTML and responsive design. The more interactive, multi-media and user-driven the site (i.e. a store), the better chance you should be tailoring separate sites for individual device types.

Also, don't forget that in this day and age, there is also the question of whether the mobile experience should be a site or an app.

Improve this answer
6
  • I think, annoyingly, images will still be downloaded. The tests by cloudfour being an example - cloudfour.com/examples/mediaqueries/image-test.
    – DBUK
    Dec 9, 2011 at 21:45
  • @DBUK Thanks for the correction - I had been wavering on stating "will not download" vs. "may not download" in previous edits to this post. Updated my answer to be more accurate.
    – peteorpeter
    Dec 9, 2011 at 22:33
  • It's new to me so not sure if it is only the iPhone. Why is nothing ever simple with the web :(
    – DBUK
    Dec 9, 2011 at 23:30
  • 1
    @DBUK Indeed. According to that test, when both background style rules are behind media queries, only the low-res is downloaded, it's only when the high-res is the default style rule and is then overridden by a media query that it both are downloaded. Basically, it's complicated!
    – peteorpeter
    Dec 12, 2011 at 16:44
  • So a mobile first approach would get around this problem e.g. default style for lowest resolution and using media queries for all the larger ones plus desktop?
    – DBUK
    Dec 13, 2011 at 9:27
1

Responsive design shouldn't download the same amount of data on every device since not all devices have the same multimedia requirements. Mobile sites should use lo-res images and be less graphical in nature than sites for desktops/laptops/tablets. And if you want to combine your mobile and regular sites, then you need to take this into account, otherwise your site isn't very responsive, is it?

The slidedeck peteorpeter links to mentions the Responsive Images script by the Filament Group, which allows you to serve up the right sized image for the appropriate device using JavaScript, ideally without downloading more than one version. For layout image assets, this would normally be done via media queries specifying different styles for different screen resolutions.

Improve this answer
1

I think a lot of companies will take a long time to update their sites, hell, there are still some out there using tables. Responsive, and the mobile first approach, are definitely the buzzwords of the moment.

As the above poster mentioned, you should be using lo-res images for your mobile phone/lower resolution devices. Media queries will help you target all the lower resolutions. However, I heard that mobile safari will ignore the display:none rule and download the desktop versions of the images as well. Also, if you go down the responsive image route it puts a lot of pressure on the mobile processer - 3bytes per 1pixel...I think. There are lots of solutions to get around extra content being downloaded - some quite hacky - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

For some information on the downsides of responsive web design check out http://www.webdesignshock.com/responsive-design-problems/. Don't let that blog post put you off though. A Book Apart wrote a fantastic book on the subject - http://www.abookapart.com/products/responsive-web-design . It is definitely worth grabbing the e-book version.

Improve this answer
2
  • Can you elaborate on the 3kb per 1px statement? I don't see how using JavaScript to fetch a fullsize image only if the screen resolution is greater than 480px would have that effect. Also, you should never be using display: none to hide images from mobile users. That is just bad practice.
    – Lèse majesté
    Dec 9, 2011 at 18:41
  • "Some network operators, for example, compress images before they are passed over the air to the mobile device" - w3.org/TR/mobile-bp That would mean the mobile would need to uncompress them (?) at the cost of 3bytes per pixel (@24 bit RGB e.g. a JPG)? Oops I put kb up above, damnit. This is purely from a CSS standpoint, with the mobile downloading all images..mobile and desktop, and not taking into account javascript solutions.
    – DBUK
    Dec 9, 2011 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.