Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Web Development > Responsive Web Development > Mastering Responsive Web Design
Mastering Responsive Web Design
Mastering Responsive Web Design

Mastering Responsive Web Design: Push your HTML and CSS skills to the limit and build professional grade, responsive websites

Arrow left icon
Profile Icon Zea
Arrow right icon
€18.99 per month
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.9 (10 Ratings)
Paperback Aug 2015 334 pages 1st Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Zea
Arrow right icon
€18.99 per month
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.9 (10 Ratings)
Paperback Aug 2015 334 pages 1st Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. €18.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Mastering Responsive Web Design

Chapter 2. Marking Our Content with HTML5

Many consider that HTML is code. Well, it's not. HTML—any version of it—is a markup language.

A markup language is a computer language that can be read and understood by humans. It uses tags to define the parts of the content. HTML and XML are markup languages.

To further help the differentiation, a coding language involves much more complex abstractions, scripting, database connections, transmission of data in some shape or form via complex protocols, and so on. Coding is truly a magical world.

HTML can do all these, but it's way less complex and a lot easier to understand.

In this chapter, we're going to focus on the science behind marking up content. Content can come in many different forms: text, images, videos, forms, error messages, success messages, iconography, and so on. Also, the way a type of content behaves in the browser or the way the user interacts with it will tell us what type of HTML element that...

The <main> element

As per the Mozilla Developer Network (MDN) definition:

The HTML Main Element (<main>) can be used as a container for the dominant contents of the document. The main content area consists of content that is directly related to, or expands upon the central topic of a section or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form). Unlike <article> and <section>, this element does not contribute to the document outline.

Here are a few important points to remember about the <main> element:

  • The top-level content of a page should be included in the <main> element.
  • The content should be exclusive and unique to it.
  • The <main> element should never be included inside the <header...

The <article> element

As per the MDN definition:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <article> should be identified, typically by including a heading (h1-h6 element) as a child of the <article> element.

Here are a few important points to remember about the <article> element:

  • Any self-contained content should be placed inside the <article> element.

    Self-contained means that if we take the <article> element and everything inside it out into another context, all the content is self-explanatory and does not need anything else around it to be understood.

  • An <article> can be nested inside another <article> element.
  • There can be more than one <article&gt...

The <section> element

As per the MDN definition:

The HTML Section Element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element.

Here are a few important points to remember about the <section> element:

  • The <section> element can be used to encapsulate a group of related content. This related content doesn't necessarily have to make sense if we take it out of the page's context.
  • A safe and valid way to use the <section> element is to place it inside an <article> element. You can certainly use the <article> element without a <section> element. It's recommended, although not required, to include a heading element (<h1>, <h2>, <h3>, and so on) when using the <section> element.
  • It can be confusing to...

The <aside> element

As per the MDN definition:

The HTML <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.

Here are a few important points to remember about the <aside> element:

  • Content that is tangential to the main content can be included in an <aside> element. If this content was to be separated from the main content, it would still make sense on its own.
  • There can be more than one <aside> in a single page.

Consider the following example:

<body>
    <main class="main-container" role="main">
        <article...

The <header> element

Usually, we think that the top section of our site/app is the header, and this is correct. The editorial name for that top section is the masthead.

However, from an HTML5 standpoint, there's a difference between a masthead and a header.

The masthead is the main header of our site/app and there can be only one. It usually contains the logo, some navigation, maybe a search field, and so on. The header can be considered the top area of any section and there can be more than one header.

Notice that we're not talking about the <header> element, at least not yet.

The masthead can be built using the <header> element, but the <header> element can also be used in other parts of the same page.

Here's the definition from MDN:

The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

Here...

The <footer> element

As per the MDN definition:

The HTML Footer Element (<footer>) represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

Here are a few important points to remember about the <footer> element:

  • It should always contain any information about its containing parent element.
  • Although the term footer implies the bottom section of a page, article, or app, the <footer> element doesn't necessarily have to be at the bottom.
  • There can be more than one <footer> element in a single page.

Consider the following example:

<body>
    <header class="masthead" role="banner">
      <div class="logo">Mastering RWD with HTML5 &amp; CSS3</div>
      <div class="search" role="search">
         <form>
            <label>Search:...

Using WAI-ARIA landmark roles to increase accessibility

One of the most neglected aspects of the web is accessibility, unless you are part of a group dedicated to this subject. As web designers and web developers, we rarely think about handicapped users accessing the web and using our websites or apps with screen readers and other assistive technologies. We actually think first about supporting legacy browsers rather than increasing the accessibility of our products.

In this chapter, we're going to touch on what WAI-ARIA landmark roles are and how they can be easily implemented in our markup, enhancing the semantics of our documents to provide those users with assistive technology a better and pleasant experience when they navigate our websites/apps with their keyboards on any modern browser.

