eBook - ePub
Responsive Web Design with HTML5 and CSS3
Ben Frain
This is a test
Condividi libro
- 324 pagine
- English
- ePUB (disponibile sull'app)
- Disponibile su iOS e Android
eBook - ePub
Responsive Web Design with HTML5 and CSS3
Ben Frain
Dettagli del libro
Anteprima del libro
Indice dei contenuti
Citazioni
Informazioni sul libro
In Detail
Tablets, smart phones and even televisions are being used increasingly to view the web. There's never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just today's devices but tomorrow's too.
Learn how to design websites according to the new "responsive design" methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development.
Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewer's screen size.
With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added - all using the power, simplicity and flexibility of CSS3.
Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects won't just be built 'right' for today but also the future.
Approach
This book will lead you, step by step and with illustrative screenshots, through a real example
Who this book is for
Are you writing two websites - one for mobile and one for larger displays? Or perhaps you've heard of Responsive Design but are unsure how to bring HTML5, CSS3, or responsive design all together. If so, this book provides everything you need to take your web pages to the next level - before all your competitors do!
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 è disponibile online in formato PDF/ePub?
Sì, puoi accedere a Responsive Web Design with HTML5 and CSS3 di Ben Frain in formato PDF e/o ePub, così come ad altri libri molto apprezzati nelle sezioni relative a Computer Science e Programming in HTML. Scopri oltre 1 milione di libri disponibili nel nostro catalogo.
Informazioni
Responsive Web Design with HTML5 and CSS3
Table of Contents
Responsive Web Design with HTML5 and CSS3
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
Errata
Piracy
Questions
1. Getting Started with HTML5, CSS3, and Responsive Web Design
Why smart phones are important (and old IE isn't)
Are there times when a responsive design isn't the right choice?
Defining responsive web design
Why stop at responsive design?
Examples of responsive web design
Get your viewport testing tools here!
Online sources of inspiration
HTML5—why it's so good
Saving time and code with HTML5
New, semantically meaningful HTML5 tag elements
CSS3 enables responsive designs and more
The bottom line—CSS3 won't break anything!
How can CSS3 solve everyday design problems?
Look Ma'—no images!
What else has CSS3 got to offer?
Can HTML5 and CSS3 work for us today?
Responsive web designs are not magic bullets
Educating our clients that websites shouldn't look the same in all browsers
Summary
2. Media Queries: Supporting Differing Viewports
You can use media queries today
Why responsive designs need media queries?
Media query syntax
What can media queries test for?
Using media queries to alter our design
The best way to load media queries for responsive designs
Our first responsive design
Don't panic but our design is fixed-width
Responsive designs—making images as economical as possible
Content clipping in smaller viewports
Stopping modern mobile browsers from auto-resizing the page
Fixing the design for different viewport widths
With responsive designs, content should always come first
Media queries—only part of the solution
We need a fluid layout
Summary
3. Embracing Fluid Layouts
Fixed layouts aren't future proof
Why proportional layouts are essential for responsive designs
Amending a design from fixed to proportional layout
A formula to remember
Setting a context for proportional elements
It's always important to remember the context
Using ems rather than pixels for typography
Fluid images
Making images scale with the viewport
Specific rules for specific images
Putting the brakes on fluid images
The incredibly versatile max-width property
Serving different images for different screen sizes
Setting up Adaptive Images
Put background images somewhere else
Where fluid grids and media queries come together
CSS Grid systems
Rapidly building our site with a Grid system
Summary
4. HTML5 for Responsive Designs
What parts of HTML5 can we use today?
Most sites can be written in HTML5
Polyfills, shims, and Modernizr
How to write HTML5 pages
Economies of using HTML5
A sensible approach to HTML5 markup
All hail the mighty <a> tag
Obsolete HTML features
New semantic elements in HTML5
The <section> element
The <nav> element
The <article> element
The <aside> element
The <hgroup> element
The HTML5 outline algorithm
The <header> element
The <footer> element
The <address> element
Practical usage of HTML5's structural elements
What about the main content of the site?
HTML5 text-level semantics
The <b> element
The <em> element
The <i> element
Applying text-level semantics to our markup
Adding accessibility to your site with WAI-ARIA
ARIA's landmark roles
Embedding media in HTML5
Adding video and audio the HTML5 way
Providing alternate source files
Fallback for older browsers
Audio and video tags work almost identically
Responsive video
Offline Web applications
Offline Web applications in a nut shell
Making web pages work offline
Understanding the manifest file
Automatic loading of pages to the offline manifest
About that version comment
Viewing the site offline
Troubleshooting Offline Web applications
Summary
5. CSS3: Selectors, Typography, and Color Modes
What CSS3 offers the frontend developer
CSS3 support in Internet Explorer versions 6 to 8
Using CSS3 to design and develop pages in the browser
Anatomy of a CSS rule
Vendor prefixes and how to use them
Quick and useful CSS3 tricks
CSS3 multiple columns for responsive designs
Adding a gap and column divider
Word wrapping
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
A practical, real world example
CSS3 structural pseudo-classes
The :last-child selector
The nth-child selectors
Understanding what nth rules do
The negation (:not) selector
Amendments to pseudo-elements
Is :first-line handy for responsive designs?
Custom web typography
The @font-face CSS rule
Implementing web fonts with @font-face
Help—my CSS3 @font-face headings look messy
A note about custom @font-face typography and responsive designs
New CSS3 color formats and alpha transparency
RGB color
HSL color
Fallback color values for IE6, IE7, and IE8
Alpha channels
Summary
6. Stunning Aesthetics with CSS3
Text shadows with CSS3
HEX, HSL, or RGB color allowed
Pixels, em, or rem
Preventing a text shadow
Left and top shadows
Creating an embossed text-shadow effect
Multiple text-shadows
Box shadows
Inset shadow
Multiple shadows
Background gradients
Linear background gradients
Breakdown of linear gradient syntax
Radial background gradients
Breakdown of radial gradient syntax
Repeating gradients
Background gradient patterns
Responsive considerations for CSS3
Bringing CSS3 properties together
Multiple background images
Background size
Background position
Background shorthand
More CSS3 features
Sizeable icons which are perfect for responsive designs
Summary
7. CSS3 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 r...