Responsive Design

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

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

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

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

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

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

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

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.)

Responsive Design Approach Media queries can also evaluate specific media features such as width, orientation, and resolution Complete list: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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) https://tympanus.net/codrops/css_reference/media-queries/ Most common = width

Media Query Syntax Media queries are added to CSS files using the @media 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) { }

Media Query Syntax Example – media queries added to a style sheet @media rule @ 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

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”>

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

Screen Sizes https://www.lynda.com/Muse-tutorials/Designing-Responsive-Mobile-Website-Muse/423996-2.html?org=uwm.edu

Screen Sizes https://www.lynda.com/Muse-tutorials/Designing-Responsive-Mobile-Website-Muse/423996-2.html?org=uwm.edu

Screen Sizes https://www.lynda.com/Muse-tutorials/Designing-Responsive-Mobile-Website-Muse/423996-2.html?org=uwm.edu

Choosing Breakpoints https://css-tricks.com/snippets/css/media-queries-for-standard-devices/#phone-queries https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

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 */

Media Query Syntax Example – media queries added to a style sheet @media rule @ 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

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) { }

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)

Resources Codrops – Media Queries https://tympanus.net/codrops/css_reference/media-queries/ W3schools.com – CSS3 Media Queries https://www.w3schools.com/css/css3_mediaqueries.asp Learning Web Design 4th Edition http://www.learningwebdesign.com/4e/materials/index.html Lynda.com – Learning CSS https://www.lynda.com/CSS-tutorials/CSS-Fundamentals/417645-2.html?org=uwm.edu