By 2015, many people in North America will be using more then five separate devices to connect to the Internet, according to a report by Cisco (cisco.com/en/US/netsol/ns827/networking_solutions_sub_solution.html).
The majority of those devices won’t be PCs—they’ll be tablets and smartphones, even TVs. We’re talking screens ranging from a few inches to ones that are wider than you can stretch your arms.
What this means for anyone with a website is that there’s a lot more room to enhance the way that people interact with your content by customizing it to fit the precise size and type of device.
A long time ago (in Internet time) people realized that a website that looked amazing on a 15-inch laptop screen was no good on a small mobile browser.
With the proliferation of screen sizes, this is truer than ever. But, it’s not feasible to create a different site design for every possible screen size, and no one wants to build to the lowest common denominator.
A smart solution for this multi-device dilemma is an approach called Responsive Design, which automatically reflows the content and layout of a website to fit the viewport size. This concept has been around for a while, but advances in mobile and desktop browsers over the last year have made it an eminently relevant solution for web products that need to adapt to multiple devices.
At first blush, it sounds a lot like a mobile website. It’s not.
Mobile websites are separately maintained and designed versions of their desktop counterpart. There, the main goal is to optimize web content for mobile use cases and displays. And their main approach to coping with the spectrum of screen sizes and devices is rather simple: if the website detects that you’re a mobile device, you get the mobile website.
Responsive design takes this cut and dry, ‘mobile or not’ website methodology a few steps further…
Instead of building two separate sites in two separate sizes—desktop and mobile—responsive design creates a single, dynamic website that uses parameters to adapt the content specifically to match the size of the device’s screen and even such capabilities as touch, screen orientation, location awareness, etc.
For a convenient example of a responsive design site, visit: starbucks.com
On your mobile device, the website will automatically scale to suit your screen size. On your desktop, if you bring your cursor to the bottom right corner of the window and drag it to resize your browser, you’ll see how it adapts to various display sizes. Not only does the layout change, but the content order and size as well.
Because responsive design uses one website to suit a range of devices, it can be more expensive to implement than a traditional web or mobile site. Over the long-haul, however, you’ll only have one website and codebase and content map to maintain, meaning lower maintenance costs.
There isn’t any hard and fast logic for selecting responsive design, but here are some simple guidelines that can help steer you in the right direction:
Responsive design will be great for you if:
- You are building a website from scratch that will see mobile traffic
- Many of your current website’s visitors use tablets and smartphones to view it
- The appearance and design of your website (on any device) is an important part of your brand
- You’re considering building dedicated sites for different devices
You may want to avoid responsive design for now if:
- You don’t have the cash to shell out for a responsive design site; consider building a mobile site first and scaling it up to a desktop size in the future
- You have a large, legacy website, with hundreds of layouts. Starting from scratch likely isn’t an option. Instead, start using responsive layouts with the most popular pages for mobile devices.
Responsive design can be an elegant solution to making your website shine for everyone accessing it, regardless of device. Ultimately, whether it makes sense for you depends on your unique business case and web development needs. So our best advice is to sit down with a developer or design firm that knows both sides and can give you an informed recommendation for your mobile website needs. credit-n.ru