Responsive Design

Lydna | Lerning Responsive Design

§Responsive Web Design - Ethan Marcotte

1. Fluid Grid for flexible layouts
2. Media Queries to help you adapt content to specific screen sizes
3. Flexible Images and media that respond to changes in screen sizes as well.

• HTML: clean code, proper semantics HTMLs

  CSS: media queries, fluid layout, transitions css graphics

  JavaScript: resourse loading, adaptive media, device functionality

§Concepts

• viewport(have a minimum scaling factor) > the screen’s resolution

  Mobile browsers will display a web page within the viewport ans the shrink that viewport down until the content fits within the width of the screen itself. While this usually results in tiny pages, it does allow the user to see the page in its entirety and decide which areas of the page they’d like to zoom up to, and read.

  => how to control both the viewport size and its initial scale factor.

• Controlling Viewports

  1. viewport meta tag met name="viewport" content="width=480, initial-scale=1">

  2. @viewport CSS rule @viewport{width: 480px; zoom: 1;}

     should be placed before media queries

  • device width: instructs the browser to set the viewport to the exact size as the available screen pixels.

    And the browser automatically sets initial scale to 100%.

    In fact, on iOS devices, there’s a bug with initial scale that affects pages when the orientation changes, so many people advise leaving initial scale off entirely unless you need to set the value to something other than 100%.

  • zoom: 2, -> 200%

  • control how much zoom

    eg. minimum-scale=1 maximum-scale=2 in tag, min-zoom:1; max-zoom:2in CSS. The user can scale up to 200% but can’t scale down pass 100%.

    eg. user-scalable=no or user-zoom:fixed;

• Screen density is the number of pixels within a physical area of a screen, and newer screens are featuring higher and higher screen densities every year

  1. hardware pixels

     eg. Let’s say you had a line of text that was 30 pixels high on a lower-density screen. The same text mapped to the higher- density screen would now appear twice as small.

  2. reference pixels - “CSS pixel”

     eg. If you’ve specified that an element be 50 pixels wide, it might map to the first screen at exactly 50 pixels if the hardware and reference pixels were the same.
     On a higher-density screen, however, the device would actually display the same element over 100 hardware pixels to ensure that it remains the same visual size.

     • scaling factor - device-pixel-ratio, the ratio between reference pixels and hardware pixels

• Designing for multiple screen densities

  • Optimize graphics for higher-density displays - Reduce bitmap graphics

    1. SVG

       Often larger than bitmaps

       Graphics are redrawn with each screen change

    2. CSS

       Complex artwork is difficult

       Often require non-semantic markup

       Property support isn’t universal

    3. use icon fonts

  • Screen-density targeting option

    1. Don’t target screen, but use high-res graphocs where needed
       issue1: Higher-resolution graphics are larger in size -> some of your users to download larger images than they really need.
       issue2: Not all screens use the same scaling factors -> you’d have to account for the largest size needed, which again leads to unnecessary file sizes in most instances.

    2. target

       if you are targeting CSS background images, you can use media queries to target specific device-pixel-ratios. -> JavaScript

• Media Queries

  @media [not | only] screen [and] (expression){} in CSS

  media="screen and (min-width: 480px), screen and (orientation: landscape)" in tag

  modified: @import url(example.css) screen and (max-width: 480px);

• breakpoint: A breakpoint indicates the moment your layout switches from one layout to another, and is usually triggered by the width of a screen.

  1. @media only screen and (max-width: 480px){} // mobile, eg. 480/16 = 30em
  2. @media only screen and (min-width:481px) and (max-width: 768px){} //tablet, 30em 48em
  3. @media only screen and (min-width: 769px) //desktop, 48em

  if use em, the width of the screen is set relative to the device’s font size.

• Fluid grid

  eg. Grid systems

  downsides of frameworks: class-based, non-semantic, container/clearing elements, large in size/extra code

• Making images responsive

  1. define with different @media

     but, in earlier versions of Android, all of the CSS background images would be downloaded, not just the ones needed for the appropriate media query.

  2. modify your .htaccess file, link to their responsive images JavaScript file, and add a query string on any image that requires a larger desktop version of that image.

     but, more complex solution, JS parse slower load time(and often replacement images are requested after the original image is already downloaded.)

     And that’s the evolution of browser prefetching: speed up load time, but may download elements that will be replaced.

  ->

  1. WHTWQ: add a new attribute called srcset, eg. <img … src="" srcset="1.png 800w, 2.png 600w">
     benefits: straight forward, uncluttered, no new html elements, backwards compatible
  2. w3c: <picture><source..><source..><img></picture>
     benefits: acts as parent for range of elements. multiple source options with alternate images, image properties, and media queries. user agent selects matching images

• Responsive forms
  start by considering the mobile context first
  eg. use <label><input.. placehold="balabala" required="required"></label>
  Makes submitting data easier, automates input when possible, and even combines form elements to require less input from the user.

  1. combile address into a single input ans use placeholder text to show format.
  2. single dropdown menu instead of using a radio button grouping of multiple choices

• Performance

  • Network connections, bandwidth speed, network latency
  • keep code lean
    1. use standards compliant code
    2. elimicate extraneous markup
    3. keep external scripts and styles lean and efficient
  • limit requests
    1. eg. If you’re linking to multiple external scripts, try combining them into a single file.
       Or tools: Filament Group’s QuickConcat, Enhance.js, which can combine files at runtime into single request.
    2. Combine images and icons into sprites -> use same images for multiple
    3. Use data URI: allows you to embed images directly into your CSS without having to request the image from the server
    4. Evaluate any external resource to make sure that you’re actually using them.
    5. use a JavaScript library in one context but not the other.

§Responsice Design Strategies

• Designing for the appropriate: targeting the appropriate context in which the site will be used.
• Planning a responsie design
  develop a content strategy, think about breakpoints
  tweak point -> allow you to refine your designs throughout the scaling proces
  device-specific functionality: geo location, instant messaging, touch sensitivity
  layout considerations: plan out your navigation, creat consistent coding standards
• Building responsive mockups
• Developing a context strategy for responsive sites
  goas: emphasize important content, make relationship clear, make it accessible on small screens
  start with content -> think about prioritize/purpose -> generate a set of rules that govern how content should be displayed and shifted as screen sizes change
• Understanding the mobile context
• Designing for mobile capabilities
  location, motion/accelerometer, built in compass, media, touch screen, phone
• Creating flexible HTML
  1. write clean code
  2. use html5 if possible
  3. explore microformats
  4. standards for each content area
  5. creat smaller sections of content, reassess layout goals/scripting
• Testing responsive designs

§Conclution

• Fluid grid framework

  • benefits:
    speed up development
    help keep code consistent
    solid starting code base
    can add unnecessary code
    some require non-semantic code

• eg. Twitter’s Bootstrap: it’s a collection of HTML, CSS, and JavaScript that includes a fluid grid, starter layouts, UI components, and much, much more.

• eg. Skeleton: lightweight, includes a fluid grid, basic typography controls, and default styling for forms and buttons.

• Responsice design tools