Partnering with Google on web.dev

When the web.dev team at Google contacted Clearleft about writing a course on responsive design, our eyes lit up.

This was clearly a good fit. For one thing, Clearleft has been pioneering responsive design from day one—we helped launch some of the first responsive sites in the UK. But there was another reason why this partnership sounded good: we had the same approach to writing and sharing.

Ever since Clearleft was founded in 2005 we’ve taken on board the motto of the World Wide Web itself: let’s share what we know. As well as doing the work, we enjoy sharing how the work gets done. Whether it’s case studies, blog posts, podcasts, or conference talks, we’re always thinking about ways to contribute to the web community.

Many other great resources have contributed to our collective knowledge: A List Apart, CSS Tricks, Smashing Magazine, Mozilla Developer Network, and more recently web.dev, which has become an excellent resource for front-end developers. But they wanted to make sure that designers were also included. Una described her plan for a fifteen-part course on modern responsive design aimed at web designers.

It was ambitious. The plan included some cutting edge technology that’s just shipping in browsers now. It sounded daunting and exciting in equal measure. Mostly it sounded like far too good an opportunity for Clearleft to pass up so we jumped on it.

With my fellow Clearlefties otherwise engaged in client work, it fell to me to tap out the actual words. Fortunately I’ve had plenty of experience with my own website of moving my fingers up and down on a keyboard in attempt to get concepts out of my head and onto the screen. I familiarised myself with the house style and got to work.

I had lots of help from the Chrome developer relations team at Google. Project management (thanks, Terry!), technical editing (thanks, Adam!), and copy editing (thanks, Rachel!) were provided to me.

Working with Rachel again was a real treat—she wrote the second edition of my book, HTML5 For Web Designers. Every time she suggested a change to something I had written, I found myself slapping my forehead and saying “Of course! That’s so much better!” It felt great to have someone else be a content buddy for me.

We had a weekly video call to check in and make sure everything was on track. There was also an epic spreadsheet to track the flow of each module as they progressed from outline to first draft to second draft.

Those were just the stages when the words were in a Google doc. After that, the content moved to Github and there was a whole other process to shepherd it towards going live.

Take note of the license in that repo: Creative Commons Attribution 3.0. That means that you—or anyone—is free to use and reuse all the material (as long as you include a credit). I think I might republish the fifteen articles on my site at some point.

If you’d like to peruse the outcome of this collaboration between Clearleft and Google, head on over to web.dev and learn responsive design. Then feel free to share it!

  1. Introduction
  2. Media queries
  3. Internationalization
  4. Macro layouts
  5. Micro layouts
  6. Typography
  7. Responsive images
  8. The picture element
  9. Icons
  10. Theming
  11. Accessibility
  12. Interaction
  13. User interface patterns
  14. Media features
  15. Screen configurations

Have you published a response to this? :

Responses

fuzzylogic.me

Direct Link

At work in our Design System team, we’ve been doing a lot of content and documentation writing for a new reference website. So it was really timely to read Jeremy Keith of Clearleft’s new post on the process of writing Learn Responsive Design for Google’s web.dev resource. The course is great, very digestible and I highly recommend it to all. But I also love this new post’s insight into how Google provided assistance, provided a Content handbook as “house style” for writing on web.dev and managed the process from docs and spreadsheets to Github. I’m sure there will be things my team can learn from that Content Handbook as we go forward with our technical writing.

# Friday, January 14th, 2022 at 12:00am

2 Likes

# Liked by Marty McGuire on Thursday, January 13th, 2022 at 5:26pm

# Liked by LVdesign Studio on Thursday, January 13th, 2022 at 11:12pm

1 Bookmark

# Bookmarked by Jeremy Felt on Friday, January 14th, 2022 at 5:25am

Related posts

Making the website for Research By The Sea

Having fun with view transitions and scroll-driven animations.

Browser support

Here’s Clearleft’s approach to browser support. You can use it too (it’s CC-licensed).

Design engineering on the Clearleft podcast

If you like the sound of being a design engineer, come and join us at Clearleft.

Work at Clearleft

We’re hiring a design engineer. You should apply.

Design engineer

It’s snappier than front-of-the-front-end developer.

Related links

Design Engineer / Front-end Developer | Clearleft

Are you a web dev that’s into progressive enhancement, accessibility, design systems, and all that good stuff?

You should come and work with me at Clearleft.

Tagged with

A History of Design Systems on the Web - The History of the Web

It’s great to see former Clearlefties like Nat, Paul and Anna rightly getting namechecked in this history of designing for the web in a systemic way. It’s a tradition that continues to this day with projects like Utopia.

Tagged with

Midweight Design Engineer | Clearleft

Want to work with me? If so, come and be a design engineer at Clearleft!

What’s a design engineer? A front-end developer at the front of the front end who values accessibility, performance, and progressive enhancement.

We’re looking for a design-friendly front-end developer with demonstrable skills in pattern-based prototyping and production to join our friendly and supportive team in the heart of Brighton.

Even if this isn’t for you, please spread the word …especially to potential candidates who aren’t mediocre middle-aged white dudes (I’ve already got that demographic covered).

Tagged with

Design Engineering - Snook.ca

Here’s a seven-year old post by Snook—this design engineer thing is not new.

Tagged with

Static sites, slack and scrollytelling. | Clearleft

Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!

Tagged with

Previously on this day

6 years ago I wrote Code print

Print stylesheets and QR codes: one great flavour and one yucky flavour that taste quite good together.

9 years ago I wrote Homebrew header hardening

Step-by-step instructions for more secure response headers on Apache.

15 years ago I wrote HTML5 business as usual

Quit yer bitchin’

16 years ago I wrote Anathem

A spoiler-free appraisal of Neal Stephenson’s latest work.

18 years ago I wrote Five things you may not know about Jeremy Keith

Let’s see if I’ve got the hang of this meme.

21 years ago I wrote Geek gossip

Andy has beaten me to the punch on this little exclusive: I found out at work today that my co-worker/employer’s brother, Martin Freeman (of The Office fame) has been cast as Arthur Dent in the upcoming film of The Hitchhiker’s Guide To The Ga

23 years ago I wrote Home sweet home

I’m back.