True Responsive Web Design Requires a Responsive Philosophy
January 5, 2015
Responsive web design is term that has found a home in just about all conversations related to contemporary website design and development, both with designer and website owner alike. Responsive website design essentially allows web designers to create websites that adapt to all screen sizes and is one of the most empowering design theories imagined since the birth of the web design itself.
Creating a user interface that adapts to multiple screen sizes is only the tip of the iceberg however. With the evolution of the mobile web and the amazing devices we all now carry in our pocket, users expect digital experiences that not only respond to the device they’re using, but also their geo-location, time of day, what they’ve already read, and related events happening in real time.
In order to truly engage users we need more than just responsive website design – we need a responsive philosophy.
Traditional Print Publications Benchmark The Responsive Philosophy
If we pick up our favourite newspaper or magazine – I know, you probably don’t read physical publications much anymore, if at all. I don’t either, but as a designer I still take notice of this media because fundamentally, they are the foundation for everything we create on the web. Traditional printed publications don’t just have a handful of page templates or layouts they reuse day in and day out. They literally have hundreds of unique page layouts that give the designer the ability to adapt to any combination of content with a dedicated page design that can give each piece of content its proper editorial weight. We’ve never truly adapted this practice to web design for some reason though as most websites use the same home page design 365 days a year and this usually applies to content pages as well. If we take a moment to observe this practice, especially with online news publications we quickly realize that to our audience, whether Word War III breaks out or the Leafs miss the playoffs again, the page always looks the same.
The design and communication limitations here are not just impacting the user experience for the audience, they’re also impeding the website owner, company or brand from effectively sharing their message or marketing their product.
If we take a moment to think beyond the common web design and development theories, especially for database-driven or content managed sites that rely on just a few page templates to build their page layouts, I think we all would agree that the next generation of websites should do a heck of a lot more than simply respond to devices, we’ve figured that part out by now. With this foundation, we should approach web design with the philosophy that the interfaces we create for our audience should respond to content, context and devices so that at any given time the experience is meaningful to every user.
A Responsive Philosophy For Our Every Day Web Design Approach
Reusing design elements is a great approach to take when creating your responsive web design philosophy. Instead of investing time and resources in creating landing page treatments, focus on creating design elements for the content itself. With this approach, content publishers can reuse groups of design elements for broader applications throughout the website and allow these groups to respond to the intended context as well as screen size.
For example, on a landing page a gallery of images may expand the full width of the page whereas the same gallery on a content page may scale itself back to take up only half the page width. This allows web designers and content publishers to create truly a responsive design without having to repeat work that they’ve previously done.
Another opportunity to apply a more responsive design philosophy comes at the bottom of an article or a content page. With the advancement of search engines it’s becoming more of a rarity for users to land on the home page of a website initially. Most traffic is funnelled directly to an article page where more focused and in depth content lives. Once they’ve finished reading the article they were drawn to we have a golden opportunity to convert them into multipage or returning visitors if we follow up the article with a more suitable path to follow deeper into our website than simply inviting them to comment or consider a related article.
Something I’ve noticed app designers experimenting with is allowing users to continue scrolling at the end of their article back into the landing or section page that the article page lives under. This practice has real value as the landing or section page is already carefully designed and features curated content to engage the audience. For the user, at least for myself as a user, this flow feels very natural and comfortable and increases the likelihood that I will dig deeper into the website and consume more content. Remember, reduce the number of clicks where ever and whenever possible!
To take this approach even further you can determine what type of device each visitor is viewing the website on, the time of day they’re accessing your content, their geo-location, whether they’re a new or returning visitor and where they’ve come from previously. Using this data, you may serve up unique content to each visitor based on their individual profile and ultimately enhance their user experience further with a finely tailored experience.
The Future of Responsive Web Design and Responsive Philosophy
As the concept of responsive design philosophy becomes more widely accepted and practiced web designers will undoubtedly create new and exciting ways that we can create more intuitive user experiences for our audience and ultimately increase user engagement.
To truly live a responsive design philosophy we cannot simply redesign a website. We must work closely with creative web developers to create more dynamic website platforms and systems that are able to record, analyze and act on user data in real time to create a truly customized experience for each user.
What it all boils down to is that in order to advance the web to the next step, we must understand and embrace the notion that a responsive design philosophy does not simply mean we create user interfaces for a variety of devices. It means we create a complete, responsive experience that responds to any context, any location, for any individual user.