Copy
Winners awarded next week, have you entered the competition?
View this email in your browser
Victoria & Albert Museum RWD site on mobile and tablet

Welcome


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.

Snippet Show

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

header {
  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.
 

Headline 

On container queries.

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) 
https://www.smashingmagazine.com/2017/03/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.


Sponsor
RWD 250 Competition

RWD 250th Episode Giveaway


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.

Enter now!

Articles


Panel Session AMP Conference

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!
 

AMP and the Web

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.
 

Thoughts On AMP: Accelerated Mobile Project

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).
 

Title: Find Top Developers Fast, Toptal helps ...

We help companies like Airbnb, Pfizer, and Artsy find great developers. Let us find your next great hire. Get started today.
/sponsored/
 

A Link: rel=preload Analysis From the Chrome Data Saver Team

Preload is a great new tool in developers’ toolboxes. It has a lot of potential.
 

CSS4 Selectors: What Can We Expect?

A nice overview of some new CSS declarations including :not, :has, :current, :placeholder-shown and many more.
 

How I made "Fastest Interactive & Scroll-Animations website",Ever!

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.
 

Prefetch & preconnect-dns priority

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.
 

Empowering our editorial teams to impact page performance

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.
 

CSS Grid lands in Firefox 52

Well look at that, Grid Layout is HERE! With the release of Firefox 52 we now have Grid supported out of the BOX.
 

Design Better Cards

A lovely review of the anatomy of a Card working across different viewports while maintaining visual hierarchy.

 
 

Tutorials


Ultimate Guide to API Design

If you use the term "API" in conversation but don't have a really good understanding then this is the tute for you.
 

Linting HTML using CSS

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.
 

PushCrew Push Notifications for HTTP websites

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.
 

Testing Service Workers

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.
 

Learning CSS Grid Layout

 

Grid + Flexbox: the best 1-2 punch in web layout

 
 

Tools & Resources


Grid Layout CodePen Collection

A collection of Grid Pens from Gabi to help you get started if doing is the way you like to learn
 

Better Web Typography for a Better Web

Better Web Type is an easy-to-follow web typography email course for web designers & web developers.
 

There is a bot for that

Search engine for bots.
 

A Complete Guide to CSS Grid

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.
 

Tent CSS

 

Grid Inspection

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)
 

d3-annotation

Annotations establish context, and direct users to insights and anomalies using these responsive D3 annotations.
 

SVG for Everybody

SVG for Everybody adds external sprite maps support to otherwise SVG-capable browsers.

 


Finally


CSS Dev Conference Call for Speakers

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.

Cheers,

Justin.

 

Enter 250th Edition Competition
Copyright © 2017 Simple Things, All rights reserved.


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp