Since Ethan Marcotte published his seminal article on Responsive Web Design there’s been an explosion of articles related to this topic. The guy truly made a good work also publishing a book about it, deepening on what many consider, since then, should be a standard for web design. If you have no idea of what this thing is, this Responsive Web Design thing, but simultaneously you’ve been thinking and working on a way for your web projects to be viewable in multiple devices, then you are instinctively working on responsive web design. Here’s a little insight: The main objective of responsive web design is the inherent flexibility a website can acquire through the application of fluid grids, images and CSS Media Queries to adapt the content and design of the website to any device, even if it is a desktop computer, a laptop, an iPad or a Smartphone. You do not have to create a mobile version of your website; you do not have to create an application for every popular device on earth. Just one and it will adapt to everything.
1. Image Resizing
This is a major issue considering that every good designer must rely on images to illustrate its concepts. In responsive web design this is the most problematic matter because resizing a desktop image to fit a mobile device’s screen implies downloading an image that’s been suited for a desktop environment. To view full images on a mobile device you need to download an unnecessary large file and resizing it to fit the screen. The next table shows an amazing example of the impact the load of large images has on mobile devices.
2. Resizing Images Forces CPU and Memory
Viewing a responsive website on a mobile device forces the CPU and memory of it while resizing images because you are downloading a large image, uncompressing it in your phone’s memory and then resizing it to fit a small screen. This process takes about 3 bytes per pixel of memory, so a 1024×768 image will take about 2.36 MB of memory. Most clients only request 4 images in average at the time, but 9.44 MB is still a lot for a page load. A recommended file size for images in a mobile context could be 100×100, but this is kind of utopic since a suitable image for desktop websites exceeds that resolution.
3. Mobile Devices Download Non-viewable Data
One good example for this can be viewed within the old dconstruct 2010 website. It displays, as the site grows bigger, bigger images of the speakers, which were not viewed on mobile devices thanks to CSS media queries placed on the div where the images are. Instead, labels are shown with the names of the speakers when the width is lesser than 450px, fitting perfectly some of the most popular mobile devices. Although this is kind of cool, images were still being downloaded on the device. This can be identified by making a copy of the website into a local server, loading it on a device and watching the web server logs to see what was downloaded. Other way is by setting up a computer as a proxy server and set the device with it to see if every request to the site was logged. Both cases showed the same result: the device downloaded 172K in photos that were not seen.
4. Mobile Speed v Desktop Speed
There are several factors that affect mobile speed. With 3G connectivity, being the greatest feature the type of coverage. For this there are as well several types like GPRS, or 2.5G, which has a download rate of 64 Kbps and a 20 Kbps upload rate. UMTS (Universal Mobile Telecommunications System) or 3G, which has a download rate of 14Mbps and is the most popular nowadays with several releases and updates. HSDPA (High Speed Downlink Packet Access) is the 5th revision and optimization of UMTS, also known as 3.5G, 3G+ or turbo 3G. It has a 14Mbps download rate. There is also HSUPA (High-Speed Uplink Packet Access), which is the 6th release of UMTS and the evolution of HSDPA, also known as 3.75 (3.75G) o 3.5G +; this technology offers improved rates of voice and data.
5. Hiding Background Images Is A Bad Idea
Using CSS media queries isn’t very bad to handle images and one might think hiding background images is a better idea than using labels. Well, the display:none won’t stop a background image to be downloaded on a mobile device2. Other part to consider is that if you use CSS media query to replace the background image with a mobile version; in some cases it would actually download both images4. Nonetheless, there are two cases that seem to work: setting the parent of the element with a background image to display:none3, and using a min-width declaration to specify a minimum browser width for the desktop image and a max-width for the mobile image5. The result of both is only the mobile image been downloaded and viewed on the mobile device.
6. More Code, More To Update
There are components working perfectly on a desktop version of a website, but in some cases they are not going to show up in the mobile version; it could be a video, an embedded map or an image. CSS media queries work incredibly well hiding things, but not that well removing them. CSS media queries won’t remove any unnecessary script or html you won’t use on mobile or desktop versions. It just leaves it there: hidden.
8. CSS Media Query Is A Bad Choice For Multiple Devices
As indicated on the Mobile Web Best Practices 1.0 Basic Guidelines at point 2.6 Device Limitations, most devices often do not support scripting or plug-ins, limiting the content which can be viewed. They said:
“Mobile browsers often do not support scripting or plug-ins, which means that the range of content that they support is limited. In many cases the user has no choice of browser and upgrading it is not possible.”
9. “Great Mobile Products Are Created, Never Ported”
Brian Fling, Author of the book Mobile Design and Development actually makes a lot of sense with this statement. On page 66 he illustrated perfectly why a mobile web site often achieves a different goal than the one its developer intends in the first place because mobile devices generally possess quality features which are made to ease people’s lives. He wrote:
“Take an airline website, for example. Simply taking the web experience and trying to put it on a small screen doesn’t help the user at all; in fact, it has the opposite effect. If the user is on the way to the airport and needs to check whether a flight is delayed, the last thing your user has time to do is scroll around to find where to check flight times. If you’ve found yourself racing to make a flight and needing to find your flight information, such as times, gate, etc., you need that information quickly.”
10. Mobile Needs Are Different From Desktop Needs
Recognizing the mobile context is not just to be aware of the difference between screen sizes. Responsive Web Design does not recognize the mobile context because it just adequates a website to fit a screen, but it omits key mobile features like the location of the user, the connectivity, the time the user has and the information the user needs, hardware limitations, software potential, overall performance of the device, aspects like lighting, sound, visibility, accessibility and privacy. Each one of these is as important as a single piece for a great mobile experience that if you focus your design skills to adequate a desktop website for a mobile device, you’re missing the advantages the device could offer.
11. Better Create A Mobile Website Than A Responsive One
We test three different websites’ home pages and their mobile versions with YSlow, and we found there are significant differences regarding performance in both versions of the tested sites, which are between the 10 most visited around the world (YouTube, Yahoo and Wikipedia). The Wikipedia website has an overall performance average score of 92 (out of 100) and its weight is 16.5 times greater in the desktop version. It also has 13 less HTTP requests (the lesser HTTP requests it has, the faster the website will load).
Category: Responsive Website Design Trends
About the Author (Author Profile)Sara is a Kent State University alumna with a degree in public relations.
Sites That Link to this Post
- Quora | September 25, 2012