5

While reading Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazine, in the 'Data Transfer and Pricing' section, the below one got my attention:

Much has been said recently about Responsive Web Design. This approach does create some challenges with minimizing data transfer. Jason Grigsby has a very good write-up on the specifics. To summarize, CSS media queries — part of the magic sauce of responsive design — do almost nothing to lessen the overhead of data transfer to mobile devices. Resizing or hiding unwanted images still requires the full images to be downloaded to the browser. In addition, resources such as JavaScript libraries might be downloaded to mobile devices without even being enabled for users.

While I m reading the lengthy article by Jason Grigsby as mentioned in the Smashing mag article, I m wanted to know if any one following some best practices to avoid such issues?

manikanta
  • 8,100
  • 5
  • 59
  • 66

3 Answers3

3
  1. Its good to allow Google to host your jQuery libraries for various reasons. Read here
  2. Don't scatter your Javascript functions across numerous files. The lesser files the client needs to fetch, the faster. Multiple files means multiple requests.
  3. Often, it works great to include your scripts at the end of your HTML mark up. This makes the HTML markup load faster (page generates faster), after which the JS files are then fetched.
  4. Learn to use sprite sheets for your CSS. A sprite sheet is basically a large image that contains various images you need. A single large image is smaller than the sum of its parts because it only needs to maintain a single color table. Also, once again, lesser files to fetch = lesser requests.
Ayush
  • 41,754
  • 51
  • 164
  • 239
  • Thanks. I m following these for webapp dev, but I want to know the aspects in the responsive design as described in the article in the question. By the way, you've mentioned `it only needs to maintain a single color table`, can you tell a bit more or any links? – manikanta Nov 17 '11 at 16:53
  • 1
    here's a good answer that explains that in slightly more detail: http://stackoverflow.com/questions/8050152/why-use-a-sprite-sheet-rather-than-individual-images/8050355#8050355 – Ayush Nov 17 '11 at 17:03
2

This post has some good stuff : http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

EDIT: Some more links

https://developer.mozilla.org/en/Web_Development/Responsive_Web_design

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

http://www.html5rocks.com/en/mobile/mobifying.html

Are there any best practice for avoiding unnecessary resource downloads when the same site is viewed from a mobile if those resources are not relevant in that view

Assuming you are asking about conditional loading of resources, check out yepnope.js

pradeek
  • 21,445
  • 2
  • 31
  • 32
  • Thanks. Are there any best practice for avoiding unnecessary resource downloads when the same site is viewed from a mobile if those resources are not relevant in that view? Article by Jason Grigsby discusses some! – manikanta Nov 17 '11 at 18:15
0

I would recommend some backend solution for content adaptation. In our site, we use Apache Mobile Filter to remove excess content that wouldn't be relevant to mobile and/or tablet users, as well as image resizing to reduce load times.

There are other front-end techniques you could look into, such as lazy-loading images (only loading images when they're near the viewport -check out jQuery lazy loading) and loading social sharing buttons on demand (like TechCrunch.com).

Charles
  • 50,943
  • 13
  • 104
  • 142
The WebMacheter
  • 1,776
  • 1
  • 20
  • 31