Sams Teach Yourself Responsive Web Design in 24 Hours (Paperback)

Learn responsive web design (RWD) with HTML5, CSS3 & JavaScript in just 24 one-hour lessons

 

Sams Teach Yourself Responsive Web Design in 24 Hours helps you create websites that work equally well on everything from smartphones and tablets to multi-screen monitors.

 

This book’s straightforward, step-by-step approach shows how to use HTML, CSS, and JavaScript to build the responsive sites today’s users and clients want. In just a few hours, you’ll be building layouts, sites, forms, and web apps that automatically adapt to virtually any device. Every lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success.

Learn how to…

• Create effective and reliable responsive designs with CSS3, HTML5, and JavaScript
• Use progressive enhancement to consistently provide the right content while making the most of each device and browser
• Establish breakpoints and write CSS media queries to respond appropriately to each user agent
• Choose the right layout and wireframing approach for your site
• Use web fonts to control typography and choose sizes that look good on any device
• Master three ways to make tables responsive
• Build responsive forms using the latest HTML5 tags and attributes
• Implement responsive navigation patterns that users understand intuitively
• Test for responsiveness and performance
• Use Responsive Design + Server Side Components (RESS) to optimize performance

CONTENTS AT A GLANCE

PART I: INTRODUCTION TO RESPONSIVE WEB DESIGN

H OUR 1: What Is Responsive Web Design?

• History of Responsive Web Design

• Why We Need Responsive Web Design

HOUR 2 : Alternatives to Responsive Web Design

• Table-Based Layouts

• CSS Layouts

• Detection Scripts

HOUR 3: The Growth of Mobile

• Basic Cell Phones

• Smartphones

• Tablets

• Retina Devices

• Why Responsive Design Is Important

HOUR 4 : Progressive Enhancement

• What Is Progressive Enhancement?

• How to Use Progressive Enhancement on a

• Website

• Benefits of Progressive Enhancement

HOUR 5 : HTML for Responsive Web Design

• Using HTML5

• Clean Code

• Don’t Forget Semantic Elements

• Validating Your HTML

HOUR 6: Basic CSS

• How to Write CSS Rules

• Embedded and External Style Sheets

• Styling Fonts and Colors

• Creating a Layout with CSS

• Understanding Cascading and Specificity

HOUR 7: Unobtrusive JavaScript

• What Is Unobtrusive JavaScript?

• How to Implement Unobtrusive JavaScript

 

PART II: BUILDING A RESPONSIVE WEBSITE

HOUR 8: Planning a Responsive Website

• Should You Make Your Website Responsive?

• How to Plan for a Responsive Website

HOUR 9: Mobile First

• Why Design for Mobile First?

• What Makes a Site Mobile Friendly?

• What About Mobile Only?

HOUR 1 0: CSS Media Queries

• What Is a Media Query?

• Media Query Expressions

HOUR 1 1: Breakpoints

• What Is a Breakpoint?

• How to Define Breakpoints in CSS

• Optimal Breakpoints

HOUR 12: Layout

• What Is Web Layout?

• Types of Layouts

• Columns in Layout

HOUR 13 : Navigation

• Why Responsive Navigation Is Important

• What Makes Navigation Mobile Friendly?

• Basic RWD Navigation Patterns

HOUR 14: Responsive Fonts and Typography

• Using Web Fonts

• Sizing Typography

• Relative Versus Absolute Font Sizes

• New CSS3 Measurement Units

HOUR 15: Creating and Using Images in RWD

• Making Images Responsive

• Improving Download Speeds

• Building and Using Retina-Ready Images

HOUR 16: Videos and Other Media in RWD

• How to Make Videos Responsive

• Making YouTube Videos Responsive

HOUR 17: Tables in Responsive Web Design

• Tables on Small Devices

• Can Tables Be Responsive?

• Where Do Layout Tables Fit in RWD?

HOUR 18 : Responsive Web Forms

• HTML5 Forms

• Making Web Forms Usable

• Creating Responsive Forms

HOUR 19 : Testing Responsive Websites

• Testing in Your Browser

• Testing in a Device for All Your Breakpoints

• How to Test When You Don’t Have the Devices

HOUR 20 : Problems with Responsive Web Design

• Responsive Designs Can Be Slow

• RWD Can Make More Work for Designers

• Not All Customers Like Responsive Sites

• RWD May Break Advertising

 

PART III: IMPROVING RESPONSIVE DESIGN

HOUR 21: Tools for Creating Responsive Web Designs

• Planning and Designing Your RWD Site

• HTML Element and CSS Tools

• Web Editors for Building Responsive Web Pages

HOUR 22 : Device and Feature Detection

• Why Use Detection Scripts

• Modernizr

• WURFL

HOUR 23: Using RESS with RWD

• What Is RESS?

• Benefits of Using RESS

• Getting Started with RESS

• When to Use RESS

HOUR 24: RWD Best Practices

• Give Everyone the Best Experience

• Use the Best Breakpoints You Can

• Be Flexible and Think Small

• Don’t Forget the Content

• Manage Costs

學習響應式網頁設計（RWD）只需24堂一小時的課程，使用HTML5、CSS3和JavaScript。

《Sams Teach Yourself Responsive Web Design in 24 Hours》幫助您建立適用於智能手機、平板電腦和多屏幕顯示器的網站。

本書以直觀的步驟方法展示如何使用HTML、CSS和JavaScript來建立今天用戶和客戶所需的響應式網站。在短短幾個小時內，您將能夠建立適應任何設備的佈局、網站、表單和網絡應用程序。每一課都建立在您已經學到的基礎上，為實際應用奠定了堅實的基礎。

學習如何...

- 使用CSS3、HTML5和JavaScript創建有效和可靠的響應式設計
- 使用漸進增強來提供正確的內容，並充分利用每個設備和瀏覽器
- 建立斷點並編寫CSS媒體查詢以適應每個用戶代理
- 選擇適合您網站的佈局和線框設計方法
- 使用網頁字體控制排版，並選擇在任何設備上都看起來好的尺寸
- 掌握三種使表格響應式的方法
- 使用最新的HTML5標籤和屬性構建響應式表單
- 實施用戶直觀理解的響應式導航模式
- 測試響應性和性能
- 使用響應式設計+服務器端組件（RESS）優化性能

內容一覽：

第一部分：響應式網頁設計入門
第1小時：什麼是響應式網頁設計？
- 響應式網頁設計的歷史
- 為什麼我們需要響應式網頁設計

第2小時：響應式網頁設計的替代方案
- 基於表格的佈局
- CSS佈局
- 檢測腳本

第3小時：移動設備的增長
- 基本手機
- 智能手機
- 平板電腦
- Retina設備
- 響應式設計的重要性

第4小時：漸進增強
- 什麼是漸進增強？
- 如何在網站上使用漸進增強
- 漸進增強的好處

第5小時：響應式網頁設計的HTML
- 使用HTML5
- 編寫乾淨的代碼
- 不要忘記語義元素
- 驗證您的HTML

第6小時：基本CSS
- 如何編寫CSS規則
- 內嵌和外部樣式表
- 設置字體和顏色

請注意，以上為書籍內容的摘要，詳細內容請參閱原書。