Responsive Web Design with HTML5 and CSS3 Second Edition Ben Frain

Read Anytime Anywhere Easy Ebook Downloads at ebookmeta.com
Responsive Web Design with HTML5 and CSS3 Second
Edition Ben Frain
https://ebookmeta.com/product/responsive-web-design-with-
html5-and-css3-second-edition-ben-frain/
OR CLICK HERE
DOWLOAD EBOOK
Visit and Get More Ebook Downloads Instantly at https://ebookmeta.com

Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.
The Modern Web Multi Device Web Development with HTML5
CSS3 and JavaScript 1st Edition Gasston Peter
https://ebookmeta.com/product/the-modern-web-multi-device-web-
development-with-html5-css3-and-javascript-1st-edition-gasston-peter/
ebookmeta.com
Responsive Web Design with AngularJS Sandeep Kumar Patel
https://ebookmeta.com/product/responsive-web-design-with-angularjs-
sandeep-kumar-patel/
ebookmeta.com
Web Development and Design Foundations with HTML5, 10th
edition Terry Felke-Morris
https://ebookmeta.com/product/web-development-and-design-foundations-
with-html5-10th-edition-terry-felke-morris/
ebookmeta.com
Rusty A boss s daughter virgin romance A Mountain View
Fireman Romance Book 6 1st Edition Eve London
https://ebookmeta.com/product/rusty-a-boss-s-daughter-virgin-romance-
a-mountain-view-fireman-romance-book-6-1st-edition-eve-london-2/
ebookmeta.com

Demon Slayer Kimetsu No Yaiba Volumes 13 14 Chapters 114
116 Koyoharu Got■ge
https://ebookmeta.com/product/demon-slayer-kimetsu-no-yaiba-
volumes-13-14-chapters-114-116-koyoharu-gotoge/
ebookmeta.com
Critical Thinking Pseudoscience and the Paranormal 2nd
Edition Jonathan C Smith
https://ebookmeta.com/product/critical-thinking-pseudoscience-and-the-
paranormal-2nd-edition-jonathan-c-smith/
ebookmeta.com
BlindSpots Why Good People Make Bad Choices First Edition
Mccarthy
https://ebookmeta.com/product/blindspots-why-good-people-make-bad-
choices-first-edition-mccarthy/
ebookmeta.com
Ewha Korean Study Guide 1 2 English 1st Edition Ewha
Language Center
https://ebookmeta.com/product/ewha-korean-study-guide-1-2-english-1st-
edition-ewha-language-center/
ebookmeta.com
The Empathy Advantage Leading the Empowered Workforce 1st
Edition Heather E Mcgowan Chris Shipley
https://ebookmeta.com/product/the-empathy-advantage-leading-the-
empowered-workforce-1st-edition-heather-e-mcgowan-chris-shipley/
ebookmeta.com

Murder at the Christmas Cookie Bake Off Beacon Bakeshop
Mystery 2 1st Edition Darci Hannah
https://ebookmeta.com/product/murder-at-the-christmas-cookie-bake-off-
beacon-bakeshop-mystery-2-1st-edition-darci-hannah/
ebookmeta.com

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
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
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
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
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
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

Responsive Web Design with
HTML5 and CSS3 Second
Edition

Responsive Web Design with
HTML5 and CSS3 Second
Edition
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored
in a retrieval system, or transmitted in any form or by any means,
without the prior written permission of the publisher, except in the
case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure
the accuracy of the information presented. However, the information
contained in this book is sold without warranty, either express or
implied. Neither the author, nor Packt Publishing, and its dealers and
distributors will be held liable for any damages caused or alleged to
be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information
about all of the companies and products mentioned in this book by
the appropriate use of capitals. However, Packt Publishing cannot
guarantee the accuracy of this information.
First published: April 2012
Second edition: August 2015
Production reference: 2200815
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street

Birmingham B3 2PB, UK.
ISBN 978-1-78439-893-4
www.packtpub.com

Credits
Author
Ben Frain
Reviewers
Esteban S. Abait
Christopher Scott Hernandez
Mauvis Ledford
Sophie Williams
Commissioning Editor
Edward Gordon
Acquisition Editors
Edward Gordon
Subho Gupta
Content Development Editor
Pooja Nair
Technical Editor
Ankita Thakur
Copy Editors
Rebecca Youé

Sonia Cheema
Project Coordinator
Bijal Patel
Proofreader
Safis Editing
Indexer
Mariammal Chettiyar
Production Coordinator
Nilesh R. Mohite
Cover Work
Nilesh R. Mohite

About the Author
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.
I'd like to thank the technical reviewers of this book for giving up
their free time to provide valuable input. Thanks to them, this is
a better product.
I'd also like to thank the web community at large for their
continued sharing of information. Without them, I wouldn't be
able to enjoy my working days as a web developer.
Most importantly, a note of appreciation for my family. Many
episodes of sub-standard TV (wife), cups of tea (parents), and
piratical sword-fights (sons) were sacrificed for the writing of this
book.

