Responsive Design. Responsive Design Approach. Technique for building webpages

Transcription

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

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

3 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 printrelated displays speech: for screen readers screen: matches all devices that are not print or speech (computer screens, tablets, smart phones, etc.) 3

4 Responsive Design Approach Media queries can also evaluate specific media features such as width, orientation, and resolution Complete list: 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) queries/ Most common = width Media Query Syntax Media queries are added to CSS files using keyword and curly braces { to contain the (max width: 400px) {.selector { /* Both declarations are the same.*/ (defaults to all if no type is all and (max width: 400px) (max width: 400px) { 4

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

6 Screen Sizes Screen Sizes Screen Sizes 6

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

8 Choosing Breakpoints Phone:640X960 Tablet:1024X768 Desktop:1280X720 Bootstrap 3 media queries (mobile first) /*Custom, iphone Retina only screen and (min width : 320px) { /*Extra small devices, only screen and (min width : 480px) { /*Small Devices, only screen and (min width : 768px) { /*Medium Devices, only screen and (min width : 992px) { /*Large Devices, Wide only screen and (min width : 1200px) { 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 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 queries/ W3schools.com CSS3 Media Queries Learning Web Design 4 th Edition Lynda.com Learning CSS tutorials/css Fundamentals/ html?org=uwm.edu 8