Hello and welcome to RWD Weekly edition #283.
This week our feature site is the new BMW site that was released earlier this week as part of the AMP Summit that Google is putting on. I'm currently going through the site to add it to our examples section so next week you'll be able to see how it was put together.
Let's get to some links! | | Headline In almost every site that I work on now someone will say to me that there's too much content on the page... which leads me to say "The right amount of content is when it's enough for the user to make an informed decision". This annoys a lot of the creatives at work who like this to be short. What happens almost every time is that we end up with sections on the page that are hidden by titles and can be expanded to read more. I don't necessarily think it's always the solution, but it can work really well in areas and is a good compromise. In this article, Heydon Pickering does an amazing job of going into a tonne of detail about how to build these components out with a processive and accessible point of view. | | | Pattern Lab is an open source tool for building design systems using atomic design principles. Powered by Node or PHP and your favorite templating engine, Pattern Lab helps frontend teams create reusable UI patterns, design with dynamic data, generate pattern documentation, and much more. | | Articles A really great overview from Chris Burnell about the IntersectionObserver. Chris looks at how we (used) handle lazy-loading or infinite scrolling these days, covers off the potential pitfalls when it comes to 60FPS and performance and finishes with a rather tasty codepen demo
Now that you know all about intersectionObserver lets see what PPK has to say about their support and quirks across a range of browsers. PPK thinks they're a little too raw for large scale, especially on mobile, but draw your own conclusions
Following on from the earlier article about UX, this two-part post covers off how to incorporate Story Mapping into the design process to ensure you're delivering on the right requirements
The line of death, originally covered in an article about chrome, is an imaginary line that separates the content area of the browser — the area that you and I can add content into... namely our websites and popups — and the browsers safe are that can only be used by the browser itself and is therefore completely trustworthy (or as trustworthy as browser vendors can be :)
Get started with Grid Layout and mix in a bit of Flexbox as well as you read through this post from Eva Ferreira from Aerolab. There's a few real world examples in there for you to check out too.
A really detailed overview of UX deliverables for a web design project (or a native app). Nick Babich breaks the process down into Project assessment, Competitor assessment, User research, Information architecture, Interaction design – each of which come with beautifully designed examples of the output.
So while the title of this post is about utilising the aspect-ration media query the blog post goes into a lot more detail than that. Sure, the media queries are defined by the aspect ration but Chen Hui Jing also uses CSS Grid Layout with Template Areas, Object-Fit for the images and lots of other cool CSS stuff.
An excellent all-encompassing guide to Search Engine Optimisation (SEO) for 2018. The list takes you through current best practices as well as some of the changes that Google are making and how they might affect you - like a mobile-first index for example.
During the process of turning the dConstruct audio archive into a progressive web app, Jeremy Keith stumbled upon an odd behaviour when testing the PWA on Chrome on Android. Rather than waiting to build trust with the user the website provided a popup option to add the site to the home screen on the first load. Jeremy looks at how other browsers, like Fireforx and Samsung, are handling the same prompt and is looking for anyone else who has seen a similar behaviour to come forward with any stats they might have.
Tutorials This is such an amazing deep dive into how to create a responsive accessible table from Adrian Roselli. I've been using Filament Groups Table Saw for as long as I can remember but this is perfect for building one out yourself and understanding the things you've got to think about.
Building layouts for multi-lingual sites is difficult, but when you throw a change in writing-direction into the mix the complexity goes up. This tutorial takes you through the steps you should follow to get it right.
Zach has written a little plugin that will help you with your font loading strategies without having to be concerned with prefixing the rules with a .fonts-loaded.
I was listening to Chris and Dave talk about this on the Shop Talk show the other week and I couldn't quite wrap my head around CSS Variables and using them instead of the attr() function. Thankfully, as he is known to do, Chris did a write up to explain it all.
Tools Every shortcut for designers in one place 🚀. This has been great for me getting some inDesign shortcuts for the notebook creations, and there was a bunch I didn't know about Photoshop.
fontplop is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff, svg, and eot.
Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser. As soon as the browser detects that an element is visible, go ahead and animate them.
js2flowchart - a visualization library to convert any JavaScript code into a beautiful SVG flowchart. This is a great way to visualise your JavaScript code and make it easier for people to understand... and perfect for documentation.
Extract & Inline Critical-path CSS in HTML pages with this Grunt/Gulp capability.
Learn how to design, develop and test data-intensive web and mobile apps that run on desktops, tablets, and smartphones with Sencha Ext JS
// sponsor
Presentation
Yesenia Perez delivers a great talk based on the work she does at Vox media across publications such as The Verge, Vox, SBNation, Polygon and more. They have 8 brands in total at Vox with more than 350 websites... but only one design system. Yesenia goes through the process of creating the design system and rules that are used when applying it across the portfolio of sites.
Finally That's it for this week. In the lead up to the Xmas break I'm going to be putting together a couple of best of editions to get us over the holidays so that you've still got something to distract you and keep you tinkering, and I can spend more time trying to cut down a tree and put together kids xmas presents ;)
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment