Website Tuning for Mobile Devices: Responsive Web Design

Photo: vladgrin,

The numbers speak for themselves: According to estimates by the Federal Association for Information Technology, Telecommunications and New Media (Bitkom), more than 112 million mobile phone connections were connected in Germany at the beginning of the year. "More than every third German citizen has two or more mobile phone connections, " says René Schuster, member of the Bitkom board, adding, "The need for smartphones, tablet PCs and other devices for mobile Internet access will continue to grow at a rapid rate . "

Mobile devices require flexible websites

According to a survey by the market research company Forsa, around one third of Internet users in Germany are already using their mobile phones to access the Internet. A trend that opens up completely new marketing opportunities for companies. But the demands on modern online marketing are high; After all, in times of tablet PCs and smartphones, users are more mobile and flexible than ever before. And because the resolution of the display can vary considerably from laptop to PC, tablet computer, smartphone or television, the operation and appearance of a web page, of course, depend significantly on the device. On the one hand, the number of devices with different sizes and screen resolutions is increasing, and on the other hand, the demands on the functionality of the websites on the mobile devices are also increasing.

  1. Five Tips for Responsive Web Design
    Users are increasingly accessing the Internet with their smartphones and tablet PCs. Responsive Webdesign can optimize homepage and appearance on the web.
  2. The size makes it:
    Adjust the font size to the size of the smaller smartphone display.
  3. Mobil relies on contrasts:
    Dimensions and contrasts of links and buttons must be significantly larger in mobile devices. On the one hand because of often unfavorable lighting conditions, on the other hand through the use of touchscreens.
  4. slim:
    With mobile devices and the current transfer rates, a few hundred kilobytes for larger image files can significantly delay website loading. Experts therefore recommend the so-called adaptive image approach. With the help of PHP and Javascript, different image sizes are automatically generated for the different display sizes.
  5. Use interface features:
    The different terminals have different interface characteristics. Their use allows the user an even easier browsing, for example, clicking on the desktop to swipes on tablet and mobile, but phone numbers should be stored on the smartphone with a call-on-click function.
  6. White area:
    Depending on the display size (tablet vs. smartphone), the whitespace must be reduced or enlarged.

Adaptable web design for every device

In the past, these challenges have been a major headache for marketing executives, and they have often strained the budgets of mid-sized companies. But now a solution seems to be found: Responsive Webdesign. This means a web design that automatically adapts to the requirement profile of each end device. Frank Pomereinke, Managing Director of online marketing specialist Hydra Newmedia, names the advantages of this technology: "Responsive web design takes into account the specific requirements of each device and virtually automatically optimizes the display and navigation elements for the respective device, thus offering the best possible user experience and at the same time reduces the costs of running the online presence. "

Reduce operating costs for the online presence

The advantage: instead of having to maintain several different websites, responsive web design maintenance is reduced to a single website. Especially websites with frequently changing content benefit from it. Pomereinke estimates that depending on the number and size of the existing online presence, even medium-sized companies can save up to 50 percent of their operating costs through interacting web design.

The Hydra CEO calculates: "Developing a website entirely responsive design costs about a third more than a traditional website, which was optimized only for the PC view, but you do not have to develop any other pages." This, according to the expert, is the big advantage over the conventional layout. After all, if you want to create another output channel later on, in addition to a conventional website, for example for mobile devices such as smartphones or tablets, a new page would have to be created and additionally maintained. These costs, so Pomereinke, fell away in the variant Responsive Web Design. Therefore, this process would pay for itself very quickly for many customers.

Investment costs pay for themselves quickly

Instead of the previously common optimization for fixed screen resolutions or font sizes over pixel data, responsive design works with relative values. Thus, the various elements of the web page, images, for example, always get the optimal percentage of the layout for every screen resolution. A suit that always fits. Instead of many different websites, there is only one that adapts to the user's device. On the one hand, this improves the consistency of the corporate design and on the other reduces the costs of the website: After all, only one website needs to be maintained. However, companies have to invest in front of this return on investment (ROI) first - namely in the adjustment of their website. Depending on the size of the website, this can be quite expensive. For the exact pixel information of the page must first be completely replaced by percentages.

