Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes

Size: px

Start display at page:

Download "Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes"

Poppy Smith
6 years ago
Views:

1 Responsive Design Responsive design is it important? For many years, screen sizes were growing Eventually, settled on fixed-width (e.g. 960px) But now with smart phones, tablets, television and many new devices with widely different screen sizes Targeting each of so many sizes is no longer practical Responsive design enables us to create design that responds to each environment, providing an experience that conforms to the context in which it is used. 1 2 Some typical screen sizes But typical is not enough There is a very large variety of screen sizes and screen densities currently in use For a long (but still not complete) list, see: resources/responsive-designdevice-resolution-reference... or: 3 4

What is next? As we saw previously, Internet-connected devices and displays are appearing in an increasing variety of contexts. Watches, cars, shoes, glasses, appliances, etc.

Responsive design is now considered a new technique, but will soon be THE technique. Elements of Responsive Design 5 6 Explore a responsive site http://bradfrostweb.

2 What is next? As we saw previously, Internet-connected devices and displays are appearing in an increasing variety of contexts. Watches, cars, shoes, glasses, appliances, etc. Unless we focus on making our designs and content responsive to a wide variety of devices and settings, our designs will become useful just part of the time for just part of the audience. Responsive design is now considered a new technique, but will soon be THE technique. Elements of Responsive Design 5 6 Explore a responsive site Screen-size sensitive Also device sensitive, with touch control, geo-location, special input help, clickable phone number and more Media queries Enable designers to create CSS styles that change based on media type, viewport size and other properties. Can be used in the <head> of HTML to choose between various CSS files. Can be used within a CSS file to active and/ or override styles. 7 8

3 Media queries in HTML Syntax: <head> <link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="print.css" media="print"> </head> Syntax can include logic, such as: <link rel="stylesheet" href="theme.css" media="screen and (min-width: 480px)"> For details, see: Media queries in CSS You can import one style sheet into another and include logic, such url(example.css) screen and (max-width: 480px); Or you can include media queries directly in your style sheets using syntax such only screen and (max-width: 480px){ p { color: white; } } Full media query specification is here: Breakpoints Breakpoints Points at which the layout changes based on screen size Usually there are breakpoints for mobile, tablet and desktop/laptop; typical values are: Mobile: max-width: 480px Tablet: max-width: 768px Desktop: min-width: 769px 11 12

Try it Create an HTML file with <div> tags that create three flexible

and 768 Show one column for mobile, two for tablets and three for desktop

choice Sometimes, a separate mobile site or app is better However, the all

to get an overview on a large screen Fewer columns on small screen Users

4 Try it Create an HTML file with <div> tags that create three flexible columns for text Create CSS with media queries defining break points at 480 and 768 Show one column for mobile, two for tablets and three for desktop Responsive Design Strategies Responsive is not always the right choice Sometimes, a separate mobile site or app is better However, the all relevant contexts must always be considered How users meet your site Easy to get an overview on a large screen Fewer columns on small screen Users must react to initial content and then actively seek the content they are looking for 15 16

Planning a responsive design Know your content Changes in content placement have dramatic impact on effectiveness Therefore, start by creating a hierarchy of content

on small screens 17 18 Content strategy Identify content Organize and prioritize content Manage content Prototyping Tools Hand-sketched wireframes are fastest and

5 Planning a responsive design Know your content Changes in content placement have dramatic impact on effectiveness Therefore, start by creating a hierarchy of content types Start with mobile wireframes or do mobile/ desktop frames simultaneously Content goals Emphasize important content Make relationships clear Make it accessible on small screens Content strategy Identify content Organize and prioritize content Manage content Prototyping Tools Hand-sketched wireframes are fastest and allow for most experimenting Responsive sketch sheets are easy to find online; for example: responsive-web-design-sketch-sheets/ 19 20

Plan break points Start with extremes: smallest size, then largest size Then consider where intermediate points are needed Rather than consider target devices, allow break points to follow your

