RESPONSIVE WEB DESIGN TECHNIQUES (NEW!)

Course details

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