Responsive Design Introduction | Training Course
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
- Navigation
- Fonts
- Images
We offer Responsive Design Introduction as a private course, which means the course content can be fully customised to your exact learning requirements and run on your preferred dates.
Private One-to-One Training
One-to-one tuition tailored to your exact requirements. Your choice of duration, dates and content.
Enquire NowTeam Training for Companies
Group bookings provide you with the most cost-effective way to train your team.
Enquire NowResponsive Design Introduction — Team and Bespoke Training
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 £595 + VAT, depending on the course and number of people.
Costs include all preparation time to customise the course to your exact requirements.
FAQs about the Responsive Design Introduction course
Is this Responsive Design Introduction course suitable for me?
This course is designed for people who are new to responsive design or have been using responsive design methods for a while but have never had formal training or who would like to learn best practice in responsive design. If you are have any questions about whether the course could meet your needs, please speak to our customer service team, who will be delighted to advise you.
How is the content taught throughout the Responsive Design Introduction course?
Our Responsive Design Introduction course is extremely interactive. You will be learning about responsive design throughout the day, working through examples and live projects under the guidance of our trainer, who will be inviting questions and supporting you through each step.
How many people are likely to be in the class when I attend the Responsive Design Introduction course?
For private classes in Responsive Design Introduction, we recommend a maximum of 8 to 10 people from the same company in the class. Please ask our customer service team to help you find the right balance of people per class and the number of days training you need.
Should I attend the Responsive Design Introduction course in person or live online?
For in-person courses at our London training centre, you will receive a warm personal welcome, your choice of the latest Mac or PC and morning and afternoon refreshments. If you prefer to attend remotely, rest assured that you will be taught live by the same experts that deliver our in-person courses, covering the same training content, using the same exercises and materials. A second monitor is recommended but not essential.
What support is available after I attend the Responsive Design Introduction course?
We offer ongoing support to our Responsive Design Introduction course attendees through email and by arrangement, phone calls. You are welcome to ask any questions on topics covered during training. Our trainer will always do their best to explain principles and help you with any issues you encounter.
Will I receive a certificate upon completion of my Responsive Design Introduction course?
Yes, you'll receive a certificate of completion from Transmedia, demonstrating your knowledge and attendance on our Responsive Design Introduction course. Our certificates note our Authorised Training Centre status.
What you will learn
- Exploring the principles of responsive design, enabling you to create websites that adapt to different screen sizes and devices.
- How to use fluid grids, flexible images and media queries, empowering you to create layouts that look great on any device.
- Understanding how to optimise your websites for mobile devices, helping you improve performance and user experience.
- How to use CSS frameworks, such as Bootstrap and Foundation, enabling you to streamline your development process.
- Exploring how to test your websites on different devices and browsers, helping you identify and fix responsive design issues.
- How to improve website accessibility, ensuring your content is available to everyone, everywhere.
- Understanding best practices for responsive design, helping you create websites that are user-friendly, accessible and effective.
Course Outline for Responsive Design Introduction
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
Kiren's Story
Marketing Manager at Dataminer
Resolve
Greg's Story
Head of Video at Hurst UK
InDesign
Amy's Story
Graphic Designer at Bedfont Scientific
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 COURSESUseful Links
- UK government guidance and tools for digital accessibility – UK government accessibility design guidelines
- The guide to responsive web design in 2024 – Your go-to resource for understanding responsive web design and how to do it well
- Tutorials from W3 Schools – Free HTML tutorials
- HTML For Beginners – Start Learning HTML and CSS Today
- Responsive Web Design: What It Is And How To Use It – Learn how to respond to the user’s behaviour and environment based on screen size, platform and orientation
- What is User Experience (UX) Design? – Read about how to create products that provide meaningful and relevant experiences to users
- The complete guide to UX from Hotjar – Introduction to UX design: key principles, best practices, and mistakes to avoid
- The Ultimate Guide to Designing for the User Experience from Hubspot – Learn about key design principles and tools and how great user experience can positively impact your business
Latest Blog Articles
Web Design Trends in 2024
Understanding Web Accessibility
10 Essential Web Skills Every UX Designer Needs to Master in 2025