Tweet
Tweet

Slide 1

Slide 1 text

HANDS-ON RESPONSIVE WEB DESIGN Ben Callahan // @bencallahan Sparkbox // seesparkbox.com http://bit.ly/LWLTEA

Slide 2

Slide 2 text

THE WEB IS NOT FIXED-WIDTH

Slide 3

Slide 3 text

IGNORE IT FIXED-WIDTH “DESKTOP” http://website.com THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE

Slide 4

Slide 4 text

MOBILE SITE FIXED-WIDTH “DESKTOP” http://website.com 100% WIDE “MOBILE” http://mobile.website.com + THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE

Slide 5

Slide 5 text

MOBILE SITE THE MOST IMPORTANT FEATURE OF YOUR SITE IS THE ONE I NEED NOW THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE

Slide 6

Slide 6 text

RESPONSIVE WEB DESIGN ONE SITE ADJUSTS ITSELF http://website.com THREE WAYS ORGANIZATIONS ARE ADDRESSING MOBILE

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

RESPONSIVE WEB DESIGN A FLUID GRID FLEXIBLE CONTENT MEDIA QUERIES

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

THE DIP

Slide 11

Slide 11 text

Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF COMPETENCE

Slide 12

Slide 12 text

THINK RESPONSIVELY

Slide 13

Slide 13 text

RWD PLANNING & DESIGN

Slide 14

Slide 14 text

PROJECT BRIEF

Slide 15

Slide 15 text

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

Slide 16

Slide 16 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 17

Slide 17 text

Logo and tagline Headline: “You Decide, 2012” Navigation: Home, About, Shirts, Contact Top Shirt: # votes, title, description, link to detail view About Text: headline and two paragraphs describing the site Footer: nav and copyright PROJECT BRIEF Project Scope

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

BROKEN PROCESS As if you didn’t already know.

Slide 21

Slide 21 text

The problem isn’t the style, it looks cool. The problem isn’t the size of the design. BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”

Slide 22

Slide 22 text

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

Slide 23

Slide 23 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 24

Slide 24 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 25

Slide 25 text

BROKEN PROCESS So, what’ a geek to do?

Slide 26

Slide 26 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 27

Slide 27 text

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

Slide 28

Slide 28 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 29

Slide 29 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 30

Slide 30 text

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

Slide 31

Slide 31 text

STUFF WE’VE TRIED BOOKENDS Problems... It’s a band-aid. Increases timeline and budget.

Slide 32

Slide 32 text

STUFF WE’VE TRIED BOOKENDS... PLUS “Okay, if designing large and small resolutions 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 my Blackberry Storm?”

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

OUR PROCESS For now, anyway.

Slide 35

Slide 35 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 36

Slide 36 text

A Priority Guide OUR PROCESS Step One-a:

Slide 37

Slide 37 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 Priority Guides for 3 Templates

Slide 38

Slide 38 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 39

Slide 39 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 40

Slide 40 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 41

Slide 41 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 Priority Guides for 3 Templates

Slide 42

Slide 42 text

A Style Prototype OUR PROCESS Step One-b: Like Samantha Warren’s Style Tiles, but in the browser. (styletil.es)

Slide 43

Slide 43 text

Large Resolution Design OUR PROCESS Step Two:

Slide 44

Slide 44 text

Code Responsive Templates OUR PROCESS Step Three:

Slide 45

Slide 45 text

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

Slide 46

Slide 46 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 Four Zero:

Slide 47

Slide 47 text

ONE NOTE Content Strategy OUR PROCESS

Slide 48

Slide 48 text

CLIENT DELIVERABLES Oh yeah. We have to get this tuff approved.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 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 52

Slide 52 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... I recommend getting paid for that. CLIENT DELIVERABLES

Slide 53

Slide 53 text

https://github.com/sparkbox/Build-Responsively-Workshop A GOOD START /03-Boilerplate

Slide 54

Slide 54 text

DEVELOPMENT TOOLS

Slide 55

Slide 55 text

BROWSERS CHROME SAFARI FIREFOX DEVELOPMENT TOOLS

Slide 56

Slide 56 text

DEVELOPMENT TOOLS

Slide 57

Slide 57 text

DEVELOPMENT TOOLS

Slide 58

Slide 58 text

BROWSERS CHROME SAFARI FIREFOX (GETFIREBUG.COM) DEVELOPMENT TOOLS

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

http://bit.ly/LWLTEA WRITE THE MARKUP /04-Markup

Slide 62

Slide 62 text

WRITE THE MARKUP http://getskeleton.com (the grid is NOT semantic) Fluid presentation makes the separation of style from content critical.

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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

Slide 69

Slide 69 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 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

DRESSRESPONSIVELY.COM

Slide 75

Slide 75 text

RESPONSIVE CHALLENGES

Slide 76

Slide 76 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 77

Slide 77 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 78

Slide 78 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 79

Slide 79 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 80

Slide 80 text

RESPONSIVE CHALLENGES IMAGES ADS BIG TABLES COMPLEX NAVIGATION PROCESS

Slide 81

Slide 81 text

RESPONSIVE MINDSET

Slide 82

Slide 82 text

BUILDRESPONSIVELY.COM JULY 9, 10 RIGHT HERE IN COLUMBUS

Slide 83

Slide 83 text

DISCUSSION

Slide 84

Slide 84 text

HANDS-ON RESPONSIVE WEB DESIGN Ben Callahan // @bencallahan Sparkbox // seesparkbox.com