Making your site look good on mobile

I'm really excited to see more people building personal websites. But the landscape has changed a lot since the Geocities days, and one of the biggest differences is the sheer variety of screen sizes. I see a lot of people concerned that their sites don't look good on mobile phone screens, so here's some help.

There's a lot of information about this online already, but most responsive design tutorials assume you're a pro developer working on something big and fancy. This is aimed at hobbyists - people who have a basic grasp of HTML and CSS, but who just need a bit of help making something that looks good on phones and other small screens. All these fixes can be implemented in plain HTML and CSS without needing any fancy frameworks or extra tools.


A basic page

If you're new to all of this, it's best to start out simple. Here's a super-basic page with no mobile support - just some text and a picture (source: placekitten) - and basic styling. Not much to look at, but it gets the point across. Here's how it looks on my laptop's screen.

A basic webpage on a large screen

All well and good, but here's what it looks like on my phone:

The same site on mobile, with the content shrunken to fit

Not so great. Without any guidance for how to render the page, the mobile browser shrinks it down to fit it all in. My eyes hurt just looking at that tiny text. Let's fix it. Before we start, here's the HTML for this page as it currently is, with no mobile optimisation:

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Responsive Page Tips</title>
    <link rel="stylesheet" type="text/css" href="responsive.css">

</head>

<body>

    (text and image)

</body>
</html>

And the CSS:

body {
    background-color: lightblue;
    font-family: Arial, Helvetica, sans-serif;
}

And you can view the page itself here.


The viewport meta tag

First let's fix the tiny text. That's happening because right now there's nothing to tell the page to scale the text content for differently sized screens. We can fix this with the viewport meta tag.

Meta tags are a type of HTML tag that go inside your site's <head> tag. There are several different types, but most of them deal with things like search engine optimisation and aren't that relevant. But the one tag you should never skimp on is the viewport tag. This tag tells the browser to scale the page content to something that's readable on the device's screen size. Just add this into your page's <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

For example:

<head>

    <title>Responsive Page Tips</title>
    <link rel="stylesheet" type="text/css" href="responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

It doesn't really matter where in the head tag you put it as long as it's there and nested within the head tag, not outside or in the body. Here's the updated version of the page on my phone:

The site on mobile, with the text properly scaled

Much better! As before, you can see the updated page here. Notice that it looks the same on desktop screens, but on a phone the text is no longer shrunken and we can easily read it.

Note: The effects of the viewport tag are only really apparent on smaller screens, because it takes into account the actual device size. For everything else on this page, though, you can simulate a mobile screen just by resizing your browser window to the approximate size and shape, because all the other fixes depend on the page's width.


Image sizing

From the screenshot above you'd think the page looks fine, but scroll down on a phone-sized screen or shrunken browser window and you'll quickly see that the image is still full width.

The page image overflowing the window width

Thankfully this is easy to fix with a small bit of CSS. Add the following into your CSS file:

img {
    max-width: 100%;
    height: auto;
}

Here's what our example page's CSS now looks like:

body {
    background-color: lightblue;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

Now all your page images should scale to fit the window width:

The page with properly scaled images

View the updated page here.

Note: if it doesn't work, check that you don't have another CSS rule in your stylesheet targeting all images that overrides what's in there.


Media Queries

Adding a viewport meta tag and image scaling rules are two the biggest and easiest things you can do to fix your site for mobile viewers. In fact, the main layout for my site, which you're looking at right now, does no more than that, and it looks fine on my phone, because it's just a simple text layout with a top bar - nothing fancy.

But for more complex layouts, you may find that your page elements still don't look right. You can fix these with your new best friend, media queries. Let me give you a little background - I'm old enough to remember when it was commonplace to design layouts for different resolutions because it was the only way to make them look good, leading to splash pages where the user had to pick between the 800x600 and the 1024x678 versions. Media queries solve all those problems. In short, they're additional pieces of CSS you can use to make your page look different depending on the size.

Well okay, like meta tags there's a lot of different media queries which can do all sorts of things, like make the site look different when printed, or in landscape vs portrait orientation, most of the time all you're going to want is the device width query. First of all, let's update our example page to something a bit more complicated.

An updated version of the page with a two column layout

Here I've given the page a simple two column layout with a navigational bar to the left and the content to the right. Here's the HTML for this page. The content has been moved inside a <main> element, and before that I've placed a <nav> element with a list of dummy links inside. (Why <nav> and <main> instead of plain divs? It makes things easier for screenreader users, as the reader can now tell the users if it's on is a navigational element or main content.) The two elements are then placed inside a regular div with a class of "wrapper".

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Responsive Page Tips</title>
    <link rel="stylesheet" type="text/css" href="responsive4.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

    <div class="wrapper">

        <nav>
            <ul>
                <li><a href="#">Lorem</a></li>
                <li><a href="#">ipsum</a></li>
                <li><a href="#">dolor</a></li>
                <li><a href="#">sit</a></li>
                <li><a href="#">amet</a></li>
            </ul>
        </nav>

        <main>
            (text and image)
        </main>

    </div>

