Embracing Uncertainty: Learning to Think Responsively

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Chad Currie @smithandrobot.com

Slide 3

Slide 3 text

Responsive Web Design

Slide 4

Slide 4 text

Embracing Uncertainty

Slide 5

Slide 5 text

Designing for More Screens Without burning out. or

Slide 6

Slide 6 text

Requisite RWD freakout photo (Borrowed from David Blooman’s @dblooman Blog Post: http:/ /mobiletestingfordummies.tumblr.com/post/ 20056227958/testing)

Slide 7

Slide 7 text

Yes, there’s more to design.

Slide 8

Slide 8 text

Working harder can’t be the answer.

Slide 9

Slide 9 text

We’re just going to work differently.

Slide 10

Slide 10 text

Today 100 :50

Slide 11

Slide 11 text

Definitions

Slide 12

Slide 12 text

Responsive Flexible Grid Media Queries Fluid Images

Slide 13

Slide 13 text

Adaptive Responsive Layout Device Detection Location Awareness Server-side Magic Bandwidth Awareness Dynamic Images Mobile Content

Slide 14

Slide 14 text

“RWD” A convenient short-hand for “one design, many devices”

Slide 15

Slide 15 text

“RWD” Generally refers to matters of layout.

Slide 16

Slide 16 text

“RWD” Not great for apps.

Slide 17

Slide 17 text

“RWD” Gets you really far in serving lots of devices with not a lot of complexity.

Slide 18

Slide 18 text

This talk is (mostly) for designers.

Slide 19

Slide 19 text

Speciﬁcally, how does responsive inﬂuence your process?

Slide 20

Slide 20 text

Topics The current state of RWD Resources you have now Getting Started Managing Your Design Process You + Writers + Bosses + Coders Testing Extra Credit

Slide 21

Slide 21 text

RWD is still changing.

Slide 22

Slide 22 text

“Nice responsive site. You’re doing it wrong.”

Slide 23

Slide 23 text

Train Your Brain Design Blogs Books Videos Twitter Accounts Site Galleries Patten Libraries

Slide 24

Slide 24 text

It’s a real book: http:/ / www.amazon.co.uk/NASA- Space-Shuttle-Manual- Construction/ Knowing ➜ Doing

Slide 25

Slide 25 text

Biggest Challenge Know-how Organizational Will

Slide 26

Slide 26 text

The old days. Deﬁne Design Develop Deploy

Slide 27

Slide 27 text

Now. Deﬁne Design Develop Deploy

Slide 28

Slide 28 text

Start Designing (Where to) ?

Slide 29

Slide 29 text

Lock down some variables. So you can do your job.

Slide 30

Slide 30 text

Start with one size. So you can focus on the important stuﬀ.

Slide 31

Slide 31 text

tart with one size. you can focus on important stuﬀ. By the way New products, like Adobe’s Reﬂow are trying to solve this with variable-canvas design tools.

Slide 32

Slide 32 text

Why one size ﬁrst? That’s why. Single-tasking.

Slide 33

Slide 33 text

What is a good dimension to start with?

Slide 34

Slide 34 text

Designing desktop ﬁrst puts oﬀ the hard decisions.

Slide 35

Slide 35 text

Picking an arbitrary size in the middle is not relevant.

Slide 36

Slide 36 text

Picking an arbitrary size in the middle is not relevant. Sometimes, the hardware does matter. What does 600 pixels look like, really.

Slide 37

Slide 37 text

768.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

About pixels. When we design, we’re thinking about virtual pixels.

Slide 40

Slide 40 text

About pixels. “Real” Pixel “Virtual” Retina Pixel These aren’t your pixels.

Slide 41

Slide 41 text

Now you can design.

Slide 42

Slide 42 text

%, please. Keep the “Flex” in Flexible Grid. Resist the urge to use ﬁxed layouts.

Slide 43

Slide 43 text

Fixed layouts solve short term design problems, but they add unsustainable complexity.

Slide 44

Slide 44 text

What are we designing? Pages? Layouts? Widgets?

Slide 45

Slide 45 text

Breakpoints ≠ Layouts

Slide 46

Slide 46 text

Breakpoints are logic for your layouts.

Slide 47

Slide 47 text

Use breakpoints sparingly.

Slide 48

Slide 48 text

There’s a pattern forming.

Slide 49

Slide 49 text

Sustainability. Centralize control now. Struggle later.

Slide 50

Slide 50 text

Caution Words “Rollover” “We’ll ﬁx that with Javascript.” “Add another breakpoint.” “Pin” or “ﬁxed position” “Make it smaller” or “Limit word count” “There’s no device for that case.”

Slide 51

Slide 51 text

What are we designing? A layout of blocks.

Slide 52

Slide 52 text

Distribute control to blocks.

Slide 53

Slide 53 text

The grid. More than alignment.

Slide 54

Slide 54 text

Rows / Columns = Blocks

Slide 55

