Responsive Design – Staying Ahead of the Curve

March 22, 2013 | Tim Clayton

Responsive Design – Staying Ahead of the Curve

Responsive design – the web design approach that allows one website to be accessible to a broad range of devices – has changed the web and the way we build websites. As more and more devices and screens come into play, we may find ourselves trying to predict “what’s next” so we can prepare for the unknown. But this guessing game is not one we are likely to win. Instead, web designers are better served taking a step back to determine how to accomplish the overarching goals of each website while working within the ever changing device world.

To get ahead of the curve, we must think about responsive from the beginning of each project, collaborate every step of the way and fully commit as an organization. Thinking responsive means taking our mental idea of a website out of the traditional definition where the desktop computer is the home or the “real” site. Our website and its content should be just “at home” on our tablets and phones, and ready to adapt to next year’s devices. Key elements that make our website at home include consistent layouts, performance and usability. Using modular content, design and development as building blocks for our site places us in an excellent position to respond not only to current device trends, but to also handle and adapt to developing and future trends. Our website and its ability to communicate will be independent of device and screen sizes because our information maintains its integrity regardless of context.

At The Berndt Group (TBG), we work closely with our clients to build future-friendly websites from the beginning of our process. This means taking responsive design out of the surface “technical implementation of responsive views and media queries” and developing a holistic strategy that will align each website’s goals with users’ needs starting at the root of the site – the content.  This strategy diverges from the idea that mobile and desktop users have different needs. We need to embrace the fact that we can’t predict what device people will use to visit and interact with our websites. We must make our content available regardless of what we expect users will do.  We start with the content itself.

Content Strategy

Knowing that people will access our site from a wide range of devices has major implications in the planning and strategy stages of the site development, so we must first examine our content strategy. Developing modular, structured pieces of content is a necessary first step toward developing an organized system of content that will become more beneficial to us over the lifetime of the website. By structured content we mean distinct headlines, associated metadata and content that can stand on its own. By structuring content and associating it with appropriate metadata, we increase its value as small units of information that can accentuate other units of information, providing an information path for users to reach deeper into content or move laterally as needed. Content becomes more searchable as well as more identifiable, and importantly, we can guide users to appropriate content because it has metadata that describes its meaning.

If we are rebuilding a site or migrating content, we need to conduct content inventory with an eye toward modularization and reuse. Separating content from presentation is a key principle that pays dividends down the road in the development of the site. By making this separation, we allow the content to fit into a variety of forms – for example, an item in a list, a piece of related content or a tweet. It is important to remember that users may view our content in an environment not of our choosing – like a popular social media site or an application that doesn’t even exist yet. By beginning with discrete chunks of content, our content is more flexible and platform independent. By associating this content with metadata, we can index it. This provides the key that enables our content management system (CMS) to help us present content. These are the important first steps of modularization that will help us carry through our strategy as we continue to build the site. They add value to the CMS and make full use of its capabilities, providing relevant or personalized content based on gathered knowledge of users’ interests or needs.

Information Architecture

Developing a site’s information architecture (IA) is a major step in the responsive process. We continue the themes of modularization and reusability and add new ideas including performance, in-page content hierarchy and layout patterns. Developing a site’s IA is one of the most critical steps in implementing a flexible, responsive design. Decisions on content usage, layout and navigation will have repercussions as the site design and development progress. At this point, the team will think about how decisions impact users across a variety of devices, touch screens, non-touch screens, etc. Prioritizing one over the others is likely a mistake given how the technology market has evolved drastically over the past several years. That said, a careful analysis of user behavior coupled with informed projections can help the team to identify potential blind spots or higher than average use scenarios for specific subject matter.

As the information architecture progresses, the collaboration between IA, design and front end development should be much closer than in the past. An iterative process where everyone shares ideas, feedback and perspectives will produce a solid, well-thought-out foundation for the site. This includes producing a meaningful content hierarchy that works in a logical order for our HTML structure, the basis for our development. Design can then translate this into a visual language for users that strengthens the message and communicates clearly, regardless of specific layouts.

Design Considerations

There are new challenges for design. Performance, element reuse, legibility and adaptability are becoming even more important. Finding a balance between aesthetic desires and site performance has become critical as users expect snappy responses from websites. It is becoming increasingly important for designers to have a comprehensive knowledge of how the site will be built, as well as to understand the capabilities and limitations of HTML and CSS, as they envision and prepare for how their design expands and contracts across a range of screens. Balancing these considerations and working with an infinite variety of screens brings a whole new set of challenges and opportunities for our designers.

Front-end Implementation

Front-end development is where responsive design was initially popularized and the term coined by Ethan Marcotte. As we have come to discover, using media queries to display a different set of styles to our HTML structure is really just the tip of the iceberg with responsive design. To succeed, the entire team must strive toward the goal of an adaptive, well performing site. A switch in CSS on content that wasn’t developed modularly isn’t going to pass the test of the average user, whether the layout doesn’t look quite right, the navigation is difficult to use, or the site is painfully slow. The front-end developer’s job is to continue to modularize and reuse, including building a structured and organized CSS file that has room to grow and scale as the site expands or changes. Reusable classes that can shape and modify the presentation of our content in a variety of display scenarios create an organized yet flexible environment for our site to grow. This is also where our structured content comes in handy. Structured content makes sense and works well with our modular styles.

Evolution

All of this planning and collaboration throughout the process feeds nicely into our content management system. Our developers have been thinking modularly for years, so it makes sense that we now hand them already modularized HTML structures that will work hand in hand to increase the value the CMS can provide. We can provide relevant or personalized content and display it without worry about the environment or that our design is going to break.

All of the work that the team has put into planning produces a structured site, where pieces have independent meaning and integrity while complementing each other to build powerful systems. We have added value to our content which lets the CMS do its job of distributing that content in ways that provide a high value for the website as well as users. While building a website is never easy and processes will change, with an overall commitment to a responsive goal and to building these processes into every part of the site’s design and development, we are well-positioned to handle the changes that will inevitably come, as we have structure and organization at every level of our responsive design process.

About the Author

tim-avatar
Tim Clayton

I am a UX Designer at TBG. When not working on websites, I am likely to be found on a run, at the pool, or hanging out with my family.

Leave A Reply

comments powered by Disqus