Hey everyone and welcome to weak #382 of the responsive design weekly.
This week we look at RWD itself and see whether it has lived up to the hype we put around it, and we also hear from the name coiner himself, Ethan, in a new talk.
There’s a little bit more JS content in there this week as well, but don’t worry we’re not going too far down that road just yet.
I’ve always loved sitting in an audience to listen to Ethan delivering a talk. He delivers current topics, whether it be technical approaches or universal ideas, through wonderful stories that are relatable. This presentation is in video form from his latest conference, but also in written form along with the visuals from the slides. An excellent read and watch.
Hmmmm, click baity? The argument that RWD has failed the mobile web does hold some water, would we have to deal with proprietary implementations of Google’s AMP if we had done a better job with the tools we have?
I was expecting to see a lot of people pitching the idea for container queries as part of the web we want challenge, and in this article Chris looks at the current state of Contain Queries and why they’re still a great idea.
Myself and two good mates have been talking about doing something like this for years, and while we’re in situations that aren’t conducive to taking the plunge (is anyone though?) I still love reading about peoples adventures with startups.
Chrome have come along with some great updates in Chrome 79. We have better access to cookies (where they came from, value, additional info), you can now switch Dark Mode and Reduce Motion inside of Dev Tools as well. There’s plenty more, check it out.
An excellent post from Teresa Man at Superhuman around the types of things to look out for when creating a Dark Theme for your website. Teresa goes into a lot more detail, but the top level is
- Darken distant surfaces
- Revisit perceptual contrast
- Reduce large blocks of bright color
- Avoid pure black or white
- Deepen colors
If you work in a team where the developers and designers are at arms length, or if the art directors don’t see why the web team push back on the use of 15 fonts for a campaign page — if you want to help bridge the gap then this article gives you some great tips on working better between teams.
I find that some agencies spend a lot of time trying to make their products (websites) as flashy as they can be. Content needs to fly in from the left/right, motion needs to be incorporated into every interaction, and the sites that feature on Awwwards (yes, the ones that turn your laptop into a hot water bottle) are often the guide they work from. In truth, what we’re trying to provide 90% of the visitors to our website is information. Content. This article looks at how sometimes a simplified easy read format is sometimes the best approach.
I love Web Page Test for its simplicity, you add a URL into the input and click test to get good insight into how you page is going from a performance point of view. Single Page Apps, SPA’s, are a bit different because the app will go through various states based on user interaction. This article takes you through a few guides around what you can do with some of WebPageTest’s advance features.
Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it can still be hard to line-up content inside the cards: headers and footers that might need more or less room. That’s why we need “subgrid” – coming in Firefox 71 and available now in Firefox Nightly.
If you’re implementing the web share api on your site BEWARE. The API takes three arguments, Name, Text, URL, but when sharing on iOS it will only pass two and leave the URL off (go figure, the most vital piece).
We can always go to a js solution like table saw, but this article shows that we can get quite a long way with just CSS when making our tables responsive.
From using the keyboard only, checking alt text, plus four other basic tips you can make sure you launch with a more accessible website than you would have. Is there anything else that you do?
Hui Jing does a deep dive into CSS counters and even produces a CSS only driven Fizz Buzz test. Does this officially make CSS a programming language now? (that’s a rhetorical question, please don’t answer).
A cracking list of recommendations from Tyler at Cloud Four. From the use of white space to typographic rules for hierarchy, to understanding browser constraints and designing for small screens first and LOTS in between.
My first thought was “why would you ever actualy want to rebuild the apple player in HTML”, but then it occurred to me that the web can be anything it wants to be… even a music player. The tutorial itself is excellent and givens insight into little CSS tricks that will help you in future website builds
I’ve started learning JS now and am enjoying the slow and steady pace that the platforms are taking. When you can make learning something enjoyable and interactive, you’re going to have a better chance at retaining and reusing that information. This murder mystery walks you through how to use SQL to request data from a database, and you need to step through and find out whodunnit.
Oh my, Ana Tudor is a master! Ana has delivered some gorgeous background patterns using only (S)CSS. I have absolutely no idea what is going on with the code, but I will nudge towards SCSS being a programming language for sure.
Using the power of Variable fonts, see just how awesome CSS can be
That’s all for this week. As always thank you to those that sent through link recommendations, if you’ve come across something or have written something please send it through.
See you again next Friday.