DEV Community

loading...
Cover image for Web Development Bad Habits to Kick

Web Development Bad Habits to Kick

lizlaffitte profile image Liz Laffitte ・3 min read

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?

Discussion (55)

pic
Editor guide
Collapse
davwheat profile image
David Wheatley

Do not use a button just to "style a link". Buttons are intended to perform actions on the current page.

Side note: also please don't use anchor elements which have onclick event handlers and a placeholder href (e.g. #) -- use a button instead.

Collapse
lizlaffitte profile image
Liz Laffitte Author • Edited

I wasn’t very clear with this. Often I see people using divs with an internal link where they should probably use a button element. For example, opening modals, paging through multi-page forms, etc.

Collapse
joelbonetr profile image
JoelBonetR • Edited

this does not depend on the place you put'em but the context where the items are and the most important is what the user expect to happen. Most UX studies reveal that there are many differences depending on the professional market it's web app is working, cultural history, target of the web app and so.

If your users expect a button (layout) which triggers an action (logic) that according to standards or for convenience needs to be an "a" tag then use an "a" tag and add the proper styles to make it look like a button instead of being stubborn and use a button (which merely purpose is to trigger a "submit" in its context).

If we start talking about A11Y or this kind of things that nobody takes care of excepting when you need to build an application for people with some particular disability (usually never) then it's another story and we can discuss with that in mind.

Thread Thread
ronca85 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
ronca85

you wrote three paragraphs and managed not to say anything. according to standards? what standards? there are no standards on the web. nobody is going to test your website to see if it follows some standard. you can do whatever you want. this is why you basically said it is convenient for me and my own standards to put an anchor tag here because i cannot be bothered to learn a bit of css and style a button to look like a link. if it misunderstood something it's your fault. next time try putting together a sentence that makes sense.

Thread Thread
lofibytes profile image
Jillian S. Estrella (she/her)

Being cruel to people isn't a good look, and certainly doesn't make a positive contribution to this community. Folx are here to learn, not to exchange vitriol.

Thread Thread
franciscboicu profile image
Francisc Boicu

Ronca85, Schrödinger effect: I agree and disagree with you, at the same time.

He did manage to write three paragraphs and not say anything and there are web standards.

Thread Thread
franciscboicu profile image
Francisc Boicu

I'm not saying, they are good, you should be using them and not using them makes you bad. I'm just saying that there are.

Collapse
davwheat profile image
David Wheatley

Yeah, that I completely agree with. :)

Collapse
ronca85 profile image
ronca85

the real question should be: how does a person that uses a div as a button get a job?

Thread Thread
possibly1 profile image
possibly1

Because they're crappy coders but amazing at code exercises.

Collapse
charlieleedham profile image
CharlieLeedham

Another thing would be to stop worrying about using the latest tech, developers get so caught up not wanting to use jquery cause its becoming out dated and want to use Vue yet they have no experience using Vue and there's projects that need to be done in company, learn tech in your own time but as for bringing new tech into the business don't worry about it unless they are paying u time and research on it, cause by the time you learn Vue, react, angular etc, another tech would come out, it all does the same job at the end of the day, just another boring old website, if u are so desperate in making sure u are relevant in the market, learn VR or machine learning etc, something that's different, cause learning Web frameworks would only lead to new frameworks and then more and then more, does the same job, get it done

Collapse
lizlaffitte profile image
Liz Laffitte Author

I agree, if the only reason you’re learning a new framework is because you think you should, you’re on the wrong path. BUT if you really enjoy learning new ones, I say go for it. Just learn it well before jumping to the next one.

Collapse
aarone4 profile image
Aaron Reese

Disagree with both comments. Learning new tech to be more productive and keep company applications at the leading edge of functionality which is a competitive advantage. Old tech is getting impossible to recruit for. Experienced Devs have retired and new Devs aren't interested in being onboarded, otherwise they would all be learning COBOL.

Thread Thread
lizlaffitte profile image
Liz Laffitte Author

That’s a good point. However, I do think trying to learn EVERY new framework to stay competitive isn’t the best course of action. If you’re learning specific new frameworks used by companies or sectors or cities you’re interested in, I get it.

Thread Thread
joellau profile image
Joel Lau

as with all things, balance is important. can't lean in either direction too heavily

Thread Thread
hseritt profile image
Thread Thread
keithn profile image
Keith Nicholas

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.

Collapse
danabaiardi profile image
DanaBaiardi

I am a div lover 😅

Collapse
lizlaffitte profile image
Liz Laffitte Author

I am also a little div crazy. 🙈

Collapse
krishan111 profile image
Krishan111

I found this post really helpful especially the 4th part. Thanks For Posting

Collapse
iamcoderanddev profile image
Nick Williams

I too loved this post

Collapse
jennawagnercode profile image
Jenna Wagner

I guess this link would also help you @krishan111 searchenginejournal.com/10-importa...

Collapse
brandonwallace profile image
brandon_wallace

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.

Collapse
joelbonetr profile image
JoelBonetR

Hi i'm gonna made some puns from a side and to the other:

