Logo

dev-resources.site

for different kinds of informations.

Partnering with Google on web.dev

Published at
1/15/2022
Categories
clearleft
google
writing
sharing
Author
adactio
Categories
4 categories in total
clearleft
open
google
open
writing
open
sharing
open
Author
7 person written this
adactio
open
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
sharing Article's
30 articles in total
Favicon
What’s your excuse for not using the web share API?
Favicon
Info card sharing service (free, no login required)
Favicon
Building a Tech Community from Scratch
Favicon
I Taught GIT to High School Students
Favicon
😮‍💨Saya Menyesal Beli Domain my.id
Favicon
<p *>Demystifying the Angular Structural Directives in a nutshell</p>
Favicon
Why I Like Writing Technical Blogs
Favicon
Add GitHub repository info, GitHub pages links and latest commits to any page using github-include
Favicon
Adding a "share to mastodon" link to any web site
Favicon
How do you differentiate Junior/Mid/Senior developer?
Favicon
Let anyone, anywhere, edit your static sites
Favicon
Digital Printing and Dev Printing: Are they the same?
Favicon
My “What is Coding?” Class
Favicon
Announcing Public Sharing: Share Your Drafts with the World on Contenda!
Favicon
sNationalDaysToday.com - Unite people to celebrate everyday
Favicon
Bugblogging
Favicon
The impact of sharing sessions in an engineering team
Favicon
Top 5 Things I Actually Like About Top {X} Posts
Favicon
Partnering with Google on web.dev
Favicon
Resource Helper website for easy access to daily usable links
Favicon
I make a list of free stuff/services for developers
Favicon
Sharing Local Server with Local Network (XAMPP)
Favicon
geek week local
Favicon
Adding RSS feed to my Nuxt & Storyblok blog
Favicon
What online image sharing service do you use?
Favicon
A Software to publish good code examples
Favicon
hackershare: Social bookmarking reinvented!
Favicon
Sharing keyboard & mouse across devices
Favicon
1 year experience, enjoying learning, but unfavorable atmosphere. Should I continue or not?
Favicon
Why I decided to start blogging and why we all should 🙌

Featured ones: