Happy Friday!
Welcome to RWD Weekly edition #265, can you believe we've reached the 1/2 way point of 2017 already? Where on Earth does the time go?
This week our feature site is searchingforsyria.org. I shared this on my social channels as well along with "From a web design point of view, this is an amazing website. From a human point of view, this is a story you absolutely must read."
Headline Foundation 6.4.0 has been released this week and it has a new style grid. You can now control it vertically (X) as well as vertically (Y).
Foundation 6.4 includes a brand new, super powerful default grid called the XY Grid. This is a truly 2-dimensional grid, giving you all sorts of control over the way things are laid out vertically as well as horizontally. Imagine all the crazy cool layouts you can do with CSS Grid but built on Flexbox so that it's actually usable in all browser production environments today! | |
The three tenets of Responsive Web Design can now sit comfortably in your back pocket. These notebooks are perfect for sketching quick layout ideas and, of course, explaining what RWD is to clients and colleagues.
Use code RWDWEEKLY for 25% off! | | Articles Go forth and be Griddy!
We've talked about reduced motion query in a previous snippet show but Val Head is the animation expert and has a few thoughts herself.
Suuuch a good article that covers all of the preoccupations with Apps over just creating a website (as a progressive web app of course). This covers off a tonne of stuff that just never occurs to me because I'm not in the "App acquiring users/engagement" business. At the end of the day I think a Native App and download banner is the wrong long-term approach, but at least I'm better versed in some of the rationales behind some client requests.
Chris Coyier from CSS Tricks, Code Pen and the Shop Talk Show is looking to upgrade his podcasting equipment after several years of delivering quality shows. Chris has gone from a Rode Podcaster, which is what I use, to a much better setup for not an overly large amount of money.
In preparation for Global Accessibility Awareness Day, the Guardian Accessibility Working Group decided to run a workshop for their colleagues. This is a great idea, you should totally do the same thing at your own work!
Christian tries to set the record straight on some of his comments around not making personal blogs into Progressive Web Apps.
This is, apparently, the last post from Alex on AMP. I think he's got one more in him when he realises that all of his content is going to remain on the Google AMP cache indefinitely and he finds it difficult to get it removed... who's taking bets? (I'm only poking fun, I've really enjoyed the story Alex has been telling around AMP)
"A rose by any other name would smell as sweet"... forget the name and take advantage of progressively making your web things better.
I love this article because I get my share of rejection letters. Most often it's talks that don't quite hit the mark but the process you follow to get to the point of submitting the talk is an invaluable lesson (as is the feedback from the conference organiser if you can get it).
Get your very own .design domain name and impress your friends (or more likely your mom). If you're thinking about grabbing responsive.design you're too late ;)
Tutorials Myself and some old colleagues are working on some PWA side projects at the moment and I am coming up against a few unexpected issues as I go through. This list contains a few of the issues I've been facing and ways to fix them, I hope it helps you too.
Chris uses a Sass loop to go through a Sass map and produce a set of CSS declarations in a DRY kind of way. It's not until I read posts like this that I realise I'm only dipping my toe into the pool that is Sass and preprocessing.
I really like the design impact of the position: sticky on long scrolling pages. Stickybits is JS utility that will help you keep the design implementation working cross browsers
Remy has been looking at sticky headers for his new conference website and takes us through the journey of getting to something that works great. A perfect companion to one of our tools this week, PART 2, PART 3.
Ever wanted an image to fit exactly into a certain given dimension, but while keeping its aspect ratio and avoid having a squished image? Well, the problem is no more with the object-fit property!
Tools/Resources I kinda like Audi's Responsive UI Guidelines
I've been loving these font shadow effects all week and trying them out of a variety of online posters. The best thing is that you just grab the CSS right from the example, woot!
Stickybits is a lightweight (<2KB) alternative to position: sticky polyfills that works perfectly for things like sticky headers. THIS IS NOT A POLYFILL, that requires too much code.... but it has all the best bits.
I'm torn on this one, and here's why. On hand — kudos to Joe for trying out CSS Grid and getting to grips with how it operates to create a grid structure, and for packaging something and providing it on Github. Amazing work. On the other hand — the whole thing about CSS Grid is that we don't need a boilerplate to use it.... it's its own boilerplate. Rather than use this I encourage you to see how JOe has put it together, say thanks, and then use what you've learned to apply CSS Grid to your own projects.
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment