Hello and welcome to RWD Weekly edition #286.
This is it ladies and gentlemen, there are only 2 days left on the RWD Tees on Cotton Bureau. If you want to pick up a pretty sweet gift for your team mates at Xmas now is the time to get one of these.... and if you want 10% off then you can use the code X3QBJQ4S. This is likely to be the last ever print for the shirts so don't miss out on a bit of history.
I'm also super excited to have Atomic Design as our sponsor this week. I've followed along with Brads thoughts and posts over the past few years and it has all come together is a fantastic book. If you touch front end design/development, you need this on your bookshelf.
Let's get to some links! | | Headline Stefan revisits the web adage that the best request is no request at all... which is essentially why we ended up concatenating our CSS and JS and creating sprites for our UI images.... if you don't have to make two http requests then don't. Now, with http/2, is this approach still valid? Are our former best practices still best practices?
I really dislike content sliders... or more to the point I really don't like carousels. On one of the last clients I worked with they're previous agency had built them a home page carousel where each of the carousel items contained another carousel. FFS. It's not all bad though, and sometimes a carousel is the right tool for the job (like an image gallery for example). In this article Heydon Pickering adds to his growing list of inclusive components
| | | Atomic Design details all that goes into creating and maintaining robust design systems, allowing your team to roll out high-quality, consistent UIs faster than ever. This book introduces a methodology for thinking of UIs as thoughtful hierarchies and showcases techniques to transform your team's design and development workflow. https://shop.bradfrost.com/ | | Articles So often a user goes through a tonne of different touch points on the way to becoming a customer. By creating a journey map you'll have a better idea about what to provide at each stage, and on which channel.
As I've mentioned the past couple weeks I'm expanding my browser usage again. Chrome did so well all those years ago by providing us with a solution that wasn't IE, but now we should be trying to avoid falling back into the same single browser trap.
It's time I started brushing up my UX designer resume and applying for some jobs... the salary is looking very attractive.
Have you ever wondered what happens when you type in a URL or click a link? Well, when you do this on FT.com a hell-of-a-lot goes on to make sure you get your content quickly.
Tutorials I've always nested calc() within calc() for additional math functions. It turns out it's not great for IE10 and 11, but by just including a single function and multiple parenthesis it works. The more you know.
I began doing wireframes in the browser using Zurbs Foundation because it was the easiest way for me to allow clients to see how a web page would flow across viewports. This is a neat trick from Eric Meyer to get the them looking more wireframy and sit above existing content. Very cool
A detailed review from Rob on his approach to responsive typography in his latest redsign of the site (hence the V6 bit... it's the sixth iteration).
A great introduction from Per on the Grid Layout using a nifty new tool designed for training courses in Front End.
Using flexbox and text-overflow: ellipsis to help deal with text components.
This is a great little trick — using position:sticky to ensure that the table header rows are always visible even on smaller viewports. Had I not just switched over to Firefox I would have been very impressed, but at the moment this is only working in later versions of Chrome. There is some work on the bug tracker for Mozilla to address the two issues that are causing Firefox not to work for this example, so it could be something for the future.
Scott Jehl has updated the filament groups approach to loading fonts and written a great tutorial for you to follow along with.
Tools After building this, Brad literally wrote the book on the subject.
This is a brilliant tool that will help you put together a pattern library for any project that you're working on.
Brand Portals, Style Guides & Collaboration for your Clients
The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles.
Video For me, minmax() is the key responsive feature of the CSS Grid Layout specification and provides the most responsive capabilities for the least amount of effort. If you're not sure what minmax() does with Grid then I strongly urge you to find 2.5minutes in your day and watch this video from Rachel Andrew.
Learn how to use fluid typography, responsive SVG, adaptive flexbox components, CSS grid and custom properties to create unique responsive solutions that go beyond media queries.
Jobs We are a small, collaborative team of multidisciplinary designers, and are looking for experienced product designers to help us dive deeper into our product vision, and to strengthen our brand across all the places we interact with our customers.
Finally
That's it for this week. This week I'm starting to go through all of the Patterns on the site and update them with Grid Layout alternatives.
See you next week!
Cheers,
Justin. | | | |
