Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Link tags: points
16
The ideal viewport doesn’t exist
Some lovely scroll-driven animations illustrate this great little microsite.
There’s something very pleasy about the chunky design that harkens back to the Zeldmanesque early web.
Can we have custom media queries, please?
I knew that custom properties don’t work in media queries but I had no idea that there was such a thing as custom media queries, which effectively do the same thing.
But this is not implemented in any browser. Boo! This would be so useful! If browser makers can overcame the technical hurdles with container queries, I’m sure they can deliver custom media queries.
The Guardian digital design style guide
What a lovely way to walk through the design system underpinning the Guardian website.
Bonus points for using the term “tweak points”!
The Power of Serverless
Chris has set up a whole site dedicated to someone-else’s-server sites with links to resources and services (APIs), along with ideas of what you could build in this way.
Here’s one way to think about it: you can take your front-end skills and do things that typically only a back-end can do. You can write a JavaScript function that you run and receive a response from by hitting a URL. That’s sometimes also called Cloud Functions or Functions as a Service, which are perhaps better names, but just a part of the whole serverless thing.
PX, EM or REM Media Queries? by Zell Liew
Just recently on a Clearleft project, some of us were discussing whether there was a reason not to use rems instead of ems for media queries. Apart from one older browser implementation difference, we couldn’t come up with much.
Some in-depth research here supports the use of em values for media queries. Very good to know.
FormKeep | Form endpoints for designers and developers
When I’ve been helping Codebar students on their personal projects, everything goes great until some kind of server-side processing is needed. Nine times out of ten, that server-side processing simply doing something with the contents of a contact form. This looks like it could be a useful service to plug into little projects like that.
Responsive Image Breakpoints Generator by Cloudinary
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
Keep ’em Separated — ericportis.com
I share the concerns expressed here about the “sizes” attribute that’s part of the new turbo-powered img element (or “the picture element and its associates”, if you prefer). Putting style or layout information into HTML smells bad.
This is a concern that Matt Wilcox has raised:
Change the design and those breakpoints are likely to be wrong. So you’ll need to change all of the client-side mark-up that references images.
I can give you a current use-case: right here on adactio.com, you can change the stylesheet …so I can’t embed breakpoints or sizes into my img elements because—quite rightly—there’s a separation between the structural HTML layer and the presentational CSS layer.
Logical breakpoints for your responsive design
Vasilis examines the multitude of factors that could influence an ideal measure.
Deciding what Responsive Breakpoints to use | Tangled in Design
Another call for design-based (rather than device-based) breakpoints in responsive sites.
Points mean Pixels - 8th May 2012 at The Skiff, Brighton
This looks like being a fun little local event ‘round at the Skiff in May.
Choosing device sizes to support for your responsive designs | Matt Wilcox .net
Another plea for content-out rather than canvas-in design.
The Man in Blue > Experiments > Web Coolness Calculator
Calculate your Web Coolness, courtesy of Cameron. Of course he couldn't resist one more jibe at me in there.
sooper » misc » ppt
A list of articles discussing the impact of a reliance on PowerPoint® and bullet-point based communication.