Design responsively for the future... or risk fading away

Every time a new technology device comes out with web-browsing capability, clients will ask question, “Will my website work?” If the answer is unclear, or no, designers then have to go back and create a new product… or maybe they don’t. 

Source: Laura Mihelich

Screen size difference between mobile devices and traditional laptop
computers creates a need for responsive design. 

As a graduate student on the Interactive Publishing track at Northwestern University's Medill School of Journalism, I have spent the last several quarters learning about the implications of web technologies. Each time responsive design comes up, it is met with resounding positivity because it means that websites can be viewed on all screen sizes and platforms.

Over half of adult cell phone owners in the U.S. use their mobile device to go online, according to recent Pew research. This is why clients are concerned. With more people connecting online via mobile, businesses could be affected if they are unreachable via cell phone browsers. This trend is not only U.S. based. According to a recent article in the Australia Business Review, 94 percent of surveyed Australians have researched a product or service on their cell phone, however 79 percent of Australians businesses do not have a mobile-friendly website.

“Statistics show that businesses are playing catch-up with the consumer, who uses an iPad or mobile phone as a laptop replacement,” the article said, which is why designers need to know responsive design in order to keep up with clients, users, and technology.

Several media outlets have already made the switch or are planning to move to responsive design. The Boston Globe seems to be the leading example of a 100 percent responsive website, which adapts to both screen size and touch based on the device. ReadWriteWeb, a leading web technology blog, also recently announced they were planning on replacing their native app with a responsive website, according to an article in the Neiman Journalism Lab.  By thinking about responsive design, ReadWriteWeb actually found that this change makes more sense for their audience, as the blog’s readers tend to look through the site on a Safari browser rather than the iPhone app.

Through my experience and research at Northwestern, I believe that when thinking about moving your clients to responsive design websites, there are a few things you should consider first:

1. Learn - As a designer, there isn’t much you can do until you’ve learned the capabilities of responsive design. 
2. Experiment - One of the best ways to learn is to experiment with liquid layouts. There are several framework systems that can be used to create responsive sites such as Foundation and Twitter Bootstrap. If you are using a content management system, such as Wordpress, there are plenty of customizable, responsive themes to choose from on sites such as ThemeForest.
3. Research - Before you can create your responsive website, you have to know the audience you are building for. This audience will change depending on the client.  As with ReadWriteWeb, clients may find out more about their audience through this process, which will help you when developing the tone of the new site. Here are some example questions:
• “How many people find the website via mobile?”
• “What behaviors do viewers need to perform on the website?”
4. Design - When designing a responsive website, there are several thing you need to think about:
• Using HTML correctly - With responsive design you want to make sure that the most pressing information appears on top of the page on every platform, so make sure to structure HTML to reflect this layout.
• Keep it simple -  You don’t want to overwhelm the users with too many items on the page or a wall of text. Therefore, again, keep it organized and to the point. 
• Optimize your photos for web browsing - Reduce your graphic/image resolution. Large, high-resolution images will slow down smartphone browsing, and users will not wait around if you site is not easily accessible.

Don’t get stuck in a design rut. It’s easy to continue to do things the same way. However, because technology is always changing, designers need to as well. Have fun and experiment. You never know what you will come up when using the browser as your viewing platform.

Laura Mihelich is a graduate student at Northwestern University's Medill School of Journalism, focusing on interactive publishing.  She received her bachelor's degree from the University of Iowa in Journalism and Psychology.  Laura loves design, web coding, and cooking, and can almost always be found on Twitter keeping up with the latest technology news and finding design inspiration. Twitter | LinkedIn