The optimization of websites for mobile devices is also an increasingly important topic for our customers. Why this is so becomes clear quite quickly when looking at a few figures. In April 2012 there were an estimated 190.7 million active websites worldwide. In the same year, however, only about 25% of the major brands had a strategy for mobile internet. This compares to an incredible 5.9 billion smartphones sold by the end of 2011 alone. 72% would like a website optimized for mobile devices, according to a study for which Google surveyed 1,088 American smartphone users in July 2012. From a user experience point of view, this clear result is hardly surprising, since "normal" websites are designed for a completely different usage context and are usually difficult to use on the smartphone. So it's hardly surprising that smartphone users want a version tailored to their needs.
How should the mobile website differ from the "normal" version?
• enlarged interface elements to solve the "fat finger" problem
• adapted font size for better readability on small screens
• stronger weighting of content through initial hiding or removal of insignificant (additional) content
• remove functions that are not compatible with the mobile usage
• Optimization for low bandwidth
Device specific version
Here a completely independent version of the website is created, which can be developed and operated completely independently of the desktop website. However, this involves additional editorial work. If this is to be avoided, server-side scripts must adapt the contents of the "normal" version for mobile output. However, the programming effort should not be underestimated, especially if the mobile and desktop versions differ more in content and structure. For example, internal links whose targets are not available in the mobile version must be removed. External links, e.g. from search engines, may also not be available in the device-specific version.
Pro
• Optimization for mobile devices without affecting the desktop version, e.g. independent mobile menu structure
• Easy optimization of loading times, since e.g. images can be easily optimized for mobile output and only scripts necessary for mobile use have to be loaded
• Possibility to limit the optimization effort by reducing the depth of content e.g. omitting individual parts
Contra
• Increased editorial effort for maintaining an independent mobile version
• With alternative reuse of contents of the desktop version considerable programming effort, e.g. links between mobile and desktop contents
• Solution for external links to desktop content in the mobile version e.g. Google search results
• Different depth of content puts users at a disadvantage due to the device used
• Optimization only possible for already existing devices
Responsive Design
With responsive design, the graphic structure and also the functionality is adapted to the respective device. It is therefore an adaptable website that falls back on a central content basis. Technical basics are HTML5, CSS3 and Javascript. However, the flexibility goes hand in hand with an increased development effort, because the specific requirements of the different devices have to be thought through together. Rigid pixel-exact designs cannot be implemented meaningfully with this solution.
Pro
• No additional editorial effort, as content is 100% reused
• Users of individual devices are not disadvantaged or excluded from certain content
• No effort due to different treatment of external references (e.g. Google search results)
• Support for resolutions of future devices
Contra
• Complex in conception, design and implementation, direct interactions between different versions, must therefore be developed together
• Optimization of loading times requires additional effort as desktop and mobile assets are loaded and images must be available in the appropriate resolution
Conclusion
With the growing importance of the mobile internet, the necessity to optimize websites for mobile use is inevitably increasing. If the user group can be limited to one or a few devices, e.g. a web app for the iPad, the device-specific optimization will be the tool of choice. The increased development effort of Responsive Design makes no sense at all. The less clear it is with which device users will use the online offering, the stronger the arguments for Responsive Design will be in my view. This significantly increases the level of difficulty in the conception and design process. In the medium and long term, however, there are immense advantages, since content only has to be maintained once and users are not deprived of content depending on the device.