half of the issues you mentioned are designers concern and not from developer side. Consistent design and Mobile first is something that needs to be achieved on design side, then a layout builder (that does not need to be a programmer) mocks it with html and CSS (on the perfect world the designer would itself provide the HTML and CSS being a Web Designer instead shitty .psd files or similar things that graphic designers does when working on a job that it's over its skills -> digital responsive design, but this is another story).

The rest of "bad habits" are simplified to: use HTML elements for and how it's intended for. Apart from that there are tones of opinionated stuff around front-end layout and styling which, being html and css not programming languages they are interpreter-dependant so... maybe i'm getting old but if something fits for your needs, use it, just make sure you understood what you are using and what is intended for.

Collapse
lizlaffitte profile image
Liz Laffitte Author • Edited

True, some are related to design. When working on a small team, for small businesses, or for personal projects (so from my experience), you tend to find yourself doing double duty as developer and designer.

I tend to be pretty opinionated in my personal blog posts 😂. This one was inspired by a particularly frustrating experience with a very pretty website that didn't work very well. It's not meant to an end-all-by-all guide, but rather some things to think about that I come across often.

Collapse
joelbonetr profile image
JoelBonetR

I know your situation and I've lived it myself but... Then, to avoid this kind of issues you'll need to dig deeper in Color theory, Shape and Form, digital composition and a pair more of subjects if you want to properly design a good product and even that, you'll make mistakes because it's a completely different job even being related...

just try to focus in what it serves you and always apply the KISS principle so you don't get burnt down by tedious processes and the feeling that you can't get further :)

Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming

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.

Collapse
hseritt profile image
Harlin Seritt • Edited

Good article, Liz! Appreciate you putting in the time on this!

On the div vs semantic tag thingy ... it all depends. And this is just my take (a lot could be written on this topic):

If I care that my site is picked up with semantics, then sure, I'll consider using semantic tags but often I don't and don't really worry too much over it. My customers aren't concerned really (in enterprise software, it's not that big of a deal, as somehow semantic tagging has not caught on over the last 6-7 years in that arena).

However, there are some built-in layout functionality with some semantic tags (some are block-like and others inherently inline-block). That can be double-edge sword -- it can be good that I don't have to do as much layout styling for some but for a lot of devs (and honestly many front-end designers who know design inside-out are working on greenfield projects) it can be difficult to pick up. I like to code as though the guy who comes behind me will be a psychopath who knows where I live :-D

Anyways, while there are a lot of helpful "should's" in the article. It's good to know a lot of caveats. This article goes more in-depth on this topic: seekbrevity.com/semantic-markup-im...

Collapse
icecoffee profile image
atulit023

Great article thanks
I'm a beginner but still I wanna say "mobile first approach sucks"

Collapse
lizlaffitte profile image
Liz Laffitte Author

Interesting! Do you mean you don’t like the process or that you don’t like the concept? What’s you’re preferred approach?

Collapse
icecoffee profile image
atulit023 • Edited

Such a wonderful day it is thanks for replying.
Generally I tend to make desktop version first and afterwards I add or remove sections accordingly.
The approach to make a mobile first version seems pretty decent when it comes to using only floats . But grids makes the process way swift and easy.

Thread Thread
lizlaffitte profile image
Liz Laffitte Author

I totally get it! I think flexbox makes responsive design a lot easier.

Collapse
chidioguejiofor profile image
Chidiebere Ogujeiofor • Edited

Nice article.

One question I have is that is a link styled to look like a button (the link has no onclick but just goes to a new different page) a bad habit ? If so I'd like to learn why

Collapse
aarone4 profile image
Aaron Reese

Because a button is expected to trigger an action within the context of the page. A link is a navigation tool. The confusion often comes from the action (e.g. form submit) also has the side effect of a navigation.

Collapse
lizlaffitte profile image
Liz Laffitte Author • Edited

I don’t think so! I often create a btn class that gives links the padding, background color and box-shadow to look like a physical button. It would be using a div with an a tag where you SHOULD use a button element.

I found this article really interesting, and it touches on how screenreaders interact differently with links and buttons: css-tricks.com/use-button-element/

Collapse
chidioguejiofor profile image
Chidiebere Ogujeiofor

Nice. thanks a lot. I wanted to be sure I wasn't doing the wrong thing all along

Also I learnt a ton from the article about buttons.

Thread Thread
lizlaffitte profile image
Liz Laffitte Author

Of course! I am growing and learning right there with you.

Collapse
sqlrob profile image
Robert Myers

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.

Collapse
godwindaniel10 profile image
Godwin Daniel

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

Collapse
ndom91 profile image
Nico Domino

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?

Collapse
aarone4 profile image
Aaron Reese

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.

Collapse
szhabolcs profile image
Nagy Szabolcs

Really interesting, I'll for sure use semantic elements as well in the future, they seem to make the code even more readable 😄

Collapse
kbenjamin92 profile image
Kipp Benjamin Jr.

Great post!

Collapse
ifirestone profile image
Ivan Firestone

One of the hardest things for newbie.... Experience talking here.... Been there done all the mistakes....

Collapse
ra1nbow1 profile image
Matvey Romanov

As a professional developer and a team leader, I think that it is really annoying habits

Collapse
yoursunny profile image
Junxiao Shi

I'm intrigued with screen readers. Can't they just call me by telephone and I read the page to them? Then I don't need to bother with alt and aria tags anymore.

Collapse
babs_tinapa profile image
Babatunde Victor

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 😊

Collapse
phongduong profile image
Phong Duong

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. 😂😂

Collapse
rivertwilight profile image
RiverTwilight

Useful but just 5 tips? Hope to read more.

Collapse
ashleyo profile image
Ashley Oliver

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.

Collapse
kontsedal profile image
Bohdan • Edited

I do 4k first and happy with it. It is not a problem to cut something for a mobile.

Collapse
moniruzzamansaikat profile image
Moniruzzaman Saikat

Thanks for such an amazing post

Collapse
0826gm profile image
0826gm

I'd also mention using inline event listeners (JS) and using numbered IDs (or even worse, numbered classes), instead of just a single class on multiple elements (I mean, #tab1, #tab2 and #tab3 instead of just making each have a class .tab).

This second one is more common in case of beginners, while the first is present almost everywhere!

Collapse
clintwi profile image
Clint

Such a good article from you! Thank's a lot!