└── README.md /README.md: -------------------------------------------------------------------------------- 1 | Websites for non-jerks 2 | ======================= 3 | 4 | v0.48a - This guide will eventually be made into a website. 5 | 6 | A guide for friendly websites (accessible, performant, progressively enhanced, and portable device happy). 7 | 8 | The project aim is to have happier, educated teams and better quality websites and apps. 9 | 10 | 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. 11 | 12 | 13 | ##1. Strategies for early project 14 | 15 | - Making sure your values align with the client - [Prequalifying clients](http://danielmall.com/articles/prequalifying-clients/) 16 | - All about better project kick off meetings - [Kickass kickoff meetings](http://alistapart.com/article/kick-ass-kickoff-meetings) 17 | - [Better stakeholder interviews](http://cognition.happycog.com/article/better-stakeholder-interviews) 18 | - [A stakeholder interview checklist](http://boxesandarrows.com/a-stakeholder-interview-checklist/) 19 | - Giving clients words and understanding to express their thoughts - [Collaborative moodboards](http://markboulton.co.uk/journal/collaborativemoodboards) 20 | - Clarifying aesthetic preferences early -[The 20 second 'gut' test](http://goodkickoffmeetings.com/2010/04/the-20-second-gut-test/) 21 | - Instead of focusing on what a site should look like, focus on what a site should feel like - [A Visual inventory](http://danielmall.com/articles/visual-inventory/) 22 | - Better understanding client and business priorities - [The priority & feasability plot](http://goodkickoffmeetings.com/2010/04/priority-feasibility-plot/) 23 | - A Group process for establishing priorities [The KJ Technique](http://www.uie.com/articles/kj_technique/) 24 | - Setting the tone and personality of the brand - [Design personas](http://aarronwalter.com/design-personas/) 25 | - A great branding tool - [The Brand Deck](https://www.kickstarter.com/projects/simplescott/the-brand-deck) 26 | - Better interaction design - [Get mental notes](http://getmentalnotes.com/) 27 | - Useful questions for project and client [One size fits none](http://cognition.happycog.com/article/one-size-fits-none) 28 | - Set your goals early so you can get better feedback [Getting better feedback](http://muledesign.com/2010/12/giving-better-design-feedback/) 29 | - Establishing goals for feedback [How to run a design critique](http://scottberkun.com/essays/23-how-to-run-a-design-critique/) 30 | - Need to refactor? [Interface inventory](http://bradfrost.com/blog/post/interface-inventory/) 31 | 32 | ##2. Better design decisions 33 | 34 | - Identify the intent behind design decisions - [Pull the trigger on design decisions](http://zurb.com/triggers) 35 | - A quick primer on some behavioural psychology behind design - [Brain gems for decision makers](http://coglode.com/) 36 | - Cognitive biases and fallacies in psychology - [You are not so smart](http://youarenotsosmart.com/2010/06/23/confirmation-bias/) 37 | - A visual look at some of the cognitive biases we have [Cognitive biases - a visual study guide](http://www.scribd.com/doc/30548590/Cognitive-Biases-A-Visual-Study-Guide) 38 | 39 | 40 | ##3. Inclusive by design 41 | - [A (Rough) Manifesto for Accessible User Experience](https://medium.com/@accessibleux/rough-manifesto-for-accessible-user-experience-10a3ea34a3d6) - A philosophy of Accessible user experience built by the community 42 | - [Accessibility Wins](http://a11ywins.tumblr.com/) - Marcy Sutton's Positive Accessibility examples 43 | - [UX accessibility with aria label](https://dev.opera.com/articles/ux-accessibility-aria-label/) 44 | - [Reframing accessibility for the web](http://alistapart.com/article/reframing-accessibility-for-the-web) 45 | - [Aria Examples](http://heydonworks.com/practical_aria_examples/) - Some practical ARIA examples to enhance your application accessibility 46 | - ARIA website boilerplate [Aria Bones](http://ariabones.com/) 47 | - [An alphabet of Accessibility issues](https://the-pastry-box-project.net/anne-gibson/2014-July-31) 48 | - [Why bother with accessibility?](http://24ways.org/2013/why-bother-with-accessibility/) 49 | - Structured your markup well and in a way that makes sense? [Semantic structure and why it's important](http://webaim.org/techniques/semanticstructure/) 50 | - Considered contrast and colour blindness? [Colour blindness and contrast](http://www.visionaustralia.org/digital-access-cca) 51 | - How's your tab key going? unplug your mouse, use the site. [On basic accessibility testing](http://24ways.org/2013/coding-towards-accessibility/), [Designing for easy interaction](http://alistapart.com/article/designing-for-easy-interaction) 52 | - Have you tested in Wave? (and are aware that this will only take you so far in acessibility) [Wave accessibility tester](http://wave.webaim.org/) 53 | - Tested with voice control? [Apple voiceover](http://www.apple.com/au/accessibility/osx/voiceover/), [NVDA for FireFox](http://www.mozilla.org/en-US/grants/nvda.html), [JAWS](http://www.freedomscientific.com/products/fs/jaws-product-page.asp), [ChromeVox](http://www.chromevox.com/) 54 | - Have you used WAI-Aria landmark roles correctly? [Using WAI-Aria landmark roles](http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/) 55 | - [Designing apps for the visually impaired](http://realmacsoftware.com/blog/designing-apps-for-the-visually-impaired) 56 | - Be careful what you do with labels [Labels in inputs might not be such a good idea](http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/) 57 | - How are you communicating the current page? [The accessible current page link conundrum](http://www.heydonworks.com/article/the-accessible-current-page-link-conundrum) 58 | - No one needs a carousel, but if you ignore me, here's some instructions on getting them to work accessibly [Carousels and aria tabs](http://www.webaxe.org/carousels-and-aria-tabs) 59 | - Since very few people understand the accessibility guidelines fully, the BBC have provided us with a simplified version [Best practice accessibility guidelines](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/) 60 | - [Accessibility lawsuits in america](http://www.accessibilityoz.com/2015/03/accessibility-lawsuits-in-america/) 61 | 62 | 63 | ##4. Thinking about content first 64 | 65 | - Emphasize the content [Interesting facts make web pages compelling](http://www.nngroup.com/articles/write-interesting-facts/) 66 | - Chunk content to allow for easier skim reading [Don't let paper paradigms drive your digital strategy](http://blogs.hbr.org/2013/06/dont-let-paper-paradigms-drive/) 67 | - High quality writing [Website reading](http://www.nngroup.com/articles/website-reading/), [Blah-blah text - keep,cut or kill](http://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/) 68 | - Only include what's important [Minimize cognitive load](http://www.nngroup.com/articles/minimize-cognitive-load/) 69 | - The hierarchy of important information [Content priority guide](http://seesparkbox.com/foundry/content_priority_guide) 70 | - Hiding content isn't always a great idea [Content parity](http://gomakethings.com/content-parity-on-the-web/), [State of mobile web sources](http://karenmcgrane.com/2013/06/13/state-of-the-mobile-web-sources/) 71 | - Consider avoiding carousels [Auto-Forwarding Carousels annoy users and Reduce visibility](http://www.nngroup.com/articles/auto-forwarding/), [Three ideas that convert better than a carousel](http://econsultancy.com/au/blog/62715-three-ideas-that-convert-better-than-a-standard-carousel), [Carousel interaction stats (updated)](http://weedygarden.net/2013/07/carousel-interaction-stats/), [Carousels](http://bradfrostweb.com/blog/post/carousels/), [Designing effective carousels](http://www.nngroup.com/articles/designing-effective-carousels/) 72 | - Have you considered how your tables will work responsively? [Picking a responsive tables solution](http://blog.cloudfour.com/picking-responsive-tables-solution/) 73 | - Avoiding the "crowbar" scenario [The content quandry](http://www.webcontentstrategy.com.au/the-content-quandary-when-the-words-wont-fit/) 74 | - Some example content snippets to help avoid lorem ipsum [Content snippets - specific copy examples](http://www.contentsnippets.com/) 75 | 76 | ##5. Making things more usable 77 | 78 | - Understanding device inputs [Touch/pointer events test results](https://patrickhlauke.github.io/touch/tests/results/) 79 | - Can you perform the main tasks of a site on any device? [Impact of responsive designs](http://www.lukew.com/ff/entry.asp?1691) 80 | - Are you making assumptions about portable device usage? [When and where are people using mobile devices](http://www.lukew.com/ff/entry.asp?1263) 81 | - Are the button hit areas large enough (min 44px) for a finger/thumb? [Apple's guidelines](http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1), [Windows guidelines](http://go.microsoft.com/?linkid=9713252), [Nokia's Guidlines](http://library.developer.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF.html) 82 | - Have you got feature detection? Can your site/app tell the difference between a click and a tap? a swipe? [Modernizr](http://modernizr.com/), [Modernizr server](https://github.com/jamesgpearce/modernizr-server) 83 | - Are you making the visitor wait 300ms for a tap gesture? [Avoiding the 300ms click delay](http://timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly/) 84 | - Understanding feature support [CanIuse](http://caniuse.com/) 85 | - Avoid unicode for 'hamburger' menus? [Unicode hamburger does not work](https://twitter.com/davatron5000/status/341646818926530560) 86 | - Beware of fixed position headers on android devices [Fixed position](http://bradfrostweb.com/blog/mobile/fixed-position/), [Mobile web problems](http://bradfrostweb.com/blog/post/mobile-web-problems/) 87 | - How are you dealing with complex navigation? If you have a massively complex site structure have you provided in site search? [Responsive navigation patterns](http://bradfrostweb.com/blog/web/responsive-nav-patterns/) 88 | - Have you designed with thumb flow in mind? [Designing for thumb flow](http://www.lukew.com/ff/entry.asp?1734) 89 | - Are you relying on hover for anything? [Non hover](http://trentwalton.com/2010/07/05/non-hover/) 90 | - Are you expecting the user to make discoveries without signposts? (eg. Swipe without any indication that they can swipe) [Don't make me think](http://www.sensible.com/dmmt.html), [Just in time education](http://www.lukew.com/ff/entry.asp?1786) 91 | - Are you hijacking the experience with scroll, with modals? [Hijacking scroll](http://trentwalton.com/2013/10/23/scroll-hijacking/), [Bullshit overlays](http://bradfrostweb.com/blog/post/bullshit-overlays/) 92 | - Are you embracing progressive enhancement for devices and browsers with less features? [Progressive enhancement](http://adactio.com/journal/1700/), [Progressive enhancement, it's about the content](http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content), [A plea for progressive enhancement](http://stephanierieger.com/a-plea-for-progressive-enhancement/) 93 | - Have you trapped visitors in iframe purgatory on tap gesture devices? [Responsive iframe](http://npr.github.io/responsiveiframe/) 94 | - Have you trapped visitors in infinite scrolling hell? [Why infinite scrolling sucks](http://frontand.de/why-infinite-scrolling-sucks/) 95 | - If you use pagination, do you allow users to view all? [Users' pagination preferences and 'View all'](http://www.nngroup.com/articles/item-list-view-all/) 96 | - How have you determined what browsers and devices you've optimized for and what browsers and devices you simply support? [Support Vs. Optimization](http://bradfrostweb.com/blog/mobile/support-vs-optimization/) 97 | - If you're making a product, how are users learning to use the product? [User onboarding - lessons from popular web apps](http://www.useronboard.com/) 98 | - Give your users smart work [Don't give your users shit work](http://zachholman.com/posts/shit-work/) 99 | 100 | ##6. Easy Forms & Form controls 101 | 102 | - Select tags: the UI of last resort [Burn your select tags](https://youtu.be/CUkMCQR4TpY) 103 | - Are the requirements clear, and have you removed any unnecessary requirements? [What impacts web form conversion](http://www.lukew.com/ff/entry.asp?1416) [Video: Increase form conversion](http://www.youtube.com/watch?v=ulJwW6zfR_o) 104 | - Reduced the number of fields? Is all the data you’re making them input really necessary? [Case Study: Fewer input fields increases conversion](http://www.lukew.com/ff/entry.asp?910) 105 | - Are your errors clear and in non-programmer language? 106 | - Do you actually expect people to be able to use Captcha on a phone? 107 | - Have inline validation? Realtime feedback? [Inline validation in web forms](http://alistapart.com/article/inline-validation-in-web-forms) 108 | - Are you making use of the number pad on smaller phone style portable devices? [Better numerical input for mobile forms](http://bradfrostweb.com/blog/mobile/better-numerical-inputs-for-mobile-forms/) 109 | - Are you making passwords hidden or visible for smaller devices? [Mobile design details: hide/show passwords](http://www.lukew.com/ff/entry.asp?1653=) 110 | - How are you handling select boxes with massive amounts of options? 111 | - If you have a number stepper (input range), is it the standard up down that’s difficult to tap? 112 | 113 | ##7. Structuring your stylesheets for scale and change 114 | 115 | - Base, Element, Modifier [What is BEM?](http://bem.info/method/definitions/) 116 | - Getting your head around BEM [Mind BEMding - getting your head 'round BEM Syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) 117 | - Scalable and Modular Architecture for CSS [SMACSS] (http://smacss.com/) 118 | - Combining SMACSS and Sass [How to scale and maintain legacy CSS with Sass and SMACSS](http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/) 119 | - Object oriented CSS [OOCSS] (http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss-2/) 120 | - Multilayer CSS [MCSS](http://operatino.github.io/MCSS/en/) 121 | - An approach using Attribute Modules [AMCSS](http://glenmaddern.com/articles/introducing-am-css) 122 | - Discussion on the different CSS Architecture methodologies [CSS Strategy](http://snugug.com/musings/css-strategy) 123 | - Combining OOCSS with Sass [OOCSS + Sass = The best way to CSS] (http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/) 124 | - A tool to measure your CSS reuse [CSS Stats](http://www.cssstats.com/#/) 125 | 126 | ##8. Typography - Establishing tone and making it readable 127 | 128 | - [Baseline Grids and the web](http://jasonsantamaria.com/articles/baseline-grids-on-the-web) 129 | - The Psychology of fonts [What's in a font](http://www.psychologyinaction.org/2011/04/21/whats-in-a-font/), [Effects of typography on reader mood and productivity](http://usabilitypost.com/2012/11/23/effects-of-typography-on-reader-mood-and-productivity/) 130 | - The value of typography on the web - [The web is 95% typography](http://ia.net/blog/the-web-is-all-about-typography-period/) 131 | - Can you read the type clearly? [I'm sick of your tiny, tiny type](http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-tiny-tiny-type) 132 | - 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](http://www.jordanm.co.uk/tinytype) 133 | - On larger screens is your line length limited to (roughly) 75 chars? [The Elements of Typographic Style](http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063) 134 | - Some quick wins for better typography [Run ragged](http://24ways.org/2013/run-ragged/) 135 | - Is the type size an equivalent of 15-25px? [Butterick's Practical Typography Summary of key rules](http://practicaltypography.com/summary-of-key-rules.html) 136 | - Understanding the mood of a typeface [A discussion on Quora on how one assesses the mood of a typeface](http://www.quora.com/Typography/How-does-one-assess-the-mood-of-a-typeface) 137 | - Are you creating contrast between different typographic elements? (headlines, long form copy, lists etc) [Contrast through scale](http://typecast.com/blog/contrast-through-scale) 138 | - Are your font-sizes and line-heights em/rem based? [Why Ems] (http://css-tricks.com/why-ems/) 139 | - Considered screen distances? [Responsive typography: the basics](http://ia.net/blog/responsive-typography-the-basics/) 140 | - Did you look at how the font family rendered in different browser and devices? 141 | - Does the type marry with the content it communicates? [Show and tell: a practical guide to choosing type](http://typecast.com/blog/show-and-tell-a-practical-look-at-choosing-type) 142 | - 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/) 143 | - Understanding responsive web typography [Advanced web typography: Responsive web typography](http://elliotjaystocks.com/blog/responsive-web-typography/) 144 | - On proportions and rhythm in responsive design [A more modern scale for web typography](http://typecast.com/blog/a-more-modern-scale-for-web-typography) 145 | - Selecting type with the appropriate tone, a helping guide [Type finder](http://www.type-finder.com/) 146 | - Some pre-selected type pairings as example [Just my type](http://justmytype.co/) 147 | - An argument to why you might want to leave the base font size alone [How we learned to leave the body font size alone](http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/) 148 | - Some typography basics to consider [A pocket guide to master every day's typographic adventures](http://www.typogui.de/) 149 | 150 | ##9. Embracing viewport flexibility 151 | 152 | - Media Queries Level 4 [Interaction Features and their potential (for incorrect assumptions)](https://dev.opera.com/articles/media-features/) 153 | - Gone beyond the old Phone/Tablet/Desktop mentality? [Responsive web design: missing the point](http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/), [Screen Sizes](http://screensiz.es/phone), [In tablets, smaller is bigger](http://www.lukew.com/ff/entry.asp?1695), [The shifting tablet market](http://www.lukew.com/ff/entry.asp?1692) 154 | - How does your site behave ‘between’ the media queries? [7 Habits of highly effective media queries](http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#content), [The trouble with android](http://stephanierieger.com/the-trouble-with-android/) 155 | - 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) 156 | - Not relying on screen.width? [Screen.width is useless](http://www.quirksmode.org/blog/archives/2013/11/screenwidth_is.html) 157 | - Have you considered using grids for your layout? [On responsive layouts and grids](http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/), [Five simple steps to designing grid systems](http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface) 158 | - About embracing the future [Future Friendly](http://futurefriendlyweb.com/) 159 | - 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](http://blog.kissmetrics.com/why-the-fold-is-a-myth/), [Life below 600](http://iampaddy.com/lifebelow600/), [UX Myth: people don't scroll](http://uxmyths.com/post/654047943/myth-people-dont-scroll), [As the page scrolls](http://www.uie.com/articles/page_scrolling), [Scrolling is easier than clicking](http://bokardo.com/archives/scrolling-easier-clicking/) 160 | - If you used [window.MatchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia) at all, did you consider fallback for Windows phones? (or use a polyfill)? [MatchMedia.js polyfill](https://github.com/paulirish/matchMedia.js/) 161 | - Considered how the site is viewed in embedded browsers (such as Facebook/Twitter on handsets) [Embedded mobile browser use](http://www.lukew.com/ff/entry.asp?1801) 162 | - Is it technically responsive? [Defining responsiveness](http://blog.cloudfour.com/author/jason-grigsby/), [Responsive web design](http://alistapart.com/article/responsive-web-design/) 163 | - 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) 164 | - [Vertical media queries and wide sites](http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/) 165 | 166 | ##10. Understanding flexible media 167 | 168 | - Large banner images with text [Responsive hero images](http://blog.cloudfour.com/responsive-hero-images/) 169 | - Responsive Images 101 [Part1 - Definitions](http://blog.cloudfour.com/responsive-images-101-definitions/) 170 | - [Part 2 - Image required](http://blog.cloudfour.com/responsive-images-101-part-2-img-required/) 171 | - [Part 3 - Srcset display density](http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/) 172 | - [Part 4 - Srcset width descriptors](http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/) 173 | - [Part 5 - Sizes](http://blog.cloudfour.com/responsive-images-101-part-5-sizes/) 174 | - When to use Picture, sizes, srcset [Don't use picture most of the time](http://blog.cloudfour.com/dont-use-picture-most-of-the-time/) 175 | - A detailed look at Srcset and sizes [srcset and sizes](http://ericportis.com/posts/2014/srcset-sizes/) 176 | - Where we've come from on responsive images - this is now dated) [The state of responsive images](http://html5doctor.com/responsive-images-end-of-year-report/) 177 | - Have you got a responsive image solution? Does it display an image with JS turned off? [PictureFill.js polyfill](https://github.com/scottjehl/picturefill) 178 | - 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](http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/) 179 | - Have you used SVGs (with PNG fallback) or Webfonts where you can? 180 | - 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](http://clearleft.com/thinks/iconfontsunicoderangesandie8scompatibilitymode/) 181 | - An alternative to icon fonts is to use SVG as template [SVG Icons FTW](http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/) 182 | - Have you sprited to reduce HTTP requests? [CSS Sprites](http://css-tricks.com/css-sprites/) 183 | - Have you compressed all of your PNGs and JPGs? [Grunt imagemin](https://github.com/gruntjs/grunt-contrib-imagemin), [TinyPNG](https://tinypng.com/) 184 | - Are you serving different sized images to different devices? [Responsive images](http://blog.cloudfour.com/responsive-imgs/) 185 | - How are you dealing with Retina devices? [Compressive images](http://filamentgroup.com/lab/rwd_img_compression/) 186 | - Maybe combining with a server side solution might help? [Adaptive images](http://adaptive-images.com/) 187 | - How are you dealing with video, both in scale and bandwidth? [Fitvid.js](http://fitvidsjs.com/) 188 | - How are you dealing with maps? [Responsive maps](http://trentwalton.com/2013/04/11/responsive-maps/), [Adaptive maps](http://bradfrostweb.com/blog/post/adaptive-maps/) 189 | 190 | ##11. Avoid frustrating people: performance 191 | 192 | - [More Weight doesn't mean more wait](http://www.filamentgroup.com/lab/weight-wait.html) 193 | - [Inlining Critical CSS for first time visits](https://adactio.com/journal/8504) 194 | - [Critical CSS and performance](http://dbushell.com/2015/02/19/critical-css-and-performance/) 195 | - [How we make RWD sites load fast as heck](http://filamentgroup.com/lab/performance-rwd.html) 196 | - Have you set a performance budget? [Setting a performance budget](http://timkadlec.com/2013/01/setting-a-performance-budget/) 197 | - Considered page load time and how it affects your visitors? [Loading time](http://blog.kissmetrics.com/loading-time/) 198 | - Have you minimised HTTP requests to free up memory? [Google best practices](https://developers.google.com/speed/docs/best-practices/request) 199 | - Have you minimised the repaints and reflows? [Repaints and reflows, manipulating the DOM responsibly](http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom-responsibly) 200 | - ['RWD is bad for performance' is good for performance](http://timkadlec.com/2014/07/rwd-is-bad-for-performance-is-good-for-performance/) 201 | - [RWD Bloat Part 1](http://daverupert.com/2014/07/rwd-bloat/) 202 | - 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](http://browserdiet.com/), [Responsive design, & web page sizes](http://www.lukew.com/ff/entry.asp?1681) 203 | - Did you order non blocking resources first? did you use async on the JS? [Script loading](http://www.html5rocks.com/en/tutorials/speed/script-loading/) 204 | - Do you really need a framework for that thing or can you just use pure CSS or pure JS? [You might not need jQuery](http://youmightnotneedjquery.com/), [You might need jQuery](http://cognition.happycog.com/article/you-might-need-jquery) 205 | - 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](http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32), [Grunt combine media queries](https://npmjs.org/package/grunt-combine-media-queries), [Grunt uncss](https://github.com/addyosmani/grunt-uncss) 206 | - Are you minifying the CSS/JS? Are you concatenating multiple files into single files? 207 | - Are you using conditional loading? [Conditional loading](http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#conditional-loading) 208 | - Do you have a method to test the connection speed? [Using Javascript to estimate connection speed](http://decadecity.net/blog/2013/05/08/using-javascript-to-estimate-connection-speed) 209 | - Did you gzip? [Active Gzip compression](http://css-tricks.com/snippets/htaccess/active-gzip-compression/) 210 | - Did you put your resources on CDNs where relevant? 211 | - Did you run a bandwidth restriction tool to test how the site loads at different bandwidths? [Charles Proxy](http://www.charlesproxy.com/), [Slowy app](http://slowyapp.com/) 212 | - Run tests on mobitest? or something like it? [Akamai mobile test](http://mobitest.akamai.com/m/index.cgi) 213 | - Have you destroyed social button sleaze? or come up with a solution to replace social button sleaze with just links? [Sweep the sleaze](http://ia.net/blog/sweep-the-sleaze/), [Social count by the filament group](http://filamentgroup.com/lab/socialcount/) 214 | - Considered not using Wordpress/Drupal/whatever and switching to a Static site generator? [Jekyll](http://jekyllrb.com/) 215 | - Are you loading 3rd party content asynchronously? [How to lose weight in the browser - load 3rd party content asynchronously](http://browserdiet.com/#3rd-party-async) 216 | - Understanding CSS Performance [CSS Performance revisited: selectors, bloat and expensive styles](http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/) 217 | 218 | ##12. Bringing the design alive - Kinetic / Animation 219 | 220 | - Did you use animation to provide context to the interface? [Transitional interfaces](https://medium.com/design-ux/926eb80d64e3) [Improve the payment experience with animations](https://medium.com/p/3d1b0a9b810e) [Meaningful Transitions](http://www.ui-transitions.com/#home) 221 | - [UI Animation and UX: A not-so-secret friendship](http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship) 222 | - [Web animation at work](http://alistapart.com/article/web-animation-at-work) 223 | - Does the easing and timing match the personality of the interface? [Motion Ui Principles](http://www.beyondkinetic.com/motion-ui-design-principles) 224 | - A primer on what animation properties perform the best [A tale of animation performance](http://css-tricks.com/tale-of-animation-performance/) 225 | - Rendering performance [JankFree](http://jankfree.org/) 226 | - A visual reference of animatable properties [Animatable - One property, two values, endless possibilities](http://leaverou.github.io/animatable/) 227 | - A collection of animated interactions [Useyourinterface](http://useyourinterface.com/) 228 | - A Dribbble search on interaction as a source of inspiration [Dribbble](https://dribbble.com/search?q=interaction) 229 | 230 | ##13. Testing for multiple devices and browsers 231 | 232 | - How to start your own open device lab - [Starting an open device lab without breaking the bank](https://medium.com/product-design/a3ad4da66c02) 233 | - Getting access to devices on a shoe string - [Test in real devices without breaking the bank](http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/) 234 | - Find out if you have an open device lab near you - [Open device lab](http://opendevicelab.com/) 235 | - Making a portable open device lab [Open device lab in a suitcase](https://medium.com/p/122f87dac737) 236 | - An application for testing a cross multiple browsers and devices - [BrowserStack](http://www.browserstack.com/start) 237 | 238 | ##14. Deliverables for clients and teams 239 | 240 | ###A. Client deliverables 241 | 242 | - [The post PSD era](http://danielmall.com/articles/the-post-psd-era/) 243 | - [Style prototypes](http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype) 244 | - [Element collages](http://danielmall.com/articles/rif-element-collages/) 245 | - [Style tiles](http://styletil.es/) 246 | - [Responsive deliverables](http://daverupert.com/2013/04/responsive-deliverables/) 247 | - [Atomic design](http://bradfrostweb.com/blog/post/atomic-web-design/) 248 | 249 | ###B. Team deliverables 250 | 251 | - A guide for writing content in the right voice & tone [Voice and Tone: Mailchimp] (http://voiceandtone.com/) 252 | - An example pattern library - [A List apart pattern library](http://patterns.alistapart.com/) 253 | 254 | --------------------------------------------------------------------------------