embracing uncertainty: learning to think responsively
DESCRIPTION
Presented to IxDA Austin on March 6, 2013. Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.TRANSCRIPT
Chad [email protected]
ResponsiveWeb Design
Embracing Uncertainty
Designing for More Screens
Without burning out.
or
Requisite RWD freakout photo
(Borrowed from David Blooman’s @dblooman Blog Post: http://mobiletestingfordummies.tumblr.com/post/
20056227958/testing)
Yes, there’s more to design.
Working harder can’t be the answer.
We’re just going to work differently.
Today
100:50
Definitions
Responsive
Flexible Grid
Media Queries
Fluid Images
Adaptive
Responsive Layout Device DetectionLocation Awareness
Server-side Magic
Bandwidth Awareness
Dynamic Images
Mobile Content
“RWD”A convenient short-hand for“one design, many devices”
“RWD”Generally refers to matters of layout.
“RWD”Not great for apps.
“RWD”Gets you really far in
serving lots of devices with not a lot of complexity.
This talk is (mostly) for designers.
Specifically,how does responsive influence your process?
TopicsThe current state of RWD
Resources you have now
Getting Started
Managing Your Design Process
You+ Writers+ Bosses+ Coders
Testing
Extra Credit
RWD is still changing.
“Nice responsive site.You’re doing it wrong.”
Train Your BrainDesignBlogs Books Videos
TwitterAccounts
SiteGalleries
Patten Libraries
It’s a real book: http://www.amazon.co.uk/NASA-
Space-Shuttle-Manual-Construction/
Knowing ➜ Doing
Biggest Challenge
Know-how
Organizational Will
The old days.
Define Design Develop Deploy
Now.
Define
Design Develop Deploy
Define
StartDesigning
(Where to)
?
Lock down some variables.
So you can do your job.
Start withone size.
So you can focus onthe important stuff.
Start withone size.
So you can focus onthe important stuff.
By the way
New products, like
Adobe’s Reflow are
trying to solve this with variable-canvas
design tools.
Why one size first?
That’s why.
Single-tasking.
What is a good dimension to start with?
Designing desktop first puts
off the hard decisions.
Picking an arbitrary size in the middle
is not relevant.
Picking an arbitrary size in the middle
is not relevant.
Sometimes, the hardware does matter.What does 600 pixels look like, really.
768.
It’s “hardware” relevant.
It’s close enough to 800.
It helps you establish your desktop style.
It’s tight enough to make you think ahead to phone.
768
About pixels.
When we design, we’re thinking about virtual pixels.
About pixels.“Real”Pixel
“Virtual”Retina Pixel
These aren’t your pixels.
Now youcan design.
%, please.Keep the “Flex” in
Flexible Grid.
Resist the urge to use fixed layouts.
Fixed layouts solve short term design problems,
but they add unsustainable complexity.
What are we designing?
Pages?Layouts?Widgets?
Breakpoints ≠ Layouts
Breakpoints are logic for your layouts.
Use breakpointssparingly.
There’s a pattern forming.
Sustainability.
Centralize control now.Struggle later.
Caution Words“Rollover” “We’ll fix
that with Javascript.”
“Add another breakpoint.”
“Pin” or “fixed position”
“Make it smaller” or “Limit word count”
“There’s no device for that case.”
What are we designing?
A layout of blocks.
Distributecontrol to blocks.
The grid.More than alignment.
Rows / Columns = Blocks
Blocks have their own responsive behavior, and they work together.
Don’t forget about floats. They are not on the grid, but responsive friendly.
What future are you making for yourself?Managing monolithic
pages.
Curating a system of blocks that just work.
What a block knows.A default layout behavior.
Any “family” block behaviors.
Any special device behaviors.
How to relate to other blocks.
If it might contain other special blocks.
PocketDeviceView
Laying out different states.
Mock up separate layouts for each major screen
Draft phone views in the margin of your layouts.
Lay out just one and sit very close to the coders.
Wireframe the phone, then mock up the desktop.*
Drew Clemens, Smashing Magazine. http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
How big do you letyour desktop get?
Depends on how much time you have. Giant layouts require special care too.
Do you need a“desktop” view at all?
Nike.com has one, fluid “big screen” layout.
You+ Writer
Create a semantic language that you and your writer can share:
HeadlinesSummaries
Rich Text BodyCall to Action
SidebarMerchandizing
Callouts...
Because copy blocks are still blocks and they have responsive behavior.
You can style <br /> tags to show or hide
depending on how much space you have.
Here’s a handy writing tip.
You can style <br /> tags to show or hide
depending on how much space you have.
Here’s a handy<br />writing tip.
You+ Boss
ex·pec·ta·tions
Avoid latesurprises.
That’s why 768 is a convenient starting point.
You+ Coders
Write a block spec.
Make small HTMLtests together.
Define UI images versus content images.
(again)
Retina
Javascript swapping is a pretty good solution.
RetinaDo you need an alternate image?
3.14kb
8-bit PNGs
1.7kb
RetinaDo you need an alternate image?
http://filamentgroup.com/lab/rwd_img_compression/
Actual Size.90% JPEG95kb
1024x768 (scaled).0% JPEG (!)44kb
Retina
Ems versus Pixels.
(I don’t even know any more.)
You+ CMS
CMSs ♥Blocks.
Testing.
Make aDevice Spec.
If you don’t specify what you’ll support,
you’ll have to support everything.
Targets.3 most-
important devices you keep close
during design.
Test.5-7 devices you plan to fully support and
test thoroughly.
Support.About 15 devices you will strategically support but will not test.
If someone reposts an issue, you’ll look into it.
Watch out for this guy.
Just check the server logs.
And your answer is ...
We’re planning for 2015.
Defensive programming.design.
Expect unforeseeable cases.Plan to make adjustments.
Recommended Resources
RESPONSIVE WEB DESIGNby Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design
A List ApartResponsive Topics
http://alistapart.com/topic/responsive-design
Smashing MagazineResponsive Topics
http://mobile.smashingmagazine.com/tag/responsive-design/
Wired WebmonkeyResponsive Topics
http://www.webmonkey.com/tag/responsive-design/
Brad Frost’s This is ResponsivePattern Collection
http://bradfrost.github.com/this-is-responsive/patterns.html
@RWDResponsive Twitter Topics
https://twitter.com/RWD
Stack OverflowDeveloper Community
http://stackoverflow.com/questions/tagged/responsive-design
Extra Credit
Is Responsive inherently a
compromise?
Are we allowing the technology to tell us
how to design.
How do we make our blocks not look so blocky?
Are we too focused on screen real estate.
What next big tech shift will make us run to
fix our designs?
Agile /Lean Thinking
How can we apply agile software concepts to help us
welcome uncertainty?
Conventional Project
Agile/Lean Project
Start
Start
Fail Win Fail Fail Win Win
Fail?Win?
Win
“Who the hell wants to hear actors talk?”
— H.M. Warner, Warner Brothers, 1927
Don’t read the comments.
Don’t be daunted.
Make something today.
Accept that it’s never done.
Thanks.