Issue 30
Design systems, responsive web design and responsive emails without media queries.
News
Issue 30
Here we are with issue 30 of this email, I'm glad people are still writing things about layout each week! I'd love to feature more experiments and code examples. The sort of thing people publish on CodePen. Let me know if you spot or create something you think might be helpful to readers. I'm trying to balance the interesting "cutting edge" things that are happening with practical things you can use in projects today. I think we have a decent mix of that this week.
Rachel Andrew, CSS Layout News
Where in the world is Rachel?
I'm now on the road. Currently in Montreal for ConFoo - tonight I'm speaking at the Montreal Girl Geeks meetup. This weekend I'll be in NYC for a Grid Layout Workshop, then I head to Fluent. If you are in San Francisco and can't get to Fluent proper but would like to join the "hallway track" I have a code for free registration. Use code EH16SP here. Of course I would love to see you in my 2 day CSS Training at Fluent - I believe there are still some seats for that.
After Fluent I head to Nashville for An Event Apart, and am very excited about the live onstage recording of The Web Ahead podcast that I'll be taking part in with Jeffrey Zeldman, Eric Meyer and host Jen Simmons. Should be fun!
Learn
Real Life Responsive Web Development - Web Directions
A video from Web Directions with Vitaly Friedman presenting "Real-life Responsive Web Development".
A Quick Overview of `object-fit` and `object-position`
A nice run-through of the object-fit and object-position properties by Robin Rendle for CSS Tricks. These properties control images and videos in much the same way that we can control backgrounds, so are very useful in design.
Efficient Responsive Design Process – Smashing Magazine
An excerpt from Ben Callahan’s chapter “Responsive Process,” first published in the Smashing Book 5. The Smashing Book 5 is well worth your time, and this excerpt helps you consider your processes when working with your clients and team on a responsive web project.
The Fab Four technique to create Responsive Emails without Media Queries
It appears that calc() has good support in email clients. So here is a very useful technique for creating responsive emails.
Interesting
Restaurant Menu Generator - Build complete responsive HTML Restaurant Menus for Free!
This is such a nice idea, useful if you have to build this sort of thing! Add your menu sections and items and build a responsive restaurant menu.
Surma.link – New ways to make your web app jank with Houdini – An introduction
"Have you ever thought about the amount of work CSS does? You change a single attribute and suddenly your entire website appears in a different layout. It’s kind of magic in that regard (can you tell where I am going with this?!). So far, we – the community of web developers – have only been able to witness and observe the magic. What if we want to come up with our own magic tricks and perform them? What if we want to become the magician? Enter Houdini "
Houdini is a fascinating project that aims to expose the CSS engine to developers, so we can create our own methods of layout and much more. This post explains some of the draft specifications that are part of this work. If this is something that interests you, it is a really great time to get involved.
Design systems in difficult places
Mark Boulton writes about design systems and the challenges of having them adopted once created,
"I get asked this a lot. How do you know if your work will stick? You’ve spent a year designing a new design system. How do you know it will really hold?"
Our Sponsor
Is CSS Layout too hard?
If developing a layout seems to mostly consist of trial and error, or you are relying on a framework in order to make layouts that work, I have a course for you. Throughout this video course I'll explain the mysterious aspects of CSS, giving you a solid foundation to create the layouts you want.
Purchasing a course also gives you access to our private Slack Community, discuss the things you are learning or any problems you have with other people doing the course - and me!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.