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

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

Prerequisite
None

Expected Duration
132 minutes

Description
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.

Objective

Working with Tables and Forms

  • start the course
  • configure tables to be responsive using scrolling
  • configure tables to be responsive by stacking cells
  • configure tables to be responsive by hiding portions of the table
  • configure flexible tables by converting a table to a chart
  • describe design considerations for flexible forms and discuss support for HTML5 input types and attributes
  • use HTML5 input types and attributes to configure responsive forms

Responsive 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
  • create a responsive menu system using a deconstructing top menu as part of a responsive design solution
  • create a responsive menu system using footer anchor navigation as part of a responsive design solution
  • describe the off-canvas pattern and show how to implement it for flyout menus

Responsive UIs

  • describe the off-canvas pattern and show how to implement it for content
  • 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
  • implement CSS3 columns and media queries as part of a responsive layout
  • use stacked galleries in a responsive UI
  • use tabbed workspaces in a responsive UI solution
  • use split views in a responsive UI

Styling and Animation

  • use media queries to generate styles for different devices
  • manage elements in transition as part of a responsive web design
  • configure responsive keyframe animations

Devices and Sensors

  • 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
  • use the window.navigator object to check for a network connection, and describe the NetworkInfo API
  • recognize the importance of device and feature detection and describe the use of the Modernizr tool

Process and Performance

  • identify the considerations for successful responsive web design
  • describe how using style tiles can help in the responsive design process
  • describe how to optimize performance for responsive applications configured to run on different devices
  • describe conditional loading

Practice: Creating a Responsive App

  • configure flexible data, user interfaces, device interaction, and process and performance procedures in responsive web design

MONTHLY SUBSCRIPTION

$129/month
 

ANNUAL SUBSCRIPTION

$1295/year

Multi-license discounts available for Annual and Monthly subscriptions.