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