Your Website Needs to Work on Phones

Why You Should Care

I want to emphasize that not everyone owns a computer.

Smartphones are cheaper than computers and do more things. A phone can call people, it's portable, and it can connect to the internet without wifi (not to mention smartphones are virtually mandatory for living in modern society). The sheer breadth of apps available on smartphones nowadays also allows people to do a lot of stuff that previously only possible on a computer. If you only have the money for one device, you're buying a phone.

The smartphone issue, like many other things, also overlaps with accessibility. A series of surveys among disabled people found that a large majority (84% in 2015-2016) of the respondents use smartphones. Touchscreens require less motor engagement to use than a keyboard and mouse, and smartphones have functions like screen readers, haptics, dictation, global text resizing, color/contrast adjustment, and autocomplete built into them. Many disabled people also use their phone as an accessibility tool in of itself, once again making the phone a vastly more versatile tool than a computer.

And still there are people who own both a computer and phone, but prefer to do their internet browsing on their phone. This is also fine. Complaining about people liking to use their phone makes you sound like a boomer in 2013.

Even if you think too few people visit your page to make designing for mobile worth your time, think about the message you're sending. By posting a giant sign on your homepage about how you hate phones and you'll never make your website usable on a phone, you are indicating to viewers that you lack the social maturity to consider people who have different habits, needs, or preferences than you.

More succinctly, you're effectively telling mobile users that you don't think they deserve to use your website. (This applies even to seemingly non-antagonistic messages like "This website isn't optimized for mobile and never will be.") The principle extends to many design choices besides mobile compatibility, but we've been over that already.

I don't mean to imply that everyone who doesn't have a mobile-accessible website hates phones with every fiber of their being. It's more likely that you just haven't thought about it; accessibility in general is easy to forget about if you don't need it. If you haven't thought about any of this stuff before, you're thinking about it now, so you just have to do something about it.

Now I Will Tell You How to Do Something About It

Mobile design is not easy. I don't think it needs to be easy to be worth doing. You made a website; that wasn't easy, but you did it. "It's too hard" is a pretty poor excuse for not making an accessible website when you already have a website. The good news is, it's probably not as hard as you might think.

Here's a secret: assuming your website is cleanly designed and structured logically, you don't have to change a thing about how it looks on computers to make it work on mobile. If your website isn't structured logically or can't even be viewed on screen resolutions smaller than 1920x1080, you need to solve that problem first. But let's say you have a reasonably-composed website with menus, a content area, and maybe a header. You can make it mobile-compatible without touching anything in your desktop CSS! Amazing!

To prove my claim, I will take a somewhat unorthodox layout I coded in 2010 and drag it kicking and screaming into 2022 without changing its fundamental structure on larger screens. This is not a lesson on general web design, so I'm not messing with anything that isn't structural. If you think the design sucks, that's fine, but that's not the point here.

If your website isn't in HTML5, it needs to be, so we'll fix that before we do anything else. If your HTML is organized and tagged correctly, Reader Mode will be able to sift out your content and spit it out correctly. You want your content area to be tagged with main, all menus tagged with nav, and headers and footers tagged with header and footer, respectively. You'll still use divs for things like containers or styled elements that have no significance to the content.

Here's what the structure of this page looks like after changing all the tags over:

<div id="container">
<header id="title"> 
</header>
<main id="content">
<footer id="footer"> 
</footer>
</main> 
<nav id="navigation"> 
</nav>
</div>

Assuming you didn't explicitly reference divs in your CSS, everything should look exactly the same because you left all your IDs in the HTML. The last thing you need to do to your HTML is to put <meta name="viewport" content="width=device-width, initial-scale=1"> into the head of the page.

Now, we can hop back to the CSS. Before doing anything to the code, though, it's worth it to take a few minutes to think about how you want to translate your website to mobile. Where do you want your menus? Do you want your links to stack horizontally or vertically? If you have a lot of links, maybe you want to condense them. There's a surprisingly large amount of creative freedom in mobile design.

In my case, I'm going to move the menu to the top, then have the link groups stacked horizontally. I made a picture for demonstration purposes. I don't usually make diagrams for layouts, but some people find it helpful and maybe you will too.

Visual in hand, we can actually start working on the CSS. Our secret weapon is the @media tag, which lets us set a maximum or minimum screen width at which the styling inside of it will take effect. The two standard cutoffs are 800px and 1024px. Which one you use depends on your layout width and personal preference. For this specific layout, I'll use 800px because the container width is 680px, so it fits comfortably on an 800px wide screen.

At the bottom of your stylesheet, start a new code block with @media screen and (max-width: 799px) { }. (If using the 1024px cutoff, use 1023px.) We'll be nesting everything else inside those curly braces.

First, we need each block to fill up the entire screen.

#container { 
	width:100%;
}

