In the last installment, Improving Responsive Web Design Part 1 – The Problem, we explored some of the common challenges associated with Responsive Design. Rather than going directly into our proposed solution to these challenges, which we will refer to as Responsive+, we wanted to first share some insight into some practices and observations that we have found invaluable in ensuring the success of a Responsive Design website project.
Convincing the Skeptics
Do not try to oversell the promise of Responsive Design.
@brad_frost has popularized this graphic that attempts to illustrate the current state of devices that tap into the web. It also offers a vision of a bleak future which suggests that you will be reading your favorite blog site while standing in front of your refrigerator, door open, munching on Chinese leftovers from a late night coding session.
Not only has this vision fueled skeptics with more reasons to challenge the potential of Responsive Design, it more importantly confuses the context. Yes, the web is going to be integrated into everything from thermostats to toaster ovens, but let’s not forget the context with which someone would use these web-enabled devices. Most likely they are not going to be visiting marketing focused websites, rather these devices will offer different experiences and functionalities utilizing the web as the vehicle for integration. Yes, there are some clear exceptions to this that are a reality today, mainly the growing base of Web Enabled Smart TVs, but this still falls in line with our general categorization of devices. In the end, at least for the near future, the painted picture is not as drastic as it is made to look. There will be only small screen and large screen and few minor variations in between. And our current design assumptions should map accordingly.
If a site does need to adapt to a wide array of devices with different features, usability guidelines and general purposes, then responsive design might not be the right solution to your problem as it will quickly lead to an over complex solution that is next to impossible to maintain.
So, if you need to convince your client, boss or internal marketing team, below points may be more than enough.
- Single URL, same content. Significant impact on the SEO rankings.
- User First meaningful content strategy and information architecture.
- Fosters collaboration among different groups, allows being more agile and nibbling in our approach to design and development.
- Simplified and usable layouts, focused on what is right for the end user.
- If done right, single code base, faster development, easier maintenance. Cost savings and improved ROI.
- Performance improvements, faster page loads.
Collaboration
This is a key area were most Responsive Design projects fail, not due to the approach’s shortcomings, but rather due to its strengths. A good Responsive Design website REQUIRES close collaboration between IA, Creative, and Technology. If you approach a Responsive project in the same manner as a traditional waterfall website build out, you are setting yourself up to either fail or at best release a crappy website. This is an instance where an IA handing wires over to a Creative that paints them into comps and then pass them off to tech to implement is just not going to cut it. Good Responsive websites are a result of the union between IA, Creative and Tech. Each discipline needs to work with the other to optimize the site design to achieve better design decisions with the goal of building a more usable, user-friendly and better performing site.
This is a major reason to use Responsive Design, as it insists on breaking with tradition and working together for the sake of the product leaving all egos’ aside. Once again, if your organization cannot support this kind of collaboration, this design approach might not be the right one for your project.
Content First, Then Repeat…
It is not Mobile First or Desktop First, content still remains the king.
When designing a Responsive site, start with device agnostic content, sketch how you want to layout the content and then reformat to fit across multiple breakpoints or IAs.
While sketching these ideas, it is very helpful to utilize rapid prototyping. It is too early in the lifetime of Responsive Design for anyone to be able to authoritatively dictate a solution the first time. It requires an iterative process of tweaking, tuning, and sometimes even throwing away ideas that simply don’t work. Each round of iteration should involve at least some form of informal usability testing to ensure that the website is usable across all devices. Otherwise, you have missed the point of using this design approach in the first place.
Modular Development
File size is important not only for Mobile, but also for desktop as it is an easy to measure indicator of site performance. As you iterate through your design and even development cycle, keep an eye on file size to ensure that no single asset is ‘costing’ more than it should or could be. A prime example of this is ambient graphics such as backgrounds, make sure the over all design makes sense both creatively and technically.
This applies to both media assets as well as script and CSS includes. For all assets consider making them more modular so that items can be loaded as needed, rather than a single monolithic asset all the time. Consider multiple versions of images for large and small screens and modular JavaScript to not bog down the desktop experience with unneeded mobile device supporting code.
And yet there’s more…
Following these guidelines will surely improve your success rate with creating Responsive Design websites, at least we found that they made a big impact on our projects. But as with most things there is still room for improvement which has led us to the discovery of a solution we refer to as Responsive+…
(Next installment coming soon!)
Contributions from: @sashasklar, @JohnnyReading, @mutootum