The rise of mobile devices as a content medium was hailed by marketers and dreaded by designers and developers. This new medium allows us to provide a channel for our content while the user is abroad and not in front of their static TV or desktop computer. This advantage allows information to be more densely packed into the user’s day-to-day and impact their decisions at that very moment.
When we think of mobile design, we’re going to be met with many design-centric methods worried about how content “fits” into the limited real estate or the way that elements flow between portrait and landscape viewing. This is valid, but it puts the cart before the horse many more times than necessary.
In this article, I will tell you that there are more tangible ways to make responsive design useful and not simply a treatment for your content to look good.
Part 1: Why Mobile-First Design is Wrong
Mobile-first design can be an arduous journey, making it difficult for designers and developers to organize meaningful patterns across multiple devices. Generally speaking, most are concerned with how their content is viewed on mobile devices but disregard the in-situ use cases their users are in. Below, you will find the boilerplate talking points on why mobile-first design is important for the business owner.
Shift in Internet Usage
- Mobile Usage Statistics: Over half of global website traffic now comes from mobile devices. This shift has profound implications for website design and development.
- Google’s Mobile-First Indexing: Google predominantly uses the mobile version of the content for indexing and ranking. This highlights the importance of having a mobile-friendly website for SEO.
Impact on Business
- User Engagement and Retention: Mobile users have different needs and behaviors. A mobile-optimized site can increase engagement and lower bounce rates.
- Conversion Rates: Websites optimized for mobile often see higher conversion rates. The ease of navigation and speed can directly influence purchasing decisions.
Although all these points are valid, they are missing context entirely for the users themselves.
Here, we will take the lead from accessible design, which we will discuss further in this series, and posit that context-first design is good for everyone and on all devices. In the same way that we take context from in-situ cases in accessibility, screen readers, or keyboard navigation, we must take context from mobile use cases.
Too often, a designer will be working on a responsive mobile-first design in an appropriately lit office, scrolling up and down like mad, navigating to pages much faster than their users ever will, and if the text fits, then it ships.
One problem: their users cannot read any of that mobile-optimized text because the contrast in bright daylight on the city streets was never tested.
Thinking in situ and putting yourself in the user’s shoes, you may realize that something like contrast for daylight scenarios may be the leading cause of bounce rate no matter how well it fits onto the tiny screen.
The simple test: walk outside and play with your own device’s brightness settings. You’ll immediately know if your users can even read your content on the fly and make quick decisions.
Suppose we apply this thought process to our design as a whole. In that case, we can substantially improve user satisfaction and conversion by building design systems that bring information to the users in the context from which they will most benefit.
Part 2: Techniques for Context Design
Below are some reasonable and common techniques to build responsive content for screens. They are perfectly valid tools to ensure your brand is on-point when viewed on mobile devices, in the office, with a charged phone, not wearing sunglasses, and with no wind or noise from passing vehicles.
Core Components
- Flexible Grids: Designing with a fluid grid layout ensures that elements resize in relation to one another to fit the screen size.
- Flexible Images: Using CSS, ensure images on your site scale correctly without distorting their resolution or loading times.
- Media Queries: Employ media queries to apply different styles for different devices, allowing more precise control over how content is displayed based on device characteristics.
Implementation Practices
- Breakpoints: Set breakpoints to adjust site design for specific device dimensions like smartphones, tablets, and desktops.
- Typography Adjustments: Ensure text size scales effectively to enhance readability on smaller screens.
- Menu Adaptations: Convert traditional horizontal navigation into dropdown menus or hamburger menus on smaller screens.
What’s missing?
- Where does your content need to be? Are you a towing company whose phone number has to be quickly accessed on the side of a highway for emergency response?
- Who is your content for? Is your restaurant business based around the summer tourist season, and your online menu has to be quick-loading and legible enough for a group of friends walking down the bright street looking for the first place to get out of the heat?
- How long does it take to convert? Do you survive on repeat customers who may need to make quick decisions while on the go and already know what they want?
When you answer the above questions, you empower the design tools and techniques previously listed to make a tangible impact on your users’ choices and lives, increasing satisfaction and conversion. Adding context to your design choices and where you expect your users to be to view your content can be more powerful than any fast-loading site where you have to scroll halfway down the page to find the information you need.
Part 3: Tools and Testing
This is the part that most people will skip to. Looking for solutions to actual problems and not just theory. Like other product users even blog posts have a problem with contextual design.
Google, for example, started noticing that recipe pages were getting drawn out and overburdened with exposition and narrative copy. This reduced the usefulness of the page for most people who are either returning for quick reference or don’t have time to read an epistle while they juggle kids and cook dinner.
These tools and techniques will drive good contextual design if done as part of a storyboarding effort by both content producers and designers. The context will provide you with the benchmarks you need to meet, allowing testing to be purposeful and have real-world success.
Essential Tools
- Design and Prototyping Tools: Before coding, use tools like Figma or Sketch to design and prototype your responsive layouts. Besides making your developer’s life easier, you can make informed decisions before investing in labor building out.
- Design System: Whether you’re using a CSS framework like Tailwind or Bootstrap, a design system or library will ensure consistency across user experiences and provide more insight into what you can do to help users.
Testing and Optimization
- Browser Developer Tools: Unfortunately, to the disappointment of all CEOs worldwide, resizing your browser window does not accurately reflect real-world mobile experience. Websites don’t work that way anymore. Nowadays, each application specifies breakpoints and mobile profiles to dynamically update content on load. Using Chrome Developer tools helps you select a close representation of the mobile devices you’re testing, allowing your application to update content properly for the mobile use case.
- Real Device Testing: Don’t rely on Chrome Dev Tools or emulators. I’ve already experienced the hardship of wrong assumptions based on digital emulation. Get an iPhone. Yeah, we know devs probably use Arch Linux and all, but grabbing a cheap iPhone with a broken screen will save you hours trying to fix Safari Edge cases.
- IRL (In Real Life) Testing: Remember to take it outside or where your target users might be using it. LARPing (Live Action Role Playing) as your user is the most effective way to test your design. If your music app is targeting 20-—to 35-year-old tech bros, go climb a 14er and test how the screen looks at altitude while trail running. Maybe ask your boss if you can rent a boat to see if your wakeboarding app actually works in the field.
Performance Considerations
- Load Time: Don’t chase the rabbit. Scores from tools like Lighthouse can easily drive you insane trying to get all green. They constantly change, have cryptic results, and throttle your application to speeds only found on Pluto. This is another field test situation where you should jump off the WiFi and use your app where it’s meant to be. If you have a dating app specifically for Coachella, go to a music festival where the network is so bogged down by the crowd that you’ll really see where the pitfalls are.
- Touch Targets: Another real world test scenario. If your target market is +65 year old seniors on Medicaid but the designers are 20 something college grads you might want to visit a retirement community. You’ll glean tons of real world data and they’ll appreciate the company.
Final Thoughts on Responsive Web Design
Responsive web design is not just about making a website application accessible on a mobile device but ensuring that the user experience is optimized and consistent across all devices. Embracing context where your design methodology focuses is to put yourself in your user’s shoes will dramatically streamline your workflow providing insights that would be missed otherwise.
Next Steps
With a solid understanding of responsive design under your belt, our next post will shift focus toward optimizing your website’s performance. Speed is a critical factor in user satisfaction and SEO, especially on mobile devices. Join us as we explore effective strategies for speeding up your website, ensuring your users have a smooth and enjoyable experience.