W

HTML5
NE

& CSS3
The Complete Manual
The essential handbook for web designers
 Welcome to
HTML5
& CSS3 The Complete Manual
HTML5 & CSS3 were first implemented in 2012.
Since then, web design has excelled, becoming
an art form that almost seems like technical
wizardry. In fact, all of these sites has been created
using the written craft of HTML and CSS, with the
added help of Javascript and jQuery. In this book
we aim to take you from the early stages of web
design, all the way to adding responsive elements
to your website with the use of brilliant tools such
as Bootstrap and Foundation. In no time, you’ll be
creating web wizardry yourself, so let’s get started.
 HTML5
& CSS3
The Complete Manual
Imagine Publishing Ltd
Richmond House
33 Richmond Hill
Bournemouth
Dorset BH2 6EZ
 +44 (0) 1202 586200
Website: www.imagine-publishing.co.uk
Twitter: @Books_Imagine
Facebook: www.facebook.com/ImagineBookazines

Publishing Director
Aaron Asadi

Head of Design
Ross Andrews

Production Editor
Jen Neal

Senior Art Editor

Greg Whitaker

Designer
Perry Wardell-Wicks

Photographer
James Sheppard

Printed by
William Gibbons, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT

Distributed in the UK, Eire & the Rest of the World by

Marketforce, Blue Fin Building, 110 Southwark Street, London, SE1 0SU
Tel 0203 148 3300, www.marketforce.co.uk

Distributed in Australia by
Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South
Wales 2000, Australia, Tel +61 2 8667 5288

Disclaimer
The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is
the copyright of Imagine Publishing Ltd. Nothing in this bookazine may be reproduced in whole or part without the written
permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review.
Although the bookazine has endeavoured to ensure all information is correct at time of print, prices and availability
may change. This bookazine is fully independent and not affiliated in any way with the companies mentioned herein.

HTML5 & CSS3 The Complete Manual © 2014 Imagine Publishing Ltd

ISBN 9781910439418
Part of the

bookazine series
Contents
What you can find inside the bookazine

Style. CSS

Introducing HTML Introducing CSS

08 An introduction 30 An introduction to CSS 52 Add a background
to HTML Customise with CSS image
Get to know HTML5 Add photos and images
40 Styling with CSS
18 HTML glossary Get to know CSS terms 56 Style a two-column
Learn the basic terms layout
Create your own layout
20 Create a basic layout
Get started with design 60 Create a header
Code yourself a header
22 Code a link
Add links to your site 42 Centre your page 64 Create a sidebar
Change the position Add a sidebar to your site
23 Create a list
Use <ul> and <ol> tags 44 Define body and 68 Add content to your
heading styles website
24 All about div tags Add CSS styling Fill up your website pages
Contain your content
46 Style lists with CSS 72 Add content to your footer
26 Create a three-column Change the appearance Create your site’s footer
layout
Make a different layout 48 Turn lists into
navigation bars
Make your list navigate

50 Format images
using CSS
Edit where your images
sit on the page
6
 Create
your ow
websiten
Responsive design

74 Introduction to 106 Make a responsive menu

Responsive Web Design for a retina screen Reference
Understand what makes Get device ready
a responsive design 124 Useful resources
Find everything you
82 Bootstrap
need online
Responsive design
made easy

112 Techniques for creating

responsive typography
Get to know online font
systems
126 Useful tools
118 Create a HTML5 Get fonts, codes and
responsive video player other useful tools online
94 Build a custom Go beyond simply
Foundation template embedding videos
Make your own
responsive design

100 Build a responsive

WordPress theme
Create your own
WordPress theme
7
Introducing HTML An introduction to HTML

8
 An introduction to HTML Introducing HTML

An introduction to HTML
HyperText Markup Language, more commonly know as HTML, is the basic
building block of the web. It provides the structure, content and connection
between pages, allowing web designers to create interactive experiences.
Easy to learn, it offers limitless possibilities…

The majority of web pages are made up of one or more files that
are downloaded to a computer, which in turn are interpreted by a
web browser and finally rendered out to screen. At its simplest, a
web page is a plain text file that contains special instructions about
what kind of content is contained within. These instructions are
written in HTML – the language used on the world wide web.
HTML, or HyperText Markup Language to give it the full name,
is the core building block of a web page. HTML is a markup-based,
human-readable language that’s designed to be simple to write,
and easy to understand. A markup language is one where bits
of data are literally marked as being of a particular type. So, for
example, a piece of data that you want to render as a paragraph
would be ‘marked up’ with a paragraph marker.

Marking up
Markers are referred to as tags, and they have less-than and greater-
than symbols around them. This paragraph would be marked
up with a <p> tag at the start to denote a paragraph, and a
matching </p> tag at the end to signify the end of the paragraph.
HTML offers many tags for marking up content, and browsers are
programmed to interpret these tags, formatting the contents of
each tag according to a set of preset rules. This allows the <strong>
tag to render text in bold, and the <em> (for emphasis) tag to
render in italics. One of the major benefits of this system of marking
up content is that it’s easy to read – you don’t need any special
software to either write or read HTML documents, as they’re just
plain text. This makes it easy to create a functioning web page using
nothing more complex than a text editor.
9
 Introducing HTML An introduction to HTML

What exactly is HyperText?

Why is the language called HyperText Markup? Because the key
thing that makes the World Wide Web a web, rather than a series of
disconnected pockets of content, is the ability to link one document
to another – these links are HyperText because clicking on them
takes you somewhere else in the vast web of pages! As well as a
basic HTML (text) document, web pages can call in external files
(or ‘assets’) that include stylesheets, images, audio files, video, flash
and scripts. The web browser looks at the HTML document when it
downloads it, and looks for any external files that are called into the

<right> All websites are built using HTML,

CSS and JavaScript

<right> The simple, user-friendly Calendar

app interface actually works well for
complex agenda management

10
Above Find a domain name to create an identity for your blog
 An introduction to HTML Introducing HTML

What is HTML5?
The first requirement of any WordPress installation is the packages from $20 a month (approx £15) but offers
need for web space. There are thousands of web hosting gigabytes of storage and 1TB network transfer rates.
companies who will happily supply space for a small Other reputable web hosts to consider are Fasthosts
fee. However, to determine what sort of web hosting (www.fasthosts.co.uk), 1&1 (www.1and1.co.uk) and
package is needed the user needs to decide how much Heart Internet (www.heartinternet.co.uk). Once a
web space is needed and how much traffic is expected. package has been bought and paid for the web host will
Users can get 200MB of web space and gigabytes of send all the details (username, passwords etc) needed to
traffic for a very small fee. But if more space is likely to be take control of the web space.
needed, ie a photo blog, go for more. Don’t worry too To host a WordPress blog at a desired URL, ie
much about traffic to start with. New sites are not likely mywebsite.co.uk, a domain name needs to be
to get huge amounts of traffic immediately and this can purchased. Try www.123-reg.co.uk, this offers .co.uk
be changed at a later date very quickly and easily. domain names from £2.99 a year and .com domain
A small UK company that provides cheap and efficient names from £9.99 a year. Another well-respected domain
hosting is Z-Host (www.z-host.co.uk). It provides name supplier is Easily (www.easily.co.uk).
packages from as little as £15 a year (100MB of web If the prospect of finding web space and getting a
space and 10GB of monthly traffic), perfect for first time domain name seems too much like hard work, there is
bloggers. Alternatively, choose 1GB of web space and the hosted option. Go to www.wordpress.com, click
40GB of monthly traffic for £60 a year. At the other end Sign Up Now and all that’s needed is an email address.
of the scale there is a popular choice with web designer This gives a new user a unique WordPress URL, ie
Media Temple (www.mediatemple.net). This offers myname.wordpress.com and hosts the account.

11
 Introducing HTML An introduction to HTML

<right> Once you know HTML you can

create both websites and web apps for the
likes of iPhone, Android and even Facebook!

“Every web browser only has to support

one kind of page structural language,
which is easier for web designers”

<right> Apple’s website typifies what can

be achieved with just HTML and some
scripts and styles

12
 An introduction to HTML Introducing HTML

page. If it finds any files called in, the browser will send a message
back to the web server asking for those files. The final result you see
in your web browser window may be the result of more than 20
individual files, brought together by the web browser and rendered
as a single web page!

Recognising an HTML document

You’ll notice as you browse around the web that different pages
have different names, and more importantly they have different
extensions at the end of the filename. Some end with .htm or .html,
which are obviously HTML documents, but others might end with
.cfm, .php, .asp or .aspx. What are these file types?
As far as the web browser is concerned, they’re just normal
HTML documents like every other on the web. What these different
extensions signify is that some sort of processing has happened on
the server before the page was sent to your browser, allowing the
website to generate some unique-to-you content.
All the examples we’ve noted above have similar characteristics.
They’re scripts, or small computer programs, that run on the server

HTML & mobile browsing

When you access the web from your mobile phone or tablet, you’ll often
notice special pages that have been formatted especially for these
devices, rather than the full desktop version of a website. You might
have wondered whether these pages use a special language especially
for mobile devices? The good news is that, just like the rest of the web, they
use standard HTML. The only real difference between a page optimised
for a mobile device and one orientated towards a desktop computer is the
CSS styles that have been applied. The content, and often the structure, of
the page remains plain HTML and there’s no need to learn special skills or
additional languages to be able to create sites that on these devices. That’s
not to say that you shouldn’t consider how your users are accessing the
web page and what information they might need!
Typically, a mobile-optimised website will be presented in one of two ways:
either it will be the full website presented to render nicely on the smaller
screen size that you find on phones and tablets, or it will be a special version
of the website that doesn’t contain the same information as the full website.
This latter approach supposes that a mobile visitor to your site is likely to be more
goal-orientated than a desktop visitor, and aims to present the key information quickly,
such as ‘how to find us’, or ‘our contact details’.

13
 Introducing HTML An introduction to HTML

and make some decisions about what content to show. This might
be as simple as including your name at the top of the page when
you’re logged in, or as complex as a fully loaded e-commerce web
store, but all these ‘server-side languages’ output the same final
result – plain HTML. It’s important that the web works this way, as
every web browser only has to support one kind of page structural
language, which makes it easier for both web designers and
browser vendors, not to mention for users of the web who know
that all they need to access any website is a web browser and an
internet connection.

What are these semantics?

The HTML format is very accommodating; beyond the required
elements of <html>, <head> and <body> you can arrange your
content any way you like. This is both a benefit and a potential
issue as the flexibility to present (and mark up) content in any way
also means that you can quickly end up with a confusing mess! A
movement to present information in a semantic fashion existed at
the birth of the language, and has seen a resurgence in recent years.
<below> The new HTML5 specification
has been drawn up by the W3C, an The general idea is that content should be marked up according
organisation set up to act as the
gatekeeper for web standards to its type and importance. <h1> heading tags, for example, should

14
 An introduction to HTML Introducing HTML

“Every web browser only has to support

one kind of page structural language,
which is easier for web designers”

only be used to mark up the most important piece of info on a

page, <h2> for the second most important and so on. If you think
about the analogy of a book, the <h1> tag might be the book or
chapter name, <h2> would be a section header and so on. By using
this approach, the HTML describes the importance of each piece of
info which helps search engines identify what your page is about,
and more importantly special software, such as screen readers that
translate web pages into audio for people with sight problems, can
make more sense of the document.
In the past, content has been marked up using heading and
paragraph tags, but content has been grouped using the same
single nondescript tag, <div>. This tag is, by itself, nothing more
than a method for delimiting different pieces of information so that
it might be used around a navigation bar, or just as likely around
an article on a web page. As HTML5 has been introduced, new
semantically orientated tags have been introduced that allow
designers to mark up navigation with a <nav> tag, headers with a
<header> area and articles with <article>. There are more of these
semantic tags available, but some browsers are still implementing
HTML5 so we’re in a period of transition where you’ll still see a huge
number of plain old <div> tags used.

What about Flash?

Up until the launch of the iPhone, the de facto method for
presenting interactive rich content was Adobe Flash. This is a
plug-in that sits inside an HTML document, but runs as a separate
program within the web browser. When Apple released the iPhone
it decided not to support Flash, largely because of the problems
Flash had with crashing browsers, and the lack of support for touch
screens. This decision helped kick-start a movement away from the
plug-in towards the combination of HTML, CSS and JavaScript.
Whereas five or six years ago most interactive image galleries
were created using Flash, today the majority are rendered using
15
 Introducing HTML An introduction to HTML

“There’s been an explosion in smartphone use over the

past few years which has led increasingly to the web being
accessed on the move”

standard HTML and either CSS, JavaScript or most commonly both.

Flash is still useful for certain types of content – it’s a very popular
method for showing video on the web, and games are currently
easier to code in Flash.
Flash isn’t nearly as accessible as HTML, either from a developer
point of view or from a user perspective, especially with regard to
disability access. Adobe has worked to improve this over the years,
but the technology isn’t ever going to be as accessible as a plain-
text-based system such as HTML.

HTML: function, not form

In the early days of the internet, HTML included a large variety of
methods for changing the way content displayed. For example, an
early option was the <font> tag which allowed you to specify the
typeface that you’d like the content and information to be rendered
in. This allowed designers to very precisely choose how their
content was displayed, but when a website consisted of 50 pages
and the designer wanted to change the font, it was a mammoth
task to work through every page and replace every single reference
to the choice of font.
As a solution, CSS was introduced. CSS, as you’ll see elsewhere
in this book, is a system for applying styles – defining the form and
aesthetic of a page. This means that now we can treat HTML as a
structural language only – we don’t define the way a web page
looks using HTML, just how it’s structured and content arranged in
a semantic hierarchy. The net result is that by separating form and
function we can now change a font that’s used throughout a big
website with just a single change to the CSS stylesheet, saving time
and ensuring design consistency throughout.

What’s next for HTML?

HTML has come a long way since its invention in a computer lab in
Switzerland, and it’s continuing to develop. The HTML5 specification
16
 An introduction to HTML Introducing HTML

is already partially implemented in browsers, but other elements

of the language are still being discussed, and there’s a good
probability that we’ll see further enhancements in the coming
years such as the ability to specify different resolution images
to be downloaded to desktop computers from those sent to
mobile devices.
There’s been an explosion in smartphone use over the past few
years which has led increasingly to the web being accessed on
the move. These devices have a different screen orientation to the
traditional computer, often have less bandwidth and computing
power, but expect to have a fantastic browsing experience. The
HTML language, through HTML5, is already adapting to meet this
challenge, but as the specification matures you can expect to see
<below> The new features in HTML5 allow
further enhancements with this usage scenario in mind. It’s an you to embed video and audio directly in
your pages, and when combined with CSS
exciting time to be a web designer! can provide amazing special effects

17
 Introducing HTML HTML glossary

HTML glossary
We demystify the definition of the most popular HTML jargon
a canvas tag can be styled eg width, This will include elements that need
height, border, to make it fit better to be seen on every page and will
The a tag defines a hyperlink, which with the graphics that are placed typically have navigation and link to an
is used to link to another web page. upon your web page. about page and contact page
The <a> tag is typically coupled with
the href attribute which will include class form
the link’s destination. For example, <a
href=”about.html”>link text</a> The class attribute can be applied to The <form> tag is a container that will
the div tag eg ‘div class=’. This will have contain all the necessary elements
aside a unique name that is not in the HTML to create a form. This could be text
specification. Unlike the id option the fields, checkboxes, labels and submit
This is a tag that was introduced in class identifier can be applied to more buttons, your usual form garb.
HTML5 and refers to content that is an than one element.
aside to the main content. The content head
in the aside tag should be relevant to div
its surrounding content. This tag contains a host of information
The div tag is used to create blocks that is typically hidden from the user,
audio of content in a web page. These are but is important for the browser
known as block elements. The tag to read. It will include the page
The <audio> tag allows for the will be coupled with id eg ‘div id=’ to title, keywords, scripts and links to
inclusion of audio files which can be create a unique name which typically stylesheets. The head tag comes
read directly by the browser without reflects what the content block is eg immediately after the html tag and
the need for a plug-in. Between the leftcol for left column. before the body tag.
audio tags will be the source od the
audio and any related attributes footer header
body The footer is the part of a page that A web page is typically split into
typically sits at the bottom of a page. different parts including the header.
The body tag is where all the content
seen on screen is stored. It sits after the
head tag and between the html tag.

br
Br is short for break, or more
specifically line breaks. It is an empty
tag which means it isn’t a set of tags
just a single tag. It is used to split long
headlines or long sentences.

canvas
The <canvas> tag is a container where
the necessary code is placed to show
the graphics created by the code. The <above> The canvas tag is a container for dynamic graphics

18
 HTML glossary Introducing HTML

The header is typically at the top of (ordered) tag and a set of li tags are
the page and includes elements that required for each item. If three items
will typically be seen on every page eg are needed in a list then three sets of
the site title, logo and navigation. For a li tags are needed. The text inside the
tutorial on how to create your header, each list item will be displayed on a
go to page 60. web page. It is important to close each
of the li tags.
html
nav
The html tag is the tag that defines a
HTML document. It is the tag that all A tag introduced in HTML5, nav
other tags live within. You will find a is a semantic tag that is short for
HTML tag at the beginning and end of navigation. These are used to store any
<above> The script tag is where code, or link to
a document navigation or menus that are typically the code source is placed
found at the top of a web page,
img usually within the header. tag
Img is short for image and defines p The term tag refers to all the elements
where an image will go in a web page. of the HTML specification. The HTML
The img tag is typically paired with src, This is the HTML tag for paragraph. language is made up of tags that
which shows the source of the image This works exactly as a paragraph are contained in a set of brackets
and alt. Alt text is what will show in the would in a book. The paragraph of eg <body>.
browser if the image is not available. text would be surrounded by an
opening and closing set of tags eg title
li <p></p>.
The title tag is stored inside the head
The li tag is sort for list. These are script tag and determines the title of the
found inside the ul (unordered) or ol page. This title will appear in the
Web pages often include code title bar or tab in a web browser. It
beyond HTML and CSS that add is important that the title is concise
dynamic elements. A simple example and informative as it will be read by
is Google Analytics code and other the user and search engines. Do not
code written in JavaScript. The code is include notes within the tag as this will
stored inside a set of <script> tags to also show in your title.
help identify the code.
ul
section
Lists are an integral part of web pages
The section tag was introduced in and there are several options for
HTML5 and is a generic section of a creating lists. ul is short for unordered
<above> The video tag is a placeholder for web page that will contain general list which means the list is bullet
adding video into a web apge content such as text and images. It can pointed by default. The alternative
have its own id (name) to help identify option is ol, ordered list, which adds
the section, and is able to have a CSS numbers or letters eg a,b,c
class added. It is often has a title as well.
video
table
The <video> tag is a set of tags,
Tables are made up of rows and which will contain any related video
columns and were used to create information. For example, a basic
page layouts before CSS became version would contain width and
popular. They are now used to show height attributes along with the
<above> The elements of a HTML form are
stored inside the <form> tags off tables of data. source of the video.

19
 Introducing HTML Create a basic layout

Create a basic layout

Code up your first basic skeleton for a webpage using HTML5 – it’s really quite
simple to do
In this tutorial we’ll make an HTML5 layout for a simple webpage. While initially HTML may look
confusing, there’s a relatively small amount of code that you’ll need to remember. There are a few basic
building blocks such as <div> which you will find yourself using regularly, then others such as <caption>
which you will use much less often.
If you have made pages before in the past using HTML4 then you should feel at home, just be
aware of the new tags. If you’ve not written any HTML before then good news, as it’s now easier to
understand! HTML5 has added in a lot of new elements which help the browser interpret the layout
of the page easier. <header> and <footer> are two examples, and describe common top and bottom
elements of a page respectively.
When starting out in web design it’s important to remember to ‘open’ and then ‘close’ tags correctly.
Every time you open a new command, get into the practise of having your end tag ready, so you don’t
end up with any loose bits messing with your code.
Open your text editor of choice and let’s get started!

The head tag

While usually invisible to
the website visitor, the head
tag contains important
information for the browser,
such as CSS styles as well as
search engine information

Header tag
The header differs from the head, as it’s
contained within the body of the HTML
page, meaning it gets displayed in the
browser. The header usually contains
company insignia, navigation and
possibly an introductory image

Footer
The footer tag denotes an element
that usually goes at the bottom of
the content, and contains items such
as author, contact info, telephone
numbers etc
Div tag
A div is used to
group content
together, in this
case we use it
to display our
content and
sidebar. Divs can
be nested within
each other and
can have IDs and
classes applied to
them so they can
be identified

20
 Create a basic layout Introducing HTML

Set up your first HTML page

The HTML base Add the header Add the footer

01 First up, the doctype tells the

browser what kind of content
to expect. In HTML5 it’s simple:
04 The <header> is typically
used to hold the main site
image, with a title and possibly site
06 The <footer> element
usually contains quick links
to common areas of the site such
navigation. You can have multiple as ‘Contact us’, and sometimes has
001 <!DOCTYPE html> <header> tags on a page. copyrights or addresses.
002 <html lang="en">
003 </html> 001 <!DOCTYPE html> 001 <!DOCTYPE html>
002 <html lang="en"> 002 <html lang="en">
003 <head> 003 <head>
Create the head 004 <meta charset="utf-8" /> 004 <meta charset="utf-8" />
005 <title>My Example Page</title> 005 <title>My Example Page</title>
006 </head> 006 </head>
02 Next up is the <head>
element, where we place all
the files we wish to include within our
007
008
<body>
<header>
007
008
<body>
<header>
009 </header> 009 </header>
page, eg CSS style sheets, which we’ll 010 </body> 010 <div class='content'>
learn about later. 011 </html> 011 </div>
012 <div class='sidebar'>
001 <!DOCTYPE html>
013 </div>
002 <html lang="en">
014 <footer>
003 <head>
015 </footer>
004 <meta charset="utf-8" />
016 </body>
005 <title>My Example Page<title>
017 </html>
006 </head>
007 </html>

Add the body

Sidebar and content
03 The <body> is where all the
viewable page content goes.
In it we’ll add the header, the main
content area, sidebar and a footer
05 The main content can be
placed within a ‘div’, then a
class applied to it, place it after the
perhaps for a sitemap. closing header tag, but before the
001 <!DOCTYPE html> closing body tag:
002 <html lang="en">
001 <div class='content'>
003 <head>
002 </div>
004 <meta charset="utf-8" />
005
006
<title>My Example Page</title>
</head>
The sidebar can be placed after it, also
with a class:
“When starting
007
008
<body>
</body> 004 <div class='sidebar'>
005 </div>
out in web design
009 </body>
it’s important to
remember to
‘open’ and then
‘close’ tags”
21
 Introducing HTML Code a link

Code a link
Adding in links to other pages is a key part of web design

While links may seem like a simple element to add to a webpage, they
are the key building blocks of the entire internet. Similar to pages within
a book, separate webpages within a website help to break up content
by topic or purpose. Then, by adding in a navigation bar, it means that
visitors will be able to quickly between content.
Links are also one of the most important elements that Google and other search engines use to find
and index your site. The kind of content that you link out to, and the kind of content contained within
sites that link to your pages, are vital in informing the search engine on how to categorise your site for its
search results.
This tutorial will take you through adding in links leading to other pages in your website, and how to
link out to other people’s sites. Once you have added some links, your site can start to function how it’s
intended to, with visitors being able to view all the content contained with ease.

The basic ‘a’ tag Internal links Open a new page

01 Adding a hyperlink to your

webpage is really simple, but
there are a couple of customisations
03 To link to another page in your
own site, you simply add the
name of the page:
05 If you want your link to open in
a new tab or window, you can
see a target to the link:
to take into consideration. A link is
001 <a href="contact.html" ></a> 001 <a href="gallery.html" target="_
denoted using the ‘a’ tag, short for blank"> See My Gallery</a>
anchor. To start off your link, enter in: This assumes that the contact.html
page is within the same folder as
001 <a> </a> the page we are working on. See
However, unlike some other HTML the ‘Relative paths’ boxout for
tags, an anchor needs a little more more information.
information for it to work properly.
Add link text
Href

02 The link needs a destination

so that when it’s clicked, the
04 To make the link visible to
the user, add in some text
between your opening and closing
browser knows where to go. This is
added in using ‘href’. For example:
<a> tags. For example:
“Links are the
001 <a href="http://www.webdesigner.
001 <a href="gallery.html"> See My
Gallery</a> key building
com"></a>
Open the page in your browser, and
assuming the gallery.html page exits
blocks of the
would send the browser to that
external website.
in the same directory, clicking the text
will take you there.
entire internet”
22
 Create lists in your website Introducing HTML

Create lists in your website

Learn how to quickly create various lists within your webpages using HTML

Lists are an effective way of presenting important information in a way

that’s quick to read and digest. They are also a good method for giving a
brief description or introduction into content to follow, to help your users
find what it is they are looking for.
Coding up a list in HTML is quick and very straightforward, and once
you’ve got the hang of the basics you can start to apply your own styles
using CSS to make them really stand out from the crowd, which we’ll
come to later
There are two main types of lists in HTML: ordered and unordered. An ordered list stars at 1 and then
increases. This is useful when you need to give preference to the higher items, or you want to display a
step-by-step guide.
An unordered list is simply bullet-pointed and is useful when you just need to display a list where
the order is irrelevant. By default, lists will be indented from the surrounding content and have a circular
bullet point. This tutorial will show you how to add lists to your pages, both ordered and unordered, and
also how to create lists within lists.

Unordered list Nested lists <ol> tag in place of the <ul>. This will
then replace the bullet points with

01 An unordered list by default is

shown slightly indented with
a bullet point denoting each item. To
03 Lists can be embedded within
other lists just by opening and
closing a new <ul> within another
ascending numeric values for you list
of items.

add in an unordered list you use the <ul>, and then list items can be added
<ul> tag. to that too. They will then be indented
Definition lists
again within that <ul>.
Add list items 001
002
<ul>
<li> Tea </li>
05 There is one other type of list
in HTML – the definition list.
It’s quite rarely used but allows an
003 <ul>

02 Within your list, items are added

using the list item tag like so:
004
005
<li>Breakfast</li>
<li>Earl Grey</li>
indented description to be added to
each list item. An example definition
list would be:
001 <ul> 006 <li>Coffee</li>
002 <li> </li> 007 <ul>
001 <dl>
008 <li>Latte</li>
002 <dt>Snowboard</dt>
009 </ul>
Text can go between the open and 010 </ul>
003 <dd>- Great for freestyle tricks
</dd>
close li tags; for example:
004 <dt>Cross Country Skis</dt>
003 </ul>
Ordered lists 005 <dd>- Ideal for exploring on
004 <li> Tea </li> </dd>
005
006
<li>Coffee</li>
</ul> 04 If you wish to number your list
items then you can use the
006 </dl>
007

23
 Introducing HTML All about div tags

All about div tags

Use a div tag to create consistency on your website

An HTML page is made up of a series of tags which tell the web browser what to display and where.
The main building block of a page is a div tag, short for division. If you look at a newspaper page, you
will see that text is grouped together in columns. Images with captions are also together with a margin
around them. A div in HTML is similar to this, and it’s usual to group together content in a similar way.
While HTML5 has added a few new tags with more semantic names such as ‘header’ and ‘footer’, the
main body of most pages is still constructed using divs.
There is no limit on how many divs you have within a page and most webpages you visit online will
contain many, all nested within each other. Divs can contain text, images, video and audio, as well as
other HTML elements such as articles and sections.
This tutorial will show you how to make your first divs and then how to apply an ID or class to them
so when you’re ready you can apply CSS styles, or use JavaScript on them. We’ll be using plenty of them
throughout the book, and they are really simple. Don’t forget to close each and every div tag that you
use else you will find your website takes a wonky look to it.

Properties of the div

The basic div Closing the div Adding an ID

01 A div is started by using this

simple piece of code: <div>.
Following on from that, you can then
02 Once you have inserted all the
content, you need to make 03 A div can have a unique
identifier so it can be
sure you close off the div by using </ recognised in a style sheet
insert all the content you want to div>. Note the forward slash denoting or by any JavaScript you may add. To
contain within the div. the ending of the current div: apply an ID to a div, use:
001 <div>
001 <div> 001 <div id"mydivID">
002 This is where you will add your
002 This is where you will add your 002 This is where you will add your
div content.
div content. div content.
003 </div> 003 </div>

