Pixel Garden Studio

Blog

A Simple Responsive Skeleton

January 10, 2014

When I first started to dabble with responsive design I looked at a lot of CSS frameworks. I was looking for something basic, lightweight, and easy to use in my CMS. I found that a lot of them required JavaScript or a CSS compiler to make the site work well on smaller devices and I wanted something that was mostly pure CSS.

By chance, I came across One Percent CSS by Matt Imling and it was exactly what I was looking for... almost. It didn't quite suit all of my needs for Pixel Works so I made some minor modifications and added a few new things. I'm sure I will add more in the future, like padded boxes as an example.

Media Queries

Starting with the CSS3 (Cascading Style Sheets 3) spec we are able to modify the layout of a website based on the viewing device screen size. We no longer have to use JavaScript or server side code to redirect to a mobile site (There are reasons you would want to do that but that is a discussion for a different day).

By modify I mean change the size and location of elements on a website to accommodate the device in use. Take for example a three column layout. Now with media queries, we can stack that information on smartphones or make them thinner to fit on a smaller screen without the browser resizing the site for us. Media queries are what make responsive web design possible.

320 and Up

My first responsive design was scaled down to fit mobile devices. This really is a backward approach and after some reading, I realized how much bandwidth I was wasting going that direction. It's a “take away” approach to responsive design where you turn off certain features for smaller devices.

320 and up is an “additive” approach to design that helps sites on mobile devices load faster because you are adding features as the screen resolution gets larger. One would surmise that the larger the screen the more likelihood it is using a wireless or wired internet connection not dependent on cellular signals and that is what I used for this skeleton.

CSS Loading

I decided to use Phil Archer's philosophy when loading CSS sheets to assist in limiting the bandwidth required to load a page. By using the @import CSS rule style sheets are only loaded when a screen criteria is met. For my purposes, there are no styles loaded under 320 pixels because those are most likely flip phones anyway.

Download Example

For those who are just looking into getting into responsive web design, I have put together a small example skeleton that you can incorporate into a simple static site or make the necessary modifications to use on just about any dynamic site. If you have questions or difficulties you can contact me or leave a comment below.

Download the responsive website skeleton