Responsive Web Design with HTML5 and CSS3 - Second Edition
eBook - ePub

Responsive Web Design with HTML5 and CSS3 - Second Edition

Ben Frain

Condividi libro
  1. 312 pagine
  2. English
  3. ePUB (disponibile sull'app)
  4. Disponibile su iOS e Android
eBook - ePub

Responsive Web Design with HTML5 and CSS3 - Second Edition

Ben Frain

Dettagli del libro
Anteprima del libro
Indice dei contenuti
Citazioni

Informazioni sul libro

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 Book• Learn and explore how to harness the latest features of HTML5 in the context of responsive web design• Learn to wield the new Flexbox layout mechanism, code responsive images, and understand how to implement SVGs in a responsive project• Make your pages interactive by using CSS animations, transformations, and transitionsWho This Book Is For Are 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 Learn• Understand what responsive design is, and why it's vital for modern web development• HTML5 markup is cleaner, faster, and more semantically rich than anything that has come before - learn how to use it and its latest features• Integrate 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 them• Learn 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.

Domande frequenti

Come faccio ad annullare l'abbonamento?
È semplicissimo: basta accedere alla sezione Account nelle Impostazioni e cliccare su "Annulla abbonamento". Dopo la cancellazione, l'abbonamento rimarrà attivo per il periodo rimanente già pagato. Per maggiori informazioni, clicca qui
È possibile scaricare libri? Se sì, come?
Al momento è possibile scaricare tramite l'app tutti i nostri libri ePub mobile-friendly. Anche la maggior parte dei nostri PDF è scaricabile e stiamo lavorando per rendere disponibile quanto prima il download di tutti gli altri file. Per maggiori informazioni, clicca qui
Che differenza c'è tra i piani?
Entrambi i piani ti danno accesso illimitato alla libreria e a tutte le funzionalità di Perlego. Le uniche differenze sono il prezzo e il periodo di abbonamento: con il piano annuale risparmierai circa il 30% rispetto a 12 rate con quello mensile.
Cos'è Perlego?
Perlego è un servizio di abbonamento a testi accademici, che ti permette di accedere a un'intera libreria online a un prezzo inferiore rispetto a quello che pagheresti per acquistare un singolo libro al mese. Con oltre 1 milione di testi suddivisi in più di 1.000 categorie, troverai sicuramente ciò che fa per te! Per maggiori informazioni, clicca qui.
Perlego supporta la sintesi vocale?
Cerca l'icona Sintesi vocale nel prossimo libro che leggerai per verificare se è possibile riprodurre l'audio. Questo strumento permette di leggere il testo a voce alta, evidenziandolo man mano che la lettura procede. Puoi aumentare o diminuire la velocità della sintesi vocale, oppure sospendere la riproduzione. Per maggiori informazioni, clicca qui.
Responsive Web Design with HTML5 and CSS3 - Second Edition è disponibile online in formato PDF/ePub?
Sì, puoi accedere a Responsive Web Design with HTML5 and CSS3 - Second Edition di Ben Frain in formato PDF e/o ePub, così come ad altri libri molto apprezzati nelle sezioni relative a Design e Web Design. Scopri oltre 1 milione di libri disponibili nel nostro catalogo.

Informazioni

Anno
2015
ISBN
9781784398262
Edizione
2
Argomento
Design
Categoria
Web Design

Responsive Web Design with HTML5 and CSS3 Second Edition


Table of Contents

Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
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
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
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
Choosing your auto-prefixing solution
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
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 <a> tag
New semantic elements in HTML5
The <main> element
The <section> element
The <nav> element
The <article> element
The <aside> element
The <figure> and <figcaption> elements
The <details> and <summary> elements
The <header> element
The <footer> element
The <address> element
A note on h1-h6 elements
HTML5 text-level semantics
The <b> element
The <em> element
The <i> 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
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
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
Backg...

Indice dei contenuti