RWD Weekly #395
Hey everyone and welcome to Responsive Design Weekly #395.
This week I’ve turned to the darkside a little and I’ve been looking at the potential of using AMP Stories.
I know right.
While I have my own opinions about the direction that Google is trying to take the web with AMP I can not ignore the commercial benefits that it can provide clients by sitting a top regular search results.
Part of the reason is to also see how AMP is implementing particular ideas, like the Stories, and seeing how we can deliver the same kind of experience without the reliance on AMP HTML.
It’s been an interesting journey so far, if anyone is interested you can check the story out here (but be warned, it still loads more than 20MB worth of data… even with AMP you need to be wary of the video that you’re using).
Right, let’s get linking!
Article
How To Empower Design Teams By Measuring Value
By putting your design team on a DIET (Design Impact Evaluation Tactic) can greatly improve the way in which the team can clarify how well informed they are at each stage of the project: Initial Brief, Post Research, Solution Testing. I’m sure this adds time to the design lifecycle, but I’ve worked on many projects where time has been a critical factor so we ploughed ahead with work quickly and ended up spending more time iterating a poorer quality piece of work than if we had of taken our time to do research and testing up front. The article comes with some templates for you to use the scoring system yourself too.
Spoiled by the Web
This article sounds very similar to the process I went through to create an app to enable AR across Back Pocket Notebooks. I’m sure app developers would face similar issues when crossing over to build on the web, but for me getting something built from scratch on the web is so much more easier, and the web so much more forgiving.
Migration From WordPress To JAMstack
Do you run a WordPress site and are thinking about making the switch across to JAMstack? Is your site pretty bit and you’re dreading the thought of doing the migration? This article goes through the process that Smashing Magazine went through to do the same thing.
Facebook’s Off-Facebook Activity tool is now available to everyone
I have to admit, this was the first time I heard about this. These days I’ll be lucky to get on Facebook once a week, but it is still what helps me keep up with my Australian friends and family. You can now see which companies/pages have shared your interactions with them to Facebook to better target you for content (let’s face it, Ads).
Thoughts on Writing: What They Say
I love this piece from Matthias and I can’t echo his words enough (or Sara’s linked to in the post).
“Write about what is most important to you in the first place and create the opportunity for people to learn and reach their own conclusions. Oh, and don’t forget to publish your work. Ideally on your own site.”
New browser on the block: Flow
PPK used to do loads of reviews on browsers on his site and is back again in 2020 with a look at a new browser called Flow. In this article he interviews Piers who is the co-founder of the company behind this new browser.
Tutorial
ResizeObserver in WebKit
ResizeObserver has hit WebKit Safari Technology Preview releases by default as of version 97l. Rather than focus on how slow webkit were to enable this feature (Chrome released this in Jan 2018) let’s rejoice in the fact that another browser supports this (Chrome, FF, Edge, Opera… all desktop). The article has a great example and code to show how this might be used on your site and can provide a bit of a temporary patch for container queries.
How to design a blog and make it look pretty in 2020
I’m loving Marko’s content lately and I”m going to be taking this approach to my own blog this month to refresh the design.
CSS Grid can be used to stack elements
Stack elements easy with display:grid… although you can do the same thing with display:block; — BUT that’s not really what Stefan is doing in this article, instead it’s moving the elements out of the regular content flow and setting them to grid positions that you would have otherwise required absolute positioning to achieve.
Links with Tips and Advice for Public Speaking
If 2020 is the year you want to get into public speaking then Marc has the perfect article for you. This covers all the steps leading up to uttering your first word on stage from proposal, writing a bio, preparing your talk, and building slides.
Designing web applications for the Apple Watch using Toucaan
Are you looking to go watch first over mobile first? Although the number of smart watches are steadily growing they feel more like a notification centre than somewhere I want to consume lots of content. Having said that, there’s no reason why you can’t still be prepared.
Optimising SVGs for the Web
Although SVG’s are often a lot smaller than PNG’s, and look a tonne better across any screen, there is still a few things you can do to ensure that they are as small as you can get them. Every byte helps.
Tools and Resources
Griddle: A CSS Grid Framework
Griddle is a CSS framework created with CSS Grid and Flexbox. It’s easy to get started with Griddle, especially if you are familiar with how other CSS Frameworks work. With that in mind, I would advise that you use frameworks like this to understand how/why they put it together, and then build your layouts from scratch. With CSS Grid it becomes harder to use a framework than to just write the layout yourself, but only once you understand how it works.
