NMC Library
Image from Google Jackets

Responsive web design with HTML5 and CSS3 : build responsive and future-proof websites to meet the demands of modern web users / Ben Frain.

By: Series: Community experience distilledPublisher: Birmingham, UK : Packt Publishing, 2015Edition: Second editionDescription: xiii, 286 : illustrations ; 24 cmContent type:
  • text
Media type:
  • unmediated
Carrier type:
  • volume
ISBN:
  • 9781784398934
  • 9781784398262
  • 1784398268
Other title:
  • Build responsive and future-proof websites to meet the demands of modern web users
Subject(s): DDC classification:
  • 006.7 23
LOC classification:
  • TK5105.888 .F73 2015
Contents:
Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: The Essentials of Responsive Web Design; Beginning our quest; Defining responsive web design; Responsive web design in a nutshell; Setting browser support levels; A brief note on tooling and text editors; Our first responsive example; Our basic HTML file; Taming images; Enter media queries; Amending the example for a larger screen; The shortcomings of our example; Summary; Chapter 2: Media Queries -- Supporting Differing Viewports
Why media queries are needed for a responsive web designBasic conditional logic in CSS; Media query syntax; Media queries in link tags; Combining media queries; Media queries with @import; Media queries in CSS; What can media queries test for?; Using media queries to alter a design; Any CSS can be wrapped in a media query; Media queries for HiDPI devices; Considerations for organizing and authoring media queries; Linking to different CSS files with media queries; The practicalities of separating media queries; Nesting media queries 'inline'; Combine media queries or write them where it suits?
The viewport meta tagMedia Queries Level 4; Scripting media feature; Interaction media features; The hover media feature; Environment media features; Summary; Chapter 3: Fluid Layouts and Responsive Images; Converting a fixed pixel design to a fluid proportional layout; Why do we need Flexbox?; Inline block and whitespace; Floats; Table and table-cell; Introducing Flexbox; The bumpy path to Flexbox; Browser support for Flexbox; Leave prefixing to someone else; Getting flexy; Perfect vertically centered text; Offset items; Reverse the order of items
How about if we want them laid out vertically instead?Column reverse; Different Flexbox layouts inside different media queries; Inline-flex; Flexbox alignment properties; The align-items property; The align-self property; Possible alignment values; The justify-content property; The flex property; Simple sticky footer; Changing source order; Wrapping up Flexbox; Responsive images; The intrinsic problem of responsive images; Simple resolution switching with srcset; Advanced switching with srcset and sizes; Did you say the browser 'might' pick one image over another?
Art direction with the picture elementFacilitate new-fangled image formats; Summary; Chapter 4: HTML5 for Responsive Web Designs; HTML5 markup -- understood by all modern browsers; Starting an HTML5 page the right way; The doctype; The HTML tag and lang attribute; Specifying alternate languages; Character encoding; Easy-going HTML5; A sensible approach to HTML5 markup; All hail the mighty tag; New semantic elements in HTML5; The element; The element; The element; The element; The element; The and elements.

Includes index.

Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: The Essentials of Responsive Web Design; Beginning our quest; Defining responsive web design; Responsive web design in a nutshell; Setting browser support levels; A brief note on tooling and text editors; Our first responsive example; Our basic HTML file; Taming images; Enter media queries; Amending the example for a larger screen; The shortcomings of our example; Summary; Chapter 2: Media Queries -- Supporting Differing Viewports

Why media queries are needed for a responsive web designBasic conditional logic in CSS; Media query syntax; Media queries in link tags; Combining media queries; Media queries with @import; Media queries in CSS; What can media queries test for?; Using media queries to alter a design; Any CSS can be wrapped in a media query; Media queries for HiDPI devices; Considerations for organizing and authoring media queries; Linking to different CSS files with media queries; The practicalities of separating media queries; Nesting media queries 'inline'; Combine media queries or write them where it suits?

The viewport meta tagMedia Queries Level 4; Scripting media feature; Interaction media features; The hover media feature; Environment media features; Summary; Chapter 3: Fluid Layouts and Responsive Images; Converting a fixed pixel design to a fluid proportional layout; Why do we need Flexbox?; Inline block and whitespace; Floats; Table and table-cell; Introducing Flexbox; The bumpy path to Flexbox; Browser support for Flexbox; Leave prefixing to someone else; Getting flexy; Perfect vertically centered text; Offset items; Reverse the order of items

How about if we want them laid out vertically instead?Column reverse; Different Flexbox layouts inside different media queries; Inline-flex; Flexbox alignment properties; The align-items property; The align-self property; Possible alignment values; The justify-content property; The flex property; Simple sticky footer; Changing source order; Wrapping up Flexbox; Responsive images; The intrinsic problem of responsive images; Simple resolution switching with srcset; Advanced switching with srcset and sizes; Did you say the browser 'might' pick one image over another?

Art direction with the picture elementFacilitate new-fangled image formats; Summary; Chapter 4: HTML5 for Responsive Web Designs; HTML5 markup -- understood by all modern browsers; Starting an HTML5 page the right way; The doctype; The HTML tag and lang attribute; Specifying alternate languages; Character encoding; Easy-going HTML5; A sensible approach to HTML5 markup; All hail the mighty tag; New semantic elements in HTML5; The element; The element; The element; The element; The element; The and elements.

Powered by Koha