‘Up to Date With Responsive Web Design’, by Chris Kähler, CMO of DatingPartner.com


The amount of devices with which websites are accessed is constantly increasing, and thus also the necessary adaptations of these web-presences. Whilst only a few years ago PCs and laptops were used in the office and at home, we now face a situation in which the majority of users is virtually constantly online via smartphones, tablets, netbooks and other portable devices. This mandates new requirements for websites, especially with regards to their display on all of those platforms.

Prior to the “mobile revolution” fixed sizes of 800 pixels — and later on 1024 pixels — were most commonly used to allow for an optimised display of website-content on PC-monitors and laptops. Today, however, display-formats are so diverse, that it is entirely impractical to use fixed display sizes to transport content of websites on all devices optimally. To compound the confusion, functionalities of the different devices like touchscreen navigation, menu navigation or slewability of portable devices have to be taken into account. Particularly smartphones present the designer with challenges and more often than not the layout of the website appears to be torn apart, menu navigation dislocated to the point of inoperability and/or the user has to (slowly & carefully) scroll around into all directions. To make matters worse, the font displayed is frequently so small that it becomes virtually illegible without zooming in, which naturally impinges upon the enjoyment of the webpage for the user. As a worst case scenario, this leads to the user leaving the site dissatisfied.

Thus, a current frequently used method is to create a so-called mobile site for each and every mobile device, which may result in quite substantial extra expenditure, depending on the content and size of the respective web presence. Moreover the development of new devices is in rapid progress, new devices are constantly added and “old” ones are taken off the market. Therefore constantly new mobile sites optimised for a particular device have to be added and updated to ensure a consistent availability of the web presence on ALL devices. Particularly for large sites with ever increasing — and perhaps even user-generated — content, this is a highly impractical situation.

Another option available is the development of an app for your own website, which apart from a somewhat costly programming also bears the risk of not being accepted (and thus not installed on their device) by the user. In case the content is of a slightly more mature nature, one runs into the risk that the relevant stores like Google Play or the Apple Store may not accept it after all. Also, that the guidelines and the alterations thereof are in a flux and subject to the interpretation of the shop owners does not make the situation any easier.

Based on what is outlined above, it appears advantageous to appropriate a new method for varying page design, which has found its way into modern web programming with HTML5 and CSS3 (Cascading Style Sheets 3), namely responsive web design (RWD). In essence it is a quite commonly programmed CSS website, which is capable of automatically adapting to the respective platform environment. In contrast to mobile sites which only “look good” on the device for which they are programmed for, responsive layouts align with all devices. The advantage lies in the fact that only one site has to be designed and maintained, which automatically adapts to various devices of the users.

When applying responsive web design, relative values and positioning are used instead of fixed screen resolutions. Relative values have the advantage that the individual objects are always treated in relation to the available size on the device, and thus are automatically represented in the correct dimensions, quite irrespective of whether the display screen is big or small. This is particularly helpful when dealing with pictures or graphs, as they are thus prevented from distorting the layout of a page. Yet responsive web design allows even more. Not only does it adjust the layout out to the different sizes available on individual devices, it also allows to situate page-objects in specific locations and to change these during updates. Furthermore, unused parts of the page may be suppressed completely. These features are facilitated via so-called media queries, which are available since the introduction of CSS3. These queries allow retrieving properties and capabilities of end devices. And this in turn leads to the capability to use all of the interface options of the end device such as mouse, keyboard, touchscreen or even voice-command.

This leads us to the conclusion that it is best practice to intensively explore responsive web design as an option prior to launching or redesigning a website. It does require a little more effort and time during planning and programming, but pays off quickly as there is only ONE website to maintain. Furthermore, the added value for the user should not be underestimated. The interface is always the same or rather always recognisable and actionable whether the user/customer is accessing the site with his smartphone on the bus, on a PC at work or later in the day couch-potatoeing away with a tablet. In any and all of these cases, a perfect and usable site is displayed which encourages trust and ultimately makes a purchase decision more likely.

Chris Kähler (CMO, Datingpartner.com)