Note

WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications.

WAI-ARIA landmark roles

WAI-ARIA landmark roles can also be referred to as ARIA roles, so that's the term we...

A full HTML5 example page with ARIA roles and meta tags

Now that we have gone through a few essential HTML5 elements, the ARIA roles they can be applied to, and the proper meta tags for display, let's visualize all of them in a full HTML5 page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mastering RWD with HTML5 &amp; CSS3</title>
    <link rel="stylesheet" href="css/site-styles.css">
</head>
<body>
<header class="masthead" role="banner">
    <div class="logo">Mastering RWD with HTML5 &amp; CSS3</div>
    <div class="search" role="search">
      <form>
         <label>Search:
            <input type="text" class="field">
            <button>Search Now!</button>
         </label>
      </form>
    &lt...

Output screenshots for desktop and mobile

The following screenshots represent a prototype/demo both in the wireframe and styled modes. You'll be able to see both the desktop (980-pixels wide) as well as mobile (320-pixels wide) outputs.

In the wireframe screenshots, the white outlines and the gray backgrounds in different tones are basically visual cues to help you understand where the boundaries of each element are without having to use a browser's DevTools.

The styled screenshots, on the other hand, show you what can be accomplished with a small does of CSS. Both the wireframe and styled pages use exactly the same markup.

The demos of the pages can be seen here:

Let's see the screenshots.

The desktop output [wireframe] is as follows:

The desktop output [styled] is as follows:

The mobile output [wireframe] is...

Summary

This was a short chapter but it was certainly full of important information.

We learned that HTML is markup and not code. We also saw various HTML5 elements in action. This will help us understand which HTML5 elements can be used to markup the content we are provided with.

We also learned how to mark your HTML with ARIA roles to make our sites/apps more accessible for users with assistive technologies.

We also addressed a few important meta tags that will help your pages and markup display correctly on different devices, and trigger the latest HTML and JavaScript engines in Internet Explorer.

Finally, we saw all the aforementioned topics implemented in an actual full HTML5 example together with its SCSS. The example was built using the desktop-first approach; this will allow us to methodically transition our mental model to the mobile-first technique.

The next chapter is going to be about demystifying when and how to use the mobile-first and/or desktop-first approaches, and how to work...

Summary

This was a short chapter but it was certainly full of important information.

We learned that HTML is markup and not code. We also saw various HTML5 elements in action. This will help us understand which HTML5 elements can be used to markup the content we are provided with.

We also learned how to mark your HTML with ARIA roles to make our sites/apps more accessible for users with assistive technologies.

We also addressed a few important meta tags that will help your pages and markup display correctly on different devices, and trigger the latest HTML and JavaScript engines in Internet Explorer.

Finally, we saw all the aforementioned topics implemented in an actual full HTML5 example together with its SCSS. The example was built using the desktop-first approach; this will allow us to methodically transition our mental model to the mobile-first technique.

The next chapter is going to be about demystifying when and how to use the mobile-first and/or desktop-first approaches, and how to work...

Left arrow icon

Page 1 of 12

Right arrow icon

Key benefits

  • • Take your RWD skills to the next level with HTML5 and CSS3 best practices that will give you a solid foundation to build out from
  • • Harness the power of the CSS pre-processor Sass to speed up the creation of your CSS
  • • Each chapter dives deep in to different aspects of RWD and is designed to get you up to speed with the latest developments in professional web design

Description

Building powerful and accessible websites and apps using HTML5 and CSS3 is a must if we want to create memorable experiences for our users. In the ever-changing world of web design and development, being proficient in responsive web design is no longer an option: it is mandatory. Each chapter will take you one step closer to becoming an expert in RWD. Right from the start your skills will be pushed as we introduce you to the power of Sass, the CSS preprocessor, to increase the speed of writing repetitive CSS tasks. We’ll then use simple but meaningful HTML examples, and add ARIA roles to increase accessibility. We’ll also cover when desktop-first or mobile-first approaches are ideal, and strategies to implement a mobile-first approach in your HTML builds. After this we will learn how to use an easily scalable CSS grid or, if you prefer, how to use Flexbox instead. We also cover how to implement images and video in both responsive and responsible ways. Finally, we build a solid and elegant typographic scale, and make sure your messages and communications display correctly with responsive emails.

Who is this book for?

If you’re already building responsive designs and are looking to level up your skills, then Mastering Responsive Web Design is the book for you. Regardless of whether you’re a web designer, or web developer, you’ll find something here to help you in your responsive design journey.

