320, 480, 640, 720, 768, 960, 1024… no
DESCRIPTION
Stop designing around devices, and set pixel dimensions, and start designing around the content.TRANSCRIPT
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!