Tweet
Tweet

Slide 1

Slide 1 text

MIDWEST TOUR SPONSORED BY

Slide 2

Slide 2 text

Download the Repo http://bit.ly/LWLTEA

Slide 3

Slide 3 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 4

Slide 4 text

Want More? @brworkshop @hearsparkbox www.seesparkbox.com/foundry

Slide 5

Slide 5 text

THANKS TO OUR MIDWEST TOUR SPONSORS

Slide 6

Slide 6 text

Session One RWD 101 9:00-10:00 http://bit.ly/LWLTEA /01-RWD101

Slide 7

Slide 7 text

THE WEB IS NOT FIXED-WIDTH

Slide 8

Slide 8 text

THIS IS A PARADIGM SHIFT

Slide 9

Slide 9 text

THIS IS A PARADIGM SHIFT “...scientific advancement is not evolutionary, but rather is a series of peaceful interludes punctuated by intellectually violent revolutions, and in those revolutions one conceptual world is replaced by another...” — Thomas Kuhn

Slide 10

Slide 10 text

ENIAC, 1946 THIS IS A PARADIGM SHIFT ENIAC, 1946

Slide 11

Slide 11 text

Micral, 1972 THIS IS A PARADIGM SHIFT

Slide 12

Slide 12 text

Ericsson R380, 2000 THIS IS A PARADIGM SHIFT

Slide 13

Slide 13 text

Over 60% of new handset sales are smartphones. THIS IS A PARADIGM SHIFT

Slide 14

Slide 14 text

Apple sold around 13 million iPads in Q4 of 2011. THIS IS A PARADIGM SHIFT

Slide 15

Slide 15 text

Amazon sold over 4 million Kindle Fires in December of 2011. THIS IS A PARADIGM SHIFT

Slide 16

Slide 16 text

FLEXIBILITY IS THE NEW NORM

Slide 17

Slide 17 text

FLEXIBILITY IS THE NEW NORM 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users Global Mobile vs Desktop Internet User Projection Source: Morgan Stanley Research

Slide 18

Slide 18 text

PEOPLE ARE TRYING TO BROWSE YOUR WEBSITES ON THESE DEVICES, TODAY. FLEXIBILITY IS THE NEW NORM

Slide 19

Slide 19 text

RESPONSIVE WEB DESIGN

Slide 20

Slide 20 text

ETHAN MARCOTTE Article on alistapart.com Book via A Book Apart RESPONSIVE WEB DESIGN THE DEFINITION

Slide 21

Slide 21 text

RESPONSIVE WEB DESIGN A FLUID FOUNDATION FLEXIBLE CONTENT MEDIA QUERIES THE DEFINITION

Slide 22

Slide 22 text

RESPONSIVE WEB DESIGN LIVE CODE

Slide 23

Slide 23 text

Turn a 300px 3-column grid into a fluid grid. br-1.html RESPONSIVE WEB DESIGN A FLUID FOUNDATION http://bit.ly/LWLTEA /01-RWD101

Slide 24

Slide 24 text

www.semantic.gs with LESS or SASS RESPONSIVE WEB DESIGN A FLUID FOUNDATION

Slide 25

Slide 25 text

RESPONSIVE WEB DESIGN FLEXIBLE CONTENT Images br-3.html The awesome poem is by a guy named Douglas, check him out at: http://ligzpoems.blogspot.com/

Slide 26

Slide 26 text

img { float: right; max-width: 100%; } RESPONSIVE WEB DESIGN FLEXIBLE CONTENT

Slide 27

Slide 27 text

Width, height Device-width, device-height Orientation Aspect ratio Several others http://www.w3.org/TR/css3-mediaqueries/ RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 28

Slide 28 text

