Responsive Design Introduction
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
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 NowTeam 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
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
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 COURSESClassroom 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 COURSESPrivate 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