the page is dead - sxswi 2012

JacobSurber

Wednesday, March 14, 12

Jacob SurberProduct Manager HTML Design

@jacobsurber

History of the PageWednesday, March 14, 12

Source: www://historyo!nformation.com Wednesday, March 14, 12

Source: www://historyo!nformation.com

Early MesopotamiaStamping

~2275 BC

~2275 BC~1700 BC

Cylinder Seals

~2275 BC~1700 BC

Cylinder Seals

Made in China

~625 AD

Movable type is invented

Source

Johannes Gutenberg

PROTESTS!

PROTESTS!May 1472:Scribes in Italy a"empt to block competition

“strangers who print volumes” Wednesday, March 14, 12

1755Information Overload

Denis Diderot

It will be almost as convenient to search for some bit of truth concealed in nature as it will be to !nd it hidden away in an immense multitude of bound volumes."

Thomas JeffersonFeb 1791

". . . let us save what remains: not by vaults and locks which fence them from the public eye and use in consigning them to the waste of time, but by such a multiplication of copies, as shall place them beyond the reach of accident."

April 1811

19571955

1984Apple introduces the Mac

Rise of the

MACHINE

19821991

<HTML>December 1997HTML 4.0 was published as a W3C Recommendation

Source: h"p://news.cnet.com/8301-1023_3-10425965-93.html

People

use the

Internet

Source: conmoz.org

Mobile device

explosion

Source: Morgan Stanley

Consuming data at an

unprecedented rate

Source: www.seesparkbox.com

So many screen so li"le time

Option 1

Option 1m.website.com

Option 1m.website.comipad.website.com

Option 1m.website.comipad.website.comipad.landscape.website.com

Option 1m.website.comipad.website.comipad.landscape.website.comiphone.4s.website.com

I’m a lazy panda

Source: vi3x.deviantart.com/art/One-Ring-v3-53651274

Option 2

Option 2Build a responsive site

m.youDomain.com

Source: h"p://www.#ickr.com/photos/zeldman/4009817823/Wednesday, March 14, 12

Responsive Web Designdefines control differently

AikidoDe!nes a !rm center and a so$, adaptable periphery

Source: www.nytimes.comWednesday, March 14, 12

Source: www.bostonglobe.comWednesday, March 14, 12

SourceWednesday, March 14, 12

Source: h"p://www.#ickr.com/photos/superpope/4835938176/

EthanMarco"e

May 2010

June 2011

h!p://upstatement.com/blog/2012/01/how-to-approach-a-

responsive-design/

Flexible or !uid grid

Flexible images & media

Media queries

Source: h"p://www.#ickr.com/photos/threedots/115805043/

How do you build a modern

news paper?

One piece of type at a time

Flexible GridWednesday, March 14, 12

GoldenGrid

FixedGrid

vs vsFluidGrid

Source: www.pelican#y.co.uk/

FixedGrid

SourceWednesday, March 14, 12

FluidGrid

target / context = result

1024 px

960 px

12 columns60 px

472 px230 px 230 px

target / context = resulttarget / context = result

472 / 960 = 49.16666%

230 / 960 = 23.95833%

49.16666%23

Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12

Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.html

31.875%

65.9375%

Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12

GoldenGrid

1:1.61803399

h"p://www.anderssonwise.com/Wednesday, March 14, 12

Layout is an enhancement

Media Query Specwidth

height

device width

device height

orientation

aspect-ratio

device aspect ratio

color-index

monochrome

resolution

height

device width

device height

orientation

aspect-ratio

device aspect ratio

color-index

monochrome

resolution

height

device width

device height

orientation

aspect-ratio

device aspect ratio

color-index

monochrome

resolution

widthorientation

height

device width

device height

orientation

aspect-ratio

device aspect ratio

color-index

monochrome

resolution

-webkit-device-pixel-ratio

widthorientation

Media Queries

[ Defaults, your most common styles de!ne !rst ]

@media screen (min-width: 1024px) and (max-width: 1220px) { ... }@media screen (min-width: 768px) and (max-width: 1023px) { ... }@media screen (min-width: 480px) and (max-width: 767px) { ... }@media screen (min-width: 320px) and (max-width: 479px) { ... }

Know your audience

Source: www.apple.com

“the iPad”

2048 x 1536 px

9.7 inches

265 PPIWednesday, March 14, 12

from pixels

"If we use these techniques right [HTML and CSS3], we can get rid of half of the images on the web, because they're used for styling." -- Håkon Wium Lie, Opera

“Best practices”

“Best practices”Start with low res graphics !rst

Be resolution independent• CSS• SVG• @font-face

Source: h"p://menacingcloud.com/

Edward Cant@OpticSwerve

Hierarchy

HierarchyHow you convey importance

Hierarchy

How you structure your DOM

How you convey importance

Hierarchy

How you structure your DOM

How you convey importance

It’s important

Source: www.nytimes.comWednesday, March 14, 12

Source: www.nytimes.com

FAILWednesday, March 14, 12

Don’t die by the grid

%ink about“modules”of information

DOM order

Source: us.illyissimo.com/

Interaction on mobile

screens• Different kinds of menu options

• optimize for touch

Source: us.illyissimo.com/Wednesday, March 14, 12

Be task oriented

What do you hope your use to do?

Be task oriented

How long will users spend?

Be task oriented

How long will users spend?

Where are they going to be?

Source: h"p://stephencaver.com/Wednesday, March 14, 12

Flexible images and content

img { max-width: 100%;}

h!ps://github.com/"lamentgroup/Responsive-Images

h!p://www.w3.org/community/respimg/

CSS Regions and Exclusions

Source: h"p://www.html5rocks.com/en/tutorials/#exbox/quick/

%e Flexible Box Modelbox-orient

box-pack

box-align

box-flex

box-flex-group

box-ordinal-group

box-direction

box-lines

box-pack

box-align

box-flex

box-flex-group

box-ordinal-group

box-direction

box-lines

box-pack

box-align

box-flex

box-flex-group

box-ordinal-group

box-direction

box-lines

Source: h"ps://github.com/stubbornella/oocss/wiki

Object oriented CSS

Next15

MinutesWednesday, March 14, 12

Frameworks

• HTML5 Boilerplate

• Skeleton Grid

• Bootstrap

Stuff to read

• Responsive Web Design - Ethan Marco"e

• h"p://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

• www.alistapart.com

• h"p://www.stuffandnonsense.co.uk/

jacobsurber.com@jacobsurber

the page is dead - sxswi 2012

fluid gridwednesday

flexible gridwednesday

fluid gridtarget context

responsive sitesource

cylinder sealsmovable

piece of type

manyscreen solittle

public eyeand use inconsigning

Design

things i learned at sxswi 2010

sxswi 2011

the home page is dead

mec@sxswi 2015 key takeaways and trends

social customer experience - sxswi 2014

social capital sxswi 2011

mindshare@sxswi 2016: the takeaways for marketers

sxswi 2012: thoughts from a marketer

diy/ maker comics sxswi 2013 jody culkin

fluid web typography - sxswi 2010

sxswi 2013- building a better ux résumé

sxswi 2012 sketch notes

10 ideas from sxswi

field notes from sxswi

shopify at sxswi 2011

digital mission to sxswi 2010 brochure

sxswi 2010 engaging the queer community

jb emfl sxswi promos 2011

bestofjess sxswi promos 2011

dell's guide to sxswi