SCULPTING TEXTEASING THE PAIN OF DESIGNING IN THE BROWSER

STEPHEN HAY

PHOTOSHOP

http://store.copicmarker.com/

http://storyboardcentral.blogspot.com/2009/08/harry-borgman-harry-comp-man.html

COMPS FROM THE MARKER ERA (HARRY BORGMAN)

Designing in the browserdoesn't mean designing in the browser.

It means making your comps for the browser.

PAIN POINTS

“ I'm faster and more comfortable in Photoshop. ”

WTF— DAMMIT MOM, I SAIDYOU NEED TO ADD ANALPHA CHANNEL!

You were not born knowing Photoshop.

0

2,5

5

7,5

10

Effectiveness

Photoshop Code

“ I don't see the creativity in code. ”

CASEY REAS, CREATOR OF PROCESSING

One of the biggest problems we have with designing in the browser is that many designers think about layout first.WE NEED TO STOP DOING THAT.

We need to think about structured content first.

PSSST! HTML IS STRUCTURED CONTENT.

(WHEN DONE RIGHT, OF COURSE)

Take actual content, structured with HTML, and start building upon it, incrementally, cumulatively. That is the way of progressive enhancement, and it’s the nature of the Web.

“ ”One technique I've used for years is to “design in text”... not necessarily describing everything in textual form […] essentially what is the message that needs to be communicated if I was only able to provide the user with unstyled HTML?

– Bryan Rieger

Unstyled HTML has benefits.

Because of the focus on content and structure, irrelevant or inappropriate content is easy to spot.

The linear form of structured content helps prepare us for the smallest screens and those environments with the least capabilities.

When you create a plain HTML document, you have created a web page that is “mobile-ready”.

Structured content takes the focus off of containers.

What if we approached responsive design in the spirit of additive sculpture?

WHAT IF WE WENT FROM SIMPLE TO COMPLEX?

Focus on small screens first.

TIP #1

Focus on color & type first.

TIP #2

MAYBE IMAGES AS WELL. BUT NOT LAYOUT (YET).

Use a tool that makes it easy to sketch in code.

TIP #3

JSBIN, CODEPEN, ETC.

Use your browser’s developer design tools.

TIP #4

Sketch before coding.

TIP #5

DO THIS BEFORE EVERY BREAKPOINT.

Expand your browser window until your design looks like $#!%. Time for a breakpoint.

TIP #6

CONTENT & DESIGN, NOT DEVICES, SHOULD DETERMINE BREAKPOINTS.

Avoid ski ballet.

TIP #7

THANK YOU!@stephenhay

Linus by Charles Schulz. Image: https://www.etsy.com/listing/84806498/oversized-vintage-linus-peanuts-postcard

Crocobear image: http://www.reddit.com/r/HybridAnimals/comments/2ldzqq/the_requested_crocobear/

Phil Hawksworth by Luke Wroblewski: https://www.flickr.com/photos/lukew/10453062745/in/set-72157636814608894

Baby images: http://www.morguefile.com/archive/display/910824 and http://www.morguefile.com/archive/display/907077

Full Casey Reas interview: https://www.youtube.com/watch?v=_8DMEHxOLQE