Tips on Your Next Responsive Web Design (RWD) project

Go Mobile First


Going mobile first is the best way to go for most every project. First for those that don’t know what going mobile first means that you build it from small to big. You use min-width media quires in your css to do this.

Less Overriding

One of the many benefits of mobile first is there is less overriding in your css. This is because when starting from the small viewport most everything is one column and most of the layout is pretty basic. Then as you scale up you add/change a few css properties as needed.

If you want to learn more about mobile first check out Luke Wroblewski book - Mobile First from A Book Apart.

Use html5


Use html5 even if you only use the semantic tags. It makes it easier to target the element you want with css and will make your html cleaner and easier to read. Some common html5 tags are:

  • article
  • section
  • aside
  • nav
  • header
  • footer
  • main
  • video
  • audio

If you are interested in learning more about each of these html5 tag and more check out this article on Mozilla Developer Network.

Use a CSS Preprocessor


Use one it makes your life easier is so many ways. I personally like using scss because all valid css is valid in scss. This is great because you can start using it today and use bits and pieces of scss while you learn it.

Some of the popular CSS Preprocessor:

Don’t Refer to Devices Terms for Break Points


Using mobile, tablet and desktop for deciding media queries breakpoints is just a bad idea. Let your content decide when to change your layout not just because a device is this size. When you refer to your media quires breakpoints don’t think of them as “This is for an iPad, this is for an iPhone.” Instead refer to them as small, medium, large, etc. viewports or maybe something more creative? More on that later. Basically why you shouldn’t is you really don’t know if they have there browser window scaled down or how they are using there devices (or which one).

Side Note on Break points


If you are using CSS Preprocessor have a little fun and be a little bit creative in your variable names for you media quires. For example since I really like cars for my media queries name I refer to them as i4, v6, v8, v10. Those of you who are like “what?”, these refer to engines. Others I have heard of people use a little bear, mamma bear, and papa bear. Just have a fun with naming them.

SCSS Media Queries Naming Example


An example of how I use my naming of breakpoints.

$i4: 540px
$v6: 800px
$v8: 1000px
$v10: 1200px

@media screen and (min-width: $i4) {

}

@media screen and (min-width: $v6) {

}

@media screen and (min-width: $v8) {

}

@media screen and (min-width: $v10) {

}

Supporting IE


If you haven’t heard of responded.js then you are missing out.

“A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)”

Just include this one js file (1kb min/gzipped) and like magic ie6+ understand media queries. Yay! No excuses for not going mobile first now. Download responded.js on Github.

Don’t forget to include the html5 shiv from google too. This makes IE 6+ understand the new html5 semantic tags. Luckily Google host the html5 shiv for us so no need to host it your self. You can view the full source code on Github if you are interested.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.