The mobile market is exploding with unprecedented growth, and marketers are no longer hesitating to embrace responsive web design.
As more and more businesses choose to adopt this new approach, it has become crucial for anyone in the web industry to understand the implications of creating a responsive user experience.
It’s become our responsibility as content strategists, information architects, designers, developers, and digital strategists to do more than just squeeze a website onto the mobile screen of a commuter: we have to plan, design, and build a device-agnostic experience.
Responsive web design offers a great solution for future-proofing, but may not always be the best solution. In some cases, mobile-specific websites and native apps can offer rich experiences that aren’t always ideally suited to responsive styles.
An important first step in dealing with the mobile landscape is taking the time to choose an approach, whether responsive or mobile-specific, that best suits users’ needs. A great way to determine if a responsive design is the best solution for a particular site is to identify users’ top tasks. It’s surprising how often seemingly opposing user groups have a huge overlap in what they’re trying to accomplish online. Once top tasks have been determined and the decision has been made to move forward with a responsive design, it’s extremely important to be sure this mindset is carried through every step of the process.
Plan
A misguided assumption made all too often frames responsive web design and development as a simple add-on that can be quickly applied to any site. Technically, this can be done and, in some situations, may be the best way to offer an improved experience over a static desktop website, but updated styles are only the tip of the responsive iceberg. A truly great responsive website is one that has been planned from the beginning with device agnosticism at the core of it’s strategy.
There are three key areas to focus on during the planning phase and these are not specific to the responsive planning process.
Analyze
As always, start with analysis. Analyze everything: screen sizes, devices, operating systems, users—the more data the better. This can give a clear indication of whether existing traffic shows demand in a specific niche. On the other hand, low demand doesn’t mean users will never access a site on a mobile device. For this reason, competitive analysis can add a valuable metric in determining what the industry standard is regarding treatment of mobile devices.
Prototype
With this data and, hopefully, an understanding of who is visiting the website and why, the information architecture can begin to take shape. Cross referencing users’ top tasks with analytic trends and access devices will make it fairly obvious what the sitemap will need to look like, but this doesn’t necessarily mean there is no room for testing other configurations with an “if you build it, they will come” mentality. Once the structure has been determined, the wireframing process can begin.
Wireframing and prototyping tend to be more difficult in a responsive process due to the fluid nature of the site and the difficulty of capturing that flexibility with traditional tools. There are quite a few approaches to this problem, depending on the skillset of the team producing the wireframes. Ideally, and with minimal coding knowledge, tools like Bootstrap, Foundation, and Wirefy provide great frameworks for rapidly producing functional prototypes because there is no better way to plan responsive layouts than to actually test and iterate in a browser.
Write
With a working set of wireframes, content planning can begin. This can often be one of the most difficult aspects of producing a responsive website due to the discipline required to produce concise but effective content that can be enhanced across devices. A mobile-first approach to content production is a great way to cut out the fat and focus on what users really need. This is a good time to consider users’ situational needs and prioritize content accordingly. Ideally, conditional loading shouldn’t be used as a crutch to allow more content for larger screens, but sometimes that situation may seem unavoidable.
At this point, a set of working wireframes with live content based on hard data can be scrutinized and revised as many times as necessary. After these deliverables have been put through the ringer and approved, the design process can begin.
Design
The responsive design process is something nearly every web designer struggles to define. Design deliverables have traditionally been presented as static images more akin to newspaper layouts than dynamic entities that embrace the constantly expanding nature of the Internet and the devices people use to access it. This process requires a fresh take on design workflows and the realization that defining “pixel perfect” is much more difficult when the diversity of devices and contexts in which a website is viewed can change at a moment’s notice.
Rethinking Process
Defining deliverables can often be a consideration made on a per-project basis. In some circumstances a project may require two sets of designs: one for large screens and one for small, with enough detail for the site’s developer to be able to fill in the blanks between the two resolutions. This approach works well when a project demands a more traditional set of designs, due either to client expectations or limitations associated with the project.
A more progressive way of approaching this process revolves around designing page layouts made up of reusable components that can be pieced together in various ways. Dave Rupert recently published an extremely insightful blog post about this very idea. This approach is interesting because it still allows for full page designs to be assembled from individually designed pieces, but also takes the guesswork out of the development process. A great way to make this idea practical is by combining detailed wireframes with designs for key pages and a thorough style guide.
Design on a Budget
In addition to thinking about how to make responsive deliverables work well for the client and the site developers, it’s become much more important to consider a website’s performance before it even goes into development. When end users could literally be paying to download a site, it’s crucial to consider this as a part of the user experience. Showing respect for users’ data plans and ensuring quick load times can go a long way toward making them happy, even if they don’t immediately realize the benefit.
Mark Perkins at Clearleft has some interesting insight into making performance a collaborative goal beginning in the design phase in his post “Responsive Design on a Budget.” In a nutshell, the idea is that designers are given a page weight “budget” in order to keep the size of assets—whether it’s fonts, images, or Javascript effects—as low as possible. The best part of this idea is that it brings developers and designers together to better understand one another’s thought processes. When performance becomes a discussion and a part of the user experience and visual design process, it results in a better end product and a much deeper understanding of how to create efficiencies in places one designer or developer may not have seen on his or her own.
Build
With a set of well-planned wireframes, content, and designs, development can finally begin, although this doesn’t mean that user experience should become an afterthought.
Always Consider Users
In the development process, it’s easy to get caught up in code and forget about who the site is actually being built for. There’s no reason a site’s development team shouldn’t be familiar with all the research and data supporting every decision that’s been made in the process up to this point. This familiarity can inform decisions that directly affect the user experience and could make or break the end product.
Flexibility is the name of the game and any decision a developer makes on the user’s behalf should contribute to a good experience. One extremely common decision made for users is to disable pinch zooming on devices with touch screens. Often times, this can feel like the right thing to do, but in the end this could very likely make it more difficult for visually impaired users to interact with a site. In scenarios like this one, it’s always beneficial to take a step back and consider the implications decisions that limit the user experience can have.
Make it Future Proof
The whole idea of responsive design is to build an end product that will provide a good user experience across as many devices as possible. It can be a hard concept to let go of, but not thinking in terms of static dimensions and specific devices will drastically improve the quality of the end product. Brad Frost put it best in his talk, “Beyond Squishy”—the key to a responsive site looking great on any device isn’t specific breakpoints, it’s a fluid grid that incorporates media queries and flexible media to easily scale to any screen size, whether it’s one that exists now or has yet to be invented.
The fluid grid goes hand in hand with the idea of progressive enhancement. This is another situation where letting go of a pixel-perfect mentality can be difficult, but is a necessary part of the process. Progressive enhancement emphasizes the importance of a website being completely usable on the lowest common denominator device or browser, regardless of what that is. Building a good baseline experience and adding on based on device, network, and browser capability goes a long way in making a website much more universally accessible.
Iterate
Once the development process is complete and a brand new, well researched, planned, and designed responsive site is live, don’t let it sit dormant. As with any website, never stop analyzing, testing, and iterating. Keep a close eye on analytics to see what’s working and what isn’t. For even more useful feedback, do some A/B testing or user testing. Modifications don’t have to be huge, time-consuming feature additions. Often the most noticeable results can come from making small tweaks over time based on good data and analysis.
On the same note, take the time to keep up with what’s happening in technology and test the site on any device available. Responsive design is a great way to future-proof and make keeping up with technology significantly easier, but without constant testing there’s no way to be sure users are having a consistently good experience. Not to mention, with new devices comes the opportunity to work with new and exciting technologies in a way (hopefully) no one has before.
Constantly Learning
Responsive and device-agnostic design is about considering user experience in full. It’s a constantly evolving process that is bigger than individual devices and presents the web industry with unprecedented opportunities to innovate. There will always be new things to learn and more process refinements to be made, which is what the core of responsive is: being flexible and forward-thinking in an unpredictable landscape.
Image of balancing elephant courtesy Shutterstock.