Flexible Data & Uis

Responsive Web Design    |    Intermediate
  • 16 videos | 1h 4m 15s
  • Earns a Badge
Rating 4.6 of 22 users Rating 4.6 of 22 users (22)
With the increase of mobile devices, web applications need to be more responsive. Examine how to configure flexible data and user interface features as part of a responsive web design solution.

WHAT YOU WILL LEARN

  • 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 and flyout menus
    Describe and provides 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

IN THIS COURSE

  • 3m 16s
    In this video, learn how to configure tables to be responsive using scrolling. FREE ACCESS
  • 3m 1s
    In this video, you will configure tables so that the cells stack when the screen is narrow. FREE ACCESS
  • Locked
    3.  Hiding Portions of a Table
    3m 9s
    During this video, you will learn how to configure tables to be responsive by hiding certain parts of the table. FREE ACCESS
  • Locked
    4.  Converting a Table to a Chart
    5m 6s
    To configure flexible tables, convert a table to a chart. FREE ACCESS
  • Locked
    5.  Designing Flexible Forms
    3m 18s
    Upon completion of this video, you will be able to describe design considerations for flexible forms and discuss support for HTML5 input types and attributes. FREE ACCESS
  • Locked
    6.  Using  HTML5 Input Types and Attributes
    5m 24s
    In this video, you will learn how to use HTML5 input types and attributes to configure responsive forms. FREE ACCESS
  • Locked
    7.  Overview of Navigation Options
    2m 51s
    Upon completion of this video, you will be able to 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. FREE ACCESS
  • Locked
    8.  Deconstructing Menus
    5m 24s
    In this video, find out how to create a responsive menu system using a deconstructed top menu as part of a responsive design solution. FREE ACCESS
  • Locked
    9.  Footer Anchor Navigation
    3m 22s
    In this video, learn how to create a responsive menu system using footer anchor navigation. This is part of a responsive design solution. FREE ACCESS
  • Locked
    10.  Off-canvas Menus
    3m 15s
    Upon completion of this video, you will be able to describe the off-canvas pattern and how to implement it for flyout menus. FREE ACCESS
  • Locked
    11.  Off-canvas Content
    3m 41s
    Upon completion of this video, you will be able to describe the off-canvas pattern and how to implement it for content and flyout menus. FREE ACCESS
  • Locked
    12.  Manipulating Screens
    2m 30s
    Upon completion of this video, you will be able to 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 sidebars and components can be adjusted or replaced, or content expanded, to enable display in multiple devices. FREE ACCESS
  • Locked
    13.  CSS3 Columns and Responsive Design
    4m 48s
    In this video, you will learn how to implement CSS3 columns and media queries to create a responsive layout. FREE ACCESS
  • Locked
    14.  Stacked Galleries
    6m 18s
    During this video, you will learn how to use stacked galleries in a responsive user interface. FREE ACCESS
  • Locked
    15.  Tabbed Workspaces
    3m 54s
    In this video, find out how to use tabbed workspaces in a responsive user interface solution. FREE ACCESS
  • Locked
    16.  Split Views
    5m
    In this video, learn how to use split views in a responsive user interface. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion on some of our courses, which can be shared on any social network or business platform.

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Journey Programmer to API Developer
Rating 5.0 of 2 users Rating 5.0 of 2 users (2)
Book Creating Responsive Websites Using HTML5 and CSS3: A Perfect Reference for Web Designers
Channel Wintellect Blazor

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Course Front-end Apps: HTML5 Applications with JavaScript
Rating 4.2 of 24 users Rating 4.2 of 24 users (24)
Course HTML5 and Advanced CSS3
Rating 4.6 of 69 users Rating 4.6 of 69 users (69)
Course User & Interface Configuration
Rating 4.5 of 13 users Rating 4.5 of 13 users (13)