Learning Responsive Web Design. A Beginner's Guide - Helion

ebook

Autor: Clarissa Peterson
ISBN: 978-14-493-6368-0
stron: 416, Format: ebook
Data wydania: 2014-06-09
Księgarnia: Helion

Cena książki: 118,15 zł (poprzednio: 137,38 zł)
Oszczędzasz: 14% (-19,23 zł)

Osoby, które kupiły tę książkę, wybierały także »

Tagi: Web Design

Deliver an optimal user experience to all devices—including tablets, smartphones, feature phones, laptops, and large screens—by learning the basics of responsive web design. In this hands-on guide, UX designer Clarissa Peterson explains how responsive web design works, and takes you through a responsive workflow from project kickoff to site launch.

Ideal for anyone involved in the process of creating websites—not just developers—this book teaches you fundamental strategies and techniques for using HTML and CSS to design websites that not only adapt to any screen size, but also use progressive enhancement to provide a better user experience based on device capabilities such as touchscreens and retina displays.

Start with content strategy before creating a visual design
Learn why your default design should be for the narrowest screens
Explore the HTML elements and CSS properties essential for responsive web design
Use media queries to display different CSS styles based on a device’s viewport width
Handle elements such as images, typography, and navigation
Use performance optimization techniques to make your site lighter and faster

Osoby które kupowały "Learning Responsive Web Design. A Beginner's Guide", wybierały także:

Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie III 49,00 zł, (26,95 zł -45%)
Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych. Wydanie II 49,00 zł, (26,95 zł -45%)
Ponadczasowe logo. Projektowanie znaków odpornych na działanie czasu 49,00 zł, (26,95 zł -45%)
100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach. Wydanie II 57,95 zł, (32,45 zł -44%)
Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie III 67,77 zł, (37,95 zł -44%)

Spis treści

Learning Responsive Web Design. A Beginner's Guide eBook -- spis treści

Learning Responsive Web Design: A Beginners Guide
Preface
- How This Book Is Organized
- Who Should Read This Book
- How to Contact Us
- Acknowledgments
I. Foundations of Responsive Design
- 1. What Is Responsive Design?
  - Just the Basics
  - A Short History
    - Fixed-Width Design
    - Mobile Web Browsing
    - Mobile Websites
    - More Devices
    - Media Queries
    - Flexibility
    - Responsive Web Design
  - Why Responsive Design
    - Getting the Right Design on Every Device
    - Less Work
    - Optimized for Search
  - Summary
- 2. Responsive Content
  - Content Strategy
    - Mobile Content Strategy?
  - Managing Content
    - Use Only What You Need
    - How to Pare Down
    - Content Audit/Inventory
  - Developing Content
    - How Users Read
      - Scanning
      - Inverted pyramid
      - Headings
      - Short and sweet
    - Plain Language
  - Content Parity
  - Content Governance
    - Creating Timeless Content
  - Adaptive Content
  - Summary
II. Creating Responsive Websites
- 3. HTML for Responsive Sites
  - Working with HTML
    - Versions of HTML
    - Web Standards
    - Using HTML5
  - Basic Page Structure
    - Document Type Declaration (DOCTYPE)
    - Document Structure
    - The Page Title
    - Charset
  - Viewport
    - Width
    - Initial-Scale
    - User-Scalable
    - Maximum-Scale
  - Structural Elements
    - Screen Readers
    - <header>
    - <nav>
    - <footer>
    - <article>
    - <aside>
    - IE Support
  - Creating a Page
    - Structural Elements
    - Adding Content
    - Unstyled Page
  - Clean and Semantic HTML
    - Separating Content and Presentation
    - Comments
  - Summary
- 4. CSS for Responsive Sites
  - How CSS Works
  - Versions of CSS
    - Browser Prefixes
  - Where CSS Goes
    - Embedded Styles
    - Stylesheets
    - Inline Styles
  - The Cascade
    - How It Works
    - Important
    - Inline Styles
    - IDs
    - Classes, Attributes, and Pseudo-classes
    - Elements and Pseudo-elements
    - Inherited Rules
    - Default Values
    - What If Anything Conflicts?
  - Using the Cascade
    - Default Values and Reset
      - Reset
    - Inherited Rules
    - Elements
    - Everything Else
    - Keeping It Simple
  - Comments
  - Organizing Your Stylesheet
  - The Box Model
    - Measurements
    - Ems
    - Height and Width
    - Margins and Padding
    - Borders
    - Box-Sizing
  - display
  - Positioning
    - Static
    - Relative
    - Absolute
    - Fixed
    - Measurements for Positioned Elements
  - float and clear
  - Basic Styles
  - Summary
- 5. Media Queries
  - Whats a Media Query?
  - Media Query Structure
  - Using Media Queries in Stylesheet Links
  - Other Ways to Use Media Queries
  - What We Can Query
    - Viewport Width and Height
    - Screen Width and Height
    - Orientation
    - Aspect Ratio
    - Resolution
    - Other Media Features
  - Browser Support
    - Conditional Comments for Internet Explorer
    - Testing Media Query Answers
  - Breakpoints
  - Design Ranges
  - Designing Responsively
    - Progressive Enhancement
    - Designing with Grids
    - Using columns
    - Design for Small Screens First
  - Using Media Queries
  - Two-Column Layout
    - Using Floats
    - Using a Grid
    - Adding a Media Query
  - Setting a Maximum Width
  - How to Choose Breakpoints
  - Summary
- 6. Images
  - Ways to Display Images
    - CSS Alternatives
    - Content Images
    - Background Images
    - Image Sprites
    - Icon Fonts
  - Alt Text
    - Writing Good Alt Text
  - Image File Formats
    - JPEG
    - GIF
    - PNG
    - SVG
  - Optimizing Images
    - Pixels and Resolution
    - High-Density Screens
    - Compressing Images
    - Actual Dimensions
  - Content Images
    - The <img> element
    - Adding an Image
    - Flexible Image Dimensions
    - Media Queries
    - Maximum Width
    - Telling Stories with Photos
  - Background Images
    - Adding Background Images
    - Alignment
  - Responsive Images
    - Proposed Client-Side Solutions
      - srcset
      - <picture>
    - Other Solutions
      - Picturefill
      - Adaptive Images
      - HiSRC
      - Third-party services
    - Breakpoints
  - Summary
III. Working Responsively
- 7. Responsive Workflow
  - Strategy and Planning
    - User Research
    - Content
      - Information architecture
      - Content outline
  - Content Before Layout
    - Components
    - Designing in Text
    - Linear Design
    - Content Hierarchy
  - Thinking About Layout
    - Sketching
    - Start Small
    - Mobile First
  - Prototypes
    - Wireframes Versus Prototypes
    - Wireframes
    - Responsive Prototypes
    - Whats In a Prototype?
    - Start With the Basics
    - How Many Page Layouts to Create
    - Frameworks
    - Prototyping Tools
  - Visual Design
    - Style Tiles
    - Testing and Adjusting
    - Style Guide
  - Responsive Design Tools
    - Adobe Photoshop
    - Adobe InDesign
    - Adobe Edge Reflow
    - adobe Dreamweaver
    - The Browser
  - Selling Responsive Design
    - Why Bother with Responsive Design?
    - Educating Your Clients
    - Emphasizing Responsive
    - Responsive Design Is Not Always the Best Option
    - Cost
  - Working with Clients
    - Deliverables
    - Presentation
  - Summary
