You’ve probably heard about responsive web design. Briefly, it is a technique which uses fluid layouts in addition to CSS @media queries to make your site fit virtually any device with a browser: smartphones, iPad + other tablets, even TVs. It doesn’t matter that Galaxy Tab’s resolution is different from a Nexus S phone — your site will render beautifully, as long as you’ve implemented responsive design correctly.
There are many tools and frameworks out there to help make your website responsive, but the point of this post is to outline the steps I took to convert my own site, VolinskyConsulting.com, to become responsive.
I Chose “320 and Up” boiletplate as a base for my Responsive Design.
320 and Up defines CSS starting at the smallest device (with width of the screen = 320px, e.g. older iPhones) and works its way up to the bigger screens, adjusting CSS at the following width ‘breakpoints:’
The beauty of 320 and Up is its focus on the mobile layout first: background images and elements meant for bigger screens won’t load (would just be hidden), saving some loadtime. (With that said, smartphones/tables will still need to download all of the HTML and CSS code, which isn’t a huge performance hit.)
I defined elements which are NOT essential on the smaller screens.
From the screenshot above (click to zoom in), you can see that the big dark-blue block is hidden on a mobile site. In addition to that, I’m hiding the “Web & Marketing” next to the logo and the descriptive text on the top-right. The rest of the info shows below-the fold on the phone, but my goal was to get green call-to-action buttons at least partially seen.
Luke Wroblewski, in his Mobile First book, pioneered the thought that we all should start with the mobile site to define what REALLY is important for the visitors (i.e. what tasks they came to accomplish). In mobile, we are constrained by the screen size, which forces us to leave only elements which matter. Luke argues that we shouldn’t clutter our Full sites which extra banners and eye-candy, which only distract visitors from their tasks and negatively effect page’s load time.
I defined CSS for the smallest screen size.
I opened Firefox with the Web Developer add-on, checked “Display window size in Title,” selected “Edit CSS,” set my browser to 320px wide, and started editing…
Header, main content area with the column, and then the footer. Everything has to scale down to 320px. I’ve hidden non-essential elements right off the bat and had to put most elements to “width:100%” (keep in mind padding and margins).
As I worked in CSS and saw results in Firefox real-time (btw, don’t forget to periodically save the code), I setup width area indicators. In case of 320 and Up, they are widths between 320 and 480, 480 and 600, 600 and 768, 768 and 992, and finally, 992 1382 pixels. An indicator simply changes the color of the background (or any other element) as I resized browser’s window. It’s very simple to setup, but turned out to be a lot of help as you works thru multiple sizes!
You don’t need to define CSS for 320px with the @media query [@media only screen and (min-width: 320px)]. Instead, you treat that default screen size is 320px.
[Note: if you're looking at my source code, you will notice my minimum width is 220px -- I made a mistake here, it really should be 320px]
I worked my way up to the Full site (992px or 1382px in 320 and Up boilerplate).
Starting at 480 px width, phone/table/desktop browsers will render the CSS defined for them, and this is where you overwrite previously defined styles.
For example, for devices with a browser’s width between 320 and 599px, you might have only had one column. Starting at 600px, you can have two columns, and so on.
You’ve already defined fonts, colors, etc. in the default CSS, where you assumed screen size between 320 and 480px, so there’s no need to repeat it again for other screen sizes: you only define values which have changed.
With the increased screen size, I added back “Web & Marketing,” and other elements, proportionally sized for the given device.
I finished the homepage, and went on to the other pages.
My site is pretty simple and I don’t have many different page types. After finishing the homepage, it took way less time to adjust CSS for the secondary pages.
Besides the general layout areas, I had to adjust:
- image widths (defined actual width for 1003px & up; percentage width with height:auto for the rest - see example & resize browser window)
- form fields (simply making them smaller and dropping input field under the text on smaller resolution – see example)
- WordPress blog (inserted same header/footer as the rest of the site, and then edited some WordPress-specific classes in a separate CSS file)
The whole process didn’t take long — couple of nights for the site, and probably two more for the WordPress blog.
I hope that this quick explanation is enough to get you started. Please ask any questions in the comments or on twitter: @svolinsky!