- stand up webpage test internally: https://sites.google.com/a/webpagetest.org/docs/private-instances
- docker image?
- convert AMI to an VMware image?
- need windows machines for agents
- sign up for thewebahead.net podcast - @jensimmons
- responsive design podcast - ethan marcotte and karen mcgrane
- mailtoself.com
- hipmunk.com - for travel
- "a dao of web design" - John Alsopp
- noise to noise ratio - https://www.flickr.com/photos/merlin/sets/72157622077100537/
- Responsive Process stuff
- A separate UX team slows down our ability to deliver because there is no quick iteration between design and build" - BBC Quote - Tom Maslen
- hand a bunch of people different devices and have them validate the prototype
- shipping quicker will let you get user feedback quicker
- FAIL QUICKLY
- have perspective - you could be doing service work
- great work + bad attitude = fire
- good attitudes usually move ahead
- politics trumps work
- first impressions are forever
- "Mr huffington" about humility
- your peers care about those things you're passionate about, others DONT
- "We have met the enemy, and he is us."
- sharing your work
- if you can't share it, "blog like no one's reading" - will help you present your ideas better. can only help even if nobody reads it.
- a list apart - rachel andrew - business problems for developers
- usually slow sites as a result of communication or understanding breakdown between design/business/developers
- set a performance budget at the beginning of a project
- be deliberate
- size based (no more than 400kb) or UX based (no more than X seconds to load)
- can use the budget to split things up by images/markup/css and use that to make intelligent decisions
- tell client - "performance is a marketable feature"
- setting these foundations provides room for talking points later without a lot of conflict.
- create a style guide
- eye tracking studies - people ignore sidebars. 10 years of training to do it.
- panes - appearance of different pages on the same page, usually by separating colors
- great example of vogue magazine layout. gorgeous. website - horrible. why? because of assumptions about what a web layout is.
- layout should serve the content
- css - shapes - circle. coming. in chrome. not in IE yet.
- media queries in css - like adding salt to your dinner
- css - column count - columns
- limited, will flow all the way down the page
- css regions may come which will enable splitting content up for heights
- min-height - "vh" - viewport height unit. allows you to fill up vertical space
- vw - vertical width
- used by ny times for "magazine covers" on web
- display: flex + margin: auto = centered!
- flexbox - css-tricks - a complete guide to flexbox
- css grid layout - use browser to do things like bootstrap without having to
worry about third party code
- only supported in IE now
- http://dowebsitesneedtolookexactlythesameineverybrowser.com - NO
- hardest part is changing our thinking not our css
- look outside the web for inspiration
- translate ideas (to the web), don't transfer them.
- kevin spacey speech about content vs. type of screen. pretty impressive.
- "The best interface is the one within reach"
- take the "web" out of Responsive Web Design - just think about one unified
experience
- this includes data syncing across devices
- facebook study: 40% of online users start on one device and finish on another
- consider web views for continuity: think twitter, slack, amazon apps
- respect mental models - what are people used to? metaphor of weird water dispenser on fridge.
- styling decisions are almost always based off of print decisions
- think about the meaning of content
- em is italics in print
- what is it in an audio interface? For instance in-car systems
- think about wearable displays
- true separation of content from form
- more important than ever
- WSIWYG is dead
- invented for laser printers @xerox
- the web is better than print!
- communicate to content creators what it means to separate content from styling
- pdf - "pretend piece of paper"
- loses meaning, not easy to search
- examples about cost of converting PDF's to real content - $320000 to convert about 2500 pdfs
- If you give an object a name based on is presentation you will limit its future. try to find a functional name.
- back end content components
- capital one example
- how? would like to see an example
- decoupled content on the backend presented different ways
- how is this different than having API's for things?
- pace layering - layers of human decision making. things on the outside move
faster than the inside
- http://blog.longnow.org/02015/01/27/stewart-brand-pace-layers-thinking-at-the-interval/
- content sits at the bottom of this
- author experience next
- then patterns
- then styles
- pando nat'l reserve in UT, one tree that looks like many
- My anxiety doesn't come from thinking about the future, but from trying to control it -Hugh Prather - Notes to myself
- An exercise of letting go of trying to control every aspect of the user experience
- nth-child (3n) = every 3rd element
- allows you to effectively build an infinite grid
- get rid of the grid in your markup
- be a little lazier
- disney animation example - animations weren't as technically good as competitors but he used simplicity to illustrate human stories.
- design a vocabulary for your team so you're following the same principles
- making content fit is the baseline - it should feel at home
- "In the beginner's mind there are many possibilies",
- In the beginner’s mind there are many possibilities, in the expert’s mind there are few.
- SHUNRYU SUZUKI “Zen Mind, Beginner’s Mind”
- responsive - designing simple to complex is really the easiest (laziest) way to do things
- HTML built upon ignoring elements which aren't standard. this was not an accident
- postel's law - be liberal in what you accept, be strict in what you return
- declarative - i want this - html/css - can be more forgiving
- imperative - do this then that - js - needs to throw errors, helps you debug steps
- XHTML2 - roundly rejected because of draconian error handling
- identify core functionality and use the simplest technology possible to implement it. from there, go nuts.
- think of css rules as suggestions rather than commands
- clarke, any sufficiently advanced technology is indistinguishable from magic
- after time magic becomes normal
- Don't forget about the simple things that are amazing
- "there is a horse in the apple store" - nobody's paying attention to a horse b/c they're obsessed with the gadgets
- "cool URI's don't change" - Tim Berners Lee
- space internet - leave people with a web that lasts that isn't brittle
- every dev at slack does 2 hours of support a week to keep them grounded
- tiny bootstraps for every client
- atoms - small parts, molecules getting bigger, organisms, templates, pages. going from abstract to concrete
- pattern lab - gives you a starting point for these things.
- ish - test at different viewport sizes - kinda cool - https://github.com/bradfrost/ish.
- style inventory - what are the different elements you have and their
variations? Are there a lot? There shouldn't be.
- building groundwork for a future style guide or pattern library
- developers should be like a prep chef -
- get the little things ready
- can assemble the peices together when you're ready
- can switch images/resolutions at different viewports
- always an img tag
- img-src = 160w - 160 w of your image saved on disk. true width of image.
- the browser prefetches images even before css (lookahead pre-parser)
- only knows the viewport size when downloading
- most likely the image closest to the viewport size is the right one
- javascript isn't even there when images are downloaded.
- sizes is a necessary compromise of separating style from content
- usually design for a user profile of the "ideal user" - calm and collected
- what about the people in crisis? good example of health care, automated mortgage payment
- when you say "edge case" you're pushing them off to the side. think about pushing them to the forefront
- if a person in crisis understands your design, the ideal user will have no trouble at all.
- during usability testing actually create cognitive dissonance by using blurs, transposing words, to see if your design holds up under stress.
- design is thankless - designing for crisis helps lessen the burden during stressful times
- "jank" - stutter when scrolling. etsy saw more favorites when it was removed.
- cell connections - overhead of making radio connections to a tower over and over again
- images make up vast majority of content on a page (from httparchiver.org)
- blurring jpegs makes them smaller, cropping can make them smaller
- don't use gifs ;)
- if you must, use "dithering" to improve color blending
- gifs algorithm is very good at removing horizontal redundancy not vertical
- use png-8 instead of gifs. good for images with few colors
- no restrictions on color palette
- WebP - lossless and lossy
- only supported in chrome, opera
- may be format of the future
- replace simple images with svg
- removes cacheability
- can make html file larger
- don't forget about sprites
- img srcset - let browser choose image based on size of viewport
- imageoptim - chooses lossless compression algorithm based on the image
- there are tools to automate these
- firefox 3d view - gives you nested depths of elements on a page. look for div-itis
- patterns in code will help developers reuse elements
- only import font weights you absolutely need
- optimize character subsetting
- use a mobile-first workflow with a performance budget
- make it easy for non-developers to make performant pages. AUTOMATE THINGS.
- need a culture of performance - everyone's job. the most difficult part
- have empathy for many types of users
Karen McGrane and Ethan Marcotte
- mobile use is growing. some industries get 90% of traffic from mobile devices.
- Diversity of devices. no longer just a phone and a tablet
- Can no longer assume a set of screen sizes
- We have lots of screen sizes, lots of pixel densities
- We have no idea what type of device a person is using
- "access to content any way I want it" - most important thing to consumers
- Google study: 90% of people start a task on one device then complete it on another
- Google: RWD is the recommended approach to creating websites
- there is a tendency to think that our industry to think of things as more disconnected than they are (pando forest example, many trees are one root system)
- architecture - starting to move towards more flexible designs instead of fixed ones
- "a contiual and constructive information exchange"
- responsive layout is flexible in nature and responds to change
- having principles is the foundation. principles don't change, process and details do
- first: define priority not layout
- responsive design won't fix your content problem
- performance is a content strategy problem - don't just shrink things
- don't download everything and hide it
- don't think about what goes in a container first, think about the content first
- content inventory: document in a quantitative way what you have, not subjective
- do a content audit - what can stay? what can go?
- a migration won't work for a responsive redesign
- REWRITE content
- no difference in how to write for the web
- instead of using units of measure use percentages
- target (px) / content (px) = result
- this will give you a percentage to use in your css
- put the decimals in your percentages!
- add in any padding - use those percentages
- then add media queries to do different things to make the design work at
different viewpoints
- use em's for media queries!
- images:
img { max-width: 100% }
- content choreography - think about how elements in front and around flow around an element.
- use breakpoints to "Defend your content"
- Ask: "What if someone doesn't browse the web like I do?"
- look at display: flex (flexbox) to reorder things
- check if browser supports flex using a little javascript
- design the priority not the layout
- Tools of the trade:
- progressive disclosure
- conditional loading
- rethinking the hierarchy (shift things around)
- look into ajax include pattern: https://github.com/filamentgroup/Ajax-Include-Pattern/
- consider that if changes are drastic enough to layout, you may need a server side solution
- good example of showing/hiding, classing ads with priority, using a little javascript to load the prioritized ads upon resize
- AppendAround - open sourcing of this https://github.com/filamentgroup/AppendAround
- compressive images
- make an image bigger at lower quality will look better when reduced with CSS
- the bigger views suffer
- we do not have a realiable means of detecting bandwidth
- responsive images
- default to serving smallest appropriate image
- use the
<picture>
element
- tables (!)
- start mobile and work from there
- can the table be replaced or changed at a certain breakpoint?
- visual design and interaction design need to be considered together, no longer separate
- "comping" out many different layouts doesn't scale
- "photoshop layouts are the best way to show you how your website will never look"
- you need questions more than answers
- A separate UX team slows down our ability to deliver because there is no quick iteration between design and build" - BBC Quote - Tom Maslen
- don't start with what the breakpoints would be. it will quickly become dated
- interactive verification sessions
- do any elements need additional design direction?
- FAIL QUICKLY
- treat graphic mockups as a "catalog of assumptions"
- hand a bunch of people different devices and have them validate the prototype
- shipping quicker will let you get user feedback quicker
- instead of thinking about functionality in terms of mobile/tablet/desktop think in terms of a matrix of features like input method, screen size, network speed, etc.
- build a device lab
- need to use a ground up approach, no a re-write or retrofit
- if you do a retrofit, you will ultimately do a ground up rewrite
- "do no harm" to the desktop if you do a retrofit
- beta site of a mobile site
- a beta will take longer and cost more. is it worth it?
- for a rewrite, consider how content is edited. make sure it's digital
- authors should be trained on using style sheets or markdown so that text doesn't need to be reformatted in different systems
- responsive is not a project, responsive is a permanent new way of working. Scott Kelton Jones, expedia