Bridging the Gap

E X P E R I E N C E , D E S I G N A N D D E V E L O P M E N T C O L L A B O R AT I O N

Jeremy Bierly - bierly.net - @jbierly

ChicagoPhotoConcepts - Raf Winterpacht

Isobar - isobar.com - @isobarUS

How to take our web projects to the next level?

T H E P R O B L E M

Communication Breakdown - flickr, anam_uk

When a web project loses design fidelity, that is as much a communication problem as it is a technical one.

http://giphy.com/gifs/reaction-office-space-gary-cole-aAqGpWoSgGjnO

Talking on the Telephone - flickr, judy_and_ed

We have to change the way we communicate with new deliverables.

T H E S O L U T I O N

Sharing - flickr, Josh Harper

A PSD is a painting of a website.

“- M I K E M O N T E I R O

“Why We Don’t Deliver Photoshop Files”

Device Landscape - flickr, Jeremy Keith

The flexible nature of the web is a feature, not a bug.

Frist Website - http://info.cern.ch/hypertext/WWW/TheProject.html

Each web project gets a custom bootstrap that provides examples of the design system.

L I V I N G S T Y L E G U I D E S B U I LT W I T H H T M L A N D C S S

Brad Frost at An Event Apart Chicago 2014 - flickr, Zeldman

We’re not designing pages, we’re designing systems of components.

“- S T E P H E N H AY

BDCONF Orlando 4/15/2012

- Josh Duck

HTML Periodic Table

Atomic Design - Brad Frost

What apps can help us get better results.

T H E T O O L S

Adobe Brackets

T H E T O O L S

Adobe Edge Reflow

T H E T O O L S

Macaw

T H E T O O L S

Webflow

T H E T O O L S

Typecast

T H E T O O L S

Good design is constant contact

“- M A R K O T T O

“markdotto.com”

Image optimization and rendering are critical for performance.

C O L L A B O R AT E O N I M A G E , G R A P H I C A N D I C O N R E N D E R I N G

Gulp - gulpjs.com

Grumpicon - filament group

TinyPNG.com

How are you handling custom web fonts and do you have the rights to the type face?

D I S C U S S W E B T Y P O G R A P H Y E A R LY & O F T E N

Typography: ‘Caslon Pro Tells Story’ - flickr/Karen Poon

WebTypography.net

The best compromises are reached when both sides understand the issues of the other.

“

- R I C H A R D R U T T E R

Use a CSS preprocessor like SASS or LESS to manage colors for your stylesheet.

C R E AT E A C O L O R R E F E R E N C E

Google Chrome Buttons - ntr23

Chrome Developer Tools

T H E T O O L S

Chrome DevTools allow one to make changes to elements of the webpage or the CSS and see changes immediately. Workspaces saves those changes to disk without having to leave the browser.

W O R K S PA C E S - P E R S I S T E N T A U T H O R I N G I N T H E D E V T O O L S

Jack Johnson Surfing - flickr, Kanaka Menhune

I’ll find an example ‘In the Wild’

“- S T E P H A N I E D I B I A S E

codepen.io

SnappySnippet is a DevTools extension that allows you to extract CSS and HTML from selected DOM subtree (last inspected element). Then, with just one click, you can send selected code to CodePen, jsFiddle or JS Bin.

S N A P P Y S N I P P E T

Thank You.“- J E R E M Y B I E R LY