The Web Dev Notes Blog Presents:

Web Dev Notes 5.01

Article Continues Below

People who make websites know that the work doesn’t magically end after the initial launch. We’ve been busy working on a laundry list of bugs, tweaks, and enhancements since the new design debuted a week ago, and the release of a new issue seemed like a good opportunity to deploy the new style sheets.

Most of the changes involve tweaking the line-heights, font-sizes, and margins in the various breakpoints to make the site look tighter and more consistent. For example, author images on Column headers have been halved in size in the smaller breakpoints, which, along with smaller and tighter type for the titles, makes the whole arrangement more practical.

Some of the more interesting changes involve the web fonts. We’ve changed the typeface to Georgia Pro in places where we use the numero character, since we had fallback problems using the glyph in Franklin (and the Georgia Pro glyph is very nice, as well). We’ve enabled a couple of font-feature settings for old-style numbers and ligatures in the article body type—leveraging some of the OpenType features of Georgia Pro—although support for these features is mixed across browsers at present. Also, we’re experimenting with using Georgia Pro Condensed in the smallest breakpoint, to see if layouts are enhanced by fitting in more characters, and thus more words, per line. (Hat tip to Nick Sherman for this suggestion and other typographic consultation.)

Another change, per user reporting, was to substitute SVG images for the search and social icons.

We hope you find the style changes an improvement, and we’re interested in your feedback, including any bug reports. We’ll be continuing to work to improve the site and build upon the this latest relaunch as the year progresses.

Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

11 Reader Comments

  1. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    Looking good so far guys! Keep up the good work. 😀

  2. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    Are you not using avg icons for search on the mobile size breakpoints? They look like pixelly pngs on Android Chrome.

  3. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    That is SVG of course.

  4. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    I’m excited to see that ALA is making online reading SO much more user friendly. Mike, I’m hoping that maybe you could chime in on my question “Has the redesign of AListApart.com had significant impact on user engagement?” I posted recently on Quora.

    I’m curious if the redesign has impacted engagement metrics, such as time on page/site, average pages per visit, repeat visitors, etc.

  5. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    @Michael N ✅
    We are using SVG for the search icon in all the breakpoints, but the fallback is a standard resolution PNG. Might be a caching issue? Are you getting SVG elsewhere on the page (graphic elements in footer, for instance)? Otherwise, please contact us with more details about browser version and so forth. Thanks!

  6. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    Your header is still clipped.

  7. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    The Condensed Font doesn’t look very good to me. At first sight it seemed as if the font was scaled incorrectly :-/

  8. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    Great Job – The style changes are definitely an improvement, the fonts are looking good.

  9. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    @Jesse Wallace Yes.

  10. Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

    The header is certainly a good way to tell that there is something apart here.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Designed for a Dead Language

Every language app in your pocket inherited a teaching method built for Latin. Understanding why that happened is a more useful design lesson than anything the apps themselves can teach you.
Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

Good designers, bad websites: a proposal

Designers are good people. Some designs exclude people anyway. Alan Dalton offers a practical fix: accessibility personas that help you recognize problems while you're designing, not after. Homework included.
Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

Design for Amiability: Lessons from Vienna

Computing was born in a Viennese café. Between 1928 and 1934, while Hitler plotted and Europe crumbled, a motley crew of mathematicians, philosophers, architects, and economists gathered weekly to puzzle out the limits of reason—and invented Computer Science in the process. What made their collaboration possible wasn't just brilliance (though they had plenty). It was amiability: the careful design of a social space where difficult people could disagree without destroying each other. Longtime Web Dev Notes contributing author Mark Bernstein mines this forgotten history for lessons that might just save today's embattled web from its worst impulses. Spoiler: it involves better coffee service and the looming threat of public humiliation.
Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

Design Dialects: Breaking the Rules, Not the System

Design systems aren't component libraries—they’re living languages. Rigid adherence to visual rules creates brittle systems that break under contextual pressure. Fluent systems bend without breaking.
Web Dev Notes Proxy © 2026 | Powered by Cloudflare Worker

Discover more from Web Dev Notes

Subscribe now to keep reading and get access to the full archive.

Continue reading