6 Plan break points Start with extremes: smallest size, then largest size Then consider where intermediate points are needed Rather than consider target devices, allow break points to follow your design Some fine adjustment may be needed often for navigation bars Testing Test on as many target devices as possible Online tools also exist, such as The Responsinator at: Why mobile first? Forces you to be more focused on content and presentation Narrow, restricted space requires more discipline Refine what is really important More likely to understand how content will change Encourages you to think about how mobile features will enhance content Makes it less likely that you will not be able to flow content the way you need to Device-specific functionality Geo-location Phone dialing <a href="tel: ">call us free!</a> Touch sensitivity

Arranging the boxes Floats Row containers CSS hide/show Flexboxes New technique

net/ flexyboxes/ Flexboxes 25 26 Understanding the viewport On a desktop browser,

the screen itself Understanding the viewport Also on smartphones, the viewport is

that the web page is scaled down on the smart phone This is fine for pages designed

7 Arranging the boxes Floats Row containers CSS hide/show Flexboxes New technique Variable support Experiment with them here: flexyboxes/ Flexboxes Understanding the viewport On a desktop browser, the viewport is the content of the browser window On a smartphone, the viewport is the screen itself Understanding the viewport Also on smartphones, the viewport is often defined as being much larger than the screen (default 980px) The result, is that the web page is scaled down on the smart phone This is fine for pages designed for desktop, but can make pages designed for smartphones (including responsive pages) appear too small on load

Understanding the viewport But we can control the viewport setting to get the initial view that we want Users can also zoom in and out (if we let them) Default

29 30 Controlling the viewport Use the viewport meta tag to control the initial viewport zoom level and behavior Viewport meta tag syntax example: <meta name =

being developed for CSS, but support is currently unreliable.

8 Understanding the viewport But we can control the viewport setting to get the initial view that we want Users can also zoom in and out (if we let them) Default viewport settings Designed to scale non-mobile web pages Default is 980 pixels (from the original) scaled down to 320 device pixels Controlling the viewport Use the viewport meta tag to control the initial viewport zoom level and behavior Viewport meta tag syntax example: <meta name = "viewport" content = "width = 480, initial-scale = 1, user-scalable = no"> Place the meta tag in the <head> section of HTML (There is also rule being developed for CSS, but support is currently unreliable.) Setting the viewport to the device width Use width=device-width to create a fluid viewport that always matches the content width. For example: <meta name = "viewport" content = "width = device-width"> For a complete description of how to use this meta tag, see:

Screen density For example, iphone5 has twice the number of pixels in the same area a an iphone4 As we saw earlier, there are several long lists available online, for example: https://github.

Device-pixel ratio Designing for higher screen density Could use SVG (scalable vector graphics) For bitmaps, consider using double resolution images scaled down by 50%. E.g.: use a JPG at 200 x 200 px, but set its height and width to 100 x 100 px using CSS.

9 Screen density For example, iphone5 has twice the number of pixels in the same area a an iphone4 As we saw earlier, there are several long lists available online, for example: wiki/mobile-matrices Screen density Therefore, we use reference pixels, which are independent of hardware pixels. Device-pixel ratio Designing for higher screen density Could use SVG (scalable vector graphics) For bitmaps, consider using double resolution images scaled down by 50%. E.g.: use a JPG at 200 x 200 px, but set its height and width to 100 x 100 px using CSS. Advanced techniques to manage bandwidth: Media queries can swap background images based on device-pixel-ratio ) JavaScript can swap images using sophisticated programming Designers must consider how important high-res images are for their specific users

10 Flexible typesetting Use em rather than px to define font sizes in your styles Ems are proportional relative to their context The usual default is that 1em=16px. To convert from a design specified in pixels to a CSS style specified in em, use this formula: Target (px) / context (px) = result (em) Try it Create the following design in simple HTML/CSS using the stated pixel measurements Convert to em measurements Start by setting up the page default. Convert to em measurements Use the formula: Target (px) / context (px) = result (em) Hate math? Use this handy online calculator: Write your calculation in a comment next to each font-size declaration 39 40

CS7026 Media Queries. Different Screen Size Different Design

CS7026 Media Queries. Different Screen Size Different Design CS7026 Media Queries Different Screen Size Different Design Introduction Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other