1.
Designers and Code and workflows and stuff Jennifer Robbins @jenvilleFriday, October 26, 2012

2.
me, 1993Friday, October 26, 2012

3.
The Web in 1993 In June 1993 there was a total of 130 websites.Friday, October 26, 2012

4.
Global Network Navigator (GNN) 1993Friday, October 26, 2012

5.
Friday, October 26, 2012

6.
Head-DESK HEAD-DESKFriday, October 26, 2012

7.
• What does the web design process look like now? • What deliverables make sense? • How is HTML/CSS being used by designers? • What tools are available?Friday, October 26, 2012

8.
Product Development Timeline idea launchFriday, October 26, 2012

9.
Product Development Timeline research maintenance idea launchFriday, October 26, 2012

10.
User Experience (UX) user interviews personas design strategies idea launch scenarios usability testsFriday, October 26, 2012

11.
Information Architecture & Content Strategy card sorts content audit idea launch site maps taxonomiesFriday, October 26, 2012

12.
Interaction/UI wireframes user journeys idea flow diagrams launch prototypesFriday, October 26, 2012

13.
Visual/Graphic Design typography layout idea mood/atmosphere launch comps/mockupsFriday, October 26, 2012

14.
Frontend Development HTML CSS JavaScript idea launchFriday, October 26, 2012

15.
Backend & Server “black magic” idea launchFriday, October 26, 2012

16.
Where I work... typography wireframes HTML design strategies user journeys layout CSS mood/atmosphere idea flow diagrams launch comps/mockups site mapsFriday, October 26, 2012

17.
idea launchFriday, October 26, 2012

18.
idea launchFriday, October 26, 2012

19.
Traditionally, the need for coding skills increases as you get closer to launch idea launchFriday, October 26, 2012

20.
I’m seeing code moving its way back the chain idea launchFriday, October 26, 2012

21.
So, what’s changed?Friday, October 26, 2012

22.
AgILE! AGILE!Friday, October 26, 2012

23.
plan design develop deployFriday, October 26, 2012

24.
wireframes plan design develop deployFriday, October 26, 2012

25.
wireframes PSD comps plan design develop deployFriday, October 26, 2012

26.
wireframes PSD comps code plan design develop deployFriday, October 26, 2012

27.
design developFriday, October 26, 2012

28.
Friday, October 26, 2012

29.
MOBILE!!!Friday, October 26, 2012

