Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mastering Responsive Web Design
  • Table Of Contents Toc
Mastering Responsive Web Design

Mastering Responsive Web Design

By : Ricardo Zea
3.9 (10)
Buy this Book
close
close
Mastering Responsive Web Design

Mastering Responsive Web Design

3.9 (10)
By: Ricardo Zea
Buy this Book

Overview of this book

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

How does Sass work?

Knowing how Sass works is a matter of understanding several basic technological concepts:

  1. Sass can be based on two different technologies: Ruby or LibSass. In this book, we're going to use Sass based on Ruby.
  2. Sass is a Ruby gem. Gems are packages for use in Ruby. A Ruby gem is a software that runs only on Ruby. Ruby is a programming language, just like PHP, .NET, Java, and so on.
  3. We can make Sass run via the command line, but we can also run Sass with a third-party application, making the use of the command line unnecessary.
  4. Sass is a programming/scripting language used to create CSS.
  5. CSS is a very repetitive language. Sass allows authors to optimize those repetitive tasks and create CSS faster and more efficiently.
  6. Part of the Sass workflow is when Sass is watching an SCSS file, for example, book-styles.scss. When it detects a change in that SCSS file, it then compiles it into a CSS file book-styles.css.

Tip

Watching an SCSS file means that the Sass watcher is running in the background looking over the SCSS file(s) for any changes.

Installing Sass

Here are the steps we're going to follow:

  1. Download the Ruby installer
  2. Open the command line
  3. Install the Sass gem

Downloading the Ruby installer

Windows: Download the Ruby installer from the following link:

http://rubyinstaller.org/downloads/

Mac: Ruby comes preinstalled on all Macs, so there's no need to download anything.

Opening the command line

Windows and Mac: Open the command line.

Tip

Windows Tip!

Press Windows + R, type CMD, and then press Enter.

Opening the command line

Installing the Sass gem

Type the following command into the command prompt (it doesn't matter which folder you're in):

Windows, use the following command:

gem install sass

Mac, use the following command:

sudo gem install sass
Installing the Sass gem

It'll take a few seconds to install Sass.

Tip

At the time of writing, the latest version of Sass was 3.4.14. The version/revisions might be different by the time the book comes out.

That's it! Sass is now installed on your machine.

Using Sass

What I'm about to show you is completely different to what any other Sass tutorial out there tells you to do. Most of those tutorials complicate things too much. This is the simplest way to use Sass you'll ever read.

The following screenshots are on Windows, but the process can be applied exactly the same regardless of platform.

In the following steps, you will see examples of how the necessary folders and files look after being created, not how to create them:

  1. Create a /Demo folder anywhere on your drive:
    Using Sass
  2. Inside that folder, create two subfolders, /css and /scss:
    Using Sass
  3. Create a .scss file. Go into the /scss folder and create a file called styles.scss:
    Using Sass

    Tip

    Notice the file extension .scss? This is your Sass file. Yes, right now there's nothing in it, it's empty.

  4. Go back to the command line for a minute and follow these steps:
    1. In the command line, type cd <space>
    2. A space after cd means Change Directory. From your file manager, drag and drop the /Demo folder into the command prompt/terminal window and press Enter.
      Using Sass
    3. You should be in the /Demo folder now.
    Using Sass
  5. Make Sass watch your /scss and /css folders by typing this in the command line:
    sass --watch scss:css­
  6. Make Sass watch the /scss and /css folders.
    Using Sass

    That's it! You are now using Sass!

    Tip

    The --watch flag tells Sass to pay attention to the /scss and /css folders so that when we make a change to a .scss file (in our case, styles.scss), Sass will detect the change and compile the SCSS into the final CSS file we're going to use in our website or app.

  7. Edit the .scss file and watch Sass compile it into a .css file:
    1. Open your text editor (I use Sublime Text).
    2. Open the styles.scss file.
    3. Add some CSS to it.
    4. Save the styles.scss file.
    5. From your command line/terminal, verify that the compiling was successful.
    6. Open your styles.css file and enjoy your new creation.
    Using Sass
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Mastering Responsive Web Design
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon