View
216
Download
3
Embed Size (px)
DESCRIPTION
Brief overview about difference of adaptive and responsive web design, main principles of build responsive layout, and main component of responsive layout is media query.
Citation preview
CSS3 Media Queries and Creating Adaptive LayoutsBY SVITLANA IVANYTSKA
“As a web developer you should target multiple (all)
devices”
ADAPTIVE VS RESPONSIVE
ADAPTIVE VS RESPONSIVE
MAIN CONCEPTS OF ADAPTIVE DESIGN
progressive enhancement
mobile first
ADAPTIVE WEB DESIGN
“Adaptive Web Design (AWD) uses predefined layouts that have been carefully constructed for a variety of screen sizes.”
RESPONSIVE WEB DESIGN
“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices.”
MAJOR ASPECTS
SITE SPEED
COMPLEXITY OF DEVELOPMENT
SEO
MAIN PRINCIPLES
FLEXIBLE GRID-BASED LAYOUTS
FLEXIBLE MEDIA
MEDIA QUERIES
FLEXIBLE LAYOUTS
relative length units(%, em)
fixed measurement units(px or in)
FLEXIBLE GRIDtarget ÷ context = result
.container { width: 538px;}section, aside { margin: 10px;}section { float: left; width: 340px;}aside { float: right; width: 158px;}
CSS
<div class="container"> <section>...</section> <aside>...</aside></div>
HTML
section, aside { margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */}section { float: left; width: 63.197026%; /* 340px ÷ 538px = .63197026 */}aside { float: right; width: 29.3680297%; /* 158px ÷ 538px = .293680297 */}
FLEXIBLE IMAGES
FLEXIBLE MEDIAimg, video, canvas { max-width: 100%;}
img { max-width: 100%; height: auto;}
.container{ overflow: hidden;}
MEDIA QUERIES
“Media Queries is a CSS3 module allowing content rendering to adapt to a specific range of output devices without having to change the content itself.”
DECLARE MEDIA QUERY
As in media types, there are three ways to invoke media-query-dependent styles:
<link rel="stylesheet" type="text/css" media="all and (color)" href="/style.css">
@import url("/style.css") all and (color);
@media all and (color) { /* one or more css rule here… */ }
First of all, as stylesheets in the link element of HTML:
In CSS stylesheets using @import rules:
And finally, using @media rules:
SYNTAX
@media type and (expression){ ... }
screen
printer tv
projector
css codeintegration
css ruleorientation
coloraspect ratio
resolution
width/height
MEET THE MEDIA TYPES: ALL
Description: All devices listen to this
MEDIA TYPE: SCREEN
Description: Used primary for color computer screens and smartphones.
MEDIA TYPE: PRINT
Description: Used for paged material and for documents viewed on screen in print preview mode.
MEDIA TYPE: TV
Description: Used for television-type devices (low resolution, color, limited-scrollability screens, sound available)
ADDITIONAL MEDIA TYPES
handheld projection braille embossed speech tty
MEET THE FEATURESThe following table contains the media features listed in the latest W3C recommendation for media queries.
Feature Value Min/Max Descriptionwidth length yes Display widthheight length yes Display heightdevice-width length yes Device widthdevice-height length yes Device heightorientation portrait or landscape no Device orientationaspect-ratio ratio (w/h) yes Ratio of width to heightdevice-aspect-ratio ratio (w/h) yes Ratio of device-width to device-heightcolor integer yes Number of bits per color component
color-index integer yes Number of entries in the output device’s color lookup table
monochrome integer yes Number of bits per pixel in the monochrome frame buffer
resolution resolution yes Density of pixels of output device, (integer followed by dpi or dpcm)
MEDIA FEATURE: WIDTH/HEIGHT
Value: <length>Media: all, but not speech (visual, tactile)Accepts min/max prefixes: yes
/* width */@media screen and (max-width: 600px) { ... }@media screen and (min-width:200px) and (max-width:400px) { ... }
/* height */@media screen and (max-height:768px) { ... }@media (min-height:500px) and (max-height:580px) { ... }
MEDIA FEATURE: ORIENTATION
Value: <length>Media: handheld, print, projection, screen, tty, tv
@media screen and (orientation: portrait) { … }
@media screen and (orientation: landscape) { … }
MEDIA FEATURE: RESOLUTION
Value: <resolution>Media: handheld, print, projection, screen, tvAccepts min/max prefixes: yes
/* apply to devices with at least 300 dots per inch of resolution: */@media print and (min-resolution: 300dpi) { ... }
/* to replace the old (min-device-pixel-ratio: 2) syntax: */@media screen and (min-resolution: 2dppx) { ... }
LOGICAL OPERATORS
Using logical operators in media queries such as: AND
NOT
ONLY
OR (COMMA-SEPARATED LISTS)
@media all and (color) { ... }
@media not screen and (color) { ... }
@media only screen and (orientation: portrait) { ... }
@media all and (orientation: landscape), all and (min-width: 480px) { ... }
WEB BROWSER SUPPORT
SUPPORT OLD BROWSERS
css3-mediaqueries.js
make CSS3 Media Queries work in all browsers (JavaScript library) starts from:
IE 5+ Firefox 1+ Safari 2
EXAMPLE: NON-RESPONSIVE
https://www.apple.com/http://www.amazon.com/ https://www.usps.com/
EXAMPLE: RESPONSIVE
http://mediaqueri.es/
CSS3 MEDIA QUERIES ARE HERE TODAY!
A SINGLE WEBSITE
A SINGLE URL
EASY SEO AND MARKETING
LOW COST
RESOURCES Aaron Gustafson, Adaptive Web Design: Crafting Rich Experiences with
Progressive Enhancement. — Easy Readers, 2011. Ben Frain, Responsive Web Design with HTML5 and CSS3. — Packt
Publishing Ltd, 2012. Ethan Marcotte, Responsive Web Design. — A Book Apart, 2011. Luke Wroblewski, Mobile First. — A Book Apart, 2011.