Designing for the web means designing for every possible user, in every location, and on every kind of device. Essentially, it’s building your website to adapt — or respond — to just about any possible use case. That's why it's called “responsive” web design!
Today all websites need to adapt gracefully to any screen size, input mode, or browser that might come along. This means everyone needs a comprehensive method for testing a site in as many of those combinations as possible. At the same time, it's a must to embed standards-based technologies to allow for an optimal viewing experience no matter where the site renders.
This is where responsive web design comes in. In a previous post, we told you all about why mobile-first design is the way to go when creating content for the web. RWD is a close cousin of mobile-first and somewhat an extension of the same idea.
The Nitty Gritty
Three technical ingredients to achieving a responsive website are:
- Fluid grids that ebb and flow with a device’s screen size.
- Flexible and responsive images and media that keep content intact on any resolution.
- Media queries that allow designs to adapt by establishing dimension breakpoints.
Studies on touch target sizes basically come down to: if you want people to be able to tap an element, make it big enough that their thumb or finger doesn’t completely hide it. This especially applies to forms and input fields.
And don’t forget all the gestures you have available to you on mobile — tap, drag, flick, pinch, spread, etc. But as always, consult the research and do some testing of your own to determine what the best convention is before choosing which one to use.
Here are few more quick tips for mobile sites: on mobile, there are no hover states but swipe and scroll are incredibly natural, so use them. Videos — such as embedded from YouTube — will automatically play full screen and as for pop-ups, just don’t do them.
Expanding Responsive
Okay, so we know a site needs to work beautifully on desktop, mobile, and everything in between. But let's expand this principle of responsiveness even further. For a more holistic concept of user experience, I think you'd want to ask two more questions: “What task does the user want to perform?” and “What current state is the user in?” In other words, don't just think about responding to the user's browser. Also be sure to consider their needs, expectations, abilities, desires, habits, mood, and level of attention.
Accounting for so many unknowns means applying the fundamentals of interactivity.
When you’re asking for a particular interaction, you have to be very careful about what signifiers you use. People usually want to tap so if you want them to swipe you might use dots to show there is content off to the right or show the edge of an image on either side. Provide visual feedback for any interaction to the user so that they know their action was received. We want to know when a button has been pressed, a form has been submitted, or a link has been tapped.
Direct manipulation is a good goal to aim for. Sometimes referred to as “natural user interfaces,” it just means if you see something, you can touch it and manipulate it. To zoom into a photo, we no longer need WIMP (windows, icons, menus, and pointers). This concept encourages you to get rid of clutter like clunky buttons and prompts.
Make it work the way everyone would expect. Make it cohere with conventions. And make it abide by the laws of physics. A great example of this is the iPhone locked home screen. If you swipe to the left, just a bit, you'll see the camera screen appear ever so nicely, even as the screen snaps back on release. It uses a system one performative teachable moment (it’s an error but one that’s telling you something).
All in all, pay attention to what users do, not what they say. Self-reported claims are unreliable, as are user speculations about future behavior. Users do not know what they want. We make extremely quick (and often dumb) decisions on screens (especially on mobile screens) so account for the “knee-jerk reaction” user because that is your user. And design every interface purposefully to use any screen real estate as efficiently and elegantly as possible.