Responsive Design Introduction


  • User Experience (UX/UI) Design

    Excellent course provided by a knowledgeable trainer.

    Driver & Vehicle Standards Agency
    August 2024
  • Web Accessibility and Usability

    We both found the day very useful, interesting and informative. The level of information and the pace of the day was just right, keeping our attention and interest throughout the day.

    Tibbalds
    August 2024
  • An excellent trainer with extreme depth of knowledge in the product. Also some really good and helpful shortcuts.

    August 2024
  • Great delivery, enjoyable training session.

    August 2024

Course Facts

  • 2 day course
  • Our Trainers are Authorised Professionals
  • Live Online or Classroom-based
  • Certificate of completion
  • Maximum class size of 6 for scheduled courses
  • Unlimited support after your course
  • Courses at all levels: Introduction, Intermediate, Advanced and Masterclasses

Course Outline

  • Overview of responsive design
  • HTML5 for responsive design
  • Using CSS3 in responsive design
  • Media queries
  • Responsive Layouts
FULL OUTLINE
  • User Experience (UX/UI) Design

    Excellent course provided by a knowledgeable trainer.

    Driver & Vehicle Standards Agency
    August 2024
  • Web Accessibility and Usability

    We both found the day very useful, interesting and informative. The level of information and the pace of the day was just right, keeping our attention and interest throughout the day.

    Tibbalds
    August 2024
  • An excellent trainer with extreme depth of knowledge in the product. Also some really good and helpful shortcuts.

    August 2024
  • Great delivery, enjoyable training session.

    August 2024

Private One-to-One Training

One-to-one tuition tailored to your exact requirements. Your choice of duration, dates and content.

Enquire Now

Team Training for Companies

Group bookings provide you with the most cost-effective way to train your team.

Enquire Now

Team Training and Bespoke Sessions

Booking a private training session allows you to focus on your exact needs on dates that work best for you or your team.

  • Sessions can be run online or in person, on your site or at our London training centre.
  • We manage training for many of the UK’s largest companies, taking care of all the admin, working with you to ensure the perfect course.
  • Our expert trainers will first understand your requirements and then tailor each session to your exact specification.
  • We offer a free consultation service to work out every detail of your course.

Prices for bespoke sessions with our expert trainers start at £525 + VAT.

Overview

This hands-on course covers the skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Students will learn the use of techniques such as CSS3 media queries and flexible layouts to build mobile-compatible web sites. The course also provides an extensive introduction to JavaScript and the jQuery Mobile Framework for building mobile-specific web sites.
Read More...

Course Outline

Overview of responsive design

  • Examples of responsive sites
  • Planning a responsive design
  • Progressive enhancement vs. graceful degradation
  • HTML5, CSS3 and JavaScript for responsive design
  • Defining breakpoints

HTML5 for responsive design

  • New HTML5 elements
  • Practical uses of new elements
  • HTML forms; placeholders, required, auto focus
  • Input types - email, number, date, time

Using CSS3 in responsive design

  • Defining breakpoints
  • Mobile first vs. desktop first - how to decide?
  • Designing content
  • Resetting styles
  • Vendor prefixes
  • Tricks and common issues

Media queries

  • Why they are important
  • How to write the syntax
  • Which features can we test for?
  • Examples of how they can alter designs
  • What to do when they aren't supported- IE8?
  • Using Polyfills

Responsive Layouts

  • Fixed vs fluid proportional layouts
  • Changing from fixed to proportional (target/context = result)
  • Measurements - ems, pixels and percentages
  • Fluid images and limits (max-width)
  • CSS grid systems
  • Example of using a CSS grid system

Navigation

  • Responsive navigation strategies
  • Switching navigation for mobile devices
  • Using JavaScript for navigation

Fonts

  • Using @font-face for Web fonts
  • Font sizes - pixels/percentages/ems

Images

  • Setting fluid images
  • Retina images for high resolution displays

Using Frameworks and tools

  • Dealing with older browsers: Modernizr
  • Overview of jQuery and jQueryUI
  • Bootstrap
  • Foundation framework

Our Clients

Our Recent Success Stories

Photoshop Training

Photoshop

Karen's Story

Picture Editor at Reach PLC

InDesign Training

InDesign

Cassie's Story

Designer at Dixon Interiors

InDesign Training

InDesign

Sumble's Story

Graphic Designer at Houses of Parliament

30 years working with our clients
Five Star Training Five Star Training Five Star Training Five Star Training Five Star Training   600+ Reviews

Why Transmedia?

Unlimited Training Support

We offer unlimited training support after your course.

Bespoke Training Solutions

Customised training and software solutions based on your exact specification.

Worldwide Creative Skills Training

Join our authorised training courses live online from anywhere in the world.

Authorised Training Professionals

Our experts are accredited by Adobe, Apple and Claris and bring years of experience and real-world expertise.

Courses Live Online

Join our virtual classrooms to learn from the comfort of your own space in real time from our accredited training experts.

SEE COURSES

Classroom Training

Join us at one of our Authorised Training Centres for a traditional classroom-based experience.

We have everything ready for you to have the best training experience.

SEE COURSES

Private Courses

One-to-one tuition or a private group training with just you or your colleagues.

We can train you live online, at one of our centres or onsite, wherever you are located.

SEE COURSES

Useful Links

Latest Help Station Articles