September 18, 2018

6 Tips for making a responsive website from scratch

When you're starting out with CSS and the web, it's easy to get into frameworks like Bootstrap, or Bulma. They're an excellent tool for fast prototyping, and getting to grips with how to build a website. However, these frameworks are opinionated, and as we grow we hit a point where it is more grief than benefit - If I had a nickel for every time I've seen someone say "I only use bootstrap for the columns..."

It's a harrowing experience taking those first steps out of the world of CSS libraries and building your own responsive site from scratch, but there are easy tricks that will let you spin up experiences that will make your users weep with joy.

Start at the head

First thing to do with any responsive design is to make sure you have the correct meta tag inside your <head>. If you don't, your smaller sizings will just be scaled down versions of your desktop sizings.

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

Have designs for two sizings

Not just any two sizings, mind you – You want one design for desktop, and then another for your smallest supported device. A good target for this is an iPhone 5s/SE.

The reason we want two designs is that as the screen gets smaller, we want to know how to reposition our content to make it fit. Having two target designs to move between makes it far easier to weigh up different approaches, and know we're making the correct trade-offs.

Apply some Axioms

Okay this step isn't actually required, but it can be a life-saver in simpler designs. Heydon Pickering has a really great blog post on some nifty CSS tricks. I'm going to call attention to 2 which I think are great.

body * + * {
  margin-top: 1.5rem;
}

This selector puts a margin between all of your elements. It'll save a surprising amount of annoying boiler plate with your spacings, particularly when text is involved – and in cases it doesn't work, it's trivial to override.

font-size: calc(1em + 1vw);

This one is a little hit and miss, but it can be super useful. It lets your font scale with the viewport size without ever going below 1em on tiny devices. It's great since it guarantees that your font sizes are reasonable for every device size - If your designs require you to have specific font-sizes though, this isn't going to be worth the effort.

Make use of responsive units

Responsive units are units that are calculated relative to another unit. This is extremely helpful in responsive design, as it lets us resize the entire website around, say, a shrinking screen size. I'll put a list of responsive units for your reference, otherwise be sure to check out the Mozilla Developers Guide on CSS.

em - This unit represents the current font size. This is probably the most common responsive unit, and is great for things like padding, margin, line-height, and basically anything else that goes near text.
rem - This unit is the same as em except it is relative to the default font size, so it won't be affected by inherited font sizes. This is a really good unit to set other font-size properties in, just to make sure you don't accidentally get mis-sized text.
ex - This is the height of the lowercase x letter. It's not something I've ever needed to use, but it's a good unit for adjustments to your font.
ch - This is the width of the 0 character. This isn't something you'll be scattering all over your website, but it is a beautiful way of setting line width. max-width: 75ch, yes please.
% - This calculates things in relation to its parent's width or height. It's behaviour can be quite complex to describe, since the value it uses depends on the property it is used with - there are a couple of obvious ones, like width and height, but otherwise you'll need to check with the spec.
vw and vh - These units calculate a value that is a percentage of the viewport width or height. These are often more useful than the % property, since we're better able to describe views on specific devices, and mix-and-match vh and vw if need be.

The thing to keep in mind when moving between screen sizes is that any unit that uses font-size is effectively absolute. The exception is of course if you have a font-size relative to view width.

Don't bake your breakpoints...

Breakpoints are a double-edged sword when working with CSS. They're an excellent solution to most any problem you encounter, but they're also laden with traps. Bootstrap and other frameworks target device widths when creating their css breakpoints, so people can explicitly target device types.

You should not do this, else you'll have to revisit your design every time Apple releases their 1px-wider iPhone. (If you must target specific devices, check out this article)

The best practice for breakpoints is to use them when your design stops working - This could be at 400px, or at 1000px. If your design is pixel perfect across its entire range, suddenly the device the user is on doesn't matter.

The reason Bootstrap and other frameworks don't do this is because they have no idea when your design is going to stop working - but you do. Cohesion between your design and your CSS is your biggest advantage when building from scratch - you'll never want to go back.

...Actually, don't write them at all

If possible, it's best to avoid getting into a situation where you need to write breakpoints at all. By using max-* and min-* properties, you're able to change the behaviour of elements without needing a breakpoint:

section {
	width: 100vw;
	max-width: 100ch;

	margin: 0 auto;
	padding: 1.5em 1em;
}

This causes sections to fill the entire screen up until the screen is able to hold 100 characters, then it floats the content in the middle. It's unlikely you'll be able to get away with no breakpoints at all, but you'd be surprised how many opportunities there are for things like this: Hint: Check out display:flex

Carl Anderson