{
  "id": 15529045,
  "title": "Bad Habits in Web Development We Should Avoid",
  "url": "https://urgent.news/2026/10/19/bad-habits-in-web-development-we-should-avoid",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-19T01:05:48.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ifirestone/bad-habits-in-web-development-we-should-avoid-5h9c"
  },
  "original_language": "en",
  "account": "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.\n\n1. 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.\n\n2. 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); }`.\n\n3. 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` );`.\n\n4. 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.\n\n5. 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.",
  "summary": "Web development mixes creativity, technology and user experience. It's also easy to pick up habits that quietly erode a site's quality, accessibility and maintainability. Here are five of the most common ones, why they hurt, and what to do instead. Ignoring mobile, inconsistent styles, hardcoded URLs, missing alt text and div soup: five common habits that hurt quality, accessibility and…",
  "key_points": [
    "Neglecting mobile design from the outset degrades site quality and accessibility",
    "Inconsistent design elements confuse users and give unprofessional impression",
    "Hardcoding URLs makes website maintenance and scaling difficult"
  ],
  "editors_take": "Prioritizing mobile-first design, semantic structure, and consistent style guides transforms web development from a series of disconnected tasks into a scalable process that ensures accessibility and long-term maintainability.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}