Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-800-268-7737 Other Contact Options
Checkout

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:

    $

Responsive Web Design

Learn how this path demonstrates to apply responsive design strategies. Covering the core components of responsive design - flexible grids, flexible images and media queries.

GK# 7333

Course Overview

TOP

With the rise of hand-held devices and mobile browsing, web applications have needed to become responsive to the specific device that is using them. This learning path demonstrates how to apply responsive design strategies. It covers the core components of responsive design - flexible grids, flexible images and media queries. It covers navigation and UI options, and the role of sensors and devices in a responsive design solution. Finally, it covers design process features and performance in responsive applications.

Schedule

TOP
  • Delivery Format:
  • Date:
  • Location:
  • Access Period:

$

What You'll Learn

TOP
  • Flexible Grids, Images, and Media Queries
  • Flexible Data and UIs, Devices, Process and Performance

Outline

TOP
Viewing outline for:

On-Demand Outline

Responsive Web Design: Flexible Grids, Images, and Media Queries

  • Describe the concept of responsive web design, its core components, and contrast adaptive, fluid, and responsive design
  • Contrast fixed and fluid layouts and use proportional width settings to achieve fluid grid layouts
  • Implement the CSS3 Flexbox as part of a responsive design web layout
  • Describe how to implement the CSS3 grid layout with flexible lengths (fraction units)
  • Describe how to implement semantic grid systems using a preprocessor such as Sass
  • Describe and contrast use of percentages, ems, rems, and viewport units in responsive design
  • Describe the issue of rounding
  • Configure flexible text with appropriate measurement units for size and line height and features such as text overflow in a responsive web design solution
  • Use the maxwidth attribute to configure images to be responsive
  • Configure tiled background images to be responsive
  • Describe the CSS overflow property and implement it as a part of a responsive web design solution for images
  • Use sprites for background images as part of a responsive design solution
  • Describe scalable vector images (SVG) and use SVG to implement scaling images
  • Describe the HTML5 canvas and use the canvas to implement scaling images
  • Describe and use the new HTML5 picture element
  • Recall use of maxwidth attribute and use intrinsic ratio to work with embedded video to make it responsive
  • Describe media queries, their syntax, breakpoints, using both major and minor breakpoints, and their application in responsive web design
  • Use media queries with device or viewport dimensions
  • Contrast the viewport meta tag and CSS3 parameter and combine with a media query for device adaptation
  • Configure a screen resolution media query
  • Work with multiple media queries, combining and negating queries
  • Work with available media types apart from screen
  • Work with features such as input mechanism and color
  • Describe how to resolve compatibility issues relating to media queries in older browsers
  • Apply fluid grids, flexible images, and media queries to your web design

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

  • 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 key frame 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

Prerequisites

TOP

The way we view the web is rapidly changing with many users moving away from the traditional desktop or laptop computers and adopting tablets and smart phones. With that changeover come many new different design challenges that developers have to take into account when they build websites. In this path, you will be introduced to the different technologies and terminologies that will start building your web designing skill sets.

Who Should Attend

TOP

Web developers who want to learn how to design responsive web applications using fluid grids, images, and media queries.

Follow-On Courses

TOP

HTML, or HyperText Markup Language, is used to allow the building of a webpage that can be viewed using a web browser. HTML is created by formatting text using the Markup language, which consists of a set of elements, also called tags, and attributes. In this path, you'll learn how to create HTML5 compliant webpages based on the W3 HTML5 specification.

Course Delivery

This course is available in the following formats:

On-Demand

Train at your own pace with 24/7 access to courses that help you acquire must-have technology skills.



Request this course in a different delivery format.
Enroll