Welcome to RWD Weekly edition #249, just one more week until the lucky prizes giveaway, more about that later.
This week we let the grandfather of responsive design take us through container queries, we look at where AMP is at after their conference a few days ago, review some of the technical RWD approaches on Victoria & Albert site, and pick up a few new stings for your web designing and developing bow.
This week the snippet comes from an article this week from Chris Coyier playing around with vmin. I have covered viewport width (vw) and viewport height (vh) units in the past, but vmin works the minimum viewport size (so on a tall viewport, portrait mobile, it would take the width value; and on a wide viewport, laptop, it would take the height value... it takes the one that is smaller.
With this in mind, you can use the value to control something like the amount of room that is taken up by your header based purely on the smallest viewport at any time. This is what the code looks like
padding: 10vmin 1rem;
There we are applying top and bottom padding which is 10% of the smallest viewport measurement. If you're having trouble visualising it then check out the video on this page.
An excellent piece from Ethan on the concept of container queries and why they're important. I always find that whenever Ethan starts rambling on about something to do with web design it's usually a good idea to pull out your pen and paper and start taking notes.
World Wide Web, Not Wealthy Western Web (Part 1)
This re-enforces the way I think and evangelise about the web. The evangelism doesn't happy with clients, however, but rather with my peers. Clients are likely to take what you say at face value as you are, after all, the expert when it comes to the web. And therein lays the problem and why it's important to discuss ideas with our peers. Too often... add more.
Your opportunity to pick up a number of different books on responsive design, a course on building your audience, a ticket to beyond tellerrand or a set of Responsive Design Notebooks. Winners announced next week.
There were a lot of different sessions during the AMP Conference this week but this one really stands out. This links takes you right to the meat and potatoes of the day with a panel session full of people that are NOT amp supporters. Technically not an article, but a must watch video!
Tim Kadlec pretty much nails my exact feels of AMP in this well-written post following up the first day of the AMP conference this week.
Our good friend Henri posted this as the AMP conference was in full swing and contains some thoughts of folks in the industry (including my 2c).
We help companies like Airbnb, Pfizer, and Artsy find great developers. Let us find your next great hire. Get started today.
Preload is a great new tool in developers’ toolboxes. It has a lot of potential.
A nice overview of some new CSS declarations including :not, :has, :current, :placeholder-shown and many more.
Prashant sent me an email to let me know about this post, am I'm really glad he did. This post goes into detail around how he created his portfolio with performant animations in mind.
I love it when you email me this kind of stuff, if you've written something recently that you think might be of interest please let me know.
Preconnect and prefetch-dns are both ways which you can ask your browser to do a DNS lookup and connection before you need any resources from that domain, but it helps shave time off the critical rendering path. This article looks at what difference the order of the tag makes. The short answer is none.
An example of how you can put the onus of performance back onto the content creators by making them aware of the effect they are having in (almost) real-time.
Well look at that, Grid Layout is HERE! With the release of Firefox 52 we now have Grid supported out of the BOX.
A lovely review of the anatomy of a Card working across different viewports while maintaining visual hierarchy.
If you use the term "API" in conversation but don't have a really good understanding then this is the tute for you.
This is such a clever approach, allowing you to target errors in your HTML (like missing href, inline styles, alt tags missing etc) through the use of CSS.
The technology of website push notifications is natively available for SSL-certified, secure websites only. But if you have an HTTP website, don’t worry, we've got you covered.
This is more like an article but it contains a tonne of tips and tools about what you can do to set up a testing framework when working on service workers.
Tools & Resources
A collection of Grid Pens from Gabi to help you get started if doing is the way you like to learn
Better Web Type is an easy-to-follow web typography email course for web designers & web developers.
Search engine for bots.
Tympanus (Codrops) has prepared a really comprehensive overview of the Grid Layout. It defines the terms, structure, placing items in the grid, alignment, examples, browser support and more.
While this was supposed to be an article about how to convert your site to Grid, Eric has decided to publish it through an online magazine (I'm guessing A List Apart). Instead there are some tools to help you debug your Grid Layout now that it's really a thing in today's standard browsers (Firefox only for now)
Annotations establish context, and direct users to insights and anomalies using these responsive D3 annotations.
SVG for Everybody adds external sprite maps support to otherwise SVG-capable browsers.
I would love to get to this conference one day and I'm certainly going to be throwing my hat in the ring for a speaking slot... maybe a snippet show? If you're thinking about also trying out I highly recommend it, they take great care of new speakers.
Thank you for subscribing and making it to the end. If you think someone else might benefit from these newsletters then make sure you enter the competition.
Finally, if you have written or read anything recently that you think others might be interested in then please send me an email back to let me know.
See you next week.