“Divs can contain text, images, video and

audio, as well as other HTML elements”

24
 All about div tags Introducing HTML

Adding a class Nesting divs

04 Classes are similar to IDs, but

many items on a page can
have the same class. To apply a class
05 Many webpages are made up
of a few main elements such as
a header and footer, and then a main
“There is no limit
to a div, use: content div. Within a div it’s possible to on how many
001 <div id"mydivID">
have other divs. For example:
divs you have
002 This is where you will add your
div content.
001 <div id=”content”>
002 <div class=”leftColumn”
within a page and
003 </div> 003
004
</div>
<div class=”rightColumn”
most webpages
Using classes makes styling multiple
elements much easier. It allows you to
005 </div>
006 </div>
you visit online will
create CSS coding in one place that
will then apply to all of the specified Doing this allows you to have a
contain many”
classes rather than having to input the universal style to the ‘content’ div, and
styling information into each individual then apply different styles to the divs
div tag. contained within.

Div classes IDs Indenting divs Code highlighting

Classes are widely used in web IDs are used in a similar way to Once your pages get more Most HTML editors offer code
development to allow CSS styles to classes, but there should only be complicated they can feature many colour highlighting of some sort.
be associated with elements within one element on a page with a divs all nested within each other. This can help you when checking
your HTML page particular ID. IDs allow you to target This can make it hard to track where which divs have classes applied etc
specific elements using JavaScript one opens and another closes. It’s
for manipulation standard practice to indent the
content of a div using the tab button

25
 Introducing HTML Create a three-column layout

Create a three-column layout

Make a three-column webpage structure using HTML5

HTML and CSS essentially allow for a huge range of freedom when designing your pages, but there are
a few layout principles that have developed over the years which it’s a good idea to follow.
If you have a quick look at some of your favourite sites on the internet it’s quite likely that they will
use a column layout, akin to a newspaper. A common layout for a site is to have the site or company
logo at the top of the page, then have a column down the left for navigation or links, a main content
section in the centre, and then a sidebar on the right with supplementary information or Facebook
and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright
information, the name of the site designer, site links and sometimes a contact address. This tutorial
will show you how to code up the HTML scaffolding for a three-column layout using modern HTML5
elements. Once you have mastered this, it can then be adapted into a two- or more-than-three-column
layout if you so wish.

26
 Create a three-column layout Introducing HTML

Set up your HTML page

“ There are many different ways of
01 To start off, open up your
favourite editor and create the displaying characters, and a few different
initial HTML elements as usual.
The first thing we need to add is the
standards depending on language”
HTML5 doctype declaration:

001 <!DOCTYPE html>

displayed to the user, but is used Define character set
This tells our browser that we are using to include your CSS stylesheets,
the HTML specification within the JavaScript and metadata. Within your
page, and it should be placed right at
the top of your HTML file.
<html> tags, place <head>, then </
head> to close it off.
05 There are many different
ways of displaying
characters in computing, and a
001 <!DOCTYPE html> few different standards depending
002 <html> on language; eg Greek or Arabic
003 <head> text looks very different from
004 <!-- CSS Styles and javascript to
Chinese. Luckily for us, almost
be used
005 </head>
all the web uses the UTF-8
006 </html> standard, which we define within
our head with:

Open HTML tag Add a title 001 <meta charset="utf-8" />

UTF-8 does a good job of

displaying most characters
02 Next up we need to start
off our HTML by entering
the HTML tag – <html> – and
04 The title tag is used to display
text in the browser’s title bar at correctly on your website.
the top (if it has one), and also used as
then making sure we close this a guide for search engines to identify The body tag
with </html>. what content is contained within
This tag tells the browser that the page. Add a <title> tag within
contained within this section is HTML
code. All the page content that we
your head. Next, add a page title to
describe the content, and close the
06 All the content you wish to
be displayed to the user is put
within a ’body’ tag. This goes after
will be creating will need to go within title tag with </title>. your ’head’ tag has been closed, but
these tags.
001 <head> within your <html> tag. Start it off
001 <!DOCTYPE html> 002 <title> with <body>, then close it off in the
002 <html> 003 3 Column Layout normal way: </body>. We will now
003 </html> 004 </title> place all code within the body tag.

Insert the head

03 The head tag is an important

one in HTML, and shouldn’t
be confused with the ’header’ tag.
Content within the head is not

27
 Introducing HTML Create a three-column layout

Adding comments

07 Sometimes you may wish to

add a note to a location within
your page, perhaps as a reminder or
to make it easier to see where certain
elements start or finish. Comments
are started using ’<!--’, followed by the
comment text, and then ended with
’-->’. For example:
001 <!-- Start header -->

The container

08 It’s quite common to wrap

all the main content within
the body in a ’container’ div. This can
</header>. A page can have multiple also be used to target a specific div
headers, although they cannot be within a page.
make styling and centring easier when contained within each other.
you start to write up your CSS. Add 001 <header>
a container div within the body with 002 <nav>
<div> and </div>, then give it an ID so Nav tag 003 <a href="home.html">Home</a> |
<a hef="products.html">Products</a> |
we can style it later: <a
001 <body>
002 <div id="container">
10 Nearly all pages contain a
navigation or menu bar of
some sort to allow visitors to get
href="gallery.tml">Gallery</a>
004 </nav>
005 </header>
003 </div>
around the site. HTML5 now has a
tag specifically for this. The ’nav’ tag
is where to place links to other items.
Let’s add one to our page – <nav> –
and then close off again with </nav>.
001 <header>
002 <nav>
003 </nav>
004 </header>

The header
Navigation items
09 The top element to our page is
usually referred to as a ’header’
and contains the site title, logo, 11 To add links to the navigation
we use the <a> or anchor tag.
First column
navigation, and sometimes adverts. Eg <a href=”products.html”> Products
To create a header we use the header
tag, which is new in HTML5. To open
</a>. If you don’t yet know your exact
site layout, it’s common to use a ’#’ in 12 Now we can add our first
left column. This goes after
the header tag, but still within our
it enter <header> and then to close, place of the link. A hash symbol can
container div. Add this in with <div>
and then don’t forget to close: </div>.
Again, you can give it an ID or class,
“The top element to our page is usually such as:
referred to as a ’header’ and contains the 001 <div id="col1">
002 </div>
site title, logo, navigation, and adverts” This column might contain a menu or
adverts, for example.

28
 Create a three-column layout Introducing HTML

Second column
“The second column is usually the widest
13 The second column is usually
the widest in the centre, and in the centre, and normally houses the
normally houses the main page
content. Add it to the page the same
main page content”
way as before, but give it a different
ID this time.
001 <div id="col2"> footer>. Place this after your sidebar The end result
002 </div> column in the code.
Don’t be concerned if you can’t see
any content within your browser – as
without styling, divs are essentially
001 <footer>
002 Footer
003 </footer>
18 Save the file now, making sure
to have the .html extension
at the end. Open the file within a
invisible and only the content browser to see the result. As there is
contained is displayed. Metadata (optional) no styling applied yet, it won’t look
particularly attractive by any means,
but you’ve created a basic web page
16 If you know what content
is going into the pages and
wish to improve search engine
layout that’s now ready for CSS and
content to be added.
optimisation, you can add meta 001 <!DOCTYPE html>
information to the head. Meta 002 <html>
information helps Google and other 003 <head>
search engines to index and organise 004 <title>
sites by content. The meta description 005 3 Column Layout
tag is used to give a short account of 006 </title>
Third column the page content: 007 <meta charset="utf-8" />
008 <meta name="description"
001 <meta name=“description" content="Fishing in Dorset">

14 The third and final column is

then added in exactly the same
way, with a unique ID:
content=“Fishing in
Dorset">
009 <meta name="robots"
content="noindex">
010 </head>
011 <body>
001 <div id="sidebar"></div> 012 <div id="container">
002 Column 1 013 <header>
003 </div> 014 <nav>
004 <div id="col2"> 015 <a href="home.html">Home</a> | <a
005 Column 2 hef="products.html">Products</a> | <a
006 </div> href="gallery.tml">Gallery</a>
007 <div id="sidebar"> 016 </nav>
008 Sidebar 017 </header>
009 </div> Stopping Google 018 <div id="col1">
This column might contain a menu or indexing (optional) 019 Column 1
020 </div>
adverts, for example.
021 <div id="col2">

The footer element 17 To stop Google and other

search engines indexing your
page, you can add the following code
022 Column 2
023 </div>
024 <div id="sidebar">
to your head: 025 Sidebar

15 The footer is used to mark

the bottom of the page, and
often contains a list of common links,
001 <meta name="robots"
content="noindex">
026 </div>
027 <footer>
028 Footer
along with copyright and/or contact This means the page will not be shown 029 </footer>
information. To add a footer we simply in Google’s search results. This can be 030 </div>
use the HTML5 footer tag – <footer> useful on client login pages, or out-of- 031 </body>
– and as always, close it off using </ date pages that you wish to archive. 032 </html>

29
 ANDROID LANDSCAPE 320 X 240
Style. CSS
An introduction to CSS

ANDROID PORTRAIT 240 X 320

KINDLE LANDSCAPE 1024 X 600
IPAD LANDSCAPE 1024 X 768

30
Introducing CSS
 An introduction to CSS Introducing CSS

NEW ANDRIOD LANDSCAPE 515 X 295

ANDROID LANDSCAPE 515 X 295

ANDROID PORTRAIT 295 X 515

IPHONE LANDSCAPE 480 X 320

An introduction to CSS
If HTML provides the structure for a website, CSS provides the form. This is the
language that will make your site stand out

C
ascading Style Sheets, commonly abbreviated to CSS, is a language used for
describing how HTML should be presented. CSS documents provide all the format,
colour, positioning and other characteristics of a design that you will see on virtually
any webpage.
Originally introduced alongside HTML4, the language was designed to separate the structure of
a document from the presentation, improving the control of a design for web designers. CSS also
helped to improve accessibility of web pages, reduce HTML code complexity and crucially the
amount of repetition of markup that had to be created to describe how a page should look.
As well as these benefits, the separation of form and function allows different designs to be
displayed to users according to their device, simply by providing a different stylesheet. This means
that, for example, a mobile phone can load the same web page as a desktop browser, but present
the content within the page in a different manner. Similarly, CSS can be used to present page
content one way on screen and a second when printed, or to provide direction to screen reader
software over areas for emphasis.
Additionally, CSS is user-configurable, so while the designer might specify that text should be
shown in 18pt red Arial, the visitor to their site can load their own stylesheet to show the text in
12pt blue Times instead, should they wish to. As you can see, CSS offers a great deal of flexibility by
design. To fully understand what it’s capable of, we need to look a bit more at what CSS is, why
31
 Introducing CSS An introduction to CSS

confusing, but in practice it

allows you to apply a set of
“CSS offers absolute positioning of an broad styles that provide basic
element according to set co-ordinates” properties for the font that
text should be rendered in, for
example, and use more
and how it came about, and this scheme works. Broadly, specific selectors to
examine how the styles are applied in subsequently set the size,
implementation of the chronological order, but also colour or font weight. To
language works across according to specificity. If a help make sense of it all, let’s
different web browsers. style property is declared take a look at what CSS looks
more than once for a like in code.
The cascading bit particular element, the last
CSS is designed to use a chronological declaration CSS syntax
priority scheme that will be used, unless the Just like HTML, CSS is
determines how styles should earlier declaration was more designed to be human-
be applied to HTML elements. specific about the elements readable in its raw form.
The cascading bit of the it should apply to than the English keywords are used
language name refers to how latter. This sounds really with a simple syntax to

Recent versions of web browsers have vastly improved their implementation of CSS standards

32
 An introduction to CSS Introducing CSS

CSS3 opens
the web up
to more users
by allowing
individual
stylesheets
on pages

The advantages of CSS

CSS offers many benefits over form while a desktop computer inconsistencies. Along the same
the previous idea of pairing sees a different rendering more vein, CSS allows multiple
visual characteristics into HTML. aligned to the larger screen estate. elements to be selected
The most obvious one is that by CSS supports many different and styled with a single selector.
separating content from usage scenarios including print This reduces the amount of code
presentation, the aesthetic of a and audio. required to achieve a design.
web page or entire website can As well as the ability to tailor CSS makes the web more
be tailored to individual user the presentation according to accessible; a user can choose to
profiles or devices with ease. A device, user characteristic or load their own stylesheet onto
single HTML page can be location, CSS also helps to ensure any document. Useful for
rendered in many different ways, consistency across an entire visually-impaired users this
as amply demonstrated by the website. Where multiple pages characteristic also allows
CSS Zen Garden experiment reference the same CSS sheet, a designers to separate styles into
(csszengarden.com), and this change in the CSS is instantly multiple stylesheets with each
characteristic can be used to reflected across all those pages, applying an additional layer of
ensure that mobile devices saving the designer time and styling for easy organisation and
see a layout appropriate to their reducing the risk of adaptation of a design.

33
 Introducing CSS An introduction to CSS

describe a list of rules, style

properties and style values.
Each rule in a stylesheet is
defined by means of a
selector, which identifies the
HTML elements the rule
should apply to. Within the
rule, a series of properties and
values are defined so that the
visual characteristics for an
element are built up property
by property. Let’s take a quick
look at an example:
available), bold 18pt red text. <article> element, itself
h1
font-family: arial, helvetica, The entire <h1> would have a within any other element
sans-serif;
ten-pixel margin around it. that has an ID attribute of
font-weight: bold;-
font-size: 18pt; “content”. Our page would
color: red;
margin: 10px;
More complicated now show all <h1> tags as
} selectors red, bold, 18pt Arial, with the
In the previous example we exception of those headings
In the code above we’ve used a simple selector to inside an <article>, itself
defined the rule using the h1 establish which elements inside an element with an
{ } selector. This specifies that the rule should apply to. ID of #content where the
the style properties within Selectors can be nested so colour would be blue instead.
should apply to all <h1> tags that only specific elements This works because the CSS
found on the page. Within have the rule applied. An sheet cascades the styles and
the curly brackets we define example might look like the also has the priority scheme
a series of properties, such code that follows: we discussed earlier. As our
as font-family, font-size etc, second rule is more specific
#content article h1 {
and the values we’d like color: blue; in its selector, it takes priority
} over the more generic rule we
to set for each. As a result,
every heading 1 on our page Here, the rule would only created first. We could have
would be rendered in Arial apply to HTML <h1> elements also positioned our second
(or Helvetica if Arial wasn’t that are nested inside an rule chronologically after our
first to ensure it would take
priority, but sometimes the
“Selectors can be nested so that only specificity rules that are a part
of CSS would prioritise over
specific elements have the rule applied” chronology. By combining
specific selectors with

34
 An introduction to CSS Introducing CSS

different rules, and using

specificity and priority it’s “CSS offers absolute positioning of an
possible to style a document
with a few SS rules.
element according to set co-ordinates”
Different ways to is how elements can be according to a set of co-
load a style positioned on the page. CSS ordinates relative to the
There are three different offers a number of different container element. This allows
ways a style can be applied positioning systems, and elements to be very precisely
to an HTML element. The first these can be mixed and positioned on the page,
is through an external file matched within a single relative to the whole page.
that is loaded into the HTML page design. The first, and Similar to absolute
document in the <head> default, positioning scheme positioning is fixed
section. The second is to is ‘relative’ positioning. positioning. This works, as
include a <style> declaration This operates on the basis with absolute, using a series of
in the <head> section of the that an HTML document co-ordinates but rather than
document, writing your rules is chronological. Much like being positioned relative to
and properties directly inside a word processor, content the page, ‘position: fixed’
the <style> area, and the third that appears beneath other elements are always relative to
is directly onto an element content has its position on the the viewport (the visible
using the style attribute. The page dictated by the content portion of the browser
latter is referred to as an above which pushes it down screen). As you scroll, position
‘inline’ style. into position. fixed elements remain in
When calculating the style In addition to relative the same place in the
properties of an element, positioning, CSS also offers browser window.
CSS is loaded first from any absolute positioning where The final, and often the
external files and applied, an element is positioned most confusing, system is the
then from the <head> section
of the page, and finally from
any inline styles. Where the
same property is set by more
than one of these three
methods, they apply in the
order as described above.

Positioning
elements
One of the most common
areas of CSS that new
designers struggle to grasp
35
 Introducing CSS An introduction to CSS

floating element. This system positioning, and especially fully understand those issues
allows elements to push to float, works. it’s worth taking a quick trip
one side or the other of the down memory lane.
containing element, with History and When HTML3.2 was
content and other elements potential hiccups released, a series of new tags
automatically flowing around By now you’re starting to see were added that allowed web
it. This takes some the value and potential of CSS, designers to specify different
understanding and but it’s not all as perfect as it visual characteristics for their
experimentation, but is might at first seem. There are content. These included the
fundamental to achieving a number of problems that likes of <font>, <b> (for bold
some common layouts so it’s web designers have to text), <color>, <center> and
worth spending a little extra overcome when using CSS to many more. These tags
time getting to know how style their web pages, and to provided the control over
presentation that web
designers were craving, but a
“CSS offers absolute positioning of an problem quickly emerged: by
element according to set co-ordinates” mixing style with content the
pages designers worked on

36
 An introduction to CSS Introducing CSS

quickly became
unmanageable, especially
when a web site had lots of
pages. Something as simple as
changing the font a website
used might have taken days to
change, working through
each HTML page in the
website and changing
references from one font
to another.
As a consequence, the W3C
quickly realised that content
should be separate from differences in opinion, both The arrival of
presentation, and developed these popular browsers had HTML5
CSS. CSS1 debuted alongside their own bugs and quirks As the web has matured, so
HTML4 in 1996, but it wasn’t that resulted in strange have the technologies used to
until some years later that web behaviours when interpreting create it and CSS is no
browser vendors had and rendering CSS. To further different. HTML is now just
managed to fully implement compound the issue, as the about at version 5, and CSS3
the language. In the web was taking off and first came into existence at the
meantime, a newer version of becoming mainstream, once beginning of the century. It’s
CSS had been created in 1998, the damage had been done only in the last couple of years
and Netscape and Internet there was no easy way to that either technology has
Explorer version 6 had both backtrack. The net started to be properly
partially implemented CSS2. consequence of these implemented by browser
As well as the slow unfortunate events was vendors however, and the
implementation, from the that web designers had to combination of HTML version
start there were issues with start using workarounds to 5, CSS version 3 and JavaScript
the way the CSS specification code different style rules is often referred to collectively
had been written, leaving for different browsers, as HTML5 (erroneously it must
room for individual taking into account the be said!).
interpretation over what each bugs, quirks and differences As mobile devices have
part of the specification in rendering. become increasingly popular,
meant. This resulted in
Internet Explorer rendering
styles in one way, while the
“It’s only in the last few years that
other popular browser of the technology has been implemented
day, Netscape, rendered properly by browser vendors”
differently. As well as
37
 Introducing CSS An introduction to CSS

driving the desire for access Differences of ratified by the W3C. To ensure
to the web on the move, opinion compliance, vendors prefix
and across different screen Despite the recent strides these properties with a name
sizes, so the browser vendors towards adoption of CSS3, and that represents the browser’s
have been coaxed into the retirement of Internet maker. So, for example, to
accelerating their Explorer 6 by Microsoft, there create a CSS drop shadow we
implementations. This has continues to be quite a lot of currently have to have a rule
provided quite a relief to web differences between the way that specifies properties for
designers who only a year ago different browsers render CSS. box-shadow, -webkit-box-
were still implementing The most common issue shadow, -moz-drop-shadow,
workarounds for Internet today is where browsers ms-drop-shadow and
Explorer version 6 – a implement CSS properties o-drop-shadow. The first
decade-old piece of software! that haven’t yet been fully property is the actual CSS3

38
 An introduction to CSS Introducing CSS

<above> CSS allows websites to be tailored according the device upon which the website is accessed

specification property, web designers the new browser vendors. And as for
while the others are the opportunities CSS3 the future? Don’t expect to
early implementations by presents are slightly offset by see it any time soon, but CSS4
Safari and Chrome, Firefox, the continuing need to has been in development
Internet Explorer, and provide browser-specific since 2009. It’s still in early
Opera respectively. properties for most of the draft of course, but promises
Vendor prefixes are the modern properties. all manner of exciting new
subject of much debate styling options and properties.
currently as they’ve become What does the If we’re all still designing
more prevalent in recent future hold? websites in another ten years,
years as vendors rush to As you’ve read, CSS3 is still no doubt we’ll be discussing
outdo each other in their being implemented and matching selectors and
CSS implementations. For defined by both the W3C and reference combinators!
39
 Introducing CSS Styling with CSS

Styling with CSS

Understand the essential properties and values needed to style pages

background
Background is a property that will
determine how the background of an
element is styled. It has many associ-
ated properties eg background-color,
background-size.

border
The border property, as its name The background property
allows for background
suggest adds a border to the images which can enhance
associated element. Borders can be any design
added to all sides of an element or a
specific element such as the top, right,
left or bottom. There are several styles another element. Float has two main 2. The default option is normal and is
eg solid, dotted etc and the option to values left and right. Selecting left often the preferred choice.
chose a width. will position an element to the left.
Conversely, if assigned the right value, margin
box-shadow it will be positioned to the right.
Margins help create space between
The box-shadow property allows content. When adding a 5px margin to
for the implementation of multiple height an element it will create a 5px space all
drop shadows on box elements, ie around the element. Margins can be
div elements. It can specify values for This is as simple as the name separated so it is only applied to one
color, size, blur and offset. Text-shadow suggests. The height of an element is part of an element eg margin-top.
uses the same principles but applies determined by the height property.
the drop shadows to text. This can be a fixed height using pixels max-height
or a flexible height using percentages.
font-family The max-height property ensures that
letter-spacing an element does not exceed a specific
Fonts can be styled individually or height. It is often used in conjunction
as part of a family. The font-family To improve legibility and add flexibility with max-width, which ensures that
property is used should the first to web typography the letter-spacing an element doesn’t exceed a specific
choice font not be available then a property can be used. The value eg width. Both properties are typically
replacement option can be called 2px will add the stated space between
upon. These will be set out in the each letter of the styled text.
value. Eg verdana has a font family that
includes a bold and light option. line-height “Margins help
float Line height is the space between the create space
lines in text. The line-height property
The float property is used to position can use a fixed value with pixels or between content”
an element specifically within alternatively use a number value eg

40
 Styling with CSS Introducing CSS

is contained within. A fourth value,

justify, will spread text across the full
width of its containing element.

text-decoration
The text-decoration property specifies
what can be added to text. You can
add under- and overlines and a strike
through to your text.

value
The value element is associated
<above> The width and height property determine how every element on a page is sized with a property and selector. It will
used in responsive designs to ensure specifically determine how a property
position is styled. For example, if background-
that a design display as intended.
colour is the property the value
There are four values for the position will be the appropriate code colour
overflow property, the default is static. The eg #CCCCCC.
others are absolute, relative and fixed.
If an element has content that extends
beyond its containing element, for width
property
example, an image, the overflow
property can be called into action. If The width property is typically used in
There are hundreds of properties combination with the height property.
the hidden value is used the image in CSS, these are accompanied by
outside of the element will be hidden. A fixed width can be determined by
a selector and value. They tell the using pixels. To makes sure an element
Using scroll will add scroll bars so all browser how a certain part of the
the image can be seen. is full width of an element or page its
related HTML element will be styled. can be set to 100%.
padding selector z-index
Padding is very similar to margin, A CSS selector is the identifier that is
except the padding is applied to the The z-index property determines
link to HTML. The selector will refer to a the stack order of an element. An
inside of an element. If text is to close HTML element eg h1, h2. The browser
to the top of an element adding element with greater stack order, for
will then read the style information example 100, is always on top of an
padding will give it breathing space. (property and value) in the selector element with a lower stack order.
and apply it to the HTML element. Note that the z-index property only
works with positioned elements such
syntax as position:fixed;.

To understand CSS you need to

understand the syntax that is used. CSS
is made up of three parts the selector,
property and value. Typically written
as follows:
001 selector {property: value}

text-align
<above> The spacing between lines of text can
Text can be aligned to the left, right
be adjusted with line-height making the text or centre of the element the text <above> Adding shadows to text is simple using
more legible the text-shadow property

41
 Introducing CSS Centre your page

Centre your page

Wrap your page’s content in div tags to give control over the way it’s displayed

When you’re designing a webpage, you have to remember that a browser window can be almost any
shape and size. Desktop computers have a wide range of screen sizes, and mobile phone and tablets
are used to browse the web too. Your nicely designed page could be ruined if you simply allow it to
flow into the browser window regardless of the latter’s size or shape. By creating a wrapper you can
specify the width of the webpage content and its position in the browser window. It is an essential part
of the design process.
’Wrapper’ is a commonly used name for a piece of CSS code that is used with a div tag to
size and position the content of a webpage. A div tag is placed at the start of the page content just
after the opening body tag and again just before the closing body tag, thereby enclosing or wrapping
the content.
In CSS we can define how everything between the div tags is displayed. It can be centred on the
page, positioned a certain number of pixels from the left, a border can be added, its width can be fixed
or variable and so on. It is an essential component of any webpage and it’s quite straightforward.

Set the width Set the colour

How wide do you You can choose
want the page whatever colour
content to be? You you want for the
can either set a background. If
width in pixels, as you choose a dark
shown here, or use colour, though,
a percentage. 100% you’ll need to
would be the full change the text to
browser width white – and that’s
for another tutorial!

Set the
margins
Without margins
Borders or the page content
borderless? is displayed on
This page has the left. You can
borders, but they manually set them
are optional and by entering the
leaving out these number of pixels,
parameters will but a good option is
remove them. to set them to auto
It’s your choice. to centre the page
Padding, just
above, is used for
extra spacing, but
it isn’t needed

42
 Centre your page Introducing CSS

The CSS link Flexible page width is set to solid. Alternatives include
dotted, dashed, double and ridge.

01 CSS definitions can be stored in

a webpage or a separate file. If it
is in a separate file then any webpage
04 Set the page width using
absolute dimensions and
it may not fit on small screens like
001 div#wrapper {
002 width: 80%;
003 margin-left: auto;
can access it and it saves having to mobile phones or tablets, or it may 004 margin-right: auto;
add it to each new page. Add a link in look tiny on computers with large 005 border: 2px;
the HTML <head> tag to a file called monitors. An alternative is to set it 006 border-style: solid;
style.css. to a percentage of the browser 007 border-color: #006600;
width instead. 008 }
001 <link rel="stylesheet" type="text/
css" href="style.css" /> 001 div#wrapper {
002 width: 80%;
003 }
Add div tags

02 We want to specify the size

and position of the webpage
content, so we must place div tags at
the start and end of the page, thereby
enclosing all the content. The CSS
definition will be called ’wrapper’ and
we refer to it with id=”wrapper”:

001 <div id="wrapper">

Set the margins
Browser compatibility
05 We have specified the width
for the page content, but not
its position. With margin-left you can 07 There are several web browsers,
but unfortunately they all
specify the number of pixels from the display webpages in slightly different
left the content is to be displayed. An ways. Compatibility between browsers
alternative is to set both margins to is helped by adding this as the first line
auto to centre it in the browser. of the HTML file:
Create the CSS 001 <!DOCTYPE html PUBLIC “-//W3C//DTD
001 div#wrapper {
XHTML 1.0 Transitional//EN” “http://

03 We don’t yet have any CSS, so 002 width: 80%;

www.w3.org/TR/xhtml1/DTD/xhtml1-
create a new file called style. 003 margin-left: auto;
transitional.dtd”>
004 margin-right: auto;
css and add a div ID called #wrapper.
005 }
Set the width to 750 pixels. This value Find a copy-and-pastable version at
determines the width of the webpage http://bit.ly/IxdBQ.
content because everything is Add the borders
contained within the two div tags.

001 div#wrapper {
002 width: 750px;
06 Your page design may look
good if there is a border, and
this specifies one that is two pixels
003 }
wide. The border colour is set to dark
green (006600) and the border style

“You can specify the width of the

webpage content and its position”
43
 Introducing CSS Define body text and heading styles

Define body and heading styles

Create CSS rules for displaying the text on the page

Every webpage contains text and it is frequently the main content. Therefore you should ensure that
it looks good by choosing the fonts and styles to fit your design and the image you want to portray.
There might only be a small amount of text if the main content focuses on images, but even so, there
will be titles, links and captions. There’s no getting away from text on webpages.
You can add CSS code to a webpage to define how the text is displayed, but placing it in a
separate .css file and linking to it in the page’s head section means that the same text styles are
applied everywhere in your site. HTML font tags have been replaced by CSS font-family definitions, old-
fashioned <i> and <b> tags are no longer needed, and font-style and font-weight enable you to set the
styles to normal, italic, bold and so on. It might seem like extra work for one webpage, but when you
are creating a site with 100 pages it is a considerable time-saver.
Writing the CSS rules for the text is simple and you can create a class that defines a text style
and then use it over and over again in the page. We only look at headings and body text here, but
expanding the CSS yourself should not present any problems.

Heading Style other

style headings
This is an h1 Here you can see
heading, the the style settings
largest that is for the h3 tag and
available, so we the heading in use
have made it big on the page. The
and bold. The font font-family, font-
has been set to size, font-weight
Arial and the size is and margin-bottom
set to 30 pixels have all been set

Italic text Keep it simple

The p tag has Although there
already been set, are lots of CSS
so to display italic parameters that
text on the page you can set, you
we just need to don’t always need
create an italictext to set them all.
class and set the This is a minimal
font-style to italic. definition for the
All other settings text that sets only
are inherited what is needed

44
 Define body text and heading styles Introducing CSS

Customise your text

Size and style

03 The text may be fine at its

default size, but if it isn’t, you
can set the size in pixels. The size
you need depends on the font, so
experiment with 10px to 16px. The
font-style can be normal or italic and
the font-weight can be normal, bold,
Pick a font bolder or lighter.
Use different classes
01 Using CSS you can set the
font for all the text enclosed
001
002
p {
font-family: Verdana, sans-serif;
by <p></p> tags on all webpages
with this in your style.css file. Link
003
004
005
font-size: 14px;
font style: normal;
font-weight: normal;
05 Step 4 created three CSS
classes for the <p> tag. When
you want text to appear in one of
to it in the page header using <link
rel=”stylesheet” type=”text/css” 006 } these styles, you add a class parameter
href=”mystyle.css” />. This bit of code to the <p> tag. The style is used for
sets the font family to Verdana: all the following text until you either
change it with another tag or end it
001 p { with </p>.
002 font-family: Verdana;
003 } 001 <p class="normal">This is normal
text</p>
Define a class 002 <p class="boldtext">This is bold
Select a family text</p>

02 When a font name contains

spaces, you must put quotes
04 There may be paragraphs
that you want to make bold
or italic, so here are three classes that
003 <p class="italtictext">This is
italic text</a>

around it or the CSS won’t work. It is define three styles of text. It varies the
also a good idea to offer an alternative font-style and font-weight, but you
Define the headings
font in case the visitor to your site could also create small text, large text,
doesn’t have the one you specified.
Choose a family such as serif (fancy) or
styles for panels, captions for images
and so on.
06 In addition to body text, there
are also headings using h1 to
h6 tags. You don’t need to define all
sans-serif (plain). of them, just the ones you use. Do
001 p.normal {
002 font-family: Verdana, sans-serif;
it exactly like the p tag and set the
001 p {
002 font-family: Verdana, sans-serif; 003 font-size: 14px; font, size, style and so on. We’ve also
003 } 004 font-style: normal; reduced the bottom margin below
005 font-weight: normal; the header.
006 }
007 p.italictext { 001 h1 {
008 font-family: Verdana, sans-serif; 002 font-family: Arial;
“You can create a 009
010
font-size: 14px;
font-style: italic;
003
004
font-size: 30px;
font-weight: bold;
class that defines a 011
012
font-weight: normal;
}
005
006 }
margin-bottom:-10px;

text style and then 013

014
p.boldtext {
font-family: Verdana, sans-serif;
007
008
h2 {
font-family: Arial;
use it over and 015 font-size: 14px; 009
010
font-size: 20px;
font-weight: bold;
over again” 016
017
font-style:normal;
font-weight: bold; 011 margin-bottom:-10px;
018 } 012 }

45
 Introducing CSS Style your lists to stand out

Style your lists to stand out

Standard lists tend to be a bit boring, so spice them up with some CSS styling

Although some web pages may require a lot of text, it is generally best to keep it brief and to the point.
People scan a page for interesting content and then move on if they don’t spot anything straight away.
Lists are therefore very useful for drawing the visitor’s attention to some content and for presenting it in
a way that can be digested quickly.
The HTML <ol> and <ul> tags are used to create ordered (numbered) and unordered (bullet) lists,
which we explored on p22. They are useful if unexciting, but with CSS list-style-type you can change the
bullet to different shapes like a circle or square. It is even possible to replace it with an image specially
created to fit in with your site’s design and colour scheme using list-style-image. You can change the
font used to display lists so they match the body text. If you have used HTML lists you will have noticed
that they are indented, but with CSS you have fine control over the positioning using padding and
margins. You can tighten up the layout or space it out – it’s your choice.

Customise
your lists
Create a class

01 You should have a separate file

called style.css for CSS code, so
load it and create a new class called
liststyle like this:

001 .liststyle {
002 list-style-type: square;
003 }

It contains just one item called

list-style-type, but there are over 20
different possible values. These include
circle, square, lower-roman, disc,
decimal, upper-latin, and others. Try
each one to see what they are like.

46
 Style your lists to stand out Introducing CSS

tutorial and we can simply add ul to Add a border

the p code so it uses the same font
and size as the body text.

001 p. ul{
07 As we’ve discussed, each HTML
element can have a border. We
haven’t specified one so far, so one
002 font-family: Verdana;
hasn’t been drawn. However, we can
Boxed lists 003
004
padding: 10px;
font-size: 14px; easily define one by setting border-
005 } width to the number of pixels and
02 CSS displays each element
of web page content in a
series of boxes. This means that a list Choose a background
border style to dotted, solid, dashed,
double, groove, ridge, inset or outset.
defined by a ul or ol tag is separated 001 border-style: dotted;
from other elements on the page by
a margin. Inside the margin there may
be a border, but it is optional and not
05 Many HTML elements can
have a background colour and
it is applied to both the content and
002
003 }
border-width: 2px;

always used. Between the border and padding areas, but not the border
the content is padding or space. or margin. A background-color of Colour the border
#ffd0d0 has been set, but if you are
not familiar with this notation, you can
use common names like red, yellow,
08 Most parts of the list can be
coloured and this includes the
border. The border-color has been
blue and so on. This is less flexible,
set to #800000, which is a medium-
though, hex codes can be easily found
dark red. It’s a good idea to specify
on Photoshop or online.
the colour even if it’s black, because
001 background-color: #ffd0d0; } default settings for one web browser
might be different to the defaults in
Position the list another. Better to be safe.
Inside vs outside
001 border-width: 2px;
03 With those boxes in mind, we
can position the list within
the space allocated to it on the page. 06 You’ll notice that the bullet
blobs are outside of the
002
003 }
border-color: #880000;

Padding and margin have been added background colour. This is their default
to the liststyle class and set to 10 and position, but it’s possible to change
0 pixels respectively. Experiment with this and make them appear in the
different values to see how they affect background area. In this step, list-style-
the position of the list. position is set to inside and this makes
the list look more attractive.
001 padding: 10px;
002 margin: 0px; 001 list-style-position: inside;
003 } 002 }
DIY bullets

“With CSS you

09 Blue squares for bullets? Yes, we
removed the standard bullets
by setting list-style-type to none at
have fine control the start of the CSS code. At the end
we have list-style-image:url(bullet.

Style the text over the list’s png), which tells the browser to use
an image called bullet.png that we
positioning created earlier in a paint program and
04 Notice in the last step that the
list text has a different font to using padding saved with the web page.
the body text. That’s because no style
is set for lists. We defined the font and and margins” 001 border-color: #880000;
002 list-style-image:url(bullet.png);
size for the body text in a previous 003 }

47
 Introducing CSS Turn lists into navigation bars

Turn lists into navigation bars

Every website needs some sort of navigation, so why not use CSS for it?

Website navigation is an important topic and it is something that you need to put some thought into as
you are designing your website. At one time we would have used button images created in a paint or
photo program and then used JavaScript to create a rollover effect when the mouse hovered over one.
But that’s yesterday’s technology and modern sites use CSS instead.
A CSS navigation bar looks like a regular unordered list in the HTML of the page, but using CSS we
can manipulate the list elements and turn them into the website’s navigation. Instead of the list running
down the page, the list elements can be displayed across it instead. We can style the links just like any
other text and create a custom look for the navigation bar. The result looks nothing like its original plain
HTML layout and it really shows off the power of CSS.
You can copy the code into your own web pages and it will work fine. All you need to do is to
change the link text to correspond to the pages or sections on your own site, and style the text to fit
in with the fonts and colours that you use. It is really quite straightforward once you see how it works
for yourself.

STRETCH IT TO FIT
In the finished screen shot the navigation
bar stretches across the full width of the
page. There are several ways to achieve this
and in this case we have simply chosen a
width for the list items that exactly, or near
enough, fit across the page. If you have
more navigation items you will need to
reduce the width or make the page wider.

48
 Turn lists into navigation bars Introducing CSS

Create a list breaks by using float. Setting the a to change the way that <a> links
list elements (#navbar li) to float left look in <li> items. Set the font size
causes them to be displayed one and weight, margin and padding, and
01 An unordered list (ul) is used to
provide links to other sections
of the website. It’s all standard HTML
after the other on the same line, like a
navigation bar.
so on.

001 #navbar li a {
and it’s exceedingly dull compared
001 #navbar li { 002 display: block;
to CSS. Try it and see. In the ul tag 003 width: 140px;
002 float: left;
though, we have added id=”navbar” 003 } 004 font-weight: bold;
and we’ll use it to change the way the 005 margin: 0px;
list is displayed. 006 font-size: 20px;
007 padding: 5px;
001 <ul id="navbar" 008 }
002 <li><a href="index.html">Home</a></li>
003 <li><a href="news.html">News</a></li>
004 <li><a href="walks.html">Walks</a></li>
005 <li><a href="contact.html">Contact</a></li>
006 <li><a href="about.html">About</a></li>
007 </ul>
Spread them out

04 All the links are bunched up

together and step 3 doesn’t
look much like a navigation bar. What
we need to do is to make each link a
fixed width. We define the a link within Colour and decoration
li of navbar (#navbar li a) as a block and

Make it plain
set its width to 140 pixels.

001 #navbar li a {
06 Three items have been added
and immediately noticeable is
the colour. The text colour has been
02 In the last tutorial we saw how
to style lists and the bullets can
be removed by setting list-style-type
002 display: block;
003 width: 140px;
004 }
set to dark green and the background
has been set to light green with
color and background-color. Finally,
to none. The padding and margin can
text-decoration:none removes the
also be set to zero. This produces a
underline from the links.
very plain list of links at the top of the
page that’s not very exciting. 001 #navbar li a {
002 display: block;
001 #navbar { 003 width: 140px;
002 list-style-type: none; 004 font-weight: bold;
003 margin: 0px; 005 margin: 0px;
004 padding: 0px; Style the text 006 font-size: 20px;
005 } 007 padding: 5px;

05 Remember how we styled

some text back on page 44?
We can do the same here. Add the
008 text-decoration: none;
009 background-color: #99cc66;
010 color: #004000;
formatting information to #navbar li 011 }

“The result looks nothing like its plain

Floating elements HTML layout and it shows off the
03 Normally each list item is
displayed on a separate line,
but it is possible to remove the line
power of CSS”
49
 Introducing CSS Format images using CSS

Format images using CSS

Use CSS to gain precise control over the display of images on your website

A webpage would be pretty dull without any images on it! Some images may appear on every page,
such as a graphical website logo or heading, while others may be specific to each page. You will need
to create the images for your site before you start. Remember to use them sparingly and keep the file
size as small as possible to ensure that webpages load quickly for visitors.
Images are inserted into webpages using the HTML <img> tag and there are attributes to position
it left and right, set the size and so on, but those are dated. If you use CSS to format images instead,
there are many more options available to you. For example, you can add a border, set its thickness
and its colour. The spacing around each side of the image can be individually adjusted, text can be
wrapped around it on the left or the right and so on. The latest web browsers that are up to speed
with CSS version 3 can display advanced image attributes like drop shadows that give the page a
3D look.
Forget the old HTML way of doing things and take advantage of CSS and its powerful features. Our
tutorial will guide you through the process.
 Format images using CSS Introducing CSS

A guide to CSS images

Create the images Build a class Define the margins

01 Load your paint program or

photo editor and create the
images for your webpage. There may
03 Adding img.picright to the CSS
file adds the class we need
to format the image. The float:right;
05 You may find that the text runs
right up to the image, which
might not look very attractive. It can
be a graphical logo, as shown here, causes the image to be displayed on be prevented by setting margins.
and one or more other images to the right – float:left; would display it We’ve exaggerated the effect with
be displayed in the page. It is usually on the left. In both cases the following a 30-pixel margin; 10 is usually fine.
best to save photos as JPEGs and text will wrap around the image on Margin-top, left, bottom and right can
illustrations as 256-colour PNGs. the left or right: be set separately if necessary.

001 img.picright { 001 margin: 30px;

Insert the images

02 Images are inserted into the

HTML of the page using
the img tag, with src pointing to
the filename. Add an alt attribute
as an image title: it’s useful for
search engines. You want to make
sure that your image sits in a
complimentary place on the layout,
this includes images on the page. Add
class=”picright” to the img tag:

001 <p><img class="picright"

src="photo.jpg" alt="Grass and tress"> Size the images
Add some borders
06 If you don’t specify a size
for the images, they will

“If you use CSS to 04 As with many other HTML

elements, in CSS images can
have borders. The border-style can be
be displayed at whatever size they
are. In some situations, though, you
format images, solid, dotted, dashed and so on, the
might want to display an image at a
different size, such as when showing
there are many border-width can be specified in pixels
and the colour selected with border-
thumbnails. Set the width and height
to the number of pixels to make the
more options color. Use colour names or rgb(x,y,z) image that size.
values where x,y,z are numbers 0-255.
available to you” 001 width: 350px;
001 img.picright { 002 height: 200px;

51
 Introducing CSS Add a background image

Add a background image

A great image can really enhance your page design

The fewer images your website has, the faster it will load, but plain colours for the background and lots
of text might be a turn off for your visitors. A few key images can greatly enhance the look of a website
and a background image has the advantage of being used on every web page. This means that the
browser only has to download it once and then it caches it ready to be used on the next page. The end
result is a great page design with no time wasted downloading large images.
In this tutorial we will start with a plain coloured background and then show how to add an image.
It can be a large one that fills the browser or a small one that can be stretched to fill or tiled across or
down the screen. Tiled images are great for reducing the size of a page because they are so small (for
more information on how to create your own, check out page 160). If you use a large image you must
bear in mind the size of the file and try to minimise it without affecting the quality.
Create an image The background colour
Load your photo editor or paint program. Create The background colour of the page is set using
an image or find some clipart that you can use as CSS definitions in the body tag. It is set to the
is or easily modify. Save it as a compressed JPEG or same colour as the background for the image so
256-colour PNG the two blend in like one

Background
Set the repeat wrapper colour
In this case we want a single image If no background colour
that is not repeated in either the is set for the wrapper, the
horizontal or vertical directions, background colour of the page
so background-repeat is set to will show through. It’s up to you
no-repeat. Tiled images repeat in whether you set a #wrapper
both directions background colour

52
 Add a background image Introducing CSS

Impressive backgrounds

A background wrapper
Modify the wrapper

03 As well as inserting an
acceptable number of
05 Here, the background is solid,
but the text is on an image.
Anything can have a background,
hyperlinks, you can also flag up certain so we can move background-
content. Place words and rogue image:url(‘back2.jpg’) from the body
websites, IP addresses and emails in tag to the #wrapper definition. We
Pick a colour this box and any posts containing chose a paler picture!
such content will immediately be

01 The simplest type of placed in the moderation queue 001 div#wrapper {

background is a plain colour. where you can assess whether or 002 background-image:url('back2.jpg');
003 width: 750px;
This is achieved by placing a not to allow it to be published on
004 padding: 0px;
background-color style in the body your site. If your banned words form 005 border: 2px;
tag stored in the CSS file, style.css. Use part of larger words, they too will be 006 border-style: solid;
words like red, yellow, blue, green or picked up. 007 border-color: #006600;
the #RRGGBB hex value. 008 margin-left: auto;
001 div#wrapper { 009 margin-right: auto;
002 width: 750px; 010 }
003 padding: 0px;
004 margin-left: auto;
005 margin-right: auto;
006 }

Change the text

04 We can change the text colour.

We created some CSS code to
set the font and size in an earlier tutorial.
Now we can add color:white to the p
tag definition. This image has both dark Resize the background
Use a photo and light areas, so it’s not perfect.

02 It is easy to use a photo for the

background and we just add
001 p, ul {
002 font-family: Verdana;
06 What size should the
background image be? The
web page should load quickly so
a line to the body CSS that links to it. 003 font-size: 14px; visitors aren’t waiting around, so it is
Add background-image:url(‘back1. 004 color: white; best to create either a small image or
jpg’), replacing the filename with 005 } use lots of JPEG compression.
whatever your file is called.

001
002
body {
background-color: rgb (128,128, 128); “Tiled images are great for reducing
003
004
background-image:url('back1.jpg');
} the size of a page”
005

53
 Introducing CSS Add a background image

Horizontal gradients
Use smaller images See through wrapper

07 If you look down the left side

it is clear that the web browser 09 By removing the background
colour in the #wrapper, the
11 The gradient background
image was loaded back into the
photo editor and rotated through 90
has repeated the image down the background shows through. You can degrees to make a horizontal gradient.
page because it didn’t fill the full see that the background image has Notice how small it is, both in physical
height. It has repeated it across the tiled nicely across the screen and each dimensions and in file size. The image
page too. It doesn’t look too bad on image fits seamlessly with the next. does not need to fill the whole screen
the left, but the right edge shows However, it is ugly where it has been because it is going to be tiled. This
all the joins. Sometimes you can get tiled vertically. reduces the file size.
away with repeating images and
sometimes not.

Tile it across
Create a gradient
10 Now this is far better. What
we’ve done here is to add:
Tile it down
08 We have created a small image
that has a simple gradient that
runs from dark green at the top to 001 background-repeat:repeat-x;
12 The image has been tiled down
the screen, but not across it.
white at the bottom. This will be used to the CSS in the body definition. This This is because of the background-
as the background for the page and instructs the browser to repeat the repeat:repeat-y; instruction in the CSS
even when exported at a reasonable image across the page only (the x code for the body tag. It is possible to
quality it doesn’t create a very big direction). The background colour is repeat either in the x (horizontal) or y
file. Tiled backgrounds are great for set to white, which is the final gradient (vertical) directions. If you don’t specify
creating fast-loading web pages. colour so it blends in. then it is tiled in both directions.

54
 Add a background image Introducing CSS

Cover the background

Resize vs stretch
Fixed vs scrolling
17 Specify a size for the
background and someone with

15 This image is from Background

Labs. It is a small image will not
a laptop may find part of the image is
hidden. Someone with a large monitor

13 The background image is tiled

and the #wrapper background
is white. The main difference, though,
fill the browser window and it is not
suitable for tiling across or down the
page. You have two choices and you
may have a browser width of 1500
pixels and then the background will
be tiled. Use background-size:cover;
is the background-attachment in the can either resize it in the photo editor and the image is stretched to fit.
body CSS definition. If background- or resize it within the page using CSS.
attachment is set to fixed, the
background stays still when the
page scrolls. Set it to scroll and it scrolls
with the page. You have to try it to see
the difference.

Background positioning

Resize the background

18 One final bit of background-
related CSS is the positioning.
In the body code is background-
position:center; and this centres the

Grab a background 16 The CSS code for the body

tag has been modified and
background-size:1280px 1024px; has
background image in the browser
window. Other values include left
top, left center, right top, right center,
been added. This is a CSS 3 feature that center bottom and so on, or just use
14 If you are not very good at
creating your own backgrounds
in a drawing or paint program you
is only supported by the latest versions
of web browsers. This one has ignored
pixels like 50px.

it! In IE9, Chrome and Firefox it will 001 body {

will find lots of sources of background
stretch the image to the size specified. 002 background-color: #ffffff;
images on the web. Background Labs 003 background-image:url('back.jpg');
(www.backgroundlabs.com) and 001 body { 004 background-size: cover;
GRSites (www.grsites.com/archive/ 002 background-color: #ffffff; 005 background-repeat: no-repeat;
textures/) have lots of images and a 003 background-image:url('back7.jpg'); 006 background-attachment: fixed;
large number of them are textures and 004 background-size: 1280px 1024px; 007 background-position: center;
images for tiling on the page. 005 } 008 }

55
 Introducing CSS Style a two-column layout

Style a two-column layout

Use the HTML and CSS skills you’ve learnt so far to
create and style a two-column page layout
Using HTML and CSS to create and style a two-column website layout – one of the most common
layouts – is surprisingly straightforward and very flexible. Almost all websites today use some kind of
column layout with at least a sidebar and main content areas. So it’s one of the basic skills to have when
designing websites, and once you understand these fundamentals you can move on to bigger and
more elaborate designs.
In this tutorial, then, we are going to open up our favourite text editor (we will be using Adobe
Dreamweaver, but the humble NotePad or TextEdit is fine) and learn how we can shorten, lengthen and
swap any column we need just by using CSS. Then we will discuss CSS floats, why we use percentages
and a few other tips along the way.

The header Main content The sidebar

We’ll float the header left and The main content will be floated left as The sidebar area is floated right
give it a 100% width to make we want this to be positioned far left of and again we use margins to push
sure it spans the full width of our page and then some margins will it away at the top, bottom, left and
our wrapper give us some white space right sides

56
 Style a two-column layout Introducing CSS

Linking the CSS

02 Now that we have our new

index.html and styles.css files,
we will need to link them up together
within the <head></head> tags of
our HTML. So open up the index.html
file and just underneath the closing </
title> tag, type in your link to your CSS.

001 <!DOCTYPE HTML>

002 <html>
003 <head>
004 <meta charset=”utf-8”>
Getting started 005 <title>3 column layout</title>
006 <link rel=”stylesheet” hreg=”style.

01 First thing we need to do is create new ‘index.html’ and ‘styles.css’ files

and place them in the same directory. It is considered best practice to also
place all your CSS files within their own folder called ‘css’ as some use separate
css”>
007 </head>
008 <body>
CSS files for certain things such as Internet Explorer-specific styles. However, we 009 </body>
will keep it simple here and leave them sitting in the same location. 010 </html>

The wrapper Header Main content

03 With the ‘index.html’ file still

open, lets add in a ‘wrapper’
div that will be used to centre all our
04 Firstly, we’ll add the header. We
are going to give it an ID (‘<div
id=’ called ‘header’) and place this just
05 So next up we need to add a
main content section that will
be positioned on the left side of our
content on the screen later on using underneath our wrapper div. Then we layout (see page 56). Like we did in the
CSS. What we have done here is use have added in a title of our section last step we have created an ID tag
an ID (<div id=”) instead of using a within an ‘<h1>’ header tag so we can and called ‘main_content’, to clarify it
class because this is going to be a know what’s what. from the header class, and added it
main part of our page’s structure and in just underneath our ‘header’. And
will only be used the once throughout 001 <body> again so we can see what section is
our code. 002 <div id=”wrapper”> what, we have added in a title using
003 <div id=”header”>
the ‘<h1>’ tag.
004 <h1>header</h1>
001 <body>
005 </div><!-- END header -->
002 <div id="wrapper"> 001 <div id="main_content">
006 </div><!-- END wrapper -->
003 </div> 002 <h1>main content</h1>
007 </div>
004 </body> 003 </div><!-- END content -->
008 </body>
004

Sidebar section The footer

06 The sidebar is next and this is

the area that will be positioned
over to the right and would normally
07 Now the footer speaks for itself and will be our last HTML section we
will be adding. So again let’s give it an ID name of ‘footer’ and add it in
underneath the closing ‘main_content’ div. Then again place in a header tag
be used for extra navigation links or a using a ‘<h3>’. You will also notice we have added in an HTML comment to every
search field – things like that. So again end div tag (</div>) to give us a clear indication of where each section ends. This
we will use an ID called ‘sidebar’ and will help you if your HTML mark-up gets very busy.
add it just under the ‘main_content’
closing div ‘</div>’. 001 <div id=”footer”>
002 <h3>footer</h3>
001 <div id=”sidebar”> 003 </div><!--END footer-->
002 <h2>sidebar</h2> 004 </div><!-- END wrapper-->
003 </div><!-- END sidebar --> 005

57
 Introducing CSS Style a two-column layout

CSS reset

08 Now open up your ‘styles.

css’ file and what we are
going to do first is add what is called
a ‘reset’. The reset uses the universal
selector and this just tells all browsers Wrapper styles
(including IE) to clear all default styles,
such as padding, margins, line-height
etc. Doing this will give you a clean 09 Now the reason for our wrapper is to ‘wrap’ everything within a
containing section (element) so we can centre it within the viewpoint
of our screen. So here we have used margin to zero out the top and bottom
slate to work from.
margins and allow CSS to automatically calculate the left and right space based
001 /* reset */ on our width. Our width will be 960px because that aligns up nicely with a screen
002 resolution of 1080 x 760px (lowest common denominator).
003 * {
004 padding: 0; 001 #wrapper {
005 margin: 0; 002 width: 960px;
006 003 margin: 0 auto;
007 } 004 }

The header

10 Now, for the header section we are going to float it left and give it a width
of 100%, which will guarantee our header spans the whole width of our
‘#wrapper’. Then we push the header down 10px using margin. Here we have
used what is called shorthand CSS, which enables us to only pick the top margin.
Now give the background a colour and then 100px height. The sidebar styles
001 #header {
002
003
float: left;
background: #f1f1f1;
12 The sidebar will be positioned
to the right-hand side and
this is at most expected by the user/
004 margin: 10px 0 0 0;
005 width: 100%; visitor. So it makes sense to float to
006 height: 100px; right. And then use margins again to
007 } give us some white space. Our sidebar
background will be a darker grey than
Main content styles the rest and it will be a fixed width of
324px, which should give us plenty of

11 Now to add some style. First thing is to float it left. Then give it an off-
white background colour and then by using margins we can give it some
breathing space. We then specify its width and height taking into consideration
room for any inner content. Then we
give it the same height as the main
content section.
the overall width of our wrapper so we have enough room for our sidebar.
001 #sidebar {
001 #main_content { 002 float: right;
002 float: left; 003 margin: 10px 5px 5px 6px;
003 background: #f0f0f0; 004 background: #ccc;
004 margin: 10px 5px 10px 0; 005 width: 324px;
005 width: 620px; 006 height: 630px;
006 height: 630px; } 007 }

58
 Style a two-column layout Introducing CSS

The footer styles The headers

13 The footer styles should be fairly straightforward now. However, we have

a new property to look at, which is the ‘clear:’ property. Setting this to
‘both’ will make all floated elements pump up over the footer allowing our
14 If you view your layout in a
browser you will see we have
two-column layout with a sidebar and
footer to sit where it should be. Then we float the footer to the left and give it main content area. The only thing we
some dimensions. need to do now is push the headers
of each section away from the edges.
001 #footer { We can easily achieve this by using
002 clear: both; padding on all header tags.
003 float: left;
004 background: #ddd; 001 h1, h2, h3 {
005 width: 100%; 002 padding: 20px;
006 height: 100px; 003 }
007 }

Moving the sidebar

15 To get your sidebar to the

