Slide 1

Slide 1 text

Bridging UX & Web Development Jack Moffett | @jackmoffett Senior Interaction Designer Inmedius, a Boeing Company designaday.tumblr.com Midwest UX 2014

Slide 2

Slide 2 text

“The way we work at Apple is that the complexity of these products really makes it critical to work collaboratively, with different areas of expertise. I think that’s one of the things about my job I enjoy the most. I work with silicon designers, electronic and mechanical engineers, and I think you would struggle to determine who does what when we get together. We’re located together, we share the same goal, have exactly the same preoccupation with making great products.” Sir Jonathan Ive

Slide 3

Slide 3 text

“I get most frustrated when, after providing a pixel-perfect mockup, I see the finished implementation during the testing phase, and it’s drastically different than what I spec’d (fonts, colors, sizes, spacing, alignment, positioning, etc).”

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

What’s your mix? Audio Mix by Sergiu Bacioiu http://www.flickr.com/photos/sergiu_bacioiu/4370021957/

Slide 9

Slide 9 text

“If you’re in a room filled with designers, bring up the topic of whether it’s valuable for a designer to also code. Immediately, the room will divide faster than Moses split the Red Sea. One side will tell you coding is an essential skill, while the other will vehemently argue how it dilutes the designer’s value.” An Event Apart 2010: San Diego - Jared Spool By peterjhart http://www.flickr.com/photos/40054618@N03/5139909661/ Jared Spool

Slide 10

Slide 10 text

Do Designers need to code?

Slide 11

Slide 11 text

Will Learning to Code Make me a better interaction designer?

Slide 12

Slide 12 text

“Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results.”

Slide 13

Slide 13 text

“Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results.”

Slide 14

Slide 14 text

Why HTML/CSS? Syntax Error - Folded Up Beyond All Recognition by Simon Pow http://www.flickr.com/photos/simonpow/252312738/

Slide 15

Slide 15 text

Developers don’t want to spend time adjusting padding. Developers don’t have an eye for visual design details. I don’t want developers mucking with my code. Why HTML/CSS?

Slide 16

Slide 16 text

How much time do you spend creating visual design specifications? It takes less time to implement a layout than to specify it. It takes a lot less time to change a layout in CSS than in Photoshop. Why HTML/CSS?

Slide 17

Slide 17 text

Working in the Production Code I don’t have to ask permission to make changes or ask someone else to make them for me. I know that the final product will be the one that I designed. With great power comes great responsibility.

Slide 18

Slide 18 text

A successful tool is one that was used to do something undreamed of by its author. by katerha http://www.flickr.com/photos/katerha/5746905652/ tools Code editor Browsers with developer tools File comparison tool Issue Tracking Wiki Version control client

Slide 19

Slide 19 text

Code Editor General text editor HTML editor

Slide 20

Slide 20 text

Text Editor Features Syntax coloring Line numbers Code folding Auto-indent Auto-completion Auto-pairing Snippets Find and replace Multiple views Sublime Text

Slide 21

Slide 21 text

HTML Editor Features Projects/sites FTP syncing CSS GUI Live preview Inspector Espresso

Slide 22

Slide 22 text

Text Editors TextWrangler BBEdit TextMate Sublime Text Emmet

Slide 23

Slide 23 text

HTML Editors Espresso Coda TopStyle Dreamweaver Brackets Macaw

Slide 24

Slide 24 text

Browser Developer Tools

Slide 25

Slide 25 text

Browser Developer Tools

Slide 26

Slide 26 text

Browser Developer Tools

Slide 27

Slide 27 text

Browser Developer Tools

Slide 28

Slide 28 text

File Comparison TextWrangler

Slide 29

Slide 29 text

File Comparison FileMerge

Slide 30

Slide 30 text

File Comparison Kaleidoscope

Slide 31

Slide 31 text

Issue Tracking Create items for your design tasks, as well as implementation tasks. Assign tasks to devs when you have completed your work or need something from them. Enter issues/bugs against the application for yourself or others. May integrate with your code repository, showing check-ins.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Wiki Subscribe to see what the developers are thinking. Document your own thinking so it is available to them.

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Version Control Subversion (SVN) • Versions • Cornerstone • TortoiseSVN Git • GitHub • Mercurial • GitBox • Tower • SourceTree

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Exercise 1

