About this Course

Course Description

In today’s ever changing mobile landscape, web projects need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables to provide an optimal viewing experience for each scenario.

In this hands-on session, you will learn from setting up of the HTML page to styling established elements for small, medium, and large screens. Techniques you will learn include mitigating file sizes of images by providing multiple versions of your images.

INTRODUCING RESPONSIVE WEB DESIGN

• What is Responsive Web Design
  
• Exploring the needs for responsive design
  

CREATING WEB GRAPHICS

• Creating multiple-sized banner images using Adobe Generator
  
• Exporting content and template artwork
  

CORE CONCEPTS

• Examining viewports
  
• Designing for multiple screen densities
  
• Understanding media queries
  
• Creating breakpoints with media queries
  
• Using fluid grids
  
• Making images responsive
  
• Improving site performance by having different images for screen resolutions
  

PREPARING THE HTML FILE

• Incorporating CSS sprites for image optimisation
  
• Styling the headings and links
  
• Working with compound CSS rules
  
• Positioning for different screen sizes
  

DYNAMICALLY LOADING CONTENT

• Implementing javascript and jQuery to project
  
• Loading content with jQuery
  
• Appreciating some of the jQuery helper functions
  
• Working with miscellaneous events
  

ADJUSTING EXPERIENCE BASED ON SCREEN SIZE

• Determining screen size with Javascript
  
• Detecting a change in screen size
  
• Loading alternative content based on screen size
  

IMPLEMENTING ANIMATION

• Preloading Images
  
• Animating Elements
  

LOOKING TO THE FUTURE

• Exploring Fluid Grid frameworks
  
• Looking at Responsive Design tools
  

Duration

2 days ( 9am – 6pm ) 

Target Audience

Web designers and developers who want to craft out web content across mobile devices to desktops 

Prerequisite

Need to be comfortable with both basic HTML and CSS.

Rate this course:

Log in to submit

Comments