Bad Habits in Web Development We Should Avoid

Creating a website involves creativity, technical skills, and an understanding of user experience. However, it's easy to develop habits that can gradually degrade a site's quality, accessibility, and maintainability. This article outlines five common issues, their negative impacts, and suggestions for improvement.

1. Neglecting mobile design from the outset: A significant number of users access websites via mobile devices. Failing to design for mobile right from the beginning is a major mistake. A mobile-first approach ensures the website functions and appears well on smaller screens before scaling up to larger ones. To address this, start by prototyping the mobile layout and test it across various screen sizes.

Establish base styles for small screens and use media queries with a minimum width to improve the design for larger screens.

2. Inconsistent design: Inconsistencies in design elements like colors, typography, buttons, and links can confuse users and give the impression of an unprofessional product. Some pages might display links in different colors, leading users to question if something is broken. To combat this, create a style guide specifying colors, typography, buttons, and links.

Follow this guide consistently and consider using a design system such as Material Design or Bootstrap to maintain visual and functional coherence. Store design values as tokens rather than repeating them throughout the code. For example, define colors as CSS variables: `--color-link: #0b5fff; --color-link-active: #0a3fb3;`. Then, use these variables in your styles: `a { color: var(--color-link); } a:active, a[aria-current="page"] { color: var(--color-link-active); }`.

3. Hardcoding URLs: Hardcoding URLs in the source code makes it difficult to maintain and scale a website. If the domain changes or you work across multiple environments (development, staging, production), hardcoded URLs will break or point to the wrong locations. To avoid this, use relative paths for internal links and assets. For environment-specific URLs, such as an API base URL, use environment variables. Instead of `fetch(https://api.mysite.com/users);`, use `fetch(` ${process.env.API_BASE_URL} /users` );`.

4. Omitting the alt attribute on images: The alt attribute provides a description of an image to users with visual impairments (screen readers) and to everyone when the image fails to load. Leaving it out makes the page harder to use and negatively impacts SEO. Always provide a clear and concise description for meaningful images.

If an image is merely decorative, use an empty alt attribute (`alt=""`) so assistive technology skips it without reading out a file name. For example, `img src="chart.png" alt="Bar chart showing mobile traffic growing 40% year over year"` for informative images, and `img src="divider.svg" alt=""` for purely decorative images.

5. Excessive use of div elements: Using div elements when a more specific semantic element exists can make the code harder to read and impact accessibility and SEO. Screen readers and search engines rely on semantic elements like header, nav, main, section, article, and footer to understand the page structure. When no suitable semantic element is available, use div for generic grouping.

For instance, instead of `div class="header", use header for the page header. Similarly, use main for the main content area, article for individual articles, and footer for the page footer.