In the always awesome 24ways.org (the advent calendar for web geeks) there have been three excellent articles on specific Responsive Web Design techniques so far this month.
The first is by Jeremy Keith and discusses conditional loading of content for websites designed using Responsive Web Design techniques. The technique Jeremy describes allows you to have one web page for mobile devices and desktop browsers alike, show just the necessary content on the small form factor mobile web browsers, but show additional content for the larger sized browsers too loading that additional website content only when needed. This saves on bandwidth for people viewing your website using a mobile web browser allowing your site to load quickly and not cost them more time or data than necessary.
http://bit.ly/siNiYY
Two solutions to the RWD Image Problem. One challenge when designing using Responsive Web Design techniques is the issue of serving appropriately sized images for different devices. The basic RWD technique is to use the largest images required for any device in the HTML, and just change the scale at which the image is displayed to make it smaller for smaller devices. The problem with this basic approach is that it’s not very mobile-friendly. All devices would be downloading images with large file sizes. This is particularly an issue with mobile devices that are likely to have slower internet connections and caps on bandwidth. Your site will take longer to load than necessary and for users who are paying for every bit of data as they go, downloading all those large images can add up to a substantial penalty.
Techniques continue to be refined for downloading small images for mobile devices and the largest images only when appropriate. Here are two of the latest techniques available:
The first by Matt Wilcox is a server-side solution involving PHP, cookies, and Javascript on the client:
http://bit.ly/uEioLu
The second by Jake Archibald is a client-side only solution with fascinating benefits. But in the words of the author, it’s a dirty, dirty solution:
http://bit.ly/vJlbcy
Check them out and comment. Which method do you like better?