Websites for non-jerks

v0.48a - This guide will eventually be made into a website.

A guide for friendly websites (accessible, performant, progressively enhanced, and portable device happy).

The project aim is to have happier, educated teams and better quality websites and apps.

These are resources and tools that I think are excellent and add value to how we approach what we make. This is designed to be an argument buster and responsible decision primer for websites - with links to where I got the data, ideas, or followed a discussion.

##1. Strategies for early project

• Making sure your values align with the client - Prequalifying clients
• All about better project kick off meetings - Kickass kickoff meetings
• Better stakeholder interviews
• A stakeholder interview checklist
• Giving clients words and understanding to express their thoughts - Collaborative moodboards
• Clarifying aesthetic preferences early -The 20 second 'gut' test
• Instead of focusing on what a site should look like, focus on what a site should feel like - A Visual inventory
• Better understanding client and business priorities - The priority & feasability plot
• A Group process for establishing priorities The KJ Technique
• Setting the tone and personality of the brand - Design personas
• A great branding tool - The Brand Deck
• Better interaction design - Get mental notes
• Useful questions for project and client One size fits none
• Set your goals early so you can get better feedback Getting better feedback
• Establishing goals for feedback How to run a design critique
• Need to refactor? Interface inventory

##2. Better design decisions

• Identify the intent behind design decisions - Pull the trigger on design decisions
• A quick primer on some behavioural psychology behind design - Brain gems for decision makers
• Cognitive biases and fallacies in psychology - You are not so smart
• A visual look at some of the cognitive biases we have Cognitive biases - a visual study guide

##3. Inclusive by design

• A (Rough) Manifesto for Accessible User Experience - A philosophy of Accessible user experience built by the community
• Accessibility Wins - Marcy Sutton's Positive Accessibility examples
• UX accessibility with aria label
• Reframing accessibility for the web
• Aria Examples - Some practical ARIA examples to enhance your application accessibility
• ARIA website boilerplate Aria Bones
• An alphabet of Accessibility issues
• Why bother with accessibility?
• Structured your markup well and in a way that makes sense? Semantic structure and why it's important
• Considered contrast and colour blindness? Colour blindness and contrast
• How's your tab key going? unplug your mouse, use the site. On basic accessibility testing, Designing for easy interaction
• Have you tested in Wave? (and are aware that this will only take you so far in acessibility) Wave accessibility tester
• Tested with voice control? Apple voiceover, NVDA for FireFox, JAWS, ChromeVox
• Have you used WAI-Aria landmark roles correctly? Using WAI-Aria landmark roles
• Designing apps for the visually impaired
• Be careful what you do with labels Labels in inputs might not be such a good idea
• How are you communicating the current page? The accessible current page link conundrum
• No one needs a carousel, but if you ignore me, here's some instructions on getting them to work accessibly Carousels and aria tabs
• Since very few people understand the accessibility guidelines fully, the BBC have provided us with a simplified version Best practice accessibility guidelines
• Accessibility lawsuits in america

##4. Thinking about content first

• Emphasize the content Interesting facts make web pages compelling
• Chunk content to allow for easier skim reading Don't let paper paradigms drive your digital strategy
• High quality writing Website reading, Blah-blah text - keep,cut or kill
• Only include what's important Minimize cognitive load
• The hierarchy of important information Content priority guide
• Hiding content isn't always a great idea Content parity, State of mobile web sources
• Consider avoiding carousels Auto-Forwarding Carousels annoy users and Reduce visibility, Three ideas that convert better than a carousel, Carousel interaction stats (updated), Carousels, Designing effective carousels
• Have you considered how your tables will work responsively? Picking a responsive tables solution
• Avoiding the "crowbar" scenario The content quandry
• Some example content snippets to help avoid lorem ipsum Content snippets - specific copy examples

##5. Making things more usable

• Understanding device inputs Touch/pointer events test results
• Can you perform the main tasks of a site on any device? Impact of responsive designs
• Are you making assumptions about portable device usage? When and where are people using mobile devices
• Are the button hit areas large enough (min 44px) for a finger/thumb? Apple's guidelines, Windows guidelines, Nokia's Guidlines
• Have you got feature detection? Can your site/app tell the difference between a click and a tap? a swipe? Modernizr, Modernizr server
• Are you making the visitor wait 300ms for a tap gesture? Avoiding the 300ms click delay
• Understanding feature support CanIuse
• Avoid unicode for 'hamburger' menus? Unicode hamburger does not work
• Beware of fixed position headers on android devices Fixed position, Mobile web problems
• How are you dealing with complex navigation? If you have a massively complex site structure have you provided in site search? Responsive navigation patterns
• Have you designed with thumb flow in mind? Designing for thumb flow
• Are you relying on hover for anything? Non hover
• Are you expecting the user to make discoveries without signposts? (eg. Swipe without any indication that they can swipe) Don't make me think, Just in time education
• Are you hijacking the experience with scroll, with modals? Hijacking scroll, Bullshit overlays
• Are you embracing progressive enhancement for devices and browsers with less features? Progressive enhancement, Progressive enhancement, it's about the content, A plea for progressive enhancement
• Have you trapped visitors in iframe purgatory on tap gesture devices? Responsive iframe
• Have you trapped visitors in infinite scrolling hell? Why infinite scrolling sucks
• If you use pagination, do you allow users to view all? Users' pagination preferences and 'View all'
• How have you determined what browsers and devices you've optimized for and what browsers and devices you simply support? Support Vs. Optimization
• If you're making a product, how are users learning to use the product? User onboarding - lessons from popular web apps
• Give your users smart work Don't give your users shit work

