Course Details

Previous Page


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


Overview/Description
Target Audience
Prerequisites
Expected Duration
Lesson Objectives
Course Number



Overview/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.

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 (hours)
2.2

Lesson Objectives

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

  • 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
  • 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
  • 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
  • use media queries to generate styles for different devices
  • manage elements in transition as part of a responsive web design
  • configure responsive keyframe animations
  • 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
  • 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
  • configure flexible data, user interfaces, device interaction, and process and performance procedures in responsive web design
  • Course Number:
    wd_rwds_a02_it_enus