right, change the float value
of the ‘#main_content’ rule from
‘left’ to ‘right’. But what you want to
be conscious of is naming your divs.
Name your sidebar something like
‘<div id=”left_side”>’, something that is
clear to you.
Bigger two columns
001 #main_content {
002
003
004
float: right;
background: #f0f0f0;
margin: 10px 5px 10px 0;
16 As you can imagine, it’s very easy to make two larger content areas and not
have a sidebar at all – even though it still can be called ‘sidebar’. So in your
CSS, if we think about how much space we have to play with, which is 960px, and
005 width: 620px; divide that into two. However, then we have to compensate for our margins, so
006 height: 630px; it may take you some messing about to get the right spacing without pushing
007 } anything out.

Research alternatives

Be inspired
18 The two-column layout is in
no way the be all and end all.
Within this book you will find the tools
to create a three-columned layout,

17 Now you’ve finished your basic two-column layout, take at look at some
of your favourite websites and see which layout they employ. As shown
above, www.webdesignermag.co.uk uses a two-column layout too.
and be able to learn the skills your
acquire to customise any layout to
whatever you have chosen.

59
 Introducing CSS Create a header

Create a header
Learn how to create a clean, simple and effective header for your website
Having clean and clear header for your website can be the difference between a successful and user-
friendly experience and a cluttered and disorganised website that no one will want to visit again! You
don’t want a first-time user coming to your site and not know how your navigation works, or your
company branding (logo) hidden under a load of over-useless graphics or text – it doesn’t even really
matter how effective the rest of your layout is.
Yes, this sort of thing has been known to happen (more often that web designers would like to
admit!) and this is why so many designers are turning to a relatively new role called user experience
or ‘UX’. So in this tutorial we will take a look at how we can create a simple, clean and useful header for
your site.

The logo The background The hover state Separators

The logo can be either a graphic Creating a textured background will always The hover state is nicely styled and Adding a separator to our
or just text. You will also notice help stand your web page out from the crowd can be easily changed whenever navigation links doesn’t need to be
we have used the same font for – gone are the days of white backgrounds needed just by changing both the pure CSS as we did, but it is handy
both the logo and navigation with nothing but text and images background colour or font colour using the ‘border’ property

60
 Create a header Introducing CSS

Rinse and repeat

01 To get started with this tutorial,

you need to have set up your
layout; follow the tutorial on page 56
to get started!
Navigation list
Adding the logo
03 In this step we are going to add in the navigation. What we will use here
is a standard unordered list and each list item (<li>) will have a link to each
page using the ‘<a href=”’ attribute. Then we will give our unordered list a class
02 Now let’s place our logo within
the header section; you can
use your own or grab ours off the disc.
name of ‘navigation’.

001 <body>
We are going to use an ID again and
002 <div id=”wrapper”>
call it ‘logo’. Then we will wrap it within
003 <div id=”header”>
an anchor tag and link it to our page 004 <a href=”index.html”><div id=”logo”></div></a>
by adding in the index page within ‘<a 005 <ul class=”navigation”></li>
href=”index.html”>’ 006 <li><a href=””>home</a></li>
007 <li><a href=””>about</a></li>
001 <body> 008 <li><a href=””>blog</a></li>
002 <div id=”wrapper”> 009 <li><a href=””>portfolio</a></li>
003 <div id=”header”> 010 <li><a href=””>services</a></li>
004 <a href=”index.html”><div 011 <li><a href=””>contact</a></li>
id=”logo”></div></a> 012 </ul>
005 </div><!-- END header --> 013 </div><!-- END header --> </div>
006 </body> 014 </body>

Main content The CSS

04 We will now finish off our

HTML markup with some
content underneath our header.
05 Now open up your ‘styles.css’ file and at the top put in our simple reset.
The reset does exactly that – resets every element to zero, which will clear
all the default styles that most browsers put on. Then, using the body tag we can
Just underneath our closing header give our page a textured background using an image and leaving it to repeat
div ‘</div>’, let’s add in a div ID of across the page. And then we set the ‘font-family’ and ‘size’, here we have added
‘main_content’ and add in a welcome multiple fonts just incase our original chosen font isn’t supported.
title using header tags ‘<h2>’ and then
some dummy text using ‘<p>’ tags. 001 * {
002 padding: 0;
001 <div id=”main_content”> 003 margin: 0;
002 <h2>Hi, welcome to my 004 }
website</h2> 005
003 <p>It is a long established 006 body {
fact that a reader will judge a 007 background: url(‘imgs/bg.jpg’);
website by it’s layout. 008 font-family: Verdana, Geneva, sans-serif;
004 </div><!-- END main content 009 font-size: 12px;
--> 010 }

61
 Introducing CSS Create a header

The footer

07 Now for our header we are

going to float it left and give
it a 100% width so it spans the full
width of our wrapper div, then give it
a height of 250px. Let’s also add in a
The wrapper red border so we can see the header
more clearly and get a better visual

06 Now we are going to centre our header and content using the ‘wrapper’
div. What we are doing here is making sure we have no margin at the
top or bottom and automatically find the difference on the left and right that
idea of where we need our logo and
navigation, which we will add in over
the next few steps – then once happy
is in relation to our fixed width – which we set to 960px. 960 pixels is mostly we will remove it.
used because it fits nicely within the lowest common denominator of screen
resolutions (1080 x 760). 001 #header {
002 float: left;
001 #wrapper { 003 width: 100%;
002 margin: 0 auto; 004 height: 250px;
003 width: 960px; 005 border: 1px solid #f00;
004 } 006 }

The logo

08 Adding the logo is going to be

very simple. All we are going
to do is locate our logo that we have
inside our ‘imgs’ folder and then make
sure it doesn’t repeat. Then position it
on the left by floating it left and then
specify its height and width. A thing The navigation
to remember here is that if you don’t
specify its dimensions you will not see
it on the webpage. 09 Now let’s style our navigation. We do this by floating the whole element
right then positioning it 150px down and then pulling it over to the
right using a negative margin of ‘-50px’. Never be worried about using negative
001 #logo { margins as they work very well. Then we give the navigation a width of 600px.
002 background: url(‘imgs/sc_logo.
png’) no-repeat; 001 .navigation {
003 float: left; 002 float: right;
004 width: 200px; 003 margin: 150px -50px 0 0;
005 height: 200px; 004 width: 600px;
006 } 005 }

62
 Create a header Introducing CSS

Navigation anchors

11 To give each anchor tag some

padding, specify the text-
decoration as ‘none’ and then create
a separator using ‘border-right’. We
can remove the red border and add
in a hover state that will change the
background and text colour.
Navigation buttons 001 .navigation li a {
002 float: left;

10 At the moment our navigation looks nothing like a horizontal navigation

bar, more like a basic list of links. So let’s make it go horizontal by floating
each ‘<li>’ item left, which will push them all horizontal. Then we can take away
003
004
color: #333;
padding: 6px 20px;
005 text-decoration: none;
the default item bullets by specifying the ‘list-style’ being none. 006 border-right: 1px solid #333;
007 font-size: 16px; }
001 .navigation li { 008
002 float: left; 009 .navigation li a:hover {
003 list-style: none; 010 background-color: #333;
004 } 011 color: #fff; }

The content Find Google Fonts

12 Now let’s style our page content. While we’re here let’s get sneaky and add
some CSS3 properties to make the background have rounded corners by
using ‘border-radius: 6px’. We then style the paragraphs give it some padding to
13 Looking at our navigation, we
can clearly see that it doesn’t
look very attractive. So let’s spruce
both the paragraph text and header tags. it up somewhat by heading over to
Google Fonts www.google.com/
001 #main_content { fonts and type in ‘lobster’ within the
002 float: left; search field and you should see at
003 width: 900px;
least two choices of fonts. The one we
004 height: 400px;
want is the top style. Then click the
005 background: #fff;
006 border-radius: 6px; blue ‘add to collection’ button to the
007 } right and now it ready to use.
008 #main_content p, h2 {
009 line-height: 22px; Google font-family
010 margin-top: 10px;
011 padding: 20px;
012 }
15 Now let’s copy the ‘font-family’
property and then open up
the ‘styles.css’ file and locate the
Apply the Google font ‘.navigation li a’ rule (a CSS rule is
everything within the curly brackets)
14 The next step is to click the ‘use’ grey button located at the very bottom
right and scroll down the page slightly. What we have first is the ‘link’ tag
line that will link straight to the Google font servers and will always be available.
and paste the new ‘font-family’
underneath the ‘font-size’ property.
That way you can guarantee everyone will be able to see your chosen font. Copy
001 .navigation li a {
the link to your clipboard. Then paste it into your ‘index.html’ file just underneath 002 float: left;
our other CSS link within the ‘<head>’ tag. 003 color: #333;
004 padding: 6px 20px;
001 <!-- CSS --> 005 text-decoration: none;
002 <link rel=”stylesheet” href=”styles.css”> 006 border-right: 1px solid #333;
003 <link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ 007 font-size: 16px;
004 type=’text/css’> 008 font-family: ‘Lobster’, cursive;
005 </head> 009 }

63
 Introducing CSS Create a sidebar

Create a sidebar
Learn how to create a clean navigation system for your website
A sidebar is without doubt the area that is most often created by web designers, because it’s the most
needed. It can hold all sorts of content: things such as extra navigation links, a search field and perhaps
some small thumbnail images that relate to your website – it can be anything.
So in this tutorial we’re going to create a simple page layout that has a functional navigation and a
nice and simple sidebar that includes some content within. We’re going to include within the sidebar
a list of links for that extra navigation we mentioned and a search bar above and also some thumbnail
images at the bottom to act as though we have a Flickr section – very useful for any photography-
based sites. So open up your favourite text editor and let’s get started.

The width
A thin-looking sidebar
wouldn’t help anyone
unless you have no intention
of anything but small
thumbnail images!

The search field

The sidebar is a great place
to put your search field – and
you will see this on most
WordPress themes or other
blogging platforms

Navigation
Having a list of links for an
extra navigation will allow you
to add in links that you may
not have had the room to fit in
the main navigation menu

The thumbnails
We added this feature
because you see it all the time.
People who have a blog can
use a plugin that allows them
to feature their Flickr photo

64
 Create a sidebar Introducing CSS

Getting started Sidebar and search

01 Follow the first steps from the

Create a header tutorial on page
60. This will help you set up the basic
02 Let’s now add in our sidebar section. All we do here is create a div ID with
the name of ‘sidebar’ just underneath the closing header div ‘</div>’. Then,
using the code above, within our sidebar section let’s add in a search field that will
layout that we will be adding to in this just sit there and look pretty. After the <!-- END header --> tag add:
tutorial, to create the following:
001 <div id=”sidebar”>
002 <form id=”search form” action=”” method=”get”
003 <input id=”search_term” type=”text” value=”” placeholder=”search...”/>
004 <input class=”submit_button” type=”submit” value=”search”>
005 </form>
006 </div><!-- END sidebar -->

Sidebar navigation

03 Now what we need to do is

now is add in what will be
our sidebar navigation. This is the
exactly the same code as our top main
navigation so it’s just a case of copying
and pasting that into the sidebar. But
we will need to give it a different class
name, which can be ‘sidebar_list’. After
Sidebar images
the </form> tag add:

001 <ul class=”sidebar_list”>

04 We’ll now add some images to sit below our navigation list. We have
the same image here for both, set to the size of 100x100px. We’ve given
them a class name of ‘thumb’ so we can use CSS to position them better without
002 <li><a href=””>home</a>
003 <li><a href=””>about</a> relying on the ‘img’ tag. Also we’ve given this section a title with the ‘<h3>’ tag.
004 <li><a href=””>blog</a> After your navigation list add:
005 <li><a href=””>portfolio</a>
006 <li><a href=””>services</a> 001 <h3>My flickr images</h3>
007 <li><a href=””>contact</a> 002 <img src=”imgs/thumbnail.jpg” height=”100” width=”100” class=”thumb”>
008 </ul> 003 <img src=”imgs/thumbnail.jpg” height=”100” width=”100” class=”thumb”>

The CSS The wrapper

05 Open up your ‘styles.css’ file and at the top add in the universal selector
that will allow you to reset every element(<p>, <h1>, div, etc) to zero
margin and padding. Then using the ‘body’ tag we can set the background
06 So with our wrapper acting
as a container for all our page
content, we can center everything
colour to an off white ‘#f1f1f1’ and set our default font style and size. using a fixed width and margin. We’re
specifying 0 pixels on top and bottom,
001 * { with auto margins on the left and
002 padding: 0; right. This is an easy and most often
003 margin: 0; the best way of centring your page on
004 }
your screen.
005
006 body {
007 background: #f1f1f1; 001 #wrapper {
008 font-family: Verdana, Geneva, sans-serif; 002 margin: 0 auto;
009 font-size: 12px; 003 width: 960px;
010 } 004 }

65
 Introducing CSS Create a sidebar

Stick to the right The header & logo

If you spend some time surfing
the internet in some detail, the 07 We’re styling our header by giving it a 100% width with a height of 250px.
Adding the logo is also going to be very simple as we’ll only be using text
for now. We’ve given ours a drop shadow using the ‘text-shadow’ property.
chances are that you won’t see
too many websites with the
001 #header {
sidebar fixed over to the left
002 float: left;
side – it is far more likely to be 003 width: 100%;
over to the right. Even though it is 004 height: 250px;
relatively easy to swap it over, you 005 }
wouldn’t be doing anyone any 006 #logo h1{
favours if you thought you would 007 font-size: 35px;
be clever and original by plonking 008 float: left;
it on the left – internet users are 009 margin-top: 130px;
010 color: #dac91a;
now accustomed to seeing this
011 text-shadow: 1px 1px 3px #333;
section on the right-hand side of 012 }
their screens. If you’re struggling
to add content in the sidebar, then The navigation
you can add a short summary
about you or your business or
perhaps even a small YouTube
video about your site.
08 Now let’s style our navigation. We can do this by floating the whole element
right, positioning it 150px down and then pulling it over to the right using a
negative margin of ‘-50px’. Then we give the navigation a width of 600px. To bump
everything to a horizontal position we float all the ‘<li>’ left, then create our button
separator by adding a ‘border-right’ to the ‘navigation li a’ selector.

001 .navigation {
002 float: right;
003 margin: 150px -50px 0 0;
004 width: 600px;
005 }
006 .navigation li {
007 float: left;
008 list-style: none;
009 }
010 .navigation li a {
011 float: left;
012 color: #333;
013 padding: 6px 20px;
014 text-decoration: none;
015 border-right: 1px solid #333;
016 font-size: 16px;
017 }

Navigation hover state

09 At the moment our navigation looks nothing like a functional navigation

menu and it still needs a couple of things added. The hover state will be
the first thing we are going to add here, and then in the next step we will shoot
over to Google fonts to download the ‘lobster’ font and use that.

001 .navigation li a:hover {

002
003 background-color: #333;
004 color: #fff;
005 }

66
 Create a sidebar Introducing CSS

The sidebar

11 We want float the sidebar over

to the right and set a fixed
height and width. Then we can style
the ‘<h3>’ header tag and just push
that off the left side using padding.
Then give the text a dark grey colour
of ‘#333’.

Google fonts 001 #sidebar {

002 float: right;

10 Now let’s go to google.com/webfonts and search for ‘lobster’. Add it to

your collection and click ‘use’. Then add the ‘<link=’ code to the index.html
file just underneath your main CSS link. Then locate the ‘.navigation li a’ rule and
003
004
005
width: 300px;
height: 100%;
background: #fff; }
006 #sidebar h3 {
add in the ‘font-family’ property. Do the same for your ‘#logo’ rule.
007 padding-left: 20px;
008 color: #333; }
001 <!-- CSS -->
002 <link rel=”stylesheet” href=”styles.css”>
003 <link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ Sidebar list
004 type=’text/css’>
005
006
007
.navigation li a {
float: left;
12 Now we are going to style the
sidebar navigation list. We want
to push it away from the edges by
008 color: #333; using a 20px margin all round. Then
009 padding: 6px 20px; we add in a nice subtle dotted line
010 text-decoration: none;
using the ‘border-bottom’ property.
011 border-right: 1px solid #333;
012 font-size: 16px;
001 .sidebar_list {
013 font-family: ‘Lobster’, cursive;
002 margin: 20px; }
014 }
004 .sidebar_list li {
005 list-style: none;
006 margin: 10px;

“A sidebar can hold all sorts of content: 007

008
padding-bottom: 10px;
border-bottom: 1px dotted #ddd;
extra navigation links, a search field, even 009
010
}
.sidebar_list li a{
some small images” 011
012
text-decoration: none;
color: #333;
013 font-size: 13px;
014 }
The search field
Finishing off
13 In this step let’s style our search field. First of all we push it down slightly
and then make sure anything underneath it is 50px away. Then we slightly
push it away from the left edge using 20px. And lastly we give the input field
some padding to make it a bit more attractive. 14 No finish, we need to style our
thumbnail images. So we float
them left so they bump up to each
001 #search_form { other and then space them out by
002 using margin.
003 margin: 10px 0 50px 20px;
004 } 001 .thumb {
005 002 float: left;
006 #search_form input{ 003 margin: 22px;
007 004 border: 1px solid #fff;
008 padding: 5px; 005 box-shadow: 0px 4px 6px #999;
009 } 006 }

67
 Introducing CSS Add content to your website

Add content to your website

Learn how you can add content to the main area of your website
Adding content to your website is either done dynamically using a content management system (CMS)
or by hand. Either way, you are going to have to learn how it’s styled and what options you have. For
instance, will you have just text or text with images? How about a video that’s either embedded using
YouTube’s, or your own flash or HTML5 player?
Of course your choices should be dependent on what niche your website caters for and thus
knowing who will be visiting your website. So in this tutorial, we will add a few elements of content
where one will include a video (which you can grab whatever video you want, you don’t have to use
our one) and also some text and an image. So open up the index.html and styles.css files within your
text editor and let’s get cracking!

The top section The middle section The bottom section The width
It’s a good idea to add We have added a video The bottom section is again You will need to think
some text about your from YouTube here, but of used as a text-based section about the width of your
website so users can see course this could just as easily that describes the middle main content area(s) and
what you are all about be a image of your company section video plan ahead accordingly
before going any further or yourself!

68
 Add content to your website Introducing CSS

Main content header

02 Now in this step we are going to give our main content area a title that will
welcome everyone to the website. We do this very easily by adding in a
‘<h2>’ tag and a nice message within. What we will do is use CSS later to see what
we can do to make this look a little nicer.

001 <h2>Hi, Welcome to my website</h2>

Getting started

01 Now you have most of your

template built from the previous
tutorials in this book, you will be able
to add this into the main_content
id tag.

Welcome text
Adding an image
03 Now we need to add some
‘welcome’ text. This is normally
a good way of letting the user know 04 Now we can add in an image within our welcome text. The idea here is to
have a small thumbnail image of something that relates to the website. So
what your website is all about from place your image tag ‘<img src=’ above the welcome text just sitting underneath
the off. Here we will just wrap about the header. Then we will use CSS later to float it to the right.
three or four sentences within some
‘<p>’ tags. 001 <img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb">

Content image

Styling our content

06 Now let’s float the image over
to the right and add some
styles to it. We are going to use the
same CSS as we did on the sidebar

05 Let’s open up our ‘styles.css’ file. We can point to the ‘#main_content’ div
and then hock onto the ‘p’ tag. We can then use multiple selectors here
and use the same style properties and values for the<h2> tag.
thumbnails. Then we’re going to make
sure we have enough white space
around the image.

001 #main_content p, h2 { 001 .main_thumb {

002 line-height: 22px; 002 float: right;
003 margin-top: 10px; 003 margin: 40px;
004 padding: 20px; 004 border: 1px solid #fff;
005 width: 350px; 005 box-shadow: 0px 4px 6px #999;
006 } 006 }

69
 Introducing CSS Add content to your website

The main content height

08 Now first thing you will notice is

that the video is now hanging
out at the bottom of our content area.
This is because on our ‘#main_content’
rule we specified a fixed height of
‘500px;’ So all we need to do now is
locate that rule within our ‘styles.css’ file
and change it from ‘height: 500px;’ to
Video ‘height: 100%’;

001 #main_content{
07 Next we want to add the video to our main content area. Now we can get
really technical and use an HTML5 or flash player here, but to keep things
really simple, we can shoot over to youtube.com and copy and paste the embed
002
003
float: left;
height: 100%;
004 width: 630px;
code within our ‘index.html’ page. Then we want to be able to shift this video about 005 background: #fff;
using CSS, so it would make sense to wrap a div around it with an ID of ‘video’. 006 border-radius: 6px;
007 margin-bottom: 40px;
001 <div id="video"> 008 }
002 <iframe width="420" height="315" src="http://www.youtube.com/embed/
003 kNn44gHqanM" frameborder="0" allowfullscreen></iframe>
004 </div> Horizontal rule
Positioning the video
10 What we are going to do now is
add a separator just above the

09 All we are going to do here is position the video using CSS. Now it makes
sense to float the video left. Then we are going to use margin to push it
away from the edges and anything that may be surrounding the video will now
video. This will be easily styled using
CSS, so we won’t need to depend on
some graphic design software such as
have a generous amount of white space. Then let’s add a black 5px border to Photoshop or Fireworks. It’s simply an
finish off our video. HTML tag called a horizontal rule ‘<hr>’
and we can add that just above the
001 #video { video div within our ‘index.html’ file.
002 float: left;
003 margin: 20px; 001 <hr>
004 border: 5px solid #000; 002 <div id="video">
005 }

Styling the horizontal rule

11 Styling the horizontal rule ‘<hr>’

is going to be a very simple task,
but requires some thought. If you
want to increase its height, you can’t
just call ‘height: 10px’ – we have to
instead call upon its ‘border’ property
‘border: 5px solid #ddd’. We are going Adding more content
to decrease its width, make it grey and
give it space to the left:
12 So now you should get the idea of how and what we can add for our main
content. To get a real feel of it, let’s add something underneath our video.
What we can do then is add in another thumbnail image. So the best way would
001 hr {
002 color: #ddd; be to use the same image but give it a different class name of ‘main_thumb2’ and
003 width: 570px; place this directly under our closing div of our ‘video’.
004 margin-left: 20px;
005 } 001 <img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb2">

70
 Add content to your website Introducing CSS

More text Styling the content

13 So the next step would be to add in some more text that could be used for
a summary/excerpt of our video. Underneath our new thumbnail image,
place some more dummy text that is wrapped within paragraph tags ‘<p>’ with a
14 What we need to do now is
style our new content using
some simple CSS. So, open up
class name of ‘vid_excerpt’ so we can style it using CSS. your ‘styles.css’ file and position our
thumbnail image first. We will float it
001 <img src="imgs/thumbnail.jpg" height="100" width="100" class="main_thumb2"> left and then give it a 40px margin all
002 <p class="vid_excerpt">It is a long established fact that a reader will be
around. Then to finish it off we can give
003 distracted by the readable content of a page when looking at its layout.
it the same subtle drop shadow as the
004 The point of using Lorem Ipsum is that it has a more-or-less normal
005 distribution of letters, as opposed to using ‘Content here, content here’, other thumbnail we used in the sidebar.
006 making it look like readable English.
007 </p> 001 .main_thumb2 {
002 float: left;
003 margin: 40px;
004 border: 1px solid #fff;
005 box-shadow: 0px 4px 6px #999;
006 }

Bottom content

16 When looking at our HTML,

it would make more sense
to wrap our bottom thumbnail and
excerpt content within its own div. That
way we can have more control of this
The excerpt section if at all we need to position it
further. So, create a div with an ID of
‘bottom_content’ and make sure you
15 Now all we need to do is float our video excerpt to the right and give it
some margins with 50px to the right, and 40px to the bottom. use an HTML comment to mark the
ending div ‘</div><!-- END bottom
001 .vid_excerpt { content -->’
002 float: right;
003 margin: 0 50px 40px 0; 001 <div id="bottom_content">
004 } 002 </div><!-- END bottom content -->

Adding another divider

17 Now what we want to do is add

in another horizontal rule ‘<hr’>
above the excerpt text so we can then
section out the video properly. So just
above the thumbnail image link, place
in your ‘<hr>’ tag. But before we view it
in the browser, we need to go back into
our CSS and float the ‘hr’ tags left. This
will push the bottom one underneath
the video.

001 hr {
002 color: #ddd; Going further
003 width: 570px;
004
005
006 }
margin-left: 20px;
float: left; 18 As we said in the intro text to this tutorial, it’s down to you as to what
your content should include. Later in this book we explore adding maps,
newsletters, image sliders and more!

71
 Introducing CSS Add content to your footer

Add content to your footer

Finish off your first site with a footer to be proud of

In the past, the humble footer was not much more than a slim strip of colour with nothing more
interesting than the copyright text written within. But in many modern websites, we have seen a huge
improvement in footer designs and the content held within them.
These days, they are a lot higher and contain all sorts of content which can include contact forms,
newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a
newsletter sign-up field and generic About Us text, features another set of links for navigation, so our
readers don’t have to scroll back to the top or to the sidebar if they want visit another page.
As crazy as it sounds (and this would have sounded incredibly crazy no more than a few
years ago), the footer has really taken the modern web by storm and has now developed into an area
that needs good planning – like all parts of your website, it is important to offer the right amount of
content without confusing the user. So in this tutorial we will build a simple footer and include some
useful content that you would most likely see in a modern layout.

be to create a div with a class name 003 <li><a href=””>about</a></li>

of ‘about_txt’ within our footer ID 004 <li><a href=””>blog</a></li>
005 <li><a href=””>portfolio</a></
making sure we add on a HTML
li>
comment to the closing div. For 006 <li><a href=””>services</a></li>
content, we will start with a ‘<h4>’ 007 <li><a href=””>contact</a></li>
header tag that includes the words 008</ul>
‘about us’. Then underneath that we
will add in some dummy text that is Newsletter sign up
Getting started wrapped within paragraph tags ‘<p>’

01 Open up your ‘index.html’

file from the last project and
001 <div class=”about_txt”>
</div><!-- END about txt -->
04 Many websites would have
either a contact form or
newsletter sign up field within their
scroll down to the very bottom of the footer. What we will do is keep it
document. The first we are going to simple and add in a newsletter sign
do here is just underneath our closing
Footer links up field. We will give it an ID name
‘main_content’ div, add in a div with of ‘newsletter’ and we will place this
an ID of ‘footer’. 03 It is always a good idea to
place your site’s navigation
within the footer so the user doesn’t
straight under the footer links. We
can then position this later over to the
001 <div id=”footer”> right using CSS.
002 </div><!-- END footer --> need to scroll all the way up to the
top to navigate your site. So let’s use 001 <form id=”newsletter” action=””
About us an un-ordered list and give it a class method=”get”>
name of ‘footer_links’ and place it just 002<input id=”search_term” type=”text”

02 In this step we are going to

add some ‘about us’ text that
will be positioned to the left of our
underneath the about text.

001 <ul class=”footer_links”>

placeholder=”newsletter sign up....” />
003<input class=”submit_button”
004type=”submit” value=”sign up”>
footer. So first thing to do would 002 <li><a href=””>home</a></li> 005 </form>

72
 Add content to your footer Introducing CSS

Footer background

05 Now we have finished our

HTML mark-up, but if we
viewed it in the browser now it would
look a bit of a mess! So let’s open
up the ‘styles.css’ file, scroll down to
the very bottom and start adding
some CSS for our footer. First thing
we can do is clear the floats so it
pops underneath everything above
and give it some dimensions and a
background colour of white.

001 #footer {
002 clear: both;
003 height: 200px;
004 width: 100%;
005 background: #fff;
006 margin-bottom: 20px;
007 }

us a horizontal alignment. Then using 003 color: #333;

‘margin-left’ we can create some 004 }
space between each other. 005 .footer_links li a:hover {
006 color: #000;
001.footer_links li { 007 }
002 list-style: none;
003 float: left; About text
004 margin-left: 20px;
005 }

09 Styling the about text is going