About the Reviewers
Esteban S. Abait is a senior software architect and former PhD
student. He has experience devising the architecture of complex
software products, and planning their development. He has worked
both onsite and offshore for clients such as Cisco, Intuit, and
Southwest. Throughout his career, he has worked with different
technologies such as Java, PHP, Ruby, and Node.js among others. In
recent years, his main interests have revolved around web, mobile
and REST APIs. He has developed large, maintainable web
applications using JavaScript. In addition, he has worked to assess
clients on REST best practices. On the other hand, he has worked on
high traffic websites, where topics such as replication, sharding, or
distributed caches are key to scalability.
Esteban is currently working at Globant as a technical director. In
this role, he works to ensure projects' delivery meet their deadlines
with the best quality. He also designs software program training, and
interviews software developers. In addition, he usually travels to
clients to provide consultancy on web technologies.
Globant (http://www.globant.com/) is a new breed of technology
service provider, focused on delivering innovative software solutions
by leveraging emerging technologies and trends. Globant combines
the engineering and technical rigor of IT service providers with the
creative and cultural approach of digital agencies. Globant is the
place where engineering, design, and innovation meet scale.
Christopher Scott Hernandez is a designer turned developer who
has been working on the Web since 1996, when he built the Web's
first boat upholstery site for his dad. He's since moved on to bring
his expertise to companies small and large, having worked on some
of the most visited sites in the world including eBay, LinkedIn, and
Apple.

He was also a technical reviewer for HTML5 Multimedia Development
Cookbook, Packt Publishing. Chris is an avid reader and lover of
books. When he's not pushing pixels and writing code, he enjoys
spending time with his wife and daughter exploring the parks and
trails of the beautiful Austin, Texas.
Mauvis Ledford is a full-stack founder and CTO specializing in the
realm of the web, mobile web, and scaling applications on the cloud.
Mauvis has contributed to products at Disney Mobile, Skype, Netflix,
and many start-ups in the San Francisco and New York City areas.
He is currently CTO at Pathbrite, an EdTech start-up specializing in
free, responsive, multimedia e-portfolios and digital resumes for
everyone. Create your own at http://www.pathbrite.com.
Mauvis was also a technical reviewer for the first edition of
Responsive Web Design with HTML5 and CSS3, Packt Publishing and
Building Hybrid Android Apps with Java and JavaScript, O'Reilly
Media.
Sophie Williams is a bit of a perfectionist and has a thing for
typography. She has a degree in graphic design and is currently a
web/UI designer at www.bet365.com. While she loves designing for
the Web, she will always have a special place in her heart for
letterpress and print. Outside of work, she makes mean cupcakes,
experiments with arts and crafts, and loves to point out (to anyone
who will listen) when anything in the real world is misaligned.
You can find Sophie at www.sophiewill.com or follow her on Twitter
@sophiewill13.

www.PacktPub.com
Support files, eBooks,
discount offers, and more
For support files and downloads related to your book, please visit
www.PacktPub.com.
Did you know that Packt offers eBook versions of every book
published, with PDF and ePub files available? You can upgrade to the
eBook version at www.PacktPub.com and as a print book customer,
you are entitled to a discount on the eBook copy. Get in touch with
us at <service@packtpub.com> for more details.
At www.PacktPub.com, you can also read a collection of free
technical articles, sign up for a range of free newsletters, and receive
exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is
Packt's online digital book library. Here, you can search, access, and
read Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content

On demand and accessible via a web browser
Free access for Packt account
holders
If you have an account with Packt at www.PacktPub.com, you can
use this to access PacktLib today and view 9 entirely free books.
Simply use your login credentials for immediate access.

Preface
A responsive web design provides a single solution that looks great
on a phone, desktop, and everything in-between. It will effortlessly
respond to the size of the user's screen, providing the best
experience possible for both today's and tomorrow's devices.
This book covers every essential aspect of responsive web design. In
addition, it extends the responsive design methodology by applying
the latest and most useful techniques provided by HTML5 and CSS3,
making designs leaner and more maintainable than ever before. It
also explains common best practice methods of writing and
delivering code, images, and files.
If you can understand HTML and CSS, you can build a responsive
web design.

What this book covers
Chapter 1, The Essentials of Responsive Web Design, is a whistle-
stop tour of the key ingredients in coding a responsive web design.
Chapter 2, Media Queries – Supporting Differing Viewports, covers
everything you need to know about CSS media queries: their
capabilities, their syntaxes, and the various ways you can wield
them.
Chapter 3, Fluid Layouts and Responsive Images, shows you how to
code proportional layouts and responsive images, and provides a
thorough exploration of Flexbox layouts.
Chapter 4, HTML5 for Responsive Web Designs, covers all the
semantic elements of HTML5, text-level semantics, and
considerations of accessibility. We also cover how to insert video and
audio into our pages with HTML5.
Chapter 5, CSS3 – Selectors, Typography, Color Modes, and New
Features, gets to grips with the endless possibilities of CSS:
selectors, HSLA and RGBA colors, web typography, viewport relative
units, and a whole lot more.
Chapter 6, Stunning Aesthetics with CSS3, covers CSS filters, box
shadows, linear and radial gradients, multiple backgrounds, and how
to target background images to high-resolution devices.
Chapter 7, Using SVGs for Resolution Independence, explains
everything we need to use SVGs inside documents and as
background images, as well as how to interact with them using
JavaScript.
Chapter 8, Transitions, Transformations, and Animations, our CSS
gets moving as we explore how to make interactions and animations
using CSS.

Chapter 9, Conquer Forms with HTML5 and CSS3, web forms have
always been tough but the latest HTML5 and CSS3 features make
them easier to deal with than ever before.
Chapter 10, Approaching a Responsive Web Design, explores the
essential considerations before embarking on a responsive web
design and also provides a few last minute nuggets of wisdom to aid
you in your responsive quest.

What you need for this book
A text editor
An evergreen browser
A penchant for mediocre jokes

Who 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 to bring it all together? If so, Responsive Web
Design with HTML5 and CSS3 Second Edition gives you everything
you need to take your websites 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!

Conventions
In this book, you will find a number of text styles that distinguish
between different kinds of information. Here are some examples of
these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames,
file extensions, pathnames, dummy URLs, user input, and Twitter
handles are shown as follows: "We can fix that prior problem easily
by adding this snippet in the <head>."
A block of code is set as follows:
img {
max-width: 100%;
}
New terms and important words are shown in bold. Words that
you see on the screen, for example, in menus or dialog boxes,
appear in the text like this: "At its simplest, you pick a URL and click
on START TEST."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.

Reader feedback
Feedback from our readers is always welcome. Let us know what
you think about this book—what you liked or disliked. Reader
feedback is important for us as it helps us develop titles that you will
really get the most out of.
To send us general feedback, simply e-mail
<feedback@packtpub.com>, and mention the book's title in the subject
of your message.
If there is a topic that you have expertise in and you are interested
in either writing or contributing to a book, see our author guide at
www.packtpub.com/authors.

Customer support
Now that you are the proud owner of a Packt book, we have a
number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at
http://www.packtpub.com for all the Packt Publishing books you
have purchased. If you purchased this book elsewhere, you can visit
http://www.packtpub.com/support and register to have the files e-
mailed directly to you.
Downloading the color images of
this book
We also provide you with a PDF file that has color images of the
screenshots/diagrams used in this book. The color images will help
you better understand the changes in the output. You can download
this file from:
https://www.packtpub.com/sites/default/files/downloads/8934OT_Co
lorImages.pdf.
Errata
Although we have taken every care to ensure the accuracy of our
content, mistakes do happen. If you find a mistake in one of our
books—maybe a mistake in the text or the code—we would be
grateful if you could report this to us. By doing so, you can save
other readers from frustration and help us improve subsequent
versions of this book. If you find any errata, please report them by
visiting http://www.packtpub.com/submit-errata, selecting your

book, clicking on the Errata Submission Form link, and entering
the details of your errata. Once your errata are verified, your
submission will be accepted and the errata will be uploaded to our
website or added to any list of existing errata under the Errata
section of that title.
To view the previously submitted errata, go to
https://www.packtpub.com/books/content/support and enter the
name of the book in the search field. The required information will
appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem
across all media. At Packt, we take the protection of our copyright
and licenses very seriously. If you come across any illegal copies of
our works in any form on the Internet, please provide us with the
location address or website name immediately so that we can
pursue a remedy.
Please contact us at <copyright@packtpub.com> with a link to the
suspected pirated material.
We appreciate your help in protecting our authors and our ability to
bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact
us at <questions@packtpub.com>, and we will do our best to address
the problem.

Chapter 1. The Essentials of
Responsive Web Design
Only a few years ago, websites could be built at a fixed width, with
the expectation that all end users would get a fairly consistent
experience. This fixed width (typically 960px wide or thereabouts)
wasn't too wide for laptop screens, and users with large resolution
monitors merely had an abundance of margin either side.
But in 2007, Apple's iPhone ushered in the first truly usable phone
browsing experience, and the way people access and interact with
the Web changed forever.
In the first edition of this book, it was noted that:
"in the 12 months from July 2010 to July 2011, global mobile
browser use had risen from 2.86 to 7.02 percent."
In mid-2015, the same statistics system (gs.statcounter.com)
reported that this figure had risen to 33.47%. By way of comparison,
North America's mobile figure is at 25.86%.
By any metric, mobile device usage is rising ever upwards, while at
the other end of the scale, 27 and 30 inch displays are now also
commonplace. There is now a greater difference between the
smallest and the largest screens browsing the Web than ever before.
Thankfully, there is a solution to this ever-expanding browser and
device landscape. A responsive web design, built with HTML5 and
CSS3, allows a website to 'just work' across multiple devices and
screens. It enables the layout and capabilities of a website to
respond to their environment (screen size, input type,
device/browser capabilities).

Furthermore, a responsive web design, built with HTML5 and CSS3,
can be implemented without the need for server based/back-end
solutions.
Beginning our quest
Whether you're new to responsive web design, HTML5, or CSS3, or
already well versed, I'm hoping this first chapter will serve one of
two purposes.
If you're already using HTML5 and CSS3 in your responsive web
designs, this first chapter should serve as a quick and basic
refresher. Alternatively, if you're a newcomer, think of it as a 'boot
camp' of sorts, covering the essentials so we're all on the same
page.
By the end of this first chapter, we will have covered everything you
need to author a fully responsive web page.
You might be wondering why the other nine chapters are here. By
the end of this chapter, that should be apparent too.
Here's what we will cover in this first chapter:
Defining responsive web design
How to set browser support levels
A brief discussion on tooling and text editors
Our first responsive example: a simple HTML5 page
The importance of the viewport meta tag
How to make images scale to their container
Writing CSS3 media queries to create design breakpoints
The shortfalls in our basic example
Why our journey has only just begun

Defining responsive web
design
The term, "responsive web design" was coined by Ethan Marcotte in
2010. In his seminal A List Apart article
(http://www.alistapart.com/articles/responsive-web-design/), he
consolidated three existing techniques (flexible grid layout, flexible
images/media, and media queries) into one unified approach and
named it responsive web design.
Responsive web design in a nutshell
Responsive web design is the presentation of web content in the
most relevant format for the viewport and device accessing it.
In its infancy, it was typical for a responsive design to be built
starting with the 'desktop', fixed-width design. Content was then
reflowed, or removed so that the design worked on smaller screens.
However, processes evolved and it became apparent that everything
from design, to content and development, worked much better when
working in the opposite direction; starting with smaller screens and
working up.
Before we get into this, there are a couple of subjects I'd like to
address before we continue; browser support and text
editors/tooling.

Setting browser support
levels
The popularity and ubiquity of responsive web design makes it an
easier sell to clients and stakeholders than ever before. Most people
have some idea what responsive web design is about. The notion of
a single codebase that will just work across all devices is a
compelling offering.
One question that almost always comes up when starting a
responsive design project is that of browser support. With so many
browser and device variants, it's not always pragmatic to support
every single browser permutation fully. Perhaps time is a limiting
factor, perhaps money. Perhaps both.
Typically, the older the browser, the greater the work and code
required to gain feature or aesthetic parity with modern browsers.
Therefore, it may make more sense to have a leaner, and therefore
faster, codebase by tiering the experience and only providing
enhanced visuals and capabilities for more capable browsers.
In the previous edition of this book, some time was spent covering
how to cater for very old desktop-only browsers. In this edition, we
will not.
As I write this in mid-2015, Internet Explorer 6, 7, and 8 are all but
gone. Even IE 9 only has a 2.45% worldwide share of the browser
market (IE 10 is only 1.94% while IE 11 is rising nicely at 11.68%).
If you have no alternative but to develop for Internet Explorer 8 and
below, you have my sympathies and I'm afraid I must be upfront
and advise you that there won't be a terrific amount you can use in
this book.

For everyone else, you owe it to your client/paymaster to explain
why developing for ailing browsers might be a mistake and investing
development time and resource primarily for modern browsers and
platforms makes good fiscal sense in every respect.
Ultimately however, the only statistics that really matter are yours. In
all but extreme cases, the sites we build should at least be functional
in every common browser. Beyond basic functionality, for any web
project it makes sense to decide, in advance, what platforms you
want to fully enhance the experience for, and which you are happy
to concede visual/functional anomalies to.
You'll also find that practically, starting with the simplest 'base level'
experience and enhancing (an approach known as progressive
enhancement) is easier than coming at the problem from the
opposite direction—building the ultimate experience first then
attempting to provide fall backs for less capable platforms (an
approach known as graceful degradation).
To exemplify why knowing this in advance matters, consider that if
you were unlucky enough to have 25% of your website visitors using
Internet Explorer 9 (for example), you'd need to consider what
features that browser supports and tailor your solution accordingly.
The same caution would be required if large amounts of your users
are visiting with older mobile phone platforms such as Android 2.
What you can consider a 'base' experience will vary depending upon
the project.
If suitable data isn't available, I apply a simple and crude piece of
logic to determine whether I should spend time developing a
particular platform/browser version: if the cost of developing and
supporting browser X is more than the revenue/benefit created by
the users on browser X; don't develop specific solutions for browser
X.

It's rarely a question of whether you could 'fix' an older
platform/version. It's a question of whether you should.
When considering which platforms and browser versions support
which features, if you aren't already, become familiar the
http://caniuse.com website. It provides a simple interface for
establishing what browser support there is for the features we will
be looking at throughout.
A brief note on tooling and text
editors
It makes no difference what text editor or IDE system you use to
build your responsive web designs. If the simplest of text editors
allows you to write your HTML, CSS, and JavaScript efficiently, that's
absolutely fine. Similarly there are no requisite pieces of tooling that
are essential to get a responsive web design out of the door. All you
actually need is something that enables you to write HTML, CSS, and

JavaScript. Whether your preference is Sublime Text, Vim, Coda,
Visual Studio, or Notepad - it matters little. Just use what works best
for you.
However, be aware that there are more tools available now (often
free) to negate many of the manual and time-intensive tasks of
building web sites than ever before. For example, CSS processors
(Sass, LESS, Stylus, PostCSS) can help with code organization,
variables, color manipulations, and arithmetic. Tools like PostCSS can
also automate horrible and thankless jobs like CSS vendor prefixing.
Furthermore, 'Linting' and validation tools can check your HTML,
JavaScript, and CSS code against standards as you work, eliminating
many time wasting typos or syntax errors.
New tools come out constantly and they are continually improving.
Therefore, whilst some relevant and beneficial tools will be
mentioned by name as we go, be aware that something better may
be just around the corner. Hence we won't be relying on anything
other than standards based HTML and CSS in our examples. You
should however, use whatever tools you can to produce your front-
end code as quickly and reliably as possible.

Our first responsive example
In the first paragraph I promised that by the end of this chapter you
would know all you needed to build a fully responsive web page. So
far I've just been talking around the issue at hand. It's time to walk
the walk.
Note
Code samples
You can download all the code samples from this book by visiting
rwd.education/download.zip or via GitHub at
https://github.com/benfrain/rwd. It's worth knowing that where
individual examples are built up throughout a chapter, only the
final version of the example is provided in the code download.
For example, if you download the code samples for Chapter 2,
Media Queries – Supporting Differing Viewports, the examples
will be in the state they are at by the end of Chapter 2, Media
Queries – Supporting Differing Viewports. No intermediate states
are provided other than in the text.
Our basic HTML file
We will start with a simple HTML5 structure. Don't worry at this
point what each of the lines do (especially the content of the <head>,
we will cover that in detail in Chapter 4, HTML5 for Responsive Web
Designs).
For now, simply concentrate on the elements inside the <body> tag.
I'm pretty sure nothing there will look too unusual; a few div's, a
graphic for a logo, an image (a tasty looking scone), a paragraph or
two of text and a list of items.

Here's an abridged version of the code. For brevity I have removed
the paragraphs of text in the code below as we only need to concern
ourselves with the structure. However, you should know that it's a
recipe and description of how to make scones; quintessentially
British cakes.
If you want to see the full HTML file, you can download it from the
rwd.education website.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Our first responsive web page with
HTML5 and CSS3</title>
<meta name="description" content="A basic
responsive web page – an example from Chapter 1">
<link rel="stylesheet"
href="css/styles.css">
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper"><img
src="img/SOC-Logo.png" alt="Scone O'Clock logo" />
</a>
<p class="Strap">Scones: the most
resplendent of snacks</p>
</div>
<div class="IntroWrapper">
<p class="IntroText">Occasionally
maligned and misunderstood; the scone is a
quintessentially British classic.</p>
<div class="MoneyShot">
<img class="MoneyShotImg"
src="img/scones.jpg" alt="Incredible scones" />
<p class="ImageCaption">Incredible
scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.
</p>
<div class="Ingredients">
<h3 class="SubHeader">Ingredients</h3>
<ul>

</ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper">
</ol>
</div>
</body>
</html>
By default, web pages are flexible. If you were to open the example
page, even as it is at this point (with no media queries present), and
resize the browser window you'll see the text reflows as needed.
What about on different devices? With no CSS whatsoever, this is
how that renders on an iPhone:

Exploring the Variety of Random
Documents with Different Content

LOWESTOFT CHINA INKSTAND.
(Floral Decoration in Red.)
There are certain marks on undoubted Lowestoft pieces which the writer has
examined. The letter “R,” which might be the signature of Redgrave the painter. On
another piece the letter “H” appears under the rim, which may stand for Hughes.
The letters “R. P.” on the mug we illustrate (p. 125) may equally stand for Richard
Powles or Richard Philips. On one piece two L’s appear back to back ( ). Is
this Luson, Lowestoft? While on other pieces appear the mark in red and in
blue.
Characteristics of Lowestoft China.
The china is soft paste, and is often very badly potted. The blue is inclined to run.
There is a gritty appearance in places on the glaze, which is spotted as if by sand.
In some of the blue decorated pieces, where a flight of birds is introduced, the
crescent moon (like the Worcester crescent mark) has been put in almost as a
challenge to Worcester. One especial feature is the green hue of the glaze settled
under the rims of saucers and basins and cups. The paste often has little bumps on
it, and a mound in the centre of base under rim. Roses, set back to back, appear on
Lowestoft pieces. The red of Lowestoft is of a peculiar quality, approaching puce in
some specimens, and varying from mauve pink to carmine.

SALE PRICES.
Lowestoft. £ s.d.
Bowl, 101⁄2 in., painted in flowers, with trees and cattle. S. Mealing Mills,
Norwich, December 3, 1902
7 5 0
Mug, decorated in blue, with figure holding spit of herrings. Fishing boats
on reverse side, inscribed “John Cooper, 1768.” Signed “R. P.”—
Richard Philips, a painter at Lowestoft. Messrs. Notley, Lowestoft,
July, 1903 (illustrated p. 125)
11 0 0
Mug, painted in blue, with inscription—“Add to knowledge, temperance
(Peter II), James Last of Saxmundham, 1769.” Christie, March 8,
1904
1610 6
Bowl, painted with pastoral subjects, in panels, foliage, scrolls in red,
and inscription inside, dated 1774. Christie, April 8, 1904
26 5 0
Bowl, large, painted with medallion views in brown and with ribands and
foliage round the border in dark blue and gold. Diameter, 131⁄2 in.
Christie, March 2, 1905
6 0 0
Mugs, two, roughly decorated with blue, and inscribed below “Abim
Moore, August 29, 1765.” Christie, April 7, 1905
5 5 0
Lowestoft china, ten teacups and eight saucers decorated with border
and sprays of flowers in crimson, red, blue, and green. Sotheby, May
17, 1920
5 0 0

VII
COALPORT
TWO-HANDLED CUP, RICHLY GILDED, WITH
BLUE AND WHITE PANELS. COALBROOKDALE.
MARKED CBD.

COVERED CUP AND SAUCER, OLD
COALPORT. IN SÈVRES STYLE.
VII
COALPORT
The history of Coalport porcelain manufactured in Shropshire on the banks of the
Severn is worth the telling, and those readers who are possessed of specimens of
the older ware issuing from this factory will be glad to hear of its first beginnings.
Unlike some of the other great manufactories, Coalport, we are happy to say, is still
in existence. Bow and Chelsea, Nantgarw and Swansea, Bristol and Plymouth have
disappeared. The potter’s wheel is silent, and the brush of the artist has been laid
aside for ever. Long since the potters have turned into clay themselves. At Bow,
where the exquisite ware was produced on the banks of the Lea (“New Canton,” as
the manufactory styled itself), a match factory stands on the old foundation.
Instead of delicate and fragile cupids they now make matches, but of the kind more
associated with Lucifer than with Cupid.
With Derby and with Worcester, Coalport can boast that it was established in the
middle of the eighteenth century. Indeed, there is evidence that the Salopian china
made in Colebrookdale is taken from the same beds of clay which fifteen hundred
years ago supplied the Romans with material for their white ware, for their jugs,
their mortaria, and their bowls, which are constantly being unearthed at various
spots in the valley of the Severn.
The site of the first works was at Caughley, where a small pottery was begun about
1754. Early in its history the names of Brown, Gallimore, and Turner occur. In my
“Chat” on the great Worcester factory I showed that Dr. Wall was the leading spirit
who infused life into the concern, and it would appear that Thomas Turner was in
some measure induced to emulate him, and it is seen on comparison that the early

examples of Caughley were very similar to those of contemporary Worcester. The
patterns were principally confined to blue flowers and decorations on a white
ground. From 1756 to 1776 the manufactory attained a great excellence. There
exists a mug bearing the date 1776, and the name “Francis Benbow.” There is a
nautical ring about the name. One recollects Admiral Benbow and his gallant deeds;
our Francis Benbow was a bargeman, for whom the mug was made, but his name
will go down to posterity on this Caughley mug, as it is the most perfect specimen
of its kind.
We give a reproduction of this mug, and readers will observe the anchor marked
over the name, and we would call especial attention to the nature of the decoration
upon the mug. Dated chinas of old manufacture are specimens very worthy of
notice, as they are much sought after, and in many cases are being reproduced with
the old dates upon them.
CAUGHLEY. OLD BLUE
MUG.
(Inscribed and Dated
1776.)
The excellence of Turner’s porcelain and the invention of the beautiful dark blue of
the Caughley china, attributed to him, brought the factory into great prominence.
But great secrecy was employed in its manufacture, and the place hidden away in
the hills was an ideal spot for a manufactory wishing to be self-contained and free
from prying strangers. In 1780 was produced the celebrated “Willow Pattern,” which
is in demand even at the present day, and has been copied by all the other
manufactories. The “Blue Dragon,” another favourite pattern, originated at
Caughley, and it was here that the first blue-printed table service was made in
England. It was made for Thomas Whitmore, Esq., of Apley Park, near Bridgnorth,

the pattern was called the “Nankin.” It is interesting to note that Thomas Minton, of
Stoke, assisted in the completion of this service, being articled as an engraver
there.
Until the end of 1790 Messrs. Chamberlain, of Worcester, had their porcelain in the
white from Thomas Turner, of Caughley. As an instance of the great secrecy
employed by Turner, we may say that he used to mix all the bodies himself, but
afterwards instructed his sister how to do it. It may add an additional zest to your
old white and blue Caughley ware to know that a woman who could keep a secret
was intimately associated with its manufacture.
In 1780 Turner, who had paid a visit to France to study the foreign methods,
brought back with him a number of skilled artists and workmen. About this time,
too, Mr. John Rose, who had learned the art of pottery under Turner, left him to
establish a factory of his own at Jackfield. Jackfield, it may be noticed in passing, is
one of the oldest potteries in the country. As early as 1560 entries occur in the
parish registers of Stoke-upon-Trent of potters “from Jackfield.” In a disused coal
mine here, some years ago, a brown mug was found which bore the date 1634.
Jackfield was noted for some of its black decanters of superior glaze, and up to
quite a modern date made a yellow glazed earthenware.
Finally, the competition between Mr. Rose and the old Caughley works became so
great that the old factory was swallowed up by the new one, and Coalport became
the headquarters and the name of the firm became John Rose and Company, Mr.
Turner withdrawing from the business.
The exact dates are as follows: Between 1780 to 1790 John Rose established his
works at Coalport (he was only at Jackfield for a few years). He carried on these
and the Caughley, which he purchased in 1799, up till 1814, when Caughley was
finally discontinued.
All these are very dry facts which you must master in order to understand the
specimens on your china shelf. There is an additional interest, it always seems to
me, in knowing of the men and women who gave their lives to the perfection of an
industry. There are in existence portraits of Thomas Turner and his wife, and we
should particularly like to see the likeness of the lady who secretly mixed the

chinas. Perhaps some of our readers may come across some family in Shropshire
who may possess them.
With regard to marks, unfortunately not all the specimens of Caughley were
marked. The above are some of the varieties of the crescent occurring on some of
the ware, and show pretty clearly the transition from a half-moon to the engraved
C. The word “Salopian” is sometimes impressed, and on one known specimen is the
name “Turner.” Various forms of the letter “S,” sometimes with a cross, are used.
At the beginning of the nineteenth century the written name “Coalport” was used,
though not extensively, and another mark, the letters “C. D.,” standing for
Colebrookdale, was also used, but somewhat sparingly.
In 1820 both Swansea and Nantgarw factories were incorporated with Coalport,
and Messrs. Billingsley and Walker, well-known names in the history of English
china manufacture, came to Coalport. In 1820 Mr. Rose received the gold medal of
the Society of Arts for his Felspar porcelain, and this date is a turning point in the
history of Coalport.
At this time Coalport began to establish a reputation for its excellence, which placed
it on a level with the other great manufactories—a reputation, be it said, that has
increased as time has gone on. We reproduce a handsome vase of Coalport
manufacture, richly decorated with pink and gold, on a blue ground. Its elegant
form is typical of the ware at its best period.
At the present moment the productions of Coalport, both old and modern, are
unequalled in their domain. The old traditions of the firm are still maintained, and
the ware of to-day is of the highest possible artistic merit and excellence.

COALPORT VASE.
(Blue Ground, richly
Decorated in Pink and
Gold.)
By the kindness of the proprietors of the Coalport manufactory, we are enabled to
give some further account of the modern ware, and to reproduce illustrations of the
later marks used and of the sumptuous plates turned out at the present day from
Iron Bridge, in Shropshire.
In the year 1820, the first year of the reign of George IV., Mr. John Rose obtained
the gold medal of the Society of Arts for his “improved glaze for porcelain.” At this
time a mark was adopted on some of the ware, “Coalport Improved Felspar
Porcelain,” enclosed in a wreath of laurel. Surrounding the wreath are the words
“Patronised by the Society of Arts.” The name “I. Rose and Co.” is marked
underneath. If any of our readers have any porcelain having this mark, they will
notice how good is the paste and how excellent the glaze.

Just prior to the mark above alluded to, the word Coalport was used and sometimes
the letters “C. D.”—standing for Cole-Brook-Dale. Other marks of a later date are a
monogram formed of the letters “C. B. D.,” and the same enclosed in a circle with
the word “Daniell, London,” an eminent firm acting as agents and connected with
the sale of the ware in London. This firm had depôts in Bond Street and in Wigmore
Street, and there is in the national collection a plate with bleu-de-roi ground,
enriched with gilding, one of a service executed by command of Her Majesty the
late Queen Victoria for presentation to the Emperor of Russia. This service was
exhibited at the Great Exhibition of 1851. In the centre of the plate is painted the
Order of St. Andrew, while the body is ornamented with Russian orders painted on
ivory-coloured ground in six compartments.
We now come to a very curious mark which may have puzzled some of our readers,
but which is easily explained. It is a scroll somewhat like that which stands for the
word “and”—&. Within its curves appear the three letters “C. S. N.” Upon
examination it will be found that the aforesaid curves really make two letters, viz.,
“C. and S.,” which stand for Coalport and Salopian, while the other three letters
stand for Caughley, Swansea, and Nantgarw—the whole emblematical of the
development of the manufactory and its absorption of the smaller factories.
We give an illustration of the various marks placed in order of date used, up to and
including the one now in use by the firm. Our readers may be able to form some
idea by comparison of the dates of their specimens.

LATEST
COALPORT
MARKS.
It must be observed that much of the earlier Coalport was unmarked, while—we
blush to have to print it—some of the ware imitated the double “L” mark of Sèvres,
and the “C” and anchor of Chelsea and the crossed swords of Dresden, so
successfully as to delude the unwary collector. The celebrated egg-shell porcelain of
Coalport ranks among the most marvellous china ever produced in this country. It is
rarely marked with any letters or signs, but it carries upon it a signature of
perfection of manufacture and exquisite symmetry of design such as no other
factory dared emulate, and no other factory has since approached. These tiny cups
and saucers (the cup follows Chinese models by having no handle) are gems of
ceramic art, and happy is the collector who can number one or two good specimens
in his china cabinet.
The well-known “Willow Pattern,” first manufactured here, is from a Chinese model.
It is still manufactured by the Coalport Company, and is one of their stock patterns.
It appears on a list of some forty patterns, which can be and are manufactured
without the use of lead.

Readers may find the words “Leadless Glaze” on some of their quite recent
purchases in modern china. The terrible effects of lead on the workpeople in china
factories is a subject which has received the attention of Parliament (see p. xxiii).
But in passing it is highly satisfactory to find that the Coalport Company turn out,
without special order, forty patterns entirely “leadless.” Any one who is specially
desirous of having “leadless glaze” on any other of the Coalport ware may do so by
ordering it.
To come down to the very latest marks, there are three that have been in use. The
first in the seventies, the second in the eighties, and the last, now solely used, was
adopted some twelve years ago with the addition of the word “England” to meet
the requirements of the American Tariff Act, which made it compulsory for foreign
goods to be thus stamped.
OLD COALPORT VASE.
(Decorated in pink and
white. Marked CBD.)
The first has the words “Salopian, Coalport,” in a scroll, which has within it the old
mark of Caughley, a crescent with “A.D. 1750” beneath it, and in addition the letters
“C. S. N.,” in scroll as before alluded to, and having the date, “A.D. 1790,”
underneath. This is a very complicated mark, and is not generally known.
The second is a crown with the word “Coalport, A.D. 1750,” underneath. The third
is the same with the addition of the word “England.”
In conclusion we may quote the fact, to give our readers some idea of the quality of
the ware now being exported by the Coalport Company, that some of the dinner

ware sent to America costs no less a sum than £5 per plate, while there are even
more sumptuous and magnificent specimens of their manufacture which cost £15
each plate. One of these, amongst others, is a plate with a coloured design painted
after Sir Joshua Reynolds’ celebrated portrait of Mrs. Robinson.
Characteristics of Caughley and Coalport China.
Caughley.—The early pieces, printed in under-glaze blue, resemble the early
Worcester blue and white; but Caughley is whiter in appearance, and the blue has
not the mellowness of old Worcester. Introduction of “Willow pattern,” and similar
designs, and the “Broseley dragon.”
Coalport.—“Chantilly sprig,” “Tournay sprig,” “Worm sprig,” introduced by Billingsley
from Pinxton. A maroon ground, introduced by Walker from Nantgarw about 1822.
The deep mazarine blue of Derby, reproduced at Coalport, is quite equal to Derby
pieces in tone. The rich ground colours of old Sèvres porcelain were copied with
great success at Coalport, particularly the turquoise blue and the rose-du-Barri.
SALE PRICES.
Caughley. £ s.d.
Tea and coffee service, fluted, flowers in blue and gold and dark blue
and gold borders, 31 pieces. Christie, January 30, 1902
7 7 0
Vases, pair, 14 in., decorated with raised flowers and gilt, and choicely
painted in birds and Watteau subjects. Gudgeon & Sons, Winchester,
April 3, 1902
1510 0
Coalport.
Bowl and cover, two-handled, encrusted with branches of coloured
flowers and foliage, 11 in. high. Christie, April 4, 1902
16 5 6
Coalport vase, with gilt decoration on turquoise ground, 101⁄2 in. high.
Christie, July 5, 1920
1717 0
Pair of Coalport vases and covers, painted with panels of flowers in gilt
scroll borders on dark blue ground, the covers surmounted by
figures of children with garlands of flowers, 17 in. high. Christie, July
20, 1920
4019 0

VIII
SPODE AND
HIS SUCCESSORS
COPELAND VASES.
Cobalt-blue ground, painted panels of Flowers and
Landscapes. Raised border, richly gilded.

Reproduced by courtesy of W. T. Copeland & Sons, Stoke-
on-Trent.
SPODE EARTHENWARE PLATES.
(May-blossom on dark blue ground, and tropical
bird and flowers on canary yellow ground.)
In the Collection of the Author.
VIII
SPODE AND HIS SUCCESSORS
The chain of potters is complete from the day on which Josiah Spode was
apprenticed to Whieldon in 1749. The entry in the old account book runs: “1749,
April 9th. Hired Siah Spode, to give him from this time to Martelmas next 2s. 3d., or
2s. 6d. if he deserves it, 2nd year 2s. 9d., 3rd year 3s. 3d.” The successors to
Spode, Messrs. Copeland, have done much to develop the manufacture of English
porcelain in the nineteenth century, and at the present day they are producing
china of the highest excellence.
The first Josiah Spode established a factory at Stoke-upon-Trent about 1770. Some
of his earliest productions bear the name “Spode” impressed in the paste. Those of
my readers who have blue willow-pattern plates with this mark upon them are the
possessors of some of the first plates of that pattern made. About 1780 the willow
pattern was introduced by Turner at Caughley, and very shortly afterwards, in 1784,
Josiah Spode was turning out at Stoke his blue printed plates. Some of his china is
printed in black, and pieces of this black printing are much sought after by
collectors, but they must bear the word “Spode” impressed on them.

OLD SPODE PASTILLE-BURNER.
(Red body with black ornaments
in relief.)
At Victoria and Albert Museum.
The vase which we reproduce from the collection at the Victoria and Albert Museum
is a pastille-burner having perforated cover; it is mounted on tripod stand formed
by three dolphins on triangular base; it is red in colour and ornamented in black in
relief. It has the impressed mark “Spode,” and is earthenware, but we give it here
on account of its fine form.
On the death of old Josiah Spode, in 1798, his son Josiah continued the business,
and commenced the manufacture of porcelain, which he improved by the addition
of bone-ash and of felspar. He died in 1827, and was succeeded by his cousin,
Josiah Spode. This third Josiah Spode died a few years afterwards, at which date
the name Spode practically disappears from the firm.
Josiah Spode the second was the most successful potter of his day. It is pleasing to
be able to record that he acquired a considerable fortune—a lot not often within the
reach of potters, successful or otherwise.
About the year 1805 he introduced a fine ware which he termed opaque porcelain.
This ware became very popular and was of excellent manufacture. While Nelson
was fighting the French at Trafalgar, and breaking their naval pretensions, Josiah
Spode was inflicting a commercial blow upon that unhappy country. Spode—and in
his wake came other Staffordshire manufacturers—inundated France and other
countries on the Continent with this new stone china of his, which entirely
superseded their fayence. This injury was a very real one to the poor potters of
France, inasmuch as a great number of them had to abandon the manufacture.
We have already alluded to the impressed mark Spode or SPODE. On some of the
finer pieces the name is painted in red, and sometimes it is written in gold, as in
our third mark in an angular hand, running upwards. The stamped mark usually in

red, “Spode’s New Fayence” and “Spode Stone China,” appears on the ironstone
ware. Oftentimes the mark is not stamped on the middle of the plate underneath,
but at the side, while sometimes the name is both stamped and impressed. Besides
the marks we give there are more than half a dozen other forms used by the
factory, but all of them containing the word “Spode,” and therefore not presenting
difficulties to the collector.
SOME SPODE
MARKS.
Of three marked Spode plates in possession of the writer, of typical Spode
decoration, which was largely influenced by Japanese art, we give two as a
headpiece. It will be observed that the left-hand plate in the headpiece, which has
a vivid blue background, is fretted with a geometric pattern as a design. This is
intended to represent ice, and the may-flowers of the covering decoration are
intended to convey, by the Chinese artist who invented it, the symbolic meaning of
young love being chilled by adversity. The other plate in the same illustration is of a
brilliant canary-coloured ground, covered with a gossamer-like network of cobwebs,
above which bird and flowers are painted.
The third plate shows very strongly the influence of the East in its method of
decoration; but instead of pagoda and delicate curves, the English artist has almost

brutally placed a piece of European architecture on the other half of the plate,
which by its incongruity mars the remainder.
SPODE PLATE.
(Decorated in blue and red and gold.)
In the Collection of the Author.
We must turn aside from Spode, and introduce our readers to his successors, the
Copelands. One word in passing. Those who have specimens of Spode ware will do
well to remember that his was a great factory, not so well known as Derby and
Worcester, but a formidable rival of theirs. Not many months ago at Christie’s a pair
of Spode vases, square shaped, decorated with landscapes, birds and flowers in the
Chinese style, forty-two inches, brought £21.

MARKS OF
MESSRS.
COPELAND.
The list of marks used by Messrs. Copeland will show at a glance the changes in the
title of the firm. In 1833 the firm became Copeland, late Spode, and the china was
marked accordingly.
There are a good many other marks besides those we give, but all are more or less
similar, with slight variation to those we produce. A word of explanation is
necessary as to the mark “C. and G.” This is frequently accompanied by the words,
“New Blanche,” “Royal Opal,” “Saxon Blue,” or “New Japan Stone,” according to the
composition or decoration of the ware.

SPODE WILLOW PATTERN
PLATES.
By courtesy of Messrs. W. T.
Copeland & Sons.
About the date of the International Exhibition of 1861, many purely English
novelties were attempted. Mistletoe, holly, and simple popular designs were then in
favour and were produced. Nobody could possibly mistake the homely robin or the
holly-wreath decoration for that of any other country than ours. There is a
suggestion of roast beef and plum-pudding and Christmas fare. All purely English
art is homely, whether it be the Staffordshire potter’s farmyard quadrupeds that
adorn the cottage mantelshelf, or the old blue dinner services of our great
grandmothers. It is a debatable point if that is the highest art, but there it is.
Ruskin would have had some hard things to say about it, and maybe William Morris
preferred the potsherd of an Italian shepherd. The fact remains that it is our art,
and whatever we may in our innermost hearts wish it to be, we have to take it and
study it as we find it.

Before leaving the subject of these later and more modern chinas we may say, in
passing, that the firm of Messrs. Copeland have done more than any other existing
firm to maintain the traditions of a great factory. They have adhered to early
designs, and all through the nineteenth century their record has been an
exceedingly high one. It was Messrs. Copeland who first introduced, in 1845, their
Parian ware, a very near approach to true porcelain. The writer has seen a
Copeland and Garrett plate which in appearance was fully equal to Derby at its best
period.
Characteristics of Spode China.
Spode ware is well potted, and feels to the touch like turned ivory. It can readily be
distinguished from any of the glassy porcelains. It is light in weight. In design it
follows Japanese more than Chinese models. The glaze is very even and smooth.
SALE PRICES.
Spode. £ s.d.
Vase and cover, octagonal-shape, decorated with flowers in Oriental
taste in colours and gold, 24 in. high. Christie, January 14, 1902
515 6
Vases, five, purple, crimson, and gilt decoration. Foster, January 9, 1902 9 5 0
Basket and cover, dark blue and gold ground, and painted with bouquets
of flowers. Sotheby, February 24, 1902
6 2 6
Dishes, two, oblong shaped, decorated in the Japanese taste, blue, red,
and gold. Hepper & Sons, Leeds, February 5, 1902
315 0
Spill-vases, pair, gold ground, painted in flowers. Hepper & Sons, Leeds,
February 5, 1902
2 0 0
Cake-plates, three, gilt and painted landscapes, “The Church and Castle
of Scurlogstown, Co. of East Meath,” “The Remains of Wolvesey
Castle,” and “The Bridge and Priory, Newtown, Co. of East Meath”
(marked “Spode”). Edwards, Son & Bigwood, Birmingham, May 13,
1902
1010 0
Dessert service, apple-green border, gilt, each piece painted in flowers
and fruit, consisting of one tall compôte, seven oval dishes, four
leaf-shaped ditto, two sauce-tureens, covers and stands, and
seventeen plates. Bennett & Son, Dublin, June 18, 1902
2710 0
Dessert service, decorated in Oriental colourings, 37 pieces. Brady &
Sons, Perth, September 1, 1902
1616 0
Dinner set, decorated with sprays, leaves, and flowers, comprising 119
pieces. Brady & Sons, Perth, September 1, 1902
25 0 0

Dinner set, decorated in scarlet, blue, green, and gold, comprising 133
pieces. Brady & Sons, Perth, September 1, 1902
45 0 0
Tea service, gilt and decorated, 45 pieces. Jabez Jones & Sons, Preston,
December 15, 1902
28 7 0
Vases and covers, pair, large square shaped, decorated with landscapes,
birds and flowers in the Chinese taste in sunk panels on dark-blue
ground, gilt with foliage, and with dragon handles in high relief and
figures on the covers, 42 in. high, on wood pedestals, painted white.
Christie, December 19, 1902
21 0 0
Pair of Spode pastille-burners and covers, painted with flowers in the
Chinese taste on dark blue ground, supported by three gilt dolphins,
on triangular bases, mark in red, 7 in. high. Puttick & Simpson, July
9, 1920
6 6 0
Set of three Spode vases, gilt with foliage scrolls on dark blue ground,
and with scroll handles, outlined with gilt. Puttick & Simpson, July 9,
1920
515 6
Copeland.
Vases, set of three, rich blue, gilt, white scroll handles, and painted in
colours, with wild flowers, centre vase 15 in. high, side vases 131⁄2
in. high (marked “Copeland & Garrett, Felspar Porcelain, late
Spode”). Edwards, Son & Bigwood, Birmingham, May 13, 1902
26 0 0
Dessert service of 24 pieces, pink ground, decorated with gold, the
centres painted in panels of hunting and other sporting scenes, each
different, marked “Copeland and Garrett,” centre compôte, two
oblong, two oval, and four circular side dishes, and fifteen plates. De
Rome & Son, Kendal, May 13, 1903
18 0 0

Responsive Web Design with HTML5 and CSS3 Second Edition Ben Frain

More Related Content

Similar to Responsive Web Design with HTML5 and CSS3 Second Edition Ben Frain

Recently uploaded

Responsive Web Design with HTML5 and CSS3 Second Edition Ben Frain