It is one of the year’s hottest topics: responsive web design, or device-specific website displays. We are writing an article about this topic because even though the advantages initially appear to be overwhelming, responsive web design is not necessary for every website.
What is the meaning of responsive web design?
Let’s assume that – in addition to a laptop or PC with a screen – you also own a tablet PC and a smartphone.
Now take a look at the same website on these three devices – what is the difference? In a large number of cases, there is no difference at all. However, it is very obvious that a website should be displayed differently on an iPad compared to a large PC screen.
Responsive web design offers exactly that: the layout of a website responds to the device. It adapts to the available screen resolution, positions the content differently depending on the device and also resizes texts, images and other elements. This is technically accomplished essentially using specific CSS codes that are sent to each device.
Successful responsive web design looks like the examples shown in the picture gallery above.
What are the benefits of responsive web design?
In recent years, web designers have had to perform a balancing act: on the one hand, the resolution of desktop screens has become increasingly larger, but on the other hand internet usage on smaller, mobile devices has grown far more popular. There have been two consequences: websites are not displayed perfectly on all devices and web designers are faced with a large number of screen resolutions which preferably all have to be taken into consideration. To be more precise: on mobile devices alone, current resolutions range from 240 x 320 pixels on a smaller mobile phone to 768 x 1024 pixels on an iPad in portrait mode. Desktop screens already achieve a content width of 1280 pixels.
Responsive web design possibly provides a solution with which the web designer can master this difficult balancing act: if a website is designed with a responsive layout, it responds to the device and displays the content on the computer screen at the workstation, for example, in a four-column layout, while the same content can be viewed in a single-column layout on an iPhone while out and about.
And what is the benefit for people visiting your website? Usability! It means that website users are no longer dependent on the device in order to view your website. A well-conceived responsive design is coherent and makes things easy for users. Although the layout of the content is presented differently depending on the resolution, central elements such as logos and colour worlds remain the same and users can also quickly find their way around the mobile version without having to relearn the navigation system, for example.
How much work is involved in responsible web design?
Despite all the advantages offered by a responsive layout, it naturally should not be forgotten that it takes much longer to produce. But before you enthusiastically demand a website with a responsive design, you should consider whether it is really necessary for your company or project.
A website that responds so flexibly is a major project and affects all stages of development: in the conception phase, desktop variants and the mobile version must be planned. This involves additional designs for various screen resolutions, and extra costs are also incurred for CSS coding and subsequent testing of the site.
In summary, it can be said that responsive web design is certainly a trend that could become increasingly popular in the coming years because it has huge potential for usability and scope. Nevertheless, responsive web design is not automatically the best solution for every website as the cost/benefit ratio must be right.
What does your own website look like on different devices?
Do you want to see what your current website looks like in different resolutions? At http://mattkersley.com/responsive/ or http://quirktools.com/screenfly/ you can test any URL.
In your opinion, when does responsive web design make sense – or not? Do you know any other examples of well-designed sites?