A one- or two-day workshop on responsive design and modern web workflows.
Presentation: The End of the Beginning, Benedict Evans
https://www.ben-evans.com/benedictevans/2018/11/16/the-end-of-the-beginning
State of the Connected Customer – Salesforce Report 2018
https://www.salesforce.com/content/dam/web/en_us/www/documents/e-books/state-of-the-connected-customer-report-second-edition2018.pdf
2014 Mobile Behavior Report – Salesforce
https://brandcdn.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
Opensignal Report: Android Fragmentation 2015
https://www.opensignal.com/sites/opensignal-com/files/data/reports/global/data-2015-08/2015_08_fragmentation_report.pdf
How Device Usage Changed in 2018 and What it Means for 2019
https://blog.globalwebindex.com/trends/device-usage-2019/
Internet Stats & Facts for 2019
https://hostingfacts.com/internet-facts-stats/
Mobile Fact Sheet – Pew Reserach Center
https://www.pewinternet.org/fact-sheet/mobile/
McKinsey study: The Business Value of Design
https://www.mckinsey.com/business-functions/mckinsey-design/our-insights/the-business-value-of-design
Report: Design Maturity Model by InVision: The New Design Frontier
https://www.invisionapp.com/design-better/design-maturity-model/
Responsive Web Design, an article by Ethan Marcotte
https://alistapart.com/article/responsive-web-design/
A Dao of Web Design
https://alistapart.com/article/dao/
The Web’s Grain – Frank Chimero
https://frankchimero.com/writing/the-webs-grain/
Device Agnostic
https://www.trentwalton.com/2014/03/10/device-agnostic/
World Wide Web - The first (responsive) website
http://info.cern.ch/hypertext/WWW/TheProject.html
Media Queries – A collection of inspirational websites using media queries and responsive web design.
https://mediaqueri.es/
Designing for the Web, by Mark Boulton [Free online book]
https://designingfortheweb.co.uk
Why your design process should start with content
https://webflow.com/blog/content-first-design
Designing content-first for a better UX
https://gathercontent.com/blog/designing-content-first-for-a-better-ux
Creating Better Design with Content First Approach
https://designmodo.com/better-content-first/
Priority Guides: A Content-First Alternative to Wireframes
https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes/
Content First Web Design: What It’s About and How to Get Started
https://blogs.adobe.com/creativecloud/content-first-web-design-what-its-about-and-how-to-get-started/
Multi-Device Layout Patterns
https://www.lukew.com/ff/entry.asp?1514
Web Content Accessibility Guidelines (WCAG) 2.0
https://www.w3.org/Translations/WCAG20-de/
7 Things Every Designer Needs to Know about Accessibility
https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b
Designing for accessibility is not that hard
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
Planning for Accessibility, by @laurakalbag
https://alistapart.com/article/planning-for-accessibility
The web accessibility basics, by @MarcoZehe
https://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/
A11Y Style Guide, by @cariefisher
http://a11y-style-guide.com/style-guide/
The A11y Project
https://a11yproject.com
What we found when we tested tools on the world’s least-accessible webpage
https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/
Web Content Accessibility Guidelines—for People Who Haven't Read Them
https://24ways.org/2017/wcag-for-people-who-havent-read-them/
Inclusive Design Principles
https://inclusivedesignprinciples.org/
Inclusive Components – A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
https://inclusive-components.design
Accessibility, Back to the Future | Bruce Lawson | Monki Gras 2019
https://www.youtube.com/watch?v=T2CjuAwrAq8
Out with accessibility - In with inclusive design – Robin Christopherson – btconfBER2017
https://vimeo.com/241688610
Color Safe – accessible color palettes based on WCAG Guidelines
http://colorsafe.co/
Contrast ratio
https://contrast-ratio.com/
Integrating Contrast Checks in Your Web Workflow
https://24ways.org/2014/integrating-contrast-checks-in-your-web-workflow/
Website Accessibility [FrontendMasters course]
https://frontendmasters.com/courses/web-accessibility/
axe: Automated accessibility testing
https://www.deque.com/axe/
Lighthouse
https://developers.google.com/web/tools/lighthouse/
Accessibility Insights (browser extensions & Windows app)
https://accessibilityinsights.io
Stark Plugin – The color-blind simulator and contrast checker. Design with accessibility in mind.
https://getstark.co
Accessibility for Everyone, Laura Kalbag [Book]
https://abookapart.com/products/accessibility-for-everyone
Inclusive Design Patterns, Heydon Pickering [Book]
https://www.smashingmagazine.com/printed-books/inclusive-front-end-design-patterns/
A comprehensive guide to design systems
https://www.invisionapp.com/inside-design/guide-to-design-systems/
Atomic Design by Brad Frost
http://atomicdesign.bradfrost.com/
Atomic Classification
https://trentwalton.com/2016/02/26/atomic-classification/
Styleguides.io – Website Style Guide Resources
http://styleguides.io/
IBM Carbon Design System
https://www.carbondesignsystem.com
Salesforce Lightning Design System
https://www.lightningdesignsystem.com
Fractal
https://fractal.build/
BEM Introduction
http://getbem.com/introduction/
BEM 101
https://css-tricks.com/bem-101/
Progressive Enhancement and the Future of Web Design
http://hesketh.com/publications/progressive_enhancement_and_the_future_of_web_design.html
Understanding Progressive Enhancement
https://alistapart.com/article/understandingprogressiveenhancement/
Test-Driven Progressive Enhancement
https://alistapart.com/article/testdriven/
Adaptive Web Design, by Aaron Gustafson [Book]
https://adaptivewebdesign.info/
Responsive Navigation Patterns
bradfrost.com/blog/post/responsive-nav-patterns/
Complex Navigation Patterns for Responsive Design
http://bradfrost.com/blog/post/complex-navigation-patterns-for-responsive-design/
Hamburger Menus and Hidden Navigation Hurt UX Metrics
https://www.nngroup.com/articles/hamburger-menus/
Label Placement in Forms
https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar
https://baymard.com/blog/horizontal-filtering-sorting-design
How to Design ‘Applied Filters’ (42% Get It Wrong)
https://baymard.com/blog/how-to-design-applied-filters
User Intent Affects Filter Design
https://www.nngroup.com/articles/applying-filters/
Form Design Patterns, Adam Silver [Book]
https://formdesignpatterns.com/
Table Design Patterns On The Web
https://www.smashingmagazine.com/2019/01/table-design-patterns-web/
How To Architect A Complex Web Table
https://www.smashingmagazine.com/2019/02/complex-web-tables/
Tablesaw - A Flexible Tool for Responsive Tables
https://www.filamentgroup.com/lab/tablesaw.html
Responsive Data Tables
https://css-tricks.com/responsive-data-tables/
The New Web Typography
https://robinrendle.com/essays/new-web-typography/
Flexible Typesetting, Tim Brown [Book]
https://abookapart.com/products/flexible-typesetting
Responsive Typography: The Basics
https://ia.net/topics/responsive-typography-the-basics
Responsive And Fluid Typography With vh And vw Units
https://www.smashingmagazine.com/2016/05/fluid-typography/
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 ways
https://24ways.org/2016/responsive-display-text/
Matthew Butterick’s Practical Typography – A web-based book [Book]
http://practicaltypography.com/
Modular Scale
https://www.modularscale.com/
Leserlich: Schriftgrößenrechner
https://leserlich.info/kapitel/zeichen/schriftgroesse.php
Line-height Crop — a simple CSS formula to remove top space from your text
https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f
Font Style Matcher
https://meowni.ca/font-style-matcher/
Typecast
https://typecast.com/
Typefacts
https://typefacts.com/
A Comprehensive Guide to Font Loading Strategies
https://www.zachleat.com/web/comprehensive-webfonts/
How to start with variable fonts on the web
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html
Extreme Typography on the Web - David Jonathan Ross - btconf Berlin 2018
https://www.youtube.com/watch?v=y7UDfs4XNko
Variable Fonts (beta)
A simple resource for finding and trying variable fonts
https://v-fonts.com/
Axis-Praxis – a website for playing with OpenType Variable Fonts
https://www.axis-praxis.org/
Designing for Performance – Weighing Aesthetics and Speed, by Lara Hogan [Free online book]
http://designingforperformance.com/
Harry Roberts: Why Fast Matters | CSSConf Budapest 2017
https://www.youtube.com/watch?v=JoGR6Lh8EFc
Performance.now() Conference [YouTube Playlist]
https://www.youtube.com/playlist?list=PLjnstNlepBvMnKuNFvWeQWzlRp8Cbiw0X
Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
High Performance Images [Free book]
https://www.akamai.com/us/en/multimedia/documents/content/white-paper/akamai-oreilly-high-performance-images-white-paper.pdf
Image Performance, Mat Marquis [Book]
https://abookapart.com/products/image-performance
Srcset and sizes
https://ericportis.com/posts/2014/srcset-sizes/
Responsive Images in Practice
https://alistapart.com/article/responsive-images-in-practice/
Responsive Images Done Right: A Guide To Picture And srcset
https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
Responsive Images on the Apple Watch
https://ericportis.com/posts/2018/respimg-apple-watch/
A Chaotic Good Guide to Image Performance, Part 1
https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1
Picturefill – A responsive image polyfill
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Responsive Image Breakpoint Generator
https://www.responsivebreakpoints.com
lazySizes
https://afarkas.github.io/lazysizes/index.html
Squoosh
https://squoosh.app
ImageOptim
https://imageoptim.com
SVGO
https://github.com/svg/svgo
SVGOMG – SVGO’s missing GUI
https://jakearchibald.github.io/svgomg/
The Experimental Layout Lab of Jen Simmons
https://labs.jensimmons.com/
Rachel Andrew's Grid by Example
https://gridbyexample.com/
Jen Simmons’s Layout Land [YouTube Channel]
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
“Everything You Know About Web Design Just Changed” by Jen Simmons—An Event Apart video
https://www.youtube.com/watch?v=jBwBACbRuGY
Making Future Interfaces: Algorithmic Layouts [Video]
https://www.youtube.com/watch?v=qOUtkN6M52M
Can I Use Grid?
https://caniuse.com/#search=grid
Every Layout
https://every-layout.dev
Debugging CSS Grid Layouts With Firefox Grid Inspector
https://www.smashingmagazine.com/2017/12/grid-inspector/
Designing Intrinsic Layouts [Slides]
https://noti.st/jensimmons/15TjNW/designing-intrinsic-layouts
A Complete Guide to Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/complete-guide-grid/
CSS Grid Garden – A game for learning CSS Grid layout
http://cssgridgarden.com/
Enhancing CSS Layout: From Floats To Flexbox To Grid, by Manuel Matuzović
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
Easings.net
https://easings.net/
cubic-bezier.com
https://cubic-bezier.com
Prototyping.news ;)
https://prototyping.news
Saving Your Web Workflows with Prototyping
https://matthiasott.com/articles/saving-your-web-workflows-with-prototyping
Prototyping for Designers, Kathryn McElroy [Book]
http://shop.oreilly.com/product/0636920049487.do
BrowserStack
https://www.browserstack.com/
Browsersync - Time-saving synchronised browser testing
https://www.browsersync.io
Introduction to cross browser testing (MDN Web Docs)
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction