Lecture Presentation

Content

Differences between browsers and mobile platforms

  • The web and open standards such as HTML5 and CSS3 are moving fast and changing/adding all the time
  • The mobile web is (surpringsly?) at the front
    • iOS is a little bit better at adopting new features than Android
    • Market penetration of a recent version is a lot better on iOS than on Android
  • More information about what's supported where

CSS basics - style properties

  • A style property changes the appearance of an html element
  • Has a name defined by the standard and a value that you specify
  • Apply to individual html elements
    <div style="color: blue; text-align: center;">Text</div>
    
  • Recommended to put style properties into classes instead

CSS basics - class definitions

  • A CSS class is a collection of style properties
    .headline {
      color: #ff0;
      background-color: #a0663e;
    }
    
  • The selector specifies which html elements the class is applied to
    • By Tag - div
    • By Class - .headline
    • By Id - #save
  • Combining selectors to be more specific
    • Contained within - use the space
    • Direct descendant - use >
    • More than one selector for a single class - use ,

Use CSS classes

  • You use CSS classes by ensuring that the selector matches the wanted html elements
    <div>Just by tag name</div>
    <h1 class="headline">By specifying the class name as an attribute</h1>
    <button id="save">By setting an id of the element</button>
    
  • Some practices
    • Use html element selectors where possible. Doesn't require any additional html. However, can also be too generic to match the particular elements you want.
    • Using class names and the class attribute on the actual html elements is the most used method.

CSS basics - stylesheets

  • A stylesheet is a collection of classes
  • Stylesheet as an element in the html file
    <style>
      .headline { }
    </style>
    
  • Stylesheet as a separate file
    <link rel="stylesheet" href="filename.css" />
    

Browser vendor prefixes

  • CSS3 is still under development
    • Not all browsers support all CSS3 features
    • Browser vendors often (but not always) implement new styles using their own prefixes. After some time, when the standard at W3C has stabilized, they may also choose to remove it and implement the style without a prefix.
  • Webkit
    • Both iOS and Android browsers are based on Webkit and uses the prefix "-webkit" for such styles
  • Best strategy to implement all known prefixes
    • -webkit, -moz (Firefox), -ms (Internet Explorer), -o (Opera)
    • Browsers will just ignore unknown style properties

Common CSS styles

  • Size of an element
    width: 200px; height: 100px;
  • Distance outside and inside of elements
    margin: 10px; padding: 20px;
  • Colors
    color: white;
    background-color: #333399;
    

Some CSS3 styles

  • Rounded corners with border-radius
    border-radius: 5px;
  • Shadow behind an element
    box-shadow: 2px 2px 4px #000;
    text-shadow: 2px 2px 4px #000;
    
  • Opacity of an element (inverse of transparency)
    opacity: 0.5;

