«Challenges in responsive web design»
Responsive Web Design is taking the internet by storm. It's a fairly new set of techniques, methods, and skills.
So why is RWD necessary today? Users don't just use desktop browsers on PCs to visit websites. Nowadays, they use a wide variety of devices with completely different screen formats, such as iPhones, iPads, hundreds of Android phone models with different screen sizes, large "phablets" (smartphone-tablet hybrids) such as the Galaxy Note, the Nokia Lumia 920 with its Windows Phone browser, iPads with high-resolution Retina displays, netbooks, Kindles, Microsoft Surface devices, Wiis, TV screens, and more. In addition, there are more than 50 different mobile browsers in use—especially on Android.
After 22 years of web evolution, we are seeing the next big step. This time, it's the hardware that presents new challenges for web and UI developers. The old methods—device recognition, screen resolution detection, fluid design, elastic design, and building separate "mobile sites" on subdomains—are outdated...
Instead, new websites need unlimited flexibility, adaptability, and usability, and the only way to achieve this is through RWD. I have implemented several very specific solutions on my website as a demonstration.
If you're on a PC, slowly resize your browser window to see my RWD in action.
Note that the 4 main pages of GREG.CH all function differently (Projects / Feedback / Profile / Blog). Please switch between the pages and resize your browser window to see what happens on each page.
So check it out while you're here.
Notice how the top navigation, subnavigation, and content areas all change when the browser window gets smaller. I've tried to make it as logical as possible.
A responsive website will automatically rebuild the page layout to best suit the user's viewing device, giving them a seamless experience—even on the (very) small screens of old iPhones. When you think of Responsive Web Design, think of the movie "Transformers". Well, something like that ;)
This presents a number of challenges, even for the most experienced web developers:
How to organize the development of websites that don't have the same layout on every page?
How to ensure that web pages created with RWD are still valid HTML5—and perfectly printable (print out any of my web pages for a demonstration)?
How to avoid Search Engine Optimization risks (Google penalties) when using multiple H1 headings?
How to solve the problem of data tables that simply cannot fit on narrow iPhone screens?
How to ensure that color contrasts are high enough on mobile screens in bright daylight?
How to avoid those ugly, oversimplified "template looks" that nearly all RWD sites have?
How to handle graphics that are wider than the maximum 320 pixels of old iPhones by automatically switching from a horizontal to a vertical version of the graphic?
How to integrate videos that resize automatically instead of overlapping smartphone screens? (Example of how I solved it—resize the browser window)
How to format images when they cannot be wider than 320 pixels (old iPhones)?
How to organize the CSS3 style sheet logically so that it does not become cluttered with all the media queries required for RWD, while remaining compact and easy to search?
And so forth...
While researching on the web, I've found that most web designers capable of creating RWD sites are unable to solve even such trivial problems on their own sites.
Today, only an RWD site is a good site. Granted, perfect websites are pretty rare—fewer than one in a thousand of today's 500+ million websites (according to the latest Netcraft study).
RWD isn't the old "fluid / elastic design" or "dynamic web pages"; it's a new technique that includes "mobile first" and "design for touch". Many sites already receive more visits from mobile devices than from desktops.
So what's the fuss all about? As an RWD concept, GREG.CH serves as a reference implementation because it supports top-level and secondary navigation, a different submenu selector on smaller screens, 3- and 4-column layouts, full-page automatic reflow (see the "Feedback" page), and a bilingual layout with precisely aligned, end-to-end text blocks that include hyphenation.
Responsive Web Design does require experience in layout and problem-solving to do it right. It is best done by developers who aren't just coders but designers as well.
Responsive Web Design is taking the internet by storm. It's a fairly new set of techniques, methods, and skills. So why is RWD necessary today? Users don't just use desktop browsers on PCs to visit websites. Nowadays,…
Posted 9. August 2012 08:14 👁 10644 Views
