January 15, 2013
Way back when websites were first created, they were intended to be viewed on a desktop computer screen, but as our viewing habits have evolved so have the devices we use to view websites. You might be reading this post on an iPad or scanning it on a mobile device. These evolutions have been great for users, but have created challenges for web designers who need to make the same content work on screens that range from four inches to 27 inches. What’s the solution? Responsive design.
Responsive design is a flexible design system which can make a single, cohesive design work for multiple devices. Rather than requiring a separate mobile site, a responsive design can adapt (or “respond”) to the device on which it’s being viewed.
Even if you’re not directly involved with the design of your association’s website, you should be aware of this important development in web design. It was mostly spurred by the recent growth in smartphone and tablet use, which has changed how people expect their information to be presented. These new technologies, along with Twitter and Facebook, have created the expectation of bite-sized information. Instead of pinching and zooming on a device for long content, users want to see consolidated and easy to read chunks of content. Your website should fit on their device, not have extraneous material, and have a navigation that is simple to use.
So how does responsive design work? It creates a set of rules through media queries in a website’s code that instructs the page to behave differently in varying environments. Visually, elements of a webpage rescale, collapse and cascade vertically as the screen width narrows on devices (tablets, smartphones/handhelds) when compared to the desktop view. Designs typically start with a grid system such as 960.gs, which then allow for the site to easily reformat along set breakpoints. The designs can even detect the orientation of the device (portrait or landscape) and present a view for those as well. Even if users don’t realize the adaptations are happening, they will appreciate a better viewing experience.
You might have considered developing a standalone mobile application for your website, but our recommendation is just to set up a responsive design website that will work on mobile devices. Applications can be great for a lot of reasons, but they require separate designs for iOS and Android, which can be expensive. Plus, updating content on a responsive web design is immediate, as opposed to an app which needs to be updated separately.
Is your website designed to adapt to mobile devices? Want to learn more about how you can set up a responsive design? Shoot me an email at firstname.lastname@example.org.