Mobile first and responsive web design (RWD) are huge buzz words in the web design world. But, are they actually different things or is responsive design just a way to help you create a mobile first design?
Graceful degradation used to be the norm, meaning that designers created for the newest and biggest device, and the smaller, older devices got the leftovers. The new norm is progressive enhancement, which means starting the project at the bottom and working your way up. More people use mobile devices today than they ever have before, so now the mobile view of a site is never placed on the back-burner or last round of testing.
Mobile First, an idea by Luke Wroblewski, means you're designing an online experience for mobile before designing it for the desktop or for any other device. This is both a strategy and sometimes even a new way of writing code.
A few years ago, a desktop site with some adjustments was what you would see on your phone. Now a site is often created specifically with your mobile device in mind.
Planning for your site layout is different for mobile than it is for a desktop, because you're forcing yourself to identify what's important about your content to your user. By starting with content, you're able to figure out what is relevant to your users, whether they're using their phone or desktop.
Desktop browsers can do amazing things, and they just keep getting bigger and bigger. But what looks fantastic on a desktop can look horrendous on a cell phone. Designing mobile first makes you really think about specific design decisions, like fonts, right at the get-go. If you want the different versions of your site to resemble each other, you'll have to pick a font for your headers that looks great on the smallest device. It would make no sense to use a really beautiful script font if you can't read it on a small screen.
Responsive Web Design
If you're reading this on a desktop, grab the right edge of the browser and start shrinking it to the size of a tablet and then to the size of a cell phone. See the way the content has shifted itself around to make it easier for you to experience on different devices? That's responsive design.
The term responsive web design was coined by Ethan Marcotte in a 2010 article for A List Apart. Responsive design is the way to adapt a website's layout for different screen resolutions using fluid grids that ebb and flow with a device's screen size.
No one wants to pan across the page, so this is a fantastic way to create a single website that works across multiple devices and is how some sites look so similar on your phone, tablet and desktop.
Like X-Men's Darwin, or a chameleon, your site needs to adapt to survive. Your site should be able to adapt to whatever circumstance your user is using it for, so that they won't abandon your site when it's presented poorly on the device they're using.
Different elements of the page should be able to change when viewing them on a smaller screen. The text should shrink and photo sizes should reduce, or not even exist, on a mobile platform.
Media queries are usually what's used to get your site responsive. There are dozens of free frameworks, like Bootstrap and Foundation, that you can use to help you create a responsive site.
A huge argument against responsive web design is that since all the information for the full site is still accessible by the mobile version, it can take longer to load. Even though this can sometimes be avoided if your media queries are set up properly, it's still a valid point.
There's not necessarily a "right" or "wrong" way to do design mobile first, since in some ways we're still discovering the different ways to achieve our design goals and no one's figured out a perfect solution.
There are a lot of different ideas out there about what designing mobile first means. Some people think you'd need to make a separate site for mobile devices, or even create a native app that works specifically for Android or iPhone.
Creating a separate mobile site could mean you'd need two URLs, so there can be a few seconds for your user's mobile browser to be redirected to the mobile site. Another drawback is you'd need to maintain two sites instead of one. A native app is the most expensive option.
Responsive web design is just one of many different solutions to creating a mobile first site. Of course, a site can still be designed for the desktop and then redesigned for a phone using responsive design, but the idea of mobile first is to really buckle down and figure out what's most important for the smaller version of your site and then build it out by adding more photos or other "nice-to-have" features for the desktop version.
Designing mobile first and using responsive web design is definitely not something that's super easy. It'll take a lot of design, media queries and hard discussions about content, but the pay off is having a site that looks great on any device your user may own.
What does designing mobile first mean to you? Is responsive web design one of the ways that you try to design mobile first? Share your thoughts in the comments below!