320, 480, 640, 720, 768, 960, 1024… NO
-
Upload
christopher-cochran -
Category
Design
-
view
1.915 -
download
4
description
Transcript of 320, 480, 640, 720, 768, 960, 1024… NO
![Page 1: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/1.jpg)
320, 480, 640, 720, 768, 960, 1024… NO
Christopher Cochran
![Page 2: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/2.jpg)
Technology is advancing constantly
![Page 3: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/3.jpg)
Web Is More Than Just Screen
Size
![Page 4: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/4.jpg)
Communication
![Page 5: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/5.jpg)
If it’s not important on 3 inches, it’s not important on 13 inches.
![Page 6: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/6.jpg)
Focus and prioritize the constraints of mobile design, not just on the devices.
![Page 7: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/7.jpg)
Design from the bottom up; from the content out.
![Page 8: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/8.jpg)
Design from the bottom up; from the content out.
![Page 9: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/9.jpg)
de·sign \di-ˈzīn\
: to plan and make (something) for a specific use or purpose
http://www.merriam-webster.com/dictionary/design
![Page 10: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/10.jpg)
Communication
![Page 11: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/11.jpg)
Form Follows Function
![Page 12: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/12.jpg)
Treat text as a user interface
Web Design is 95% Typography by Oliver Reichenstein
![Page 13: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/13.jpg)
Think Content 1st
![Page 14: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/14.jpg)
Content Begins with
< Markup />
![Page 15: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/15.jpg)
<h1>Title<h1> !<h2>Sub Heading</h2> !<p>Paragraph Text</p>
![Page 16: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/16.jpg)
Headline subheadlineParagraph Text
![Page 17: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/17.jpg)
A Pixel is Not A pixel
![Page 18: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/18.jpg)
The Web is not a Fixed Medium
![Page 19: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/19.jpg)
Think EM First
![Page 20: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/20.jpg)
Math Is Complicated(Or just being lazy)
![Page 21: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/21.jpg)
Design Responsively
![Page 22: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/22.jpg)
target ÷ context = EM
![Page 23: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/23.jpg)
1.14285714285414
![Page 24: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/24.jpg)
1.15
![Page 25: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/25.jpg)
CPLCharacters Per Line
![Page 26: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/26.jpg)
Typography Dictate Layout
Widths
LET
![Page 27: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/27.jpg)
Set BreakPoints around CONTENT
Not Devices
![Page 28: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/28.jpg)
Explore The Design Where it naturally breaks
ADJUST &
![Page 29: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/29.jpg)
Media Queries Are NOT Just For Layout Changes
![Page 30: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/30.jpg)
Font-Size Line-height Padding Margin
ADJU ST
![Page 31: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/31.jpg)
Height Media Queries
DON’T FORGET ABOUT
![Page 32: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/32.jpg)
Use EM in Media Queries
![Page 34: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/34.jpg)
Don’t Judge Physical Context By Resolution
![Page 35: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/35.jpg)
TV != Higher Resolution
![Page 36: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/36.jpg)
Don’t Limit Experiences
![Page 37: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/37.jpg)
Don’t Display: None;
![Page 38: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/38.jpg)
Performance Is Key
![Page 39: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/39.jpg)
More than A second Can cause the Visitor to interrupt there flow of thought, Creating a Poor Experience
![Page 40: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/40.jpg)
TEST, TEST, TEST
![Page 41: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/41.jpg)
TEST
![Page 42: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/42.jpg)
Don’t Just test Browsers and Devices, But loading on Different Connectivity As well
(Network Link Conditioner - OSX)
![Page 43: 320, 480, 640, 720, 768, 960, 1024… NO](https://reader035.fdocuments.us/reader035/viewer/2022062405/555d67c7d8b42a687b8b480a/html5/thumbnails/43.jpg)
Q&A?THANKS!