#content {
	width:calc(100%-20px);
	float:none;
	padding:10px;
}

#navigation {
	margin:auto;
	float:none;
	width:calc(100%-10px);
	padding:5px;
}

#title {
	text-align:center;
}

We need the calc tag in order to avoid overflow if we use padding. Otherwise, the CSS tells the box to fill up the entire page, then add padding, which will cause it to go over the full page width (bad!).

Our page already looks a lot more usable, but we have an issue because the navigation is at the bottom of the page when we wanted it at the top. This is expected because it comes after the content in our code. To move stuff around, we'll use flexbox to reorder our boxes. (If you're already using flexbox, you don't need to declare it again. Also, all the width business can be replaced with flex-grow:1.)

#container { 
	width:100%;
	display:flex;
	flex-wrap:wrap;
}

#content {
	width: calc(100% - 20px);
	float:none;
	padding:10px;
	order:3;
}

#navigation {
	margin:auto;
	float:none;
	width: calc(100% - 10px);
	padding:5px;
	order:2;
}

#title {
	text-align:center;
	order:1;
}

The menu is at the top of the page just like we wanted! You need to use display:flex for this to work, and you'll need to order every element, even if you only want to move one. You also need to include flex-wrap:wrap to prevent flexbox from trying to force things into columns.

This is actually a perfectly good mobile layout, and I could easily stop here. For extra credit, though, we'll keep going to implement the stacked navigation I wanted. Horizontal stacking is a really good way to condense large menus, so I'm going to show it off here.

We'll have to modify our HTML a little for this. We're going to use grid, which will only work if each section of the menu is grouped together in its own div. Fortunately, that's not a very high-effort task:

<nav id="navigation">
<div class="navsection">
<h1>Sitely</h1>
	<a href="">Home</a>
	<a href="">Forums</a>
	<a href="">About</a>
	<a href="">Credits</a>
	<a href="">Joined</a>
	<a href="">History</a>
</div>

<div class="navsection">
<h1>Content</h1>
	<a href="">Icons</a>
	<a href="">Bases</a>
	<a href="">Textures</a>
	<a href="">Renders</a>
	<a href="">Layouts</a>
	<a href="">Buttons</a>
</div>

<div class="navsection">
<h1>Section</h1>
	<a href="">Link</a>
	<a href="">Link</a>
	<a href="">Link</a>
	<a href="">Link</a>
	<a href="">Link</a>
	<a href="">Link</a>
</div>
</nav>

These divs don't require further styling (but you certainly can style them if you want). We're just using them for the grid to work correctly. Now, we can tell our navigation to organize these sections with grid:

#navigation {
	margin:auto;
	float:none;
	width: calc(100% - 10px);
	padding:5px;
	order:2;
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

So, what's going on here? The grid-template-columns tag dictates the size of the columns. Because we need to accommodate a wide range of screen sizes, we're telling it to automatically fit as many boxes as we can in there. The minmax option dictates the lower bound on the size for each box. Smaller smartphones are about 360px wide, so keeping your minimum width under 150px is advisable. The 1fr tells the boxes that they should each take up the same amount of space, and it'll expand their widths uniformly on smaller phones. In general, grid requires a lot of trial and error, so just change stuff around and see what happens.

Our completed mobile CSS chunk is here:

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

	#container { 
		width:100%;
		display:flex;
		flex-wrap:wrap;
	}
	
	#content {
		width: calc(100% - 20px);
		float:none;
		padding:10px;
		order:3;
	}
	
	#navigation {
		margin:auto;
		float:none;
		width: calc(100% - 10px);
		padding:5px;
		order:2;
		display:grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		grid-gap:5px;
	}
	
	#title {
		text-align:center;
		order:1
	}

}

Now our layout has each section of links arranged in a row on top of the content, which is exactly what we wanted. We did it! We have a mobile-compatible website with little to no pain involved!

What Now?

The code for this layout is available on the layouts page to use or study from. There are many ways to code a website for mobile and I'm not saying this one is The Way you should be going, but it's a relatively simple and foolproof method that you can do pretty fast.

Mobile design requires a lot of trial and error, so don't be afraid to do something weird. Firefox even has a built-in simulator that resizes your viewport for a variety of common smartphones and tablets, which makes the trial and error process significantly easier. If you're feeling ambitious, you can also try doing mobile-first design, where your main CSS is for the mobile version of your website and the desktop code uses the @media tag and min-width instead of max.

Learning mobile design is necessary for the time we live in, but, as a side effect, it'll also make you a better web designer. I want to see kickass mobile designs that don't just look like an afterthought, so take your newfound knowledge and show them to me.

Now that we've been on this journey together, I am begging you to stop making me read the sentence "This website does not work on mobile" in the year of our lord Jesus Christ 2022. Please.