learning to love html and css

learning to love html

(for grumpy developers)

@jongalloway

hi!

http://weblogs.asp.net/jgalloway

why?

falling in love

the honeymoon

marriage counseling

why?

lessons from javascript

falling in love

what does a document offer?

structured content

not design

not logic

why?

it’s what we share

with designers

with our users

the only code you write that the world sees

falling in love

avoiding the cheap floozycode smells

difficult to maintain

trapped

supporting browsers (and versions)

reliance on grids / frameworks / tools

falling in love

love it for what it is…

a document format

falling in love

document vs. application

tools

developers

but you deliver documents

true love

♥ html

the honeymoon

joy!clean code (occupy your codebase!)

the honeymoon

joy!

clean code is flexible

(story time)

the honeymoon

joy!

adaptive layout

the honeymoon

joy!

seo: a structured document is machine readable

the honeymoon

clear communication

semantic markup is easier, cleaner

asp.net templates

the honeymoon

selectors get so easy!

css

jquery

testing

$('section.mentions header img').hide()

marriage counseling

marriage counseling

your html as an api

separation of concerns

smoothly factored pieces agree

marriage counseling

browsersstop fixating on browsers

you are not your browser

your browser doesn’t matter to users

land of a thousand browsers

common ground

resets? okay…

normalize is better!http://necolas.github.com/normalize.css/

marriage counseling

progressive enhancement

build for your main use case

enhance using feature detection

marriage counseling

progressive enhancement

shim for downlevel

modernizr

conditional comments

content fallback

marrige counseling

… let’s talk ie

quirks mode! (watch doctype)

marrige counseling

… let’s talk ie

developer tools

document mode (rendering)

browser mode (requesting)

marriage counseling

pixel hell

users don’t count pixels

marriage counseling

pixel hell

avoiding pixel hell

get there first

get out of mockup mode

photoshop is not a web standard

marriage counseling

positioning and layout

floats

http://css.maxdesign.com.au/floatutorial/

marriage counseling

positioning and layout

floats

float one way

marriage counseling

positioning and layout

padding / margins

use developer tools

use page inspector

marriage counseling

focus on a structured documentstart with an outline – like writing

keep things structured

refactor (?!)

learning to love html

(for grumpy developers)

@jongalloway