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

▶
responsive web design
SMART_READER_LITE
LIVE PREVIEW

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

Dec 14, 2023 385 likes •493 views

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

slide-1
SLIDE 1

Responsive Web Design

ATLS 3020 - Digital Media 2 Week 1 - Day 2

slide-2
SLIDE 2

Web Traffic

On average, ⅓ of visitors on a website will be on a mobile device (tablet, phone, etc)

WalkerSands.com/QuarterlyMobileTraffic

slide-3
SLIDE 3

Web Traffic

Apple and Android dominate the market

  • f mobile devices.

However, each device will still have a different screen size.

WalkerSands.com/QuarterlyMobileTraffic

slide-4
SLIDE 4

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/

slide-5
SLIDE 5

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

http://cssmediaqueries.com/target/

960

slide-6
SLIDE 6

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

http://cssmediaqueries.com/target/

720

slide-7
SLIDE 7

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

http://cssmediaqueries.com/target/

480

slide-8
SLIDE 8

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

http://cssmediaqueries.com/target/

320

slide-9
SLIDE 9

Media Queries

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

http://cssmediaqueries.com/target/ #wrapper { width: 960px; } @media only screen and (max-width: 960px) { #wrapper { width: 720px; } } @media only screen and (max-width: 720px) { #wrapper { width: 480px; } } @media only screen and (max-width: 480px) { #wrapper { width: 320px; } }

slide-10
SLIDE 10

Media Queries

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

http://cssmediaqueries.com/target/ #wrapper { width: 960px; } @media only screen and (max-width: 960px) { #wrapper { width: 720px; } } @media only screen and (max-width: 720px) { #wrapper { width: 100%; } }