to be very simple. We first
float it left and then give it a width
The links Finishing the navigation
of 250px. We then give it some
padding to allow some white space
06 Now in this step let’s style our
footer links so they look more 08 Now we’re going to finish off
our footer navigation. What
we need to do is remove the default
all around. One thing to remember by
using padding is it will make the box
like a horizontal navigation list. We are
underline and then give the text a element (‘div’) 20 pixels bigger as the
going to float it left and push it down
light grey colour. Then for our hover padding effects the inner element, not
using margin and give it 20px space at
state, let’s just change the colour of the outer element, and pushes it out.
the bottom. Then let’s give it a width
of 370px. the text to black ‘#000’, giving us a
001 .about_txt {
subtle rollover effect. 002 float: left;
001 .footer_links { 003 width: 250px;
002 float: left; 001 .footer_links li a {
004 padding: 20px;
003 margin: 90px 0 20px 0px; 002 text-decoration: none;
005 }
004 width: 370px;
005 }

List items
“The footer has taken the web by storm
07 Now style the list items‘<li>’.
Here we are removing the
default bullet points and then floating
and has now developed into an area that
all the items left, which will push each needs good planning”
one up and next to each other giving

73
 Responsive design Introduction to Responsive Web Design

Introduction to
Responsive Web Design
Ultimate guide to discovering responsive web design and
how to start using it today
Responsive web design
With the growing plethora
of internet enabled devices
it is important to ensure
your website is responsive.
Understanding responsive
web design practices will help
you build websites suitable for
every screen size whether large,
medium or small. <above> More websites, including the popular Mashable news website, are becoming responsive

What is Responsive Web Design?

With the advent and increasing number of users browsing the web on mobile devices and with no
evidence of slowing down the purpose of one design that fits all is more vital than ever before. Responsive
web design is the answer to this problem. Responsive web design is the approach that allows websites to
adapt to users’ behaviour and environment based on screen size, platform and orientation.
Ethan Marcotte the man who coined Responsive Web Design (checkout his original seminal article on
responsive web design at alistapart.com/article/responsive-web-design) discusses what responsive
web design is. Its not a single piece of technology but rather a collection of ideas and principles and
combination of techniques
allowing your website to
respond to the multitude of
different screen sizes whether
this be phones, tablet devices,
desktop, game consoles, TV or
even wearable.
With new devices and
screen sizes being developed
everyday its important to ensure
your website adapts to these
changing screen sizes today and
<above> Ethan Marcotte’s original article who coined responsive web design back in 2010 for the future.
74
 Introduction to Responsive Web Design Responsive design

Examples of Responsive Websites

Many modern websites you see today are actually in-fact responsive. Take the Microsoft website as an
example (www.microsoft.com). When you resize this website in your browser window you will notice the
website responds and adjust to accommodate the website content to fit in your browser window.
Another great example is the Starbucks website (www.starbucks.com). It magically resizes to fit
comfortably in the new width of the web browser. Notice when viewing this on a mobile device the
navigation collapses into drop down navigation activated by the burger menu icon.
Orientation of the screen changes when you view this site portrait and via landscape.

Fluid Layouts
In the past we had liquid layouts, where only the layout columns Quick Tip
structural elements and text were truly fluid which expands and Common responsive
contracts as the browser window size changes. But this was not breakpoints you may want to
truly flexible, images were not fluid which could easily break use http://responsivedesign.
is/develop/browser-feature-
layouts. This included structural layouts which directly broke the support/media-queries-for-
layout if pushed enough. common-device-breakpoints.
This is where fluid grids excels where traditional liquid layouts
failed. Fluid grids are a fundamental key principle of responsive
web design. Rather than designing for rigid pixels or arbitrary
percentage values, we can use grids to provide structure and use
relative units to provide fluidity defined by using maximum width
to carefully design in proportions.
When designing in traditional pixel based unit, there is a formula
we can use to identify the percentage values, by using:

001 Target / Context = Result

To see this formula in action we have a HTML page with:

001 <div class="wrapper">
002 <section><!-- content --></section>
003 <aside><!-- content --></aside>
004 </div>

75
 Responsive design Introduction to Responsive Web Design

The CSS:
001 .wrapper {width: 960px;}
002 section,
003 aside {margin: 20px;}
004 section {float: left; width: 640px;}
005 aside {float: right; width: 300px;}

To convert the fixed units and turn them relative we can use the
flexible grid formula:

001 section,
002 aside {margin: 2.083333333%; /* 20 / 960 = 0.02083333333 */ }
003 section {float: left; width: 66.666666666667%; /* 640 / 960 = 0.66666666666667
*/}
004 aside {float: right; width: 31.25%; /* 300 / 960 = 0.3125 */ }

We set our context as our wrapper which is 960 and the target value is
either our section, aside and margin. Using this formula we can apply
this throughout our grid to build a dynamic website to scale every
viewport size.

Designing Responsive Websites

Quick Tip When designing any website, planning and setting out user goals is
Use Responsify to generate your essential to crafting the best possible experience; users need to be
responsive template including able to interact with your website with minimal thinking.
grids columns, gutter width
Its beneficial to organise the site structure and mapping out the
and breakpoints http://app.
responsify.it/ architecture and possible framework that dictates the different
break points the site will respond to. Its good to wireframe and map
out your website using traditional tools simply with paper and pen.
Or use helpful digital software such as the online wireframing tool
Balsmiq (balsamiq.com).
After mocking up your website, its not necessary to design pixel
perfect desktop designs. Because it will only be part of one static
snapshot of a layout which is in constant fluid motion. Nor does it
make sense to design every single screen imaginable.
When designing a responsive website it is important to use a
grid system. Typically grids
are measured in pixels but
Setup grids and breakpoints now each grid will become a
1 Calculate grids and 2 Download percentage of a page width.
breakpoints Click download your Gridpack Be aware when the browser
Head over to http://gridpak.com/ to download the PNG for design window size changes the
to setup the number of columns purposes and CSS. Give credit for
and breakpoints. your resources on your site. column width will too, this will
vary between resolutions.
76
 Introduction to Responsive Web Design Responsive design

Setting up breakpoints
with media queries

1 Setting up mobile
breakpoints This will be set for
screen width of 320px and max
width of 480px.

2 Setting up tablet breakpoints

Modular design This will be set for screen width
To make your designs more fluid and ensuring it adapts to whatever of 768px up to 1024px.
environment it is viewed on even on a narrow screens such as
mobile devices you will need to think of each element of your
webpage to be modular.
This includes breaking down the page into components for 3 Setting up desktop
breakpoints This will be set
example the header, navigation, main content, sidebar and footer. for a minimum screen size of
Imagine this as a puzzle that can be reassembled or re-organised to 1224px .
fit on smaller screen size.
Its important to keep the information architecture coherent for
example the links need to be grouped together in a navigation and
4 Adding your custom styles
that content should still be linear and easy to navigate.
You can now apply specific
Navigation Search styles for specific devices or
Navigation changes to a mobile friendly version when The search is hidden on mobile devices and screen widths.
the width reduces from 539px using media queries replaced with a glyphicon to activate it

Responsive Images Flexible grids

All images are set to max-width: 100% Components are neatly structured using
to ensure they scale when the screen flexible grids so they resize in proportion on
size changes smaller screen

77
 Responsive design Introduction to Responsive Web Design

Media queries and Media Queries

flexible layouts Once the design of your website becomes more complex for
example spanning across three or more columns. This becomes a
problem as the screen width becomes too narrow for mobile users.
This is where CSS3 media queries comes into play. Media queries
allows you to specify CSS styles to be applied once conditions are
met such as when a browser reaches a specific width.
There are a few methods to incorporate media queries on your
website. First method is by linking this within the HTML <head>:

001 <link href=”responsive.css” rel=”stylesheet” media=”all and (max-width: 960px)”>

1 Style mobile screen To resize
website to fit on less space on a
mobile screen. Or using the @import rule:

2 Add in media query Add a 001 @url(responsive.css) all and (max-width: 960px) { }
media query for screens of a
maximum of 320 pixels.
Most common practice and to avoid further HTTP requests is to just
001 @media screen and (max-width: use @media within your existing style sheet:
320px) { }

001 @media screen and (max-width: 960px) { }

3 Remove floats Within media
query set width to auto on the
section and aside. We can set the media type to either all, screen, print, tv and
001 section, aside { even braille. Each media query includes a media type followed by
002 float: none; one or more expression. Logical operators in media queries help
003 width: auto;
004 } build powerful expressions. We can use the ‘and’ operator to add
extra conditions:

001 @media all and (min-width: 600px) and (max-width: 940px) {...}

The above selects all media types between 600px and up to 940px.
Besides setting the min- and max-width we can also use the
orientation media feature to determine if a device in landscape or
portrait mode.

Media support for older browsers

4 Widths auto span The widths 1 Media queries support for 2 Link to JavaScript
on the elements now auto older browsers Link to respond.js in your
expand across the viewport on Download Respond.js over at <head> right after where you
mobile devices. github.com/scottjehl/Respond have put your style sheets.

78
 Introduction to Responsive Web Design Responsive design

001 @media screen and (orientation: landscape) {...} Retina Images

Unfortunately older browsers such as Internet Explorer do not quite

understand media queries. To combat this we can simply add the
‘only’ keyword.

001 @media only screen and (min-width: 600px)

User agents using HTML4 algorithm will now simply ignore media
queries that you have inputted.
1 Serve high-res images to
Viewport retina displays Download
Retina.js at http://imulus.github.
If you built a responsive website and try to view it on a mobile
io/retinajs/.
device you will notice the website has scaled to the desktop size.
By adding a viewport meta tag we can ensure browsers scale the
webpage to fit the screen size its on, with:

001 <meta name=”viewport” content=”width=device-width, initial-scale=1”>

Fluid images
2 Copy retina.js to your scripts
Most websites contain some sort of media typically imagery. With folder Copy the plugin to your
a responsive website content is expected to fluidly change to the JavaScript folder.
screen resolution, this implies images will need to as well. Luckily
there is a easy solution to scale images when the viewport changes. 3 Add script to <head> In the
<head> add <script type=”text/
In the CSS simply add: javascript” src=“js/retina.js”></
script>
001 img {
001 max-width: 100%;
001 }
4 Reference retina images For
retina images save them as
Clearfix Media query [email protected]
Using the clearfix hack to automatically clear Percentage grids are placed in a media query
after itself so it won’t be necessary to add based on screens with a minimum width
additional markup of 450px

Quick Tip
Its a good idea to add height:
auto; when using responsive
images in case the height
does not resize in proportion
Zoom: 1 fix Calculated grids
Applying the zoom: 1 to fix old browsers such as This grid structure has 12 columns which are with the width.
Internet Explorer to fix the hasLayout bug broken down into calculated percentage widths

79
 Responsive design Introduction to Responsive Web Design

Applying this fix will allow images to scale down dependent on the
Compressing CSS containers width.

1 Compress CSS Mobile first

To reduce file sizes and the When designing for responsive websites its a good rule to follow
amount of HTTP requests head the mobile first principle.
over to http://www.shrinker.ch/
Mobile first is an approach where you design for the mobile
2 Upload files experience first and then work your way upwards towards tablets
Upload all your CSS files and and desktops. This forces us to focus on the advocate constrains
click shrink of available space on mobile screens that do not have enough
real estate for ads, social media buttons etc. It would be wise to
3 Copy shrinked file
Copy the shrinked code you have use media queries to limit unused styles and scripts should not be
created into a new CSS file called loaded for mobile devices including media assets.
compressed.css

4 Update CSS link

Browser testing
In the <head> make sure you Its fundamentally important to always test your website in as many
update the CSS link to the new web browsers, operating systems and devices as possible. With the
compressed.css
growing number of devices and screen resolution its very hard to
have an extension assets of hardware available for thorough testing.
There are some free online tools available to help. There is the
Responsive Web Design Testing Tool by Matt Kersley (mattkersley.
com/responsive/) and Responsive Test (responsivetest.net) both
allow you to enter in a URL to preview your website will look at
different resolution and devices.
There are some more powerful paid for tools to help give a better
preview and interaction on real world web browsers and devices.
Spoon.net (https://spoon.net/browsers) has a collection of web
browsers you can run locally.
Cross Browser Testing (crossbrowsertesting.com/) and Browser
Stack (www.browserstack.com/) are very similar whereby they
allow you to run live emulators from legacy web browsers to actual
working iOS, Android and Windows mobile devices including tablet
devices for you testing pleasure.
Quick Tip
Download GuideGuide
Photoshop plugin (http://
Download Foundation Framework
guideguide.me/) to set 1 Head to Download 2 Click Custom Build
up your own guides in Go to foundation.zurb.com/ Unzip the downloaded pack and
develop/download.html You may get started building your responsive
Photoshop, with many
customise the components and website, it’s fairly straightforward
variants and ease. grid system from there.

80
 Introduction to Responsive Web Design Responsive design

Responsive Frameworks
Building a new responsive website can be daunting, with the
technically issues surrounding responsive web design, calculating
number of columns, grids, percentage widths, breakpoints and
further technical hurdles that may appear through development. A
solution is to adopt an existing responsive framework.
There is a huge benefit when relying upon a responsive frame to
begin it won’t be necessary for you to calculate your own fluid grids
instead most modern frameworks will allow you to get going and
Futher reading
starting building your website. Essentially picking up a framework There are a lot more reading
will help save tremendous amount of time and generally they to further your discovery on
responsive web design and
come packed with predefined styles, components, font sizes, form to continue on improving
elements, CSS resets and more. your skills.
Popular frameworks will have an active community and even Websites that contain
great resources on responsive
extend the framework further with new and robust plugins. There web design include This is
will traditionally come with clear documentation for you get started Responsive http://bradfrost.
when using the framework and understanding all the code and github.io/this-is-responsive/
a collection of news and
components available. resources. A beginners guide
Two very popular and well maintained responsive grid to responsive web design
frameworks available are Bootstrap and Foundation. resource list www.targetlocal.
co.uk/responsive-web-
design-resources/.
Bootstrap (getbootstrap.com) originally created by the team from
Books that help further
Twitter, this framework is one of the most popular open source your skills include HTML5 for
responsive framework out there. This library consist of a huge Web Designers http://www.
abookapart.com/products/
amount of components and re-usable functionality such as drop
html5-for-web-designers
downs, glyphicons, styled form elements, progress bars, JavaScript and CSS3 for Web Designers
powered plugins including carousels, alters, tooltips, transitions and www.abookapart.com/
products/css3-for-web-
many more.
designers and Responsive
Web Design www.
Zurb Foundation (foundation.zurb.com/) is one of the most abookapart.com/products/
advanced responsive front-end framework. It was built with speed responsive-web-design all
in mind so all the components and JavaScript plugins have been are by A Book Apart.
Checkout some great
performance tuned. Foundation as the name suggests is used as examples of the best
a starter for any responsive website, it contains a responsive grid responsive websites out
system, mobile friendly navigation, customisable components, there on Awwwards www.
awwwards.com/websites/
some handy media plugins including flexible videos, lightbox and responsive-design/ and
carousel slider. more to see over on Get
with the Future socialdriver.
Which ever framework you choose always make sure you com/2014/03/05/65-best-
carefully read the documentation and make sure it suits the needs responsive-website-design-
examples-2014/.
of your website.

81
 Responsive design Bootstrap

Bootstrap
Responsive design made easy
Bootstrap is a powerful yet approachable front-end framework designed to
make it quicker and easier to develop user-friendly websites
It was in August 2011 that Mark Otto, a developer type source file, a forms source file and a tables
at Twitter, announced a new framework that the source file.
social media platform had developed internally, Bootstrap is designed to be mobile-first,
with the aim of providing a consistent API while meaning its fully responsive which includes a
developing the popular micro-blogging tool. powerful four tiered grid system so your layouts
Bootstrap was designed to help Twitter’s can adapt to phones, tablet, desktops and large
developers avoid the mish-mash of competing desktops screens. Given that much of our internet
and incompatible frameworks and libraries. usage is moving onto smaller devices, this seems
It provides a unified toolset for all front-end to be a sensible move.
development requirements including advanced On top of the CSS framework, a series of jQuery
typographical control, a built-in grid system, plug- ins provide functionality such as support for
and the option to use components to extend drop-down menus, modal boxes and much more.
functionality to suit any particular needs that go Taken together, these different elements
beyond the basic framework common to every provide the basis of a plug-and-play, standards-
website. Twitter have since produced one of their compliant and user- friendly HTML5 website. The
most compatible and functional websites to idea is to facilitate rapid application development
date, with the sleek new design not only being without having to build your own solution each
pleasing on the eye, but providing its users with a and every time you start a project.
basis of comparison to the other social networks. We’ll take you through the Bootstrap
Fundamentally Bootstrap is pure CSS, but framework, explaining how to use it and why it
as it’s built with LESS (a pre-processor that will revolutionise the way you create websites.
offers flexibility beyond what normal CSS can We’ll show you some excellent examples of
achieve) and has Sass support, there is a range of Bootstrap-powered websites, and point you
additional benefits over and above plain styles. in the direction of useful additional resources
The core CSS is broken into components, that will help you take full advantage of all the
allowing it to be easily managed and adapted. possibilities on offer. It’s particularly useful to
Each file in the set of Less source files deals understand why the framework is structured the
with one particular characteristic, so you have a way it is, so let’s start there.

82
 Bootstrap Responsive design

Bootstrap: What and why

To get the most from Bootstrap, you need to understand how it’s structured,
and why
There may be an element of confusion as to why there are Mixins Mixins are useful way to to mix-in a bunch of
so many individual files that make up the library. The basic properties from one rule set into another. Bootstrap has a
principle behind segmentation of the different component collection of imported mixins to be used, which includes a
parts of the library is that each can be updated without vendor-prefix which provides all browser vendor prefixes for
adversely affecting the others, making the system more you in your final compiled CSS.
manageable. The benefit of using the LESS system is that
you can combine all your CSS into a single file when it Scaffolding The other reset styles that normalize.css
comes to pushing your code live. does not include such as box-sizing, body reset and form
Looking at the Less source files (a CSS preprocessor elements. As well as basic page templates and structure for
Bootstrap was built with), lets focus on seven key files your site.
that made up part of the uncompiled CSS. Since there
are a dozens more. The original core functionality remains Type Styles for all the typographical aspects of your design.
the basis of Bootstrap, so let’s have a quick look at what
it contains: Forms Styles that deal with formatting all things related to
your forms.
Reset Based on Normalize.css reset rules, this removes all
the browser formatting defaults, giving you a completely Tables A set of styles that provide presentation for tabular
clean slate to work with. data. There are a number of jQuery plug-ins you can use to
add specific functionality to your design. Note that although
Variables A set of globally shared and commonly used the framework is structured in this way, if you simply
values including colour values, typography, scaffolding, download the latest release you’ll get pre-compiled and
iconography, components, spacing, tables, buttons, media minimised code, so you don’t need to worry about using
queries breakpoints and more. . the Less.js compiler.

Get started
Bootstrap works by providing a clean, uniform approach
to creating the most common user interfaces on the web.
Whether you’re creating a simple brochure website, or a
complex form, the same core components make up the
site design in terms of styles and content structure. By using
Bootstrap you can save time, pulling in ready-made controls,
layout elements and styles. This leaves more time to work
on aesthetics and testing.
The grid
A fundamental aspect of Bootstrap is the 100% fluid
The first thing you’ll need to get started with Bootstrap grid system built into the framework. There are four grid
is the framework itself. Visit getbootstrap.com to download options available, but the principle approach to working
the latest version of Bootstrap. All the media queries, grid with a grid remains the same. The responsive grid scales
sizing are all ready and setup included in this download. up to a maximum of 12 columns as the device or viewport
Once you’ve downloaded the framework, you simply increases. You can define how many columns each box
need to plug in the CSS and JavaScript files to create your should span, allowing you to simply and effectively align,
first Bootstrap page. without having to calculate widths manually.

83
 Responsive design Bootstrap

Benefits
Modular
We take you through just a few of the benefits
of Bootstrap
easy to get clean cross-browser results without having to
The Bootstrap framework is modular, so you only need start from the ground up each time.
to call in the elements you need for your specific project,
making it relatively lightweight to deploy. Extensible
There are over a dozen jQuery plug-ins designed
Responsive specifically to work with Bootstrap, providing out-the-box
The grid system is fully responsive, allowing you to functionality for the likes of carousels, tooltips, dropdowns
design once and deploy your website across multiple and transitions. It is also easy to develop your own plugins.
device profiles, all without having to do any complex
mathematics or calculations. Pre-built components
Bootstrap includes a series of user-interface components
Quick to develop that you can instantly deploy, including drop-down
Bootstrap is built on standard CSS and JavaScript making navigation bars, auto-pagination, media objects, progress
it very quick to develop the accompanying HTML, and bars and many more.

Why work with templates

A brief outline as to how templates can help you with developing your design
Although Bootstrap is a pure CSS and JavaScript library built elements of a typical layout, and covering common
with Less.js, there’s a flourishing community of templates. design patterns such as a blog, dashboard, login form or
These HTML packs often include images and specific CSS full-width image carousel. It’s well worth having a look at
additions to give you a head start with regards to developing these when you’re first starting out with Bootstrap, if for
your design. no other reason than to understand how useful the
Bootstrap itself provides a number of templates framework is in rapidly developing common functional and
in the Get Started section of the getbootstrap.com structural requirements.
website, under Examples, demonstrating a number of Once you move outside the official Bootstrap website,
different components and plug-ins in action. These are however, there is a wide range of free and commercial
barebones pages, only designed to provide the structural templates available that go far beyond merely providing
the structural framework, and move towards a fully-realised
design that you can deploy as-is if desired. Some of these
templates handle a specific area of functionality, such as an
Custom admin system, basic eCommerce website, or photographer’s
portfolio, while others take a more generic approach.
download Common to almost all templates is that you’ll need to wire in
your own functionality to handle any server-side processing
Get a custom download of Bootstrap required, but given a fully-realised front-end design, it
by visiting getbootstrap.com and becomes a much quicker process to develop prototype web
clicking on Customise. You can then apps if you use a template to provide you with a flying start.
specify which components, variables, When you’re looking for templates or themes, be sure
plug-ins and base-styles are included. to check that they’re using the standard Bootstrap source
The download includes minimised code as a basis, and that ideally their additional CSS design
files for low-bandwidth deployment to elements are incorporated in a separate file, or as a fork
production sites, and uncompressed from the main Bootstrap branch. This will allow you to
versions for testing. (relatively) safely apply any subsequent Bootstrap updates
without having to spend a lot of time reverse engineering
the changes.

84
 Bootstrap Responsive design

Six of the best

We give you a quick rundown of our six favourite templates and some of the
features they offer designers

1. mPurpose 4. JA Appolio
This free theme from http://bootstrapzero.com/ JA Appolio is a Joomla theme built on Bootstrap,
bootstrap-template/mpurpose is a fully responsive available free from http://www.joomlart.com/joomla/
multipurpose template. It includes over 30 sample templates/ja-appolio. A desirable portfolio template,
pages from portfolio layouts, business/agency layouts to it bundles with amazing features including parallax
carousel slider, eCommerce shopping layouts and more. design, blog ready, a selection of 5 colour schemes and 9
This is ideal for a web design agency site. bonus pages.

2. Fullby 5. DashGum
Free from http://www.marchettidesign.net/fullby/, Also free http://bootstrapzero.com/bootstrap-
Fullby is a Wordpress theme using Bootstrap. It features template/dashgum a 15 page dashboard panel or admin
a responsive video slider, animated shuffling of blog theme, this boost some unique interactive components
posts, animated widgets, and wide selection of colours including charts, tables, calendar notifications, to-do lists
to choose from. and more.

3. StanleyWP 6. Awesome Photography

This theme, by http://gentsthemes.com/themes/ This premium theme https://wrapbootstrap.com/
stanleywp-twitter-bootstrap-wordpress-theme/ is also theme/awesome-photography-template-WB04B42CG
free. This Bootstrap template demonstrates a truly flat is perfect for any photographers. This template deals with
style looking personal portfolio can be so simplistic, ideal heavy imagery with some interactive animated elements
for anyone running their own portfolio and/or blog. to allow you to present your art beautifully and clean.

85
 Responsive design Bootstrap

Using components for your

user interface
Bootstrap goes beyond merely providing a responsive grid system: it’s a fully
featured user-facing toolkit that includes a whole set of user interface elements,
known as components, that offer simple, speedy integration

Among the key features of the Bootstrap framework is its It’s also extremely convenient to use some of the more
concept of components. These are re-usable user interface basic components, such as list groups, panels and wells, as
controls that cover the most common interactions, and these inherit the global style definitions automatically. This
range from drop-down menu systems all the way to means you can easily control the look and feel of common
modal pop-ups. content containers without having to explicitly define each
Components are implemented using a combination one individually.
of styles and scripts, and are typically initiated simply by Naturally, you can create your own additional
applying a specific set of classes to your markup. The components that you’ll be able to subsequently re-use in
documentation (available from getbootstrap.com/ future projects. The Bootstrap documentation walks you
components) provides some great examples for each of the through the process of integration, or you can use a third-
components that ship as part of the core Bootstrap build, party service such as Jetstrap (jetstrap.com/) to build your
but each of these is just the starting point. The idea is that own custom user experience elements and designs.
you will dress the component to suit your own website’s
layout and aesthetic treatment, altering or extending
functionality as you require, to provide a perfect fit for all of
your needs.
Better still, because the component system is entirely Customisation
modular, you’re not limited in any way to the twenty or
Components are little more than
so that come in the box; there are a raft of additional
HTML markup classified using a
components available on the web that extend the basic
combination of structure and classes.
functionality still further. Some of these are not much more
As a result, they’re incredibly flexible
than a jQuery plug-in, but tend to be designed around the
and infinitely customisable. If you
Bootstrap ecosystem, offering similar syntax and integration
want to change the look or the way to
to the standard set.
interact, you simply need to edit the
Although it’s often tempting to build your own solution
associated CSS and/or JavaScript.
to a particular user interaction requirement, by using off-the-
shelf components you can focus your time on enhancing
the all-important user experience, and rapidly prototype
your ideas without impacting negatively on time or cost.

86
 Bootstrap Responsive design

5 Popular UI
Components
A collection of elements that can
be instantly added to a site.
3. Alerts
Useful when you’re trying to draw your user’s
attention to important information – either in
response to their input, or as a consequence of
something new or time-limited – alerts are an
extremely common call-out approach to highlighting
feedback. Bootstrap provides four styles, including a
dismissible alert.

1. Jumbotron
This component encapsulates a popular layout
technique: an oversized typographical box. Typically
such an area includes a call to action, so the Bootstrap
Jumbotron has a button built in to the design – which
4. Input groups
is, of course, easily customised.
Input groups make it easy to develop clean, validated
user forms that respond consistently. The core styling
is simple and follows the current trend for minimalist
aesthetics, you can also append or prepend text or
buttons either side of text based inputs.

2. Tabs and Pills 5. Badges

A popular navigational device, the tab allows you to A great way to convey to users that there are new items
show lots of content in a small space. The pill can be to read, actions to take or feedback to collect. The
used to work similarly or as an intra-page navigation Bootstrap implementation is clean, allowing you to
system. The default styling is configurable, so you’ll see avoid extraneous markup, while rendering in a familiar,
a lot of these dressed to the suit the site in question. user-friendly bubble.

87
 Responsive design Bootstrap

Build your first

Bootstrap webpage
Bootstrap is designed to make developing a fully functioning user interface
simple – we’ll show you just how quick and easy it is to get started

Basic HTML
Download the framework
02 Bootstrap plugs straight in to your regular HTML
page, so start by creating a simple blank page that

01 First of all, be sure to visit getbootstrap.com and

click on the Download Bootstrap button. Grab the
standard download, and unzip the contents to your website
includes the jQuery library. Add a link to the minimised
version of the Bootstrap CSS file, and add the minimised
script. Best practice says we should put our scripts at the
folder ready for use. end of our HTML to speed up loading for users.

Add a nav bar Add grid-aware containers

03 You can easily add a navigation bar to your page

by inserting an unordered list, each containing a
list item. Give the <ul> a class of ‘navbar’. This hierarchy of
04 Bootstrap uses classes to define how different
elements should be styled, including the way they
fit into the grid system. Add three <divs> to your page and
markup defines the way the navigation will be presented, give each a class of ‘col-md-4’. This aligns them to the four-
including all hover states and effects. column grid.

88
 Bootstrap Responsive design

A little bit
LESS.js

Add a Jumbotron

05 A popular way to draw attention to your key message is by using a

Jumbotron – a large heading and first paragraph that clearly spells out
what your website is all about. Add the code from Bootstrap component section
CSS is a fantastically easy
language to learn, and it
http://getbootstrap.com/components/#jumbotron to add a Jumbotron above increasingly offers a wide range
your three four-column boxes. of functionality as browser
vendors have embraced CSS3
in earnest. The biggest problem
with CSS is that it’s static in
nature – inevitably you end up
writing the same styles over and
over again, with no way to write
your colour choice once as a
variable, and re-use the variable
across the stylesheet. There have
been some efforts to include
CSS variables natively in the
browser, but they’re not very well
supported, and are quite limited
in their capabilities.
LESS offers an easy-to-
understand solution. The system
extends CSS with variables,
operators and functions. What
this means in practice is that you
can define your core properties
as variables and re-use the
variables – this is as opposed to
using the explicit values they
contain, making it quicker and
easier to change styles globally.
Make it responsive LESS offers a lot more
than this, but does require

06 Bootstrap is fully responsive from the beginning, your webpage will be

instantly responsive. Try expanding or collapsing your web browser to
see the responsiveness nature in action. This webpage is now mobile, tablet and
compilation. You can get hold of
all the full details at the lesscss.
org website.
desktop friendly.

89
 Responsive design Bootstrap

Create a carousel with Bootstrap

We get in depth with one of the most visual components within Bootstrap:
the carousel. Read on to find out how to customise the carousel to fit your
own design

Grab a template
Replace the hero
01 The easiest way to start this project is to grab one
of the ready-made example templates on the
getbootstrap.com website. We’ve opted for the Jumbotron 02 We’re going to replace the Jumbotron hero panel
with a carousel. Visit the documentation for the
template because we can replace the Jumbotron with our Carousel plug-in, found within the JavaScript section of the
carousel. Copy the HTML source code, and paste it into a Bootstrap website, and copy the code example. We’ll paste
new page to get started. this in place of the Jumbotron in our template.

Add user controls

Build the HTML

03 Paste in the code on your clipboard and have a quick

look at how it’s structured. You’ll notice that there are
04 Also within the sample code is a pair of navigational
elements, both rendered as anchor tags within
the HTML. These are used to page through the individual
two principal sections: the carousel-inner, which contains carousel slides. The classes and data-side properties are
each slide in the carousel, and the carousel-indicators that extremely important here, as they provide the hook to the
provide the dots demonstrating the currently visible slide. carousel itself.

90
 Bootstrap Responsive design

Responsive carousel
The carousel slideshow component comes fully responsive be sure that your images are wide enough to
encompass all common screen widths. This can create a big impact, especially on portfolio websites where
images are used to show off your work.

Tweak the behaviour Change the settings

05 You’ll notice that by default the carousel will play,

changing the slide every 5000 milliseconds (which is
the same as 5 seconds). You can update this value by passing
06 Refer to the documentation to view the additional
methods and properties you can set to alter the
settings for the carousel. A good example of a change you
an argument to the .carousel() call. Pass in a value assigned can instigate is to add a button that calls the pause method,
to the interval property, and you can reduce or increase the preventing the carousel from automatically moving to the
time to suit your needs. next slide.

Customise the look Plug in your content

07 As with every other plug-in and component within

the Bootstrap framework, you can fully adjust the
look and feel to suit your own website. Simply edit the CSS
08 Finally, all you need to do is plug in your own
images and captions, including any links you’d like
to include, and test your page. Keep in mind that all the
styles for the different elements with a class that begins different elements of the stock carousel can be customised,
.carousel – so to change the background colour of the so you’re not stuck with the default user controls, caption
caption, edit .carousel-caption, for example. position or carousel size. Have fun!

91
 Responsive design Bootstrap

Resources Be inspired
Bootstrap is the underlying
Bootstrap has a lot of resources framework for some amazing
available on the web, check out five websites – take a look at two of the
of our favourites below best to get some inspiration for your
Bootstrap next project
getbootstrap.com
Straight from the source, the Bootstrap website
provides an off-the-shelf download of the framework,
a customisable download builder, and a full set of
documentation for the framework covering all the
standard plug-ins, components as well as the grid system.
This is also the place to get the latest official news

Bootstrap Google+
https://plus.google.com/communities/
110370020620457615447
This is the Google+ community group for Bootstrap, visit
here if you’d like to seek help from other users, or to learn
about the latest news. This group currently boast over
4000 active members. There are regular updates when
new templates, components and plugins are launched. Lexi Miller
Bootsnipp http://leximiller.com/
bootsnipp.com This clean, simplistic and gorgeous looking feminine
A handy resource site that gathers together HTML website sells fashionable athletic clothing. It takes
snippets, themes, components and plug-ins in a gallery advantage of the responsive native in the Bootstrap
that’s easy to browse. Users can contribute snippets, framework and utilises it as its own.
sharing their own work with the community for mutual
benefit, and the site also features a handy page of links to
other Bootstrap resources for quick reference

Start Bootstrap
http://startbootstrap.com/bootstrap-resources/
Kickstrap calls itself a ‘complete kit for making websites’,
building on top of Bootstrap with additional support for
libraries such as Raphael without the pain of manually
bringing together disparate resources. A useful resource
for sites that need to go further than basic Bootstrap

Bootswatch
bootswatch.com
Bootswatch is a simple theme site for Bootstrap, but rather
than focus on the complete end product, it provides a Entora
core set of styles that integrate beautifully with the basic http://entora.com/
Bootstrap components to create markedly different
aesthetic treatments. It’s limited in the range of themes it A beautiful entertainment source to follow your favour
offers, but many are worthy of forming the basis for your artists. This website takes advantage of the mobile first
own customisations. fluid grid system using the extra small grid option to
force grids to be horizontal at all times.

92
 Bootstrap Responsive design

What’s the next step?

So you’re all set up with the basics, but what happens now? We give some
guidance as to where to go from here with Bootstrap, including how to
approach customisation

Now that you’ve got an overview of how Bootstrap works, work to clients. Keep in mind that your prototypes can go on
what makes up the library, and how to leverage the to form the basis of the final product too, so you’re
framework to build a website, you’re ready to start building saving time upfront as well as in the website or application
your sites using Bootstrap. build phase.
Your first step should always be to create a customised Once you’re confident, you may want to develop custom
download, rather than relying on the kitchen-sink approach functionality or components that simply aren’t covered by
of downloading everything. This will make your site leaner the default install of Bootstrap, or that work differently to
and more bandwidth-friendly, which your users will thank the standard behaviour. You don’t need a huge amount of
you for. Once you’ve got the framework, build your own technical knowledge or skill to be able to generate your own
theme – working on top of an existing template or theme if assets that you can go on to reuse in future projects. Similarly,
you’d like a quick start – and develop your content in situ. if you’re a front-end developer you may find that you want to
Bootstrap is particularly powerful for rapidly prototyping develop custom widgets and plug-ins that leverage jQuery.
user interfaces, making it an ideal solution for generating This process is very straightforward, and there’s a full set of
style tiles or non-functioning mockups when presenting documentation on the getbootstrap.com website.

Bootstrap 3
Since the release of version 3, lets look back comparing to the predecessor
and on advancement it has made.
The difference between Bootstrap 2 and Bootstrap 3 is as ‘red’, a more semantic naming scheme is used. The
that version 3 takes a mobile-first approach to ensure CSS has been tidied up too.
your designs is fully responsive on the get go. There are some structural changes to the way you
Under the hood the developers have focused on build your web apps, so the shift to version 3 from
trimming and rationalising the framework so that, for version 2 will require some HTML alterations, but the
example, rather than internally referring to an alert box fundamental approach remains the same.

93
 Responsive design Build a custom Foundation template

Build a custom
Foundation template
Get started using Zurb’s Foundation framework to build a responsive template
that can be reused for any project
When starting a new responsive web design project, trying to custom develop your own framework
that includes a flexible grid system, media queries, typography, JavaScript media including video,
carousels, lightboxes and more can be exhausting. Not to mention the changing web arena, you’ll have
to rigorously maintain and update your framework to keep up to date with all the new features.
Using an open source framework like Foundation by Zurb helps to relieve the stress on developers.
This robust and flexible framework is well documented and has a host of ready components to reuse;
the best part is you can easily customise it, adding and removing functionality to suit your needs.
Foundation is built to be mobile first, so as soon as you start using this framework for your web project
it’s instantly responsive.
Through this tutorial we’ll touch upon some of Foundation’s core components and how to assemble
these to create your own custom template, which can be reused for any project.
94
 Build a custom Foundation template Responsive design

002 color: #666;

003 }
004 h1, h2, h3, h4, h5, h6 {
005 font-family: ‘Cabin’, ‘sans-
serif’;
006 font-weight: 500;
007 color: #666;
008 }

Build the navigation

Download Foundation downloaded at www.google.com/
fonts#UsePlace:use/Collection:Cabin.
It’s good practice not to directly edit
05 Create a <nav> wrapper and
within this have a <ul> with

01 To begin, navigate over to the

Zurb Foundation framework
website at foundation.zurb.com.
the foundation.css, which contains
all the framework styles. We should
a <li> item for the main title, with a
second <li> for the mobile menu

Click on the ‘Download Foundation house all our custom styles in a

5’ button and you will be presented separate CSS file called style.css.
with multiple choices to download
001 <link href=’http://fonts.
Foundation. You can select from
googleapis.com/
a complete package, lightweight, css?family=Cabin:400,500’
custom or Sass. In this tutorial we’ll rel=’
be using pure CSS to allow beginners stylesheet’ type=’text/css’>
to follow along, so go ahead and 002 <link rel=”stylesheet”
download the complete version. href=”css/foundation.css” />
003 <link rel=”stylesheet”
href=”css/style.css” />

Basic styles

04 Now that we have our head of

our HTML set up we can start
applying some default styling. Create
a new style.css in the CSS directory.
Unarchive the zip Let’s change the default font colour
to a dark grey and make sure all of

02 Unarchive the Foundation

framework you just
downloaded; inside you will find a CSS
our headings are now using the new
Google font Cabin.
<above>
The Top Bar plug-in is fully responsive
navigation, even the drop-down menus are
device friendly
directory that includes the complete 001 body {
Foundation CSS file and Normalize a
CSS reset. Within the JS directory is
the complete JavaScript library and
scripts. The index.html has all the “Throughout this tutorial we have
standard HTML5 boilerplate ready.
Start by removing everything within focused on pure CSS but you could use
the body tag.
Sass, which allows greater customisation
HTML head
of the framework using nested styles,
03 Within the HTML head we’ll
add a custom Google Font
called Cabin, which can be found and
variables, function and reusable code.”
95
 Responsive design Build a custom Foundation template

<left>
Using the Top Bar plug-in you
can easily create functional
drop-down menus, the only real
work is styling it up

<below>
Incorporating a responsive
rotating slider with swipe- and
touch-enabled functionality is a
breeze using the Orbit plug-in

Option</a></li>
(this will only appear on a small Sub menu 007 </ul>
mobile screen). The top-bar class is 008 </li>
used for presentational purposes, the 009 </ul>
data-option stick_on will force the
navigation to stick to the top of the
06 Creating drop-down menus
can sometimes be overly
complex and tricky but Foundation
010 </section>

browser window.
makes the whole process very simple. Style the menu
001 <nav class=”top-bar” data-topbar Within the <nav> create a <section>
with the class top-bar-section.

002
data-
options=” sticky_on: large”>
<ul class=”title-area”>
Within this we create a <ul> and our
<li> items, making sure to add the
07 The beauty of an advanced
framework such as Foundation
is that it provides a lot of default
003 <li class=”name”> class has-dropdown to act as our styling for us, which means we can
004 <h1> <a
secondary menu. concentrate on structuring our page
href=”#”>Foundation
Custom Template</ and customising our styling a lot less.
001 <section class=”top-bar-section”>
a></h1> You will notice the menu will have
002 <ul class=”left”>
005 </li> its own custom styling already. We’ll
003 <li class=”has-
006 <li class=”toggle-
dropdown”> just add a drop shadow with some
topbar menu-
004 <a class=”active” browser vendor prefixes.
icon”><a
href=”#”>
href=”#”><span>Menu 001 .top-bar {
Main Item 1</a>
</span></a></li> 002 -webkit-box-shadow: 0px 3px
005 <ul class=”dropdown”>
007 </ul> 7px 0px rgba
006 <li><a
008 </nav> (50, 50, 50, 0.75);
href=”#”>Dropdown

96
 Build a custom Foundation template Responsive design

003 -moz-box-shadow: 0px 3px 006 time_speed: 1000, 002 <div class=”large-6
7px 0px rgba 007 pause_on_hover:true, columns”>
(50, 50, 50, 0.75); 008 bullets: false, 003 <div class=”flex-
004 box-shadow: 0px 3px 009 } video”>
7px 0px rgba 010 }); 004 <iframe
(50, 50, 50, 0.75); 011 </script> width=”560” height=”315”
005 } src=”//www.youtube.com/embed/_
ejeqxRdGwk”frameborder=”0”
Basic content allowfullscreen></iframe>
Orbit slider plug-in 005 </div>

