Responsive Design Notes

Project: A Portfolio Page

A grid of project cards with a filter, responsive images and a case study page. The project where card markup, image performance and clickable regions...

HTML

HTML Performance Best Practices

What the markup alone can do for speed, with no build tooling: resource hints, image discipline, script loading and the small set of attributes that m...

HTML

Core Web Vitals and Mobile Friendliness

Three measurements taken from real visits, and one indexing rule that decides which version of your page Google actually reads.

HTML

Responsive Design Starts in the Markup

The viewport tag, flexible images, relative units and the mobile first habit. Half of responsive design is decided before a single media query is writ...

HTML

Writing Markup That CSS Can Lay Out

Grid and flexbox changed what markup a layout needs. Fewer wrappers, source order that matches reading order, and the reorder trap that breaks keyboar...

HTML

Character Encoding and the Viewport Meta Tag

Two lines that every page needs. One decides whether your text is readable at all, the other decides whether your page works on a phone.

HTML

Responsive Tables on Small Screens

A table with eight columns cannot fit on a phone. Four patterns that keep the data usable, and the trade off each one makes.

HTML

Responsive Images: srcset, sizes and picture

Stop sending a 2000 pixel photograph to a phone. Learn width descriptors, the sizes attribute the browser cannot work out for itself, and when picture...

HTML

The img Element: Putting Pictures on a Page

src, alt, width and height. Four attributes, and three of them are doing more work than most people realise.