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
|