Error getting theme layout

Responsive Websites

Posted @ 2:24 pm by Grady Kuhnline | Category: Creative Design, Mobile, Technology, User Experience | 0 Comments

The hot trend in web development today is responsive design—using the same website for your mobile and desktop experiences. In the past it was popular to deploy a mobile-only website in addition to a full desktop experience. However, this practice is changing because of the proliferation of fully capable mobile devices and the broad browser support for media queries.

No More M-Dot Websites

M-dot websites—as in m.your-website.com—came out of an era when phones were far less capable than they are today. As impossible as it is to imagine, there was once a time when the iPhone didn’t exist at all. Just a few years ago smart phones offered an abysmal web experience—the real web wasn’t possible. Because of this limitation, most companies opted for a simplified experience for their mobile visitors.

This streamlined mobile experience was usually deployed on a separate sub-domain, like m.facebook.com. This m-dot solution creates a few problems. First, with separate sites it’s very common for the mobile site to fall out of date. Second, as phone and tablets mature, mobile users are being punished with reduced-experience websites that underestimate the power of newer mobile devices.

Today’s devices are fully capable of displaying nearly any website, unless it’s a Flash website. In fact, there’s a good chance that your website will work just fine on an iPhone or Android phone, even if you didn’t account for mobile devices at all when your site was built.

The Rise of Mobile

Because the vast majority of mobile devices are just as capable as desktop browsers, there’s no longer a compelling reason to provide a separate mobile experience. Mobile browsing’s market share continues to rise as people start to get more comfortable with their new, fully capable devices. In the US, mobile market share is at 10.92% (as of September 2012) and some of SolutionSet’s clients are seeing numbers as high as 25%—over a quarter of their site visitors on mobile. To add some perspective, mobile as a whole is competing well with the big three browser makers for market share. In the United States, IE 9.0 is the most popular browser with a 25.9% market share and is followed closely by Chrome (23.31%), Firefox 5+ (17.1%), and IE8 (14.34%).

Even more interesting is that individual mobile browsers are starting to out-compete some desktop browsers. With the national mobile market share nearing close to 11%, mobile browsers are outcompeting desktop Safari (4.52%). Are you still supporting IE7 on your website? In the US, IE7 is likely to be 1.51% of your users. However, Android and iPhone (as of September 2012) are likely to make up about 4.4% and 4.65% of your users respectively. It is now more reasonable to spend time supporting mobile users than it is to support old versions of IE.

Implementing Responsive Design

Responsive design uses a new HTML5 technology called media queries to change the styles for a website depending on the device’s screen resolution. This means that it’s possible to provide different visual styles, for instance, to an iPhone screen (320×480) and to a laptop screen (1440×900). The typical changes made to a site with responsive styles are to account for the reduced screen real estate on mobile devices. Since only the styles are changing, it’s possible to use the same HTML for all devices because you only need to maintain content for one site while supporting a wide array of devices.

The up side is that the CMS development team and the content team can save time because they don’t have to support multiple parallel websites anymore. This ensures that mobile devices are given the proper respect and that mobile content isn’t going to slowly drift out of date.

The down side is that the visual design phase of the project is more complicated because designers need to provide extra designs. In a typical responsive design project, designs need to be produced for the full desktop experience as well as additional designs for the tablet and mobile experiences. Although the various supported platforms will be based on the same basic style guide, there’s no way around the need to produce additional design comps.

The front-end development (HTML and CSS) will also take longer because responsive designs are more complicated to implement. However, as responsive design techniques and mobile capabilities continue to mature, the added development time will begin to decrease. It’s important to reiterate that most websites cannot afford to marginalize mobile users. Web developers are already accustomed to supporting a range of browsers because of the need to support legacy versions of IE.

Handling Responsive Design on Unsupported Browsers

While the benefits of responsive design may be compelling, there are a few browsers that don’t support media queries. As of September 2012, more than 80% of browsers support responsive design natively. In reality, the only browsers that don’t support media queries are IE6, IE7, and IE8. When a browser doesn’t support media queries they simply receive the desktop version of the site.

There are technologies that can bring media query support to these older browsers. However, in general those techniques should not be used because they can create more bugs than they fix. Those older browsers may miss out on some of the fancier features of the responsive website, but they’ll see a familiar experience. More importantly, they aren’t likely to ever know what they’re missing.

Conclusion

For most websites, mobile has finally arrived as a first-class platform and websites need to be designed to accommodate the limited screen size and take advantage of the increased device capabilities. Usage of mobile phones and tablets is only going to increase as manufacturers continue to compete aggressively with Apple in the mobile space. Luckily, the technology already exists to provide a flexible method for deploying a single website on a wide array of platforms simultaneously.

 

Author: Grady Kuhnline is one of the original members of the SolutionSet technology team. Grady currently leads the front-end (HTML, CSS, JS) team at SolutionSet.

Leave a reply

Error getting theme layout