@media (min-width: 600px) { /* styles for 600px and up here */ } @media (max-width: 600px) { /* styles for 600px and down here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 29

Slide 29 text

/* Large Resolution First CSS File Structure */ /* large resolution layouts here */ @media (max-width: 850px) { /* styles for 850px and down here */ } @media (max-width: 450px) { /* styles for 450px and down here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 30

Slide 30 text

/* Small Resolution First CSS File Structure */ /* smallest resolution layouts here */ @media (min-width: 450px) { /* styles for 450px and up here */ } @media (min-width: 850px) { /* styles for 850px and up here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 31

Slide 31 text

LARGE RESOLUTION FIRST PRO: IE support by default CON: Smallest devices load all assets SMALL RESOLUTION FIRST PRO: More logical (build up vs tear down) CON: IE support is tricky RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 32

Slide 32 text

LARGE RESOLUTION FIRST PRO: IE support by default CON: Smallest devices load all assets SMALL RESOLUTION FIRST PRO: More logical (build up vs tear down) CON: IE support is tricky RESPONSIVE WEB DESIGN MEDIA QUERIES

Slide 33

Slide 33 text

RESPONSIVE WEB DESIGN MEDIA QUERIES Throw in a media query! br-5.html

Slide 34

Slide 34 text

WRAP UP

Slide 35

Slide 35 text

Fluid grid Flexible content Media Queries WRAP UP

Slide 36

Slide 36 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 37

Slide 37 text

Session Two RWD PLANNING & DESIGN 9:45-11:15 http://bit.ly/LWLTEA /02-PlanDesign

Slide 38

Slide 38 text

PROJECT BRIEF Hold on to your butts.

Slide 39

Slide 39 text

PROJECT BRIEF Client: Dress Responsively Project: Website that offers RWD-themed apparel.

Slide 40

Slide 40 text

PROJECT BRIEF Project Scope Offer only t-shirts at first... potential for more later. No initial product inventory (no cart, checkout, etc). Users vote via twitter on what shirt they want produced. Should appeal to designers and developers. Simple 3-4 template site initially. Site will be responsive, build mobile-first.

Slide 41

Slide 41 text

PROJECT BRIEF Napkin Sketch & Content Logo and Tagline “You Decide, 2012” Nav: Home, About, Shirts, Contact Top Shirt: # Votes, Title, Description, Link to Detail Headline and Two Paragraphs About the Site Footer: Nav and Copyright

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

PROJECT BRIEF Your Job: Sketch how you think this site design would look at a mobile resolution. Oh yeah, You’ve got 5 minutes.

Slide 45

Slide 45 text

DON’T FORGET What is the hierarchy of content? Should we hide and show elements at different sizes? Which things are links? Are the buttons/links large enough for a touch device? How will the navigation respond? How much content do we need to allow for? Will it work in IE?

Slide 46

Slide 46 text

BROKEN PROCESS As if you didn’t already know.

Slide 47

Slide 47 text

Was that a familiar experience? What’s tough about that process? BROKEN PROCESS

Slide 48

Slide 48 text

The problem isn’t the style, it looks cool. The problem isn’t even the size of the design, because we DO need a solution at 960 pixels wide. BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”

Slide 49

Slide 49 text

The problem is the mindset. BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”

Slide 50

Slide 50 text

BROKEN PROCESS It assumes a fairytale world of controlled web experience that doesn’t exist, pushes design decisions onto developers, and creates false expectations in clients. THE PROBLEM WITH “960-ONLY DESIGNING”

Slide 51

Slide 51 text

It simply is not conducive to creating a site which is future-proof and forward thinking... • Mobile First CSS • Content as King • Responsive Layouts BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”

Slide 52

Slide 52 text

BROKEN PROCESS So, what’ a geek to do?

Slide 53

Slide 53 text

DON’T keep up the status quo. DON’T stop at whining about inadequate tools. Get creative and explore other possibilities with the tools and practices we have available today. BROKEN PROCESS

Slide 54

Slide 54 text

STUFF WE’VE TRIED It ain’t always been pretty.

Slide 55

Slide 55 text

MOBILE FIRST DESIGN “Let’s try designing it the way we plan to code it. Just do the design at a small resolution.” STUFF WE’VE TRIED

Slide 56

Slide 56 text

MOBILE FIRST DESIGN Problems: Mobile layouts are inevitably more linear and simple, and they provide little direction or room for more interesting layouts at large screen sizes. STUFF WE’VE TRIED

Slide 57

Slide 57 text

STUFF WE’VE TRIED BOOKENDS “Okay, if designing for large resolutions isn’t enough, how about adding a small version? We’ll deliver both.”

Slide 58

Slide 58 text

STUFF WE’VE TRIED BOOKENDS Problems... It’s a band-aid. It doesn’t solve the root issues. Extra design ain’t free.

Slide 59

Slide 59 text

STUFF WE’VE TRIED BOOKENDS... PLUS “Okay, if designing large and small isn’t enough, how about adding a mid-range version? After all, tablets are the new black.” “And how about a 1280?” “And maybe one for the CEO’s Blackberry Storm?”

Slide 60

Slide 60 text

STUFF WE’VE TRIED BOOKENDS... PLUS Problems... Again, it’s a band-aid. And it costs a LOT, too.

Slide 61

Slide 61 text

OUR PROCESS (For now, anyway.)

Slide 62

Slide 62 text

We are attempting to optimize content, design, and development time, finding a balance of appropriate direction from all disciplines without destroying budgets. ...while delivering on mobile-first, responsive designs where content is valued and considered. OUR PROCESS

Slide 63

Slide 63 text

A Priority Guide OUR PROCESS Step One:

Slide 64

Slide 64 text

A Priority Guide ( Formerly Known As A Mobile-Sized Content Prototype Wireframe Thingy) OUR PROCESS Step One:

Slide 65

Slide 65 text

Home About Shirts Contact Dress Responsively clothing co SIZE US UP & CAST YOUR VOTE! IMAGE OF LEADING SHIRT WHAT’S THIS ALL ABOUT? SHOW ME ALL THE CANDIDATES The Dress Responsively Clothing Company doesn’t exist. Yet. This website is a product of Sparkbox’s Build Responsively workshop. Dress Responsively was originally built as a mock project to create working files and content for the workshop’s attendees. But then we got to thinking. What standards-loving, responsively- building, media-querying web citizens wouldn’t love some apparel which flies the flag of the future of the web? Let’s turn it over to the people. So here we are. If we are able to stump for enough interest, tweets, and votes for this geekwear, we’ll print up the winner and make it available. Check out the shirt designs, vote for your frontrunner, and pass us along to your friends. Democracy at work, folks. It’s either that or mob rule, whichever comes first. Either way, we all get sweet shirts out of it. SHOW ME THE CANDIDATES Back to Top SPARKBOX LOGO MADE BY BUILD RESPONSIVELY LOGO EXCLUSIVELY FOR Home About Shirts Contact © Sparkbox 2012 All Rights Reserved. Responsive design is always the right answer. Though it is not always the only answer. Listen to Bruce Lee. Be like water, my friend. We’ve got to design in the browser. We just don’t have the tools yet. El Presidente Say: EXPANDING FOOTER Link Link HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS Tuesday, February 14, 12 Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 SHIRT DETAILS AND VOTING Back to Top REPEAT FOOTER EXPAND HIDDEN IMAGE OF SHIRT #2 SHIRT DETAILS AND VOTING IMAGE OF SHIRT #3 198 VOTES SHIRT DETAILS AND VOTING 254 VOTES 334 VOTES Tuesday, February 14, 12 A little something clever and explanatory about the shirt. Keep in mind that we can’t be too exclusive in the humor, at least not without giving subtle explanation. Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 VOTE FOR IT EXPAND HIDDEN 334 VOTES CLICK FOR DETAIL VIEW #1 IN POLLS   SHIRT TITLE GOES HERE NEXT SHIRT PREV SHIRT Back to Top REPEAT FOOTER Tuesday, February 14, 12 3 Guides for 3 Templates

Slide 66

Slide 66 text

Home About Shirts Contact Dress Responsively clothing co SIZE US UP & CAST YOUR VOTE! IMAGE OF LEADING SHIRT WHAT’S THIS ALL ABOUT? SHOW ME ALL THE CANDIDATES The Dress Responsively Clothing Company doesn’t exist. Yet. This website is a product of Sparkbox’s Build Responsively workshop. Dress Responsively was originally built as a mock project to create working files and content for the workshop’s attendees. But then we got to thinking. What standards-loving, responsively- HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS Home Page

Slide 67

Slide 67 text

Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 SHIRT DETAILS AND VOTING EXPAND HIDDEN IMAGE OF SHIRT #2 SHIRT DETAILS AND VOTING 254 VOTES 334 VOTES Listing Page

Slide 68

Slide 68 text

A little something clever and explanatory about the shirt. Keep in mind that we can’t be too exclusive in the humor, at least not without giving subtle explanation. Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 VOTE FOR IT EXPAND HIDDEN 334 VOTES CLICK FOR DETAIL VIEW #1 IN POLLS   SHIRT TITLE GOES HERE NEXT SHIRT PREV SHIRT Back to Top REPEAT FOOTER Detail Page

Slide 69

Slide 69 text

A Style Prototype OUR PROCESS Step Two:

Slide 70

Slide 70 text

A Style Prototype http://sparkbox.github.com/style-prototype/ OUR PROCESS Step Two:

Slide 71

Slide 71 text

Large Resolution Design OUR PROCESS Step Three:

Slide 72

Slide 72 text

Code Responsive Templates OUR PROCESS Step Four:

Slide 73

Slide 73 text

Content , design, and development team members must review and collaborate regularly at every stage in the process. OUR PROCESS Step Five Zero:

Slide 74

Slide 74 text

We can’t “throw it over the wall” anymore... at least not if we want our sites to be excellent. There are too many moving parts. OUR PROCESS Step Five Zero:

Slide 75

Slide 75 text

The esult for D ess Responsively: OUR PROCESS

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

DISADVANTAGES OF DESKTOP-WIDTH WIREFRAMES Too much focus on layout. Designer may not feel freedom to interpret layout. Leaves an extra step for designer/developer to figure out translation to mobile width. OUR PROCESS

Slide 80

Slide 80 text

ADVANTAGES TO MOBILE-SIZED PRIORITY GUIDE Wireframes focus more on hierarchy and less on layout. Cuts out a step of designer sketching/designing for mobile first. Dev gets direction on both desktop and smallest mobile widths. Answers some of the questions in handoff. More visual decisions left to designer, less headache for devs. OUR PROCESS

Slide 81

Slide 81 text

CLIENT DELIVERABLES Crap. I almost forgot about them.

Slide 82

Slide 82 text

CLIENT DELIVERABLES It depends... So if everything is changing, what do we show them?

Slide 83

Slide 83 text

Client Education. Level of trust from the client. Scope of the project. Time and budget. CLIENT DELIVERABLES DELIVERABLE DECISIONS ARE EFFECTED BY...

Slide 84

Slide 84 text

Educated clients (or more trusting and open-minded ones) may be open to deliverables closer to what we’ve described in our current process. CLIENT DELIVERABLES

Slide 85

Slide 85 text

Though we may educate our clients, some will inevitably want to see more and more versions of wireframes and layouts which cover multiple screen sizes... perhaps due to the project scope, or simply a lack of vision. We recommend getting paid for that. CLIENT DELIVERABLES

Slide 86

Slide 86 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 87

Slide 87 text

Session Three GETTING A GOOD START 11:30-NOON http://bit.ly/LWLTEA /03-Boilerplate

Slide 88

Slide 88 text

DEVELOPMENT TOOLS

Slide 89

Slide 89 text

BROWSERS CHROME SAFARI FIREFOX DEVELOPMENT TOOLS

Slide 90

Slide 90 text

DEVELOPMENT TOOLS

Slide 91

Slide 91 text

DEVELOPMENT TOOLS

Slide 92

Slide 92 text

BROWSERS CHROME SAFARI OPERA FIREFOX (GETFIREBUG.COM) DEVELOPMENT TOOLS

Slide 93

Slide 93 text

BOOKMARKLETS DEVELOPMENT TOOLS http://www.benjaminkeen.com/misc/bricss/ http://seesparkbox.com/foundry/media_query_bookmarklet

Slide 94

Slide 94 text

ADOBE SHADOW DEVELOPMENT TOOLS http://labs.adobe.com/technologies/shadow/

Slide 95

Slide 95 text

BROWSERSTACK DEVELOPMENT TOOLS http://browserstack.com

Slide 96

Slide 96 text

SASS/SCSS DEVELOPMENT TOOLS http://sass-lang.com/

Slide 97

Slide 97 text

HTML5 BOILERPLATE DEVELOPMENT TOOLS ˒ http://html5boilerplate.com/ https://github.com/sparkbox/html5-boilerplate

Slide 98

Slide 98 text

HTML5 BOILERPLATE DEVELOPMENT TOOLS http://mathiasbynens.be/notes/touch-icons http://humanstxt.org/

Slide 99

Slide 99 text

HTML5 BOILERPLATE DEVELOPMENT TOOLS http://www.modernizr.com/ http://paulirish.com/2009/markup-based-unobtrusive-comprehensive- dom-ready-execution/ http://jquery.com

Slide 100

Slide 100 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 101

Slide 101 text

MIDWEST TOUR SPONSORED BY

Slide 102

Slide 102 text

Session Four THE NITTY GRITTY 1:15-5:00 http://bit.ly/LWLTEA /04-Markup

Slide 103

Slide 103 text

WRITE THE MARKUP Fluid presentation makes the separation of style from content critical.

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

http://bit.ly/LWLTEA /04-Markup

Slide 109

Slide 109 text

CSS 1 http://bit.ly/LWLTEA /05-CSS-1

Slide 110

Slide 110 text

Home About Shirts Contact Dress Responsively clothing co SIZE US UP & CAST YOUR VOTE! IMAGE OF LEADING SHIRT HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS

Slide 111

Slide 111 text

TASK GOALS 1) ADD THE “HOME” LINK BACK IN 2) INCORPORATE THE LARGER LOGO 3) CONSIDER TYPE AND PADDING SIZES 4) HONOR THE PROPORTIONS OF THE DESIGN CSS-1

Slide 112

Slide 112 text

CSS 2 http://bit.ly/LWLTEA /07-CSS-2

Slide 113

Slide 113 text

TASK GOALS 1) ADJUST FONT-SIZE APPROPRIATELY 2) MOVE TO TWO COLUMNS 3) HONOR THE PROPORTIONS OF THE DESIGN CSS-2

Slide 114

Slide 114 text

CSS 3 http://bit.ly/LWLTEA /09-CSS-3

Slide 115

Slide 115 text

TASK GOALS 1) ADD A 2-COLUMN LAYOUT 2) ADD A 3-COLUMN LAYOUT 3) TRY FOR A VISUALLY APPEALING GRID 3) HONOR THE PROPORTIONS OF THE DESIGN CSS-3

Slide 116

Slide 116 text

DRESSRESPONSIVELY.COM

Slide 117

Slide 117 text

RESPONSIVE CHALLENGES

Slide 118

Slide 118 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 119

Slide 119 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 120

Slide 120 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 121

Slide 121 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 122

Slide 122 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 123

Slide 123 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 124

Slide 124 text

MIDWEST TOUR SPONSORED BY