Web Design & Development

Responsive Web Design

Responsive Web Design is done utilizing CSS break points

Responsive web design is making a website scalable for certain devices. It uses CSS media queries to accomplish this. Since style sheets are cascading you basically overwrite your own CSS settings to make elements flow onto the page on smaller screen sizes.

The basics: Initial Scale meta & @media quieries

When designing responsively the first thing you need to do within the <head></head> tag of yout html5 document is to set your viewport to an initial scale of 1 within your page with the following html: <meta name="viewport" content="width=device-width, initial-scale=1">. This will override your devices view settings. Allowing you to see a pixel in its true scale on any of your devices. Once you have that in place you can start using the @media query within your CSS to overwrite your CSS. There are plenty of sites out there offering tutorials, which is how I taught myself. The hardest part is knowing when to “break” your design and overwrite it with CSS.

Break points

Overtime I have started to use a set list of breakpoints and I'm going to teach you how to use them.

In your CSS file once you have finished designing your desktop version of your site at the bottom on your CSS file you will want to start doing your responsive CSS. Here is an example of the breakpoints that I typically use. Feel free to copy and past this into your own file.

/* RESPONSIVE CSS */ @media only screen and (max-width:1199px) { /* medium desktop responsive queries go here } @media only screen and (max-width:1024px) { /* landscape view tablet responsive queries go here } @media only screen and (max-width:991px) { /* small desktop responsive queries go here } @media only screen and (max-width:768px) { /* portrait view tablet responsive queries go here } @media only screen and (max-width:767px) { /* general mobile phone responsive queries go here } @media only screen and (max-width:375px) { /* older portrait view mobile phone responsive queries go here } @media only screen and (max-width:320px) { /* older portrait view mobile phone responsive queries go here }

You then basically overwrite any element you want to have a different look from your desktop settings. For instance if you had 2 columns on desktop with a class of .column1 & .column2 that were both set to width: 50%; float: left; and you wanted it to be one column stacked on mobile the following code would be your media query:

@media only screen and (max-width:767px) { /* general mobile phone responsive queries go here .column1, .column2 { float: none; width: 100%; } }

Responsive Web Design is just that easy

Use the above examples to help you get a better understanding of responsive web design. The trick is to think in percentages and not fixed pixel widths.

Explore more...

Previous
Previous

View the previous blog post.

Go Now
Blog
Back to Blog

Return to the Design Blög.

Go Back
Next
Next

View the next blog post.

Go Now