Responsive Web Design: Flexible Data and UIs, Devices, Process and Performance

This course is included in our On-demand training solution.

Overview

With the rise of handheld devices and mobile browsing, web applications have needed to become responsive to the accessing device. This course demonstrates how to configure flexible data and user interfaces. It covers how to interact with devices, and apply process and performance procedures as part of a responsive web design solution.

Target Audience

Web developers who want to learn how to configure flexible data and user interfaces, interact with devices, and apply process and performance procedures in a responsive web design solution

Prerequisites

None

Expected Duration

120 min.

Course Objectives

Course Introduction

Scrolling Tables

  • configure tables to be responsive using scrolling
  • Stacking Cells in Tables

  • configure tables to be responsive by stacking cells
  • Hiding Portions of a Table

  • configure tables to be responsive by hiding portions of the table
  • Converting a Table to a Chart

  • configure flexible tables by converting a table to a chart
  • Designing Flexible Forms

  • describe design considerations for flexible forms and discuss support for HTML5 input types and attributes
  • Using HTML5 Input Types and Attributes

  • use HTML5 input types and attributes to configure responsive forms
  • Overview of Navigation Options

  • describe navigation options such as footer anchors, top menus that deconstruct, drop-down to select menus, and flyout menus that can form part of a responsive design solution and describe how options such as footer anchors are suitable for touch input
  • Deconstructing Menus

  • create a responsive menu system using a deconstructing top menu as part of a responsive design solution
  • Footer Anchor Navigation

  • create a responsive menu system using footer anchor navigation as part of a responsive design solution
  • Off-Canvas Menus

  • describe the off-canvas pattern and show how to implement it for flyout menus
  • Off-Canvas Content

  • describe the off-canvas pattern and show how to implement it for content
  • Manipulating Screens

  • describe and provide examples of how screens can be collapsed for bigger devices, floating screens can be used, non-crucial content can be used in larger screen side-bars and components can be adjusted or replaced, or content expanded, to enable display in multiple devices
  • CSS3 Columns and Responsive Design

  • implement CSS3 columns and media queries as part of a responsive layout
  • Stacked Galleries

  • use stacked galleries in a responsive UI
  • Tabbed Workspaces

  • use tabbed workspaces in a responsive UI solution
  • Split Views

  • use split views in a responsive UI
  • Responsive Styling

  • use media queries to generate styles for different devices
  • Resizing Elements in Transition

  • manage elements in transition as part of a responsive web design
  • Responsive Keyframe Animations

  • configure responsive keyframe animations
  • Using Geolocation

  • describe the concept of interacting with sensors and devices as part of responsive design, describe native APIs and use geolocation API to fill out form addresses
  • Checking for a Network Connection

  • use the window.navigator object to check for a network connection, and describe the NetworkInfo API
  • Feature Detection with Modernizr

  • recognize the importance of device and feature detection and describe the use of the Modernizr tool
  • Flexible Design Considerations

  • identify the considerations for successful responsive web design
  • Using Style Tiles

  • describe how using style tiles can help in the responsive design process
  • Optimizing Performance

  • describe how to optimize performance for responsive applications configured to run on different devices
  • Conditional Loading

  • describe conditional loading
  • Exercise: Configuring Design and Performance

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.