Name: Website
Availability: InStock
Author: ivangdavila

Website Development Rules

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
Render-blocking CSS delays first paint — inline critical CSS in
```
<head>
```
, defer the rest
Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with
```
async
```
or
```
defer
```
, audit regularly
Fonts cause invisible text flash (FOIT) — use
```
font-display: swap
```
and preload critical fonts
Measure with Lighthouse in incognito mode — extensions skew results

Start CSS with mobile styles, add complexity with
```
min-width
```
media queries — easier to scale up than strip down
Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
Horizontal scroll is a critical bug — test every page at 320px width minimum

viewport

meta tag is required:

<meta name="viewport" content="width=device-width, initial-scale=1">

Every
```
<img>
```
needs
```
alt
```
text — empty
```
alt=""
```
for decorative images, descriptive text for meaningful ones
Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
Form inputs must have associated
```
<label>
```
elements — placeholders alone are not accessible
Keyboard navigation must work — test every interactive element with Tab key
Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels

Avoid
```
!important
```
— it breaks cascade and makes debugging painful. Fix specificity instead
Use relative units (
```
rem
```
,
```
em
```
,
```
%
```
) over fixed
```
px
```
for text — respects user font size preferences
CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
Test without CSS loading — content should still be readable in plain HTML

Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
Not setting
```
<html lang="en">
```
breaks screen reader pronunciation
Hardcoded
```
http://
```
links break on HTTPS sites — use protocol-relative
```
//
```
or always
```
https://
```
Assuming JavaScript is available — core content should work without JS (progressive enhancement)
Forgetting print styles — add
```
@media print
```
for pages users might print (receipts, articles)

Test all forms actually submit — broken contact forms lose leads silently
Check 404 page exists and is helpful — default server 404 looks unprofessional
Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
Submit sitemap to Google Search Console — speeds up indexing
Set up uptime monitoring — know when your site goes down before users tell you

Website