Responsive Web Design with HTML5 and CSS3 - Second Edition

 
 
Packt Publishing Limited
  • 1. Auflage
  • |
  • erschienen am 24. August 2015
  • |
  • 312 Seiten
 
E-Book | ePUB mit Adobe DRM | Systemvoraussetzungen
E-Book | PDF mit Adobe DRM | Systemvoraussetzungen
E-Book | ePUB mit Adobe DRM | Systemvoraussetzungen
978-1-78439-826-2 (ISBN)
 
Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web usersAbout This BookLearn and explore how to harness the latest features of HTML5 in the context of responsive web designLearn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive projectMake your pages interactive by using CSS animations, transformations, and transitionsWho This Book Is ForAre you writing two websites - one for mobile and one for larger displays? Or perhaps you've already implemented your first RWD' but are struggling bring it all together? If so, Responsive Web Design with HTML5 and CSS3, Second Edition gives you everything you need to take your web sites to the next level.You'll need some HTML and CSS knowledge to follow along, but everything you need to know about Responsive Design and making great websites is included in the book!What You Will LearnUnderstand what responsive design is, and why it's vital for modern web developmentHTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest featuresIntegrate CSS3 media queries into your designs to use different styles for different media. You'll also learn about future media queries which are evolving in CSS4.Responsive images allow different images to be presented in different scenarios. We'll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts.Conquer forms! Add validation and useful interface elements like date pickers and range sliders with HTML5 markup alone.Implement SVGs into your responsive designs to provide resolution independent images, and learn how to adapt and animate themLearn how to use the latest features of CSS including custom fonts, nth-child selectors (and some CSS4 selectors), CSS custom properties (variables), and CSS calcIn DetailDesktop-only websites just aren't good enough anymore. With mobile internet usage still rising, and tablets changing internet consumption habits, you need to know how to build websites that will just 'work', regardless of the devices used to access them. This second edition of Responsive Web Design with HTML5 and CSS3 explains all the key approaches necessary to create and maintain a modern responsive design.The changing way in which we access the web means that there has never been a greater range of screen sizes and associated user experiences to consider. With these recent trends driving changes in design, typical desktop-only websites fail to meet even minimum expectations when it comes to style and usability, which can be vital when your website is central to yours or your client's brand. Responsive Web Design with HTML5 and CSS3, Second Edition is an updated and improved guide that responds to the latest challenges and trends in web design, giving you access to the most effective approaches to modern responsive design.Learn how to build websites with a "responsive and mobile first" methodology, allowing a website to display effortlessly on every device that accesses it. Packed with examples, and a thorough explanation of modern techniques and syntax, Responsive Web Design with HTML5 and CSS3, Second Edition provides a comprehensive resource for all things 'responsive'.This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won't just be built 'right' for today, but in the future too.Chapter example code is all hosted on rwd.education, a dedicated site for the book, built by the author, using the approaches and techniques championed throughout.Style and approachThis book should be useful in two ways: as a 'read from the beginning and learn as you go' resource but also as a reference you can come back to in the months to come - when trying to remember this or that syntax or look up a link that may help you out of a development hell-hole.To this end, rather than follow a single design through from chapter one and build on it incrementally until the end of the book, each chapter exists in relative isolation.This means that code and examples are particular to each chapter and don't need to be considered along with what has gone before or after.That doesn't mean that each chapter's techniques won't work in unison; the reference site for this book, rwd.education is an example of them all working in harmony.However, by limiting the chapter examples to the topic at hand, it should be simpler for you to understand and reference the essence of each example and topic in the future.
  • Englisch
  • Olton Birmingham
  • |
  • Großbritannien
  • Überarbeitete Ausgabe
