Yelp Facebook LinkedIn YouTube Twitter Instagram

Step-by-Step Training Workbook

Mobile & Responsive Web Design Book

Optimize Sites for All Devices

Buy the workbook

We offer bulk order discounts

This book comes free with our Mobile & Responsive Web Design class

Websites can be viewed on a variety of devices, from mobile phones, to tablets, to desktop computers. Responsive web design detects a device’s screen size and adapts accordingly. In this book you'll be taken step-by-step through a variety of exercises that teach you about important issues for mobile-optimized websites. Learn to optimize pages so they display properly and download faster on mobile devices, how to deal with Retina (2x) displays, how to use SVG graphics, CSS media queries (break points), mobile optimized navigation, the Bootstrap framework, and more. This course workbook can be completed in any code editor. This advanced level book is for people who have experience building webpages.

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-21-1

Download Sample Exercise
Setup & Introduction
Downloading the Class Files
HTML vs. XHTML Syntax
  • Differences between HTML & XHTML syntax
Before You Begin
  • Choosing a code editor
  • Supported browsers
  • Installing & using iOS Simulator
  • Recommended software
  • Installing packages into Sublime Text
Section 1
Setting Up: Do This Before Other Exercises!
  • Setting up your class files
Flix: Setting the Viewport Meta Tag
  • The viewport meta tag
  • device-width
  • initial-scale
  • shrink-to-fit
Flix: SVG (Scalable Vector Graphics) & .htaccess Files
  • Adding SVG as an image
  • Setting SVG width & height
  • Configuring the web server’s .htaccess file for SVG
  • Additional configuration with the .htaccess file
Flix: Mobile-Friendly Forms
  • Input types (search & email)
  • Making CSS background gradients fill the page
Flix: Creating a Scrollable Area
  • Creating a horizontal scrollable area
  • Optimizing the scrolling for iOS touch devices
Section 2
Flix: Media Queries for Retina/HiDPI Graphics
  • Using media queries to load hi-res images for Retina/HiDPI displays
Mobile First vs. Desktop First
  • Mobile first thinking
  • Fluid widths
  • Min-width vs. max-width media queries
Box Model: CSS3 Box-Sizing & Calc()
  • Reviewing the box model
  • CSS3 box sizing
  • CSS3 calc() function
Jive Factory: Creating a Basic Wireframe
  • Wireframing the basic Jive Factory layout
  • Setting up “mobile first” media queries
Section 3
Jive Factory: Finishing the Wireframe
  • Structuring the page for various sizes/devices
  • Min & max-width media queries
  • Using CSS calc() to gain control over fluid layouts
  • Hiding elements for specific sizes/devices
Jive Factory: Creating CSS Gradient Patterns
  • Editing the visual indicator for each media query
  • Fun with RGBA
  • Anatomy of a CSS gradient
  • Linear-gradients & repeating-linear-gradients
  • Linking to Google’s free web fonts
Jive Factory: Starting the Header
  • Adding the logo & nav content
  • Styling the logo & nav for various sizes/devices
Section 4
Jive Factory: SVG Sprites & Styling the Header for Desktop
  • Adding SVG Sprites
  • Styling the logo & nav for various sizes/devices
  • Fixing opacity inheritance
Jive Factory: Final Touches & Limiting Flexible Content
  • Improving Upcoming Shows on mobile
  • Constraining the design at certain breakpoints
  • Centering the design at certain screen sizes
Jive Factory: Responsive Slideshow
  • Getting the slideshow working
  • Styling the slideshow content & controls
  • Preventing hidden images from loading
Section 5
Off-Screen Side Nav Using Only CSS
  • Responsive off-screen navigation
  • Toggling the navigation with a checkbox
  • CSS transitions
Full Screen Backgrounds & Viewport Sizing Units vh & vw
  • Creating a full screen background
  • Using viewport sizing units vh & vw
  • Vertically aligning content
  • Darkening the background image via CSS
Bootstrap: Getting Started
  • Adding content & laying out the page
  • Using Bootstrap’s grid system
  • Creating & adjusting columns
  • Adding a navbar & other components
Section 6
Bootstrap: More Elements & Nesting Grids
  • Adding an email signup form
  • Nesting sections
Bootstrap: Controlling Grids & Layout
  • Changing the grid at specific sizes
  • Showing & hiding elements at specific sizes
Bootstrap: Creating a Photo Grid
  • Bootstrap’s fluid container
  • Making images fill the grid
  • Nesting sections
Bonus Material
Bootstrap: Skinning/Customizing Appearance
  • Overriding Bootstrap’s default appearance
  • Adding custom media queries
  • Bootstrap’s optional theme
  • Creating a fixed navbar
  • Adding icons using Boostrap’s included icon font
Bootstrap: Adding a Slideshow (Carousel)
  • Adding a slideshow using Bootstrap’s carousel
  • Hiding the slideshow on mobile
Animating a CSS Background Gradient
  • Creating a CSS animation
  • Specifying which element will use the animation
Slide-Down Top Nav Using Only CSS
  • Creating a slide-down menu
  • Making the logo & menu button slide down with the page content
Reference Material
Links to Reference Websites

How our eBooks Work Buying eBooks for Someone Else

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s iBooks app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • iBooks (EPUB)
Windows PC
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for teacher pricing).
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

  • Learn to adapt webpages for Mobile, Tablet, and Desktop.

  • Learn to code mobile friendly navigation using only CSS!

  • Use SVG (Scalable Vector Graphics) to deliver high-resolution graphics that look great and download fast.

  • Learn how to use Bootstrap to rapidly code responsive webpages.

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.

Buy the Mobile & Responsive Web Design Book

We offer bulk order discounts

This book comes free with our Mobile & Responsive Web Design class