RWD Weekly #459
Hello again, welcome back to RWD Weekly #459, happy Friday!
For almost 9 years I had only missed two weekly editions, and now this year I’ve missed two in two months. I must be getting old!
One of the benefits of getting old is that you fall into the range of being able to get your Covid jab which I had this time last week, and while we didn’t have any bad side effects I just wasn’t feeling up to it last week.
The past 5 months have been overclocked and, at some points, somewhat overwhelming. I’ve been working a reasonably busy 9–5 day job alongside contributing to a new project in the evenings. This alongside time with the family has meant a dramatic drop in free time to unwind, which in turn has drained the batteries almost to zero.
Things will be chaging though! I’ve resigned from my day job and will be moving the new project to be my main focus. As the new project is pretty much 24/7 it affords me the opportunity to pick the working hours that work best and will allow me to carve that working time around spending quality time with the family.
I still haven’t decided exactly how that will impact this newsletter, but there’s bound to be some changes on the horizon as I delve a bit more into the weeds of Web 3 product development.
For now though, let’s get linking.
Headline
The new responsive: Web design in a component-driven world
Una looks at what responsive design means more than ten years since Ethan first laid the foundations. The new responsive is about container queries and scoped styles, container styles for macro components made up from other containers, viewport layouts and media queries, and user preferences (like reduced motion).
Sponsor
Live Workshops on Front-End & UX
Boost your design skills online and learn practical insights from experts in the industry, live. That’s Smashing Online Workshops, broken into 2.5h live sessions, spanning across weeks. With tangible takeaways, exercises, access to experts, slides, recordings, and a friendly Q&A.
E.g. Design Systems with Brad Frost, New Adventures In Front-End with Vitaly Friedman or Modern CSS with Stephanie Eckles.
Article
Recreating Wildlife Photographer of the Year online – Headless content management
I’ve always considered Adobe Exerience Manager to be a bohemeth that would only run within itself. But, just like WordPress and other CMS, AEM also offers a headless mode without losing its core CMS features.
Frustrating Design Patterns: Mega-Dropdown Hover Menus
A few years ago I spent some time doing a website where the client was adament that people loved mega menus. I think loved is a bit strong in this case, but fortunately I have Vitaly to showcase some poor implementations and how to make them more tollerable
Tutorials
CSS Container Queries For Designers
CSS Container queries, a long-requested feature by web developers is coming soon to CSS and now available as an experimental feature in Chrome Canary. In this article, Ahmad will go through what is it, how it will change your workflow as a designer, and more.
A couple of ways to highlight code syntax in Apple Keynote slides
This is something that I always spent too much time trying to do in Keynote and it never looked great. Sara has some great suggestions on how to get it looking good and not spending too much time doing it.
Container Queries in Web Components
A great demo from Max. Using a single book component, this tutorial shows how you can use container queries to alter the display of the component depending on if it appears in a product listing, product feature, or is dropped into the basket.
Events
“Content First” with Georg Obermayr and Bastian Allgeier
This is the next part in a Kirby CMS series. Hear from Bastian Allgeier and Georg Obermayr, who will demonstrate how they use Kirby for the website of LOWA in their content first approach. Regardless of whether you use Kirby or not, understanding how different sites approach their content structures is always of interest to me and helps improve the next site I decide to build.
Resources & Tools
Learn CSS
This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you’ll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the “Learn CSS” logo to navigate the modules.
DWP Accessibility Manual
Guidance and best practice for building accessible services and meeting the Public Sector Bodies Accessibility Regulations 2018.
This guidance is still being iterated and is likely to change.