978-1-78439-826-2 (9781784398262)
1784398268 (1784398268)
weitere Ausgaben werden ermittelt
Ben Frain has been a web designer/developer since 1996. He is currently employed as a Senior Front-end Developer at Bet365.
Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance.
He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures. Playing indoor football while his body and wife still allow it, and wrestling with his two sons.
His other book, Sass and Compass for Designers is available now. Visit Ben online at www.benfrain.com and follow him on Twitter at twitter.com/benfrain.
  • 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 design
  • Basic 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 tag
  • Media 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 element
  • Facilitate 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
  • The and elements
  • The element
  • The element
  • The element
  • A note on h1-h6 elements
  • HTML5 text-level semantics
  • The element
  • The element
  • The element
  • Obsolete HTML features
  • Putting HTML5 elements to use
  • Applying common sense to your element selection
  • WCAG and WAI-ARIA for more accessible web applications
  • WCAG
  • WAI-ARIA
  • Don't use roles for semantic elements
  • If you only remember one thing
  • Taking ARIA further
  • Embedding media in HTML5
  • Adding video and audio the HTML5 way
  • Fallback capability for older browsers
  • Audio and video tags work almost identically
  • Responsive HTML5 video and iFrames
  • A note about 'offline first'
  • Summary
  • Chapter 5: CSS3 - Selectors, Typography, Color Modes, and New Features
  • No one knows it all
  • Anatomy of a CSS rule
  • Quick and useful CSS tricks
  • CSS multi-column layouts for responsive designs
  • Fixed columns, variable width
  • Adding a gap and column divider
  • Word wrapping
  • Text ellipsis
  • Creating horizontal scrolling panels
  • Facilitating feature forks in CSS
  • Feature queries
  • Combining conditionals
  • Modernizr
  • Feature detection with Modernizr
  • New CSS3 selectors and how to use them
  • CSS3 attribute selectors
  • CSS3 substring matching attribute selectors
  • The 'beginning with' substring matching attribute selector
  • The 'contains an instance of' substring matching attribute selector
  • The 'ends with' substring matching attribute selector
  • Gotchas with attribute selection
  • Attribute selectors allow you to select IDs and classes that start with numbers
  • CSS3 structural pseudo-classes
  • The :last-child selector
  • The nth-child selectors
  • Understanding what nth rules do
  • Breaking down the math
  • nth-based selection in responsive web designs
  • The negation (:not) selector
  • The empty (:empty) selector
  • Do something with the :first-line regardless of viewport
  • CSS custom properties and variables
  • CSS calc
  • CSS Level 4 selectors
  • The :has pseudo class
  • Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
  • Web typography
  • The @font-face CSS rule
  • Implementing web fonts with @font-face
  • A note about custom @font-face typography and responsive designs
  • New CSS3 color formats and alpha transparency
  • RGB color
  • HSL color
  • Alpha channels
  • Color manipulation with CSS Color Module Level 4
  • Summary
  • Chapter 6: Stunning Aesthetics with CSS3
  • Text shadows with CSS3
  • Omitting the blur value when not needed
  • Multiple text shadows
  • Box shadows
  • An inset shadow
  • Multiple shadows
  • Understanding spread
  • Background gradients
  • The linear-gradient notation
  • Specifying gradient direction
  • Color stops
  • Adding fallback for older browsers
  • Radial background gradients
  • Breakdown of the radial-gradient syntax
  • Handy 'extent' keywords for responsive sizing
  • Repeating gradients
  • Background gradient patterns
  • Multiple background images
  • Background size
  • Background position
  • Background shorthand
  • High-resolution background images
  • CSS filters
  • Available CSS filters
  • Combining CSS filters
  • A warning on CSS performance
  • A note on CSS masks and clipping
  • Summary
  • Chapter 7: Using SVGs for Resolution Independence
  • A brief history of SVG
  • The graphic that is a document
  • The root SVG element
  • Namespace
  • The title and desc tags
  • The defs tag
  • The g element
  • SVG shapes
  • SVG paths
  • Creating SVGs with popular image editing packages and services
  • Save time with SVG icon services
  • Inserting SVGs into your web pages
  • Using an img tag
  • Using an object tag
  • Insert an SVG as a background image
  • A brief aside on data URIs
  • Generating image sprites
  • Inserting an SVG inline
  • Re-using graphical objects from symbols
  • Inline SVGs allow different colors in different contexts
  • Make dual-tone icons that inherit the color of their parent
  • Re-using graphical objects from external sources
  • What you can do with each SVG insertion method (inline, object, background-image, and img)
  • Browser schisms
  • Extra SVG capabilities and oddities
  • SMIL animation
  • The end of SMIL
  • Styling an SVG with an external style sheet
  • Styling an SVG with internal styles
  • SVG properties and values within CSS
  • Animate an SVG with CSS
  • Animating SVG with JavaScript
  • A simple example of animating an SVG with GreenSock
  • Optimising SVGs
  • Using SVGs as filters
  • A note on media queries inside SVGs
  • Implementation tips
  • Further resources
  • Summary
  • Chapter 8: Transitions, Transformations, and Animations
  • What CSS3 transitions are and how we can use them
  • The properties of a transition
  • The transition shorthand property
  • Transition different properties over different periods of time
  • Understanding timing functions
  • Fun transitions for responsive websites
  • CSS3 2D transforms
  • Scale
  • Translate
  • Using translate to center absolutely positioned elements
  • Rotate
  • Skew
  • Matrix
  • Matrix transformations for cheats and dunces
  • The transform-origin property
  • CSS3 3D transformations
  • The transform3d property
  • Use transforms with progressive enhancement
  • Animating with CSS3
  • The animation-fill-mode property
  • Summary
  • Chapter 9: Conquer Forms with HTML5 and CSS3
  • HTML5 forms
  • Understanding the component parts of HTML5 forms
  • placeholder
  • Styling the placeholder text
  • required
  • autofocus
  • autocomplete
  • List and the associated datalist element
  • HTML5 input types
  • email
  • number
  • min and max ranges
  • Changing the step increments
  • url
  • tel
  • search
  • pattern
  • color
  • Date and time inputs
  • date
  • month
  • week
  • time
  • range
  • How to polyfill non-supporting browsers
  • Styling HTML5 forms with CSS3
  • Indicating required fields
  • Creating a background fill effect
  • Summary
  • Chapter 10: Approaching a Responsive Web Design
  • Get designs in the browser as soon as possible
  • Let the design dictate the breakpoints
  • View and use the design on real devices
  • Embracing progressive enhancement
  • Defining a browser support matrix
  • Functional parity, not aesthetic parity
  • Choosing the browsers to support
  • Tiering the user experience
  • Practically delivering experience tiers
  • Linking CSS breakpoints to JavaScript
  • Avoid CSS frameworks in production
  • Coding pragmatic solutions
  • When a link becomes a button
  • Use the simplest code possible
  • Hiding, showing, and loading content across viewports
  • Let CSS do the (visual) heavy lifting
  • Validators and linting tools
  • Performance
  • The next big things
  • Summary
  • Index

Dateiformat: EPUB
Kopierschutz: Adobe-DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat EPUB ist sehr gut für Romane und Sachbücher geeignet - also für "fließenden" Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Mit Adobe-DRM wird hier ein "harter" Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Dateiformat: PDF
Kopierschutz: Adobe-DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat PDF zeigt auf jeder Hardware eine Buchseite stets identisch an. Daher ist eine PDF auch für ein komplexes Layout geeignet, wie es bei Lehr- und Fachbüchern verwendet wird (Bilder, Tabellen, Spalten, Fußnoten). Bei kleinen Displays von E-Readern oder Smartphones sind PDF leider eher nervig, weil zu viel Scrollen notwendig ist. Mit Adobe-DRM wird hier ein "harter" Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Download (sofort verfügbar)

32,73 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
ePUB mit Adobe DRM
siehe Systemvoraussetzungen
PDF mit Adobe DRM
siehe Systemvoraussetzungen
Hinweis: Die Auswahl des von Ihnen gewünschten Dateiformats und des Kopierschutzes erfolgt erst im System des E-Book Anbieters
E-Book bestellen

Unsere Web-Seiten verwenden Cookies. Mit der Nutzung dieser Web-Seiten erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok