The following is an exclusive guest contributed post by James Ferraro, Senior Art Director, Beeby Clark+Meyler
Responsive design is not about pixel widths and heights. And it’s not about design limitations. It’s about understanding the behaviors and mindset of our target as they interact with various devices, and meeting their needs and expectations regardless of what platform they’re on: phone, tablet or website.
Customer behaviors and expectations change when they pick up different devices. So must the way in which our content and information is displayed, and how our messages are conveyed. It is imperative that everybody involved understand this when they begin any responsive design project, because that is what will lead the UX, the design, and the developmental build. The best way to truly test everyone’s commitment to a proper responsive build is to begin with an approach that’s “mobile-first.”
Mobile is the smallest palette of the various platforms consumers use, and it is by far the most commonly used platform. And this is the cornerstone of why we must lead with this approach.
Content Requirements: Start With Mobile
To a brand, pretty much all content is important. But the hard job is to go through the process of identifying the truly critical points hidden inside those big copy blocks and collections of imagery. The tough question must be asked: What is the very essence of what must be said? Identify this. And then cut it back some more. Because that’s all that will fit on a mobile screen (aesthetics), and that’s all anyone wants to bother with on a mobile screen (needs and expectations of the user).
The best way to boil down content is for key stakeholders to ask themselves what will crystalize the overall objective of the site. And then map out the hierarchical importance of the content together: agency and client.
Once we have done the exercise of fitting things to mobile, sizing up to the other platforms is easy. And the content always ends up better.
Form & Function: Start With Mobile
Although the real estate on a phone is much smaller than on a laptop or tablet, we still have to capture the user’s attention, just in a different way. Form follows function in this experience. The mobile experience should be comprised of large, telegraphic iconography, hard-hitting headers and titles, concise messaging, and quick yet meaningful takeaways. Working from the foundation of a mobile platform, we then create the tablet and desktop experiences where the user will be in a different mindset, have more scan-able real estate, and be more willing to commit time to sinking in. Here, form and function meet in the middle. Start with mobile, and work your way up.
An Example
A common ask from some of our clients is a product gallery. Going through the UX for mobile first, and then for desktop, is always key. On a phone we may choose to leverage the ability to swipe from left to right through the products. This will allow for a single product and minimal body copy to be displayed prominently for the intimate experience of a phone. On desktop, and tablet, we have the ability to show pairings, or the full breadth of a product suite all at once. We can add to the copy, and obviously, show more things at once.
Instead of having the mindset that one experience is better than the other, we can see the key benefit for each experience. On mobile, we cater to the user’s stronger focus on a given element, whereas, on desktop, we can play up the fact that we have a product suite that meets different needs for a broad range of consumers. And we might want to group them as such, visually, physically, factually…or according to different marketing approaches.
The Takeaway
When everyone starts to understand the different ways of tackling the same problem across devices, we become armed with the ability to alter content to help meet any platform challenge. This helps us prioritize the experience per the device. Most importantly, it allows us to design and build a successful responsive design.
