Responsive Web Design with HTML5 and CSS3 - Second Edition
eBook - ePub

Responsive Web Design with HTML5 and CSS3 - Second Edition

Ben Frain

Share book
  1. 312 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Responsive Web Design with HTML5 and CSS3 - Second Edition

Ben Frain

Book details
Book preview
Table of contents

About This Book

Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web usersAbout This Book• Learn and explore how to harness the latest features of HTML5 in the context of responsive web design• Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project• Make your pages interactive by using CSS animations, transformations, and transitionsWho This Book Is For Are you writing two websites – one for mobile and one for larger displays? Or perhaps you've already implemented your first 'RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!What You Will Learn• Understand what responsive design is, and why it's vital for modern web development• HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features• Integrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.• Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.• Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.• Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate them• Learn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calcIn DetailDesktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just 'work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.Learn how to build websites with a "responsive and mobile first" methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things 'responsive'.This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built 'right' for today, but in the future too.Chapter example code is all hosted on, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.Style and approachThis book should be useful in two ways: as a 'read from the beginning and learn as you go' resource but also as a reference you can come back to in the months to come – when trying to remember this or that syntax or look up a link that may help you out of a development hell-hole.To this end, rather than follow a single design through from chapter one and build on it incrementally until the end of the book, each chapter exists in relative isolation.This means that code and examples are particular to each chapter and don't need to be considered along with what has gone before or after.That doesn't mean that each chapter's techniques won't work in unison; the reference site for this book, is an example of them all working in harmony.However, by limiting the chapter examples to the topic at hand, it should be simpler for you to understand and reference the essence of each example and topic in the future.

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Responsive Web Design with HTML5 and CSS3 - Second Edition an online PDF/ePUB?
Yes, you can access Responsive Web Design with HTML5 and CSS3 - Second Edition by Ben Frain in PDF and/or ePUB format, as well as other popular books in Design & Web Design. We have over one million books available in our catalogue for you to explore.


Web Design

Responsive Web Design with HTML5 and CSS3 Second Edition

Table of Contents

Responsive Web Design with HTML5 and CSS3 Second Edition
About the Author
About the Reviewers
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
What this book covers
What you need for this book
Who this book is for
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
1. The Essentials of Responsive Web Design
Beginning our quest
Defining responsive web design
Responsive web design in a nutshell
Setting browser support levels
A brief note on tooling and text editors
Our first responsive example
Our basic HTML file
Taming images
Enter media queries
Amending the example for a larger screen
The shortcomings of our example
2. Media Queries – Supporting Differing Viewports
Why media queries are needed for a responsive web design
Basic conditional logic in CSS
Media query syntax
Media queries in link tags
Combining media queries
Media queries with @import
Media queries in CSS
What can media queries test for?
Using media queries to alter a design
Any CSS can be wrapped in a media query
Media queries for HiDPI devices
Considerations for organizing and authoring media queries
Linking to different CSS files with media queries
The practicalities of separating media queries
Nesting media queries 'inline'
Combine media queries or write them where it suits?
The viewport meta tag
Media Queries Level 4
Scripting media feature
Interaction media features
The hover media feature
Environment media features
3. Fluid Layouts and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Why do we need Flexbox?
Inline block and whitespace
Table and table-cell
Introducing Flexbox
The bumpy path to Flexbox
Browser support for Flexbox
Leave prefixing to someone else
Choosing your auto-prefixing solution
Getting Flexy
Perfect vertically centered text
Offset items
Reverse the order of items
How about if we want them laid out vertically instead?
Column reverse
Different Flexbox layouts inside different media queries
Flexbox alignment properties
The align-items property
The align-self property
Possible alignment values
The justify-content property
The flex property
Simple sticky footer
Changing source order
Wrapping up Flexbox
Responsive images
The intrinsic problem of responsive images
Simple resolution switching with srcset
Advanced switching with srcset and sizes
Did you say the browser 'might' pick one image over another?
Art direction with the picture element
Facilitate new-fangled image formats
4. HTML5 for Responsive Web Designs
HTML5 markup – understood by all modern browsers
Starting an HTML5 page the right way
The doctype
The HTML tag and lang attribute
Specifying alternate languages
Character encoding
Easy-going HTML5
A sensible approach to HTML5 markup
All hail the mighty <a> tag
New semantic elements in HTML5
The <main> element
The <section> element
The <nav> element
The <article> element
The <aside> element
The <figure> and <figcaption> elements
The <details> and <summary> elements
The <header> element
The <footer> element
The <address> element
A note on h1-h6 elements
HTML5 text-level semantics
The <b> element
The <em> element
The <i> element
Obsolete HTML features
Putting HTML5 elements to use
Applying common sense to your element selection
WCAG and WAI-ARIA for more accessible web applications
Don't use roles for semantic elements
If you only remember one thing
Taking ARIA further
Embedding media in HTML5
Adding video and audio the HTML5 way
Fallback capability for older browsers
Audio and video tags work almost identically
Responsive HTML5 video and iFrames
A note about 'offline first'
5. CSS3 – Selectors, Typography, Color Modes, and New Features
No one knows it all
Anatomy of a CSS rule
Quick and useful CSS tricks
CSS multi-column layouts for responsive designs
Fixed columns, variable width
Adding a gap and column divider
Word wrapping
Text ellipsis
Creating horizontal scrolling panels
Facilitating feature forks in CSS
Feature queries
Combining conditionals
Feature detection with Modernizr
New CSS3 selectors and how to use them
CSS3 attribute selectors
CSS3 substring matching attribute selectors
The 'beginning with' substring matching attribute selector
The 'contains an instance of' substring matching attribute selector
The 'ends with' substring matching attribute selector
Gotchas with attribute selection
Attribute selectors allow you to select IDs and classes that start with numbers
CSS3 structural pseudo-classes
The :last-child selector
The nth-child selectors
Understanding what nth rules do
Breaking down the math
nth-based selection in responsive web designs
The negation (:not) selector
The empty (:empty) selector
Do something with the :first-line regardless of viewport
CSS custom properties and variables
CSS calc
CSS Level 4 selectors
The :has pseudo class
Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
Web typography
The @font-face CSS rule
Implementing web fonts with @font-face
A note about custom @font-face typography and responsive designs
New CSS3 color formats and alpha transparency
RGB color
HSL color
Alpha channels
Color manipulation with CSS Color Module Level 4
6. Stunning Aesthetics with CSS3
Text shadows with CSS3
Omitting the blur value when not needed
Multiple text shadows
Box shadows
An inset shadow
Multiple shadows
Understanding spread
Background gradients
The linear-gradient notation
Specifying gradient direction
Color stops
Adding fallback for older browsers
Radial background gradients
Breakdown of the radial-gradient syntax
Handy 'extent' keywords for responsive sizing
Repeating gradients
Background gradient patterns
Multiple background images
Background size

Table of contents