08 Creating a carousel slider is 10 The grid system is one of

Foundation’s most powerful
006 </div>

extremely simple when we features, making it easy to create multi- Panel component
use the Orbit slider plug-in. First we’ll device layouts. The row class is used
wrap the code within a row class, to hold all the columns, defining a grid
followed by a large-12 columns grid
to lay out our carousel. Apply a orbit-
column of 12 indicates the number of
columns we need in a row. Below is
12 Let’s have some accompanying
content next to our video. We’ll
use another six-column grid and to
container class and a data- orbit data- a basic structure of content using the
add components that help outline
attribute using a <li> item to separate grid system.
sections on a page we can use the
each slide.
001 <div class=”row main-content”> panel component. All you have to
001 <div class=”row”> 002 <div class=”large-12 do is create a wrapping <div> called
002 <div class=”large-12 columns”> columns”> panel encasing your content and
003 <ul class=”orbit-container” 003 <h1>Our latest work</h1> Foundation will automatically apply
data-orbit> 004 <p>Lorem ipsum….</p> a border and background colour to
004 <li> 005 <img src=”img/photo.png” this panel.
005 <img src=”img/ alt=”” />
slides/slide-1.jpg” 006 </div> 001 <div class=”large-6 columns”>
alt=”slider 1” /> 007 </div> 002 <div class=”panel”>
006 <div class=”orbit- 003 <p>Lorem ipsum ….</p>

