Hello again and welcome to this week's responsive design weekly newsletter.
If you're in the US I hope you all had a lovely 4th July and spent the day at the beach (where you can) relaxing with freinds and family.
This week we've seen a few style guides and design systems launched, and I've come across an interesting new accessibility approach to tabbed navigation (Spatial Navigation).
There's a great presentation from Val head on the future of digital design, and a great starter guide to sub grids.
Let's get linking.
| | Headlines CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features. | | | Get yourself one of the first Colour Edition notebooks today. Each set contains the four main CMYK colour covers along with colour theory on the inside covers. | | Articles This is a fantastically designed blog article about the history and challenges of data science. The animations and subtle movements are wonderful.
The biggest problem for web design, in my opinion, is conveying the interactions and movement that the designer has in their mind to either the client for sign off or the developer for the build. Even if both the client and developer can imagine what the designer is describing there is a strong chance that they are imagining different things. Timeline 2.0 is trying to fix that problem
As you start reading an article I think it's super important to know some context. The date the article was published/updated is the _best_ context you can have, especially in our industry where things move on so quickly and technical articles can go out of date.
The Design System contains styles, components and patterns to help teams in government create user-centred digital services. It brings together the patterns and code found in the Service Manual, GOV.UK Elements and elsewhere.
The accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. This article takes you through the main features of the accessibility inspector and how to use it.
I love this article because it's one of my favourite things to do. Go and find something that is a great example of design that _isn't_ on the web and recreate it so that it is.
If you missed the Ampersand conference in Brighton this year then Rob Weychert has you covered with this overview of each of the talks (along with some great related links). The conference was mostly focussed on Variable fonts which is something that excites me when it comes to the possibilities of design.
Tutorials This specification is seeking to implement a way to move the focus of a webpage with the arrow keys. Currently we have the tab key which will take us from one selection to another but that's not always the simplest way. Imagine a grid of images that are 3 columns wide, no imagine you wanted to go from the first image to the 7th image. Currently you would need to go through 1, 2, 3, 4.... but with spatial navitaion you could go 1, 4, 7 by pressing the down arrow. In contrast, spatial navigation moves the focus among focusable elements depending on their position allowing it to address problems encountered with sequential navigation.
Looking for a basic introduction into CSS Grid, Dennis has got you covered.
Having an incredibly large heading text that completely fills the container has been a bit of a trend in recent times. I quite enjoy the look and have tended to use FitText to get it to work with different length headings, here are a few more options from Chris.
I was working on a demo this week and had to bring some text in front of an image. I had placed a z-index on the image (along with some other rules) but couldn't get it to layer properly until I added some positioning to it. This tutorial goes into further details about what to remember when it comes to layering things on the z index.
From now on when someone asks me for a resource on how to get started with building websites THIS is where I'll send them. A truly in-depth yet basic guide to web development with code examples and illustration, free!
If you're concerned that moving towards using CSS Grid will mean that any users on older versions of IE will be left behind then this article (first in a series of three) is for you.
Part two in the series
Tools & Resources Val Head is a Web Animation Expert, Author, and Design Evangelist at Adobe. Here she asks what becomes of the role of designers as we see the world moving away from screens towards technologies like chatbots, virtual reality and artificial intelligence.
A no-nonsense explainer for conference organisers about my presenting terms and topics from Christian Heilmann.
| |
Thanks to those that suggested some of the links for this week, if you have come across something that you found interesting, or have written yourself, hit reply and let me know.
Cheers,
Justin. | | | |
No comments:
Post a Comment