All presentations: http://aneventapart.com/2011/sanfrancisco/slides/
Content First! – Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.
Good Design Begins With Content
http://www.readability.com/
Progressive Enhancement – Add Layers of Experience
http://easy-readers.net/books/adaptive-web-design/
Responsive Web Design
http://www.abookapart.com/products/responsive-web-design
http://designmodo.com/responsive-design-examples/
http://www.alistapart.com/articles/responsive-web-design/
http://10k.aneventapart.com/
http://futurefriend.ly
“Mobile First” Approach – Design for mobile first, then go up. Do we need all that crap?
With Great Power Comes Great Responsibility – Elliot Jay Stocks, author, Sexy Web Design
nizoapp.com
benthebodyguard.com
http://www.nikebetterworld.com/
awesome design inspiration: http://siteinspire.com/
Distraction of the ‘Real’
Am I using an effect that makes something on the page look real. If so, why?
It’s about considering the context.
Typography is (Almost) Everything
More fonts is not better
Learn from print design
http://8faces.com/
http://www.alistapart.com/articles/settingtypeontheweb
http://baselinecss.com/
Tim Brown: More Perfect Typography
Typecastapp.com
Working from the typography outwards. Good typography and layout is important. All the fancy stuff can be added later (shadows, border radius, glossy), it’s not as important.
ilovetypography.com/sayonara-2010
Use your powerful tools wisely.
HTML5 Design Principles – Jeremy Keith, author, HTML5 For Web Designers
all his resources and principles: principles.adactio.com
design principles: how
design goals: why
design patterns: what
rough consensus and running code – get it out, iterate
degrade gracefully – HTML5 form inputs is good example of this
rewards the newer browsers without hurting the older ones
being able to push the web forward without hurting the existing web
dark patterns – user interfaces designed to trick people
http://wiki.darkpatterns.org/Home
http://www.alistapart.com/articles/dark-patterns-deception-vs.-honesty-in-ui-design/
http://www.slideshare.net/harrybr/ux-brighton-dark-patterns
Mobile Web Design Moves – Luke Wroblewski, author, Web Form Design
mobile growth story
There are more smart phones than pcs.
mobile web usage is surpassing pc web usage (esp. email, twitter, facebook, yelp)
mobile web usage is higher than native app usage
prediction: mobile phone will overtake pcs as the most common way to access the web by 2013
84% of people say they use smart phones at home
80% during misc. times
74% waiting in lines
64% at work
what are they doing?
micro-tasking
local
bored
what are the constraints?
battery life, intermittent connection, small screen, limited time
mobile web design moves
core mobile behaviors:
lookup/find
explore/play
check in/status
edit/create
focus your design on optimizing for the activity
content first, navigation second
put the most important stuff (most visited content) on your mobile site, get rid of the rest. Get rid of it period.
Put navigation at the bottom of a content page, for them to “pivot and explore”. Top nav is just an anchor link to shoot to bottom of page. Get rid of chunky nav at the top, let them get right to the content.
On mobile, the bottom part of the screen is easier to access and navigate.
Use HTML5 forms to make data input as easy and error proof as possible
use input masks (hinting), autocorrect/autovalidate
use as few input fields as possible (only one field for phone, not 3)
use other ways to navigate (swipe to paginate, pull down to reveal, tap to save, etc.)
NUI – natural user interface
the content IS the UI
enable direct manipulation of content and objects
reduce distance between user and content
http://www.abookapart.com/products/mobile-first
Touch Gesture Reference Guide: lukew.com/touch
The Dimensions of a Good Experience – Alexa Andrzejewski, founder, Foodspotting
Taking lessons from urban design
what makes a user experience good?
does it leave an impression on the senses? Is it memorable?
How is the form a reflection of the values?
Use the language of design to tell the story you want to tell.
Have a clear sense of structure to orient the user
What is the #1 thing you want people to do on their first visit, (second, third). Reveal (unfold) experience based on what the user needs to do. this also helps people understand the purpose of the site.
Fit – design anticipates and assists user behaviors
What kinds of decisions are you asking users to make? Is it too many? too few? Are people paralyzed by choices?
Certainty – Give users feedback throughout their interaction. Make people feel safe and know what is happening, especially when they are giving out sensitive information.
The Responsive Designer’s Workflow – Ethan Marcotte, co-author, Designing With Web Standards 3rd Edition
What makes a design responsive?
Flexible/fluid grids
Flexible images and media
CSS media queries
Only valuable content – content first
Design across a set of user experiences
Make a comittment to your content and make it accessible regardless of context
Boston Globe – new responsive web site (he worked on it) bostonglobe.com
design is the method of putting form and content together. Design is a process, not the end result.
design and development have to work more together, for responsive web design. Ask more questions. Interactive design review (verify your work live, get prototyping early). Vet your assumptions of the static design. How well does the layout adapt? Does it still feel usable? Do any elements need additional design direction? (this is a process of moving back and forth between css/html and photoshop).
building for mobile first allows you to build a consensus early on about what content is really important.
fluid grid method:
target px / context px = result %
target is the pixel width of the column
context is the total value of the grid
633px / 960px = .659375%
.column {float:left;width:.659375%}
flexible image
img {max-width:100%}
screen size break points for media queries (there are a lot more than this, but these are common):
320px
480px
768px
900px
Since we can’t keep up with all the screen sizes, we should use responsive designs – flexible grid is the doing the heavy lifting. Media queries does fine tuning.