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. | |
No comments:
Post a Comment