Responsive Design: Lessons from a Newbie
This week in my Bloc.io program, I was tasked with making the landing page I'd created for a fictitious SaaS product more responsive. For years I'd known about responsive design and media queries but never really dug into how it all actually worked. After taking my first stab at responsive design, I've realized four key things that I'll remember on my next responsive project.
- Start mobile first. I learned this the hard way, beginning my design while viewing it on a 27-inch (1920 x 1080 px) monitor and painstakingly trying to create media queries from 320px on up (der). I probably could have saved myself a lot of sighs/!@*$@!s if I'd started from small screen viewing to large. If you start mobile first, you might find yourself a little less confused than starting from the large design and moving backwards. It's very easy to get yourself lost in a text editor trying to think backwards with your numbers (it is for me, at least. Not a numbers kind of gal.)
- Don't freak out because you don't know the "typical" breakpoints. Use your design as your guide and set the breakpoints where the design naturally breaks.
- Min vs. max width?! For some reason I got really confused by this at first. I think part of my problem was that I didn't have any breakpoints in mind when I started trying to first write the media queries. I'm betting if you plan a little ahead and figure out what your design's natural breakpoints are, setting min or max widths (or a range in between) will come a lot more easily.
- Avoid specifying all the things in pixels. Use percentages or rems. I've yet to be on a software team where we actually did this, but I'm glad that I'm learning about it now so I can advocate for it in the future.
This article about sums up my greatest learnings from my first experience creating media queries to design a responsive webpage. Here are some other resources I found particularly helpful on my quest to understand responsive design:
- Skeleton (barebones UI "framework" that's got mucho responsiveness already built in)
- Flexible Math (tool to help you calculate relative widths using percentages)
- What is the difference between “screen” and “only screen” in media queries? (discussion on Stack Overflow)
- Media Queries Demystified: Min-Width and Max-Width
- Media Queries (collection of responsive sites; just fun to play around with!)
Interested in learning about responsive design, UX, and UI design? Bloc.io's UX Design program (what I'm doing now) is a really awesome, 100% virtual training program that hooks you up with a mentor that will help guide you throughout your learning journey. You can do the program full time or part time. If you decide to sign up, my mentor is Chris Courtney, and I highly recommend him! Oh, and here's $100 off enrollment just for reading my blog. :)