Has the promise of a responsive design delivered for you?
One of the most talked about areas with any new client or prospect is the importance of a “mobile-ready” experience. If the client is even a bit web-savvy, the term, “responsive” (short for responsive web design) makes it into the conversation. Ethan Marcotte was credited for the phrase Responsive Web Design several years ago and first introduced it in his A List Apart article, “Responsive Web Design”.
Our good friends at the NNGroup define responsive design as follows, “a development technique that detects the client type and dynamically adjusts the layout of a site according to the size of the screen on which it is displayed. Thus, the same content may be displayed in a three-column format on a desktop, two-column format on a tablet, and one-column format on a smartphone”.
But let’s face it, while the benefits of a responsive approach (supports a variety of screen sizes with a single implementation, offers content and feature unity and potentially saves on development time) are many, this approach is no longer good enough. Bloated responsive experiences are crushing the user experience (and your conversions).
It’s time to focus on what matters most to the mobile user – speed, readability and UI clarity. As more and more emphasis is placed on supporting “micro-moments” across a user’s journey and Google writes about the importance of sub, three-second response times, (The AMP Project will be covered in a future post) one thing is clear – cramming a bunch of desktop-designed elements into a small area and trying to deliver them over a less than optimal network connection plagues the success of responsive design.
At Consensus, many times we turn to an “adaptive design” approach (and I need to give a shoutout to one of my former colleagues Scott Jehl, who tried to beat me over the head with a concept he called “Progressive Enhancement”, a sort of precursor to adaptive design). Adaptive design is a version of responsive design in which the server detects the capabilities of a device and only sends the content and features that meet a user’s needs. While some approaches focus specifically on the type of device, we try and stay true to the business needs and primary user goals.
Here is a brief outline of our approach as it applies to our adaptive thinking:
1. Mobile factoring. Really focus on the goals of your mobile users and do not support more than 5 primary tasks from the home page (and ensure your search is lightning fast). Hamburger menus were a great novelty, but let’s face it, your users want to get in and get out – user attention is at a premium.
2. Readability. One of the most important factors in a successful mobile experience is readability. Mobile devices have limited pixel real estate, which means you will be tempted to fit a lot of information into a small area – don’t do it! Text content HAS to be legible. A few heuristic rules for mobile – text should be at least 14px, line height and letter spacing are appropriate based on the font type and screen contrast.
3. Speed. The research teams at Google continue to emphasize the importance of speed (< 3 seconds response times). While technology advances assist in this area, we can control the experience by limiting the number of elements, focusing on core user tasks and using technology that supports nanosecond response times.
4. Design for micro-moments. The mobile device will be used “on the go.” Users often have to quickly accomplish one core function in a mobile experience – this includes things such as find-a-doc, contact a location and login.
5. Make an amazing first impression. Your mobile experience doesn’t get a second chance. If you disappoint the first time, you can bet (with 80 percent confidence) a user won’t be back. Show just what users need to know to get started—nothing more, nothing less. Keep it simple and you will see an increase in usage.
6. Design for the finger. When you’re designing mobile experiences, it’s best to make your targets big enough so that they’re easy for users to tap. Your UI primitives should be 30px to 40px in size. Also, it’s important to remember the height and width of the input and search fields!
7. Plan to land. Many times landing pages or article detail pages are overlooked in the planning process on mobile devices. All of that fantastic SEO and media planning work and the user lands on an experience that feels like Professor Swearingen’s algorithm class! Keep the experience simple and contextual.
8. Emotion. A great user experience is about emotion. It is the little things that can make your user experience truly elegant and memorable. By injecting subtle details—like micro-animations or animated feedbacks—into design, you can make users feel like they are interacting with something that has a personality.
Want to learn more? Please feel free to contact us at firstname.lastname@example.org.