CSS3 Gradients

  • Smooth transition of colors, from one to another (or even more)
  • Only applicable as an image
    • Can be specified anywhere where an image url is valid as a style property value. Note that this CSS3 feature is a value (and not a new property).
  • More than one syntax
    • Android browsers before version 3.0 only support older syntax
      -webkit-gradient(linear, left top, left bottom,
                       color-stop(0, #339), color-stop(1, #fff))
      -webkit-linear-gradient(-90deg, #339, #fff)
      
    • Firefox used the newer syntax from the start
      -moz-linear-gradient(-90deg, #339, #fff)
      

More gradient usages

  • Multiple solid colors in an image
    • Doesn't have to produce a gradient to be useful
    • Specify same position for both colors, and they will be solid and not gradient
      -webkit-gradient(linear, left top, left bottom,
                       color-stop(0, #339), color-stop(0.5, #339),
                       color-stop(0.5, #fff), color-stop(1, #fff))
      
  • Specify a size of the background image to repeat pattern
    • Not limited to gradients
    • Can specify a specific width and height of background images in CSS3
      background-size: 1px 20px;

Things to consider on mobile networks

  • Latency
    • A request to a web server is more expensive on mobile networks than on wired. Latency is the time to the receive the first byte after sending a request.
  • Images, being downloaded separately from html, are subject to latency
    • More images means added latency even though usually up to three concurrent requests are used by web browsers.
  • Image size, larger images takes longer to download
    • Not as bad as latency, but mobile networks are usually slower than wired and 3G networks slower than WiFi.
  • Minimizing the number of requests for images
    • CSS3 images
    • Inline images
    • Sprite images

Create simple graphics on the web without using image files

  • Why?
    • Speed. No latency trying to fetch separate image files.
    • Simplicity. Easy to create and modify. No need to start up your image editing application.
    • Note that we are talking about very simple graphics to enhance the visual design, like squares and circles in single/few colors.
  • Techniques
    • Unicode characters
    • CSS styles
    • CSS gradients
    • SVG (Scalable Vector Graphics), not supported on Android before 3.0
    • Canvas, requires JavaScript

Unicode characters

  • Unicode is a standard for representing more than 110000 characters
  • All modern web pages (html files and their server delivery) should be done in Unicode
  • Unicode is commonly encoded into bytes using UTF-8
    • Specified in head-section of html page using <meta charset="utf-8" />
  • Specify a Unicode character in html
    • Start with &
    • Use a predefined name like &aoul; or
    • Start with &# for numerically specifying the Unicode character
    • Start with &#x for hexadecimally specifying the Unicode character
    • End with ;
  • Example
    <span>Have fun &#x263A;</span>

CSS3 images of single color

  • Square
    • Use any element with a background-color
  • Circle
    • Set a border radius to half the width and height
  • Diamond
    • Use a square element that is rotated with a CSS3 transform
  • Arrow (triangle)
    • Set size to zero. Use borders as thick as the size of the arrow. Set a colored border at the "back" of the arrow and a transparent border on both sides (no border in the pointing direction)

Create other graphics and images without using individual image files

  • Why?
    • Speed. No latency trying to fetch separate image files.
    • Note that depending on the circumstances, this might mean it is more difficult to produce the image data
  • Techniques
    • Image Inline
    • Image Sprite

Image Inline

  • Image data is specified inside of the html. No need to download separate file.
  • Image data is encoded in Base64 format to ensure all bytes are printable
    • 3 binary bites will expand to 4 printable characters
    • Larger size is usually outweighed by fewer requests
    • Extremely large lines/text can be difficult to view/scroll in your text editor
    • Need for some sort of encoding tool/procedure to get the Base64 string into the html http://www.base64-image.de/
  • Syntax
    <img src='data:image/jpeg;base64,AAAAAAAAAAA' />

Image Sprite

  • Sprite is originally a concept from game development where several moving images are combined into a larger scene
  • In CSS it is
    • One single image file
    • Display just a part of the image file at a specific location
    • Uses the CSS capability of panning a background image
  • Usage
    • Merge all images into one image file
    • Set image file as background image
    • Set CSS3 style background-position to pan the wanted part of the image into view
    • Note that you need any html element that can have a background to insert the sprite
    • Merge images in your image editing application or use services such as http://spritegen.website-performance.org/ or http://spriteme.org/
  • Example
    .sprite {
      background-image: url(allimages.png);
      background-position: -100px;
    }
    

CSS3 Media Queries

  • Maybe "media" is a bit misleading
    • It is all about specifying different stylesheets or classes depending on the supported properties of the browser window/screen such as width or orientation
  • Specified as a container of CSS classes in a style element
    @media (max-width: 600px) {
      div { padding: 5px; }
    }
    
  • Specified as an attribute of a link element when referencing an external css file
    <link rel="stylesheet" media="(max-width: 600px)" href="small.css" />

CSS3 Media Query Conditions

  • Unfortunately, "touch" is not available as a condition
  • Screens below a certain width
    • (max-width: 600px)
  • Screens above a certain width
    • (min-width: 1024px)
  • Orientation - portrait or landscape
    • (orientation: landscape)
  • Type of output (screen / print)
    • screen
  • Combine conditions with and/or
    • (min-width: 600px) and (max-width: 1023px)

CSS3 Transforms

  • Change shape of an html element without affecting other elements
  • Transforms are applied after all other CSS styles and page elements have placed it in the page
  • Usage
    -webkit-transform: scale(0.5);
  • Transforms
    • scale changes size
    • translate changes position
    • rotate turns the element
    • skew distorts the element

Finding inspiration