</body>
</html>

And here's the CSS. We put the nav and main elements side by side by giving the wrapper class the display: flex; and flex-direction: row; properties. There's also some styling to outline the boxes and I've added some padding to elements to make things easier to read.

body {
    background-color: lightblue;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

nav, main {
    border: 1px solid darkblue;
    padding: 10px 30px;
}

nav ul {
    padding: 0;
    list-style-type: none;
}

nav ul li {
    padding: 10px 0;
}

As before, you can view this page here.

You can see that the meta tag and image sizing rules are already in place, so it doesn't look too bad on mobile screens:

The same page on a phone-sized screen

But we can do better. Screen size on phones and other small devices is limited, so it's not very user friendly to have all that dead space down the side. An easy way to fix this particular layout would be to stack the nav and main elements on top of one another if the screen gets smaller than a certain size. We can do that with a media query. For example, here's a media query that will apply if the page is less than 600 pixels in width:

@media screen and (max-width: 600px) {

    (whatever styles you need to apply on small screens)

}

"@media" tells us this is a media query, and "screen" tells us it's to apply to content on a screen (as opposed to printed content etc). "max-width: 600px" tells the browser to apply these rules up to a maximum width of 600 pixels. (If you wanted to reverse this and have the rule apply to screens wider than 600 pixels, you could do that too, with "min-width: 600px") Inside the curly braces, you write in the CSS code you want to apply at that size. If the screen is the specified size, it will override the base styles.

Note: You can apply media queries to fit whatever size you want - there's no standard for what size screens you should add rules for. Do what you think looks best.

Here's our CSS file updated to add a media query that tells the browser to give the wrapper div a flex-direction of 'column' if the screen is less than 600 pixels wide:

body {
    background-color: lightblue;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

nav, main {
    border: 1px solid darkblue;
    padding: 10px 30px;
}

nav ul {
    padding: 0;
    list-style-type: none;
}

nav ul li {
    padding: 10px 0;
}

@media screen and (max-width: 600px) {
    .wrapper {
        flex-direction: column;
    }
}

And here's how it looks when I shrink my browser window:

The same layout with column style added

Once again, here's the link.

Now the nav and main elements are stacked on top of one another and the main content can take up the full page width, making it a lot easer to read on a phone. Admittedly this is very rough still - I might also add rules to the nav to put the links side by side, or fix some of the padding, but this is just a proof of concept. You can make your mobile sized pages look as different or similar to the full size version as you like.

Tip: You can of course have more than one media query in a CSS file, if you really need to fine-tune things.


General tips on designing for mobile

With the tools outlined above, you should now be able to make sites that look and work great on desktop and mobile screens alike. Here's some general tips:

  • Mobile screens are small, and phones often have poor connections. That goes without saying, but it means your mobile page should ideally have a cleaner, less cluttered layout. Keep the fancy effects to the desktop version where your users will be in a better position to appreciate them.
  • Stacking elements on top of one another instead of size by side as in the example above makes things easier for tall, narrow phone screens.
  • Be careful when giving elements fixed widths in pixels - they'll overflow any screen that's smaller than they are. That doesn't mean that you need to avoid them, but if you do give an element a fixed width, make sure to add a media query for screens it doesn't fit in which you give it an alternative width. For example I might have a main content block be 700 pixels wide, but on screens smaller than 700 pixels have it take up a percentage width of the screen instead.
  • If you need a guide and don't mind a shameless plug, my Layout Gallery contains some pre-made layouts that you're free to use and modify, and they're all set up to be mobile-friendly.

You can email any comments or questions to kaliumlynx@protonmail.com