Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011

Size: px

Start display at page:

Download "Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011"

Sandra Rosamund Baker
5 years ago
Views:

1 Responsive Web Design From: Ethan Marcotte - Responsive Web Design 2011

2 Motivation Browser windows have their inconsistencies and imperfections Once web pages are published online, the designs are immediately at the mercy of the people who view them Font settings Color of their display Shape/size of their browser window But we can t set our type in pixels, or create fixed-width layouts that assume a minimum screen resolution

3 Ingredients for Responsive Web Design A flexible, grid-based layout Flexible images and media Media queries (a module from the CSS3 spec)

4 The Flexible Grid - Flexible Typesetting Use relative typesetting Use proportion (em), instead of pixels (px) xem, where x = target_font-size / container_font-size So if baseline is 16px, a 24px headline should use 1.5em

The Flexible Grid Creating a Flexible Grid Proportional width (percentages relative to container s) #page { margin: 36px auto; width: 90%; /* estimate */.blog { margin: 0 auto 53px; width: 93.

5 The Flexible Grid Creating a Flexible Grid Proportional width (percentages relative to container s) #page { margin: 36px auto; width: 90%; /* estimate */.blog { margin: 0 auto 53px; width: 93.75% /* 900/960 */.blog.main { float: left; width: % /* 566/900 */.blog.other { float: right; width: % /* 331/900 */ Inflexible, forcing horizontal scrollbar if browser window drops below 1024px

6 The Flexible Grid Flexible Margins/Padding Instead of: padding: 0.8em 48px; Use: Padding: 0.8em %; /* 48/900 */ 1. For flexible margins, the denominator is the width of the element s container 2. For flexible padding on an element, the denominator is the width of the element itself.

7 Flexible Images Suppose figure is a container for an image.figure { float: right; margin-bottom: 0.5em; margin-left: %; /* 12px / 474px */ width: %; /* 231px / 474px */ Set max-width so images can scale down properly in small viewport img { max-width: 100%; /* scales down but not up, unlike width: 100% */ Or, you could use overflow: hidden to cut off the excess, see this site for examples

Media Queries Visual hierarchy can be easily lost when the viewport is shrunk Elements can still look out of proportion relative to the browser window itself How can we adapt to changes in screen

8 Media Queries Visual hierarchy can be easily lost when the viewport is shrunk Elements can still look out of proportion relative to the browser window itself How can we adapt to changes in screen resolution and viewport dimensions? Media types! Style sheets for different media types may share a property, but require different values for that property. Choices: all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv. Using separate style sheets

9 Media Queries (cont) Handheld stylesheet can t be one size fits all, due to the variety of devices in the market media query is the solution Each query begins with a media type (such as screen) Following type is the query itself in parentheses (min-width: 1024px) 3 ways to do that: preferred, one screen and (min-width:1024px) { <link rel= stylesheet href= wide.css media= screen and (min-width:1024px) url( wide.css ) screen and (min-width: 1024px); You can chain multiple queries together with the and screen and (min-device-width: 480px) and (orientation: landscape) {

10 Typical Device Breakpoints /* Extra small devices (phones, 600px and down) only screen and (max-width: 600px) {... /* Small devices (portrait tablets and large phones, 600px and up) only screen and (min-width: 600px) {... /* Medium devices (landscape tablets, 768px and up) only screen and (min-width: 768px) {... /* Large devices (laptops/desktops, 992px and up) only screen and (min-width: 992px) {... /* Extra large devices (large laptops and desktops, 1200px and up) only screen and (min-width: 1200px) {... An example to show three different layouts for mobile, tablets and desktop computers:

Viewport On desktop, viewport is the part of the browser window that displays online content (normally a browser assumes it s around 980px wide) On a mobile device of 320px wide, web content is

11 Viewport On desktop, viewport is the part of the browser window that displays online content (normally a browser assumes it s around 980px wide) On a mobile device of 320px wide, web content is shrunk to fit onto the small scree, which is not good for readability and usability HTML5 introduced the <meta> viewport element: <meta name= viewport content= width=device-width, initial-scale=1.0 > Width=device-width sets the width of the page to follow the screenwidth of the device Initial-scale=1.0 sets the initial zoom level when the page is first loaded (no scaling down). This helps ensure some consistency across smallscreen, viewport-aware browsers With this tag, we can use max-width and min-width with queries to conditionally load in CSS designed for those ranges From w3school.com

Responsive Design. Responsive Design Approach. Technique for building webpages

Responsive Design. Responsive Design Approach. Technique for building webpages 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: