Articles, Links, and Tools From Online Together: Fall Summit
“I Am So Very Tired of Terrible Content” (Kristina Halvorson)
An entertaining tour of Very Bad Content in 2020 with Kristina, with tips on how to prevent your content from being featured in her next earth-scorching talk.
Latest thinking
- The Past, Present and Future of UX Writing: An Interview with Kristina Halvorson
- Brain Traffic’s Button 2020 conference
Important milestones
- By Shopify: Designing a Name: Why We’re Changing the Job Titles of Our Content Team
- By Facebook: Why We’re Moving from Content Strategy to Content Design
Hangouts
Books
- Content Strategy for the Web
- The Elements of Content Strategy
- Writing for Designers
- Writing Is Designing
- Strategic Writing for UX
- Content Design
Background
- The Discipline of Content Strategy
- Content Strategy: The Philosophy of Data
- New Thinking: Brain Traffic’s Content Strategy Quad
- What Is Content Strategy and Why Should You Care?
- Content Strategy Is Not UX
Listening
“User Preference Design” (Sarah Parmenter)
As scary as it seems, it’s time we put a little more control into our users hands, rather than limiting the web to a one-size-fits-most school of thought.
“Truths and Myths About Animation in our Work” (Val Head)
In this session, Val will cover common assumptions around UI animation and how understanding each assumption—whether a myth or a truth—can impact your work.
- Variable font experiments from Mandy Michael
- Jason Pamental on variable fonts
- Transform box on MDN
- CSS motion path quirks
- CSS IRL - CSS motion path
- Motion paths, past, present, and future
- The role of animation and motion in UX
- Executing UX animation
- Designing interface animation (book)
- Designing safer web animation
- Designing with reduced motion for motion sensitivities\
- Accessible web animation: the WCAG on animation
- Animation in design systems (pdf ebook)
“Dissecting the ‘Name-Brand’ CSS Conventions” (Miriam Suzanne)
A look at what CSS naming convention systems have in common, where they differ, and how they are informed by CSS itself.
Web Platform
- World Wide Web CERN, 1991
- WWW HyperMedia Browser & Editor Emulator
- Line Mode Browser, Emulator (original was developed by Nicola Pellow)
- W3C Mission & Principles
CSS & The Cascade
- Historical Style Sheet Proposals
- Cascading HTML style sheets – a proposal by Håkon W Lie, 1994
- CSS Cascading & Inheritance Level 4
- MDN Introduction to the CSS Cascade
- Attribute Selectors
CSS Conventions
- CSS Systems by Natalie Downe, 2008
- OOCSS by Nicole Sullivan, 2009
- BEM by Yandex, 2010
- SMACSS by Jonathan Snook, 2012
- Atomic Web Design by Brad Frost, 2013
- Inverted Triangle CSS by Harry Roberts, 2014
- Attribute Modules for CSS by Glen Maddern, 2014
- Atomic CSS by Yahoo!, 2015
- CUBE CSS by Andy Bell, 2020
CSS in JS
Other Resources
- Structural Naming by Eric Meyer, 2004 (part of a larger conversation of linked blog posts)
- Link Specificity by Eric Meyer
- CSS Workflow by Jina
- Pattern Primer by Jeremy Keith
- CSS Guidelines by Harry Roberts
- Sass Guidelines by Hugo ‘Kitty’ Giraudel
- BEMIT by Harry Roberts
- Atomic OOBEMITSCSS by Una Kravets
- About HTML Semantics and Front-End Architecture by Nicolas Gallagher
- Semantic CSS With Intelligent Selectors by Heydon Pickering
- Resilient, Declarative, Contextual by Keith J Grant
- The Way We Talk About CSS by Rachel Andrew
- How I Structure My CSS (for Now) by Matthias Ott (not mentioned directly)
From Miriam
“Modern CSS Tips and Tricks” (Una Kravets)
CSS is evolving at a rapid pace, and with the market share of browsers now being widely evergreen, our ability to use modern techniques is growing too.
Technologies
Post CSS Plugins
“Habits of the Cross-Cultural Designer” (Senongo Akpem)
If we want to effectively design for modern, multicultural audiences, we have to be willing to challenge our usual strategies and processes. But what are the core actions of the cross-cultural practitioner?
- July 2019 report from We Are Social and Hootsuite Global Digital Reports on internet usage
- Cross-Cultural Design from A Book Apart
- Cultural Probes
- Obvi App
- Bollywood Method
- Jason Travis Persona photo series
- Redesigning the Grab app
- Mental models used by Taiwanese and American consumers when shopping online for home goods (PDF)
- Digital Green
- Database of Places, Language, Culture and Environment
- Other Valleys
- Tech Cabal
- Nava
“Designing Beyond Websites: What is Dead May Never Die” (Cheryl Platz)
By embracing new frameworks for modeling human experience and a multidevice perspective, our products can adapt to human needs in the moment, as opposed to forcing adaptations upon us.
My book on multimodal and cross-device experience design, Design Beyond Devices - 15% off all pre-orders!
Background articles
- TechCrunch, “The Sudden Death of the Website”
- Forbes.com, “Ten ways to win the mobile-first revolution”
- N/Ng, “Voice First: The future of interaction?”
More about the CROW storytelling framework
- Ideaplatz on Medium: “Catching CROW: Storytelling for UX Design”
Reference materials on working with specific interaction modalities
- Designing Voice User Interfaces by Cathy Pearl
- Voice User Interface Design by James Giangola and Jennifer Balogh
- Kinect Human Interface Guidelines 2.0 from Microsoft
- Conversational Design Guidelines from Google
- Alexa Blogs: Building for Echo Show and Echo Spot from Amazon
“Design for Cognitive Bias” (David Dylan Thomas)
Users’ minds take shortcuts to get through the day. Usually they’re harmless—even helpful. But what happens when they’re not?
Websites
- Radical copyeditor
- Textio: https://textio.com/
- Humane by Design
- Designer’s code of ethics
- Ethical Decision Making
- The Never Again Pledge
- Tarot Cards of Tech
- 52 UX Cards to Discover Cognitive Biases
- Design justice principles
- Inclusive design framework
- Cards Against How Might We
- GitHub Blind Screening tool
- Center for Humane Technology
- Feminist research methods
- Algorithmic Justice League
- Equity Centered Community Design
- Black UX resource list
- A11y Rhymes
- Another Lens conscientious research tool
- Cards for Humanity
- Decentering Whiteness in Design History Resources
- Blendoor: Tool for anonymized hiring
- Spotify Ethics Assessment Worksheet
Books
- Technically Wrong by Sara Wacther-Boettcher
- Artificial Unintelligence by Meredith Broussard
- Thinking, Fast and Slow by Daniel Kahneman
- Predictably Irrational by Dan Arielly
- Ruined by Design by Mike Monteiro
- Data Feminism
by Catherine D’Ignazio and Lauren F. Klein
Podcasts
Video
Slack
“Remote Meetings That Get Us Back to Work” (Kevin M. Hoffman)
Companies around the world are adapting to business as usual in a distributed culture. For better or worse, that adaptation seems to have carried with it an increase in meetings. Having good remote meetings carries all of the challenges of in-person meetings plus additional layers.
Articles and Websites
- Quarantine life: Meetings outside office hours are becoming a constant
- Surprising stats from the quarantine
- How The First 15 Minutes Of Amazon’s Leadership Meetings Spark Great Ideas And Better Conversations
- 10 of the funniest things people have done while stuck at home due to the coronavirus
- NASDAQ: ZM (Zoom Stock Price Chart)
- The Neuroscience of Trust
- Do You Really Trust Your Team? (And Do They Trust You?)
- How the Best Leaders Build Trust
- The High Cost of Low Trust Cultures
- The Pandemic of Screen Fatigue
Software and Tools
Mural Examples
Remote Guitar Lessons
How would we live without…
Kevin’s Book
“Applied Accessibility: Practical Tips for Building More Accessible Front-Ends” (Sara Soueidan)
Sara shares some frustrations, many lessons learned, and a lot of practical tips and tricks for building accessible front-end foundations that you can take and apply in your own projects right away.
- Making the Web Sweeter with Food Network and Cupcakes - YouTube)
- Microsoft Design
- We’re Just temporarily Abled
- Dragon Naturally Speaking softwarebusiness-solutions/dragon-professional-individual.html
- Web Accessibility 101: Dragon NaturallySpeaking Demo
- Accessible Icon Buttons
- Inclusively Hiding and Styling Checkboxes and Radio Buttons
“Practical Ethics for the Modern Web Designer” (Morten Rand-Hendriksen)
We need an ethics for our industry, of that there is little doubt. But how do we make it happen? How do we incorporate ethics into our design and development work?
- Technology and Design Ethics (LinkedIn Learning)
- The Conscious Creative (Kelly Small)
- The Ethical Design Handbook (Trine Falbe et.al)
- Technology and the Virtues (Shannon Vallor)
- Understanding Privacy (Heather Burns)
- Ethics in Technology Practice (Markkula Center for Applied Ethics at SCU)
- Ethical OS Toolkit
- ACM Code of Ethics and Professional Conduct
- The World-Wide Work (Ethan Marcotte)
- How Privilege Defines Performance (Tatiana Mac)
- The Age of Surveillance Capitalism (Shoshana Zuboff)
- Winners Take All (Anand Giridharadas)
- Blindspot: Hidden Biases of Good People (Mahzarin R. Banaji, Anthony G. Greenwald)
“The Dawn of Design Engineering” (Adekunle Oduye)
What are the specific steps we can take to promote the practice of design technology within our organization?
“Truly Portable Design Patterns” (Jason Grigsby)
A demonstration of how close we are to the promise of design systems by showing how components can flow through our design tools and development frameworks and what challenges remain to be solved.
Our experiment
Web components and design systems
Design
- React Sketch.app
- html-sketchapp
- Invision DSM
- Invision DSM Web Components FAQ
- UXPin Merge
- React components in FramerX
Content Management Systems
- A better authoring experience for Headless CMS’s
- A New Approach to Integrating SPAs with WCM: Fixing What’s Wrong with Headless Integrations
- A New Approach to Single-Page Applications (Video from Bloomreach conference)
- Adobe Experience Manager (AEM) SPA Editor
- Storyblok
References
- Design System Intermediaries by Nathan Curtis
- Qualities of Successful Pattern Libraries by Tyler Sticka
- Container Queries: Once More Unto the Breach by Mat Marquis
- On Container Queries by Ethan Marcotte
- Responsive Components: a Solution to the Container Queries Problem by Philip Walton
- Container Queries: Reimagined by Isaac Lee
- Painting with Code by Airbnb Design
- Web Components Introduction by WebComponents.org
- Build Your Next Design System with Web Components by Max Lynch
“Mind the Gap” (Luke Wroblewski)
With data informed insights, “live” redesigns, and more, Luke will give you the tools and information you need for successful user journeys.
- A case study on App Download Interstitials
- Mobile E-Commerce UX: Deemphasize ‘Install App’ Ads or Avoid Them Entirely
- Airbnb’s Joe Gebbia on How Art School Prepared Him to Be an Entrepreneur
- Airbnb: The Growth Story You Didn’t Know
- AirBnB Fast Facts
- How We Optimized Our Native Mobile Login Flow
- Website Testing Wins: Orange or Blue?
- The Link Bar, an Ecommerce Mobile Homepage Navigation Alternative (to the Hamburger Menu)
- Edgars’ online-to-offline insights pave way to smarter marketing
- Amazon, to Win in Booming Rural India, Reinvents Itself
- Through A/B testing, Matalan improves mobile user experience and produces 49% year-over-year conversion rate uplift
- Why Onboarding is the Most Crucial Part of Your Growth Strategy
- New E-Commerce Checkout Research – Why 68% of Users Abandon Their Cart