Responsive Web Design Techniques

Responsive Web Design icon

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 (RWD)

  • 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 incorporating 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 like using Bootstrap 3 for ease of implementing RWD
  • Looking at Responsive Design tools