Slide 38

Slide 38 text

Formatting Standards Geodesic shapes on Project Eden, Cornwall dome by Elias Gayles http://www.flickr.com/photos/elias_daniel/6019904580/

Slide 39

Slide 39 text

Formatting Standards Create and enforce coding standards for your CSS. Whitespace matters: pick tabs or a specific number of spaces for indentation. Define consistent rules for comments.

Slide 40

Slide 40 text

Formatting Standards • Use one discrete selector per line in multi-selector rulesets. • Include a single space before the opening brace of a ruleset. • Include one declaration per line in a declaration block. • Use one level of indentation for each declaration. • Include a single space after the colon of a declaration. • Use lowercase and shorthand hex values, e.g., #aaa. • Use single or double quotes consistently. Preference is for double quotes, e.g., content: "". • Quote attribute values in selectors, e.g., input[type="checkbox"]. • Where allowed, avoid specifying units for zero-values, e.g., margin: 0. • Include a space after each comma in comma-separated property or function values. • Include a semi-colon at the end of the last declaration in a declaration block. • Place the closing brace of a ruleset in the same column as the first character of the ruleset. • Separate each ruleset by a blank line. Nicolas Gallagher Idiomatic CSS

Slide 41

Slide 41 text

Exercise 2

Slide 42

Slide 42 text

OOCSS Component by UWW ResNET http://www.flickr.com/photos/uwwresnet/7303916202/

Slide 43

Slide 43 text

What is the biggest benefit of using Cascading Style Sheets?

Slide 44

Slide 44 text

ReuSe

Slide 45

Slide 45 text

OOCSS Don’t design your CSS for now. Design it for the future. Instead of a mile-long stylesheet with roll-of-the-dice inheritance, you’ll have an understandable, easily maintainable library of documented components.

Slide 46

Slide 46 text

Ground Rules Share the HTML, own the style sheet Comment your code Silly designer, IDs are for devs Just say “No!” to embedded styles Use sprites

Slide 47

Slide 47 text

OOCSS Separation of structure from skin

Slide 48

Slide 48 text

OOCSS Separation of structure from skin Separation of container from content

Slide 49

Slide 49 text

Exercise 4

Slide 50

Slide 50 text

Exercise 5

Slide 51

Slide 51 text

OOCSS Separation of identity and state Separation of structure from skin Separation of container from content

Slide 52

Slide 52 text

OOCSS As CSS advances and implementations improve, more and more is possible purely using style sheets and without the need for additional scripting on either a site’s front- or back-end, which reduces the amount of executable code. Meitar Moscovitz

Slide 53

Slide 53 text

Exercise 6

Slide 54

Slide 54 text

Exercise 7

Slide 55

Slide 55 text

Test Harness Harness by Marvin Spencer https://www.flickr.com/photos/marv1nalon3/2082905146/in/photostream/

Slide 56

Slide 56 text

Exercise 9

Slide 57

Slide 57 text

Resources Nicole Sullivan: http://www.stubbornella.org/ OOCSS Wiki: https://github.com/stubbornella/oocss/wiki Brian Cavalier: http://blog.briancavalier.com Roberto Clemente Bridge in Pittsburgh by Brook Ward https://flic.kr/p/dAWcYQ

Slide 58

Slide 58 text

Credits Typefaces: Blanch, by Atipus Myriad Pro, by Adobe Survey visualizations created with Parallel Sets by Robert Kosara.

Slide 59

Slide 59 text

1. State of the Industry 2. Looking for Group 3. Collaboration Life Cycle 4. Why HTML and CSS? 5. Tooling Up 6. Formatting Standards 7. OOCSS 8. Owning Behavior 9. Looking Toward the Horizon Chapter

Slide 60

Slide 60 text

Thank you Jack Moffett | @jackmoffett Senior Interaction Designer Inmedius, a Boeing Company designaday.tumblr.com jackmoff[email protected]