007
caption”>
Text to go here
Make a child theme 004 </div>
005 </div>
008 </div>
009
010
011
</li>
</ul>
</div>
11 Adding a video is extremely
easy. Foundation will
automatically help you to scale your
Lightbox gallery
012 </div> video from an intrinsic ratio, so you can
guarantee it can be properly scaled 13 To build a lightbox gallery of
photos to slide through with
Orbit JavaScript and viewed on any device. Simply add a variable height, we can use the
the class flex-video as a containing Clearing plug-in. Again, wrap the code
<div> around your video. in a row class with the grid columns,
09 Before the ending </
body> tag there is an initial
Foundation JavaScript, simply used
001 <div class=”row”>
open a <ul> and apply a class of
clearing-thumbs and a data-attribute
to call all plug-ins on the page. Using
this we can customise the plug-in
initialisation. We can configure the
options for the Orbit plug-in, so let’s “Foundation contains a whole host of
change the default slide effect to a
fade animation and change the speed helpful components and the best place
at which it rotates.
to read and understand all this is by
001
002
<script>
$(document).foundation({ looking at their detailed documentation
003 orbit: {
004
005
animation: ‘fade’,
animation_speed:500,
at foundation.zurb.com/docs/index.html.”
97
 Responsive design Build a custom Foundation template

Let’s create a contact form: first, open

a <form> tag and within this give it
a data-abide data-attribute to enable
validation. Make sure the input field
has a required attribute with a pattern
to define restraints on what users
should input.

001 <form data-abide>

002 <div class=”name-field”>
003 <label>Name:
004 <input type=”text”
placeholder=”
James Smith”
required pattern=”
[a-zA-Z]+” />
005 </label>
<above>
The Orbit plug-in cannot handle variable height images but the Clearing Lightbox plug-in can
and makes scrolling through images friendly 006 </div>
007 </form>

001 .gallery {
of data-clearing. Each <li> item will act
as a separate photo slide.
002 padding: 20px 0; Error message
003 background-color: #f2f2f2;
004 }
001
002
<div class=”row gallery”>
<div class=”large-12
columns”>
005
006
.clearing-thumbs li {
margin: 0 20px 20px 0;
17 If you do not fill out the input
field or input the incorrect data
this will return an error. However this
007 }
003 <h2>Gallery</h2> does not display an error message to
008 .clearing-thumbs li:first-child
004 <p>View our latest
{ the user, which is not helpful. To apply
photos</p>
009 margin-left: 10px; an error message, add a <small> tag
005 <hr />
010 } with the class error and place your
006 <ul class=”clearing-
thumbs”data-clearing> error message within this.
007 <li> Common styles
008 <a href=”img/ 001 <small class=”error”>Please
photo.jpg”> enter your name</small>
009 <img src=”img/
photo.jpg”
15 To create a uniformed look and
give all our elements equal
spacing, we’ll style the main content, Email input
alt=”” data-caption=”Text to go
here” /> gallery and the subsequent contact
010
011
012
</a>
</li>
</ul>
form (in the following step) with some
margin and make the content aligned
centre. If you ever use Sass with
18 It’s the same markup again to
set the email input field, use
the input type attribute and place
013 </div> Foundation, you can always use the @ the pattern name within this to help
014 </div> validate the input field. To set an error
extend for this case.
014 </div>
message within the same <div>, add
001 .main-content, .gallery, the <small> tag with the class error.
Gallery styles .contact-us {
002 margin-bottom: 30px; 001 <div class=“email-field”>
003 text-align: center; 002 <label>Email:

14 Let’s apply some styling to the

gallery. We’ll give this section a
light grey background and some top
004 } 003 <input type=”email”
placeholder=

and bottom padding. Each <li> item Contact form ”[email protected]” required
/>
will have a bottom and right margin 004 </label>
so they’re equally separated. Using the
CSS pseudo class first-child we can 16 Creating user-friendly and
HTML5 validation-ready forms
is wonderfully simple in Foundation.
005

006
<small class=”error”>
Please enter your email</small>
</div>
give the first <li> item a margin-left.

98
 Build a custom Foundation template Responsive design

gradient(180deg, rgb
Message field 12 columns grid within our content.
(43, 43, 43) 30%, rgb(29, 29,
We will then separate the footer to 29) 70%);
two equal halves using two children 007 }
19 A contact form would not be
complete without a message
field. Similarly to our input fields we
large-6 column grids.

001 <footer class=”row”>

created previously, and using the 002 <div class=”large-12
same <div> structure, we will place a columns”>
<textarea> in place of the input field. 003 <hr />
Again, apply an error message directly 004 <div class=”large-6
below this. Following this we also add columns”>
005 <p>&copy;Copyright
a Submit button to finish it off.
notice to go here</
p>
001 <div class=“message-field”>
006 </div>
002 <label>Message:
007 <div class=”large-6
003 <textarea
columns”>
placeholder=”Enter your
008 <ul class=”inline-
comments here” required></
list right”>
textarea>
009 <li>
Foundation’s wide
004
005
</label>
<small class=”error”>Please
010 <a range of navigation
enter your comments</small>
href=”#”>Link
4</a>
options
006 </div>
011 </li>
007 <button type=”submit”>Submit</
012 </ul>
Foundation offers a wide
button> range of navigation options
013 </div>
014 </div> and within this tutorial we’ve
Form styles 015 </footer> only covered Top Bar, which
functions as a main
Style the footer navigation includes
20 Now with our HTML structure
of our contact form completed,
we can look at applying some styling.
incorporating a complex
responsive drop-down
Because Foundation has a lot of
in-built default styles, we don’t need
22 Finally we’ll style our footer.
Let’s give this a gradient
background colour of a light black
menu. You also have
additional options to easily
to heavily customise the form styling – make this navigation stick to
fading into a dark black. Included
and it’s already responsive. We will just the top of the web browser.
are some browser vendor prefixes.
make sure the labels are aligned to the Other popular navigation
And that’s all it takes! We’ve quickly
left and provide an explicit height for choices include Off Canvas,
constructed our own custom
the <textarea> field. which many may have seen
template using the Foundation
on mobile devices. This type
framework and haven’t had to write
001 label { of navigation is positioned
our own components, with minimal
002 text-align: left; outside of the viewport and
003 color: #666; styling involved.
slides in when activated by
004 } the user. Again, as it is highly
005 textarea { 001 footer {
002 color: #fff; customisable, you could
006 height: 200px;
007 } 003 background: rgb(43, 43, 43); even have menus appearing
004 background: -moz-linear- on both sides of the canvas.
gradient(90deg, Other more simplified
Build the footer rgb(43, 43, 43) 30%, rgb(29, 29, navigation options that help
29) 70%);
keep track of the page while
005 background: -webkit-linear-
21 No website template would be
complete without a footer. Let’s
add a <footer> tag that wraps the
gradient
(90deg, rgb(43, 43, 43) 30%,
scrolling is Magellan. It acts
like a Sub Nav but remains in
rgb a fixed position at the top of
footer content inside. Again we’ll need (29, 29, 29) 70%); your screen.
to dictate a row class and wrap a large- 006 background: linear-

99
 Responsive design Build a responsive WordPress theme

Build a responsive
WordPress theme
As the most advanced responsive framework available, Zurb’s Foundation is
ideal for your latest WordPress project
Previously to incorporate Zurb’s Foundation framework into WordPress you had to manually link the
necessary JavaScript and CSS using the WordPress functions ‘wp_enqueue_script’ and w’p_enqueue_
style’. But now, thanks to Zurb and the popularity of WordPress, Zurb has provided a starter-theme
called FoundationPress, which you can download directly from its GitHub page to start building your
own WordPress theme with the Foundation framework.
The purpose of this ultimate starter theme is to act as a springboard; it comes packed with useful
re-useable components, a 12-column responsive grid, JavaScript functions and much more. This starter
theme contains all the necessary design elements, including the JavaScript and CSS libraries.
Still, FoundationPress is not an all-in-one WordPress theme with plugins, shortcodes, custom
options or custom templates – it is only to be used as a starting point. Luckily it has done most of the
hard work for us including setting up widgets, navigations, displaying blog posts and general clean-up
of WordPress.
100
 Build a responsive WordPress theme Responsive design

Start building responsive WordPress themes using Zurb’s own advance You can download Zurb’s Foundation WordPress starter theme,
Foundation framework starter theme, conveniently called FoundationPress, with ease over on GitHub
FoundationPress

Download href=”<?php echo get_template_ the following HTML code.

FoundationPress directory_uri(); ?>/style.css”
/>
001 <header class=“main-head”>

01 To begin, make sure you have 002 <div class=”row”>

the latest version of WordPress Customise the menu 003 <div class=”large-12
columns”>
installed and set up. Head over to
004 <h1 class=”title”><?php
the FoundationPress starter theme
GitHub page: github.com/olefredrik/
foundationpress and download this
03 WordPress already features a
built-in Appearance Menus
Screen, enabling users to create 005
bloginfo
( ‘name’ ); ?></h1>
</div>
theme. Once you’ve downloaded custom navigation. FoundationPress 006 </div>
it, extract it and upload it to your takes this a step further by allowing 007 </header>
theme’s directory in WordPress and us to create multiple navigations on
activate it. either side on the nav bar. When you Style the header
create a new menu in WordPress,
Custom stylesheet you have the option to enable your
navigations for mobile devices. 05 With our header implemented
we’ll now need to style

02 Start by opening up the

‘header.php’ file in your text
editor. You’ll want to add in your own
Customise the header
it. Open up ‘style.css’ in the
FoundationPress starter theme,
start by giving the main header a
custom stylesheet so that when it
comes to upgrading FoundationPress
it won’t override any custom work.
04 FoundationPress has already
written a lot of the WordPress
basic theming. We’re going to dive
gradient background, using CSS3
gradient. Position the main h1 above
the header. Let’s make all characters
You may use Sass with Foundation, in and modify it. To give this theme upper-case and give it a text shadow
but to allow beginners to follow along a visual punch we’re going to add to stand out from the light backdrop.
this tutorial, we’ll be using pure CSS. in a header with the website name,
including a gradient background. 001 .main-head {
001 <link rel=“stylesheet” 002 margin-bottom: 2em;
Open up the ‘header.php’ and paste in

101
 Responsive design Build a responsive WordPress theme

<top> <bottom>
In WordPress, activate FoundationPress starter FoundationPress allows you to order menus to be
theme. This theme includes all the Foundation on the left or right side of the menu and enable
framework library for mobiles

003 padding: 1.2em;

Add a search form by editing the ‘searchform.php’.
004 background: #00b3d3;
005 background: -moz-radial-
Directly below the form tag we have
gradient(center,ellipse cover,#00b3d3 applied a row <div> and changed the

006
0%, #007295 100%);
background: -webkit-
06 Currently in our widgets list,
the search form is located in
the sidebar. In WordPress Widgets
default grid layout to use the large grid
system as well as setting some custom
gradient(radial, center classes to be referenced in our CSS.
center, 0px, center center, we can disable the search widget.
100%, color-stop(0%,#00b3d3), Now inside our ‘head.php’ at the 001 <div class=“row”>
color-stop (100%,#007295)); very bottom, paste in the following 002 <?php do_action
007 background: -webkit-radial- function, which will print out the (‘foundationPress_
gradient (center, ellipse search form. We’re going to place our searchform_top’); ?>
cover, #00b3d3 0%,#007295 100%); search form just below the header of 003 <div class=“large-8 columns
008 } searchbox”>
our website.
009 .main-head h1 { 004 <input type=“text” value=“”
010 text-align: center; name=“s”id=“s”placeholder
001 <?php get_search_form(); ?>
011 font-weight: 900; =”<?php esc_attr_e(‘Search’,
012 text-transform: uppercase; ‘FoundationPress’);?>”>
013 letter-spacing: 10px; Customise search 005 </div>
014 text-shadow: 1px 1px 2px rgba 006 <?php do_
(50, 50, 50, 0.59); action(‘foundationPress_
015
016
font-size: 2.5rem;
color: #fff;}
07 With the get search form
function added in our ‘header.
php’ we can now structure this search
searchform_before_search_
button’); ?>

102
 Build a responsive WordPress theme Responsive design

007 <div class=“large-4 columns has_post_ 008 }

searchbutton”> thumbnail() ) {the_ 009
008 <input type=“submit” post_thumbnail
id=“searchsubmit”value (‘large’); } ?></a></
=“<?php esc_attr_e figure>
Style search form
(‘Search’,‘FoundationPress’); 008 <?php the_excerpt(); ?>

009
?>” class=”prefix button”>
</div>
009 <p>Posted on <?php
the_time(‘F jS, Y
’); ?> in <?php the_
11 With our blog posts neatly
organised in a row of threes,
our search field and search button are
category(‘, ‘);
Modify index.php ?></p>
not quite aligned with the rest of the
design. Let’s fix this by adding some
010 <p class=”byline
padding. With a mobile-first approach,
08 The ‘index.php’ is the main
template in WordPress
theming hierarchy. We’re going to
author”>Written by
<?php the_author_posts_
link(); ?>
Foundation takes care of the
responsive nature – it’s unnecessary to
modify it and remove some of the </p> add styles for mobile or tablet devices.
011 <a href=”<?php the_
grid components and place them in
permalink(); ?>” 001 .searchbox, .searchbutton {
‘content.php’ instead. Remove the class=”button”>Read 002 padding: 0 15px;
<div> row and grid classes just below more</a> 003 }
the ‘get_header’ function and replace 012 </div> 004
it with the code below. Finally, migrate
the <?php get_sidebar(); ?> just above Style the blog Move the sidebar
the ‘get_footer’ function.

001
002
<?php get_header(); ?>
<div class=”row” data-equalizer> 10 With our blog post structure
set up in a grid column in a set
of threes, we’ll now implement some
12 Rather than having our sidebar
situated on the right-hand
column, we will position it directly
simple styling to this homepage. Back below all the blog posts and just
Blog post in our ‘style.css’, we’ll add some box above the footer. Inside the ‘sidebar.
shadow so the panels don’t look so php’ we’re going to use Foundation’s

09 With the homepage structure

completed, we’ll want to
structure each blog post in a grid
flat. We don’t need to style the panels
themselves as these styles are already
Equalizer component, which will set
equal height to all the widget panels.
set up inside Foundation. We simply place the data-equalizer
column of four rows; this will lay out attribute to the parent container here.
three blog posts organised next to 001 <div class=”row main-content”>
each other on a large monitor. Using 002 <div class=”large-12 001 <div class=”bottom-sidebar”>
the grid system will force our layout columns”> 002 <aside id=”sidebar”
to be responsive. Remove the original 003 <h1>Our latest work</h1> class=”row” data-equalizer>
004 <p>Lorem ipsum….</p> 003 <?php do_action
code all the way down to the <footer>
005 <img src=”img/photo.png” (‘foundationPress_
tag in ‘content.php’.
alt=”” /> before_sidebar’); ?>
006 </div> 004 <?php dynamic_
001 <div class=”large-4 columns”
007 </div> sidebar(“sidebar-widgets”);
role=”main”>
002 <article id=”post-<?php the_
ID(); ?>”
<?php post_class(‘panel’); ?>

003
data-equalizer-watch>
<header>
“Working with Sass provides greater
004 <h2><a href=”<?php
the_permalink();
flexibility and control over this theme. All
?>”><?php the_title();
?></a></h2>
Sass variables are located in scss/config/_
005
006
</header>
<div class=”entry-content”> variables.scss and your site structure
007 <figure><a href=”<?php
the_permalink
(); ?>”><?php if (
within scss/site/_structure. ”
103
 Responsive design Build a responsive WordPress theme

<top left>
Easily set up and use shortcodes in your
site to take advantage of Foundation’s
library of components
<bottom left>
Using WordPress shortcodes, we were
able to add Foundation’s alert box
components throughout the site

?> 001 function foundation_add_alerts

three widgets so remove any of the
005 <?php ( $atts, $content = null ) {
do_action(‘foundationPress_
other existing ones. When you 002 extract( shortcode_atts(
after_sidebar’); ?> check the homepage you will notice array(
006 </aside> our widget panels all have equal 003 ‘type’ => ‘’,
007 </div> heights to the tallest panel. To finish 004 ‘shape’ => ‘’,
up with our sidebar beneath our 005 ‘close’ => ‘true’,
006 ‘class’ => ‘’
Widgets blog posts, we will give this section its
007 ), $atts ) );
own background colour and
008
some padding.
13 Now to actually lay out our
widgets, we will need to open
up the ‘widget-areas.php’ located
001
002
.bottom-sidebar {
padding-top: 10px;
Shortcode array
in the library directory. Inside the 003 background-color: #cecece;
first array on line 8, remove what is
currently there and replace it with the
004
005
}
16 In the previous code snippet
we noted that our function
receives the parameters of type, shape
below, which uses the large-4 grid and
a ‘data-equalizer-watch’ attribute that Set up shortcodes and close. We’re going to use this
to display alert boxes using one of
the Equalizer component requires to
Foundation’s components. The type
set equal heights to each panel.

001 ‘before_widget’ => ‘<article

15 There are many components
available in Foundation,
we convert some of them into
attribute will display success, warnings
or informative information using this
id=”%1$s”class=”widget %2$s shortcodes so that we can reuse shortcode. Let’s set up an array that
large-4 columns”><div
these components whenever we’re will capture these attributes.
class=”panel” data-equalizer-watch>’,
in the editor. Creating shortcodes 001 $class_array[] = ( $shape ) ?
requires two steps: create a primary $shape : ‘’;
Style the sidebar handler method and connect 002 $class_array[] = ( $type ) ?
the handler to WordPress. Inside $type : ‘’;

14 Within WordPress in the

Widgets panel, we only require
‘functions.php’ set up our primary
function. Listed here.
003 $class_array[] = ( $class ) ?
$class : ‘’;

104
 Build a responsive WordPress theme Responsive design

004 $class_array = array_filter( 004 <?php wp_list_pages();

$class_array ); Shortcodes to use ?>
005 $classes = implode( ‘ ‘, $class_ 005 </ul>
array ); 006 <?php do_
19 We can now use the following
shortcodes in the editor to
display alert boxes, which is a native
action(‘foundationPress_
before_footer’); ?>
007 <?php dynamic_
Shortcode markup component from the Foundation sidebar(“footer-
framework. All we have to do is pass widgets”); ?>
in which type of alert box type we
17 When this shortcode is
executed we want to make
sure that it’s using the correct
want displayed by selecting the
attributes: success, secondary or alert.
008 <?php do_
action(‘foundationPress_
after_footer’); ?>
We can even choose what type of 009 </div>
formatted markup and CSS classes.
010 </footer>
We need to use a wrapping class shape to use and whether we want a
alert-box. This is very important close off function.
because we want to make sure Style the footer
that Foundation calls the Alert 001 [alert type=”success”
shape=”radius”
JavaScript plugin for us. This particular
plugin is in fact handled in the
‘foundation.alert.js’.
close=”true”]This is a success
message[/alert]
22 Finally, we’re just adding
the final touches by styling
up our footer. Through this tutorial
002 [alert type=”secondary)”
shape=”radius” we’ve taken the starter theme
001 $output = ‘<div class=“alert- close=”true”]This is a standard FoundationPress and quickly
box ‘ . $classes . ‘”>’; message[/alert] customised it as our own theme
002 $output .= do_shortcode( 003 [alert type=”alert” shape=”round” using a variety of Foundation’s
$content ); close=”false”]This is an alert
003 $output .= ( ‘false’ components and functionality. Using
message[/alert]
!= $close ) ? ‘<a FoundationPress allowed us to focus
class=“close” href=“”>&times;</ on the front-end development and
a>’ : ‘’; Alert boxes less on the actual backend efforts.
004 $output .= ‘</div>’;
005 return $output; 001 .main-footer {
006
007
}
20 Without any CSS styling or
JavaScript and just using the
shortcodes we have set up, we can
002
003
padding: 10px 0;
background-color: #9c9c9c;
004 }
implement alert boxes wherever we 005 .pagenav ul {
Hook into WordPress like in our WordPress site. By simply 006 margin: 10px 0 0 0;
using shortcodes we can easily 007 }

18 Before finishing off our

shortcode we’re going to
ensure that it has all been registered
convert many of the rich components
from Foundation to be used easily
throughout our site.
008
009
010
.main-footer li {
float:left;
margin-right: 10px;
011 list-style: none;
correctly, otherwise WordPress won’t
012 }
know what to do with it. To do this Footer 013
we use the ‘register_shortcodes’
function and the ‘add_shortcode’
method. The first parameter defines
the shortcode in the editor while the
21 To finish up we’re just going to
add in a footer navigation by
using the WordPress WP list pages.
second points to the function that we Open up the ‘footer.php’ and just
created previously. below the closing </section> tag,
remove everything including the
001 function register_shortcodes() { <footer> tag. Replace it with the
002 add_shortcode(‘alert’, following code, which will display a list
‘foundation_add_alerts’); of all pages on our site.
003 }
004 add_action(‘init’, 001 <footer class=”main-footer”> Here we have our fully responsive
‘register_ shortcodes’); 002 <div class=”row” WordPress site, resizing to perfectly
003 <ul> display on all screen sizes

105
 Responsive design Make a responsive menu for a retina screen

Make a responsive
menu for a retina screen
Make sure your menu is both responsive and ready for
retina screens by using custom fonts instead of images

Designing the navigation element for your website in this age of mobile devices and differing screen
widths can be a real pain in the mouse. Balancing usability with aesthetic credibility is the challenge that
responsive design now presents to all designers. There are a wide variety of solutions and techniques
available to solve the issue, from fixed drop-down menus to side-sliding variations. The problem is that,
while these solutions all solve the problem of maintaining functionality at different screen widths, they
can sometimes lacking visual impact.
These days it’s nice to see a menu that remembers to look good, too. Longer, scrolling pages are
reducing the number of menu elements some sites need to present, and those sites, in particular, can
afford to be a little more adventurous with how they deliver the navigation. So it’s time to give the
responsive menu a much needed paint job and raise it above the purely functional. This tutorial will
demonstrate how to create a responsive menu that is both eminently usable and visually striking. And
to keep it retina friendly, we’ll be using a custom-made icon font rather than images.

As more and more screen sizes flood into the market, it pays to keep your responsive elements as simple as possible to avoid meeting a width they can’t
deal with. Having three breakpoints, roughly representing PC, tablet and smartphone, is a tried and trusted approach to this problem

106
 Make a responsive menu for a retina screen Responsive design

uniF4F1,.icon-skull,.icon-uniF539,. 010 }
Choose your icons icon-rocket,.icon-menu { 011 header {
012 font-family: 'icomoon'; 012 text-align: center;
013 speak: none; 013 font-size: 16px;
01 In order to create the custom
icon font, we’ll be using the
excellent IcoMoon tools at icomoon.
014
015
font-style: normal;
font-weight: normal;
014 background:
rgba(255,255,255,0.6); 015 }
016 font-variant: normal; 015 header h1 {
io/app/#/select. You have a choice 017 text-transform: none; 016 font-family: 'Hammersmith
here of creating your own icons as 018 line-height: 1; One', sans- serif;
vector images to import into the font 019 -webkit-font-smoothing: 017 font-size: 75px;
creator or choose from the extensive antialiased; 018 line-height: 0.8;
selection already available. We’ll 020 } 019 margin: 0;
choose ours from the library as they 021 .icon-happy:before {content: 020 font-weight: 300;
"\e603";}022 .icon-loved:before 021 color:#3f3782;
have exactly what we need.
{content: "\e61c";} 022 }

 Create
  a custom font 023 .icon-uniF4F1:before {content:
"\e613";}
023 .movie {
024 font-size:102px;
024 .icon-skull:before {content: "\ 025 color:#e63c2b;

02 Having selected your icons,

click the bottom Font button.
e607";}
025 .icon-uniF539:before {content:
"\e612";}026 .icon-rocket:before
026 }

On the next page, you can amend

{content: "\e600";} Menu HTML
the icon’s tags and corresponding 027
letters used to call each icon. Click on
Download and you will get access
to the folder with its font files and Base CSS 05 Create your menu <ul> using
span classes for both the icon
and the text label. The span class ‘fon’
stylesheet. Place the font folder into will create the styling for the custom
your root.

Add the custom font

04 Before we start putting all
the menu HTML into the
index.html, we just need to prepare
icons, while the class ‘item’ is used for
the labels. The icon name, as declared
in the IcoMoon CSS calls each custom
some base CSS for the project. Start
icon to its element.
by creating a container, main <div>
03 Copy the custom CSS that
came with your download
and paste it into the top of your site
and a header into which the site
title will be placed, making sure to
001 <div class="container">
002 <header>
stylesheet. Ensure that the path for the call the stylesheet in the head. Use 003 <h1>LONDON<br><span
font files is still correct. You may also the following CSS to style the class="movie">MOVIE</span><br>REVIEWS</
wrapping elements. h1>
want to make sure that each icon is 004 </header>
assigned to the font family individually 001 .main, 005 <div class="main">
by name rather than with the default 002 .container > header { 006 <nav id="menu" class="nav">
blanket icon class. 003 width: 100%; 007 <ul>
004 margin: 0 auto; 008 <li><a href="#"><span class="fon
001 @font-face {
005 padding: 16px 32px; ico- happy"></span><span
002 font-family: 'icomoon';
006 } class="item">COMEDY</span></a></li>
003 src: url('../fonts/icomoon.eot');
007 .main { 009 <li><a href="#"><span class="fon
004 src: url('../fonts/icomoon.
008 max-width: 1300px; ico- loved"></span><span
eot?#iefix')format('embedded-
009 min-height: 640px; class="item">ROMANCE</ span></a></li>
opentype'),
005 url('../fonts/icomoon.
woff') format('woff'),
006 url('../fonts/icomoon.
ttf') format('truetype')
007 url('../fonts/icomoon.
“Avatars are the images that appear
svg#icomoon') format('svg');
008 font-weight: normal;
alongside comments. It’s worth allowing
009 font-style: normal;
010 } them because they brighten them up”
011 .icon-happy,.icon-loved,.icon-

107
 Responsive design Make a responsive menu for a retina screen

As more and more screen sizes flood into the market, it pays to keep your responsive elements as simple as possible to avoid meeting a width they can’t
deal with. Having three breakpoints, roughly representing PC, tablet and smartphone, is a tried and trusted approach to this problem

010 <li><a href="#"><span class="fon

Large screen query change their colour to match the
ico- uniF4F1"></span><span
class="item">ACTION</span></a></li>
appearing label. Both elements are
011 <li><a href="#"><span class="fon now black from white.
ico- skull"></span><span
class="item">HORROR</span></a></li>
07 Our first media query targets
screens of 800px or more. The
layout is a horizontal strip of rounded
Second transition step
012 <li><a href="#"><span class="fon
ico- uniF539"></span><span squares, with each element at a
class="item">DRAMA</ span></a></li>
013 <li><a href="#"><span class="fon
percentage for maximum flexibility.
Icon and label are stacked one above 09 The black characters don’t
look bad against the coloured
elements, but what would really
ico- rocket"></span><span the other. We set the position and size
class="item">SCI-FI</span></a></li> of our ‘.fon’ icon, while the ‘.item’ label make the highlighted icon stand out
014 </ul>
begins opaque, to be animated later is having no background at all. So,
015 </nav> we’ll add a transition that fades out
016 </div> the background on hover, leaving just
017 </div> First transition step the icon and visible label. We can also
close that first media query here.
Non-media query CSS
08 Now we can arrange hover
effects. The first step will see
the .item label fade in on hover, with
001 .nav li:hover {
002 background:none;

06 There are some styles that

apply to all three of the
upcoming menu sizes, setting some
a .5s transition, while the ‘.fon’ icons 003 -moz-transition: background

navigation styles and using a WebKit

trick to eliminate blue bordering
on click. Here we also colour our “So, we’ll add a transition that fades out
navigation element backgrounds,
using the nth property to alternate the the background on hover, leaving just
colour between the site theme red
and blue. the icon and visible label”
108
 Make a responsive menu for a retina screen Responsive design

.5s; 007 }
styles are completed, so make sure
004 -o-transition: background 008
.5s;
you remember to close the media
005 -ms-transition: background .5s; query here.
006 transition: background .5s; Second media query
007 } 001 .nav li:hover {
002 background:rgba(0,0,0,0.9);
008 }
11 Our second media query
targets screen widths between
003
.5s;
-moz-transition: background

Add the background 520px and 799px, which covers 004 -o-transition: background
tablet screens and some larger .5s;
smartphones at landscape. Our layout 005 -ms-transition: background

10 We’ll finish off the site

properly with an appropriate
background image. In keeping with
will differ considerably at this size. Two
rows of three blocks, no margins and
.5s;
006 transition: background .5s;
no rounded corners. Our fonts are 007 }
the London Underground theme, 008 .nav a:hover .fon,
also considerably smaller and sit side
we’re using for our London Movie site, 009 .nav a:active .fon,
by side.
we’re going with a white tile motif, 010 .nav a:active .item,
and making sure the Google font is 011 .nav a:hover .item{
used throughout.
Tablet animation 012 color:rgba(259,259,259,0.9);
013 -webkit-transition: color
.5s;
001 body {
002 font-family: 'Hammersmith
One', sans- serif;
12 In a reversal of our hover
effects for large screens, this
time we’re going to change the
014
015
-moz-transition: color .5s;
-o-transition: color .5s;
003 background: url(../img/bg.jpg); 016 -ms-transition: color .5s;
background colour of the li element 017 transition: color .5s;
004 }
to black and give the white font and 018 }
005 margin: 20px;
006 border: 1px solid red; /* icon an off-white shade and a very 019 }
take off asap */ slight fade. With that, all of the tablet 020

Rather than having to adapt the layout per screen width, we’ll use each breakpoint as an opportunity for redesigning

109
 Responsive design Make a responsive menu for a retina screen

Target smaller screens Small screen transitions Last transition

13 The final media query sets the

layout for screens smaller than
520px, targeting smartphones. Since
16 This time, we’ll still fade out
the background of the clicked
element, but change the icon and
17 Next, we’re coding the blue
elements. Close the media
query and we’re done. We now have
we have so few menu elements, we label to the same colour as the three very distinct layouts between
can be bold and eschew the trend for background it sits on. The CSS used the three breakpoints. Your menu at
JavaScript drop-down menus. We’ll here fades the background of all li small-screen width doesn’t have to
also lose the corners and have six elements on hover, but the colour be a small version of the large screen
circular elements, with icon and label changes will be done separately. Here layout. You have the chance to give
fitting together snugly. we deal with the red elements. each menu its own design.

Header and fonts

14 The font sizes for the site title

need to be reduced for this
screen size, using iPhone as a guide.
We can also allow for a nice, large font
size for our icon and we need to make
sure that fumbling fingers are able to
click on the elements. Notice that the
icons remain crisp at all sizes – that’s
the benefit of our custom font.

Background changes

15 Since the order of the elements

has now changed, we’ll
need to do some tweaking to the
background colours. At the moment
we have one column of red and one
column of blue, which looks a little bit
odd. In order to keep the alternating
pattern, we need to arrange a one,
two, two, one repeat of the colours.
001 .nav li:nth-child(6n+1) {
002 background: rgb(230, 60, 43);
003 }
004 .nav li:nth-child(6n+2) {
005 background: rgb(63, 55, 130);
006 }
007 .nav li:nth-child(6n+3) {
008 background: rgb(63, 55, 130);
009 }
010 .nav li:nth-child(6n+4) {
011 background: rgb(230, 60, 43);
012 }
013 .nav li:nth-child(6n+5) {
014 background: rgb(230, 60, 43);
015 }
Having fewer menu elements means that we can avoid having to hide them. Instead we can
016 .nav li:nth-child(6n+6) { arrange them within our screen space
017 background: rgb(63, 55, 130);}

110
 Make a responsive menu for a retina screen Responsive design

The HTML in full

In this tutorial we’ve covered all of the CSS in detail, so now we take the
opportunity to get a closer look at the inner workings of the HTML
001 <!DOCTYPE html>
002 <html lang="en">
003 <head>
004 <meta charset="UTF-8" />
005 <meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
006 <meta name="viewport" content="width=device-width, initial-
IE will use its most up-to-date
scale=1.0, user-scalable=no">
rendering engine. Chrome=1
007 <title>London Movie Reviews</title>
activates the Chrome Frame
008 <link rel="stylesheet" type="text/css" href="css/style. css"
plug-in for early IE versions
/>
009 <link href='http://fonts.googleapis.com/
Here we tell the browser that css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
the site is mobile ready and 010 </head>
make sure the user can’t scale 011 <body>
the content, which they don’t 012 <div class="container">
need to do 013 <header>
014 <h1>LONDON<br><span class="movie">MOVIE</
span><br>REVIEWS</
Make sure you remember 015 h1>
to include the Google Font 016 </header>
declaration in the head of 017 <div class="main">
your index.html 018 <nav class="nav">
019 <ul>
020 <li><a href="#"><span class="fon icon-happy"></span><span
class="item">COMEDY</span></a></li>
021 <li><a href="#"><span class="fon icon-loved"></
span><span class="item">ROMANCE</span></a></li>
022 <li><a href="#"><span class="fon icon-uniF4F1"></span><span
class="item">ACTION</span></a></li>
023 <li><a href="#"><span class="fon icon-skull"></span><span
class="item">HORROR</span></a></li>
024 <li><a href="#"><span class="fon icon-uniF539"></span><span
class="item">DRAMA</span></a></li>
025 <li><a href="#"><span class="fon icon-rocket"></span><span
class="item">SCI-FI</span></a></li>
Though it may seem
026 $(window).scroll(function(){
span-heavy, the span is one
027 </ul>
of the most under-
028 </nav>
appreciated HTML elements.
029 </div>
Use them freely!
030 </div>
031 </body>
032 </html>

“Your menu doesn’t have to be a small

version of the large screen layout. You
can give each menu its own design”
111
 Responsive design Techniques for creating responsive typography

Techniques for creating

responsive typography
Make your typography responsive to deliver a first class user
experience on every device

If you look across a range of interests you’ll often find some mixed-up priorities. In photography, many
beginners focus on the best camera body they can afford whereas experienced photographers know
it’s the quality of the lens that’s all-important. Some golfers will spend hours at the driving range but
completely neglect their short game.
With responsive web design, the temptation can be to concentrate on the overall layout, and which
divs do what as the viewpoint changes, but what about your text? People have arrived at your site to
read what you have to say and if they don’t find it easy or enjoyable they simply won’t stay. If you want
your website to be responsive and effective then you really need to know a little about responsive
typography. As with many other web design disciplines you’ll have to deal with browser compatibility
issues, and as you venture further, you’ll appreciate the diversity of the issues you need to consider and
the refinements that are possible. You can achieve a great deal with CSS only but there are also a few
handy jQuery plugins too. It’s time to focus on the typography.

Part science and part art; knowing

some principles of typography
and the techniques for controlling
it responsively will take you so
far, but you’ll still want to review
and tweak your layouts to ensure
they are both readable and
aesthetically pleasing

112
 Techniques for creating responsive typography Responsive design

The measure of it one column of text you’ll need to typically use smaller rem values. You
allow plenty of negative space around will also tend to use much narrower
the text block to ensure a good user margins to enable you to make the
01 For optimum readability your
line length (or measure) should
be 45-75 characters. Within sensible
experience. The img element shows
an example of using rem units to set a
most of the available screen space.
001 /* ===== == = 37.5em (600px) =
relative size to the bottom margin. == ===== */
limits, select your font and the width
it is to occupy. You can then set the 002 @media only screen and
001 #page-wrap { (min-width: 37.5em) {
font-size of your body text. In this 002 width: 60%; 003 html {font-size: 16px;}
case the size is set to 18px in the root 003 margin: 100px auto; 004 #page-wrap { width: 75%;
element ‘html’. 004 } margin: 2rem
005 img { auto; }
001 @import url(http://fonts. 006 max-width: 90%; 005 }
googleapis.com/ 007 margin-bottom: 2rem; 006 /* ===== == = 48em (768px) = ==
css?family=Droid+Serif|Quando); 008 box-shadow: 0 0 8px ===== */
002 * { #333333; 007 @media only screen and (min-width
003 margin: 0; 009 } : 48em) {
004 padding: 0; 010 008 html {font-size: 18px;}
005 } 009 #page-wrap { width: 65%;
006 html { font-size: 18px;
007 font-family: ‘Droid Serif’,
Breakpoints margin: 2.5rem
auto; }
serif; 010 }
008
009
010 }
background-color: #e7bb4a;
color: #333; 04 Decide on the breakpoints
to use for your site. Using
ems means your breakpoints will be Large and bold
011 respected even if the user changes

Keep it relative
the text zoom in their browser. At
each breakpoint you have the
opportunity to tweak the factors that
06 At larger sizes you’ll really want
to make use of impressively
sized headings and large margins to
will affect the readability of the text at give each element its own space.
02 Using rem units (as in h2 here)
enables the relative size of the
element to be fixed according to the
that screen size. 001 /* ===== == = 56.25em (900px) =
== ===== */
001 /* ===== == = 20em (320px) = ==
root element. You might have several ===== */
002 @media only screen and (min-width
dozen rem-sized elements in your :
002 @media only screen and (min-width
document and simply changing the 56.25em) {
: 20em) {
003 html {font-size: 20px;}
font-size in your html element will 003 html {font-size: 12px;}
004 #page-wrap { width: 60%;
automatically change their size. 004 #page-wrap { width: 85%; margin:
margin: 3rem
1rem
auto; }
auto; }
001 h2 { font-size: 2.8rem; 005 }
005 }
002 margin-bottom: 15px; 006 /* ===== == = 68.75em (1100px) =
006 /* ===== == = 30em (480px) = ==
003 font-family: ‘Quando’, serif; == ===== */
===== */
004 color: #a2422a; 007 @media only screen and (min-width
007 @media only screen and (min-width
005 } :
: 30em) {
006 p { 68.75em) {
008 html {font-size: 14px;}
007 line-height: 1.45; 008 html {font-size: 22px;}
009 #page-wrap { width: 80%;
008 margin-bottom: 20px; 009 #page-wrap { width: 55%;
margin:
009 } margin: 3.5rem
1.5rem auto; }
010 auto; }
010 }
010 }
011 /* ===== == = 81.25em (1300px) =
Manage your widths Subtle and small == ===== */
012 @media only screen and (min-width

03 Remember that maintaining :

suitable column widths is
essential in achieving good readability.
05 On smaller screens the
difference between your
largest heading and smallest text
013
81.25em) {
html {font-size: 24px;}
014 #page-wrap { width: 50%;
On a desktop screen, if you have only should be reduced, so you will

113
 Responsive design Techniques for creating responsive typography

Headline text is the most noticable text on a page and any good headline should scale down so it is easy to read on all screens.
FitText.js is a jQuery plugin that does exactly what it says, make text fit, whatever the screen size

margin: 4rem content=”width= </script>

auto; } device-width, initial- 002 <script src=”js/flowtype.
015 } scale=1”> js”></script>
016
007 <link rel=”stylesheet”
href=”css/style.
Width=device-width css”> Max mins
008 </head>

07 Switching to the HTML, you’ll

need to set how ‘width’
is handled. This enables you to
009
09 After the HTML content you
call the FlowType script and set
several variables. The minimum and
determine how the page is scaled
Using FlowType.js maximum values are the threshold at
rather than leaving it to the device to which the plugin stops resizing text,
decide. Without this tag, smartphones
will tend to ‘zoom out’ in an attempt
08 User experience brand firm
Simple Focus developed
this plugin to simplify the process
and the minFont and maxFont the
smaller and largest size in pixels that
to show the whole page. the plugin will use.
of maintaining optimum line length
001 <!DOCTYPE html> using jQuery and without the need to
002 <html> use media queries. First you’ll need 001 <script>
003 <head> to link to jQuery and the plugin in the 002 $(‘body’).flowtype({
004 <title>Responsive Typography</ head of your HTML document. 003 minimum : 500,
title> 004 maximum : 1200,
005 <meta charset=”UTF-8” /> 001 <script src=”js/jquery- 005 minFont : 12,
006 <meta name=”viewport” 1.11.0.min.js”> 006 maxFont : 40,

114
 Techniques for creating responsive typography Responsive design

008 #page-wrap { width: 65%; margin: responsive text makes use of viewport
007 fontRatio : 45
008 }); units. Each unit is equivalent to 1% of
009 </script> 2.5em auto; }} the viewport width or height. Browser
010 009 @media only screen and support is currently lower than for rem
(min-width : 56.25em) { units but in exchange you get fully
010 #page-wrap { width: 60%; margin: fluid text and could probably make do
Font ratio with only two media queries to avoid
3em auto; }}
inappropriately small or large text.
10 Each font is different and the
fontRatio variable enables you
to tweak the font size to achieve your
001 h1 {
R for root 002 font-size: 5.9vw;
desired result. Increase the value to 003 }
make the font smaller, and vice versa. 004 h2 {
It should go without saying that you
need to check how your page looks at
12 By default, Flowtype is applied
to the body of the page.
However, as the heading is set using
005
006
007
font-size: 3.0vh;
}
p {
different widths. rem units, the heading will not be 008 font-size: 2vmin;
re-sized. There are two ways round 009 }
Media queries again this. First you can set Flowtype to 010
apply to the root element by changing

11 FlowType does a great job

of managing line lengths to
optimise readability but it won’t make
‘body’ to ‘html’ towards the bottom of
your HTML, or you can use em instead.
FitText.js

the other tweaks that you will want to