30.
[courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012

31.
[courtesy of Brad Frost (bradfrostweb.com)]Friday, October 26, 2012

32.
disruptive DisruptiveFriday, October 26, 2012

33.
20% | 35% Don’t have Internet access | Don’t have broadband at home Statistics: http://www.slideshare.net/KMcGrane/uncle-sam-wants-you-to-optimize-your-content-for-mobileFriday, October 26, 2012

34.
20% | 35% Don’t have Internet access | Don’t have broadband at home 29% | 51% Black Americans 38% | 59% Low income (<30K) 57% | 88% Americans with disabilitiesFriday, October 26, 2012

35.
BUT! 88% of Americans have a mobile device 55% use them to access the WebFriday, October 26, 2012

36.
31% Americans only or mostly use Internet on mobile 39% 43% 51% No-college Low-income Black Americans Americans AmericansFriday, October 26, 2012

37.
Your site on mobile MUST: • Have complete content • Be fully-functional • Be easy to useFriday, October 26, 2012

38.
Responsive DesignFriday, October 26, 2012

39.
Friday, October 26, 2012

40.
http://mediaqueri.esFriday, October 26, 2012

41.
Android screen size surveyFriday, October 26, 2012

42.
MADNESS!!!Friday, October 26, 2012

43.
Static comps don’t cut it anymore.Friday, October 26, 2012

44.
“Like bringing a knife to a gunfight.” —Andy Clarke https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfightFriday, October 26, 2012

45.
Static mockup drawbacks • Don’t display web fonts accurately • Can’t show flexible/responsive layouts • Don’t show interactions and transitions • Set wrong expectations • Design changes are time-consumingFriday, October 26, 2012

46.
Friday, October 26, 2012

47.
?Friday, October 26, 2012

48.
Toward a new process PRocess (responsive workflow)Friday, October 26, 2012

49.
Responsive Summit London • February 2012 www.responsivesummit.comFriday, October 26, 2012

50.
Plan Sketch Prototype Increase Fidelity Iterate/Talk (in HTML) (visual design applied to prototype) (from Mark Boulton’s notes of the Responsive Design Summit) http://www.markboulton.co.uk/journal/responsive-summit-workflowFriday, October 26, 2012

51.
“Responsive Workflow,” by Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/Friday, October 26, 2012

52.
plan HTML prototyping increase fidelity client deliverables developer deliverable “Responsive Design Workflow,” by Stephen Hay https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012Friday, October 26, 2012

53.
PlanFriday, October 26, 2012

54.
Plan Sketch Prototype Increase Fidelity Iterate/Talk “Websites are systems rather than pages.” —Anna DebenhamFriday, October 26, 2012

55.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Plan (Content First) • A module-based approach • Identify content types/components • Consider the goals and context of each component • Assign priority to every content typeFriday, October 26, 2012

56.
SketchFriday, October 26, 2012

57.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Sketch http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsFriday, October 26, 2012

58.
Normally, you’d whip up some wireframes right about now, but...Friday, October 26, 2012

59.
Plan Sketch Prototype Increase Fidelity Iterate/Talk HTML Prototypes wireframes • Structured (preferably actual) content • Unstyled (maybe a set of generic CSS rules) • Addresses layout, navigation, basic interactivity • Start with single-column layout first • NOT necessarily production qualityFriday, October 26, 2012

60.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Advantages over wireframes • Can begin testing on various devices • You can see how the page behaves at different widths • Gives the client a more realistic experience • May provide a head-start on productionFriday, October 26, 2012

61.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Protyping Tools: Responsive Frameworks • Bootstrap from Twitter (twitter.github.com/bootstrap/) • Foundation (foundation.zurb.com) • Skeleton (getskeleton.com) • 1140 CSS Grid (cssgrid.net) • 320 and Up (stuffandnonsense.co.uk/projects/320andup/)Friday, October 26, 2012

62.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Protyping Tools: Online grid generators Gridset, by Mark Boulton & team Gridpak (gridpak.com) (gridsetapp.com)Friday, October 26, 2012

63.
Increase Fidelity Visual DesignFriday, October 26, 2012

64.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design • Typographic treatments • White space • Color and texture • “Atmosphere”Friday, October 26, 2012

65.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSSFriday, October 26, 2012

66.
“I can’t design in the browser.” ...my designs end up suffering, looking boxy, bland and uninspiring. —Sarah Parmenter www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/Friday, October 26, 2012

67.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks then move to browser asapFriday, October 26, 2012

68.
“I design in Photoshop, but decide in the browser.” —Chris Coyier, css-tricks.com css-tricks.com/conferences/BDConf2012-Workflow.pdfFriday, October 26, 2012

69.
“Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be. Just don’t set the wrong expectations by showing them to your clients.” —Andy Clarke www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/Friday, October 26, 2012

70.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Get design ideas into the browser as soon as possible. (style every content component)Friday, October 26, 2012

71.
Plan Sketch Prototype Increase Fidelity Iterate/Talk CSS shortcut tools • CSS Hat (csshat.com/) — turns Photoshop layer styles to CSS • CSS Professionalizr— cleans up CSS generated by Fireworks CS6 (mattstow.com/css-professionalzr.html) • Adobe Edge Reflow — first WYSIWYG responsive design tool (unreleased) (html.adobe.com/edge/reflow/)Friday, October 26, 2012

72.
Adobe Edge Reflow (html.adobe.com/edge/reflow)Friday, October 26, 2012

73.
Plan Sketch Prototype Increase Fidelity Iterate/Talk Visual Design approaches • “Design in Browser” w/ CSS • Photoshop/Fireworks then “move to browser” early • Treat “look and feel” separately (Style Tiles)Friday, October 26, 2012

74.
Style Tiles (styletil.es) Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. —Samantha WarrenFriday, October 26, 2012

75.
Style Prototypes (built in HTML/CSS, not Photoshop) sparkbox.github.com/style-prototype/Friday, October 26, 2012

76.
Client deliverables in a responsive workflow • Content type inventory (prioritized) • Low-fidelity HTML prototype (layout, interaction) • Style tiles (visual vocabulary) • High-fidelity prototype (working design)Friday, October 26, 2012

77.
But what do you give the developers?!Friday, October 26, 2012

78.
Style GuidesFriday, October 26, 2012

79.
Style Guides • Documents every content component on the site • HTML markup, CSS styles, scripts • Description of how it is used (context, limitations) • Instructions for what happens when it resizesFriday, October 26, 2012

80.
“Style guides are the new Photoshop.” —Stephen Hay speakerdeck.com/u/stephenhay/p/style-guides-are-the-new-photoshop-smashing-conference-2012Friday, October 26, 2012

81.
BBC Global Experience Language (GEL) www.bbc.co.uk/gel/mobile/device-considerations/philosophyFriday, October 26, 2012

82.
Starbucks style guide www.starbucks.com/static/reference/styleguide/Friday, October 26, 2012

83.
South Tees Hospital www.southtees.nhs.uk/style-guide/Friday, October 26, 2012

84.
gim.ie/fZyK Compiled by Anna DebenhamFriday, October 26, 2012

85.
Developer deliverables • High-fidelity prototype • Style guide that describes the system ACTUALLY... it’s likely that the developers have been working in tandem with design all along, so no big HANDOFF.Friday, October 26, 2012

86.
Iterate and TalkFriday, October 26, 2012

87.
Plan Sketch Prototype Increase Fidelity Iterate/Talk www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/Friday, October 26, 2012

88.
Plan Sketch Prototype Increase Fidelity Iterate/Talk www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/Friday, October 26, 2012

89.
So...Friday, October 26, 2012

90.
Key characteristics of new workflow • Design systems, not pages You’ll need to know • HTML & CSS for this part Treat content as mix-n-match modules • Get into HTML/CSS as early in the process as possible • Leave static comps in the dustFriday, October 26, 2012

91.
what are you trying? and, thanks for listening! xo, JenFriday, October 26, 2012