Everyone is talking about mobile and with good reason. Smartphones are everywhere and we need to make sure your website works perfectly across all devices. How do we do this? The answer is responsive web design.

Over 25% of internet users only use their mobile device

As a web agency we were rubbing our hands when mobile really started to take off! People were now going to need several different versions of their website – one for desktop, another for tablet and maybe another even still for smartphone. Wow, the dollars are really going to start to roll in – happy days! Well, of course, there were also concerns about how on earth our small team was going to be able to support our clients now that each was going to have several sites each, which would have almost certainly been unsustainable. This was going to be a problem.

Technology is amazing. It has a habit of solving problems in the most fantastic ways. A guy called Ethan Marcotte came up with a technique that solves the problem of making the same front end code work across multiple screen resolutions. Essentially the presentation layer is coded so that it reformats itself inline with the screen size it’s being viewed on. If you resize your browser window on a responsive website, you’ll see the screen elements resize and reformat themselves.

that’s magic! how does it work?

It basically involves three main principles that come together to make all this work properly.

  • Fluid grids
  • Fluid images
  • Media queries

Fluid Grids

The fixed-width layouts are measured in pixels, but for fluid layouts, dimensions are defined in percentages. By setting a percentage, you won’t have to think about device size or screen width because your fluid grid will scale with the screen size. The columns inside the fluid grid may have fixed widths and by telling them to float:left we can make these start to stack upon each other as the screen size gets smaller.

Fluid Images

Images should be able to shrink within the confines of the fluid grid. This can be done very simply with a single line of CSS code:

img { max-width: 100%; }

This tells the web browser that images should never be larger than their pixel value, which will ensure that the image is never stretched or pixelated. However, if their parent container is smaller than their pixel value, then the image should shrink. So for example, if an image with a width of 900px is inside a container that’s only 640px wide, the image will also shrink to be 640px wide. The height will be calculated automatically to maintain the images aspect ratio.

Media Queries

Media queries allow CSS to only be applied when specific conditions are met. When considering web for mobile devices we code media query that will only apply CSS if the browser reaches a specific width. Therefore we can take a two column (content on left, sidebar on right) and we can move the sidebar underneath the content on mobile screen sizes. Other thing we can do using this technique include changing font sizes, padding and margins based on screen size.

@media (min-width: 700px)

…and finally, something to think about…

  • Over 25% of internet users only use their mobile device
  • 2014 was the year when several of our clients saw the majority (over 50%) of website visitors come from mobile devices
  • 4 out of 5 consumers use smartphones to shop
  • 78% of retailers plan to invest in mobile this year
  • Talk to us about making your website as accessible as it can be. Deliver your content in the way the your customers want to receive it – wherever they are.