Do you browse the web on your phone or computer more often? Is there a difference? How many times have you opened your Yelp mobile app, turned on your iPad for Google Maps and chatted on your laptop to see who’s around?
Past distinctions between “mobile user” and “laptop user” have become just that: past distinctions.
But here’s the issue: only users feel this way. Website creators and strategists still consider each device deserving of its own experience. So as I switch between devices to browse the same websites, I discover inconsistencies. Inconsistencies in the placement of information, the use of logos and the features I can access. I cringe when I see the ominous link: “click to full site.” What a fail in user experience.
There’s a better way
Responsive web design is a growing trend in the coding world. It lets web content adapt to viewing and system needs from within one codebase. No rerouting to a “mobile site” necessary. Instead of three distinct websites for a computer, smartphone and tablet, a company has one website that is functional, well designed and optimized across all three. Touchscreen and geolocation capabilities can be activated on a mobile or tablet, while right clicks and hover effects can occur on a computer.
The following screen shots show a full-sized window and condensed window of two news sites, The New York Times and The Boston Globe. The former uses traditional web design and the latter uses responsive web design.
The New York Times’ condensed window loses its name and front-page articles. An advertisement steals prime real estate until you scroll back manually.
The Boston Globe’s homepage resembles a smartphone interface in its condensed window. Pictures, navigation buttons and layout shift, disappear or simplify to accommodate the changing dimensions. Relevant information remains central.
What does this mean for us?
Yes, The Boston Globe website looks better, but responsive web design doesn’t stop there. It also addresses the back-end issues that arise when developing across devices.
If we design first for the system with the most capabilities—a computer—we are actually designing for the least amount of devices and users. The site must constantly be scaled back to ensure it works on all operating systems. But as any writer, coder or designer knows, it’s a lot harder to cut content and simplify after the fact.
If you design for the most limited system—a smartphone—you ensure your site will work for everyone, everywhere.
No longer would it matter if your site is accessed from a Mac or a PC, an upgraded smartphone or a phone’s first release, an iPad or a Kindle Fire. By building up from the most simplified version, you guarantee that the most important content can always load and run. The default is function and purpose.
The most important lesson is to start with needs and priorities—and then add bells and whistles. No one cares about the great photo of your restaurant’s best dish if they can’t find your hours and location.
Jessica Sochol is an associate information architect for Siegel+Gale’s New York office.