Are you struggling with the myriad of browsers and devices that your customers are using? With new smartphones out almost every day, It’s no secret that mobile browsing is on the rise. This has lead to many companies rushing to explore a range of solutions to make their website work across these devices. The most common solution is to create a mobile version of a website, but with a plethora of screen resolutions encompassing mobile, especially when 7” and 10” tablets are often lumped in as mobile, this often provides a less than optimal solution for a wide range of devices. Another solution is to create apps, but the range of screen sizes, now combined with the need to produce apps for different mobile OSes, often leaves companies with a lot of work and little to show for it. Some companies choose to ignore the problem and assume everyone can see the desktop version of their site. A solution is needed that doesn’t make the user find the optimal device, decreases workflow, and optimizes the experience for the user’s device.
For many years, web developers have strived to create fluid layouts that adjust with the size of the browser window, called the viewport. The biggest issue with most approaches has been a lack of respect for the typographic grid, meaning line lengths get to an unreadable length, and there is no optimization for image size on smaller screens. Luckily, these problems and many more have been solved with an approach based on a well thought-out methodology called responsive web design. Formalized by Ethan Marcotte, responsive web design is quickly being adapted as the solution for moving your existing site into one that will serve the needs of today’s devices.
Responsive web design is the idea of looking at the size of the viewport and having the site design adjust according to the width. It sounds wonderfully simplistic I know, but as with most great ideas there are a lot of complexity you don't see. Things such as a flexible grid, flexible images, a way of knowing the type of browser being used, and of course a backup plan for older browsers. The desired outcome is for the grid—the graphical layout for a website—to adjust itself in an aesthetically pleasing way despite the width of the browser. The best way for you to experience this is a simple demo. We recently did the 2011 annual report for CFA Institute using responsive web design. This video demonstrates how the site adjusts for different sizes—you can instantly see the fluidity of the layout and the attention to detail.
Of course, I encourage you to view the site for yourself. Another example to try out is The Boston Globe.
While response web design requires a bit of a learning curve and is more time consuming up front, the benefits to this approach are numerous. The methodology ensures you are taking a grid-based approach to design, creating a more consistent visual experience. Supporting one platform—the web—instead of multiple, frees you from having to create multiple workflows for content creation across different platforms. Testing time is decreased. An mostly, because responsive web design applies a web standards based approach to web sites, the biggest benefit is that your site is more likely to work properly on the device your user chooses, providing a more enjoyable customer experience.
How do you get started? It truly requires a cross-discipline approach, so getting your designers, developers, and content creators up-to-speed is the first step. Ethan Marcotte’s book is a great place to start. An on-site workshop for your team, lead by developers and designers that have created response sites is a quicker approach. And of course you can engage a company like ours to create a site for you, transferring the knowledge to your team at the end of the project. I’d love to hear your questions and comments below or on Twitter ( @larryroth ). If you would like to talk further, you can email me to arrange a time.blog comments powered by Disqus