1---2name: website3description: Build fast, accessible, and SEO-friendly websites with modern best practices.4---5
6# Website Development Rules
7
8## Performance
9- Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift
10- Render-blocking CSS delays first paint — inline critical CSS in `<head>`, defer the rest
11- Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with `async` or `defer`, audit regularly
12- Fonts cause invisible text flash (FOIT) — use `font-display: swap` and preload critical fonts
13- Measure with Lighthouse in incognito mode — extensions skew results
14
15## Mobile First
16- Start CSS with mobile styles, add complexity with `min-width` media queries — easier to scale up than strip down
17- Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
18- Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
19- Horizontal scroll is a critical bug — test every page at 320px width minimum
20- `viewport` meta tag is required: `<meta name="viewport" content="width=device-width, initial-scale=1">`
21
22## Accessibility
23- Every `<img>` needs `alt` text — empty `alt=""` for decorative images, descriptive text for meaningful ones
24- Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
25- Form inputs must have associated `<label>` elements — placeholders alone are not accessible
26- Keyboard navigation must work — test every interactive element with Tab key
27- Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels
28
29## HTML Structure
30- One `<h1>` per page only — it's the page title, not a styling tool
31- Use semantic elements: `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>` — they communicate structure to browsers and assistive tech
32- `<button>` for actions, `<a>` for navigation — don't use divs with click handlers
33- External links should have `rel="noopener"` — prevents security vulnerability with `target="_blank"`
34- Validate HTML — broken markup causes unpredictable rendering across browsers
35
36## CSS Patterns
37- Avoid `!important` — it breaks cascade and makes debugging painful. Fix specificity instead
38- Use relative units (`rem`, `em`, `%`) over fixed `px` for text — respects user font size preferences
39- CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
40- Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
41- Test without CSS loading — content should still be readable in plain HTML
42
43## Common Mistakes
44- Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
45- Not setting `<html lang="en">` breaks screen reader pronunciation
46- Hardcoded `http://` links break on HTTPS sites — use protocol-relative `//` or always `https://`
47- Assuming JavaScript is available — core content should work without JS (progressive enhancement)
48- Forgetting print styles — add `@media print` for pages users might print (receipts, articles)
49
50## Before Launch
51- Test all forms actually submit — broken contact forms lose leads silently
52- Check 404 page exists and is helpful — default server 404 looks unprofessional
53- Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
54- Submit sitemap to Google Search Console — speeds up indexing
55- Set up uptime monitoring — know when your site goes down before users tell you
modbender