make to reflect the needs of smaller
001 $(‘html’).flowtype 15 Sometimes you might just
want help with making your
headings work nicely at all sizes.
and larger screens. You’ll still want to
use smaller margins on tiny screens
Compatibility and fallback In that case FitText.js might be the
best solution for you. Once set up,
and larger margins on big ones so a
you simply apply an id for each
simplified set of media queries can
be used.
13 For older browsers that do not
support rem you will want to
include fallback. On the face of it the
heading to be sized and when the
function is called, pass some optional
001 @media only screen and fallback is simple – just define the size configuration settings.
(min-width : 20em) { in pixels first. However, that could
002 #page-wrap { width: 85%; margin: lead to a lot of manual changes so
1em 001 <h1 id=”fittext1”>Squeeze with
you might want to explore using
auto; }} FitText
003 @media only screen and
LESS or SASS mixins to minimise
</h1>
(min-width : 30em) { duplicated code. 002 <h1 id=”fittext2”>Squeeze with
004 #page-wrap { width: 80%; margin: FitText
001 h1 { font-size: XXpx; font-
1.5em </h1>
size:
auto; }} 003 <h1 id=”fittext3”>Squeeze with
YYrem; }
005 @media only screen and FitText
(min-width: 37.5em) { </h1>
006 #page-wrap { width: 75%; margin: Viewport sized 004 $(“#fittext1”).fitText();
typography 005 $(“#fittext2”).fitText(1.2);
2em auto; }} 006 $(“#fittext3”).fitText(1.1, {
007 @media only screen and minFontSize:
(min-width : 48em) {
14 Another method, growing
in popularity, for creating ‘50px’, maxFontSize: ‘75px’ });

007

“For older browsers that do not A more modern scale

support rem you will want to
include fallback” 16 Jason Pamental (bit.ly/LdQ9Ut)
has considered the challenges
of responsive typography in great
detail. To quote Jason, “The problem

115
 Responsive design Techniques for creating responsive typography

is, as the screen size shrinks and fewer

elements are visible, the relative BODY FONT SIZE LINE CHARACTERS
scale between elements becomes HEIGHT
exaggerated. What’s needed is greater Print 12pt 1.25em 60-75
subtlety and flexibility to maintain a
more balanced proportion and better Desktop (lg) 1em (16px) 1.375em 60-75
readability across all experiences.”
Desktop 1em (16px) 1.375em 60-75
Do it online Tablet (lg) 1em (16px) 1.375em 60-75
Tablet (sm) 1em (16px) 1.25em 60-75
17 If you’d like more layout support
with a focus on typography,
typecast.com provides a suite of
Phone 1em (16px) 1.25em 35-40
online tools to rapidly prototype
and test your designs. Not for you?
Typecast’s responsive.is adds a utility
bar to the top of your page where you
“You can check sites based on five
can check sites based on five different different breakpoints all without having
breakpoints all without having to
re-size your browser manually. to re-size your browser manually”

116
 Techniques for creating responsive typography Responsive design

FlowType.js
Simple Focus is the name of the agency that developed this
plugin which is apt here as the code is both simple and focused.
001 (function($) {
002 $.fn.flowtype = function(options) {
Variables are set here, but can
be overridden when the plugin 003 // Establish default settings/variables
is called in the HTML 004 // ====================================
005 var settings = $.extend({
006 maximum : 9999,
007 minimum : 1,
008 maxFont : 9999,
009 minFont : 1,
010 fontRatio : 35
011 }, options),

012 // Do the magic math

The width of the element is 013 // =================
checked to see if it is outside 014 changes = function(el) {
the maximum and minimum 015 var $el = $(el),
parameters, in which case the 016 elw = $el.width(),
maximum or minimum values 017 width = elw > settings.maximum ? settings.maximum
are used : elw < settings.minimum ? settings.minimum : elw,
018 fontBase = width / settings.fontRatio,
019 fontSize = fontBase > settings.maxFont ? settings.
maxFont : fontBase < settings.minFont ? settings.
minFont : fontBase;
020 $el.css(‘font-size’, fontSize + ‘px’);
021 };

Similarly, when a new font 022 // Make the magic visible

size is calculated, a check is 023 // ======================
made to see if this is 024 return this.each(function() {
outside the extremes set by 025 // Context for resize callback
the user and, if so, the 026 var that = this;
largest or smallest font size 027 // Make changes upon resize
is set as appropriate 028 $(window).resize(function(){changes(that);});
029 // Set changes on load
030 changes(this);
031 });
032 };
033 }(jQuery));
The code applies the newly
calculated numbers as inline
CSS to the element that is
selected. Because this new
CSS is inline, it overwrites
whatever you have set in your
linked stylesheets, creating a
natural fallback in case a user
has JavaScript disabled
“What’s needed is greater subtlety and
flexibility to maintain a more balanced
proportion and better readability”
117
 Responsive design Create a HTML5 responsive video player

Create a HTML5
responsive video player
Discover how to create a fully responsive HTML5 video player that
features custom control icons to fit your designs

Everyone knows that video is the best way to keep your audience engaged, however, you now want to
add some of that video goodness onto your fancy responsive website. You scurry off to YouTube and
grab that all-important embed code, lovingly paste it in, only to find that it looks terrible on tablets and
phones. Not only that but the controls are all the same boring icons. Time for a change, in the form of
an HTML5 video player that adapts to your responsive site and fits in with your existing UI with some
custom controls.
We’ll be basing this tutorial around Bootstrap, for a couple of reasons. The first being that it’s the
most popular responsive framework out there, so many people will already be using it; the second
reason is that it comes bundled with Glyphicons, which we’ll use to create player controls. You can, of
course, create your icons using standard PNG images if you so wish.
Using this technique we will end up with a video that looks consistent, as the standard HTML5
video player is rendered completely different across different browsers using the browsers built-in
controls, here we make it look identical across all platforms, and respond to smaller devices.

Get set up min.js”>

bootstrap/3.1.1/js/bootstrap. 001
002
<div class=”jumbotron”>
<!-- Begin video content -->
</script> 003 </div>

01 Create a new HTML file and

add in the following code
into the <head> section. This will The video container
add the Twitter Bootstrap framework Demonstrate
responsiveness
that is required to make your page
responsive. If you are already using 02 The below code adds a
very basic responsive video
container based on the Twitter
Bootstrap and are simply integrating
into an existing site, you can skip this
part of the tutorial.
Bootstrap Jumbotron element. Place
this code within the body section of
03 Just to add some context to
our site, we’re going to place
two responsive columns underneath
your page; it will render a full-width our jumbotron. These columns have
001 <link rel=”stylesheet” href=”// container at the top of the site. If you no bearing on the video element,
netdna. are implementing the video player in but it will make the final product look
bootstrapcdn.com/bootstrap/3.1.1/ an existing site you can skip this step. more like an actual website. Add this
css/
bootstrap.min.css”>
002 <script src=”https://ajax.
googleapis. “Time for a change, in the form of an
com/ajax/libs/jquery/1.11.0/
jquery.min.js”>
HTML5 video player that adapts to
003
</script>
<script src=”//netdna.
your responsive site”
bootstrapcdn.com/

118
 Create a HTML5 responsive video player Responsive design

code underneath the previous step any format you wish – they even have support the

above the closing </body> tag. a 4K and 3D version as well as the video tag.
entire source used to create it. 004 </video>

001 <div class=”container”> 001 http://bbb3d.renderfarming.net/

002
003
<div class=”row”>
<div class=”col-md-6”>
download.html Video formats
004 <h2>Left Col</h2>
005
p>
006
<p>Donec id […] dui.</

</div>
Embed video 06 Depending on which browser
and operating system you are
using, the previous step may not have
007
008
<div class=”col-md-6”>
<h2>Right Col</h2>
05 Now we have our footage
we’re going to embed it into
the jumbotron using the standard
shown any video at all. If this is the
case you may need to add the OGG
009 <p>Donec id […] dui.</ version of the video into your code as
p> HTML5 markup. Add the following
well. Grab the OGG file from the video
010 </div> code within the jumbotron <div>,
download site and add the following
011 </div> replacing the <!-- Begin Video
line of code.
012 </div> content --> comment. Be sure to look
013 at the output in different browsers 001 <source src=”big_buck_
to see how the video controls are bunny_1080p.ogg”
Obtain footage rendered differently. type=”video/ogg”>
002
001 <video width=”320”

04 Now we have our code

set up, we need an actual
video to show. For this we’ll be
height=”240”

002
controls>
<source src=”big_buck_
Getting responsive
using a completely open source bunny_1080p_
short animation created by Blender
Foundation, ‘Big Buck Bunny’. mp4”>
h264.mp4” type=”video/
07 Now it’s time to make use of
that large jumbotron area and
fill it up with our video. Adjust your
003 Your browser does not
Download it from the link below in video tag height and width to the

By adding in a poster
image, we can display
a title screen that will
disappear when the
user presses Play

119
 Responsive design Create a HTML5 responsive video player

The default browser

controls have now
been removed and
the video fills the
jumbotron area
slightly better

following, to stretch the video across presented with a black video screen. actually play the video.
the jumbotron container. The video Until you hover over it, it’s not very
will adjust its height accordingly, so the 001 <video width=”100%”
obvious that it’s a video at all. There poster=”poster.jpg”>
aspect ratio is maintained correctly. are two ways around this, the first is
to set the video to autoplay, or we
001 <video width=”100%” controls>
can add the following code to add an Get video elements
intro slide.
Remove spacing 001 <video width=”100%” controls
poster=”poster.jpg”> 11 We will be using jQuery in
order to add controls back into
our player, simply because Bootstrap
08 Our jumbotron features
grey padding around the
video – let’s get rid of that to make Removing controls
needs it as well. Add the following
code block to the bottom of your
our video fill the entire space. Add a page, just above the closing </body>
CSS block above your video tag with
the following code within it. This will 10 Now we need to remove
the standard HTML5 video
player controls. This is easily done by
tag. This will cast the video element
onto a variable called ‘videoPlayer’ for
override the default Bootstrap CSS, but use later on.
there is no need for !important tags. updating the video tag, removing the
controls element, as per the below. 001 <script>
001 <style type=”text/css”> 002 $( document ).ready(function()
Keep in mind that while we’re coding
002 .jumbotron { {
the new controls we will be unable to
003 padding: 0;
004 margin-bottom: 0;
005 }
006 </style> “This will cast the video element
The poster element
onto a variable called ‘videoPlayer’ for
use later on”
09 You’ll notice when we
first load the page you’re
120
 Create a HTML5 responsive video player Responsive design

003 var videoPlayer = controls in and over the next few

$(‘#videoPlayer’);
steps we will hook them up via
Hook up play
004 });
jQuery. The controls use the Bootstrap
005 </script>
Glyphicons we mentioned previously.
Add this under your video tag, within
14 The first control we’re going
to hook up is the play button.
This will be a multi-function button
Add an ID the jumbotron. that will change from a Play button
001 <div class=”videoControls”> into a Pause button when activated.
12 You may have noticed in the
previous step, we added a
jQuery var that targets the ID of
002 <a href=”#”
class=”btnPlay”><span
Add this code within your script tag,
directly underneath your videoPlayer
class=”glyphicon glyphicon- var declaration. Run it in your browser
videoPlayer. The next step is for us play”> to test it out.
to add this ID to our video tag to </span></a>
pair things up. Targeting based on 003 <div class=”videoTime”> 001 $(‘.btnPlay’).click(function() {
ID is good if you have multiple video 004 <span class=”current”></ 002 videoPlayer[0].play();
elements on a page that you want to span>/<span 003 })
class=”duration”></
all behave differently to one another.
span>
001 <video width=”100%” 005
006
</div>
<a href=”#”
Switch the button
poster=”poster.jpg” id
=”videoPlayer”> class=”btnMute”><span

volume-up”>
class=”glyphicon glyphicon-

</span></a>
15 Now we can play the video,
we can switch the Play control
to a Pause when it is active. We’ll do
The controls 007 <a href=”#” this via an ‘if’ statement that updates
class=”btnFullscreen”>
the button class, replacing the Play
13 Now it’s time to add the
controls back in, or at least
the HTML framework that will power
glyphicon-
<span class=”glyphicon

fullscreen”></span></a>
glyphicon with the Pause icon. The ‘if’
statement will also resume playback
them. This block of HTML adds all the 008 </div> and switch the icon back. Replace the

The video control

HTML has now been
added, although
they are not currently
functioning at all

121
 Responsive design Create a HTML5 responsive video player

previous step with the below. current time and the total time. Add following code will round that number
the following code block underneath up to the nearest second. You can
001 $(‘.btnPlay’).click(function() {
the previous step within your extend this functionality to display
002 if(videoPlayer[0].paused)
{ document ready script block. hours, minutes and seconds as well.
003 videoPlayer[0].play(); 001 $(‘.current’).text(Math.round
001 videoPlayer.on(‘timeupdate’,
004 $(‘.glyphicon-play’). (videoPlayer[0].currentTime));
function() {
attr(‘class’,
002 $(‘.current’).
‘glyphicon glyphicon-
text(videoPlayer[0].
pause’);
currentTime);
Total time
005 }
003 });
006 else {
007
008
videoPlayer[0].pause();
$(‘.glyphicon-pause’).
Less accuracy 18 The next thing to do is to get
the total duration of the video
and display this next to our current
attr(‘class’,

play’);
009
‘glyphicon glyphicon-

}
17 You may have noticed that our
time includes milliseconds as
well as seconds; this is probably a little
time. Add this code underneath the
previous step to hook up the span in
our control <div>. Again; you will
010 return false; bit too accurate for most situations. need to round the number to get rid
011 }) Altering the previous step to the of the milliseconds.

Display current time

“Going fullscreen works slightly
16 We’ll now hook up the current
time span via jQuery. You may
have noticed the forward slash that
differently for different browsers, so
is currently being outputted, this there will be two jQuery commands”
will serve as the break between the

The current time is

now being displayed
as a float, a bit of
jQuery rounding
will remove the
decimal places

122
 Create a HTML5 responsive video player Responsive design

other elements from being affected

Our rounded progress and total
spans are now functioning and in weird ways. This code will space our
showing the current time and elements out nicely.
total time in seconds
001 .videoControls {
002 width: 100%;
003 font-size: 30px;
004 }
005 .videoControls span,
.videoControls div {
006 display: inline-block;
007 }
008 .btnMute, .btnFullscreen {
009 float: right;
010 padding-left: 20px;
The Fullscreen button now works across browsers. The user will 011 margin-right: 20px;;
be presented with a fullscreen notification when this is activated 012 }
013 .btnPlay {
014 padding-right: 20px;
015 margin-left: 20px;
001 videoPlayer. class’, ‘glyphicon 016 }
on(‘loadedmetadata’, glyphicon-volume-
function() { up’);
002 $(‘.duration’).text(Math. 008 } Change the colours
round 009 });
(videoPlayer[0].duration));
003
004
});
Go fullscreen 22 The final stage is to amend the
colour scheme and change it
from the default Bootstrap blue. Feel
free to adjust the colours to match
Mute the audio 20 The final button we need
to hook up is the Fullscreen
button. Going fullscreen works slightly
your site’s aesthetic. Add this code
underneath the previous step within

19 Combining everything that

we have learned form the
Play/Pause button, we can hook up
differently for different browsers, so
there will be two jQuery commands
your CSS block. For a production
environment it is recommended that
you put all CSS and JS in separate files.
that will do the exact same thing. Add
the Mute/Unmute button with the There you have it! Your own custom
this underneath the previous step and
following ‘if’ statement. Place this responsive HTML5 video player is now
run your browser to see the results.
underneath the previous step, within ready to be shown off.
Press ESC to exit fullscreen.
the document ready bracket. This will 001 .videoControls span,
switch the button class to the Mute 001 $(‘.btnFullscreen’).on(‘click’,
.videoControls div {
icon, and back again when a user function() {
002 display: inline-block;
interacts with it. 002 videoPlayer[0].
003 color: #999;
webkitEnterFullscreen();
004 }
001 $(‘.btnMute’).click(function() { 003 videoPlayer[0].
005 .btnMute, .btnFullscreen {
002 if (videoPlayer[0].muted mozRequestFullScreen();
006 float: right;
== false) { 004 return false;
007 padding-left: 20px;
003 videoPlayer[0].muted = 005 });
008 margin-right: 20px;
true; 006
009 color: #999;
004 $(‘.glyphicon-volume- 010 }
up’).attr(‘
class’, ‘glyphicon Add some style 011
012
.btnPlay {
padding-right: 20px;
glyphicon-volume- 013 margin-left: 20px;

005
006
off’);
} else {
videoPlayer[0].muted =
21 Now we’ll make our controls’
appearance look a bit better by
adding the following code within our
014
015
016
}
color: #999;

.glyphicon:hover {
false;
CSS block from Step 8. When dealing 017 color: #555;
007 $(‘.glyphicon-volume- 018 }
with floating elements, don’t forget
off’).attr(‘ 019
to add a clear underneath to prevent

123
 Resources Essential web design resources

Essential web design resources

Get your hands on the best resources to help create a better web experience

365 PSD Awwwards Color

365psd.com/ www.awwwards.com color.hailpixel.com
365 PSD is a brilliant resource. A popular destination for those Choosing a colour is never easy but
Get your hands on a free PSD file looking for some design inspiration. this simple to use site not only makes
everyday. These include from UI kits, The site presents a Site of the Day, it easy it also makes it fun. Move
icon templates and much more. along with a Site of the Month, the move cursor around the screen
Simply select a PSD and download offering recognition to well-designed to pick a colour. Click again to pick
ready to use. sites and designs efforts and talent. another and so on to create a palette
Plus, it offers expert opinion and of choice. It allows you to clearly see if
Apple Watch insight on site featured. your chosen colours will clash.
concept PSD
Behance COLOURlovers
watch.janlosert.com/
The Apple Watch is a product that www.behance.net/ www.colourlovers.com
many will love. This set of PSDs allows Behance is a showcase for creative. The color palette of a website can
for the creation of concept versions If you have work you want the make a big difference to how it is
of your favourite websites and what world to see than this is a great place viewed. To get an insight to the
they could look like on the much to start. Plus, employers will latest colour trends and a myriad
smaller Apple Watch screen. Simply be scouring the site looking for of well defined palettes this site is a
download and start getting creative. creative talent. must visit.

Get free hi-res images for projects Search and find inspiration with Niice

Test out web fonts and typography Get thousands of free vector icons

124
 Essential web design resources Resources

Dribbble Google Fonts Smashing Magazine

dribbble.com/ www.google.com/fonts/ www.smashingmagazine.com/
If in need of design inspiration A great collection of free fonts Smashing Magazine is an online
then Dribbble should one of your optimised for the web. Download to magazine for professional Web
first ports of call. Check out what test and try in designs. Alternatively, designers and developers. It focuses
other designers are doing and select a font and weights and use a host of different elements including
get ‘inspired’ . the generated code to use the font in techniques, best practices and
live web design projects. You’ll have valuable resources.
Flaticon thousands of fonts to hand instantly
and license free. Typecast
www.flaticon.com/
Icons are great for quick, simple and HTML5 UP typecast.com/
neat visual representations. Getting The Typecast platform allows
the right set is important and Flaticon html5up.net/ users to create visual and semantic
provides over 500 free sets to choose This is the place to be if looking typographic designs. Then they
from. The icons are available in all the to get a headstart on your latest can be checked for readability and
standard formats and can be used as design project. It offers a selection rendering to make sure that they look
web font icons. of contemporary page templates like the designer intended. You can
that are all screen friendly. These free then share a working prototype.
Flat UI Pro designs can be downloaded and
modified to match a specific design.
designmodo.com/flat/
Underscores
Flat UI Pro is a flat UI kit that offers Niice underscores.me/
hundreds of basic components
The backbone of WordPress is the
including icons and glyphs. These niice.co
theme. There are thousands of free
are perfect for a quick start on new Inspiration is an integral part of the
and premium themes available but if
designs and new projects. design process and this niche search
a custom theme is required, a starter
engine is here to help. Simply type
theme such as Underscores is a great
Font Squirrel in a keyword and Niice scours a host
starting point.
of popular inspirational/creative sites
www.fontsquirrel.com/ before returning plenty of visual
Font Squirrel brings together an inspiration to get your creative juices Unsplash
impressive collection of fonts flowing freely.
that are free for commercial use. unsplash.com/
Browse through the neatly defined Pixeden High-quality photography can
collections and generate the code transform a web site and engage
needed to add to a web design. www.pixeden.com visitors. Unsplash provides a
Thousands of quality web resources collection ‘do whatever you want’
Google Developers are available here. The site offers images that have no restrictions.
Academy plenty of free graphics, icons, vectors,
but its offers even more if you sign W3Schools
developers.google.com/academy/ up to one of their premium plans.
This site provides a set of online www.w3schools.com/
classes spanning many different Reddit web design This site covers all web design and
Google developer tools and development bases. If you want to
platforms including Maps and www.reddit.com/r/web_design/ learn HTML, CSS, JavaScript or PHP
YouTube. The course materials are The latest web news is interspersed start here. There are hundreds of
provided for developers of all skill with loads of titbits of web-related examples and explanations. Plus,
levels with curriculum-based information. There are links to new there is an online editor that allows
learning that goes beyond the usual resources, newly designed websites users to experiment with code and
technical documentation. and useful tutorials. see the results.
125
 Resources Essential web design tools

Essential web design tools

Discover the best tools to help build a better web site more efficiently

3D CSS Text Animate.css Bitly

http://www.3dcsstext.com/ http://daneden.github.io/animate.css/ www.bitly.com
Create 3D text with code via the Take the hard work out of creating Bitly is a popular link shortener. It is
extremely easy to use online tool. CSS animations with this extensive ideal for shortening long links for
Simply pick a font, colours, angle, size, library of ‘Just-add-water’ CSS anywhere where space needs to be
height and shadow and the code is animations. Try out animations saved. It’s incredibly easy to use. Add
automatically generated. Simply copy before downloading the complete link, shorten and copy and paste.
and paste to get your new design collection of code. Once happy, you You can sign up to the website in
element onto your site. can copy and past the code into your order to store all of your previous URL
own project. shortenings in one convenient place.
Adobe Color CC
BigVideo Bootstrap
https://color.adobe.com/create/
color-wheel/ http://dfcb.github.io/BigVideo.js/ http://getbootstrap.com/
Create your own colour palette with This is jQuery plugin that makes it This is a popular and widely used
this simple but comprehensive colour easy to add fit-to-fill background HTML, CSS and Javascript framework
creation tool. Choose a base colour, video to websites. You can use it as for building responsive sites. It
select a colour rule and fine tune to a player to show video playlist or contains everything a user needs to
create the perfect palette for your alternatively, you can use it for big create a site for desktop, tablet and
project. It will allow you to see what background images. It creates brilliant smartphones. Get out our tutorial on
works well and what doesn’t. results every time. page 82.

Create 3D with only CSS A responsive framework to help build sites quickly

Quickly create the perfect colour palette Get tools to test with Internet Explorer

126
 Essential web design tools Resources

Buffer open source, Ionic offers a library of Macaw

mobile-optimized HTML, CSS and JS
www.bufferapp.com components, gestures, and tools for http://macaw.co/
Buffer helps manage multiple social building highly interactive apps Macaw provides the same flexibility
media accounts at once. Users can as an image editor, eg Photoshop,
quickly schedule content from IOS GUI but also writes HTML and CSS.
anywhere on the web, collaborate
www.teehanlax.com/tools
with team members, and analyze Modern.IE
statistics on how posts perform. Creative agency Teehan+Lax has put
together its own collection of iOS UI
www.modern.ie
templates. Get components for the
Can I use iPhone 6, iPad, iOS7, iOS8 all in PSD
A host of development tools for
testing the Internet Explorer browser.
format make them easy to customise
http://caniuse.com/ Make sure your sites will work with
in Photoshop.
Need to know what HTML tags the browser on.
work in what browser? You do and
this well-conceived and informative
JS Fiddle Namechk
online tool will help tell you exactly
www.jsfiddle.net
what works where. http://namechk.com/
This online tool provides a test bed
Want to know if the Twitter name
for any code. Split into separate
Codecademy windows for HTML, CSS and
you want is still available? This is the
easy way to get an instant hit of
Javascript. Simply add code and
http://www.codecademy.com/
run to see the result. When working availability for dozens of popular sites.
Need to brush up on your HTML perfectly drop the code into a web
and CSS? Want to know how to use page and see the results. Normalize.css
jQuery? Sign up and learn how to
code interactively with a host of free Lipsum http://necolas.github.io/normalize.css/
to access online courses. To get better all-browser consistency
http://lipsum.com/ get this tool. Normalize.css makes
CleanCSS If you need some placeholder text to browsers render all elements more
fill out your pages then this is a great consistently and in line with modern
www.cleancss.com resource. Choose how many words, standards. It precisely targets only the
Make your CSS better. CleanCSS paragraphs or even bytes and lists. styles that need normalizing.
is a powerful CSS optimizer and Then simply copy and paste into a
formatter. Basically, it takes your page. It will allow you to figure out Sublime Text
CSS code and makes it cleaner and how much text you can input into
more concise. your layout without it throwing off http://www.sublimetext.com/
the design, or becoming too much Every web designer needs a text
Ink Interface Kit like a wall of text for visitors. editor and Sublime Text is one of
the best. Used by the pros, but still a
http://ink.sapo.pt/ Litmus great tool worth a try.
Ink is an interface kit that provides a
host of files to help create responsive www.litmus.com Webflow
web interfaces quickly and efficiently. The complete email testing and
It is based on a simple grid system analysing tool. See how your www.webflow.com
and fully customisable. campaign emails will look, check For those who don’t like, or perhaps
so your emails don’t become spam know how, to code. Webflow is
Ionic and analyse data to see if your emails a drag-and-drop website builder
are being read. A brilliant tool for for designing custom, professional
http://ionicframework.com/ companies that rely on newsletters, websites without code. Its familiar
This is a great tool for creating promotional emails and keeping up GUI will make it easy for newcomers
HTML5-friendly web apps. Free and with their readership. and designers.

127
 of al
r
al ci
fe
tri Spe

Enjoyed
this book?
Exclusive offer for new

Try
3 issues
for just
£5 *

* This offer entitles new UK direct debit subscribers to receive their first three issues for £5. After these issues,
subscribers will then pay £25.15 every six issues. Subscribers can cancel this subscription at any time. New
subscriptions will start from the next available issue. Offer code ZGGZIN must be quoted to receive this special
subscriptions price. Direct debit guarantee available on request.

** This is a US subscription offer. The USA issue rate is based on an annual subscription price of £65 for 13 issues,
which is equivalent to approx $102 at the time of writing compared with the newsstand price of $194.87 for 13 issues
($14.99 per issue). Your subscription will start from the next available issue.

128
 Uncover the secrets
of web design
Practical projects
Every issue is packed with step-by-step tutorials for
Flash, Dreamweaver, Photoshop and more

In-depth features
About Discover the latest hot topics in the industry
the Join the community
mag Get involved. Visit the website, submit a portfolio and
follow Web Designer on Twitter

subscribers to…

Try 3 issues for £5 in the UK*

or just $7.85 per issue in the USA**
(saving 48% off the newsstand price)
For amazing offers please visit
www.imaginesubs.co.uk/wed
Quote code ZGGZIN
Or telephone UK 0844 848 8413 Overseas +44 (0) 1795 592 878
129
 Not just for
dummies

TM

A clear, comprehensive series for people who want to start

learning about iPhone, iPad, Mac, Android and Photoshop

BUY YOUR COPY TODAY

Print edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
Available on the following platforms

facebook.com/ImagineBookazines twitter.com/Books_Imagine
HTML5 & CSS3 The Complete Manual
The essential handbook for web designers

Introducing HTML Guide to responsive design

Discover the history behind HTML5 and how it Understand all there is to know about how to
has developed into a brilliant language adapt your website across devices

Create your first page In-depth tutorials

Grasp the basics of HTML to create your very first Learn how to add menus, typography and video
web page within the <html> tags players to your site

All about CSS Cross-browser use

Learn the basics of CSS coding and customise Ensure that your website is compatible across
your HTML with different classes and styles multiple browsers including Chrome and Safari

Terminology guides
With all the key terms in one place, understand
the jargon of web design

Customise your website

Use CSS and HTML together to create a VOLUME 01
responsive and engaging website