- 8. Mobile and Beyond
  - User Experience
    - Users Come First
    - The Myth of the Mobile User
    - Designing for Context
    - Mobile-Only Users
    - Multi-Device Usage
  - Device-Agnostic Design
  - Focusing on Mobile First
  - Do What You Can
  - Types of Devices
    - Mobile Phones
    - Tablets
    - Other Devices
    - Desktop and Laptop Computers
  - Touch
    - Capacitive Touch
    - Multi-Touch
    - Gestures
    - JavaScript Events
      - Hover
      - Touch delay
    - Touch Target Size
      - Increasing touch target size
    - Navigation Location
  - Screen Size
    - Rotate
  - Accessibility (Universal Design)
    - Visual
      - Screen readers
      - Text size
      - Color contrast
      - Color blindness
    - Audio
    - Input Methods
      - Keyboard only
      - Speech recognition software
    - Cognitive Disabilities
  - Deciding Which Devices to Support
  - Why Use Real Devices for Testing
    - Device Labs
    - Buying Devices
  - Testing
    - Validators
    - Browser Resizing
      - Browser tools
    - Browsers and Operating Systems
    - Emulators and Simulators
    - Assistive Technology
  - Summary
IV. Designing Responsive Websites
- 9. Typography
  - Start with HTML
  - Typefaces
    - Choose Your Typeface First
  - Using Fonts
    - Well-Designed Fonts
    - Self-Hosted Fonts
    - Font Services
    - Linking to Font Files
    - Creating the Font Stack
  - Sizing Text
    - Forget About Pixels
    - Screen Distance
    - Absolute Versus Relative
    - Setting a Default Font Size
    - Why 100%?
    - Units of Measurement
      - Ems
      - Nested ems
      - Rems
      - Using fallback values
      - Using browser defaults
      - Deciding between ems and rems
    - Relationship Between Sizes
    - Line Height
  - Line Length
    - Testing Line Length
    - Adjusting Margins and Font Size
    - Hyphenation
    - Overflow Wrap
  - Whitespace
  - Margins and Padding
  - Changing Typeface for Screen Size
  - Summary
- 10. Navigation and Header Layout
  - Responsive Navigation
    - Start Small
    - Styling Your List
    - Horizontal Navigation
  - Branding
  - Navigation Links
    - Make It Flexible
    - What Do Users Want to Do?
    - Goal-Based Navigation
    - Keep It Consistent
    - Keep It Simple
  - Navigation Patterns
    - Top Navigation
    - Footer Navigation
    - Toggle Push Navigation
    - Toggle Overlay Navigation
    - Priority Navigation
    - Select Menu Navigation
    - Flyout Navigation
    - Bottom Navigation
    - Skip the Subnavigation
    - Abandoned Navigation
    - Sticky Menus for Wider Screens
  - Header
    - Minimalist Header
    - Complicated Header
    - Navigation Icon
    - Other Icons
  - Summary
- 11. Performance
  - Why Performance Matters
  - Performance as Design
    - Connections
    - Balance
    - The Bloated Web
  - How Web Pages Are Loaded and Rendered
    - Latency
    - DNS Request
    - Redirections
    - HTTP Request
    - Sending the HTML File
    - Decompression
    - DOM
    - Rendering the <head>
      - External resources
      - Parallel loading
      - Single-threaded execution
    - Rendering the <body>
      - Loading HTML images
      - Loading background images
      - More JavaScript
    - onload Events
  - Measuring Performance
  - Cleaning Up Your Code
    - Use Straightforward Code
    - Minification
  - Minimizing HTTP Requests
    - Concatenation
    - Third-Party Code
    - Image sprites
  - Server Stuff
    - Avoid Redirects
    - File Compression
    - Browser Caching
  - JavaScript
    - What JavaScript Does
    - How JavaScript Works
    - Blocking Javascript
      - Load above-the-fold code first
      - Inline scripts
      - Delay loading
      - Defer execution
      - Asynchronous loading
      - Loading only necessary code on each page
      - Using HTML/CSS instead of JavaScript
    - JavaScript Libraries
  - CSS
    - CSS Frameworks
  - Hosting
    - Content Delivery Networks (CDN)
    - Content Management System
  - Conditionally Loading Content
  - Reflows and Repaints
  - RESS
    - Example of RESS
  - Summary
Index
About the Author
Copyright