The best approach to responsive design


#1

I’m sure there’s a variety of opinions on this issue, but what approaches are good for responsive design? Do you prefer css flexbox or other templates/frameworks? How do you go about making sure the vast amount of screen sizes are going to display your site properly? Is there a list of common screen sizes that designers go off of?


#2

This is popular way to do things, but it doesn’t actually work very well in practise. As the number of common screen sizes is effectively infinite (as you can do things like zoom in and out on a page, or switch modes, or shrink/expand the browser window), it’s a fools errand.

The way you “do responsive design” successfully generally involves: start at a tiny (mobile phone size). Expand until something breaks - fix something at the point (media query etc). Then expand, find next thing, and so on. Lots of stuff that works at mobile size will work at bigger sizes. Re going from small -> big, it’s much easier to fix things going that way.


#3

I used Bootstrap 4 quite a bit when I did the personal website project on FCC and I absolutely love how well it works!! I tested it everywhere (tablet, laptop, my 15" TV) and it consistently adjusts really well.

But I can understand there are situations where people don’t want Bootstrap and need to have completely custom code.


#4

Flexbox is totally awesome, but it can only take you so far. For me the keys to responsive design are:

  1. Media queries!!! Especially if you are writing your own CSS and not leaning on Bootstrap, Foundation, etc.

  2. Thinking ahead. Sometimes I design for mobile first, and sometimes I design for desktop first and I think that both ways are usually ok. The main thing is to begin with the end in mind and try to keep your css as reusable across widths as possible so that you can minimize media queries, !importants, and frustration.

  3. Test things aggressively across all breakpoints. The iphone 5 is 320px in portrait mode, so things definitely need to look good at that width and above. I feel best when things look good at 300px and up. Your browser’s developer tools are super useful for this. Not only is it nice for resizing, but it offers simulations of a list of common mobile devices.


#5

I like flexbox, but if you really want to center things well, you might want to take a look at the How To Center In CSS site. It’s a really nice fast way to center something (because we all know how annoying that can be). I also like Normalise.css because it removes all whitespace added by the browser (so I don’t need -8px margins or something equally nasty). Another thing that’s helped me a lot is the Calc() CSS Function. With it, I can easily type width: calc(100% - 15px);.