1. Responsive Design

2. Responsive Design Technique for building webpages
Allows you to present the same content in different ways to different devices
Create conditions for applying specific CSS styles Ex: detects visitor’s screen size and orientation, changes layout and content accordingly

3. Responsive Design Approach
Makes use of flexible/fluid layouts, flexible images, and media queries
viewport meta element
fluid layout flexible images css media queries

4. Setting Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
Tells the browser to set the width of the viewport equal to the width of the device screen (width=device-width) *turns a regular webpage into a responsive page
Why? To fit standard websites onto small screens, mobile browsers render the page on a canvas called the viewport and then shrink that viewport down to fit the width of the screen (device width).
For example: on iPhones, Mobile Safari sets the viewport width to 980 pixels, so a web page is rendered as though it were on a desktop browser window set to 980 pixels wide. But that rendering gets shrunk down to 320 pixels wide (portrait orientation) viewport element is a re-set – telling the browser to set the width of the content to the width of the device itself, and to scale that content to 1 on load

5. Responsive Design Approach
viewport meta element
fluid layout page area and columns within the page get wider or narrower to fill the available space created by specifying widths in percentages (or em) values

6. Responsive Design Approach
viewport meta element
fluid layout flexible images images scale down to fit the size of their container
img { max-width: 100% }
*be sure there are no width and height attributes in the img element so the image scales proportionally
When the layout gets smaller, the images will scale down to fit the width of the container they are in When the container is larger than the image – the image does not scale larger; it stops at 100% of its original size

7. Responsive Design Approach
Media queries allow you to combine media types with media features and expressions to control when styles are applied
uses conditional logic to filter when styles are applied

8. Responsive Design Approach
media types allow you to serve different styles to multiple devices based on device type
ex: one set of styles to screen devices and another to a printer

9. Media Types all: styles apply to all devices
print: used for printers and other print-related displays
speech: for screen-readers
screen: matches all devices that are not print or speech (computer screens, tablets, smart-phones, etc.)

10. Responsive Design Approach
Media queries can also evaluate specific media features such as width, orientation, and resolution
Complete list:

11. Media Features Has same syntax as CSS properties
Used to describe the requirements of a device
Specifies a single feature of the device (e.g., width, height, device orientation, and more)
Most common = width

12. Media Query Syntax
Media queries are added to CSS files using keyword and curly braces { } to contain the CSS.
@media (max-width: 400px) {
.selector {
… } }
/* Both declarations are the same.*/ (defaults to all if no type is defined
@media all and (max-width: 400px) { } @media (max-width: 400px) { }

13. Media Query Syntax
Example – media queries added to a style media screen { //styles }
Determines whether the media type is a screen & whether it is at least 480px wide (greater or equal to 480px) - implies base styles (default style when media condition is not met) will kick in at narrow screen sizes (mobile-first)
Tests whether the screen is less than or equal to 700px wide and is in landscape orientation device must pass all of the requirements in order to deliver the enclosed styles – implies base styles will take affect at wider screen sizes

14. Media Query Syntax Media queries in the document head
Media queries can also be carried out with the media attribute in the <link> element to conditionally load separate .css files when the conditions are met
link element syntax
<link rel=“stylesheet” type=“text/css” href=“styles.css” media=“screen”>

15. Media Queries
Use of media queries media features allow content to adapt to conditions such as screen size, orientation, resolution, etc.
Most common media feature =width commonly known as breakpoints
Breakpoint: The point at which the media query delivers a new set of styles
often 3 designs targeted at: phone/tablet/desktop

16. Screen Sizes

17. Screen Sizes

18. Screen Sizes

19. Choosing Breakpoints

20. Media Feature: Width
Use a min- or max- prefix to specify a greater than or less than condition min-width: 800px /*equal to 800px or larger */
max-width: 400px /*equal to 400px or less */

21. Media Query Syntax
Example – media queries added to a style media screen { //styles }
Determines whether the media type is a screen & whether it is at least 480px wide (greater or equal to 480px) - implies base styles (default style when media condition is not met) will kick in at narrow screen sizes (mobile-first)
Tests whether the screen is less than or equal to 700px wide and is in landscape orientation device must pass all of the requirements in order to deliver the enclosed styles – implies base styles will take affect at wider screen sizes

22. Choosing Breakpoints Phone:640X960 Tablet:1024X768 Desktop:1280X720
Mobile-first approach
Best practice Style for smallest first Use media queries to bring in overriding styles that adapt the design as more display real estate and features become available (progressive enhancement)
Often begin with the min- prefix
Bringing in new styles when the width is at least the specified width or larger
Phone:640X960 Tablet:1024X768 Desktop:1280X720
Bootstrap 3 media queries (mobile-first)
/*Custom, iPhone Retina */
@media only screen and (min-width : 320px) { }
/*Extra small devices, Phones*/
@media only screen and (min-width : 480px) { }
/*Small Devices, Tablets*/
@media only screen and (min-width : 768px) { }
/*Medium Devices, Desktops*/
@media only screen and (min-width : 992px) { }
/*Large Devices, Wide Screens*/
@media only screen and (min-width : 1200px) { }

23. Common Sizes Determining Breakpoints
Let your content determine where the breakpoints should be.
(add a new set of styles at the point where things start looking bad)

24. Resources
Codrops – Media Queries
W3schools.com – CSS3 Media Queries
Learning Web Design 4th Edition
Lynda.com – Learning CSS