Optimizing your website for smartphones and tablets.

Responsive web design is a method of creating websites that are optimized for any device: smartphones, iPads, Android tablets, laptops, desktops, and even TVs. It doesn’t matter what the visitors screen size is — the website will render perfectly without the need to resize or zoom in on a page to read the text.

The most pronounced benefit of responsive web design is apparent on smartphones. A responsive design will give visitors large easy to click buttons for navigation, and typically a single column of text, set at a proper font size for reading on a phone.
See the illustration on the right for an example.

smartphoneIf you have a smartphone you’ve probably experienced trying to read a full size website on your phone. It is possible, but it requires zooming in to use the navigation and read the text. Responsive design is the remedy.

Smartphone usage is going up every month.

As of June 2012, 55 percent of U.S. mobile subscribers own smartphones, and 2 out of 3 Americans who acquired a new mobile phone in the last three months chose a smartphone instead of a feature phone1.

And tablets are hotter than laptops.

Tablet shipments are expected to reach 240 million units this year, well beyond the 207 million notebooks that are expected to ship2.

When someone visits your website on a tablet they navigate by touchscreen rather than a mouse. A responsive website makes fine adjustments to optimize the navigation and text size for tablets.

So how does a website cater to all these devices and screen sizes?
The solution is to make a website that works equally well on every device. But that’s no easy task. A responsive website uses “media queries” to determine the size of device that is requesting the page. Then it chooses the appropriate styles to apply to the website content.

Layouts may shrink from three columns for a desktop view, to two columns for a tablet, and then to a single column of content for a smartphone. The main navigation for the website typically changes to “finger-clickable” buttons on smartphones and tablets.

No app or dedicated mobile website needed.

Although dedicated mobile websites or specialized apps are an alternative to a responsive website, both typically require maintaining relatively duplicate websites, which simply doesn’t make sense for most financial advisors. Responsive web design allows you to publish a single page or article and allow the stlyesheets to format it for each device.

The Boston Globe, Starbucks, and Microsoft go responsive.

One of the most famous examples of responsive web design is BostonGlobe.com. To check out what they’ve done simply go to the website and re-size your browser window horizontally. The website will automatically adjust to the current width of your browser.

Perhaps the best looking responsive design example is Starbucks.com. They feature a “mega-menu” on their desktop website, and then do a beautiful job of consolidating it for their smartphone menu.

To see a giant like Microsoft.com use responsive web design techniques really demonstrates the direction websites will continue to take. The design itself offers a level of cleanliness and space that is missing on most corporate sites.

Note that of these three websites, Starbucks and Microsoft both feature design layouts most similar to what a typical financial advisor would require.

SEO and maintenance.

SEO: A single URL for each page means that links you receive won’t be split between a mobile and desktop version of your website. When someone links to one of your pages, whether their on a smartphone or not, the link remains the same.

Maintenance: Once your website is responsive, there’s very little maintenance involved to assure usability across all devices.

Is now the time to convert your website to a responsive design?

How does your website look when your prospective client views it on a smartphone?

The answer depends on your budget. Chances are your website works well enough on a tablet, but as more and more of your visitors access your website via smartphones, the need to accommodate them and make the change grows greater.

What does Google recommend?

Google, the developer of the Android operating system, recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only stylesheets to decide the rendering on each device3.

Although Apple makes no specific recommendation (they sell a lot of apps), a responsive website will have the same benefit on iPhones and iPads as it does on Android devices.

1 http://blog.nielsen.com/nielsenwire/online_mobile/two-thirds-of-new-mobile-buyers-now-opting-for-smartphones/
2 http://www.bizjournals.com/memphis/blog/2013/01/tablet-sales-set-to-outpace-notebooks.html
3 https://developers.google.com/webmasters/smartphone-sites/