As a frontend developer, designer, and mentor at Thinkful, I talk with junior web developers on a daily basis. I see their struggles, inspect their portfolio sites, and am always on the lookout of how to improve their understanding of CSS.
In this post, I want to outline the most common issues junior frontend devs run into when building a responsive site on their own. The two major lessons that I’m skipping in this article are various CSS resets like normalize.css and the box-sizing border-box * { box-sizing: border-box; }. If those passing mentions aren’t familiar to you, I’d recommend reading about normalize here https://the-pastry-box-project.net/oli-studholme/2013-june-3 and about border-box here https://css-tricks.com/international-box-sizing-awareness-day/.
Without further ado, here are the 5 most pervasive mistakes I see early developers making.
1. Adding“responsiveness”to the content, rather than the container.
One of the key problems I see on a daily basis is folks adding responsiveness to each piece of content of their site separately. This content is then shuffled in order right into the <body> tag. This quite often leads to inconsistent edges on the left and right hand side of the page, with content occasionally aligning(maybe on the developer's normal screen size) and falling out of alignment at other sizes. On mobile, these sites either have huge %-based paddings, horizontal scroll, or lack some much needed space between the edge of the screen and the text.
Fig 1. Inconsistent margins b1 , b2 , b3 from the edge of the page.
Sites need to show up on a lot of different size screens, but that doesn’t mean you need media-queried changes on all the pieces of your site! You can tackle the majority of what makes a site responsive with one container class that gives you padding for mobile sizes and wraps your whole design(holds your grid) at large sizes.
Fig 2. One container class should handle all your left/right margins.
At mobile sizes, the paddingon the sides creates a bit of space to push your content away from the edge of the screen. This container stays the same width as the viewport(browser window) until you reach screens with > 1000px width. After that point, it stops growing and simply stays centered in the screen.
Note! You don’t need to use % or other funky units to make a simple responsive container for your site. Explicit units like px or em/rem can do the job. A media query can be used to alter aesthetics but doesn’t change the core rules of max-width , margin-left , and margin-right that make this technique work.
Want a section to have a different background? Simply wrap your .centered-container in another class with the background. Want the content to be off-center? Add a large-screen media query, and set an explicit margin-left: 120px; and viola – your page no longer sticks to the middle, but instead stays on the left side of the screen, comfortably far from the edge.
2. Styling content before you have some default typography
Suppose you’re working on a portfolio site, something you just started. You have an image, you want your name to run in the middle of the screen, and a paragraph with some details. Here’s the HTML:
The next step you might take may be tempting to start adding classes or writing selectors like #about-me p { – WAIT!
As soon as you have a chunk of content to start your website, you should set up your typography and default colors! If you hate picking fonts and/or have some theory about why you’re not“creative” – that’s OK, this is also the right time to add a CSS framework. In general, you’re looking for some typographic defaults on your body or html tag, defaults for display: block; elements like p, h1 through h3, ul, and defaults for display: inline; elements like strong and em. A complete styleguide or CSS framework would also include h4 through h6, blockquote, the table family of elements, pre(code blocks), figure + figcaption for images and a few rare inline elements such as sup(superscript). But don’t worry about covering all the edge cases, just pick a default font-size , line-height , and color early on.
1. Adding “responsiveness” to the content, rather than the container.
.centered-container { padding-left: 20px; padding-right: 20px; max-width: 1000px; margin-left: auto; margin-right: auto; /* Optional: padding-top, padding-bottom, etc */}2. Styling content before you have some default typography
<section id="about-me" class="centered-container"> <img src="/olex.png" /> <h1>Olex Ponomarenko</h1> <p>I help make do good wabsites.</p></section>body { font-family: "Open Sans", sans-serif;