320, 480, 640, 720, 768, 960, 1024… no

320, 480, 640, 720, 768, 960, 1024… NO

Christopher Cochran

Technology is advancing constantly

Web Is More Than Just Screen

Size

Communication

If it’s not important on 3 inches, it’s not important on 13 inches.

Focus and prioritize the constraints of mobile design, not just on the devices.

Design from the bottom up; from the content out.

Design from the bottom up; from the content out.

de·sign \di-ˈzīn\

: to plan and make (something) for a specific use or purpose

http://www.merriam-webster.com/dictionary/design

Communication

Form Follows Function

Treat text as a user interface

Web Design is 95% Typography by Oliver Reichenstein

Think Content 1st

Content Begins with

< Markup />

<h1>Title<h1> !<h2>Sub Heading</h2> !<p>Paragraph Text</p>

Headline subheadlineParagraph Text

A Pixel is Not A pixel

The Web is not a Fixed Medium

Think EM First

Math Is Complicated(Or just being lazy)

Design Responsively

target ÷ context = EM

1.14285714285414

1.15

CPLCharacters Per Line

Typography Dictate Layout

Widths

LET

Set BreakPoints around CONTENT

Not Devices

Explore The Design Where it naturally breaks

ADJUST &

Media Queries Are NOT Just For Layout Changes

Font-Size Line-height Padding Margin

ADJU ST

Height Media Queries

DON’T FORGET ABOUT

Use EM in Media Queries

Don’t Judge Physical Context By Resolution

TV != Higher Resolution

Don’t Limit Experiences

Don’t Display: None;

Performance Is Key

More than A second Can cause the Visitor to interrupt there flow of thought, Creating a Poor Experience

TEST, TEST, TEST

TEST

Don’t Just test Browsers and Devices, But loading on Different Connectivity As well

(Network Link Conditioner - OSX)

Q&A?THANKS!