Responsive Web Design ATLS 3020 - Digital Media 2 Week 1 - Day 2 - PowerPoint PPT Presentation

Responsive Web Design ATLS 3020 - Digital Media 2 Week 1 - Day 2

Web Traffic On average, ⅓ of visitors on a website will be on a mobile device (tablet, phone, etc) WalkerSands.com/QuarterlyMobileTraffic

Web Traffic Apple and Android dominate the market of mobile devices. However, each device will still have a different screen size. WalkerSands.com/QuarterlyMobileTraffic

Common (Logical) Resolutions 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 iPhone 6 Plus 736 x 414 iPhone 6 667 x 375 Galaxy S5/S4/S3 640 x 360 iPhone 5 568 x 320 iPhone 4 480 x 320 http://cssmediaqueries.com/target/

Common (Logical) Resolutions 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 768 x 1024 iPhone 6 Plus 736 x 414 414 x 736 iPhone 6 667 x 375 375 x 667 Galaxy S5/S4/S3 640 x 360 360 x 640 iPhone 5 568 x 320 320 x 568 iPhone 4 480 x 320 320 x 480 960 http://cssmediaqueries.com/target/

Common (Logical) Resolutions 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 768 x 1024 iPhone 6 Plus 736 x 414 414 x 736 iPhone 6 667 x 375 375 x 667 Galaxy S5/S4/S3 640 x 360 360 x 640 iPhone 5 568 x 320 320 x 568 iPhone 4 480 x 320 320 x 480 720 http://cssmediaqueries.com/target/

Common (Logical) Resolutions 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 768 x 1024 iPhone 6 Plus 736 x 414 414 x 736 iPhone 6 667 x 375 375 x 667 Galaxy S5/S4/S3 640 x 360 360 x 640 iPhone 5 568 x 320 320 x 568 iPhone 4 480 x 320 320 x 480 480 http://cssmediaqueries.com/target/

Common (Logical) Resolutions 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 768 x 1024 iPhone 6 Plus 736 x 414 414 x 736 iPhone 6 667 x 375 375 x 667 Galaxy S5/S4/S3 640 x 360 360 x 640 iPhone 5 568 x 320 320 x 568 iPhone 4 480 x 320 320 x 480 320 http://cssmediaqueries.com/target/

Media Queries 17’ Laptop (Mac) 1920 x 1200 #wrapper { width: 960px; } 15’ Laptop (Mac) 1440 x 900 @media only screen and (max-width: 960px) { 13’ Laptop (Mac) 1280 x 800 #wrapper { width: 720px; } iPad/iPad Mini 1024 x 768 768 x 1024 } iPhone 6 Plus 736 x 414 414 x 736 @media only screen and (max-width: 720px) { iPhone 6 667 x 375 375 x 667 #wrapper { width: 480px; } Galaxy S5/S4/S3 640 x 360 360 x 640 } iPhone 5 568 x 320 320 x 568 @media only screen and (max-width: 480px) { iPhone 4 480 x 320 320 x 480 #wrapper { width: 320px; } } http://cssmediaqueries.com/target/

Media Queries 17’ Laptop (Mac) 1920 x 1200 15’ Laptop (Mac) 1440 x 900 #wrapper { width: 960px; } 13’ Laptop (Mac) 1280 x 800 iPad/iPad Mini 1024 x 768 768 x 1024 @media only screen and (max-width: 960px) { #wrapper { width: 720px; } iPhone 6 Plus 736 x 414 414 x 736 } iPhone 6 667 x 375 375 x 667 Galaxy S5/S4/S3 640 x 360 360 x 640 @media only screen and (max-width: 720px) { #wrapper { width: 100%; } iPhone 5 568 x 320 320 x 568 } iPhone 4 480 x 320 320 x 480 http://cssmediaqueries.com/target/