#Responsive Design
Layouts and assets that adapt to the viewport.
13 notes tagged
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 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...
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.
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...
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...
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.
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.
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...