Responsive 101: FrontendWeb Design & Development
We’re beginning a new blog series that outlines the basic principles of responsive design in various stages of the web development process, and as Papercut’s resident frontend developer, I’ve been given the honor of contributing the first post. Responsive design and frontend development are closely linked, and it’s in the frontend phase that some of the key foundational elements that make a site responsive are laid. Here’s what you need to know:
Advantages of Responsive Design
We’ve talked about the benefits of responsive design on our blog before, but as a developer, I see two especially important advantages: using the same code for multiple versions of a site and providing a seamless user experience.
I work with code on a daily basis, and I have a keen understanding of how long it would take to code separate sites for all the mobile devices that are out there. Even just coding a desktop, iPhone, and iPad version of a site takes a considerable amount of time. That’s not to say that coding responsive sites is easier, but it is more efficient.
When you design responsively, you’re effectively coding one site that meets the needs of multiple devices.
It’s old news that mobile users aren’t looking for the “CliffsNotes” version of web content. They want the whole package. With responsive design, you can give them that, regardless of the device they’re using. This means that the user experience on mobile will be very close to the user experience on a desktop, and you’ll avoid the common pitfalls of separate mobile sites, including a drastically different design and trimmed down content.
So, what are the basic steps in frontend development for responsive sites?
Mobile First and Media Queries
The frontend development process for a responsive site can be broken down into two fundamental concepts. The first of these is the mobile first approach, which is based on designing the mobile layout of a site first, then proceeding to the more complex desktop layout. Because a mobile screen is so much smaller, it is important to ensure that all of the site content has a place on that screen, and the mobile first approach forces developers to focus on content, functionality, and user experience. It’s easier to start here than trying to condense a large, complex desktop layout into a simplified mobile version.
Content is laid out first, then the mobile version of the site is designed, followed by the desktop version.
After mobile and standard desktop views are complete, layouts are designed based on screen sizes for the most common remaining devices (tablets, etc.). From here, the design moves away from breakpoints based on device screen size to what are known as “micro breakpoints” or “tweakpoints,” a term coined by England-based web developer Jeremy Keith. These are places between standard device screen sizes that cause the layout of the site to shift and affect user experience. They are found by increasing and decreasing the size of the browser window, which is what I spend a lot of my time doing. Modifying the CSS to account for these points will ensure that everything is fluid as the site layout shifts and that the site displays correctly on as many screen sizes as possible. Once all of the designs are completed, they are translated into code.
The second important concept of fronted development is media queries. Media queries are elements that developers add to the CSS (cascading style sheet) in a site’s code that make it possible to target the screen size of a particular device. When a visitor hits a website, these screen size-specific media queries determine the size of the screen (whether it’s equal to or less than the value entered) and load the corresponding CSS, ensuring that the site displays appropriately on the device.
Think Two Steps Ahead
When designing a responsive site, it’s important to anticipate trends and design proactively. As everyone knows, there is an endless number of mobile devices, and new ones are being created all the time. By carefully using tweakpoints and inspecting layout shifts in various browsers, you can develop a responsive site that is virtually future proof. While we’ll never be able to anticipate and design for every device that might come out, this gets us close. Don’t just design for what we have now; take the time to design for what we’ll have in two years.