You’ve probably heard a lot of developers talk about “responsive design”, but do you understand what it is?
If you’ve been around the design world, shopping for a new website or learning how to get in the industry, then you’ve no doubt heard someone say something along the lines of “take a mobile first approach to design” or “make sure your sites are fully responsive”. It’s a lot like the axiom that “content is king” …it is, but do you really know what these sayings mean?
The basic premise of mobile design is that because there are an overwhelming amount of different screen sizes developers have to consider new ways of implementing their site’s code in a way that the information degrades gracefully from screen to screen. It’s a careful balancing act that requires you to think about straightforward solutions that work in a wide range of situations. There are as many different screen-sizes in use right now as there are devices; you can’t rely on breakpoints to bring it all together.
Wait…..breakpoints? What are those?
Breakpoints are added to CSS stylesheets to “break” the design and change its behavior based on the size of the screen being viewed. We use a type of CSS markup called a “media query”, and media queries create a set of alternate styling instructions based on the size of the screen. Most of the stuff in these queries relate to size, such as changing the size of fonts (if you’re not using ems or %’s) or dropping the size of a set of divs so that they sit next to each other on tablet sized screens, instead of each div taking up an entire mobile screen. You can make any change you can imagine using media queries to tweak how the site looks across devices.
While that is pretty straightforward, where it can become a challenge is in determining where to put your break points. I know designers who stick to 3 specific break points and I know designers who shoot to have a break point for the 14 major screen sizes (which makes little sense to me). Personally, I’m a big fan of letting my content lead my breakpoints. I start with a full size screen in Chrome’s developer mode, and then I drag the size of the screen over until the design becomes “ugly”…a pixel or two before the design breaks is where I put my breakpoint. Then I write the CSS in order to make the design look right again. I like this method, because I can generally execute the design across screens in no more than 2 media queries.
Beyond the break point, responsive design also requires you to think about your site’s content.
Making the design fit a screen is only the first step in responsive design. The next consideration is your site’s content and how it relates to the user’s experience. There’s probably content on a larger screen that makes perfect sense in the context of a design, but loses its impact on a cell phone. Graphics are a big part of this, because a lot of time how a graphic relates to the content is affected by the way the content presents. If the graphic is important, then you might need to change the order in which it and your written content are placed. If the graphic is not important, then you can get rid of the graphic at smaller sizes in order to boost your load times and lower your user’s bandwidth requirements. You may even decide to get rid of written content if it’s secondary information that might harm your user’s experience.
Speaking of graphics, are you optimizing your mobile load times?
One of the most pressing issues relating to responsive design has nothing to do with the way a site looks. Instead, you have to think about the way a site loads. Slow load times are not conducive to a responsive design.
Think about it: what devices are we catering to when we make our site collapse into a 320 pixel wide screen? It’s Smartphones. What is the one thing all smart phone users have in common? It’s an allotment of data on a month-to-month basis. Even the unlimited plans have a small-print fair access policy that allows the telecom to throttle their speeds at a certain amount of data use (with Verizon it’s 22GB, and if you’re in high congestion areas the people on “limited plans” are given favor). So you want to make sure your site loads fast and will have minimal impact on user’s data- if it can be avoided. Analytics tells us that if a page takes longer than 3 seconds to load 53% of your users are ready to move on*.
Another factor worth mentioning is how being non-responsive affects Google ranking.
You did not misread that. Google actually deducts page ranking based on whether your site is responsive. On April 21, 2015 Google began penalizing sites that weren’t responsive. As a result, a lot of legacy sites began losing their ranking in favor of sites that were. Google argues that since the largest percent of internet users are access the net from their smartphones that it was time to act on that information and give people information in a format they could use.
Do you remember when you would navigate to a site and you would have to either click a button for a mobile version of a site, or would have to pinch or expand into a site to actually read its content? Yeah, those kinds of shenanigans don’t fly on the web these days.
So what is responsive design?
Responsive design is a way to think about your site and how it might be present across devices. There are many different approaches to how you might apply cross device presentation, but it all comes back to thinking about breakpoints. If you’ve learned nothing from this, it’s that being fully responsive isn’t just about the way that a site looks. There are usability concerns that should always be in your planning, because if a site loads too slow or doesn’t get to the point then users are going to leave pretty quickly. At the end of if you can’t keep your users interested and plugged in, it’s unlikely you’ll be able to reach them.
Here are a few more articles you might be interested in...
You’ve probably heard a lot of developers talk about “responsive design”, but do you understand what it is? If you’ve been around the design world, shopping for a new website or learning how to get in the industry, then you’ve no doubt heard someone say something along the lines of “take a mobile first approach…
The path to designing a web page is like a navigating a city highway. You get on the road with a very straightforward choice; you can go north and south or east and west. Your destination is clear, but within minutes you start coming across exits, interchanges where highways and interstate compete for traffic. Designing…
Okay, it’s confession time, and rather than bury the lead I am just going to come out and spill it: I used to avoid using WordPress. I didn’t hate WordPress, but I was a bit of a web design snob. I used to get excited by the intricacies of crushing a challenging layout with a…