##6. Easy Forms & Form controls

• Select tags: the UI of last resort Burn your select tags
• Are the requirements clear, and have you removed any unnecessary requirements? What impacts web form conversion Video: Increase form conversion
• Reduced the number of fields? Is all the data you’re making them input really necessary? Case Study: Fewer input fields increases conversion
• Are your errors clear and in non-programmer language?
• Do you actually expect people to be able to use Captcha on a phone?
• Have inline validation? Realtime feedback? Inline validation in web forms
• Are you making use of the number pad on smaller phone style portable devices? Better numerical input for mobile forms
• Are you making passwords hidden or visible for smaller devices? Mobile design details: hide/show passwords
• How are you handling select boxes with massive amounts of options?
• If you have a number stepper (input range), is it the standard up down that’s difficult to tap?

##7. Structuring your stylesheets for scale and change

• Base, Element, Modifier What is BEM?
• Getting your head around BEM Mind BEMding - getting your head 'round BEM Syntax
• Scalable and Modular Architecture for CSS [SMACSS] (http://smacss.com/)
• Combining SMACSS and Sass How to scale and maintain legacy CSS with Sass and SMACSS
• Object oriented CSS [OOCSS] (http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss-2/)
• Multilayer CSS MCSS
• An approach using Attribute Modules AMCSS
• Discussion on the different CSS Architecture methodologies CSS Strategy
• Combining OOCSS with Sass [OOCSS + Sass = The best way to CSS] (http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/)
• A tool to measure your CSS reuse CSS Stats

##8. Typography - Establishing tone and making it readable

• Baseline Grids and the web
• The Psychology of fonts What's in a font, Effects of typography on reader mood and productivity
• The value of typography on the web - The web is 95% typography
• Can you read the type clearly? I'm sick of your tiny, tiny type
• Have you checked if that system font you're using will actually display on other devices and platforms? I'm looking at you Helvetica Neue Tinytype - a compatibility table showing the available default system fonts across different mobie platforms
• On larger screens is your line length limited to (roughly) 75 chars? The Elements of Typographic Style
• Some quick wins for better typography Run ragged
• Is the type size an equivalent of 15-25px? Butterick's Practical Typography Summary of key rules
• Understanding the mood of a typeface A discussion on Quora on how one assesses the mood of a typeface
• Are you creating contrast between different typographic elements? (headlines, long form copy, lists etc) Contrast through scale
• Are your font-sizes and line-heights em/rem based? [Why Ems] (http://css-tricks.com/why-ems/)
• Considered screen distances? Responsive typography: the basics
• Did you look at how the font family rendered in different browser and devices?
• Does the type marry with the content it communicates? Show and tell: a practical guide to choosing type
• Need a better understanding of what typography is and why it's valuable? [Typography is how text works] (http://practice.typekit.com/lesson/typography-is-how-text-looks/)
• Understanding responsive web typography Advanced web typography: Responsive web typography
• On proportions and rhythm in responsive design A more modern scale for web typography
• Selecting type with the appropriate tone, a helping guide Type finder
• Some pre-selected type pairings as example Just my type
• An argument to why you might want to leave the base font size alone How we learned to leave the body font size alone
• Some typography basics to consider A pocket guide to master every day's typographic adventures

##9. Embracing viewport flexibility

• Media Queries Level 4 Interaction Features and their potential (for incorrect assumptions)
• Gone beyond the old Phone/Tablet/Desktop mentality? Responsive web design: missing the point, Screen Sizes, In tablets, smaller is bigger, The shifting tablet market
• How does your site behave ‘between’ the media queries? 7 Habits of highly effective media queries, The trouble with android
• Are your media queries Em-based? [http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/](The ems have it - proportional media queries)
• Not relying on screen.width? Screen.width is useless
• Have you considered using grids for your layout? On responsive layouts and grids, Five simple steps to designing grid systems
• About embracing the future Future Friendly
• Have you let concepts of ‘the fold’ rest in the historical irrelevance it deserves? (AKA the fold for what screen?) Why the fold is a myth, Life below 600, UX Myth: people don't scroll, As the page scrolls, Scrolling is easier than clicking
• If you used window.MatchMedia at all, did you consider fallback for Windows phones? (or use a polyfill)? MatchMedia.js polyfill
• Considered how the site is viewed in embedded browsers (such as Facebook/Twitter on handsets) Embedded mobile browser use
• Is it technically responsive? Defining responsiveness, Responsive web design
• Are your breakpoints between CSS and MatchMedia out of control? [A solution to dealing with breakpoints by defining breakpoints in the meta tag] (https://github.com/benschwarz/metaquery)
• Vertical media queries and wide sites

##10. Understanding flexible media

• Large banner images with text Responsive hero images
• Responsive Images 101 Part1 - Definitions
• Part 2 - Image required
• Part 3 - Srcset display density
• Part 4 - Srcset width descriptors
• Part 5 - Sizes
• When to use Picture, sizes, srcset Don't use picture most of the time
• A detailed look at Srcset and sizes srcset and sizes
• Where we've come from on responsive images - this is now dated) The state of responsive images
• Have you got a responsive image solution? Does it display an image with JS turned off? PictureFill.js polyfill
• Do you have a lazy load solution for larger pages with lots of images or data that’s not immediately needed? Echo.js, simple Javascript lazy loading solution
• Have you used SVGs (with PNG fallback) or Webfonts where you can?
• If you've used Icon fonts, are you aware of potential issues with compatibility mode IE8? Icon fonts, unicode ranges, and IE8's compatibility mode
• An alternative to icon fonts is to use SVG as template SVG Icons FTW
• Have you sprited to reduce HTTP requests? CSS Sprites
• Have you compressed all of your PNGs and JPGs? Grunt imagemin, TinyPNG
• Are you serving different sized images to different devices? Responsive images
• How are you dealing with Retina devices? Compressive images
• Maybe combining with a server side solution might help? Adaptive images
• How are you dealing with video, both in scale and bandwidth? Fitvid.js
• How are you dealing with maps? Responsive maps, Adaptive maps

##11. Avoid frustrating people: performance

• More Weight doesn't mean more wait
• Inlining Critical CSS for first time visits
• Critical CSS and performance
• How we make RWD sites load fast as heck
• Have you set a performance budget? Setting a performance budget
• Considered page load time and how it affects your visitors? Loading time
• Have you minimised HTTP requests to free up memory? Google best practices
• Have you minimised the repaints and reflows? Repaints and reflows, manipulating the DOM responsibly
• 'RWD is bad for performance' is good for performance
• RWD Bloat Part 1
• How many kb (or meg) are people downloading on portable devices? is it reasonable to have them download that much per page? How to lose weight in the browser, Responsive design, & web page sizes
• Did you order non blocking resources first? did you use async on the JS? Script loading
• Do you really need a framework for that thing or can you just use pure CSS or pure JS? You might not need jQuery, You might need jQuery
• If you’ve put the media queries in elements (a technique seen more with Sass/LESS) have you used a method to reorganise media queries to reduce code bloat? Sass and media queries, Grunt combine media queries, Grunt uncss
• Are you minifying the CSS/JS? Are you concatenating multiple files into single files?
• Are you using conditional loading? Conditional loading
• Do you have a method to test the connection speed? Using Javascript to estimate connection speed
• Did you gzip? Active Gzip compression
• Did you put your resources on CDNs where relevant?
• Did you run a bandwidth restriction tool to test how the site loads at different bandwidths? Charles Proxy, Slowy app
• Run tests on mobitest? or something like it? Akamai mobile test
• Have you destroyed social button sleaze? or come up with a solution to replace social button sleaze with just links? Sweep the sleaze, Social count by the filament group
• Considered not using Wordpress/Drupal/whatever and switching to a Static site generator? Jekyll
• Are you loading 3rd party content asynchronously? How to lose weight in the browser - load 3rd party content asynchronously
• Understanding CSS Performance CSS Performance revisited: selectors, bloat and expensive styles

##12. Bringing the design alive - Kinetic / Animation

• Did you use animation to provide context to the interface? Transitional interfaces Improve the payment experience with animations Meaningful Transitions
• UI Animation and UX: A not-so-secret friendship
• Web animation at work
• Does the easing and timing match the personality of the interface? Motion Ui Principles
• A primer on what animation properties perform the best A tale of animation performance
• Rendering performance JankFree
• A visual reference of animatable properties Animatable - One property, two values, endless possibilities
• A collection of animated interactions Useyourinterface
• A Dribbble search on interaction as a source of inspiration Dribbble

##13. Testing for multiple devices and browsers

• How to start your own open device lab - Starting an open device lab without breaking the bank
• Getting access to devices on a shoe string - Test in real devices without breaking the bank
• Find out if you have an open device lab near you - Open device lab
• Making a portable open device lab Open device lab in a suitcase
• An application for testing a cross multiple browsers and devices - BrowserStack

##14. Deliverables for clients and teams

###A. Client deliverables

• The post PSD era
• Style prototypes
• Element collages
• Style tiles
• Responsive deliverables
• Atomic design

###B. Team deliverables

• A guide for writing content in the right voice & tone [Voice and Tone: Mailchimp] (http://voiceandtone.com/)
• An example pattern library - A List apart pattern library