Building Web Layouts For Dual-Screen And Foldable Deviceshttps://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/
Stephanie Stimac: “Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.”
The Elements of UI Engineeringhttps://overreacted.io/the-elements-of-ui-engineering/
A brilliant post by Dan Abramov on common UI and design / engineering problems and how trying to solve them is often a greater lesson than only learning about a new technology. “Learning comes from exploring the problem space and trying different possible tradeoffs.”
Accessibility, Back to the Future | Bruce Lawson | Monki Gras 2019https://www.youtube.com/watch?v=T2CjuAwrAq8
Bruce says: When Sir Uncle Timbo invented the Web it was accessible by default. Developers, we broke it. Dull Old Web Farts like me wagged our fingers and advised developers to Be Nice To Cripples and sometimes shook our fists and shouted “Be careful of lawsuits”. But by going back to basics, I’ll show you how accessibility means inclusion, and makes the web better for all – not just disabled people, but billions of new customers. So, fire up the flux capacitor and let’s go. NB: I’ll still wag my finger a bit, for old times’ sake.
A Chaotic Good Guide to Image Performance, Part 1https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1
A great guide to image performance by Mat Marquis.
Do you use “very” very often? This very nice website provides very good alternatives to “very” so you don't have to use “very” less often. Very useful …ermm… advantageous!
The business value of designhttps://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design
How do the best design performers increase their revenues and shareholder returns at nearly twice the rate of their industry counterparts? The McKinsey Design Index (MDI) highlights four key areas of action companies must take to join the top quartile of design performers. What they found and point out in their report: There is a strong correlation between high MDI scores and superior business performance.
A directory of personal websites by Andy Bell
The Learning/Doing Gaphttps://seths.blog/2019/06/the-learning-doing-gap/
A nice post by Seth Godin about a huge mistake our society often makes: We separate learning from doing. What happens if the learning we do is accomplished by always engaging in it in conjunction with our doing?
webmention.apphttps://webmention.app/ Automate your outgoing webmentions – a platform agnostic service that will check a given URL for links to other sites, discover if they support webmentions, then send a webmention to the target.
Font-display, by @notwaldorfhttps://font-display.glitch.me/
A small and concise explainer on font loading with the font-display property by Monica Dinculescu on Glitch.
High Resolution: Interview with Tom Kelleyhttps://www.highresolution.design/16-tom-kelley-ideo/
A great interview with IDEO's Tom Kelley on design, design thinking, and what it takes to build your creative confidence.
CREATIVE LEADERSHIP todayhttp://creativeleadership.com/
A blog on creative leadership by John Maeda from 2009 to mid-2015.
Working with Charles and Ray Eameshttp://streetfurniture.com/au/working-charles-ray-eames/
Australian architect Darrel Conybeare joined the Eames office in Venice, California, in 1967, as a young graduate of the Architecture and Civic Design Masters program at the University of Pennsylvania. The next three years were beyond his greatest expectations …
“I learned [about] the importance of building prototypes at both small scale and full size for all design outputs, products and graphic elements; and, ultimately, that there is no substitute for simple hard work in tackling any design challenge.”
A wonderful piece by Trent Walton about why we should build websites that are built to face the reality of the Web's inherent variability.
FeedBase is a database of feeds to separate the management of your #RSS subscription list from feed readers, by @davewiner.
In Defense of Design Thinking, Which Is Terriblehttps://www.subtraction.com/2018/04/02/in-defense-of-design-thinking-which-is-terrible/
“If you have an idea—a force of nature—like technology, it becomes most powerful when it’s democratized, when it gets out there into the world and in the hands of millions of people.
I believe this is true of design, too.”
This is a must-read by @khoi Vinh.
Card Sorting: Uncover Users' Mental Models for Better Information Architecturehttps://www.nngroup.com/articles/card-sorting-definition/
Card sorting is an effective technique to understand if your information architecture matches the mental model of your users. This article by @kwsherwin covers all the basics.
Running in Circles – Why Agile Isn’t Working and What We Do Differentlyhttps://m.signalvnoise.com/running-in-circles-aae73d79ce19
Ryan Singer explains how, at Basecamp, they use the so called uphill phase to learn – through prototypes – what’s hard and what’s possible in a project.
An open source collection of design principles and methods managed by @benbrignell
Planning for Accessibility, by @laurakalbaghttps://alistapart.com/article/planning-for-accessibility
“Accessibility isn’t a line item in an estimate or a budget—it’s an underlying practice that affects every aspect of a project.” This article is an excerpt from @laurakalbag’s new book, Accessibility for Everyone.
Sketching Interfaces Generating code from low fidelity wireframes.https://airbnb.design/sketching-interfaces/
The @Airbnb design team has built a prototype that renders hand-drawn wireframes into working UI components
HEAD – A free guide to <head> elementshttps://gethead.info/
Essential Image Optimization – An eBook by @addyosmanihttps://images.guide/
In 2017, image optimization should be automated. Addy Osmani looks at ways to reduce image size through modern compression techniques with minimal impact to quality.
How to Run a Good Workshophttp://scottberkun.com/2013/run-a-good-workshop/
Scott Berkun shares his 10 rules of running a good workshop. Rule #1: A 3 hour lecture is not a workshop.
A11Y Style Guide, by @cariefisherhttp://a11y-style-guide.com/style-guide/
The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.
Styleguides.io – Website Style Guide Resourceshttp://styleguides.io/
A huge treasure trove of real life pattern libraries, code standards documents, and content style guides, articles, books, podcasts, talks, and tools.
Fiber – a free, interactive UI Kit by Framerhttps://framer.com/
“Every artboard in the Fiber UI Kit features customizable elements, all hooked up to interactions in Code. Customize text, images and animation values to create your own social prototype. Or pull apart native scroll, swipe and slider components for separate projects.”
GitPoint – feature-rich unofficial GitHub clienthttps://gitpoint.co/
View repository and user information, control your notifications and even manage your issues and pull requests. Built with React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
Smooth Scrolling and Accessibility, by @_hmighttps://css-tricks.com/smooth-scrolling-accessibility/
Regardless of how you implement smooth scrolling, there are a few accessibility issues that should be addressed: focus management and animation.
Matthew Butterick’s Practical Typography – A web-based bookhttp://practicaltypography.com/
“Typography is the visual component of the written word. And being a publisher of the written word necessarily means being a typographer. This book will make you a better typographer.”
Accessible Tooltips & Toggletips | Inclusive Components by @heydonworkshttps://inclusive-components.design/tooltips-toggletips/
In this article, Heydon Pickering looks at situations which might call for a tooltip or else a toggletip, and formulates inclusive implementations for each.
The Sky Digital Toolkithttps://www.sky.com/toolkit
The Sky Digital Toolkit is the central resource for designers and developers to understand how to design and build digital products for Sky.
A Collection of Interesting Facts about #CSS Grid Layout, by @mmatuzohttps://css-tricks.com/collection-interesting-facts-css-grid-layout/
Manuel Matuzović shares some of the lesser known features of CSS Grid.
The web accessibility basics, by @MarcoZehehttps://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/
Marco Zehe's list of absolute web accessibility basics every web developer should know.
Design Principles, collected by Jeremy Keith (@adactio)https://principles.adactio.com/
A huge collection of design principles from various disciplines.
Space in Design Systems, by @nathanacurtishttps://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
From Basics to Expanded Concepts to Apply Space with Intent
Basecamp Employee Handbookhttps://github.com/basecamp/handbook/
“So, this is where we’ll try to share what’s worth knowing about Basecamp the company, our culture, our process, and our history.”
Practical CSS Grid: Adding Grid to an Existing Design, by @meyerwebhttps://alistapart.com/article/practical-grid
“It’s been decades since CSS first emerged, but it’s never contained a system anything like this.” – Eric Meyer on CSS grid and the process of progressively enhancing his site to use grid.
Getting started with variable fonts, by @clagnuthttp://clagnut.com/blog/2389/
Richard Rutter explains the basics of variable fonts and the new values coming with CSS4.
A Practical Guide to SVG on the Web, by @jakegiltsoffhttps://svgontheweb.com/
The guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.
Understanding Flexbox: Everything you need to know, by @OhansEmmanuelhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj
A concise and complete introduction to CSS Flexbox.
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 wayshttps://24ways.org/2016/responsive-display-text/
Richard Rutter (Clearleft) shows how to use
vmin and a hybrid method of sizing text using CSS
calc() to achieve balanced font-sizes for different viewports.
cssreference – a free visual guide to CSS, by @jgthmshttp://cssreference.io
Learn by example cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
“Who Will Command The Robot Armies?” – a talk by @baconmeteor about accountability in automated systemshttp://idlewords.com/talks/robot_armies.htm
It’s a rant by Maciej Cegłowski about chatbots, machine learning, and the issues of accountability and power that go with automation.
Designing for the Web, by Mark Boultonhttp://designingfortheweb.co.uk/index.php
Modern web design is a discipline that spans a huge range of skills. In his book, Mark Boulton masterfully guides you through things like process and workflow, research, typography, colour, layout, and much more.
Using WebP Images – a great introduction by @malchatahttps://css-tricks.com/using-webp-images/
If you want to fight large images and save bandwidth with WebP, a file format created by Google that provides superior lossless and lossy compression, then this article is a really helpful introduction.
Fractal – build and document web component libraries & styleguideshttp://fractal.build/
Fractal by @allmarkedup, frontend dev @clearleft, lets you build and document web component libraries and styleguides, and then integrate them into your projects. It is flexible, data-driven, and can be seamlessly integrated into your site.
The Web’s Grain – A view on designing for the webhttp://www.frankchimero.com/writing/the-webs-grain/
One of the best articles on designing for the web, by @frank_chimero. As wonderful as important. Required reading.
Making And Maintaining Atomic Design Systems With Pattern Lab 2 Byhttps://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/
Pattern Lab 2 is an open-source suite of tools to help you and your team create and maintain thoughtful UI design systems. At its core, it’s a static site generator that stitches together patterns and allows you to design with dynamic data.
How Will Web Components Change CSS Architecture?https://snook.ca/archives/html_and_css/will-web-components-change-css
Impressively comprehensive article by @_hmig about creating accessible SVGs in order to ensure a great user experience for everyone.
Astrum – A lightweight pattern library for any web projecthttp://astrum.nodividestudio.com/
Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way.
A #cheatsheet of the A-Z of #typography jargon, by Fontsmithhttp://www.itsnicethat.com/news/fontsmith-typography-jargon-dictionary-300616
London foundry Fontsmith has produced an in-depth glossary of typography jargon in infographic format.
As We May Think. Vannevar Bush's visionary essay from 1945, anticipating the information societyhttp://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/
“Dr. Vannevar Bush […] calls for a new relationship between thinking man and the sum of our knowledge.” – The Editor
Just turned 6: Responsive Web Design, by @beephttp://alistapart.com/article/responsive-web-design
“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
Why everybody who talks about the importance of semantics is both right and wrong at the same time.
Regressive Web Appshttps://adactio.com/journal/10708
“What does it profit a website to gain app-like features if it loses its soul?” – a must-read by @adactio about how progressive web apps undermine some of the web's greatest features (like URL's) and about some dangerous assumptions been made.
The New Web Typographyhttps://robinrendle.com/essays/new-web-typography/
A wonderful piece by @robinrendle about the aesthetics, the quirks, the flexibility, and the fragility of web typography.
Developing Dependency Awarenesshttps://www.smashingmagazine.com/2016/05/developing-dependency-awareness/
Progressive enhancement once more is on a roll: Great(!) article by @AaronGustafson about reducing dependencies
Design systems and Postel’s lawhttp://markboulton.co.uk/journal/design-systems-and-postels-law
Postel’s law – “Be conservative in what you do, be liberal in what you accept from others” – applied to design systems and their origination process. What a wonderful thought by @markboulton!
Creating A Living Style Guide: A Case Studyhttps://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
One of the most elaborate case studies on living style guides I've read so far. By @StevenKLambert
Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-images/
Nicely sums up of different ways to use responsive images.
Empowering designers with beautiful and accessible color palettes based onWCAG Guidelines of text and background contrast ratios.
Grid Style Sheets 2.0https://gridstylesheets.org/
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
Custom underlines with CSS background gradientshttp://dabblet.com/gist/58f3d67d5bb0f8338776
A dabblet by Lea Verou, this technique is also covered in her very good book CSS Secrets.
Inline SVG with Grunticon Fallbackhttps://css-tricks.com/inline-svg-grunticon-fallback/
@chriscoyier shows you how to build an SVG icon system.
A guide to getting you on the IndieWeb
It's about time to learn CSS Flexbox. And this ingenious game lets you get your head around the relevant CSS properties in no time. Wonderful work.
Designing for Performance – Weighing Aesthetics and Speedhttp://designingforperformance.com/
The (free) online version of @lara_hogan's great book on web performance.
Style Guide Resourceshttp://styleguides.io/
This site lists lots of useful resources to help you learn about and create your own Front-End Style Guides and Pattern Libraries.Contributions by @maban, @bradfrost and many, many more.
Oil Change & Pizzahttp://danielmall.com/articles/oil-change-pizza/
Great advice from Daniel Mall for agencies (and freelancers alike): What makes a great agency are the things they don’t do.
An opinionated styleguide for writing sane, maintainable and scalable Sass.