Designers, this is how HTML & CSS work

May 15, 2020

Tell me if this is you: cooler-than-your-average designer with a penchant for digital products…. who doesn’t find coding fun. It’s alright, you can say it here. It’s a safe space.

Code is hard. Especially CSS, notably the most difficult programming language. Wouldn’t it be great if you could just absorb all HTML & CSS knowledge without learning it?

Well, you can’t. But that doesn’t mean you’re destined to a life of ticking off developers with impractical designs.

Knowing how code works is priceless when it comes to designing websites, but no—you don’t necessarily need to be a coder yourself.

So below I’ve listed out 10 of the most often recurring “gotchas” with coding a design to life. Based on my experience just knowing these 10 things will save you back & forth discussion and the heartache of a poorly-implemented design plus your developer colleagues will rave about you. Make sure to read to the end because the lessons build on each other.

#1. Everything is a box of text or image

On a webpage, every HTML element you see is a rectangular box of text (like a header, paragraph, list) or an image. The boxes and images can be stacked on each other, lined up side-by-side, and overlapped. A box doesn’t have to look like a box (but it should logically be a box—organic blob shapes are out). You can round corners with CSS, as well as use transparent or image background.

This button is a box of text with a background image.
Also a box of text with a background image.

If something definitely cannot be a box of text (such as a logo or decorative graph) it probably has to be implemented as an image.

Images have a bigger file size than text and can slow down the loading time of a site so you only want to use images if they’re essential, while being aware that photos have more weight than solid & gradient-colored shapes.

#2. The boxes have a model

The box model is the layout system for websites. As I mentioned, everything is a box. You make the boxes look different, like big or small, dark or light, bordered or not, with CSS properties like width, height, background color, and border width. All boxes also all have a same pair of inner & outer layer, called padding and margin respectively.

There’s the content of the box, which is everything contained within the HTML start and end tag, like this section:

<section>This is content that belongs to the section box.</section>

This content is not contained inside the section so it's not a part of it.

Padding is on the inside with the content of the box. Padding adds space between the content edge and the content itself. Background colors and images extend to the edge of the padding, beyond the content box.

Margin is on the outside of the content of the box. It pushes other boxes away.

Borders sit between the padding and margin. So if you gave a button a black 1 pixel border, the space inside the border would be the padding. The space outside the border is the margin.

#3. Plain text is best

Believe it or not, people do read online. In fact, that’s the primary thing they do. 95% of the information on the web is written language. The people are here to read, so make it easy on them (and your developers) by using web-compatible fonts for your website’s important content. People will be using machines to read your text, highlighting & sharing it, and resizing it, so the less decoration or fancy effects (like curved text) you rely on, the better. Some effects—like text shadows—may be impossible on the web as well, at least for older browsers.

The important information here (the headline) is plain, highlightable text with web fonts, not a PNG.

#4. It’s a vertical world + how responsiveness works

The web has a vertical bias. People like to scroll especially on their phones. It’s why long, horizontal sites never took off and how responsiveness works for developers. To oversimplify it, they collapse multiple-column layouts into one column.

Elements get stacked like a layer cake by default, and it make sense—vertical stacks are much easier to adapt across all kinds of screen sizes, because you don’t have layout issues to manage with more or less space across. You simply keep the elements the full width. This is especially handy for design methods like mobile first, since narrower screens can’t necessarily hold designs where elements are beside one another. By stacking, you get greater consistency in a design, what ever the screen size.

Frank Chimero

This means you should design for discovery through scrolling. Horizontal sliders are usually a bad idea, for this reason and many others. Text boxes shouldn’t be constrained by height in most cases because of the vertical nature of the web. A headline of two lines could be three on mobile, so developers prefer not to set a definite height on elements, opting instead to let the element’s height flow how it wants & pushing further elements down the page if needed.

#5. Please use a grid

If you’ve ever used a website builder you’re probably familiar with the concept of rows & columns.

When you’re designing in your design software the world is open to you. You can place a big 17-point star at the top right of the screen, no friction. But when developers are coding your design, they think in terms of elements being placed inside structured rows & columns, not positioning the elements themselves.

Designing without a grid is chaos for both you and developers. So always start with a grid, which you can either set up in design software by configuring the grid feature or with rectangles & guides.

Here is the configuration I usually use for a webpage grid. There are 12 columns each 64 pixels wide and 32 pixels of space between the columns. (11 gutters)

In the image below you can see there are 3 rows and 12 columns. In web design there are almost always 12 columns (because 12 is a number that be divided by 6, 4, 3, and 2, useful for even-sized columns) with “gutters,” or empty space between the columns.

The article where the image is from, Responsive Grids and How to Actually Use Them, is helpful for learning how to use grids exactly.

#6. Animate only opacity, position, size, and rotation.

Developers are concerned with website performance, and you should be too. To keep animations silky smooth not janky or delayed, limit what you animate. In code, only the opacity and transform properties are efficient. Use other properties such as background color for animation at your own risk.

#7. Reuse elements and sizes

Alton Brown would make a good web developer because of his disdain for “unitask” (only does one thing) appliances.

Web developers are like Alton Brown. Unitask design elements make them itch. Reusable, repeatable elements make their job easier (and yours!)—limit the number of styles for components in your design to the essential.

One place where it quickly becomes obvious when elements aren’t being reused is in a design’s buttons (too many different heading styles is also a telltale sign). Below you can see dozens different styles of buttons for one design.

from Brad Frost

The code for this would be a nightmare to maintain.

This button system is easier to maintain.

It’s not to say that deviating from established patterns is always a bad idea, but it’s important to recognize the difference between intentional and unintentional deviation. An interface inventory helps expose unintentional inconsistencies and encourages consistent, deliberate design decisions.

Brad Frost

Sizes, which is to say the size of anything including the space between elements, should stay consistent as well. Arbitrary sizing has the same problem as unitask elements—deviation from the “base” looks inconsistent and requires more development time & future maintenance.

#9. You get 8 colors

OK, 8 is an random number and I may as well have said 4 or 12, I admit it.

The point is to limit the number of colors. Having 30 different shades of grey in a design looks like a mistake, plus it’s more to manage in code, particularly when it comes to naming the greys. By the way, changing the opacity of a color counts as a new color.

#10. The corners that get cut when you design inefficiently

I want to end this article by bringing attention to why it’s important to be familiar with the grain of the web (HTML and CSS).

Support for older technologies, accessible content for people with disabilities, and fast loading on mobile speeds (some people have only their phone for internet connection) are some of the things that can be left by the wayside if a design is too “fancy.”

You can probably tell I think restraint is an important part of website design.

It’s not only about making developers’ job easier but also being a steward of websites for people who are just using the web not making it. And it’ll make your designs better.

About the Author

Diana Lopez

Diana Lopez


Diana Lopez is a brand strategist and designer who helps ambitious startups, entrepreneurs, and small businesses make their vision reality.

Post Comments 💬


Submit a Comment

Your email address will not be published. Required fields are marked *

Psst… keep scrolling 👇👇👇

Download the Brand Purpose Guide.

Find out what a brand purpose is and why you need one +a framework to form your own.