What you will learn

  • • Install and use Sass with SCSS syntax to create your CSS
  • • Use HTML5 tags the right way, for the right type of content
  • • Enhance the experience of users with assistive technology with ARIA roles
  • • Design with a desktop-first approach, but implement with mobile-first methodology
  • • Master your layouts by creating your own scalable CSS grid, or using Flexbox for total layout ‘flexibility'
  • • Retrofit your old web sites with your new responsive design skills
  • • Deal with legacy browsers, and learn how to keep your designs consistent
  • • Implement widely used responsive patterns, such as the “drawer navigation”, the “off-canvas” and the “flexbox-based” navigation patterns
  • • Find the best way to serve the right type of image and how to make videos responsive
  • • Build custom responsive emails to ensure the message gets across regardless of the device

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 24, 2015
Length: 334 pages
Edition : 1st
Language : English
ISBN-13 : 9781783550234
Category :
Web Development
Languages :
HTML
Concepts :
Responsive Web Development
Tools :
Sublime Text

What do you get with a Packt Subscription?

Free for first 7 days. €18.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Aug 24, 2015
Length: 334 pages
Edition : 1st
Language : English
ISBN-13 : 9781783550234
Category :
Web Development
Languages :
HTML
Concepts :
Responsive Web Development
Tools :
Sublime Text

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

Bootstrap Site Blueprints Volume II
Bootstrap Site Blueprints Volume II
Read more
Jan 2016 328 pages
Full star icon 4.5 (2)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Mastering Responsive Web Design
Mastering Responsive Web Design
Read more
Aug 2015 334 pages
Full star icon 3.9 (10)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Responsive Web Design with HTML5 and CSS3, Second Edition
Responsive Web Design with HTML5 and CSS3, Second Edition
Read more
Aug 2015 312 pages
Full star icon 4.4 (35)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Stars icon
Total € 125.97
Bootstrap Site Blueprints Volume II
€41.99
Mastering Responsive Web Design
€41.99
Responsive Web Design with HTML5 and CSS3, Second Edition
€41.99
Total € 125.97 Stars icon

Table of Contents

9 Chapters
1. Harness the Power of Sass for Responsive Web Design Chevron down icon Chevron up icon
1. Harness the Power of Sass for Responsive Web Design
How does Sass work?
The basic concepts of Sass for RWD
Summary
2. Marking Our Content with HTML5 Chevron down icon Chevron up icon
2. Marking Our Content with HTML5
The <main> element
The <article> element
The <section> element
The <aside> element
The <header> element
The <footer> element
The <nav> element
Using WAI-ARIA landmark roles to increase accessibility
A full HTML5 example page with ARIA roles and meta tags
Output screenshots for desktop and mobile
Summary
3. Mobile-first or Desktop-first? Chevron down icon Chevron up icon
3. Mobile-first or Desktop-first?
Create your designs in a desktop-first view, but implement them with mobile-first
Sass mixins for the mobile-first and desktop-first media queries
Dealing with legacy browsers
How to deal with high-density screens
Sometimes RWD is not necessarily the right solution
Retrofitting an old website with RWD
Retrofitting with AWD
Retrofitting with RWD
Summary
4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD Chevron down icon Chevron up icon
4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
What is a grid?
CSS grids
CSS frameworks
UI kits
The pros and cons of CSS frameworks for RWD
Creating a custom CSS grid
Building a sample page with the custom CSS grid
Stop using CSS grids, use Flexbox!
Summary
5. Designing Small UIs Driven by Large Finger Chevron down icon Chevron up icon
5. Designing Small UIs Driven by Large Finger
The ideal target sizes on small UIs
The posture patterns and the touch zones
The nav icon – basic guidelines to consider for RWD
The navigation patterns for RWD
Summary
6. Working with Images and Videos in Responsive Web Design Chevron down icon Chevron up icon
6. Working with Images and Videos in Responsive Web Design
Tips for reducing the file size in images for RWD
Third-party image resizing services
The <picture> element and the srcset and sizes attributes
Replacing 1x images with 2x images on the fly with Retina.js
Making videos responsive
The Vector Formats
Summary
7. Meaningful Typography for Responsive Web Design Chevron down icon Chevron up icon
7. Meaningful Typography for Responsive Web Design
Pixels, ems, or rems for typography?
Calculating relative font sizes
Creating a Modular Scale for a harmonious typography
Using the Modular Scale for typography
Web fonts and how they affect RWD
Sass mixin for implementing web fonts
Using FlowType.js for increased legibility
Summary
8. Responsive E-mails Chevron down icon Chevron up icon
8. Responsive E-mails
Why do we need to worry about responsive e-mails?
Don't overlook your analytics
Recommendations for building better responsive e-mails
Responsive e-mail build
Third-party services
Summary
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
Full-Stack Flask and React
Full-Stack Flask and React
Read more
Oct 2023 408 pages
Full star icon 4.3 (4)
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €29.99
€15.99 €23.99
€29.99
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
C# 13 and .NET 9 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2024 828 pages
Full star icon 4.4 (5)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Real-World Web Development with .NET 9
Real-World Web Development with .NET 9
Read more
Dec 2024 578 pages
Full star icon 4.3 (3)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.6 (38)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (10)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €32.99
€17.99 €26.99
€32.99
Scalable Application Development with NestJS
Scalable Application Development with NestJS
Read more
Jan 2025 612 pages
Full star icon 4.8 (5)
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €29.99
€15.99 €23.99
€29.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (74)
eBook
eBook
  • eBook eBook €24.99
  • Paperback Paperback €44.99
