SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
320, 480, 640, 720,
768, 960, 1024… NO
Christopher Cochran
Technology is

advancing
constantly
Web
Just
Screen
Is More Than

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
subheadline

Paragraph 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
CPL
Characters Per Line
LET

Typography

Dictate Layout

Widths
Set BreakPoints

around CONTENT

Not Devices
Explore
The Design Where it

&

naturally
breaks

ADJUST
Media Queries
Are NOT Just For

Layout Changes
A

D

J

U

S

T

Font-Size
Line-height
Padding
Margin
DON’T FORGET ABOUT

Height
Media Queries
Use EM in Media Queries
320, 480, 640, 720, 768, 960, 1024… NO
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)
THANKS!

Q&A?

Weitere ähnliche Inhalte

Ähnlich wie 320, 480, 640, 720, 768, 960, 1024… NO

Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignJohannes Ippen
 
WEB DESIGNING.pdf
WEB DESIGNING.pdfWEB DESIGNING.pdf
WEB DESIGNING.pdfArchanaG64
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Processugencarelle
 
ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsGilbert Guerrero
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsiteZoaib Mirza
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuNASSCOM
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverablesnathanacurtis
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email DesignBrian Graves
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Thinkful
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobileformfunction
 
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive DesignZURB
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTREgroversimrans
 
How develop a web application?
How develop a web application?How develop a web application?
How develop a web application?Md Ekram
 
Presentation 1.pptx
Presentation 1.pptxPresentation 1.pptx
Presentation 1.pptxGravityboi
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webJoe Arcuri
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDave Malouf
 

Ähnlich wie 320, 480, 640, 720, 768, 960, 1024… NO (20)

Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial Design
 
WEB DESIGNING.pdf
WEB DESIGNING.pdfWEB DESIGNING.pdf
WEB DESIGNING.pdf
 
The Professional Design Process
The Professional Design ProcessThe Professional Design Process
The Professional Design Process
 
ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page Comps
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Smart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basuSmart Tips for Wireframing by Indrajit basu
Smart Tips for Wireframing by Indrajit basu
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
Website design
Website designWebsite design
Website design
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
 
3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design3 Ways to Go Mobile First with Responsive Design
3 Ways to Go Mobile First with Responsive Design
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
How develop a web application?
How develop a web application?How develop a web application?
How develop a web application?
 
Create webpages
Create webpagesCreate webpages
Create webpages
 
Presentation 1.pptx
Presentation 1.pptxPresentation 1.pptx
Presentation 1.pptx
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Designing Powerful Web Applications - Monterey
Designing Powerful Web Applications - MontereyDesigning Powerful Web Applications - Monterey
Designing Powerful Web Applications - Monterey
 

Kürzlich hochgeladen

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 

Kürzlich hochgeladen (18)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 

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