My responsive web development technique

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too.

Begin with mobile devices

To begin I set up a common.css and insert all my resets, font styles, colours in here. Then with my browser in its smallest possible width (or using an actual mobile device!) I start to set up font sizes, line-heights, margins and paddings to make look/feel good for mobile. The key is not to set any pixel widths on elements at this stage.

Set some breakpoints

Then using the browser on my desktop I begin to increase its width. The point at which a line length gets to long to be comfortable to read is where I would insert a breakpoint.

By ‘breakpoint’ I mean a width of the browser at which I’d like a new css media query to take effect and change the layout of the page or increase font sizes, line heights, etc.

Media queries with min-width

The first breakpoint on this site is 420px; in my stylesheet I add:

@import "common.css";

@media all and (min-width: 420px) {
  ...
}

I use min-width to allow me to layer on styles from small screen sizes to large so that the smaller width devices load fewer lines of CSS – this idea was originally from 320 and up.

Inside this first media query I increase the font sizes and give the elements a bit more room to breathe. You can do anything you like at these points: from adding columns, background images and loading in new fonts to creating a totally different design.

When adding columns or any other elements requiring widths always make sure you use percentages so these will shrink and grow with their containers.

You repeat this process of increasing the browser’s width until you feel something in the design should change and add another breakpoint.

This can end when you feel you’ve reached a maximum width or there’s nothing that needs to change at larger screen widths. For instance on punkchip.com I’ve got breakpoints at 420, 580, 600, 660 and 860. At 860 I set a maximum width on my design of 960px.

Device specific breakpoints?

By creating your breakpoints in this fashion you will have set up your content to fit in any number of device widths and be future-proofing your site to new devices that are released.

Nothing beats testing in a variety of physical devices, but there are a number of sites that allow you to view your design in a range of widths:

2 comments on “My responsive web development technique”

  1. Breakpoint idea is great, did exactly the same myself on my own site: meerware.com – breakpoint width per component: header, content, footer … etc.

Add your comment

Your email address will not be published. Required fields are marked *