Over

155,000

Africa & Middle East

7Days 10.00 A.M - 10.00 P.M

Call us

Enquire Now

Responsive Web Design

Course Objectives

The current mobile market – mobile devices and mobile browsers
Techniques for creating flexible, responsive web sites using media queries
Best practice design for mobile devices
How to use tools & resources for testing

Course Outline

Introduction

· Mobile market overview: devices, operating systems and browsers

· One web vs. mobile web

· Mobile First

· Progressive enhancement

Getting started

· How mobile devices display web pages

· Screen resolution: CSS pixels vs. device pixels

· The viewport tag

· The Safari auto-zoom bug

· webkit-text-size-adjust

Responsive web design

· Flexible grids

· Flexible fonts

· Flexible images & background images

· Common screen sizes – resolution breakpoints

· Media queries

Content delivery – know your audience

· What content do people need?

· How people browse – mobile mindsets

· Browser dimensions, bandwidth & context

Design tips and best practice

· Displaying & hiding content

· Simplifying navigation

· Linearizing layouts

· White space

· Font sizes, faces & spacing

· Text readability

· Minimising input from user

· Making calls from links

· Linking the full version of a site

Testing

· Validation and markup

· In-browser testing

· Creating a suite of representative devices

· Online & offline emulators

· Testing services

APPLY TO COURSE

Sum the simple Operation :
3 + 7 =