Thus, each marketing manager prepares for his company in advance an individual RoI balance, which starts with a lot of questions: How many different websites does the company currently maintain? Where are the core target groups? Which internet access do these groups choose? Should these customers also be able to use the website with their smartphone and tablet PC? What happens on the website? How often are updates done? How much is the maintenance of the websites? How much can the company save on operating costs by reducing it to one site?

  1. Nine tips for web controlling
    The best marketing is useless when customers land on an unattractive website. But how do you know how good your own site is?
  2. 1.None one-time solution
    Establish web controlling as a continuous process with clear resources and responsibilities.
  3. 2. First improve, then advertise
    Always start optimizing your website before you drive traffic to your website through expensive online marketing efforts.
  4. 3. The most urgent need
    First identify the most critical parts of your site with an analysis: Find out which landing pages visitors are more likely to despair of. Also pages with unnaturally many exits, high cancellation rates in order processes or pages with very short or very long residence times are indicators for an urgent need for optimization.
  5. 4.The fine analysis
    Observe the user behavior at the critical points more precisely - preferably by mouse tracking: What do the visitors really perceive, how far do they scroll, which texts do they read, which do they ignore, in which form fields do they hesitate or break off?
  6. 5. Ask the user
    Optimize not only conversion rate and revenue but also visitor satisfaction and loyalty. You will gain information about this through the continuous survey of your visitors. If you use established market research methods, you will gain additional insights into the satisfaction drivers, motivation or socio-demographics of your visitors.
  7. 6. The means of marketing
    Only when the website is optimized and visitors are highly satisfied should you invest in online marketing. Take advantage of all the possibilities such as newsletters, affiliate marketing, display and video advertising, social media, etc. Only to run search engine optimization (SEO) or to pay paid ads in search engines (keyword advertising) is wrong. Do not start with too small budgets - savings and targeted use of funds can be achieved later through a more targeted use of funds. This is usually only after the test of all channels practicable.
  8. 7. Campaign monitoring
    Analyze all campaigns using a system that captures all the points of contact of a visitor with your advertising material and website. In addition to the conversion rate, campaign costs, revenues, and returns should also be reported at the item level. Make sure that campaigns are not just rated using static attribution models. It is important to analyze the interactions between individual campaigns. This is the only way to exploit leverage effects between advertising media and to distribute budgets efficiently.
  9. 8. Industry benchmarks
    In order to classify the achieved results and improvements, the comparison with the previous performance of the own website is not enough. Better results are provided by industry benchmarks. They allow a judgment as to whether the optimization measures and the online marketing are at or above the level of comparable companies.
  10. 9. The cherry on the cream
    If everything works to your satisfaction, expand your marketing with targeting and retargeting. These are targeted advertising measures, which are based on the user behavior of a visitor, so oriented to his interests. Beyond that, also think about offline marketing.

Relaunch the website for the transition

The decision to use responsive web design is likely to have fallen quickly with large, global consumer goods manufacturers. The Stuttgart web designers of Hydra have just developed a portal for Sony Mobile in an adaptable design. But even with many SMEs, the benefits of this design seem to justify the higher initial investment. Especially if anyway a complete relaunch of the online presence is pending. Because if you rebuild the page completely new, the installation of flexible layouts is quite easy to accomplish.

For example, the new website for the Rubore® Seals campaign by medium-sized enterprise Trelleborg Sealing Solutions was also designed in a responsive design. The company develops and sells precision seals and precision guides as one of the world's leading companies. Dynamics and constant innovations have accompanied Trelleborg since its foundation. That's why Innnovation is also a major topic for the company with its approximately 50 agencies worldwide. Tobias Schmid, Global Marketing & Communications Manager at Trelleborg Sealing Solutions: "Especially in view of the increasing use of mobile internet and viral marketing, it was important to us that the microsite could also be used optimally on mobile devices." The company chose Responsive Webdesign for its benefits in terms of usability, consistency and cost of the online presence.

This is how Responsive Web Design works

Responsive Web Design is based on HTML5 and CSS3. So-called media queries are used to query the properties and capabilities of the device with which the visitor wants to access the website. How big is the display of the device? How high is his resolution? Which format does the screen have, portrait or landscape? And which input options are available: keyboard, mouse, finger and language? A prerequisite for the use of Media Queries is the strict separation of content and layout in order to exploit the full potential of Responsive Web Design. Then the layout of the website adapts automatically, without having to resort to Javascript or changes in the HTML code. Font size and images scale accordingly in width and height, the image turns into the desired portrait or landscape format and seemingly unimportant elements are not even displayed.

This reduction or prioritization of content must be carefully planned. There are workshops for that. In the process, exactly those areas of the website are defined that can be hidden on smaller displays or slide further down. Depending on the width, content is restructured and arranged either between each other or next to each other. Online marketing specialist Frank Pomereinke advises on three to five-tier structures. However, these should still be scalable separately. So you can already cover all resolutions with three scalable levels: For small smartphone screens is the narrowest view, in which content is usually shown only below each other. The middle tier is designed for tablets with a larger display in portrait format and usually dispenses with one to two table columns at the right edge. The third view targets monitors and tablets with high resolution and landscape orientation. It shows the content in full width.

Californian Luke Wroblewski, one of the world's most experienced web designers, even goes a step further in his book Mobile First. He recommends preparing the content on the web so that it can be accessed anywhere, anytime, focusing primarily on the small, mobile devices. Because the trend goes clearly to the Internet use on mobile terminals.

This puts many things in doubt, because the smaller screen sizes force web designers to limit themselves to the essentials of form, function and content. Thus, the techniques used must be compatible with all devices, which makes it difficult, for example, the use of flash. The famous credo is: less is more. And this philosophy is in line with the traditional wishes of just about every user: the desire for speed and intuitive operation. (pg)