: Reponsive Web Design : Does it download the same amount of data on every device? I want to redesign my blog and website on wordpress to accommodate ever increasing mobile users and tablet users.

@Goswami781

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 - docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0
For some information on the downsides of responsive web design check out 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 - www.abookapart.com/products/responsive-web-design . It is definitely worth grabbing the e-book version.

Vote Up Vote Down

@Ogunnowo487

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.

Vote Up Vote Down

@Berumen354

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.

Vote Up Vote Down