RESPONSIVE WEB DESIGN

Course Overview

The 2 day Responsive Web Design course is for students who already build websites and are confident in hand coding HTML and CSS and want to take the next step in web design. This course will take you through a series of projects developing responsive websites that are optimised for various screen sizes and devices and will cover important related issues dealing with responsive web design.

Course Prerequisites

Students should have experience with hand coding html5 and CSS3 as a pre-requisite for this course. Ideally students should have attended a HTML5 or CCS3 course of have attained equivalent skills.

Raising the Bar

1300 937 782

www.rtb.com.au

The Viewport Meta Tag

Setting The Viewport Meta Tag
Defining device-width
Setting initial-scale
Defining maximum-scale

Hi-Res Images and Effects

Working with Retina Graphics (Double-Resolution Images)
Halving an Image’s Width
CSS3 Shadows and Gradients
Using Custom Fonts
Creating Scrollable Areas
Horizontal Scrollable Areas
Optimise Scrolling for iOS Touch Devices

Mobile-Friendly Navigation and Forms

Creating and Styling a Mobile-Friendly Nav
Working with Text Shadows

Creating Mobile-Friendly Forms

Form Input Types (Text, Button, Radio etc.)
Fill a Page Using CSS Gradients

Media Queries and Retina Graphics

Working with Media Queries
Loading Hi-Res Images on Retina Display Devices
Creating a Simple Responsive Website
Understanding and Creating Fluid Widths
Setting Max-Width Using Media Queries
Mobile First Thinking Explained
Setting Min-Width Using Media Queries

Creating a Basic Wireframe

Creating a Basic Layout Using a Wireframe
Adding Placeholder Content
Mobile First Media Queries
Finishing the Wireframe
Structuring the Page for Different Screen Sizes
Media Queries for Min and Max-Width
Hiding Elements for Different Screen Sizes

Filling the Background

Identifying a Media Query Using a Visual Indicator
Page Background Styling
Using Custom Web Fonts

Starting With the Header

Adding a Logo and Nav
Styling a Logo and Nav for Various Screen Sizes and Devices
Showing Images on Large Screens Only
Complete the Header and Add a Slideshow
Header Styling
Adding a Slideshow Placeholder

Responsive Issues Explained

Styling Upcoming Shows on Different Devices
Using min-height to Match Element Heights
Limiting Flexible Content
Setting Max-Widths
Design Constraint at Break Points
Centering Page Design for Various Screen Sizes

Responsive Slideshows

Setting up a Slideshow
Styling Slideshow Images and Controls
Prevent Slideshow on Mobile Devices
Background-Size Polyfill for Older Browsers
Using Respond.js Polyfill for IE
Media Queries Polyfill for IE 7 & 8
Finalising the Code

Responsive Prototype Grids

Twitter Bootstrap
Bootstrap Grid System

Fluid and Nested Layouts

Fluid Layout Using Bootstrap
Creating Nested Sections

Completing Responsive Web Content

Utilising Responsive Bootstrap Styles