Deutsch English    EMAIL     ANRUF

«Challenges in building RESPONSIVE websites»

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.

• Publiziert am 9. August 2012 um 08:14     ▶ 5551 Views     ≡ Kategorie: Website-Entwicklung

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

© Gregor Lemmenmeier, Rebweg 2, CH-8134 Adliswil — WEB | EMAIL | PHONE +41 [0]79 235 03 70
 ★★★★★ Fähigkeiten in Website-Entwicklung sind messbar! Testen Sie GREG.CH mit harten Qualitätstests:
 GTmetrix Website Quality:  Prüfen Sie mit den GTmetrix Tests, ob diese Website qualitativ den höchsten Ansprüchen genügt. Facebook und Wikipedia erreichen rund 90% — GREG.CH erreicht volle 100%.100% |  4 Screens:  Sehen Sie auf dem PC, wie die Site GREG.CH auf den heute üblichen Benutzer-Geräten aussieht. Machen Sie den Test mit weiteren Sites die Sie kennen. Sind diese responsive?Responsive |  HTML5:  Prüfen Sie ob die aktuell gezeigte Webpage dieser Website "valid" (perfekt) ist oder invalid gebaut wurde. Vergleichen Sie dann Sites der Konkurrenz, die oft fehlerhaft sind!0 Errors |  CSS3:  Testen Sie, ob der CSS-Code (Stylesheet) dieser Site fehlerfrei ist oder fehlerhaft entwickelt wurde. Vergleichen Sie dann Sites der Konkurrenz, die oft CSS-Fehler haben!0 Errors |  PHP:  80% aller Websites laufen auf Servern mit der Programmiersprache "PHP". Aber viele Websites sind noch nicht umgebaut für die aktuelle, sichere und schnellere Version 7.3.7 |  WAVE:  Prüfen Sie hier, ob diese Website 'barrierefrei' entwickelt wurde. Accessibility im Webdesign bedeutet: die Website ist für ALLE User, auch Menschen mit Behinderungen, gut bedienbar.0 Errors |  SSL:  Testen Sie ob das SSL-Zertifikat von GREG.CH gültig und vertrauenswürdig ist — gute Sites sind via SSL verschlüsselt. Dies verbessert laut Test auch die Google-Search Positionen.A |  Swiss:  Auf der öffentlichen Rangliste der 'Top 10 Web Development Companies' der Schweiz belegt GREG.CH seit Jahren einen Platz. Die Schweiz hat über 8'200 Webagenturen. Swiss Quality!#4