There are currently about 1.76 billion smartphone users worldwide, with another billion expected by 2018. In other words, the proliferation of mobile devices is not going to stop any time soon. In fact, 2014 is likely to be the last year in which people visited websites more often from desktop devices than from smartphones and tablets.

Approximately three-fourths of the Swiss population own a smartphone – and the number is continuing to rise. A quarter of all web shopping is done on smartphones and other mobile devices. Still, it is surprising how many website operators have not taken advantage of this trend. The lack of forward-thinking is evident whenever you scan a QR code on an ad, poster or delivery truck and are forwarded to a website that simply cannot be displayed properly on your phone. This is why websites that are simple to navigate via smartphone, phablet or tablet are now in high demand, i.e. sites with a responsive design that do not require a laborious mix of zooming, scrolling and rotating to make the content halfway legible.

Responsive design: what does it mean, exactly?
In essence, responsive design means that a user can view a website on practically any device. If a website is responsive, it has an optimized display on any device, whether it is a smartphone, tablet, laptop or PC. This is because the site visited adapts automatically and flexibly to the particular screen, regardless of the resolution, pixel size, dimensions, aspect ratio or even the operating system. Responsive web design (RWD) arranges the page elements horizontally or vertically so that they can be displayed in the right size. Of course, responsive design also responds to any connected input devices, such as a keyboard or mouse.

Various routes to the same destination
Along with the actual responsive design itself, there are other options as well. Some operators have a separate URL for special mobile websites that are designed specifically for smartphones and tablets. Others rely on adaptive websites. In contrast to responsive sites, the contents do not adapt “fluidly” to different screens. Instead, they are predefined for each device type. Liquid websites most closely resemble responsive design. The main difference here is that for responsive design, images are only reduced to a certain format, while on pages with liquid design the image is simply resized proportionally to the overall display, or, on certain devices, shrunk down virtually beyond recognition.

Responsive design

Why not just have one mobile and one “normal” website?
Running both a mobile and conventional website has its advantages. This is because design and layout can be fine-tuned down to the last detail for different displays. There are various principles to be taken into consideration here, particularly when it comes to usability (tapping with your finger or navigating with a mouse). As such, operators of large portals such as news sites often opt to run two versions – the different page loading times also play a role. On the other hand, maintaining two websites side-by-side is more expensive because the design has to be consistently altered to meet the requirements of new devices. Switching to responsive design may require more effort initially, but is likely to pay off in the long term. In addition, responsiveness also results in a lower bounce rate and, in turn, higher conversion rate – something that is especially important for web shops.

Google loves responsive design
What Google is not a fan of is duplicate content – this is identical content on two websites with different URLs. Responsive websites avoid this problem. Since the Hummingbird update in 2013, Google has preferred responsive sites and adapted to the specific aspects of mobile usage. Many users enter their search queries by voice into their smartphones, usually in complete sentences such as “Where is the best Chinese restaurant near me?”. Google is able to parse these types of keyword strings, giving different weighting to the various words that have been entered. In our example, Google would return a list of Chinese restaurants that have received positive reviews. In its guidelines, Google explicitly recommends that webmasters use responsive design. The results lists are also displayed accordingly. When performing a search from a mobile device, Google modifies the results to meet the needs of the user. For example, websites requiring flash won’t even be shown. Responsive pages, on the other hand, are bumped up to the top. There will soon even be a mobile phone icon next to the site to indicate that it is specifically suited for mobile devices. It is clear that Google has a fundamental preference for RWD. Responsive sites significantly improve results rankings even on desktop computers!

Responsive design: an absolute necessity – and not just from 2015

Sandro Bertschinger

He didn't find computers very interesting for quite some time. An Amiga 500 as a games machine was the high point at that time. Computers began to move into his focus with the advent of the internet and the possibility of building cool websites. In 2001, he crossed paths with an internet company by coincidence.