€24.99 €35.99
€44.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.99
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Jun 2024 506 pages
Full star icon 5 (8)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.99
Learning Angular
Learning Angular
Read more
Jan 2025 486 pages
Full star icon 4 (6)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €31.99
€17.99 €25.99
€31.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.9
(10 Ratings)
5 star 60%
4 star 10%
3 star 0%
2 star 20%
1 star 10%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Shirin semsar Oct 12, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
it's very good book for peopel who want to learn responsive design
Amazon Verified review Amazon
Alex Sears Oct 31, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is a great resource for people new to front-end development or seasoned veterans. He starts out slow and gives you a primer on Sass and RWD and then gets right into the meat of it. You build a couple different designs from scratch. So you really get to be a part of the whole process. Every little bit is explained. So you aren't left wondering. He also mentions alot of things that can be explored more outside of the book to really up your game, such as preprocessors.One of the things this book brings to the table that others don't is the in-depth explanations of each of the HTML5 elements and their semantic uses. The sections on WAI-ARIA roles for accessibility are something you don't see often either. He ends the book by walking you through how to quickly make a nice email template from scratch. This is huge! Emails are the biggest pain to make, and Ricardo makes it seem so easy.Highly recommend this to anyone wanting to truly learn RWD.
Amazon Verified review Amazon
Hugo Oct 13, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book makes me jump from a totally beginner with zero knowledge about the topic, to a developer with sufficient knowledge to start every project my boss ask me, with a deep approach we can have a really useful tools kit to make responsible web as we would like to make, it covers all I need to make desktop and mobile responsible designs, but I have to say that most of this content was new for me, but this book gives all I need to start working, I easily could understand all the book content, is really easy to understand, I liked the fact that now I can do my responsive sites, like the author said, I feel like I have superpowers too.
Amazon Verified review Amazon
Amazon Customer Nov 12, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
A+ book for both beginners and advance level web designer
Amazon Verified review Amazon
Carles Oct 14, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book takes responsive web design to a new level, a true professional level far away from myths and speculations. It is a complete walk through all steps you need in order to achieve true responsive design using best techniques available today. From using SASS to develop powerful CSS styles to adopting grid or flex frameworks to lay out all elements and get a pretty looking design no matter which device is used to watch the site. There are plenty of examples and code along the book that you can copy paste and test or use in your own work. The chapter I found most useful is the one about images and video, that gives you smart tricks to deal with heavy media files and reduce their size without compromising the overall quality. Some basic web developing knowledge is advised to get the most out of this book.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (74)
eBook
eBook
  • eBook eBook €24.99
  • Paperback Paperback €44.99
€24.99 €35.99
€44.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €19.99
  • Paperback Paperback €35.99
€19.99 €28.99
€35.99
Right arrow icon

About the author

Profile icon Zea
Zea
Ricardo Zea hails originally from Medelln, Colombia. He is a passionate and seasoned full-stack designer who is now located in Dayton, Ohio, USA. He is always looking for ways to level up his skills and those around him. Constantly wondering how things are made on the Web, how they work, and why, have made Ricardo a very technical designer, allowing him to explain to others the intricacies of design and the technicalities of the Web in ways that are very easy to understand and assimilate. Ricardo has a master's degree in publicity and advertising and has deep passion for understanding human behavior. He also has a fiercely competitive PC gaming hunger. Together, all this has allowed him to switch from the creative side of the brain to the rational side very easily, allowing him to visualize and create technically sound web and mobile designs that are responsive, perform well, and convey the proper message through design. Ricardo is the author of Mastering Responsive Web Design, Packt Publishing. He's also the organizer of the CodePen Dayton meetup group. He's a member of the Dayton web developers and UX Dayton meetup groups. He's also one of the first members of SitePoint's Ambassadors program. He's also the author of the monthly web design and development newletter Level Up!. He was also a technical reviewer for Sass and Compass, Designers Cookbook, and Sass Essentials, all by Packt Publishing. For several years, he was also a Flash and CorelDRAW professor at different universities in his home country, Colombia. Ricardo has 15 years of experience in web design and 20 years of experience in visual and graphic design.
Read more
See other products by Zea
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.