Deutsch English    EMAIL

«Challenges in building RESPONSIVE websites»

by Greg Lemmenmeier, posted on 9. August 2012 at 08:14, 8129 Views

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 PC/desktop browsers to visit websites. Nowadays, they use a wide variety of devices with completely different screen formats such as iPhone, iPad, tablets, hundreds of Android phone models with different screen sizes, large "phablets" (smartphone/tablets) such as Galaxy Note, Nokia Lumia 920 with Windows Phone browser, Apple Retina iPads with double resolution, Netbooks, Kindle, Windows Surface, Wii, 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 are out of date -- device recognition, screen resolution detection, fluid design, elastic design, and building separate "mobile sites" on sub-domains are methods of the past...

Instead, new websites need to be unlimited in their flexibility / adaptability / usability, and the only way to do this is with RWD. I have developed my website with several very specific solutions 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 in different ways (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, main navigation, sub navigation and content areas are all changing when the browser window gets smaller. I've tried to make it as logical as possible. For example, on small screens (smartphones) there will be an email link and a clickable phone number at the top. When users visit a website on their smartphone, they often just want to contact the owner.

A responsive website will automatically re-build the page layout to best suit the user's viewing device, thus giving them the best and most 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 brings a number of challenges for even the most experienced web developers:

// How to organize the development of websites that don't have the same layout on all pages?

// How to ensure that webpages made with RWD are still valid HTML5 - and perfectly printable (print out any of my webpages for a demo)?

// How to avoid the risks in Search Engine Optimization (Google penalties) when using multiple "H1"?

// How to solve the issue with 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, over-simplified "template looks" that nearly all RWD sites have?

// How to put the most relevant information - which on most websites is the email link and a clickable/dialable phone number - at the beginning of the webpage on small mobile screens?

// 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? (Example of how I solved it - resize the browser window)

// How to integrate videos that auto-resize instead of overlapping smartphone screens? (Example of how I solved it - resize the browser window)

// How to format images when they basically can't be wider than 320 pixels (old iPhones)?

// How to create typography that is perfectly aligned and adapts font sizes to smaller screens?

// How to logically organize the CSS3 stylesheet so it does not get cluttered with all the media queries required for RWD but remains compact and easily searchable? (View my CSS file to see the solution)

And so forth . . .

While doing my research on the web, I've found that most web designers who are able to make RWD sites were unable to solve such trivial problems in their sites.

Today, only an RWD site is a good site. Granted, perfect websites are pretty rare - less than 1 per mil out of 500+ million websites today (last Netcraft study).

RWD isn't the old "fluid / elastic design" or "dynamic webpages", it's a new technique that includes "mobile first" and "design for touch". Many sites already get more mobile device visitors than visits from desktops.

So what's the fuss all about? As an RWD concept, this site GREG.CH is a reference because it does work for top/sub navigation, a different submenu selector on smaller screens, 3- and 4-column layouts, full-page auto-reflow (see page "Feedback"), and for a bi-lingual site that was made with precisely aligned, end-to-end text blocks that contain hyphenation (in Firefox).

When you check my site's source code (View Source in browser) you'll see that it was easy. Well, quite frankly, Responsive Web Design does require experience in layouting and problem solving to do it right. It can best be done by developers who aren't just coders but also designers.

• Posted on 9. August 2012 at 08:14     ▶ 8129 Views     ≡ Category: Web Development

◄◄ "Ein wenig CH Bashing"           Next Post: "The three most famous Gregs in the world" ►►

© Gregor Lemmenmeier, Rebweg 2, CH-8134 Adliswil — WEB | EMAIL

 ★★★★★ GREG.CH is currently number ONE in website quality. Here are the official test results:  
SEO Score:  See with this very strict test whether this website was optimized for better Google search results (Search Engine Optimization). Compare the SEO scores of the competitors! GREG.CH is the only Swiss site getting 100%.100% !  Global Score:  Was this site built using best practices? The very strict YellowLab test checks a website for its quality. The most important Swiss site scores 0%, GREG.CH 100%.100% !  PageSpeed:  Verify with the PageSpeed Insights Test whether this website was optimized for performance. The most important Swiss site scores 70%, GREG.CH 100%.100% !  HTML:  Test whether the currently displayed page of this website is valid (perfect) or invalid. Then compare with the websites of web design competitors — they often have site errors...0 Errors !  CSS:  Test whether the CSS code (stylesheet) of this website was developed with or without errors. Then compare with the sites of the competitors (who often make CSS mistakes).0 Errors !  WAVE:  This tool checks a website for conformance with accessibility standards to ensure that the webpage content can be easily accessed by everyone including people with disabilites.0 Errors !  PHP:  80% of all websites run on servers with the programming language PHP. But many (old) websites have still not been upgraded to the up-to-date, safer and faster PHP version (8.2).8.2 !  Responsive:  Check on a PC or Mac how this website looks on all the user devices most often used today. You can also test some other websites that you know. Have they been built 'responsive'?OK ! 

Logo Webagentur

div id="fb-root"/div script async defer crossorigin="anonymous" src="" nonce="2RjXmcFw"/script div class="fb-like" data-href="" data-width="50" data-layout="button" data-action="like" data-size="small" data-share="true"/div