Responsive Web Design
The implementation and advocacy of responsive web design is increasing, and possibly fully manifested in the web design community. Are you taking part?
What Is Responsive Design?
Responsive web design, basically means your website responds to different screen sizes. So, people browsing your site on a Smartphone, Tablet, Netbook or Desktop all get a usable (and hopefully similar, but not exact) experience.
Types of Responses
There are two main ways to respond to various screen sizes and devices, with: responsive designs or adaptive designs. Responsive design usually means a fluid grid, using percentages. See: Stephen Caver's Portfolio and Maykel Loomans' Blog. And, adaptive design usually means you have fixed grid, that adapts (changes) depending on the screen size. See: Mr. Simon Collison and Authentic Jobs. You could also use a combination of both, sort of like my Blog that you’re reading now.
Media Queries
CSS3 media queries, quite literally, let you query different media
types, screen, print and handheld as well as other helpful
properties such as min-width, max-width, orientation and others.
Media queries easily let you define your CSS for any screen size by
querying the min-width and max-width. So, all you really need to
know are the common screen widths. According to Bryan
Rieger
the “major breakpoints are 0-320, 320-720, 720+ with minor
breakpoints dependent on content and key devices (ie: 360, 480, 768,
etc).”
What Does This Mean?
In the below snippet, I have included the exact media queries that I use, as well as a few (one, for now) examples from popular CSS frameworks and authors.
| /* Media queries used on blog.staydecent.ca by Adrian Unger | |
| check my full source at: | |
| http://blog.staydecent.ca/static/css/style-0.1.6.css */ | |
| @media only screen and (min-width:768px) and (max-width:1269px) { | |
| /* In my particular design, I used a fluid grid limited to a | |
| max-width of 1140px, while (if there is enough room) | |
| pushing the menu outside of layout, requiring a total | |
| limit of at least 1270px. | |
| So, this first query applies to any screen-width less | |
| than 1270px, and adapts accordingly. */ | |
| } | |
| @media only screen and (min-width:768px) and (max-width:959px) { | |
| /* Here is where I adjust for Ipad's and similar screen | |
| widths. Note that the above query and this one overlap | |
| meaning any rules above will also apply. */ | |
| } | |
| @media only screen and (min-width:0px) and (max-width:767px) { | |
| /* As soon as we fall below the Ipad's width I use my 'mobile' | |
| design. So, everything in this query is meant for | |
| smartphones and other small screens. */ | |
| } | |
| /* A popular grid size used is 960px. Skeleton, a new Boilerplate | |
| for Responsive, mobile-friendly development, is based on that. | |
| http://www.getskeleton.com/src/stylesheets/skeleton.css */ | |
| @media only screen and (min-width: 768px) and (max-width: 959px) { | |
| /* Here, Skeleton sets the rules for anything less than 960px | |
| and at least the size of the Ipad screen. */ | |
| } | |
| @media only screen and (max-width: 767px) { | |
| /* Here, rules for anything less than Ipads width, with the | |
| advice to design for the smallest common width, 320px. | |
| This is the majority of smarthphones. */ | |
| } | |
| @media only screen and (min-width: 480px) and (max-width: 767px) { | |
| /* This is for any screen less than Ipad's width and at least | |
| 480px. This covers a many large-screened smartphones. It | |
| is declared after the above rule so it overrides the rules | |
| meant for 320px. */ | |
| } |
So, if you’re like me and usually develop a new grid for each website you design (which, I highly recommend) those media queries are really helpful in adjusting your design for specific devices and screen widths. And, if you like using boilerplates/frameworks and often design a 960px grid, Skeleton is great.
But How Should I Adjust My Design For Each Query
Obviously, you can’t just continuously shrink your column widths—eventually you’d have content trying to fit into 20px columns! So, commonly, you'll end up dropping the number of columns. If you’re full-width design has 6 blocks floating together, you might have to drop that for each query: 4 blocks a row; 3 blocks a row; 2 blocks a row; everything in a single column.
That’s It!
Really. Responsive web design is not much work. I would say, for the bare minimum, design your full width site, Ipad width of 768px and mobile width of 320px.
For corrections, comments and questions message me @staydecent.