September 18, 2018
Share this:
CSS Beginner

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.

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

Share this: