An Approach to a Responsive Design Project

Recently, I was responsible for writing a brief presentation on responsive web design. In my research, I found there are three key concepts to traditional responsive design: media queries, flexible grids, and flexible images. Knowing the key concepts is not enough, though. What good are they if the designer can’t adapt to the work?  I found having the ability to react to all the different types of work we do is key not only for our success, but our progression as designers/developers. Both the project and the designer/developer need to be flexible in order for a responsive web design project to work.

When thinking of responsive design, the designer should always ask a few simple questions:

1. What platform/devices has the client requested or what should this site be optimized for?
2. What content is absolutely necessary for the user?
3. What content is feasible to deliver to these devices?

These questions will help determine how responsive your site needs to be, or if in fact you need a responsive design at all. Alternatively, you may require a different mobile site altogether.  Understanding that each project is different and being able to acknowledge this is the first and most crucial step to becoming a responsive designer.

During the initial project discussions, the client outlines the platform/device requirements. It is the designer/developer’s responsibility to not only know, but also inform the client on how much work is required to include the multiple platforms. You must make sure the client understands responsive design is not as simple as shrinking an application to fit a smaller screen. What content is absolutely necessary for the user, in my opinion, is the most difficult to answer.  This is why a good content inventory strategy and in-depth discussions with your client is crucial. Determining which content is needed to give the consumer the best possible experience will be the greatest factor in determining just how your responsive design will work.

Asking the third question of what content is feasible to deliver, will help you further narrow down your content and hopefully help with your mobile strategy.  If none of the content can feasibly be delivered through a responsive site then in all honesty the project scope may need to be narrowed or your best option may be to create a separate application.  However, maybe you’ll find that delivering the content is well within the realm of possibilities. Then applying a responsive design to the project should be a serious contender as a solution.  This can be a tricky question to answer especially as it may require making extra content to account for different devices (i.e. separate images for the desktop and mobile versions).

Responsive design has been around since the introduction of media types in CSS 2.1, but as the CSS spec grows and new devices are introduced (or invented) responsive design will continue to grow and change.  An adaptive designer should be able to identify the factors to help determine if they need a responsive design and in turn become a more responsive designer.

Further Reading

• Responsive Web Design
• Responsive Web Design: What It Is and How To Use It
• HTML5 – Responsive Web Design

Want to learn more about Apexon? Consult with an expert here.