Realdolmen Education

Details

Responsive Web Design

This course is currently not scheduled on the open calendar, but can be organized on request.

Request Course

Duration

1 day(s)

Audience

Web developers who wish to design their presentation layer to be optimized across a wide range of devices.

Prerequisites

Having some basic knowledge of HTML and CSS.

Objectives

At the end of the course, participants will be able to redesign their web applications to make them responsive.

Methods

Classroom training with hands on exercises

Description

Due to the emergence of mobile connected devices, such as smartphones, tablets, and phablets with different screen sizes as well as the rise of high resolution displays (Retina, 2K, 4K), web sites now have a new requirement: they must provide an optimal viewing experience on all of these devices. On smaller screens, content is usually not readable, or difficult to interact with. Clicking on buttons or links when the view is scaled to a smaller size is hard to do. To present the information on your web site in the most optimal way on different screens, your web web design has to be responsive!

During this course, you will learn how to design your web site using Responsive Web Design techniques. Techniques such as fluid grids, flexible images, and CSS 3 media queries will help you to optimize your web site and to adapt to different screen sizes. Other topics include graceful degradation, progressive enhancement, and mobile first. The course will cover all the basics to get started right away, but contains many references to alternative solutions that can be explored.

Practical exercises during the course will let you build up a web site and make it responsive, so you can start using the techniques you have learned.

Contents

  • Introduction
    • Responsive Web Design Definition
    • Limitations of Responsive Web Design
    • Tools Required to Build Responsive Web Sites
  • Techniques
    • Media Queries
    • Fluid Layouts
    • Fonts and Responsiveness
    • The HTML 5 Viewport
    • JavaScript Solutions and Frameworks
  • Methodology
    • Using Templates
    • Bootstrap
    • Mobile First
    • Adapting Images
    • Progressive Enhancement
    • Graceful Degradation
  • CSS 3
    • CSS Box Model
    • Units of Measurement
    • Header Styles
    • Selectors
    • Pseudo Classes
    • Adjusting to Smaller Viewports
    • LESS and Sass
  • Designing Mobile Applications
    • Design Considerations
    • User Experience Considerations
    • Scaling Down
    • Touch Areas
    • Mouse vs. Touch
    • Mobile Performance Considerations
  • Further References