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?
Latest comments (49)
What do you guys think about anchors vs. buttons in SPA navigation.
i.e. if in a todo-list, you hover over the todo and a "view details" link appears. This will take you to a separate page, but still inside that tab / SPA.
Should this be a button or anchor?
Look at the user concepts. If it LOOKS like a panel opened in the list (even if the URL changed) then use a button (style). If it looks like a new page use a link style. But most of all, be consistent.
May I add, do proof-read. Especially for grammar. Have someone else to do it if that's not your skill set. Expecting visitors to guess what you actually meant is just exhibiting your disdain.
I always don't satisfy with my website's UI because it looks ugly when comparing to other sites. But I am also too lazy to redesign or improve it. 😂😂
EVERY is a bit of a strawman, the argument was about someone introducing a web framework. It mentions Vue, which is actually one of the easiest to progressively introduce into a web page.
Speaking more as a user, I hate mobile first. Too often it turns into "mobile only". I have the space, use it to full advantage. Just looking at this page, there's a huge amount of white space on the sides, why? There's close to a thousand px of whitespace if I keep things maximized, and it's not like I'm using a 4K screen.
Hard coding ful path got to me. For me, it gets boring writing links over and over again. As much as possible I use partial links on pages, links and images. Thank you for this 😊
Designing a website mobile first is definitely a fabulous idea. It is a lot easier to create a website that way. It is a nice challenge to be able to design something that looks appealing to the eye on a small mobile screen.
One of the hardest things for newbie.... Experience talking here.... Been there done all the mistakes....
The DIV-Happy one is like my most-used bad habit. I do design stuff for mobile view, but after I've gotten it down in a computer's view first. If I make a navbar, I'll design what it looks like on a computer first and then add media queries to make it responsive.
Useful but just 5 tips? Hope to read more.
Thanks for such an amazing post
Do not be like me , I use ( text-align ) to center everything in a div container (e.g image, text buttons ) .
Instead , you should use the right property ( display: flex ;
Align-item: center
Justify-content: center
Great post!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.