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
![Page 1: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/1.jpg)
![Page 2: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/2.jpg)
Chad [email protected]
![Page 3: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/3.jpg)
ResponsiveWeb Design
![Page 4: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/4.jpg)
Embracing Uncertainty
![Page 5: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/5.jpg)
Designing for More Screens
Without burning out.
or
![Page 6: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/6.jpg)
Requisite RWD freakout photo
(Borrowed from David Blooman’s @dblooman Blog Post: http://mobiletestingfordummies.tumblr.com/post/
20056227958/testing)
![Page 7: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/7.jpg)
Yes, there’s more to design.
![Page 8: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/8.jpg)
Working harder can’t be the answer.
![Page 9: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/9.jpg)
We’re just going to work differently.
![Page 10: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/10.jpg)
Today
100:50
![Page 11: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/11.jpg)
Definitions
![Page 12: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/12.jpg)
Responsive
Flexible Grid
Media Queries
Fluid Images
![Page 13: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/13.jpg)
Adaptive
Responsive Layout Device DetectionLocation Awareness
Server-side Magic
Bandwidth Awareness
Dynamic Images
Mobile Content
![Page 14: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/14.jpg)
“RWD”A convenient short-hand for“one design, many devices”
![Page 15: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/15.jpg)
“RWD”Generally refers to matters of layout.
![Page 16: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/16.jpg)
“RWD”Not great for apps.
![Page 17: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/17.jpg)
“RWD”Gets you really far in
serving lots of devices with not a lot of complexity.
![Page 18: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/18.jpg)
This talk is (mostly) for designers.
![Page 19: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/19.jpg)
Specifically,how does responsive influence your process?
![Page 20: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/20.jpg)
TopicsThe current state of RWD
Resources you have now
Getting Started
Managing Your Design Process
You+ Writers+ Bosses+ Coders
Testing
Extra Credit
![Page 21: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/21.jpg)
RWD is still changing.
![Page 22: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/22.jpg)
“Nice responsive site.You’re doing it wrong.”
![Page 23: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/23.jpg)
Train Your BrainDesignBlogs Books Videos
TwitterAccounts
SiteGalleries
Patten Libraries
![Page 24: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/24.jpg)
It’s a real book: http://www.amazon.co.uk/NASA-
Space-Shuttle-Manual-Construction/
Knowing ➜ Doing
![Page 25: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/25.jpg)
Biggest Challenge
Know-how
Organizational Will
![Page 26: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/26.jpg)
The old days.
Define Design Develop Deploy
![Page 27: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/27.jpg)
Now.
Define
Design Develop Deploy
Define
![Page 28: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/28.jpg)
StartDesigning
(Where to)
?
![Page 29: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/29.jpg)
Lock down some variables.
So you can do your job.
![Page 30: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/30.jpg)
Start withone size.
So you can focus onthe important stuff.
![Page 31: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/31.jpg)
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.
![Page 32: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/32.jpg)
Why one size first?
That’s why.
Single-tasking.
![Page 33: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/33.jpg)
What is a good dimension to start with?
![Page 34: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/34.jpg)
Designing desktop first puts
off the hard decisions.
![Page 35: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/35.jpg)
Picking an arbitrary size in the middle
is not relevant.
![Page 36: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/36.jpg)
Picking an arbitrary size in the middle
is not relevant.
Sometimes, the hardware does matter.What does 600 pixels look like, really.
![Page 37: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/37.jpg)
768.
![Page 38: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/38.jpg)
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
![Page 39: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/39.jpg)
About pixels.
When we design, we’re thinking about virtual pixels.
![Page 40: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/40.jpg)
About pixels.“Real”Pixel
“Virtual”Retina Pixel
These aren’t your pixels.
![Page 41: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/41.jpg)
Now youcan design.
![Page 42: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/42.jpg)
%, please.Keep the “Flex” in
Flexible Grid.
Resist the urge to use fixed layouts.
![Page 43: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/43.jpg)
Fixed layouts solve short term design problems,
but they add unsustainable complexity.
![Page 44: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/44.jpg)
What are we designing?
Pages?Layouts?Widgets?
![Page 45: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/45.jpg)
Breakpoints ≠ Layouts
![Page 46: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/46.jpg)
Breakpoints are logic for your layouts.
![Page 47: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/47.jpg)
Use breakpointssparingly.
![Page 48: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/48.jpg)
There’s a pattern forming.
![Page 49: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/49.jpg)
Sustainability.
Centralize control now.Struggle later.
![Page 50: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/50.jpg)
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.”
![Page 51: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/51.jpg)
What are we designing?
A layout of blocks.
![Page 52: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/52.jpg)
Distributecontrol to blocks.
![Page 53: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/53.jpg)
The grid.More than alignment.
![Page 54: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/54.jpg)
Rows / Columns = Blocks
![Page 55: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/55.jpg)
Blocks have their own responsive behavior, and they work together.
![Page 56: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/56.jpg)
Don’t forget about floats. They are not on the grid, but responsive friendly.
![Page 57: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/57.jpg)
What future are you making for yourself?Managing monolithic
pages.
Curating a system of blocks that just work.
![Page 58: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/58.jpg)
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.
![Page 59: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/59.jpg)
PocketDeviceView
![Page 60: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/60.jpg)
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/
![Page 61: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/61.jpg)
How big do you letyour desktop get?
Depends on how much time you have. Giant layouts require special care too.
![Page 62: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/62.jpg)
Do you need a“desktop” view at all?
Nike.com has one, fluid “big screen” layout.
![Page 63: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/63.jpg)
You+ Writer
![Page 64: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/64.jpg)
Create a semantic language that you and your writer can share:
HeadlinesSummaries
Rich Text BodyCall to Action
SidebarMerchandizing
Callouts...
![Page 65: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/65.jpg)
Because copy blocks are still blocks and they have responsive behavior.
![Page 66: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/66.jpg)
You can style <br /> tags to show or hide
depending on how much space you have.
Here’s a handy writing tip.
![Page 67: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/67.jpg)
You can style <br /> tags to show or hide
depending on how much space you have.
Here’s a handy<br />writing tip.
![Page 68: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/68.jpg)
You+ Boss
![Page 69: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/69.jpg)
ex·pec·ta·tions
![Page 70: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/70.jpg)
Avoid latesurprises.
That’s why 768 is a convenient starting point.
![Page 71: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/71.jpg)
You+ Coders
![Page 72: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/72.jpg)
Write a block spec.
![Page 73: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/73.jpg)
Make small HTMLtests together.
![Page 74: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/74.jpg)
Define UI images versus content images.
![Page 75: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/75.jpg)
(again)
![Page 76: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/76.jpg)
Retina
Javascript swapping is a pretty good solution.
![Page 77: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/77.jpg)
RetinaDo you need an alternate image?
3.14kb
8-bit PNGs
1.7kb
![Page 78: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/78.jpg)
RetinaDo you need an alternate image?
http://filamentgroup.com/lab/rwd_img_compression/
Actual Size.90% JPEG95kb
1024x768 (scaled).0% JPEG (!)44kb
![Page 79: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/79.jpg)
Retina
Ems versus Pixels.
(I don’t even know any more.)
![Page 80: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/80.jpg)
You+ CMS
![Page 81: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/81.jpg)
CMSs ♥Blocks.
![Page 82: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/82.jpg)
Testing.
![Page 83: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/83.jpg)
Make aDevice Spec.
![Page 84: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/84.jpg)
If you don’t specify what you’ll support,
you’ll have to support everything.
![Page 85: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/85.jpg)
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.
![Page 86: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/86.jpg)
Watch out for this guy.
Just check the server logs.
![Page 87: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/87.jpg)
And your answer is ...
We’re planning for 2015.
![Page 88: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/88.jpg)
Defensive programming.design.
Expect unforeseeable cases.Plan to make adjustments.
![Page 89: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/89.jpg)
Recommended Resources
![Page 90: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/90.jpg)
RESPONSIVE WEB DESIGNby Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design
![Page 91: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/91.jpg)
A List ApartResponsive Topics
http://alistapart.com/topic/responsive-design
![Page 92: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/92.jpg)
Smashing MagazineResponsive Topics
http://mobile.smashingmagazine.com/tag/responsive-design/
![Page 93: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/93.jpg)
Wired WebmonkeyResponsive Topics
http://www.webmonkey.com/tag/responsive-design/
![Page 94: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/94.jpg)
Brad Frost’s This is ResponsivePattern Collection
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 95: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/95.jpg)
@RWDResponsive Twitter Topics
https://twitter.com/RWD
![Page 98: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/98.jpg)
Stack OverflowDeveloper Community
http://stackoverflow.com/questions/tagged/responsive-design
![Page 99: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/99.jpg)
Extra Credit
![Page 100: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/100.jpg)
Is Responsive inherently a
compromise?
Are we allowing the technology to tell us
how to design.
![Page 101: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/101.jpg)
How do we make our blocks not look so blocky?
![Page 102: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/102.jpg)
Are we too focused on screen real estate.
What next big tech shift will make us run to
fix our designs?
![Page 103: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/103.jpg)
Agile /Lean Thinking
![Page 104: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/104.jpg)
How can we apply agile software concepts to help us
welcome uncertainty?
![Page 105: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/105.jpg)
Conventional Project
Agile/Lean Project
Start
Start
Fail Win Fail Fail Win Win
Fail?Win?
Win
![Page 106: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/106.jpg)
“Who the hell wants to hear actors talk?”
— H.M. Warner, Warner Brothers, 1927
Don’t read the comments.
![Page 107: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/107.jpg)
Don’t be daunted.
Make something today.
Accept that it’s never done.
![Page 108: Embracing Uncertainty: Learning to Think Responsively](https://reader033.vdocument.in/reader033/viewer/2022060202/559b90f61a28abf35d8b4770/html5/thumbnails/108.jpg)
Thanks.