Slide 55 text

Blocks have their own responsive behavior, and they work together.

Slide 56

Slide 56 text

Don’t forget about floats. They are not on the grid, but responsive friendly.

Slide 57

Slide 57 text

What future are you making for yourself? Managing monolithic pages. Curating a system of blocks that just work.

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

Pocket Device View

Slide 60

Slide 60 text

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/

Slide 61

Slide 61 text

How big do you let your desktop get? Depends on how much time you have. Giant layouts require special care too.

Slide 62

Slide 62 text

Do you need a “desktop” view at all? Nike.com has one, ﬂuid “big screen” layout.

Slide 63

Slide 63 text

You + Writer

Slide 64

Slide 64 text

Create a semantic language that you and your writer can share: Headlines Summaries Rich Text Body Call to Action Sidebar Merchandizing Callouts ...

Slide 65

Slide 65 text

Because copy blocks are still blocks and they have responsive behavior.

Slide 66

Slide 66 text

You can style
tags to show or hide depending on how much space you have. Here’s a handy writing tip.

Slide 67

Slide 67 text

You can style
tags to show or hide depending on how much space you have. Here’s a handy
writing tip.

Slide 68

Slide 68 text

You + Boss

Slide 69

Slide 69 text

ex·pec·ta·tions

Slide 70

Slide 70 text

Avoid late surprises. That’s why 768 is a convenient starting point.

Slide 71

Slide 71 text

You + Coders

Slide 72

Slide 72 text

Write a block spec.

Slide 73

Slide 73 text

Make small HTML tests together.

Slide 74

Slide 74 text

Define UI images versus content images.

Slide 75

Slide 75 text

(again)

Slide 76

Slide 76 text

Retina Javascript swapping is a pretty good solution.

Slide 77

Slide 77 text

Retina Do you need an alternate image? 3.14kb 8-bit PNGs 1.7kb

Slide 78

Slide 78 text

Retina Do you need an alternate image? http:/ /ﬁlamentgroup.com/lab/rwd_img_compression/ Actual Size. 90% JPEG 95kb 1024x768 (scaled) . 0% JPEG (!) 44kb

Slide 79

Slide 79 text

Retina Ems versus Pixels. (I don’t even know any more.)

Slide 80

Slide 80 text

You + CMS

Slide 81

Slide 81 text

CMSs — Blocks.

Slide 82

Slide 82 text

Testing.

Slide 83

Slide 83 text

Make a Device Spec.

Slide 84

Slide 84 text

If you don’t specify what you’ll support, you’ll have to support everything.

Slide 85

Slide 85 text

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.

Slide 86

Slide 86 text

Watch out for this guy. Just check the server logs.

Slide 87

Slide 87 text

And your answer is ... We’re planning for 2015.

Slide 88

Slide 88 text

Defensive programming. design. Expect unforeseeable cases. Plan to make adjustments.

Slide 89

Slide 89 text

Recommended Resources

Slide 90

Slide 90 text

RESPONSIVE WEB DESIGN by Ethan Marcotte http:/ /www.abookapart.com/products/responsive-web-design

Slide 91

Slide 91 text

A List Apart Responsive Topics http:/ /alistapart.com/topic/responsive-design

Slide 92

Slide 92 text

Smashing Magazine Responsive Topics http:/ /mobile.smashingmagazine.com/tag/responsive-design/

Slide 93

Slide 93 text

Wired Webmonkey Responsive Topics http:/ /www.webmonkey.com/tag/responsive-design/

Slide 94

Slide 94 text

Brad Frost’s This is Responsive Pattern Collection http:/ /bradfrost.github.com/this-is-responsive/patterns.html

Slide 95

Slide 95 text

@RWD Responsive Twitter Topics https:/ /twitter.com/RWD

Slide 96

Slide 96 text

Responsive.is Testing Utility http:/ /responsive.is

Slide 97

Slide 97 text

Media Queries Responsive Gallery http:/ /mediaqueri.es/

Slide 98

Slide 98 text

Stack Overﬂow Developer Community http:/ /stackoverﬂow.com/questions/tagged/responsive-design

Slide 99

Slide 99 text

Extra Credit

Slide 100

Slide 100 text

Is Responsive inherently a compromise? Are we allowing the technology to tell us how to design.

Slide 101

Slide 101 text

How do we make our blocks not look so blocky?

Slide 102

Slide 102 text

Are we too focused on screen real estate. What next big tech shift will make us run to ﬁx our designs?

Slide 103

Slide 103 text

Agile /Lean Thinking

Slide 104

Slide 104 text

How can we apply agile software concepts to help us welcome uncertainty?

Slide 105

Slide 105 text

Conventional Project Agile/Lean Project Start Start Fail Win Fail Fail Win Win Fail? Win? W

Slide 106

Slide 106 text

“Who the hell wants to hear actors talk?” — H.M. Warner, Warner Brothers, 1927 Don’t read the comments.