Creating a Responsive, Mobile Optimised Website

***Precursor: the following information assumes you have a grasp of HTML and CSS, without these skills you may find it difficult to implement these steps into a fully responsive website.***

You have a website, it looks great on desktop but as soon as you find it on your phone, CHAOS! Text is unreadable, images are stretched and everything is on fire!!!

Maybe not so dramatic, but you’ve realised something ‘This website can’t be viewed on mobile’. More importantly, based on this compilation of website statistics more people are using mobile devices to surf the web than desktops, so what will happen if the majority of visitors to your website, can’t actually view the website?

If you’re facing this issue, read on and let me help.

Is it Mobile First or Desktop First, Progressive Enhancement or Graceful Degradation

Let’s try to understand these terms often thrown around when talking about a responsive website. These are two particular approaches that a developer can take, mobile first and desktop first, which means who your website is originally targeted to. If you’ve been running your desktop website for years with great success but want to tap into the mobile audience, you need a mobile alternative, your website is desktop first and mobile second. You’re going to build it so that it ‘gracefully degrades’ AKA Graceful Degradation, which simply means as the screen gets small, the website responds and still looks graceful as you do so. Progressive Enhancement almost means the opposite of this, you have a website that was built to look excellent on mobile (Mobile First) and it progressively enhances as the screen gets bigger to look good on desktop.

Something else you might come across is edge-to-edge, but don’t despair, it basically means full-width, left to right, no gaps on either side.

Now you know the approach to take, what it is you’re trying to accomplish and that there’s a lot of fancy terms for something fairly straightforward. But how on Earth do you do this? Well an experienced developer is a great ally in your war on Responsive, but failing that let me give you some pointers.

Use a wrapper

Here at Fifteen we wrap our content. If anything needs to be eligible, it gets wrapped. What this does is contain the content and displays it at the easiest to read size. We wrap it with a div, with a class of wrapper. The CSS for this looks a little like:

.wrapper{
width: 95%;
margin: 0 auto;
max-width: 1200px;
display: block;
}


This class will then prevent the content on the site from extending to be wider than 1200px (believe me, reading anything wider than this requires you to turn your head) while centering it and giving a bit of a gutter on the left and right.

Use Percentages, not pixels

This is almost basic instinct when it comes to web development and is pretty standard, and for good reason.

You want that div to be full width, use 100%. You want that div to be half the width, use 50%.

You want that image to fill your screen slap it with `width: 100%;` and there you go, but no, wait… the image is stretched! Well with images we can use this CSS:


image{
width: auto;
max-width: 100%;
display: block;
}


With this approach your website should start to play a little differently when you resize your window, but alas it still looks awful on small devices.

Use Media Queries

So you made 2 divs, 50% width and float to the left to make them sit side-by-side. This looks great on desktop, very design-y, but on mobile, all the content is squished and goes off the screen and it’s simply unreadable. There is a point as you make the window smaller where it still looks good but then BOOM! And it’s no good. This is where you should implement Media Queries. The idea behind a media query is to look at the conditions you outline, and then apply the styles you have written. So remember that point where your website still looks ok? Any screen size smaller than that, we’re gonna stop those divs being 50%, sitting by side-by-side and we’ll make them full width. Look at this example:

Media Queries on jsbin.com

Use the Right Meta Tag

This is the Meta Tag you should use if you want your website to be rendered the same width as the browser:

<meta name="viewport" content="width=device-width">

This will make the website render at the same width as the browser, e.g. if your on a mobile thats 350px wide, then make the website render at 350px wide.

Going Forward

Every (bespoke) website is different, so you’ll need to apply these methods as required but I hope this will be a good foundation to help you build in the rest of the site.

A lot of this information is developer oriented, and without some HTML and CSS knowledge, this might not make much sense.

If you need a developer’s help, contact us and see how we can assist you.