As smartphones ushered in the post-PC world, businesses realised their Web presence needed to translate to smaller screens. Otherwise, their sites would bear tell-tale signs of cluelessness: tiny text, tinier links, and a jumbled layout. They risked lost traffic and sales.
Responsive design, a technology that stretches or shrinks Web pages to fit differently sized screens, has emerged as the most-often recommended manner of optimising content for mobile devices.
In a new report from BI Intelligence, we describe what responsive design is and compare it to other mobile optimization tools, analyse responsive designs pros and cons, examine data and statistics that track responsive design adoption and performance across mobile, and evaluate whether dedicated mobile websites have their place, and detail the ramifications for HTML5 development.
Here’s an overview of the main mobile optimization tools:
- It’s not all about mobile apps: Particularly at the beginning of the mobile boom, when some believed apps would channel virtually all mobile activity, businesses rushed to create apps. Apps may be dominant in some mobile markets like the U.S., but consumers use their mobile browsers too — and not just for casual browsing, searching and information look-ups. A great deal of e-commerce happens in the mobile Web browser, not in native apps. Not to mention: Apps are expensive. Apps are not the be-all, end-all for mobile.
- Responsive designs is now the gold standard: This dominance was cemented in mid-2012 when Google recommended responsive design as the best strategy for smartphone-optimised websites.
- But it’s not perfect: As with most technologies in a multi-device world, it has disadvantages, and it’s not right for every business, or every application. For one, it’s slower than dedicated mobile sites.
- Dedicated mobile websites: Some usability gurus advocate for separate mobile sites that offer a stripped-down version of its content and carry their own Web address (often with the URL that looks something like this: m.website). These mobile-only sites tend to perform very well in terms of load speeds. (See chart, above.)
- Responsive design, 101: In responsive design, the same Web code or HTML is delivered to every device, but tweaks to CSS code — which determines the layout of Web pages — allow it to determine the device size and adjust layout accordingly. The website maintains the same Web address or URL regardless of what device it’s seen on. In sum: The fluid layout means that content adapts to all form factors, even smart TVs — a fast-growing source of Web traffic.
- There’s also Responsive Design With Server-Side Support. This is a variant of responsive design. The difference is that the computer server that hosts the website will deliver different batches of HTML and CSS Web code depending on what device the user is on. This method solves some of responsive design’s performance issues, but requires device detection. It means a company can use responsive design and enjoy its advantages where it wants, but deploy more customised components too. It may deploy responsive elements across mobile, while keeping a more traditional fixed layout for the PC. It may even deliver customised experiences for certain device models (like a feature that only works on retina screens, etc.).
- Describes what responsive design is and compares it to other mobile optimization tools
- Analyses responsive designs pros and cons
- Examines data and statistics that track responsive design adoption and performance across mobile,
- Evaluates whether dedicated mobile websites have their place, and detail the ramifications for HTML5 development.