DEUTSCH ENGLISH
Deutsch English     EMAIL     CALL
Aug
09

«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 smart solutions as a demonstration.

- TEST: 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 swich 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, side navigation, and footer navigation are all changing, as well as the layouts of the content areas.





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 program a testing environment that accurately simulates the different devices? (See my solution, for example.)

// 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?

// 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 fonts 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 - and there aren't many yet - were unable to solve such 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". Some sites already have more mobile device visitors than visits from desktops.


You can test any web site with my self-developed test platform for Responsive Web Design.

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 even contain hyphenation (works 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     ▶ 4120 Views     ≡ Category: Web Development
Share


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


© Copyright Gregor Lemmenmeier  —  WEB www.greg.ch | EMAIL info@greg.ch | PHONE +41 [0]79 235 03 70
 HOW GOOD IS GREG? TEST AND COMPARE THE QUALITY OF THE GREG.CH WEB SITE:  
Pingdom Test:  Not only mobile users love fast websites. This site achieves a top result of 100% — compare with the sites of competitors! Greg can build even highly complex sites with great speed.100%  |   4-Screen:  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'?Responsive  |   HTML:  Test whether the currently displayed page of this website is valid (perfect) or invalid. Then compare with the websites of the web design competitors who often have errors in the site.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  |   Accessibility:  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  |   GTmetrix:  This very strict test tool checks a website for speed optimization techniques. Facebook and Wikipedia score 96%, GREG.CH scores 99%.99%  |   Swiss Top:  According to TOPSEOs (an independent web authority), GREG.CH is currently Switzerland's 3rd best web development agency. Swiss quality! Switzerland has 8,200+ web agencies.#3  |   SSL:  Test here if the SSL certificate of GREG.CH is valid and trustworthy. New sites must run via SSL. This leads to better Google positions.OK