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
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
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
Free Learning
Arrow right icon
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
€8.99 €32.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.9 (10 Ratings)
eBook Aug 2015 334 pages 1st Edition
eBook
€8.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Zea
Arrow right icon
€8.99 €32.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.9 (10 Ratings)
eBook Aug 2015 334 pages 1st Edition
eBook
€8.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€8.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

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 : 9781783550241
Category :
Web Development
Languages :
HTML
Concepts :
Responsive Web Development
Tools :
Sublime Text

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Aug 24, 2015
Length: 334 pages
Edition : 1st
Language : English
ISBN-13 : 9781783550241
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

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 (33)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €41.99
€8.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 €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
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 €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
Stars icon
Total € 125.97
Responsive Web Design with HTML5 and CSS3, Second Edition
€41.99
Mastering Responsive Web Design
€41.99
Bootstrap Site Blueprints Volume II
€41.99
Total € 125.97 Stars icon
Banner background image

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
Web Development with Blazor
Web Development with Blazor
Read more
Apr 2024 366 pages
Full star icon 4 (17)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €32.99
€8.99 €26.99
€32.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 €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €29.99
€8.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 (73)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €44.99
€8.99 €35.99
€44.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 (3)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €23.99
€8.99 €29.99
€23.99 €37.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (37)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
.NET 8 Microservices - DDD, CQRS, Vertical/Clean Architecture
Read more
Nov 2024 28hrs 30mins
Video
Video
  • Video Video €8.99
€8.99 €59.99
Implementing Event-Driven Microservices Architecture in .NET 7
Implementing Event-Driven Microservices Architecture in .NET 7
Read more
Mar 2023 326 pages
Full star icon 4.5 (16)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.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 €8.99
  • Paperback Paperback €35.99
€8.99 €28.99
€35.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
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 €8.99
  • Paperback Paperback €35.99
€8.99 €28.99
€35.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 €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.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 €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.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 (73)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €44.99
€8.99 €35.99
€44.99
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 €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.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

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.