Cover photo by mohamed abdelghaffar from Pexels

1. Not Designing for Mobile First

You know what’s difficult? Taking a complex, intricate design that looks pixel-perfect on a 24 inch monitor and trying to shove it on a 300-pixel-wide screen.

How do you decide what to cut? How do you ensure the most important info is still above the fold? You go back in time and design the mobile view first.

If you’re not optimizing your design for mobile, you’re likely serving a subpar experience for a majority of your users.

Start with a simple prototype that gives users easy access to the most important information on the page. Add design elements as you scale for bigger devices.

If you’re not a designer, take advantage of tools like Bootstrap.

2. Not Being Consistent

Consistency helps users know what to expect from your website and helps teach them how to use it. Being inconsistent can lead to frustration, despair and high bounce rates.

Inconsistent Links

You should treat links of the same type the same. If one of your external links opens in a new window, they should all open in a new window. (Don’t forget to think about users using screen readers. Check out these suggestions on making target=”_blank” more accessible)

This includes links to media! Don't indicate a link opens a PDF in one place and neglect to add that info everywhere.

Inconsistent Style / Design

While it's more than likely that you'll have multiple page templates and designs, users shouldn't think they've navigated to a new website or caught you in the middle of a theme update when the open a new page.

You should have your basic theme colors and include a header, navigation and footer where appropriate. (E.g. If you're building a JavaScript SPA browser game, you probably don't need a footer.)

It can be tempting to use an entire palette of colors and six different Google fonts, but less is...way less confusing. Define your CSS styles for font families, colors and sizes and use them.

3. Hardcoding Full Paths

Stop. It. Do you enjoy doing things multiple times? Does it bring you joy to install a plugin that literally only does one thing that you could’ve done yourself? Stop hardcoding full paths!

I cannot express to you how many times I’ve had someone ask me to troubleshoot a website issue that turned out to be a hardcoded full path for an image source attribute or external stylesheet.

Clients change their minds about domain names, production and development domains differ. Using partial paths gives you the freedom to make changes and push to production without having to go back and look for references to a previous domain.

4. Not Using Image Alt Tags

Seriously, it’s 2021. Adding alt tags to images is literally the most basic thing we can do to make a website or app more accessible. This is especially true for any images that contain text. The goal is to express the function, meaning or information portrayed by the image to all users.

Check out this alt decision tree for help deciding how to make images in specific contexts more accessible.

5. Being Div-Happy

Listen, we all love divs. They're fun little boxes that you can use for almost anything. But just because you can doesn't mean you should.

We should try to use divs only when there are no more appropriate - read semantic - elements for the job. You could use a div for your menu and everything would work fine. But using a <nav> element helps anyone using a screen-reader and the non-humans (i.e. search engines) understand the meaning behind your code. This isn't just a box with links in it, it's a navigation elements that holds a menu that will guide me through the rest of the site.

Instead of using a div to...
Place text under an image ... use <figure> and <figcaption>
Make a link that performs an action (e.g. uses JavaScript to open a modal or page through a multi-page form) look like a button ... use <button>
Group the main part of your page ... use <main>

What are your web development bad habits? Which ones do you come across most often?