Web Design For Beginners

OVER 90 MINUTES
W
OF VIDEO TUTORIALS
NE
Create
your first
website
today
Master HTML & CSS Make the most of WordPress

Get to grips with SEO Turn your ideas into reality
Welcome to
Web Design
™
The Internet is ubiquitous across so many aspects of our lives that it’s difficult to
imagine living without it. As a platform for consuming media, connecting with
others and discovering new ideas and information, the web is unparalleled, and
as such web design is a more prevalent and more important skill than ever. While
some may be deterred by the seeming complexity of the web design process,
first timers will find this newly revised edition of Web Design for Beginners to
be an essential handbook. Spelling out all the basics, it will teach you how to
use HTML and CSS to create and style your website, before honing the user
experience with more advanced techniques. You will also discover how to use
Photoshop to produce graphics, SEO to get your website recognised by the likes
of Google, and social media buttons to boost your site’s interactivity. In no time,
you will see your website flourish into a fully fleshed-out online venue capable of
gaining and retaining visitors over time. Who knows, once you’ve mastered these
simple steps, your website idea may have the potential to be the next big thing!
Web Design
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
Jasmin Snook
Senior Art Editor

Greg Whitaker
Assistant Designer
Alexander Phoenix
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, 5 Churchill Place, Canary Wharf, London, E14 5HU
Tel 0203 787 8060 www.marketforce.co.uk
Distributed in Australia by
Gordon & Gotch Australia Pty Ltd, 26 Rodborough Road, Frenchs Forest, NSW, 2086 Australia
Tel +61 2 9972 8800 www.gordongotch.com.au
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.
Web Design for Beginners Seventh Edition © 2016 Imagine Publishing Ltd
Part of the
bookazine series
Contents
Essential
Build a site guide to web
22
28
An introduction to HTML
Create a basic layout
design
30 Code a link page 8
32 Create lists in your website
34 Learn to use div tags
36 Create a three-column layout WordPress
40 An introduction to CSS
46 Centre your page 76 Get to know WordPress 4.0
48 Define text & heading styles 84 Download, install and set up a
50 Style your lists to stand out self-hosted site
52 Turn lists into navigation bars 88 View and organise WordPress
54 Format images using CSS dashboard modules
56 Style a two-column layout 90 Create a WordPress blog
60 Create a header 94 Edit your WordPress blog posts
64 Create a sidebar 98 Post images into your blog
68 Add content to your website 102 Embed external media in your
72 Add content to your footer WordPress posts
106 Add special features to text
6 Web Design for Beginners

Understanding SEO
110 The science of SEO
118 Get more people to visit
your website
122 Use Google Analytics to
understand your audience
126 Create a Google sitemap for
easier searching
122
Master
your sites
audience
Glossary
Understand
web designer
terms
“Promote your work page 170
for all to see”
Photoshop
& Graphics
130 New ways to work
Customise your site
with Photoshop 146 The perception of colour
136 Create great backgrounds 162 152 Make an expanding
140 Design header and footer Monetise navigation menu
graphics in Photoshop your new
website 156 Create animated
130
New
background text
Photoshop 158 Make image hover effects
top tips 160 Animate a strike-through
text effect
162 Add a shopping cart
164 Create email newsletters and
let people subscribe
166 Add social media buttons
168 Add Twitter Cards to your site
Web Design for Beginners 7

Essential guide

Discover why now is the time to
start building your first website
T
he web made its debut back in 1991, that web design and the web are always going to
adding a graphical user interface to the be informative, inspirational and essential.
internet. As such, web design was born. Think about what you use the web for and how
In its infancy, web design was heavily restricted by you would achieve these tasks without it. In the
technology and hardware, with a web presence couple of decades that the web has been around
being little more than black text on a white it’s gone from a plain text, email-checking entity
background. Thankfully, technology and web to the key communication and information tool of
design have reached a far more creative and governments, businesses and individuals. And, what
imaginative stage in their evolutions. Skipping past is it that makes the web such a crucial tool? Web
frames, tables and animated GIFs, web design has pages and websites. Whatever information, service
become far more sophisticated and will continue or product you need it will be wrapped up in a web
to grow and develop. Look back a couple of years page just waiting for you to say hello.
and take note of what was ‘on trend’ and how the
underlying infrastructure helped shape a website. Why build a website?
The progression of web design has always gone It’s a simple question, but why build a website?
hand-in-hand with technology, and technology There is no single answer to what is undoubtedly a
never takes a backward step, which in turn means very broad question. However, the answer could

Essential guide
be something as simple as ‘because everyone it also acts as a reference point or calling card,
else has got one’. And, to a certain extent, this where a user can promote themselves. If it’s not
simple answer reaches the crux of the matter a personal platform for opinion and promotion a
very succinctly. The world wide web is a global site can be great a way to stay in contact and tell
phenomenon that’s awash with millions, if not friends and family what you’re up to. An online
billions, of websites covering every subject you can diary can include the latest activities and a host of
possibly imagine. There is no better place to be photos, much like a personal Facebook. This could
seen and get your message heard. A website can be be another reason, for those not interested in being
viewed from England to Australia, while astronauts part of the Facebook revolution, and want greater
have even tweeted from the International Space control, then a personal site is a great alternative.
Station! A 24/7 online global presence is one very The web also provides the perfect platform for
powerful reason to build a website. those looking to build a business. The outlay is
“Websites cover every aspect of life,

whether it’s personal or business”
There is no doubt that websites cover every minimal and the potential audience is huge. No
aspect of life, whether it’s personal or business. need to rent premises, no need to keep a huge
On a personal level, everyone has an interest or pile of stock, and customers will come from miles
hobby that they love and many simply want to tell around to pay a visit. Provide the right product,
the world what they do. A website is the perfect promote in the right way and the number of visits
platform for getting across personal opinion and will shoot through the roof.
What are HTML & CSS?

HTML and CSS are the key components for building web pages and sites – without them the web as
we know it simply would not exist. In a nutshell, HTML provides the building blocks and structure while
CSS provides the styling.
HTML is made up of a whole host of tags which all have their own identity. These consist of an
opening and closing tag with all the relevant content in between. For example, ‘<header>web page
content goes here</header>’. HTML defines a whole series of tags, for example header, nav, footer,
video, etc, which all have a semantic title making them easy to identify. Custom tags, or div tags as
they are known, are created when a standard HTML tag cannot be used. Again these have their own
individual identities. CSS is the language applied to an HTML tag to style it. Cascading Style Sheets, CSS,
will take the name of
a HTML tag, <header>
and define properties
such as its height,
width, colour, borders,
padding and margins
for example. CSS3 now
offers a completely new
generation of styling
options to use. Rounder
corners, text shadows,
box shadows and The ‘Recent
Relationships’ title
gradients are just a few uses the HTML
of the properties styling header tag, h1, which
is styled using the
today’s websites. LeckerliOne font

Beyond personal opinion and comment, a
website can have a more commercial use. Web
designers instantly have the perfect platform for
presenting their work. What better reason does a
What makes
web designer need to build a website? A portfolio
site is a great shop window for their work and a
a good site?
constant point of reference, allowing web users
to visit at any time of day or night. As already A well-conceived website is not only
mentioned, if you’re looking to build a business aesthetically pleasing, but also works
the web is a great starting point. A report from under the hood as well. Soul Media (www.
www.eMarketer.com shows that 150 million soulmedia.com.au) is a Melbourne-based
users across the United States are buying online. digital agency that has put together a striking
HTML5 is the web language you need to
learn to build a site from scratch This is a staggering 73 per cent of all web users and well-constructed site that demonstrates
demonstrating exactly how important an online the traits of good design. The home page
business could be. Another interesting snippet makes an immediate impact with a big, bold
of information reinforced in the report was that image and relays the company message
Combine HTML5 people like to shop online for convenience and to without too many distractions. The main
and CSS3 to create
interactive and save money. image is a background image that scales
standout websites An online shop is the most probable and popular with the browser window, ensuring that it
purpose for business, but another and less obvious works with all screen sizes. The site is also
reason is affiliate marketing. This is a website ‘responsive’, which means that it responds
specifically set up to promote affiliate products, to the size of a screen and restyles to fit. This
where money is made via commission. ensures that a site will work for smartphones,
tablets and desktops.
What are websites used for? The site itself uses the popular one-page
The internet is very much influenced by what is scrolling design. This negates the need to link
happening outside of the web. Remember it’s to other pages and wait for them to load. It is
people that build websites and people always want
information, people always need to go shopping,
people will always need to go to the bank,
“A responsive site
people will always want to stay in contact – the
web provides the ideal platform to replace more
responds to the
traditional services.
So what do people use websites for? In a nutshell:
size of a screen
pretty much everything! But to be more concise,
the purpose of a website is to relay a message or
and restyles to fit”
offer a service. To get a more immediate picture
of what websites are used for, take a look at some simply a matter of scrolling down the page
of the most popular sites on the web. Facebook, or using the fixed position menu to jump, in
YouTube, Google, Wikipedia, Twitter, Amazon, an elegant manner, to the requested section.
iTunes, eBay, BBC, Sky, WordPress, PayPal, Skype, The fixed nature of the navigation system
Flickr, Walmart, Lastminute and Microsoft to name means that it is always visible and ready to use.
but a few. This brief selection of sites pretty much Alongside the HTML there is good use of web
covers the spectrum of what websites are used fonts and CSS3 techniques – text shadows
for. Facebook is a huge social networking site and box shadows are all here in abundance.
and epitomises what people like to do on the
web – stay in contact and tell others what they are
up to. YouTube allows web users to stream and
watch videos from a vast library of variety. Sitting
along the same lines are services such as Netflix
and LoveFilm, which take the online streaming
and viewing experience to a new level. Google, a
service that nearly everyone in the world has heard
of, presents a different tool for the web, but search
Both the title and engines are key to finding websites. Good luck if
the images use
different CSS3 you’re thinking of building a website to take on one
properties to add a of the search giants! Soul Media is a great example of web design
shadow to
both elements
The online encyclopaedia Wikipedia is a fountain working in harmony for a great visual experience
of knowledge. It’s one of the first online locations
web users will hit when looking for an answer to a

Essential guide
Anatomy of a website
Websites by their very nature are made up of constituent parts. Characteristically, the header of the best and worst of websites found on the
a few constituent parts that are arranged in a a website appears at the top of the page, the web. Take a look at your favourite site and it is
manner to suit the content. Typical websites are footer at the bottom of a page and the main almost guaranteed to fit into the standard type
either two- or three-column layouts with a header content in between. of template. The key to a great site is bringing all
and footer. What sets sites apart is the imagination Background images or colour will be used the constituent parts together in a coherent and
and variations used in the construction of the to create a canvas for the page. This applies to cohesive manner that suits the content.
Logo Header
The logo is crucial, The top of the page
its presents the site is prime real estate
brand and it is a key on a web pages and
navigation point. It typically includes
should always take the site logo and
the user back to the the navigation
home page menu and
often advertising
Content
The main area of
any website is its
content. This will
typically appear Image slider
under the header A popular addition
element and will be to websites is an
arranged in a variety image slider. This
of styles, such as allows for multiple
two columns, image content to occupy
slider and the same space.
three columns Images, with text,
slide across to reveal
new content
Footer Sidebar
The footer, as its Sidebars are
name suggest, predominately
resides at the placed to the right,
bottom of the page. as this makes the
This typically offers content easier to
contact information, access, with less
links to social media mouse travel. A
and a repeat of the sidebar can contain
navigation menu an array of related
information and
interesting links

question. If Wikipedia doesn’t have the answer then WordPress is the most popular web publishing musicians and in turn allows for an intuitive online
it will be a surprise. Again, this is a vast undertaking platform on the internet and provides the basis for buying experience.
and the knowledge base has been built up over over a million websites. Typically seen as a blogging The above does not cover every single use of a
years by the general public, but it provides a great platform, it has matured into something much website – for example, we’ve not mentioned online
blueprint for anyone looking to build a creditable more complete. What it also provides is a brilliant banking – but it does offer a great representation of
knowledge site. platform for people who want to produce their the scope of purpose of exactly what a website
Another big name on the web is Amazon, this own website without the degree or knowledge in can achieve.
is one of the pioneers of the online shopping web design and development. Plus, it offers the
experience and the site has developed to such user more than just one incarnation of website; Where are websites stored?
a level that it is often first in the queue when a almost any type of site (blog, ecommerce shop, The web to some degree is a mystical entity that
product needs to be purchased. A similar online information-based and more) can be built from the just exists out there somewhere, but obviously
experience sits in the hands of eBay, this is an online WordPress platform. this is not the case, all the information does have
shopping experience, but users get to bid in an Sitting amongst the giants is Flickr, a photo a home. The web is part of the internet, which is
online auction rather than buy a product at a fixed storage and sharing site that provides a platform effectively a collection of connected computers
price. The auction has a few imitators, but none for professional photographers and amateurs alike. that create a mass of routes around the globe. This
can match its capacity and completeness. The BBC The Flickr platform can act as a shop window or, in provides the infrastructure for one computer to
website covers a vast swathe of subjects, but it has the true spirit of the internet, act as a source where connect to another and view any website that exists
one primary, and very popular, purpose and that images are freely available for others to use. When on the web.
is to bring the news to the masses. No matter if it’s it comes to music there are few that can match A web page is a file that is typically stored on a
local news, international news or sports news, the the massive entity known as iTunes. The Apple- local/home computer hard drive. A collection of
BBC will have it covered. powered store provides a shop front for a million web pages becomes a website. However, before
Websites tend to follow a similar layout formula
Use exciting patterns to catch the eye
Employ clever tricks on

your site to entice the
reader to stay around
>>

Essential guide
any website can be seen it needs to be transferred
What makes a good blog or from a local/home computer to a web server where
the website is ‘hosted’. A web host provides the
service that gets a website out onto the internet for
social website? all to see. Web servers are like a desktop PC in the
fact that they have similar hardware, but they are
much more powerful and run different software.
Blog sites can be bland and boring. But there are hundreds, if not thousands, of blogs that have A web host provider such as Fasthosts (www.
stepped outside the standard template to bring a splash of creativity and originality. Ultranoir (www. fasthosts.co.uk), 1&1 (www.1and1.co.uk), Heart
ultranoir.com) is an award-winning Parisian creative agency that has taken the blog format and Internet (www.heartinternet.co.uk), Host Papa
created a striking and unique design. The Ultranoir blog, known as Blackstage, is a simple selection (www.hostpapa.co.uk) and PlusNet (www.plus.
of posts, but the combination of fonts, typography, images, layout and effects make the blog a net) all provide a wealth of services including
compelling, imaginative and engaging presence. The bespoke layout makes an immediate impression. web space, monthly bandwidth, domain names,
The two-column arrangement does not simply stack post on top of post, but uses a combination of email accounts, databases, platforms and typically
post sizes in a grid type layout to emphasise specific posts. The arrangement of individual posts does a host of web building tools. All of these services
not stick to a rigid format, again offering bespoke arrangements. There are posts with images, without are included with a web hosting package, but
images, with intro text, without intro text and different size title text. The arrangement of the text and each web host will have different hosting plans.
the different weights make it ultimately readable. To finish, it adds a few clever dynamic touches, with The different plans provide everything from starter
a 3D effect on post boxes, on mouse hover and moving featured images. plans through to powerful plans for business. What
type of plan is needed depends very much on
what type of website is being set up. If it’s a simple
blog site that gets updated once a week and has
an audience of around 500 visitors a month then a
cheap starter plan would be ideal. If it is a company
website with much more content and a lot more
visitors expected then a more professional plan will
be needed.
So what does all the jargon mean? The more
important considerations are web space and
bandwidth. Web space is storage space, the same
as a hard drive. How much is needed obviously
varies dependent on the content, but if it’s a blog
with standard text and images then it’s unlikely
that more than 1GB of web space will be needed.
If more than text and images are going to be
displayed, for example video, photos, music, then
1GB of web space can be filled very quickly. Ten
gigabytes or more is a better option for such a
site. It is a good idea to estimate how much web
space you will need before embarking on choosing
a hosting plan. Don’t worry too much though,
because web space can be upgraded easily and
typically within 24 hours.
The other major factor is bandwidth, which is
usually measured by the month. Bandwidth is the
traffic, or the amount of data that is transferred to
or from a website. A quick method for estimating
monthly bandwidth is the sizes of the pages on
a website multiplied by how many visitors are
expected. For example, if a website has a total
page size of 1MB and the expected visits are 500, a
bandwidth of around half a gigabyte is sufficient.
However, if there is a spike in visitors due to sudden
Imaginative use interest then this could easily be doubled. Again,
of layout, fonts
and typography there is no need to worry as the bandwidth can be
produce a unique increased when needed.
and engaging
variation on the Other considerations are databases, if setting up
blog format a WordPress blog then at least one database will
be needed. If building a static brochure site that
just consists of text and images then a database

An introduction
to blogs and social media
Blogs and social media websites are now also a vast array of plug-ins that allow
an integral part of the online experience users to add special widgets that perform
for many people. WordPress and Twitter specific tasks, for example adding polls,
are synonymous with web publishing and image sliders, tweets, featured content
micro-blogging. WordPress has become and so on. The beauty of blogging
the most popular web publishing platforms such as WordPress is that they
platform because it is freely available, provide a platform for users to get their
websites using it can be either self-hosted opinions, thoughts and personality online.
or hosted on wordpress.com, and it has While WordPress is the most popular web
a whole selection of supporting tools publishing platform it is by no means the
and themes. only one out there. Joomla and Drupal
WordPress is the power behind millions are similar content management systems,
of websites, it is easy to install, even for but at the other end of the scale there are
newcomers, and easy to customise and easy to set up, hosted platforms such as
navigate around. There are thousands Tumblr and Flavors.me.
of themes on the market, which can More instant web publishing is
instantly give a website a completely new provided by the social media/micro-
Joomla is an alternative to the WordPress web publishing platform, check out all your appearance with a single click. There is blogging platform Twitter. This allows
options before choosing the one you go with users to communicate with short,
concise, 140-character or less, messages
(tweets). Messages are sent to all those
who choose to follow you but more
importantly the addition of a hashtag
(#) makes a tweet subject specific. This
immediately expands the reader base
to include thousands more readers of a
tweet. As a promotional tool Twitter is key
on the web. Web sites typically include
social media links encouraging visitors to
follow. Conversely, it provides the perfect
platform to create interest amongst
followers and beyond. A well-constructed
tweet will engage readers and more
The WordPress platform has become so popular that it has Twitter is a good example of a micro-blogging platform that complements importantly drive traffic to a website.
spawned a range of related merchandise more traditional blogging platforms such as WordPress
At the time of going to press, the latest incarnation of WordPress has Themes not only make a WordPress site look great, but they can be tailored to your particular
reached over 38 million downloads business or personality and can be changed in seconds

Essential guide
is unlikely to be required. If setting up a site with a tools that a web designer/developer will need to for a webpage. In fact, any aesthetic seen on a web
shop then a database is likely to be needed. As a know to get a website up and running. The most page has almost certainly been in contact with CSS.
general rule it’s always worth getting a hosting plan immediate is HTML and CSS, these are the most The latest incarnation of CSS is CSS3, which adds a
with at least one database included. Email accounts important elements of any website, as without host of new effects and styles that are slowly being
are an obligatory addition to any hosting plan and them the web simply would not exist as we know adopted and supported by all the major browsers.
even the most basic package will include more than it. HTML (Hypertext Markup Language) provides Outside of the key technologies there is a trio of
are usually needed. As an example, the 1&1 Starter the base from which every website is built. Anyone development platforms that are typically used in a
plan provides 1,000 email accounts. The other major looking to build a website will need to know at the website build. JQuery is the programming language
web hosting consideration is the operating system very least the basics of HTML. The latest incarnation that gives added dynamics to web pages. The
jQuery language is a JavaScript library and is added
“Building a website is like building a house to a web page to create effects that typically add
movement. What can jQuery do? Typical examples
– you need a host of tools” include tabbed panels, image sliders, slide shows,
sliding panels, expanding and collapsing accordions
and tool tips to name a few.
(OS), typically Windows or Linux. This is not dictated of HTML is HTML5 and newcomers to web design Getting to grips with jQuery is not an essential
by the OS your computer is running; it relates to will need to make sure that, along with all the element of design, but it is something that should
OS that the web server is running. It only matters standard HTML tags, they also add HTML5 tags to be put on any web designer’s to-do list when
if you’re going to build a basic HTML and CSS site. the learning list. they’ve mastered HTML & CSS. Other backend
However, if a certain technology is to be used, it Sitting alongside HTML in the web design technologies that power many websites are PHP
may only run on a certain operating system. hierarchy is Cascading Style Sheets, which is and MySQL. PHP is a programming language that
commonly known as CSS and it is just as important plays a big part in the makeup of the WordPress
Tools of the trade that website builders know at least the basics. publishing platform. Typically, PHP is embedded
Building a website is much like building a house; a CSS adds style to the front end of a website and into an HTML page and produces dynamic results.
host of tools are needed to make sure that the job defines the layout, whatever it may be, style fonts, MySQL is a database application, which means it
gets done. There are a few essential techniques and borders, images, and create a background canvas stores information entered into a site. It is often
combined with PHP and a typical example of
the two in action are WordPress posts where the
content is stored in a MySQL database.
Getting all the essential technologies onto a page
is the work of a selection of tools. An HTML editor
is critical and one of the most popular software
Keeping it safe packages on the market is Dreamweaver. Part of
the Adobe Creative Suite, it offers a user-friendly
interface and an impressive set of tools that assist
Security is an often forgotten issue when it comes to any web designer with what they need. The
a website, and there are a few simple rules that need alternatives are explained elsewhere. An HTML
to be followed to ensure that a website’s security editor needs to be accompanied by an image-
is not breached. Passwords are the most popular editing package to make sure that a website is
form of securing access to a website, whether it’s beautiful while functional. The popular choice is
via an online login page, such as WordPress, or an Photoshop, which provides powerful tools that are
FTP package used for transferring files from a local perfectly capable of creating any web graphic in
computer to a server where a site is hosted. One the right format.
quick tip is not to use the password ‘password’! Beyond page building there is the web designer’s
As obvious as it may seem, the default password favourite web publishing platform: WordPress.
is often left and not changed. Try and choose a
username that is not too obvious and ensure that a
password uses upper and lower case characters and
numbers. If it’s hard to remember try not to write
down and leave it next to your computer.
If using a web publishing platform, ie WordPress,
some simple commonsense precautions are to
update to the latest version. In addition, update any
plug-ins and themes and also remove any inactive
themes and plug-ins. Other security measures are
more generic but just as important. Make sure that
any OS updates are installed and make sure that any Login screens provide the typical point of access, needing a
anti-virus and firewall software is kept up-to-date. username and password to gain entry
You can create great backgrounds for your website by creating
stunning graphics

The beauty of the platform lies in its ability to
build a complete site in minutes. The framework is
provided and then it is just a matter of selecting a
theme for the desired finish. The user adds content
while WordPress provides the structure.
Web sites are viewed in web browsers and the
Top tools of the trade
four major web browsers – Internet Explorer, Firefox,
Google Chrome and Safari – all offer different There are effectively three tools needed for the construction of a website. A knowledge of HTML and
levels of support to HTML and CSS. And for this CSS, an HTML editor and a graphics editor. Sounds simple and in essence it is, but finding the right
very reason they are an essential part of the web tool that suits requirements and personality is important. The first, most important tool is a HTML
design process. All sites need to be tested in each editor, and there are hundreds of choices available, free and paid for (see What’s the best software
browser to make sure that they work as intended, on page 19). CSS is another text-based language and a text editor would suffice, but again a good
so it’s always a good idea to find out a little about knowledge of the language is needed. A good alternative is a CSS editor such as Rapid CSS (www.
what browsers support when building a site. Finally, blumentals.net/rapidcss) or TopStyle (www.svanas.dynip.com/topstyle/index.html). A graphics
while not really tools of the trade in the traditional editor is crucial for any web designer and the popular choice is Photoshop. This is a great package but
sense, services such as YouTube and Twitter are still expensive. The popular alternative is GIMP (www.gimp.org).
key players. Both offer the opportunity to embed Beyond software packages there are some great in-browser tools. Firefox includes some great
or integrate elements into a web page with code developer tools that help deconstruct a page. Add-ons such as Firebug (www.getfirebug.com)
supplied via the mother site. extend the browser’s capabilities making the Mozilla browser the web designer’s choice.
There is an Aladdin’s cave of online tools that will help with every aspect of the web design process.
Different ways to build a website Aviary (www.advanced.aviary.com) is a suite of powerful creative applications, that includes an
The tools needed to build a site are all integrated image editor, screen capture and
into a website in different ways. A website is by its vector editor. CSS Click Chart
definition a web presence, and how it gets built is (www.css3clickchart.com) is a
almost irrelevant – users want to see a functional great tool that creates code for
site in action, very few care how it was built, apart the latest CSS3 specification.
from web designers of course! Initializr (www.initializr.com)
The options for building a website range from is a tool that helps create a
the simple to the specially made. At one end of the basic HTML5 template which
scale there are instant, no-nonsense, no-knowledge web designers can build on.
services such as Flavours.me. These are services For those looking for colour
that appeal to those who want to get online quickly, inspiration, Color Wizard
or those who want an elegant, easy-to-customise (colorsontheweb.com/
web presence. Users build a page from predefined colorwizard.asp) offers
layout elements and styles and draw content from an intuitive tool for
existing services such as WordPress, Twitter, Flickr. creating complementary
Template builders sit very closely in the building colour palettes.
process and are often found with many web
hosting plans such as 1&1. These provide predefined
elements, pages, images and so on in a logical
step-by-step process and need no web design
knowledge. Stepping up the ante is WordPress,
which in principle is another quick and easy website
building tool. There are two versions available; The Aviary
collection of
wordpress.com, where a site is hosted on the creative online
tools includes
a powerful,
and free,
image editor
CSS3 Click
Chart
provides
sample
code for Add a base
popular colour and
and create a
cutting- complementary
edge CSS colour palette
techniques for a website
1&1 Hosting (1and1.co.uk) offer several different hosting plans and
packages. Pick the one that suits your needs

Essential guide
WordPress servers, and a self-hosted version. The – blogs, photographs, ecommerce and so on – a which equates to billions of people, so your site
.com option is created online and offers a simplified site needs to be seen. It doesn’t matter how needs to be made Google-friendly. There are a host
version of the platform. The self-hosted version is aesthetically pleasing, innovative and intuitive a site of elements that add value to a page: meta tags,
the full package where the user needs to provide is, if no one gets to see it, it’s worthless. sitemaps, alt tags and more. The best way to get
their own web space to install the web publishing Any new website exists in a vast labyrinth of Google-friendly is to call on Google themselves. Try
platform. Once installed users can change a online experiences and promotion is the key out their Search Engine Optimization Starter Guide
theme, add plug-ins, customise the code base and to getting a site seen. The methodology and at http://bit.ly/KGzh07.
completely restyle the look. techniques to achieving a starring role on the web You shouldn’t ignore social networks, either.
Finally, at the top end of the scale is the bespoke are wide and varied. The first and maybe most Outside influences such as Twitter and Facebook
or custom website that is built from scratch using important is the domain name. This is the address are great communication channels with potentially
all the latest web technologies and tools. This people will type into the browser (for example huge audiences. Every time something on a site is
gives over total control of the build to the designer, www.iloveshopping.com). updated, you should be sure to tell your followers
with the only restriction being the designer’s own This should reflect the name of the site. There and friends. If nothing new is happening then make
imagination and knowledge. is little point calling a site ‘I Love Shopping’ and it happen!
using the domain name www.shoppinglove.com Finally, make sure your website content is
What to do next – the two should match for brand completeness. consistent, error free, current and regularly updated
Once a site has been built and hosted on the web, And, if possible, get the .com version. with new and exciting content. Nobody wants to
what happens next? What more can you do with Google is the top search engine across the globe visit a website that hardly ever has anything new to
your site? Looking past the practical considerations that is used by over 80 per cent of internet users, give its readers.
The mobile web
Smartphones
and tablets are now
as much part of the web
browsing experience as the
desktop. With the adoption of mobile
devices comes a new set of resolutions and
rules for web designers. Smartphones typically
have a screen width of 320 pixels in portrait workflow of a designer but also adds to the
mode and 480 pixels in landscape mode. Tablets development cost for a company. The current
are a more diverse bunch, but as a typical solution is ‘responsive design’, which looks to
example, the iPad has a width of 768 pixels in cater for all screen resolutions and ultimately all
portrait and 1024 pixels in landscape. Desktops devices and desktops, in turn future-proofing
vary from 1024 pixels up to around 1900 pixels. any website design. Responsive design uses
The variation in sizes demonstrates the issue CSS3 media queries, which recognise the width
of designing for mobile and desktop. One of a device and then switches the content to the
option is to build a mobile-specific version of a appropriate version of the website to ensure the
TheWarface (www.warface.co.uk) website is a great example of
desktop website, but this not only adds to the best on-screen display. responsive design in action. Great on mobile and great on desktop

Make a splash with
your website and
create something truly
stunning that will have
visitors returning
What’s the best software?

Writing code, typically HTML and CSS, environment that offers assistance and
is nothing more than a collection of help create a code base. These are much
alphanumeric characters, so nothing less expensive than high-end packages
more complicated than a text editor is and provide enough tools to assist with
enough for creating code. Notepad (PC) the page building process.
and TextEdit (Mac) are free text editors At the top end of the scale are
that are perfectly capable of producing feature-heavy packages such as Adobe
code, but they offer no assistance in the Dreamweaver, which are comparatively
way you write it. So, a plain text editor is expensive. As you might expect, high-
really for the more experienced coder. end packages do not simply offer a plain
However, while beginners and text interface. They offer a whole host
newcomers may struggle with the of tools, such as pre-built templates,
language to begin with, this approach useful code widgets, colour-coded code,
will reap rich rewards down the line. multiple views and instant code creation.
Mastering HTML and CSS via hand- Choosing an HTML editor is very
coding will mean that clean, semantic much a subjective choice and web
and lightweight code will be the designers will all have their favourites
eventual outcome. that they prefer to build with. The simple
Beyond the plain text editor, the solution is to try a few of the free HTML
next steps you’ll need to conquer are editors that are available on the market
the HTML editors. These are more and familiarise yourself with how they
specific text editors which incorporate operate. It is almost guaranteed that one
related coding features. They provide an will fit your method of working.

Build a site 22 36
22 An introduction to HTML Master Tweak
Get to know HyperText Markup Language
HTML layouts
28 Create a basic layout
Use HTML to code your very first layout
30 Code a link
Learn how to put different pages together
32 Create lists in your website

Ordered or unordered – your choice!
34 Learn about div tags

One of the most important tags there is
40 54
Learn Add an
36 Create a three-column layout image
Take the next step with a three-column page CSS
40 An introduction to CSS
Learn about how to make your site stand out
46 Centre your page

Get more control with wrappers
48 Define text & heading styles

Use CSS rules to add some style
50 Style your lists to stand out

Spice up boring lists with CSS
“HTML is the core 60
Make a
52 Turn lists into navigation bars
building block of header
Create your first navigation bar a web page – it's
54 Format images using CSS the first thing you
Add drop shadows and more
should learn”
56 Style a two-column layout
Use both HTML & CSS to style a layout
WHAT YOU’LL LEARN
Throughout the Build a site section you’ll be
60 Create a header learning how to code your first webpage using
Make it clean, clear and effective HTML and CSS, all in preparation to get it on the
internet. The coding tutorials work with popular
layouts such as two-column and three-column,
64 Create a sidebar while our introductory guides to HTML and CSS
Produce a navigation system to be proud of teach you about some of the popular tags and
properties and how they are used. So, what are
you waiting for? Get building your site today.
68 Add content to the main area
How to add what people want to see
72 Add content to your footer

Make the most of an underrated feature

EFFECTIVE
HEADER
Create a clean and clear header
with our tutorial
GREAT
CONTENT
Add the meat to your website
with our guide inside
SIDEBAR
Learn how you can not only
create but use a sidebar to its
full potential

Build a site

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…
T
he majority of web pages are made up of of data that you want to render as a paragraph of this system of marking up content is that it’s
one or more files that are downloaded to would be ‘marked up’ with a paragraph marker. easy to read – you don’t need any special
a computer, which in turn are interpreted software to either write or read HTML documents,
by a web browser and finally rendered out to Marking up as they’re just plain text. This makes it easy to
screen. At its simplest, a web page is a plain text Markers are referred to as tags, and they have create a functioning web page using nothing
file that contains special instructions about what less-than and greater-than symbols around them. more complex than a text editor.
kind of content is contained within. These This paragraph would be marked up with a <p>
instructions are written in HTML – the language tag at the start to denote a paragraph, and a What exactly is HyperText?
used on the world wide web. matching </p> tag at the end to signify the end Why is the language called HyperText Markup?
HTML, or HyperText Markup Language to give it of the paragraph. HTML offers many tags for Because the key thing that makes the World Wide
the full name, is the core building block of a web marking up content, and browsers are Web a web, rather than a series of disconnected
page. HTML is a markup-based, human-readable programmed to interpret these tags, formatting pockets of content, is the ability to link one
language that’s designed to be simple to write, the contents of each tag according to a set of document to another – these links are HyperText
and easy to understand. A markup language is preset rules. This allows the <strong> tag to because clicking on them takes you somewhere
one where bits of data are literally marked as render text in bold, and the <em> (for emphasis) else in the vast web of pages! As well as a basic
being of a particular type. So, for example, a piece tag to render in italics. One of the major benefits HTML (text) document, web pages can call in

Build a site
external files (or ‘assets’) that include style sheets, browser, allowing the website to generate some
images, audio files, video, flash and scripts. The unique-to-you content.
web browser looks at the HTML document when All the examples we’ve noted above have
it downloads it, and looks for any external files similar characteristics. They’re scripts, or small
that are called into the page. If it finds any files computer programs, that run on the server and
Chrome Firefox Microsoft Edge called in, the browser will send a message back to make some decisions about what content to
the web server asking for those files. The final show. This might be as simple as including your
result you see in your web browser window may name at the top of the page when you’re logged
be the result of more than 20 individual files, in, or as complex as a fully loaded e-commerce
brought together by the web browser and web store, but all these ‘server-side languages’
rendered as a single web page! output the same final result – plain HTML. It’s
important that the web works this way, as every
Konqueror Opera Safari Recognising an HTML document web browser only has to support one kind of
HTML is the basic language of the web, and works no matter You’ll notice as you browse around the web that page structural language, which makes it easier
which browser you use, or what server provides the page
different pages have different names, and more for both web designers and browser vendors, not
importantly they have different extensions at the to mention for users of the web who know that
end of the filename. Some end with .htm or .html, all they need to access any website is a web
which are obviously HTML documents, but others browser and an internet connection.
might end with .cfm, .php, .asp or .aspx. What are
these file types? Who invented HTML?
As far as the web browser is concerned, they’re In the Eighties and Nineties the internet already
just normal HTML documents like every other on existed, but didn’t have any simple way of
the web. What these different extensions signify navigating between computers and content.
is that some sort of processing has happened on Each server had different software, different
All websites are built using HTML, CSS and JavaScript the server before the page was sent to your protocols and methods for sharing data. Tim
What is HTML5?
HTML5 is the latest version of the HTML specification, which is managed by the World
Wide Web Consortium (W3C). This latest iteration of the standard introduces new features
and support for multimedia directly inside an HTML document. One of the key
considerations for the W3C is maintaining backwards compatibility, however, and HTML5
remains backwardly compatible with all web browsers and renderers.
The most exciting aspect of the HTML5 specification is the semantic approach to
marking up content. For the first time, web designers can mark up an article as such –
especially useful given the nature of blogs, news websites and the like.
“The most exciting aspect of

HTML5 is the semantic approach
to marking up content”
Over the past decade, video on the web has exploded. As bandwidth has increased,
and more people have access to high-speed internet connections, the likes of YouTube
and Vimeo have gripped the imagination of web users across the globe. Until HTML5, the
most reliable and common method for including video on a web page was to render it
using Adobe Flash. Both YouTube and Vimeo previously used this approach by default,
but both sites have snow switched over to the more accessible and standards-friendly
HTML5 version as the browser vendors have updated their software to support the
all-new <video> tag.
HTML5 makes adding content to your web pages a much simpler process

Berners-Lee was working in a computer services user-friendly web pages that incorporate all
section at CERN – the European Laboratory for three technologies.
Particle Physics in Geneva, Switzerland. Tim
realised that it would be useful to have a simple
method for sharing information remotely, and
Apple decided to promote the use of semantic,
standard HTML, CSS and JavaScript, rather than
support Adobe’s rich media plug-in, Flash. Adobe
HTML &
rather than invent a completely new system from
scratch, he developed a markup language based
argued that Flash was a good solution for
presenting rich content on mobile devices, while
mobile
on the popular SGML format. He developed a
straightforward protocol – HTTP (which stands for
HyperText Transfer Protocol) – for retrieving other
Apple insisted that open technologies with
proper semantic meaning and no need for a
plug-in was preferable. Time has favoured Apple’s
browsing
documents’ text via hypertext links. The text approach, in no short part due to the huge
format for HTTP was named HTML, for HyperText success of its iPhone and iPad products! When you access the web from your mobile
Markup Language. By keeping it simple, Tim phone or tablet, you’ll often notice special
encouraged others to build upon his ideas and to What are these semantics? pages that have been formatted especially for
design further software for displaying HTML, and The HTML format is very accommodating; these devices, rather than the full desktop
for setting up their own HTML documents ready beyond the required elements of <html>, version of a website. You might have
for access. This was the birth of the web as we <head> and <body> you can arrange your wondered whether these pages use a special
language especially for mobile devices? The
“Every web browser only has to support good news is that, just like the rest of the
web, they use standard HTML. The only real
one kind of page structural language, difference between a page optimised for a
mobile device and one orientated towards a
which is easier for web designers” desktop computer is the CSS styles that have
been applied. The content, and often the
structure, of the page remains plain HTML
know it today, and led to an explosion in use content any way you like. This is both a benefit and there’s no need to learn special skills or
of the internet. HTML itself has been further and a potential issue as the flexibility to present additional languages to be able to create sites
developed over time, and we’re now up to its (and mark up) content in any way also means that that on these devices. That’s not to say that
latest version – version 5. you can quickly end up with a confusing mess! A you shouldn’t consider how your users are
movement to present information in a semantic accessing the web page and what
All new and improved: HTML5 fashion existed at the birth of the language, and information they might need!
You can’t fail to have noticed the talk of HTML5 in has seen a resurgence in recent years. Typically, a mobile-optimised website will
recent years. Even non-web-savvy users have The general idea is that content should be be presented in one of two ways: either it will
come across the term, largely thanks to Steve marked up according to its type and importance. be the full website presented to render nicely
Jobs and the iPhone. HTML5 is the latest iteration <h1> heading tags, for example, should only be on the smaller screen size that you find on
of the HTML language, and looks very much the used to mark up the most important piece of info phones and tablets, or it will be a special
same as the previous versions. New tags that on a page, <h2> for the second most important version of the website that doesn’t contain
provide greater semantic meaning to the content and so on. If you think about the analogy of a the same information as the full website. This
being marked up have been introduced, along book, the <h1> tag might be the book or chapter latter approach supposes that a mobile visitor
with native support for rich media such as audio name, <h2> would be a section header and so to your site is likely to be more goal-
and video. The ability to make a document on. By using this approach, the HTML describes orientated than a desktop visitor, and aims to
self-describing offers numerous benefits, but it’s the importance of each piece of info which helps present the key information quickly, such as
worth pointing out that when the term HTML5 search engines identify what your page is about, ‘how to find us’, or ‘our contact details’.
is used – especially in the press – it often refers to and more importantly special software, such as
a trilogy of technologies rather than just the screen readers that translate web pages into
HTML language itself. The press interpretation of audio for people with sight problems, can make
HTML5 includes both CSS3 and JavaScript in more sense of the document.
addition to the HTML5 language, and is often In the past, content has been marked up using
used to describe the experience of interactive, heading and paragraph tags, but content has
Web pages for

mobile devices still
use HTML, it’s just
the CSS styles that
are different
Once you know HTML you can create both websites and web apps Apple’s website typifies what can be achieved with just HTML and
for the likes of iPhone, Android and even Facebook! some scripts and styles

Build a site
The new HTML5 specification has been drawn up by the W3C, an

organisation set up to act as the gatekeeper for web standards
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 The new features in HTML5 allow you to embed video and audio directly in your pages, and when combined with CSS
can provide amazing special effects
method for presenting interactive rich content
(with animated elements, video and audio) was
Adobe Flash. This is a plug-in that sits inside an content displayed. For example, an early option What’s next for HTML?
HTML document, but runs as a separate program was the <font> tag which allowed you to specify HTML has come a long way since its invention in a
within the web browser. When Apple released the typeface that you’d like the content and computer lab in Switzerland, and it’s continuing
the iPhone it decided not to support Flash, largely information to be rendered in. This allowed to develop. The HTML5 specification is already
because of the problems Flash had with crashing designers to very precisely choose how their partially implemented in browsers, but other
browsers, and the lack of support for touch content was displayed, but when a website elements of the language are still being
screens. This decision helped kick-start a consisted of 50 pages and the designer wanted to discussed, and there’s a good probability that
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
“HTML has come a long way since its
the majority are rendered using standard HTML
and either CSS, JavaScript or most commonly
invention in a Swiss lab”
both. Flash is still useful for certain types of change the font, it was a mammoth task to work we’ll see further enhancements in the coming
content – it’s a very popular method for showing through every page and replace every single years such as the ability to specify different
video on the web (although this will change as reference to the choice of font. resolution images to be downloaded to desktop
HTML5 is fully implemented by browsers), and As a solution, CSS was introduced. CSS, as you’ll computers from those sent to mobile devices.
games are currently easier to code in Flash. see elsewhere in this book, is a system for There’s been an explosion in smartphone use
Flash isn’t nearly as accessible as HTML, either applying styles – defining the form and aesthetic over the past few years which has led increasingly
from a developer point of view or from a user of a page. This means that now we can treat to the web being accessed on the move. These
perspective, especially with regard to disability HTML as a structural language only – we don’t devices have a different screen orientation to the
access. Adobe has worked to improve this over define the way a web page looks using HTML, just traditional computer, often have less bandwidth
the years, but the technology isn’t ever going to how it’s structured and content arranged in a and computing power, but expect to have a
be as accessible as a plain-text-based system semantic hierarchy. The net result is that by fantastic browsing experience. The HTML
such as HTML. separating form and function we can now language, through HTML5, is already adapting to
change a font that’s used throughout a big meet this challenge, but as the specification
HTML: function, not form website with just a single change to the CSS style matures you can expect to see further
In the early days of the internet, HTML included a sheet, saving time and ensuring design enhancements with this usage scenario in mind.
large variety of methods for changing the way consistency throughout. It’s an exciting time to be a web designer!

Common HTML tags
The <h1> tag is one of six different heading The <p> tag has to be the most common in use The <article> tag is brand new to HTML5.
tags (ranging from <h1> to <h6>). This signifies on the web. It marks up a piece of text as being a This handy tag enables you to mark a set of
the most important piece of information on your paragraph. Individual paragraphs can also be content as being part of one story. An article can
page, or in the section, and is akin to a chapter grouped into articles with another tag as you will contain many heading, paragraphs, images and
name or book title. soon see… other assets.
The <section> tag is also new to HTML5 and The <a> tag is perhaps the most important tag The <aside> tag is a great addition to the
allows you to mark up content into sections. of all. This anchor tag enables you to connect HTML5 specification. It allows you to mark up
Each section can contain a single item, or a different web pages together with a link. Without content as being not wholly related to the main
collection of related items. This tag is designed the <a> tag, there wouldn’t be a web so much as content of your page, section or article. This is
to allow you to mark up semantically, while still a collection of isolated pages that you’d need to typically used for sidebars and other
providing hooks for CSS. remember the addresses for. nonessential, but interesting, information.
The <header> tag allows you to mark up a The <img> tag allows you to call in images
section of your page, section or article as The <nav> tag simply marks up an area that’s into your page. It accepts a series of attributes
containing the masthead or header information responsible for the navigation on your page. that specify the location of the image on the
for that content. For an article, this would be a Typically it will contain many <a> tags, separated web, the width, height and some alternative text
heading and perhaps an image, while for a page by an unordered list (using the <ul> tag) and for screen readers or to be shown in the event
it might be your logo and page navigation. individual list items. the image can’t be found.

Build a site
Create a basic layout

Code up your first basic skeleton for a two-column webpage using HTML5
I
n this tutorial we’ll make an HTML5 layout for elements which help the browser interpret the with ‘</example>’. Note the ‘/’. Any thing within
a simple webpage. While initially HTML may layout of the page easier. <header> and <footer> those two elements will be considered its children;
look confusing, there’s a relatively small amount are two examples, and describe common top and they are contained within the element. This is
of code that you'll need to remember. There are a bottom elements of a page respectively. important to remember when you later use CSS and
few basic building blocks such as <div> which you When starting out in web design it’s important to then JavaScript. So open your text editor of choice
will find yourself using regularly, then others such as remember to ‘open’ and then ‘close’ tags correctly. – be it NotePad on Windows, TextEdit on Mac, or
<caption> which you will use much less often. Opening a tag looks like ‘<example>’ while closing something more high-end – and let's get started!
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 “There’s a relatively small amount of code
HTML before then good news, as it’s now easier
to understand! HTML5 has added in a lot of new that you'll need to remember”
A simple two-column page Div tag
A div is used to group content
The parts of the skeleton of an together, in this case we use it to
display our content and sidebar. Divs
elementary webpage can be nested within each other and
can have IDs and classes applied to
them so they can be identified
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
NEW ELEMENTS IN HTML5

In this tutorial we use a few tags that were only introduced in
the HTML5 specification. Elements such as 'header' and 'footer'
in HTML4 would be defined solely by a class or ID applied to a
div. It’s important to remember that some older browsers may
not recognise these new elements correctly. A remedy to this is
to use JavaScript solutions such as Modernizr or HTML5Shiv.

01 The HTML base 02 Create the head
First up, the doctype tells the browser what kind of content to expect. In Next up is the <head> element, where we place all the files we wish to
HTML5 it’s simple: <!DOCTYPE html><html lang="en"></html>. include within our page, eg CSS style sheets, which we'll learn about later.
03 Add the body 04 Add the header

The <body> is where all the viewable page content goes. In it we’ll add the The <header> is typically used to hold the main site image, with a title and
header, the main content area, sidebar and a footer perhaps for a sitemap. possibly site navigation. You can have multiple <header> tags on a page.
05 Sidebar and content 06 Add the footer

The main content can be placed within a 'div', then a class applied to it: <div The <footer> element usually contains quick links to common areas of the
class='content'> </div>. The sidebar can be placed after it, also with a class. site such as 'Contact us', and sometimes has copyrights or addresses.

Build a site
Code a link
Adding in links to other pages in your site and external sites is a key part of web design
W
hile links may seem like a simple element to add to a webpage, they are
the key building blocks of the entire internet. Imagine having to type a
different address into the browser for every single page you wanted to visit
on the web! 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 or something
similar to your site, it means that visitors will be able to quickly move to the content that
they are interested in.
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.
“Links are the key building blocks

of the entire internet”
Adding in links to pages Link text

The link text is what your user will see,
Default styling
Without adding in any styling of
Adding links to other pages so make sure it’s descriptive. Try to your own, links will be underlined
is straightforward avoid using 'click here'; instead, word and blue, and once visited will turn
the surrounding text, eg view my <a purple. Your cursor will also change
href”gallery.html”>gallery</a> appearance in most browsers
<a> tag
The <a> tag is what denotes a link,
and is used on practically every
webpage on the internet to link to
other documents and sites
href
The 'href' part is where you enter in
the destination for the link. Usually
this will be somewhere else within
your site, but it can also be to
another page on the internet
RELATIVE PATHS
Relative paths or links, can only be used when linking to pages or files within
a site directory. A simple example is <a href="portfolio.html">Portfolio</a>.
This assumes that the page is in the same directory as the file that contains the
link. To link to a file in a different directory, the name of the location (typically
a folder) will need to be included, for example: <a href="portfolio/portfolio.
html">Portfolio</a>

01 The basic ‘a’ tag 02 Href
A link is denoted using the 'a' tag, short for anchor. We have already briefly The link needs a destination so that when it’s clicked, the browser
touched on this when we looked at common HTML tags. To start off your knows where to go. This is added in using 'href'. For example,
link, enter in: <a> </a>. However, unlike some other HTML tags, an anchor <a href=”http://www.webdesignermag.co.uk/” ></a> would send the
needs a little more information in order for it to work properly. browser to that external website.
03 Internal links 04 Add link text

To link to another page in your own site, you simply add the name of the To make the link visible to the user, add in some text between your opening
page; eg <a href=”contact.html” ></a>. This assumes that the contact.html and closing <a> tags. For example: <a href=”gallery.html”> See My Gallery</
page is within the same folder as the page we are working on. See the a>. Open the page in your browser, and assuming the gallery.html page
‘Relative paths’ boxout for more information. exits in the same directory, clicking the text will take you there.

Build a site
Create lists in your website

Learn how to quickly create various lists within your webpages using HTML
L
ists are an effective way of presenting important information in a way
that’s quick and easy for your audience to read and digest. They are also
a good method for giving a brief overview or introduction of the content to
follow, helping 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
starts at one and then increases. This is useful when you need to prioritise certain
entries and give preference those that appear higher up. Alternatively, ordered lists
are essential if you want to display a step-by-step guide that's easy to follow.
An unordered list is simply bullet-pointed; this style 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 a circular bullet point will be used.
This tutorial will show you how to add lists to your pages, both ordered and
unordered, and also how to create lists within lists. The only thing you need to bare
in mind is not to go overkill with lists, leaving your content boring and 'listless'!
“Coding up a list in HTML is quick

and very straightforward”
Links within lists
Types of lists in HTML Links can be put into lists simply by

wrapping an <a> tag around the
text. This is great for making menus
Using the list tags to create ordered and unordered lists and navigation items
Unordered list
An unordered list is simply a series
of items grouped together. By
default they will be indented and
each item will have a bullet point
next to it
Nested lists
Lists can be embedded within other
lists simply by opening and closing
a <ul> or <ol> within another list.
These are then indented further, and
show a white bullet point
DEFINITION LISTS
There is one other type of list in HTML – the definition list. It’s
Ordered list quite rarely used but allows an indented description to be
added to each list item. An example definition list would be:
An ordered list automatically
applies numbers of ascending <dl>
value to each item within it. This is <dt>Snowboard</dt>
useful when you need to prioritise <dd>- Great for freestyle tricks</dd>
content, for example <dt>Cross Country Skis</dt>
<dd>- Ideal for exploring on</dd>
</dl>

01 Unordered list 02 Add list items
An unordered list by default is shown slightly indented with a bullet point Within your list, items are added using the list item tag like so: <li> </li>.
denoting each item. To add in an unordered list you use the <ul> tag. Text can go between the open and close li tags; for example: <li> Tea </li>.
Remember to close it with a </ul>. Remember that the li tags must go within your <ul> tag.
03 Nested lists 04 Ordered lists

Lists can be embedded within other lists just by opening and closing a new If you wish to number your list items then you can use the <ol> tag in place
<ul> within another <ul>, and then list items can be added to that too. They of the <ul>. This will then replace the bullet points with ascending numeric
will then be indented again within that <ul>. values for the list items.

Build a site
Learn to use div tags

Learn about the all-important div tag in HTML and how
it’s used to group content
A
n HTML page is made up of a series of tags that 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!
Indenting divs
Once your pages get more complicated, they can feature
Properties of the div many divs all nested within each other. This can make it
hard to track where one opens and another closes. It’s
Divs, classes and IDs standard practice to indent the content of a div using the
tab button
Div classes
Classes are widely used in web
development to allow CSS styles to
be associated with elements within
your HTML page
IDs
IDs are used in a similar way to
classes, but there should only be NESTING DIVS
one element on a page with a
particular ID. IDs allow you to target Many webpages are made up of a few main elements such as a
specific elements using JavaScript header and footer, and then a main content div. Within a div it’s
for manipulation possible to have other divs. For example:
<div id=”content”>
<div class=”leftColumn”
</div>
Code highlighting
Most HTML editors offer code <div class=”rightColumn”
colour highlighting of some sort. </div>
This can help you when checking </div>
which divs have classes applied etc Doing this allows you to have a universal style to the ‘content’
div, and then apply different styles to the divs contained within.

01 The basic div 02 Closing the div
A div is started by using this simple piece of code: <div>. Following on Once you have inserted all the content, you need to make sure you close
from that, you can then insert all the content you want to contain within off the div by using </div>. Note the forward slash denoting the ending
the div. of the current div.
03 Adding an ID 04 Adding a class

A div can have a unique identifier so it can be recognised in a style sheet Classes are similar to IDs, but many items on a page can have the same class.
or by any JavaScript you may add. To apply an ID to a div, use: To apply a class to a div, use: <div class=”myDivClass”> </div>
<div id=”myDivId”> </div> Using classes makes styling multiple elements much easier.

Build a site
Create a three-column layout

Put what you’ve learnt so far into practice and make the popular
three-column webpage structure using HTML5
H
TML and CSS essentially allow for a right with supplementary information or Facebook show you how to code up the HTML scaffolding
huge range of freedom when designing and Twitter feeds. This is then commonly rounded for a three-column layout using modern HTML5
your pages, but there are a few layout off with a site-wide footer containing copyright elements. Once you have mastered this, it can then
principles that have developed over the years information, the name of the site designer, site links be adapted into a two- or more-than-three-column
which it’s a good idea to follow. and sometimes a contact address. This tutorial will layout if you so wish.
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 ”This tutorial will show you how to code up
layout for a site is to have the site or company logo
at the top of the page, then have a column down the HTML scaffolding for a three-column
the left for navigation or links, a main content
section in the centre, and then a sidebar on the layout using modern HTML5 elements”

01 Set up your HTML page
To start off, open up your favourite editor and 02 Open HTML tag
create the initial HTML elements as usual.
The first thing we need to add is the HTML5 Next up we need to start off our HTML by 03 Insert the head
doctype declaration: entering the HTML tag – <html> – and then The head tag is an important one in HTML, and
making sure we close this with </html>. shouldn’t be confused with the ’header’ tag.
001 <!DOCTYPE html> This tag tells the browser that contained within Content within the head is not displayed to the
This tells our browser that we are using the HTML this section is HTML code. All the page content user, but is used to include your CSS style sheets,
specification within the page, and it should be that we will be creating will need to go within JavaScript and metadata. Within your <html>
placed right at the top of your HTML file. these tags. tags, place <head>, then </head> to close it off.
05 Define character set

There are many different ways of displaying
04 Add a title characters in computing, and a few different
The title tag is used to display text in the standards depending on language; eg Greek or 06 The body tag
browser’s title bar at the top (if it has one), and Arabic text looks very different from Chinese. All the content you wish to be displayed to the
also used as a guide for search engines to identify Luckily for us, almost all the web uses the UTF-8 user is put within a ’body’ tag. This goes after
what content is contained within the page. Add standard, which we define within our head with: your ’head’ tag has been closed, but within your
a <title> tag within your head. Next, add a page 001 <meta charset=”utf-8” /> <html> tag. Start it off with <body>, then close it
title to describe the content, and close the title UTF-8 does a good job of displaying most off in the normal way: </body>. From now on we
tag with </title>. characters correctly. will place all code within the body tag.
09 The header
The top element to our page is usually referred
07 Adding comments 08 The container to as a ’header’ and contains the site title, logo,
Sometimes you may wish to add a note to a It’s quite common to wrap all the main content navigation, and sometimes adverts. To create
location within your page, perhaps as a reminder within the body in a ’container’ div. This can make a header we use the header tag, which is new
or to make it easier to see where certain elements styling and centring easier when you start to in HTML5. To open it enter <header> and then
start or finish. Comments are started using ’’. For example:  we can style it later: <div id=”container”> within each other.

Build a site
10 Nav tag 11 Navigation items 12 First column

Nearly all pages contain a navigation or menu bar To add links to the navigation we use the <a> Now we can add our first left column. This goes
of some sort to allow visitors to get around the or anchor tag. Eg <a href=”products.html”> after the header tag, but still within our container
site. HTML5 now has a tag specifically for this. The Products </a>. If you don’t yet know your exact div. Add this in with <div> and then don’t forget
’nav’ tag is where to place links to other items. site layout, it’s common to use a ’#’ in place of the to close: </div>. Again, you can give it an ID or
Let’s add one to our page – <nav> – and then link. A hash symbol can also be used to target a class, such as <div id=”col1”></div>. This column
close off again with </nav>. specific div within a page. might contain a menu or adverts, for example.
13 Second column
The second column is usually the widest in the
centre, and normally houses the main page 15 The footer element
content. Add it to the page the same way as 14 Third column The footer is used to mark the bottom of the
before, but give it a different ID this time.
The third and final column is then added in page, and often contains a list of common links,
001 <div id=”col2”> </div> exactly the same way, with a unique ID: <div along with copyright and/or contact information.
Don’t be concerned if you can’t see any content id=”sidebar”></div>. If you wanted to place the To add a footer we simply use the HTML5 footer
within your browser – as without styling, divs name within each div to see the results in the tag – <footer> – and as always, close it off using
are essentially invisible and only the content browser and help you visualise the page layout, </footer>. Place this after your sidebar column in
contained is displayed. then you can: <div id=”sidebar”>Sidebar</div> the code.
17 Stopping Google
16 Metadata (optional)
If you know what content is going into the
indexing (optional) 18 The end result
pages and wish to improve search engine To stop Google and other search engines Save the file now, making sure to have the .html
optimisation, you can add meta information to indexing your page, you can add the following extension at the end. Open the file within a
the head. Meta information helps Google and code to your head: <meta name=”robots” browser to see the result. As there is no styling
other search engines to index and organise sites content=”noindex”>. This means the page will not applied yet, it won’t look particularly attractive
by content. The meta description tag is used to be shown in Google’s search results. This can be by any means, but you’ve created a basic web
give a short account of the page content: <meta useful on client login pages, or out-of-date pages page layout that’s now ready for CSS and content
name=“description” content=“Fishing in Dorset”> that you wish to archive. to be added.

The three-column layout Metadata
The flexible three-column page structure is <meta charset=”utf-8” />
used by many sites <meta name=”description” content=”Fishing in Dorset”>
<meta name=”robots” content=”noindex”>
There are a few common meta elements which, while
not displayed by the browser, help with search engine
optimisation as well as how the browser renders your content
The header Footer Columns

In this instance the header code The footer element often remains consistent The main columns are <div> elements
contains the navigation elements throughout a site and is usually not as tall as that you can apply CSS to later, such as
of the page, although it’s also often the header, although recently there have been width, height, padding etc. It’s usual to
used for site title and logos. Here we some great designs featuring very prominent have the centre column the widest, but
are using the HTML5 nav element footer elements this isn’t mandatory
Internet Explorer compatibility Ensure your HTML5 page works in IE

While most users of Chrome, Firefox and Safari run HTML5, there is still a large chunk 
required to add in a few workarounds to get everything to work satisfactorily. One The  004 color: #333;
002 <link rel=”stylesheet” href=”styles.css”> 005 padding: 6px 20px;
003 <link href=’http://fonts.googleapis.com/css?family=Lobster’ 006 text-decoration: none;
rel=’stylesheet’ 007 border-right: 1px solid #333;
004 type=’text/css’> 008 font-size: 16px;
005 009 font-family: ‘Lobster’, cursive;
006 </head> 010 }

Build a site
Create a sidebar
Learn how to create a clean navigation system for your website
A
sidebar is without doubt the area that Flickr section – very useful for any photography-
is most often created by web designers based sites. So open up your favourite text editor STICK TO THE RIGHT
because it’s the most needed. It can hold and let’s get started. If you spend some time surfing the internet in
all sorts of content: things such as extra navigation some detail, the chances are that you won’t see too
many websites with the sidebar fixed over to the
links, a search field and perhaps some small
thumbnail images that relate to your website – it “A sidebar can hold left side – it is far more likely to be over to the right.
Even though it is relatively easy to swap it over, you
can be anything.
So in this tutorial we’re going to create a simple all sorts of content: wouldn’t be doing anyone any favours if you thought
you would be clever and original by plonking it
page layout that has a functional navigation and a
nice and simple sidebar that includes some content extra navigation links, on the left – internet users are now accustomed
to seeing this section on the right-hand side of
their screens. If you’re struggling to add content
within. We’re going to include within the sidebar a
list of links for that extra navigation we mentioned a search field, even in the sidebar, then you can add a short summary
about you or your business or perhaps even a small
and a search bar above and also some thumbnail
images at the bottom to act as though we have a some small images” YouTube video about your site.
The width
A perfect sidebar A thin-looking sidebar wouldn’t
help anyone unless you have no
Your sidebar needs to be clean and crisp to intention of anything but small
keep your visitors engaged 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 plug-in that allows
them to feature their Flickr photos

01 Getting started 02 CSS and wrapper
First thing we need to do is create new ‘index.html’ and ‘styles.css’ files and If you open up the index.html file and just underneath the ‘<title>’ tags,
place them in the same location (directory). And because we will be using place your link to your CSS. Then we want to add in a wrapper div that
images for our sidebar, let’s also create an empty folder called ‘imgs’. Feel will help us contain everything on the page and allow us to centre it all
free to carry on with what we created last time. using CSS.
03 The header 04 Navigation

Next we want to add in a header for our page and we do this by adding a In this step we are going to add in the navigation. What we will use here is a
div with an ID of ‘header’. Then within the header we are going to put our standard unordered list and each list item (<li>) will have a link to each page
type-based logo that is wrapped within an anchor tag that links back to the using the ‘<a href=”’ attribute. Then we will give our unordered list a class
home page (index.html). name of ‘navigation’.
05 Sidebar and search 06 Sidebar navigation

Let’s now add in our sidebar section. All we do here is create a div ID with Now what we need to do is now is add in what will be our sidebar
the name of ‘sidebar’ just underneath the closing header div ‘</div>’. Then, navigation. This is the exactly the same code as our top main navigation, so
using the code above, within our sidebar section let’s add in a search field it’s just a case of copying and pasting that into the sidebar. But we will need
that will just sit there and look pretty. to give it a different class name, which can be ‘sidebar_list’.

Build a site
07 Sidebar images 08 The main content

We’ll now add some images to sit below our navigation list. We have the same To finish off our HTML markup, we will add in a main content section. Again
image here for both, set to the size of 100x100px. We've given them a class let’s use an ID and name it ‘main_content’. Then within the ‘main_content’
name of ‘thumb’ so we can use CSS to position them better without relying section we can add in a ‘welcome’ title accompanied by some dummy text
on the ‘img’ tag. Also we've given this section a title with the ‘<h3>’ tag. wrapped in a paragraph tag ‘<p>’.
09 The CSS 10 The wrapper

So with our wrapper acting as a container for all our page content, we can
Open up your ‘styles.css’ file and at the top add in the universal selector that centre everything using a fixed width and margin. We’re specifying 0 pixels
will allow you to reset every element (<p>, <h1>, div, etc) to zero margin and on top and bottom, with auto margins on the left and right. This is an easy
padding. Then using the ‘body’ tag we can set the background colour to an and most often the best way of centring your page on your screen.
off white ‘#f1f1f1’ and set our default font style and size.
001 #wrapper {
001 * {
002 margin: 0 auto;
002 padding: 0;
003 width: 960px;
003 margin: 0;
004 }
004 }
005
006 body { 12 The navigation
007 background: #f1f1f1; 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
008 font-family: Verdana, Geneva, sans-serif; negative margin of ‘-50px’. Then we give the navigation a width of 600px. To
009 font-size: 12px; bump everything to a horizontal position we float all the ‘<li>’ left, then create
010 } our button separator by adding a ‘border-right’ to the ‘navigation li a’ selector.
001 .navigation {
002 float: right;
11 The header & logo
003 margin: 150px -50px 0 0;
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 004 width: 600px;
for now. We've given ours a drop shadow using the ‘text-shadow’ property. 005 }
001 #header { 006 .navigation li {
002 float: left; 007 float: left;
003 width: 100%; 008 list-style: none;
004 height: 250px; 009 }
005 } 010 .navigation li a {
006 #logo h1{ 011 float: left;
007 font-size: 35px; 012 color: #333;
008 float: left; 013 padding: 6px 20px;
009 margin-top: 130px; 014 text-decoration: none;
010 color: #dac91a; 015 border-right: 1px solid #333;
011 text-shadow: 1px 1px 3px #333; 016 font-size: 16px;
012 } 017 }

14 Google fonts
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 add
in the ‘font-family’ property. Do the same for your ‘#logo’ rule.
001 
002 <link rel=”stylesheet” href=”styles.css”>
003 <link href=’http://fonts.googleapis.com/css?family=Lobster’
rel=’stylesheet’
004 type=’text/css’>
13 Navigation hover state
005
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 006 .navigation li a {
first thing we are going to add here, and then in the next step we will shoot 007 float: left;
over to Google fonts to download the ‘lobster’ font and use that. 008 color: #333;
001 .navigation li a:hover { 009 padding: 6px 20px;
002 010 text-decoration: none;
003 background-color: #333; 011 border-right: 1px solid #333;
004 color: #fff; 012 font-size: 16px;
005 } 013 font-family: ‘Lobster’, cursive;
014 }
15 The sidebar
Now in this step we are going to style our sidebar. So first we are going to 16 Sidebar list
float the sidebar over to the right and set a fixed height and width. Then
Style the sidebar navigation list by pushing it away from the edges using a
we can style the ‘<h3>’ header tag and just push that off the left side using
20px margin. Add a subtle dotted line using the ‘border-bottom’ property.
padding. Then give the text a dark grey colour of ‘#333’.
001 .sidebar_list {
001 #sidebar {
002 margin: 20px;
002 float: right;
003 }
003 width: 300px;
004
004 height: 100%;
005 .sidebar_list li {
005 background: #fff;
006 list-style: none;
006 }
007 margin: 10px;
007
008 padding-bottom: 10px;
008 #sidebar h3 {
009 border-bottom: 1px dotted #ddd;
009 padding-left: 20px;
010 }
010 color: #333;
011
011 }
012 .sidebar_list li a{
17 The search field 013 text-decoration: none;
In this step let’s style our search field. First of all we push it down slightly and 014 color: #333;
then make sure anything underneath it is 50px away. Then we slightly push 015 font-size: 13px;
it away from the left edge using 20px. And lastly we give the input field 016 }
some padding to make it a bit more attractive.
001 #search_form { 18 Finishing off
002 To finish, we need to style our thumbnail images. So we float them left so
003 margin: 10px 0 50px 20px; they bump up to each other and then space them out by using margin.
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 }

Build a site
Add content to your website

Learn how you can add content to the main area of your website
A
dding content to your website is either one) and also some text and an image. So open up
done dynamically using a content the index.html and styles.css files within your text THE RIGHT STUFF
management system (CMS) or by hand. editor and follow these simple steps. Adding the right amount of content to any website
Either way, you are going to have to learn how it’s is vital and can mean the difference of having a
styled and what options you have. For instance, will
you have just text or text with images? How about
“Your content successful, clean website to a cluttered and confusing
one. The layout needn’t be the main concern here
as you can have multiple columns throughout. But
a video that’s either embedded using YouTube’s, or
your own flash or HTML5 player? choices should be it’s the white space and the way that your sections
are aligned that will give your web page a better and
Of course your choices should be dependent
on what niche your website caters for and thus dependent on the more readable layout. We also used horizontal rules
to add separators to section out our content even
further. But there is no real need to use a horizontal
knowing who will be visiting your website. So in
this tutorial, we will add a few elements of content niche audience your rule; we can just as easily use an image here or in
some cases a bottom border. Just remember that if
where one will include a video (which you can grab
whatever video you want, you don’t have to use our website caters for” there’s no content, you won’t get many visitors.
Content is king The top section

It’s a good idea to add some text about
The width
You will need to think about
Let’s check out the most important parts of adding your website so users can see what you the width of your main
are all about before going any further content area(s) and plan
content to your webpage ahead accordingly
The middle section

We have added a video from
YouTube here, but of course this
could just as easily be a image of
your company or yourself!
The bottom section

The bottom section is again used as
a text-based section that describes
the middle section video

02 Main content header
Now in this step we are going to give our main content area a title that will
01 Getting started 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
Open the Sidebar index.html file online or carry on from last time and you will
see we have most of the template done. We have a logo, a navigation and the what we can do to make this look a little nicer.
sidebar to the right. On the left we have our content area. 001 <h2>Hi, Welcome to my website</h2>
04 Adding an image
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 place your image tag ‘<img src=’ above the welcome text just sitting
03 Welcome text underneath the header. Then we will use CSS later to float it to the right.
Now we need to add some ‘welcome’ text. This is normally a good way of
letting the user know what your website is all about from the off. Here we 001 <img src=”imgs/thumbnail.jpg” height=”100” width=”100”
will just wrap about three or four sentences within some ‘<p>’ tags. class=”main_thumb”>
05 Styling our content 06 Content image

Let’s open up our ‘styles.css’ file. We can point to the ‘#main_content’ div Now let’s float the image over to the right and add some styles to it. We are
and then hock onto the ‘p’ tag. We can then use multiple selectors here and going to use the same CSS as we did on the sidebar thumbnails. Then we’re
use the same style properties and values for the<h2> tag. 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 }

Build a site
08 The main content height

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
‘height: 100%’;
001 #main_content{
07 Video 002 float: left;
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 003 height: 100%;
really simple, we can shoot over to youtube.com and copy and paste the 004 width: 630px;
embed code within our ‘index.html’ page. Then we want to be able to shift 005 background: #fff;
this video about using CSS, so it would make sense to wrap a div around it
006 border-radius: 6px;
with an ID of ‘video’.
007 margin-bottom: 40px;
001 <div id=”video”>
008 }
002 <iframe width=”420” height=”315” src=”http://www.youtube.com/
embed/kNn44gHqanM” frameborder=”0” allowfullscreen></iframe>
003 </div>
09 Positioning the video

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
have a generous amount of white space. Then let’s add a black 5px border to 10 Horizontal rule
finish off our video. What we are going to do now is add a separator just above the video. This
will be easily styled using CSS, so we won’t need to depend on some graphic
001 #video {
design software such as Photoshop or Fireworks. It’s simply an HTML tag
002 float: left; called a horizontal rule ‘<hr>’ and we can add that just above the video div
003 margin: 20px; within our ‘index.html’ file.
004 border: 5px solid #000; 001 <hr>
005 } 002 <div id=”video”>
11 Styling the horizontal rule

Styling the horizontal rule ‘<hr>’ is going to be a very simple task, but it can
leave you scratching your head at times. For instance, if you want to increase
its height, you can’t just call ‘height: 10px’ – we have to instead call upon its
‘border’ property like ‘border: 5px solid #ddd’. But let’s keep it simple and
decrease its width, give it a grey colour and push it away from the left edge 12 Adding more content
using ‘margin-left’. So now you should get the idea of how and what we can add for our main
001 hr { 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
002 color: #ddd;
would be to use the same image but give it a different class name of ‘main_
003 width: 570px; thumb2’ and place this directly under our closing div of our ‘video’.
004 margin-left: 20px; 001 <img src=”imgs/thumbnail.jpg” height=”100” width=”100”
005 } class=”main_thumb2”>

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

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. 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
001 .vid_excerpt { more control of this section if at all we need to position it further. So, create
002 float: right; a div with an ID of ‘bottom_content’ and make sure you use an HTML
003 margin: 0 50px 40px 0; comment to mark the ending div ‘</div>’
004 } 001 <div id=”bottom_content”>
002 </div>
17 Adding another divider

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;
003 width: 570px;
004 margin-left: 20px;
18 Going further
As we said in the intro text to this tutorial, it’s down to you as to what
005 float: left;
your content should include. Later in this book we explore adding maps,
006 } newsletters, social media icons and more!

Build a site
Add content to your footer

Finish off your first site with a footer to be proud of
I
n the past, the humble footer was not much
more than a slim strip of colour with nothing
readers don’t have to scroll back to the top or to the
sidebar if they want visit another page. “The footer has
more interesting than the copyright text
written within. But in many modern websites, we
have seen a huge improvement in footer designs
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
taken the web by
and the content held within them.
These days, they are a lot higher and contain all
web by storm and has now developed into an area
that needs good planning – like all parts of your
storm and has now
sorts of content, which can include contact forms,
newsletter sign-up fields, social media integration
website, it is important to offer the right amount
of content without confusing the user. So in this
developed into an
and much more. Ours for instance, in addition to a
newsletter sign-up field and generic About Us text,
tutorial we will build a simple footer and include
some useful content that you would most likely see
area that needs
features another set of links for navigation, so our in a modern layout. good planning”
Dissecting the footer Navigation The newsletter field

The most important things to keep in Having a list of links for an extra We added this feature because it
navigation will allow your users to would make sense for people to learn
consideration for a good footer click through other pages without more about your business/service. A
needing to scroll up contact form here is also a good idea
The about text

The about text is a great way of
letting people know what you are
about if and when they are viewing
the content within your footer
SHORTHAND CSS
Over the course of this tutorial we
have used a lot of shorthand CSS.
The reason being is it’s quicker to
write and decreases your
style sheet's file size – even if it’s
only very small. The shorthand is
used for margin and padding, and
there is a lot more you can do with
it that we haven’t covered. So let’s
take a margin declaration for an
example. It works in a clockwise
direction, so ‘margin: 10px 20px
30px 40px’ would mean 10 pixels
top, 20 pixels right, 30 pixels
bottom and 40 pixels left. So top,
right, bottom, left. Then we can get
even more technical by only using
two values such as: ‘margin: 20px
30px’. Now this means 20 pixels top
and bottom, then 30 pixels right
and left. And lastly if we just use
one value such as: ‘margin: 20px’
would simply mean 20 pixels all
around to whatever element (div)
was specified.

03 Footer links
It is always a good idea to place your site’s
navigation within the footer so the user doesn’t
need to scroll all the way up to the top to
navigate your site. So let’s use an unordered list
and give it a class name of ‘footer_links’ and place
it just underneath the 'about' text.
001 <ul class=”footer_links”>
002 <li><a href=””>home</a></li>
01 Getting started 02 About us 003 <li><a href=””>about</a></li>
Open up your ‘index.html’ file from the last In this step we are going to add some ‘about
project and scroll down to the very bottom of the us’ text that will be positioned to the left of our 004 <li><a href=””>blog</a></li>
document. The first we are going to do here is footer. So first thing to do would be to create a div 005 <li><a href=””>portfolio</a></li>
just underneath our closing ‘main_content’ div, with a class name of ‘about_txt’ within our footer 006 <li><a href=””>services</a></li>
add in a div with an ID of ‘footer’. ID making sure we add on a HTML comment to 007 <li><a href=””>contact</a></li>
001 <div id=”footer”> the closing div. For content, we will start with a
‘<h4>’ header tag that includes the words ‘about 008 </ul>
002 </div>
us’. Then underneath that we will add in some
dummy text that is wrapped within paragraph
04 Newsletter sign up tags ‘<p>’.
Many websites would have either a contact form 001 <div class=”about_txt”>
or newsletter sign up field within their footer. 002 </div>
What we will do is keep it simple and add in a
newsletter sign up field. We will give it an ID name
of ‘newsletter’ and we will place this straight 05 Footer background
under the footer links. We can then position this Now we have finished our HTML mark-up, but if
later over to the right using CSS. we viewed it in the browser now it would look a
bit of a mess! So let’s open up the ‘styles.css’ file,
001 <form id=”newsletter” action=””
scroll down to the very bottom and start adding
method=”get”> some CSS for our footer. First thing we can do is
002 <input id=”search_term” type=”text” clear the floats so it pops underneath everything 06 The links
003 placeholder=”newsletter sign up....” /> above and give it some dimensions and a In this step let’s style our footer links so they
004 <input class=”submit_button” background colour of white. look more like a horizontal navigation list. We
001 #footer { are going to float it left and push it down using
005 type=”submit” value=”sign up”> margin and give it 20px space at the bottom.
006 </form> 002 clear: both; Then let’s give it a width of 370px.
003 height: 200px; 001 .footer_links {
004 width: 100%; 002 float: left;
005 background: #fff; 003 margin: 90px 0 20px 0px;
006 margin-bottom: 20px; 004 width: 370px;
007 } 005 }
08 Finishing the navigation 09 About text

Now we’re going to finish off our footer
Styling the 'about' text is going to be very
navigation. What we need to do is remove the
07 List items default underline and then give the text a light
simple. We first float it left and then give it a
Now style the list items‘<li>’. Here we are width of 250px. We then give it some padding
grey colour. Then for our hover state, let’s just
removing the default bullet points and then to allow some white space all around. One thing
change the colour of the text to black ‘#000’,
floating all the items left, which will push each to remember by using padding is it will make
giving us a subtle rollover effect.
one up and next to each other giving us a the box element (‘div’) 20 pixels bigger as the
horizontal alignment. Then using ‘margin-left’ we 001 .footer_links li a { padding effects the inner element, not the outer
can create some space between each other. 002 text-decoration: none; element, and pushes it out.
001 .footer_links li { 003 color: #333; 001 .about_txt {
002 list-style: none; 004 } 002 float: left;
003 float: left; 005 .footer_links li a:hover { 003 width: 250px;
004 margin-left: 20px; 006 color: #000; 004 padding: 20px;
005 } 007 } 005 }

WordPress
POST IMAGES
Get your blog looking great
and professional with our
tutorial on images,
WHAT YOU’LL LEARN

Throughout this section you will be harnessing
the power of the robust yet simplistic content
management system, WordPress. It’s used by
millions around the world for their personal and
business blogs. You will set up and manage a
blog, tidy your Dashboard, add video and audio,
and much more
“Getting a WordPress
blog up and running is SET UP
YOUR SITE
much simple than first- Get your WordPress blog up
and running
time users might think”

76 Get to know WordPress 4.0 94 Edit your WordPress blog posts
Get to see the latest updates Update that info and correct those mistakes
84 Download, install and set up a 98 Post images into your blog

Get to know the multiple methods
self-hosted site
The path to the perfect blog starts here
102 Embed external media in your posts
Make your WordPress blog truly come alive
88 View and organise WordPress
dashboard modules 106 Add special features to text
Keep your dashboard clean and tidy Make your text pop
90 Creating a WordPress blog

Create posts with text, images and videos
102
Embed
media
94
Edit
post
76
The new
4.0
WordPress
WordPress has been given one of its most significant

updates yet, but is it really all that different? What’s
really new in WordPress 4.0?
W
ordPress 4.0 includes a to save time with previews, while
selection of new browsing for new plugins has
features and security become a far better experience,
fixes to help bring your blog or allowing you to see small previews
website right up to date. Not only of the plugins.
have improvements been made to In the background, various
the theme customiser view and security fixes have been made,
media library interface to enhanced ensuring that your blog, your posts
media handling in the visual and any user data is protected
posting view and a brand new against online intruders.
interface for installing plugins, you’ll Remember to make sure your
also find changes to the TinyMCE UI blog is up to date, and this means
when creating a new post. It is now reviewing plugins regularly as well
even possible to select a language as making a backup before you
when you install WordPress 4.0 for upgrade. If you’ve been holding off
the first time. Enhancements to on some recent updates, you
managing images and videos helps shouldn’t miss WordPress 4.0!

WordPress
Get to know the 4.0 Dashboard

A new look tells you everything you need to know when you log in to WordPress
At first glance the Dashboard may not seem all that different in WordPress customisable as they were before, you are able to drag and drop for your
4.0, but on closer inspection you should spot the Welcome panel, where a own liking. You can use the Screen Options to determine which boxes
collection of shortcuts can be found. appear and which remain hidden.
This panel is ideal for newcomers to WordPress because it provides Further items will be added to the Dashboard as you install plugins.
shortcuts for adding widgets, installing a new theme, writing a new post Several prominent apps add important “at a glance”-style information to the
and adding an about page, as well as managing widgets and menus, turning Dashboard, such as Jetpack’s visitor stats plugin.
comments on and off and more. If you’re a more experienced user then the
panel can be dismissed.
Also available to you on the Dashboard is the At a Glance panel, your
blog’s comments Activity, the Quick Draft box and the WordPress News,
“Everything you need to know
which is useful for spotting when new updates are imminent. These are all when you log in to WordPress”
Updates Customise your site Welcome panel Quick Draft Screen options
Update alerts will help you Use the site customisr to The Welcome panel Employ the Quick Draft panel Use the screen
to keep your blog secure get a preview of how your introduces you to WordPress to add new blog posts in a options to tailor each
and protected against blog will look with a new 4.0. This is useful whether stripped-down form, without screen in WordPress
online threats as well background colour or with you’re new to the software or any pressure to publish your to your particular
improve functionality widgets added an experienced user post immediately workflow requirements
Plugins News panel

Activity panel Rearrange panels The WordPress News
Adding new Plugins has been At a Glance All recent activity on your Dashboard panels can be panel keeps you up
revised in WordPress 4.0, with Wordpress is grouped rearranged as needed,
The At a Glance panel gives to date with new and
a brand new user interface together in a easy to read allowing you to prioritise the
you all of the information upcoming versions of the
that improves the experience section called Activity panel information you need
you need about your blog blogging software

Get WordPress 4.0
Upgrade to WordPress 4.0 for the latest features
If you’re blog is already running WordPress, ensure your database is backed up before you
do anything else. Then sign into the Dashboard, find the notification informing you that
WordPress 4.0 is available, this will be displayed across the top of the page. Click the link to
begin the upgrade process. This will be the same whenever there is any new update available
for you to install.
After the update completes, you’ll be presented with the new Dashboard page. Before
proceeding make sure you check your plugins and themes for any available updates to
ensure full compatibility with the new version of the blog software. It might be that some
plugins may need to be disabled until the developers release compatible updates. Similarly,
there is a chance that you will need to choose a new theme.
“Some plugins may need to be Creating posts

disabled until the developers release
compatible updates”
Blogging made easier
WordPress 4.0 has improved tools for creating
and posting new articles
Improvements to the way in which you compose posts in WordPress 4.0 can be a benefit 01: Use full page editing
to new bloggers and those using WordPress as the publishing system for their top-rated, Use the ‘Distraction Free Writing’ button to take the WordPress
busy website. At a glance, there are very few differences with the previous version of post editor box full-screen, and enjoy a completely new way of
WordPress, but these improvements have been gradual over the past couple of years, and writing your blog.
as such are more secure and stable here.
In the Add New Post screen you’ll still find the title box, the option to edit the Permalink,
which is a vital tool in your SEO strategy, and an option to add images using the Add
Media button. You may also prefer to view all of the available buttons in the TinyMCE text
editor, which is possible by simply using Toolbar Toggle.
A notable recent addition to WordPress is the Format toolbar, which can be used to
create post types such as standard, images-focused, video posts, galleries and more. You’ll
find these work best when they are supported by your blog theme.
02: Format your posts

Use post formats to style the published article appropriately – for
instance, a video post might have the clip at the very top of the
page. This helps you keep page styles consistent.
03: Visual Posting

The Visual Editor now gives you a better idea of how a blog post
will appear when published, with accuracy determined by the
active theme.
Customising the look and feel of your blog posts has never been easier

WordPress
Revised Media Library

Changes to the WordPress media library make choosing images easier
One key addition to WordPress 4.0 is an
improvement to the Media Library. It is now
possible to view a larger-resolution version of an
uploaded image and make the necessary changes
with ease.
Improvements in how your images are handled
in the Edit screen, Media>Library>{Select your
image}>Edit Image, meanwhile allow you to make
and save edits without worrying whether or not
the changes you make will be applied. Although
it isn’t advisable to edit images on the server of a
busy website, sometimes it cannot be avoided, if
so, we would advise that your image editing takes
place on your computer or tablet.
You can also add a new title for the image, set a
caption to be displayed when it is embedded in
a post as well as display alt text when the image
doesn’t load. A description is also useful!
Whether you’re editing images or words you
can cycle between attachments uploaded by
using the arrows in the top-right corner of the
Attachment Details view.
Top tip
Intelligent resizing
“The software will display the video preview, rearranges the left and
as it would on the sites it originates” right menus to fit above
and below the editing box,
enabling you to edit your
Easily embed videos blog on smaller
Now there is no need to preview embedded videos devices.
One great way to attract readers and ensure
they hang around is to embed clips from video
sharing services into your posts. A new feature
in WordPress 4.0 offers a refined method of
viewing these video clips.
In the previous versions of WordPress an
embedded video was represented by a big
grey block, which provided a useful guide
to the size and positioning of the clip. After
updating to WordPress 4.0 the software will
display the video preview in your draft post
just as you would see it on the site it originates
from, YouTube or WordPress.tv for example.
You will no longer have to wait for a post
preview to load because you can preview the
video clip in the editor.
Although editing options are limited, there
are some choices available. If the video you
embedded is the wrong one, you can click the
pencil icon in the top left of the video preview
to open the edit screen and input a different
URL. WordPress only requires the URL rather
than the embed code. Should you want to
remove the video, simply click the X button.

Installing plugins in WordPress 4.0
Use the new installer tool to preview plugins and save time
Change view
Use the Plugins view menu
to switch between the
Featured, Popular and
Favourite plugins
Upload a plugin
If you’ve developed your
own plugin or have one
to upload, use the Upload
Plugin button to start
Search
To find plugins that aren’t
listed here, use the Search
box to search the WordPress
plugins repository to find it
Plugin details
Full details about the
plugin you’re considering
can be viewed by clicking
More Details
Add new
The new Add Plugins
screen summarises the
information you need about
each plugin
Plugins made easy Top tip

New user interface takes the pain out of plugin installation When checking new
Installing plugins can be a stressful experience. plugins, always view the
After backing-up your database and files, you then
need to ensure the plugin you’re about to install
screenshots. If the
is the best option for your blog. You may run it developer believes in the
on a test blog first to make sure that there are no
inadvertent side-effects.
plugin, they will take
With WordPress 4.0, the developers Automattic time to upload
have introduced a new user interface that will
alleviate some of the stress by presenting available
screenshots.
plugins with a use preview that gives more
information than was previously available to you.
Now when you open the Plugins>Add New
screen, you will be presented with a selection
of Featured plugins, while a second tab displays
Popular plugins. Descriptions, ratings and update
information is provided, along with compatibility
details. To find out more, click More Details, and
when you’re happy you can click Install Now to
add the plugin to your blog.
A useful new feature for anyone running
multiple blogs is Favourites, which means if you
sign in through your blog, you can view any
plugins that you marked as a favourite, making it
easy to find in future.

WordPress
Get the language right

Adjust your language settings for your contributors
If you run a blog that is targeted at a foreign country, and have a team of bloggers who
speak the language of that region, then it might be a wise strategy to ensure that they
can use WordPress effectively. The best way to do this is to set up the blog software
using their preferred language, which is now an option when you install WordPress 4.0
onto a new server.
You may already be familiar with the WordPress installation screen, which you are
presented with as you open your domain name in your browser after uploading the
latest unzipped version of the blog software, we will explain how to do so over the next
few pages. Setting your preferred language is the first option here. If you’re used to
using automated installers in cPanel or similar server admin tools, the language option
will also be found here.
Once the language is set, it cannot be changed without reinstalling, so ensure you
have selected the right option.
“You can now get a full preview in Live widgets

the Theme Customizer”
Previewing widgets
Get the best preview of your theme yet – with widgets!
WordPress 4.0 features a few improvements to the Theme Customizer, which can be
accessed in Appearance>Customize. Previously this was limited to simply changing colours
and the site title, now it is a far more powerful tool that can demonstrate the impact of any 01: Customise your blog
installed widgets on your chosen blog theme, as long as it is compatible with live widget Access the Theme Customizer via Appearance>Customize. Click
previews, before you have installed it. Widgets to view available widgets for your blog theme sidebars.
The advantage of this is clear. Where once you would have added a widget, saved it and You can change them in the Widgets Settings.
then quickly refreshed your blog – probably in a new browser tab – to see how it looked
and whether or not it had altered your blog layout now you can get a full preview in the
Theme Customizer before rolling out the changes to your readers.
We think that this is one of the most important new developments in WordPress 4.0, and
once you’ve tried it out we’re certain you will agree!
02: Adding a widget

Click Add a Widget to display the widgets you can use, and
configure the one you want to use. Observe how it updates as
confirm options. Take time to try the different options.
03: Save your changes

Widgets can be reordered by clicking and dragging and like other
changes will update in the preview. When you’re happy with your
post click Save & Publish.

Adjust your Screen Options
Customise your WordPress 4.0 experience by Top tip
configuring screen options The Screen Options
How do you use WordPress? For most, it is a case blogging software’s back-end to see only what
of sign in, scramble around looking for the link or you need. button is even available
feature you’re looking for on the Dashboard or For instance, you’ve installed several plugins
New Post page, write your post, and then logout. to your WordPress 4.0 blog, and the Dashboard
across several admin
With the addition of more and more plugins over is beginning to look a bit cluttered. All you need screens in WordPress 4.0,
time, this process can become increasingly slow. to do in this situation is open the Screen Options
The reason for this is simple: you’re not using box at the top of the browser window, and disable such as the Add New
WordPress right. Using the Screen Options items that you don’t need to see, don’t use, or Post, All Posts and
button, available at the top of almost every admin don’t need to access through the Dashboard. Click
screen in the Dashboard, you can customise the the Screen Options button when you’re done. Dashboard.
Open the Options

Click the Screen Options button to
open the concealed window, where you
can make any changes to the layout
The Options are flexible

You can activate as many or as few of
the Screen Options settings as you like
Tick it to activate it
To enable a control, place a tick in the
corresponding box. Removing the tick
will hide the control
TinyMCE editor
Maximise the space to compose your
posts by using this option to expand
the TinyMCE editor’s dimensions
Number of columns
Too many columns? Use the Number of
Columns option to restyle the layout
Click it to close it
Click the Screen Options button to close
the window, and carrying on blogging
Toggling tools
Even controls with their own tool for
closing can be toggled off and on
Don’t hide, minimise

Rather than disable panels completely,
you might prefer to minimise them,
expanding them only when you need
to use them
Tailor menus
These controls are tailored to your
WordPress Dashboard screen
Different screens
Different WordPress admin screens
feature a different set of options

WordPress
Download, install and set up

a self-hosted site
The path to a perfect blog starts right at the beginning. Here we show
you how to download, install and set up WordPress
W
ordPress has become synonymous earlier. In this tutorial we are focusing on the self- WordPress can be installed in five minutes, when
with the term blog, and with good hosting option, which relates to users who already you know what you are doing. However, for those
reason. The web publishing platform own a domain name and web space. not so well acquainted with the WordPress platform,
is free to download, easy to install and simple to The WordPress site extols the virtues of its the process is a little more in-depth. Here we look
use. Add into this already appealing mix the fact famous 'five-minute installation’ and undoubtedly at the basics, namely where to download the latest
that there are continual updates and development, version of WordPress and how to install.
“It’s free to download,
swathes of themes and literally thousands and
thousands of add-ons and it’s hard to see what’s
We also take a more in-depth look at setting
up a MySQL database and how to transfer files,
not to like.
easy to install and
WordPress itself comes in two distinct flavours:
ready for installation, via an FTP client. Finally, we
run through the installation process and take a
simple to use”
either hosted via www.wordpress.com or self-
hosted via www.wordpress.org, as we explained
peek at how to modify some of WordPress’s
essential settings.
The WordPress Dashboard

Where you’ll be spending most of your
time in WordPress
Top toolbar
This toolbar is full of handy links,
including access to your WordPress
account, where you can change
your name, email address and lots
more besides
Comments and links

After you start posting, you’re likely
to get comments from your readers.
They, along with people who have
linked to your site, will appear here
for your approval

01 Get WordPress 02 Web host account 03 Create a database
The first step to a great blog is downloading and Before installing WordPress, a database needs Locate the Database section and MySQL
installing the platform. To download the latest to be created. We are going to demonstrate a Database Wizard. Create a database, add a name
version of WordPress, head to wordpress.org/ typical setup using cPanel. First of all you’ll need in New Database and press Next Step. Now add
download, click Download WordPress and save to log in to your web host account; these details a username and password, then press Next Step.
the file to the desktop. should have been provided by your web host. Now click All Privileges and Next Step.
04 Database details 05 Settings 06 Get connected

Head to the location of the WordPress download The only settings that need to be changed are Now upload all the WordPress files to the desired
and locate wp-config-sample.php. Rename the ‘DB_NAME’, ‘DB_USER’ and ‘DB_PASSWORD’. web space using FTP. Open FileZilla and go to
file 'wp-config.php' and then open it in a text Now substitute the putyourdbnamehere, File>Site Manager and enter the Host address, ie
editor. At the top under MySQL settings is where usernamehere and yourpasswordhere with the ftp.mywebsitename.co.uk and username and
the database and details need to be added. appropriate text. Now save the file. password as provided by your host. Press Connect.
07 Create directory 08 Transfer files 09 Installation script

There will be two windows, the left displaying Double-click the folder just created. Go to the left After all the files have been uploaded, open a
local files and the right showing files on the server. windows and use both to locate the WordPress browser and enter www.yoursite.co.uk/blog/
Double-click the www folder in the top-right pane download. Make sure the WordPress folder lowest wp-admin/install.php. ‘Yoursite.co.uk’ is the
to get to the root. Right-click the bottom-right down the structure is selected. Select all files, right- domain name where WordPress is installed and
pane, select Create directory and name. click and select Upload to transfer the files. ‘blog’ is the name of the folder.

WordPress
Domain name
and web space
To get a WordPress blog
online, a user needs their own
web space and a domain name
The first requirement of any WordPress installation
is web space. There are thousands of web hosting
companies that'll supply space for a small fee.
However, to determine which web hosting package
to choose, the user needs to decide how much web
10 It’s the dashboard 11 New password
space is required and the expected traffic. Typically, Now add a Blog Title, your email address, click the WordPress automatically displays a notice telling
users can get 200MB of web space and gigabytes of Allow… checkbox and press Install WordPress. the user that they are using the auto-generated
traffic for a very small fee. But if more space is likely Press Log In to skip to the log-in screen, enter password. Now add a new password under
to be needed, eg for a photo blog, go for more.
the details just given and hit Log In to view the About Yourself (under Users in the sidebar), enter
A small UK company that provides cheap and
WordPress Dashboard. again and then press Update Profile.
efficient hosting is Z-Host (www.z-host.co.uk). It
provides packages from as little as £15 a year (100MB
of web space and 10GB of monthly traffic), which is
perfect for first time bloggers. Alternatively, choose
1GB of web space and 40GB of monthly traffic for
£60 a year. At the other end of the scale, a popular
choice is web designer Media Temple (www.
mediatemple.net). This offers packages from $20 a
month (approx £15) but offers gigabytes of storage
and 1TB network transfer rates. Other reputable web
hosts to consider are Fasthosts (www.fasthosts.
co.uk), 1&1 (www.1and1.co.uk) and Heart Internet
(www.heartinternet.co.uk).
To host a WordPress blog at a desired URL, for
example mywebsite.co.uk, a domain name needs to
be purchased. Try www.123-reg.co.uk, which offers
.co.uk domain names from £2.99 and .com domain
names from £9.99 a year. Another well-respected 12 General Settings 13 Writing and reading
domain name supplier is Easily (www.easily.co.uk).
Click Settings to extend the menu and select The Writing settings includes the option to choose
If the prospect of finding web space and getting
a domain name seems like a lot of hard work, you General. This section allows users to change the the default category. This will be applied when a
could always go for the hosted option. Go to www. Blog title and tagline, as seen in the header. There post is not given a category. There’s also an option
wordpress.com, click Sign Up Now and all that’s is the option to change the original email address to set up remote publishing. This allows users to
needed is an email address. This gives a new user added at setup. post from a desktop without logging in.
a unique WordPress URL, for example myname.
wordpress.com, and hosts the account.
Find a domain name to create an identity for your blog
14 Media Settings
The media settings determine the size of images option set up here. Change the settings to the
Try the free ‘no hassle’ option at www.wordpress.com placed in a post. WordPress allows users to select desired size. This makes sure that when a specific
the original size of the image or a predefined option is selected the image will be a uniform size.

The Settings
panel
Getting to grips with the
most common settings
for your new install
In this tutorial we are going make some small
changes to the settings of our theme. So from a
fresh install, log in to the admin panel and within
the dashboard you will see the Settings Panel on
the bottom left. The Settings panel should be the
first place we come to once our initial installation
has been done because there are certain things that
need to be set up from the very start. In here we
have seven options that we can make changes to:
General, Writing, Reading, Discussion, Media, Privacy
and Permalink. However, we only really need to
make small adjustments to a few of these settings
and some are more important than others, like the
Permalink settings. So, let’s take it from the top and
make the required changes for a solid install.
"There are certain

things that need to
be set up from the
very start"
01 The General Settings 02 The Writing Settings 03 The Permalink Settings

At the top of the Settings panel you will find The next option down in the Settings panel is The other options in Settings are not really
the ‘General' settings option. If you click to the ‘Writing’ option. Click that to open up our important enough to warrant an explanation
open that up you will see first and foremost Writing panel. In here, among other things, you and can be left as is. But the last option, the
an option to change your site’s main title. You have the option of changing the number of ‘Permalink’ settings, certainly does, so let’s open
will also have an option to include a tagline lines you have to work in when you’re adding that up to take a better look. You have different
here. These two options are really all you a new post to your blog. By default it is set to ways your posts will be shown inside the URL
need to change. Once you have added in your ten lines, but on a small screen this can seem and by default the top one should be selected.
website’s title and perhaps your tagline, you quite cramped. So you can, for example, set it However, the best ones to use here are the
can scroll down to the bottom and click the to 20 lines to allow yourself more space when second or third option as these include the ‘slug’
Save button. adding content to posts or pages. of your post which is good for SEO purposes.

WordPress
View and organise WordPress

dashboard modules
Discover how to keep your WordPress dashboard tidy and useful so you can edit your site,
manage comments, post with ease and arrange modules in an order that suits you
O
ne of WordPress’s many strengths is its of your site, such as comments and links. As with wish and position the most important elements
simplicity, and the Dashboard is an area most elements of WordPress, the Dashboard is within easy reach.
where this simplicity truly shines. Offering customisable so you can set it up exactly as you Over the following nine steps we will show
everything you need right from the get-go, you can you how to determine which modules are
quickly get on with the actual work of editing and
posting to your site without distraction. As well as a
“You can set your shown on your Dashboard, where they are placed
and how they are displayed. You will also learn how
side panel that offers navigation, the Dashboard is
made up of modules. These are small widgets that
dashboard up to save space on your Dashboard by expanding
and collapsing your modules, as well as the side
provide you with information from various portions exactly as you wish” panel itself.
Dashboard modules Comment module

If you don’t receive many comments
Screen options
Click here to access all the options
Keep the ones you like, and get rid of or you don’t want to see the ones for customising your WordPress
the ones you don’t that you do, uncheck its ‘Show on dashboard. From here you can
Screen’ box in Screen Options and delete modules or arrange them in
you won’t have to worry about it a specific order

01 Log in to WordPress 02 Screen options 03 Help options
Begin by logging in the normal way. The first The check boxes under the ‘Show on screen’ Click on the Screen Options tab again to close the
page you hit will be your Dashboard. At the section on the Screen Options menu determine section. Once done you will also see a Help tab
top of the screen you will see a Screen Options which modules will be displayed by default on in the top-right corner of the main Dashboard
button. You need to click on this button to begin your Dashboard. Check or un-check a box to add screen. Click on this to get assistance with all
adjusting the way your Dashboard is set up. or remove the module from your Dashboard. aspects of your WordPress Dashboard.
04 Drag and drop 05 Expand and collapse 06 Side panel

You can now click on Help again to hide the If you don’t need to access a module all the The side panel, which includes Posts, Media,
window and return to your Dashboard. With your time but you still want it to be available on your Links, Pages and Comments, works in the same
preferred modules in place, you can organise Dashboard, you can collapse it until you need it. way as modules when it comes to expanding and
them. You have to click the title of a module and To do this, hover your cursor over the title of your collapsing. You need to hover over the title of the
drag it to a new location. module and click on the triangle that appears. side panel element and use the triangle.
07 Hide the panel 08 Easy access 09 Back to dashboard

If you want more room to work with your If you want to jump straight in without using The Dashboard button is found on all of the
modules, you can choose to hide the side panel modules on your Dashboard then you can click pages you will use in WordPress. If you move into
and see its contents as small buttons. To do this, on the New button at the top of your Dashboard another section of WordPress, such as Comments
click on the arrow found bellow the side panel screen and choose Post to begin writing, or click or Posts, you can always head back to your
called ‘Collapse menu’. on one of the other options. Dashboard by clicking this button at any time.

WordPress
Take your first steps in creating

a WordPress blog
Every good WordPress blog consists of top-quality posts. Here we show
you how to create well-worked posts with text, images and video
G
etting a WordPress blog up and
running is much simpler than you
might think. Once you've completed
the initial installation process, getting a post
online takes a matter of minutes.
The foundation of any blog is its posts,
and getting these right is paramount to a
successful, informative and compelling blog.
So ensure you have carefully considered
every detail before you get going. It is worth
noting that the styling of a blog post is
predetermined to a certain extent by the
current theme. Nevertheless, the Posts
window provides enough ammunition to
ensure your posts are well presented and
neatly styled.
First things first: the title is perhaps the
most important element of any blog post, so
make sure it's relevant and appealing. Next is
the text; again make this engaging and style
it so it’s readable. Beyond the text, images
and video are worth considering to add
colour and interest. Finally, before publishing,
it’s time to add in tags and create categories
to make your posts more
search-friendly.
01 Log in 02 The Dashboard

There are two options, first visit the URL of the blog, for example www. In the Dashboard , users will need to pay attention to the menu on the left and
myblog.co.uk/blog. If the default theme hasn’t been changed it’ll have to a lesser degree At A Glance and QuickPress. The other modules Incoming
a Log in link under Meta. Click this and add your details. Otherwise it Links, Other WordPress News etc, can be hidden to free up screen space. Click
can be accessed via www.myblog.co.uk/blog/wp-login.php. Screen Options and the check boxes of the modules you want removed.

03 At a Glance 04 The Posts menu 05 New post
The At a Glance module gives users a quick To add or edit posts, the Posts menu is the place The new post window is divided into two
summary of the current state of the blog. All the to start. Click the Posts title bar and the menu sections, the title and the body. The first text
elements in the Right Now module link directly will expand to reveal the post options. To edit a box in Add New Post is where the title goes.
to its related counterpart. Click the title bar on a current post, click Edit and all the posts stored on Remember, the formatting will differ from what
module to expand/collapse. the database will be revealed. you see as this is determined in the style sheet.
06 Post text 07 Simple styling

The body of the post is placed in the second text box and this will contain The Visual post editor is a simple editor, it is much like using word processing
all the text and images found in a single post. To add the post text, type in software such as Microsoft Word. Click the last icon on the toolbar, it’s called
the desired text like you would do in any other document. Remember to Toolbar Toggle, to view all options. To bold the first sentence, select the text
abide by any standard grammar rules, such as paragraphs and so on. and press B, alternatively use the keyboard shortcut Ctrl/Cmd+C.
08 More styling 09 Resizing text

To add more styles to the text, select the appropriate button. ‘I’ adds The text in a post can’t be resized in the traditional sense. The text size is
the italic effect, ‘ABC’ chooses a language, ‘U’ adds an underline and predetermined by the theme in use. However, the Paragraph drop-down
‘A’ allows users to choose a new colour for the text. Use the Align list has a number of options, such as Paragraph, Heading 1, Heading 2, etc.
buttons to place your text left, right or centrally. Heading 1 is the largest, 6 the smallest and Paragraph normal.

WordPress
Learning how
to manage
your blog
Here we include a few more
tips and techniques you will
need to know
Getting posts on to a blog is the main priority for
many bloggers and the WordPress (2.7 onwards)
Dashboard provides a quick and easy answer.
QuickPress allows users to create and publish a
post directly from the Dashboard. This is a slimmed
down version of the standard Add New Post page
10 Preview post 11 Save Draft
and provides all the essentials without the need to The post is now beginning to take shape. Click If the post is in good shape, save a draft by
go beyond the opening page. Users can add a title, Preview in the Publish module, this will open pressing Save Draft. This will save the post and
text, insert images, video, audio etc and add tags. another window to display the selected post. reload the page, allowing the user to continue
Editing and updating posts is a simple but Keep the window open and refresh when more adding to the post. The draft of the post can be
essential task and a visit to Edit>Posts will reveal all has been added to the post. found via Posts>All Posts.
the posts in a blog. Each post is assigned a number
of quick access options that only appear when the
cursor is placed over the post title. The options
on offer are Edit, Quick Edit, Delete and View. Edit
takes a user to the standard post, allowing users to
edit as normal. Remember, when you’ve finished
editing a post, hit Update Post to save any changes.
The Quick Edit option works within the Edit Posts
window and allows users to neatly and quickly
change categories, tags, title, etc. The Delete and
View options do exactly what they suggest.
Beyond editing a post there are a few additions
that we have yet to mention. Links are a key
component of a website, and WordPress is no
different. The standard toolbar includes two link
options, Insert/edit link and Unlink. To add a link
select the desired text and press the Insert link
button (top row). In Link URL add the URL to link to 12 Upload an image 13 Insert options
(needs http:). By default, WordPress includes http://,
Post text is often accompanied by an image. To There are a whole host of image options. The
so if copying in a URL remember to check that
the http:// has not doubled up. Target allows the insert an image, place the cursor in the position name of the image is used as the title, this is the
user to choose if the link URL opens in the same where the image is set to appear. Click the Add text that will be seen in the browser when the
window or new window. There is the option to add Media icon, then Select Files, browse to the cursor is placed on the image. Caption text will
a title, and to add a class. This effectively styles the location of the image, select it and press Open. appear directly underneath the text.
link using a predetermined style.
Use the Quick Edit option to quickly change categories,

add tags and modify the title
14 Image alignment 15 Image size

Before inserting an image the alignment options Users can choose to select an image size before
need to be determined. If the Alignment option adding to a post. Full Size is the actual size of the
The Insert/edit link window allows users to link to remains as the default (None), all text will be image. The remaining options – Thumbnail and
internal posts or pages placed above and below the image. Left, right Medium – have their sizes predetermined by the
and centre will wrap text around the image. current theme.

16 Edit image
An image in a post is still open to editing.
Click the image and select the icon to the left
to open the Edit Image window. Here users
can choose to resize and more. Press Update to
initiate any changes.
17 Browser upload
WordPress allows users to add an image directly
from a web location. The first step is to get the
URL of the desired image. Once the URL has been
located, copy and paste into the 'Insert from URL'
field. The images will appear underneath.
18 Video options 19 Add a YouTube video 20 Read more

Place the cursor in the position where the video Head to YouTube (www.youtube.com) and A post will display all the text and images on the
is to be added. Click the Add Media button, select search for a video. Underneath the video is a front page of a post. To reduce the amount of
the video and wait for it to upload. Click the video Share button, click to reveal the Embed button. post text on the front page, the More tag can be
to view the different options. Add a Title, Caption Copy the code, head back to WordPress, switch to inserted. Place the cursor in the desired position
or Description and click Insert into Post. the HTML view and paste the code into the post. and press the Insert More tag button.
21 Tags 22 Categories 23 Publish

Adding tags helps identify the content of a post Categories help define where a post can be Finally, the time has come to publish the post.
and helps visitors find a specific post. To add a tag found. Create a new category by clicking Add Check the post via the Preview button, make any
simply enter the descriptive text in the Post Tags New Category, adding the title and pressing Add. adjustments and hit Publish. The post will now
text box and press Add. Repeat to add more tags. By default all new categories are selected. Choose appear on the blog front page. Head back to
To remove a tag click 'x' next to the tag. the relevant category or categories for the post. Posts>Add New and start populating your blog.

WordPress
Edit your WordPress blog

posts with ease
Whether you are updating some information or correcting a mistake, you will always
need to edit your posts. We guide you through the various ways you can do it
W
ordPress is designed in such a
way that creating a new post for
your blog is as simple as typing
it in. You won’t, however, always get your
blog appearance or text just how you want
it on your first try. What's more, if you’ve got
a news-based site or content that's time-
sensitive, you might need to update a post
with new information as it becomes available.
You may even find you simply need to go
back and correct a typo.
Thankfully, this is not a challenging task.
A WordPress blog is a dynamic site where
nothing is ever fixed and final, and every word
and image can be tweaked and adjusted until
you are 100 per cent happy.
In this tutorial we will guide you through
the various ways in which you can edit your
posts, from that simple typo correction to
more advanced functions, such as batch
editing your posts to help keep your site
organised and easily searchable for your
visitors. We also detail how you can sort your
categories, so those readers who are only
interested in one topic can
easily get to what they want
to read.
01 A quick check over 02 Editing shortcut

Once you have finished composing a post and have published it on To edit your words, you need to click through to the post you have just
your blog it is always good practice to go to your site and give it a published. If you are still logged in to your WordPress account then you will
quick once over – if you haven’t got someone checking your text, see a little red icon called Edit Post at the top of the post. If you click on this,
simple mistakes can be easily missed. Click View Post to preview it. you will be taken straight through to the edit post screen.

03 Begin editing 04 Post management 05 Editing options
You will be back at the editing screen where you For much wider editing purposes, open the Hover your mouse over a post and some options
created the post in the first place. Use it as you control panel and click on the Posts menu option will appear, including Edit and Quick Edit. Edit is
would when creating a new post from scratch found over on the left-hand side of the screen. the same as the Edit Post option from Step two,
– text, images, URLs, tags and categories are all This will now open a new screen showing every taking you to the regular post editing screen.
editable too. Click ‘Update post’ when done. post you have published on your site. Choose this option if you need to change the text.
06 Quick Edits 07 Changing the slug

If you are happy with the content of a post but still need to edit it more One interesting – and useful – change you can make to a post is the slug.
for housekeeping purposes, for example to add it to a new category or This is the part of the URL that is automatically generated from the title of
change its tags, you can simply select the Quick Edit option. The box will your post. For ease of use, you can change this to something a little bit more
now expand to give you a range of admin options. memorable than the default one.
08 Author name 09 Categories

Likewise, you might need to change the author name assigned to If you forgot to add your post to relevant categories initially then you can
the post. Even if you are the only person posting on your site, you do that under the Quick Edit function here. However, if you want to create
might want to post site announcements under ‘admin’ or similar to a new category you will need to either go into full editing mode or click on
keep them separate from content posted under your own name. the Categories option in the left-hand menu in order to create it.

WordPress
Updating
RSS feeds
Keep people coming back to
your site and updated thanks
to RSS feeds
When you edit a post and click the Update button,
the changes will be instantly applied to your site, but
your avid readers will not be immediately aware of
the fact that you have changed the story. It won’t be
placed at the top of your front page, neither will your
RSS feed be updated with a new entry. Of course, if 10 Changing status 11 Make it stick
you are only correcting a typo or tweaking an image, After making any of these changes, you need to Quick Edit is extremely useful for making minor
this is exactly how you would want it to be, but if you make sure you click the Update button in order changes to single posts, but sometimes you will
have made a significant change to one of your posts
to apply them to the post. If you open another want to make similar changes to multiple posts,
then you need to be able to alert readers to your
changes so they can find out all the latest news on post before doing so then your post will not be for example, when you are cleaning up your
stories available on your blog. updated. If you want to undo any changes, click tags, to ensure consistency. Click the Posts option
The way to go about this is by adjusting the date the Cancel button. to view all the posts on your blog.
the blog entry was posted. If you change the date
to something later than your last entry then it will
automatically move the post back up to the top of
the front page (where it will stay until you get round
to posting again). In order to update your RSS feed,
you should change the date to something in the
future. Schedule a new posting date of, say, one
minute from now, then in a minute’s time the story
will be posted again (but not duplicated) and the
RSS feed will also be updated. Users who subscribe
to your feed will see the story back in their news
reading software, and the post will be marked as
‘Updated’ in order that they know they have already
seen the post before and should be on the lookout
for changes.
A final piece of good practice is to clearly mark
the edits you make to a post so that your readers
can find them easily. This especially applies if 12 Update your post 13 Bulk editing
you have more information to add to a news
story, or are making a change based on readers’
To insert an image into a post first, place the There are options associated with an image
comments. Rather than writing in the lines, add a cursor in the position. Click the Add Media icon, before it is inserted into a post. The name of the
new paragraph at the bottom of the post, marked the first in the line next to Upload/Insert. Click image is used as the title; the text seen in the
Update. If necessary, you could also add the word Select Files, browse to the location of the image, browser when the cursor is placed on the image.
(updated) to the post title as well. Your readers will select, press Open and it is uploaded. Caption text will appear under the text.
be grateful for this as it’ll save them searching for the
new content.
Updated RSS feeds will be clearly marked so your

readers can look out for changes
14 Choosing your posts 15 Getting ready to edit

There is a check box next to every post, so tick With your multiple posts selected, click on the
the ones you want to edit in bulk. If some of the drop-down menu at the top of the window that
Mark the changes you make to your posts clearly posts are listed on another page you will need to is marked Bulk Actions and choose Edit from the
so your readers can find them easily use the Search function to find them – clicking list. Click Apply to open the bulk editing menu
through pages will lose your previous selections. options. This feature can save you a lot of time.

16 Removing posts
The left-hand box displays the posts you will be
editing in bulk. Each one has a small 'x' next to
it – if you decide you don’t want to apply your
changes to any specific post you can click the 'x'
at any time to remove it.
17 Adding tags
The most likely use for editing several posts at
one time will be to assign new tags to them.
Enter your choice of new tags in the box,
separating each one with a comma and space.
You cannot remove existing tags in this way.
18 Closing comments 19 Managing tags 20 Editing categories

Another good use of batch editing is for closing Under Posts is the Tags option, click to open. Here Categories are the most important way of
comments that may appear on older posts. These a new tag can be added by adding a tag name, keeping your site organised and its content
are the ones that are likely to attract spam so you slug and description and pressing Add New Tag. manageable. As with posts you can edit them in
can prevent more comments by selecting the ‘Do The available tags are listed to the right, hover the bulk by ticking the box next to them, although in
not allow’ option from the Comments menu. cursor over a tag and press Edit. this instance they can only be deleted.
21 Tidying your categories 22 New categories 23 Category slugs

Hover your mouse over a category in order to To create a new category enter a name and click Finally you can change the slugs for each
see the Edit option. Click this and you can fill in on the Add New Category button. You can now category. By default, the category URL will be
additional details about the category, for example assign posts to this category using the Quick derived from the name, but if there are multiple
a description which can be shown in your blog’s Edit function explained in Step nine. Try to keep words in it you might want to give it a shorter,
theme to give users more info. categories to a minimum though. friendlier name.

WordPress
Post images into your

WordPress blog
Every blog post needs an image to illustrate it, and WordPress
provides no fewer than four methods for doing this
I
t almost goes without saying that good only pages will drive people away, and that’s the last In this tutorial we will take a look at each of these
images are a crucial part of any blog – yours or thing that you want to happen. techniques, giving you and insight into how to get
anyone else’s. Even if your site is not particularly Adding images to posts is actually quite a simple the most from your blog. Once you have got going
visually oriented, you’re not running a photography process in WordPress, but the site does give you a with adding visual enhancements in this way, it will
business for example, a well-chosen image number of different ways of not only adding but be one of the most common tasks you will – or at
displayed on the front page of the blog is second also managing the images you’ve used. least, you should be – performing on your blog.
only to post titles in encouraging visitors to click
through to read your content.
Images can also be used to help pace the reader “Images can also be used to help pace
by breaking up longer posts, transforming large
swathes of text into more digestible chunks. If you longer posts by breaking up large swathes
want to drive traffic onto your blog and keep it
there, then you need to make it look good – text- of text into more digestible chunks”
Effective images
How well-placed pictures can improve your blog dramatically
Header
A vital part in any website design,
the header is often the first
thing viewers will see. If they see
something as eye-catching as this,
they’re sure to stay
Breaking it up
Dividing your text up with a few
cleverly placed pictures will increase
your site’s readability no end. Most
web users don’t want to read
endless blocks of text

01 Position the cursor 02 Find your images 03 Uploading images
As a general rule, it’s easier to add your images From the window that opens, you will see that Now select an image, or images, to upload to
either before or after you have added your text. you have various methods for finding and adding your site. It’s a good idea to group all your images
All you have to do is position the cursor where images to your post. Select Upload Files and then together into a folder before you begin. Ensure
you would like your first image to go, then simply find the image that you wish to add. You can your files are JPEG, GIF or PNGs – WordPress will
click the Add Media button. either drag it in or find it by clicking Select Files. upload other formats but won’t display them.
04 Pick a name 05 Adjusting links 06 Resize the image

The caption serves as caption and alternate text You have three options on what you link an image If your image is large you should resize it before
if the image is not displayed, and a relevant name to. Choose File URL so that when the image is uploading to WordPress. The Medium option will
will help you find an image to reuse it later. Be clicked the full size version is displayed separately, resize an image so that it is usable within most
aware that some templates might have problems or Post URL so that clicking the image displays the templates. Thumbnail crops an image down to
displaying captions on the front page. full post. Click None to remove all links. 150x150. Full size may require resizing.
07 Alignment options 08 Inserting the image 09 Manually resizing pictures

When you’ve selected the image size, you need In most cases you may choose None and use the If you selected Full Size in Step six, your image
to choose how the image is aligned in the post. default alignment. Once you have done this, click might now be too wide. If this is the case you can
Align Left or Right will wrap the text of your post the Insert into Post option and the image will resize it. Click on the image then grab one of the
around the image. Your post needs to be long now be placed at the position of your cursor in handlebars and drag inwards to make it smaller –
enough to cover the height of the image. Step one, or you can just drag it to a new position. the new dimensions are shown.

WordPress
How to resize
your images to
fit your post
Taking the time to prepare
your images can make your
blog look more professional
When working with images on your blog, it is vital
that you consider the importance of resizing those 10 Images from URLs 11 The gallery
images as a way of enhancing both the look and The other options for inserting images include The third image option is Gallery. What this does
usability of your site. Dragging the image handles, ‘from URL’. This requires you to enter the URL of is show all of the images associated with the post
as we showed in Step nine, will change the physical an image hosted on another site. You should use you are editing. If you uploaded multiple images
dimensions of an image as it is displayed on a
webpage, but will have no effect at all on its file size. externally hosted images very sparingly, since in Step three, they’ll all be listed here, ready for
If your site is image-heavy, and if you are working displaying the image on your site will use the you to edit and insert them into the post. It’s not
with photos especially, your original image files other site’s bandwidth. possible to batch edit all of your images.
might run into several megabytes apiece. Put a
handful into a single post and the size of the page –
and the associated bandwidth requirements – will
mount up. You might find that even with a fast
connection your site’s visitors won’t appreciate
having to load 10MB pages as a matter of course.
When resizing your images you also need to be
aware of the width of the main column in your blog
template in order that it fits in properly.
As a general rule, unless you need to provide
your site’s visitors with higher-res versions of your
images, you can resize them so that they are no
wider than that column. If you do need to provide
higher-res images then resize to around 1200-1800
pixels then use the File URL option as in Step five
and manually resize the inserted image so that it
fits into the column properly. When you do this the
image will be displayed neatly embedded in your
12 Create an image gallery 13 The Media Library
text, but clicking on the image will open it in a new If you want to insert a thumbnail image gallery The final option is the Media Library, where you
window, displaying the full high-res version. into your post, view the bottom half of the gallery can access every image you have uploaded to
Remember that high-res images can easily be screen. The Gallery Settings enable you to post your site. This is where you come when you need
acquired and used on other sites, so if you have any an entire group of images in one go. To manually to reuse images already posted. So long as you’ve
that are especially unique to you, it is a good idea to order them you need to enter a number in the given them sensible names they will be easily
watermark them, something you can do simply by
Order column, then just click Insert Gallery. searchable. Click Show to see the usual options.
adding your site’s logo in the corner of the image
in Photoshop. To the same end, if you use images
found on other sites always be sure to credit them
and to link to the page where you found it.
Size your images to fit neatly into the main column of

your blog template
14 Editing and deleting

Linking to the file will also ensure users can view a higher If at any point you want to make changes to the way an image is displayed on your blog, simply click on
res version if they need to it in the edit window and then choose the Edit Image button. This will take you right back the settings
screen, where all options are fully tweakable. To remove an image, click the Delete button.

Using the
Featured
Image option
How to use the Featured Image
option for your blog posts
One of the greatest things about WordPress is the way
it takes care of things quickly and easily that would take
an experienced designer/developer a while to achieve
otherwise. It just makes things easy, and the Featured
Image option is no exception.
The basic idea behind the Featured Image function
is that many bloggers, on their homepages, want to
display an image that is associated with a post. However,
implementing this has always been a bit tricky. Previously,
users had to take advantage of custom fields, which
would allow users to specify additional information
relating to a post. In this case, that additional information
is the location of a thumbnail image.
So since the introduction of version 3.0, the user simply
uploads a single image, designates it as a featured image
and then WordPress resizes it as appropriate and places
it into the theme where desired. So, let’s take a look how
this is done.
“Since the introduction of version 3.0, the user simply uploads

a single image, designates it as a featured image and then
WordPress resizes it as appropriate and places it into the theme”
02 Once uploaded
Once you have finished uploading, a preview of
the image should appear in the pop-up dialog
box and you are free to insert the image into the
post as with any other image. WordPress should
take care of the rest, including resizing, cropping
and ensuring that the image is in the right places.
03 WordPress
year theme
changes
01 Use the Set Featured Up until the Twenty Ten
WordPress theme, once
Image link the post’s featured image
Once logged into your dashboard, you should had been uploaded and
see a Featured Image box on the right-hand saved, it could be found
side of the post page. Initially it will only on the post page. But from
include a link to “Set Featured Image”. Clicking the Twenty Eleven theme
the link will open up the usual WordPress up to Twenty Fifteen, it
image uploader where you will upload the is actually added to the
image as usual. header of that post.

WordPress
Embed external media in your

WordPress posts
Engage your audience by creating WordPress posts that feature embedded videos, images and more
C
reating posts in WordPress entails writing content will then play from within your WordPress requires just a web link. Once added to a post (as
content that is interesting and engaging. blog. You can embed content from services such as text, not as a hyperlink) the WordPress editor will
This may be a daunting prospect but you’re Vine, Tumblr and SoundCloud to name but a few. recognise it. From here it will embed the content
not just limited to text. WordPress includes the In earlier versions of WordPress embedding into your post. Often the embedded item will carry
facility to embed media within posts. This means content was a more technical task. It used to involve the look and feel of the source website and in some
you can place images, music, videos and more in a a little HTML coding to get working. The good news cases it will even include various interactive controls.
post to help bring your blog to life. is that for the most popular online services this is Embedded media can add a professional touch
Don’t worry if you don’t have any content of your no longer the case. WordPress has a white list of to a blog post with minimal effort. Just ensure it’s
own to begin with. You can embed content from services that it supports for automatic embedding. used in the right way. Overloading a post with
other online sources. Think of it as creating a web You can find it at https://codex.wordpress.org/ embedded media can be messy. It can also slow
link to something on another website. This linked Embeds. Embedding content from these services download times which could put off your audience.

Go full screen Visual or HTML
You can expand the editor view There are two main post
by clicking on the Full Screen icon. editing windows, Visual &
Click it again to reduce the view HTML. Visual works like a word
back to the default size processor. HTML is for adding
HTML code. Use the tabs to
switch between the two
Remove the hyperlink

If the embedded content is not
Add Media appearing make sure that the
There is an ‘Add Media’ option
link has not been converted to a
which can also be used to place
hyperlink. Highlight it and click the
images and videos in your blog.
‘Remove Link’ icon
Bear in mind, this method uses
storage space and server resources
Positioning a link
Preview your content When adding an embed link
You can get an idea of how your bear in mind where you would
added content will look by clicking like it to appear in your post. It
the ‘Preview’ button. This will will appear wherever you place it
open a new tab without losing within your normal text
your current post edit
01 Embedding an image 02 Copy and paste 03 Embed Video

Images are a quick and simple way to make a When pasting a URL for embedding purposes Whether it’s a six second Vine video or an
blog post more interesting. WordPress has a make sure it is pasted as text only. Don’t use the extended YouTube clip, embedding a video into
built-in menu for embedding images but there ‘Insert Link’ option from the toolbar. This means your posts can help draw an audience. Much like
is a simpler method. First, browse to an online the difference between embedding the image the previous step you can go with a simple copy
image that you wish to embed. or just displaying the link itself. and paste approach.

WordPress
Pick a player
SoundCloud gives you a
choice of two music players.
Large or streamlined. The
larger option also provides a
range of sizes
Adjust colours
Code and preview SoundCloud provides some
As options are selected the simple colour options with
code box updates to reflect any regards to the playback button.
changes. Tick the ‘WordPress You can also click on the colour
Code’ option to convert it to grid to apply various shades
optimised code
Player preview
Much like the code preview
box the player preview section
updates as each option is
selected. This gives an idea of
how your embedded content
Toggling options will appear in your blog
By default the extra choices
regarding colours and
playback are not visible. You
can access them by clicking
‘More Options’
Automatic playback
This option determines whether
your embedded media player will
automatically play the chosen
song once it has finished loading
04 Embedding a tweet 05 Copy the link 06 Preview your Tweet

An embedded tweet can provide a snapshot Select ‘Copy Link to Tweet’ from the drop down Click the Preview button in the WordPress editor
of information or a quote. It will appear in your menu. Twitter will now open a new window to see how it will appear in your blog. From the
blog as it would appear on the Twitter website. showing you the link. Copy this and open a post avatar to the hashtags, various parts of the tweet
To embed a tweet, head to twitter.com and in WordPress that you wish to edit. Paste the link are interactive. There’s even a Follow button.
click on the ‘More’ icon. into the appropriate section of your post. Embedded Tweets are easy on loading times.

Support for
embedding
The key to safely
embedding is to keep your
WordPress up to date
By default WordPress can only embed from
websites that appear on the Whitelist. It’s possible
to work around this by installing a plug-in but
there is a risk. Content lifted from an untrusted
source could expose your set-up to malware. This
07 Embed music 08 Grab a link is why the Whitelist exists, to prevent accidental
embedding from malicious websites. Support for
Embedding a song places it into your blog On SoundCloud find a track and click ‘Share’. newer services is available with each new release
within a dedicated player helping increase Copy the link and paste it into a blog post. Make of WordPress. By keeping WordPress updated you
audience engagement with your posts. Two sure you leave it as text, don’t convert it into a will ensure you have the most embedding options
available. If your blog is hosted on the WordPress
examples of music sources are SoundCloud and hyperlink. In Spotify right click on a track or an servers then it is updated automatically.
Spotify. Extracting a song from them and adding entire playlist to access the link. Again, paste this Users with self-hosted WordPress blogs will
it to your blog is a simple copy and paste job. into a post. need to go through a manual update process.
WordPress will prompt you when a new update
is available. Before proceeding with this it is
important to create a backup of your database
to prevent you from losing your blog should an
error occur. There are various plug-ins available
to assist with this. Once you’ve created a backup
you’re good to go. You can either run the Update
process online or download it to run a manual
install. In our experience we have found that
running it online is both quicker and easier. Whilst
the upgrade process is running your blog will
go into maintenance mode, which means it will
not be accessible by your audience. The update
process shouldn’t last more than a few minutes.
That said, it pays to be mindful of when you’re
updating so you don’t confuse any visitors.
09 Embed Tumblr Posts 10 Vine’s embedding options
If you have a Tumblr blog you can embed posts Some services offer specific embedding options.
into your WordPress blog. You can also embed These allow for more customisation over the
Tumblr posts created by others. Again, it’s a simple copy and paste approach. For example,
case of copying and pasting the URL. WordPress in Vine you can toggle video size, the window
embeds posts with a Tumblr header and footer. format and the video auto-play.
Maximise your embedding options by keeping

WordPress regularly updated
11 Adding HTML code 12 The [Embed] shortcode

With this approach you will need to copy the WordPress also has a dedicated [Embed]
code and paste it to the HTML section of the shortcode. This instructs WordPress on the
post editor. Click the tab titled ‘HTML’ in the post allowed dimensions of an object. Place the Some of WordPress’s many plugins will help you when
editor. Now paste the HTML code in the relevant chosen URL within the integers ‘width’ and embedding on your site
place. Click the ‘Visual’ tab once you’re done. ‘height’ (as per our example).

WordPress
Add special features to the text

Improve the readability of your website with bullet points,
lists and indents
I
t is easy to type in a block of text, but it won’t look very
exciting to your visitors and it will be hard to read. We have
looked at breaking text up into paragraphs, alignment and
so on, so now let’s move on to more exciting things like bullet
points and numbered lists. A series of bullet points is a great
way to emphasise features, functions, items and important
things. Make them short and snappy and readers can quickly
scan them to get the information they need. Numbered lists
are useful too and you don’t even need to type in the numbers
because WordPress does it for you. All you need to do is type
the first one and click the toolbar button. You can then add as
many as you need.
There are other functions that are useful too, such as the
ability to insert special characters like copyright symbols into
your text, real fractions instead of using numbers and slashes,
Greek letters, the Euro currency symbol and a whole range of
others. Inserting these is simply a point-and-click process once
you get the hang of it. All these effects will brighten up dull
looking text and make your blog more interesting.
“These effects will brighten

up dull text and make your
blog more interesting”
01 Add bullet points 02 Add numbered lists

If you want to add one or more bullet points into your text, you can do so by If you don't want to use bullet points, you might want to create a numbered
simply enter the first one on a line on its own and then click the Unordered list of items instead, which is just as simple to do. Just type them on separate
List icon in the formatting bar. Press Return once to continue to add another, lines and then select the first, click Ordered List, select the second and
or twice to stop. repeat the process.

Special features Indent the text
Text can be indented and a large left-
Add interest
Add interest for your readers by varying the
Discover the features in WordPress hand margin created in order to make text and the special effects that you use. It is
your words stand out. It can be clicked good to have something to break up the text
more than once and it increases the like bullets, indents, lists and so on
indent each time. Outdent reverses this
Bullets and lists
The two icons here create bullet points
or numbered lists. Used occasionally
they can be very useful for getting a
point across and also for presenting
certain information
Custom characters
This icon displays a palette of
characters that are either hard to find
on the keyboard or are simply not
available. Just point and click on the
one you want to insert in the text
KEYBOARD
SHORTCUTS
If you let the mouse hover over the
icons in the formatting toolbar you
will see a tooltip. This is a brief
message that pops up beside the
mouse and it contains a useful tip or
information. Some formatting effects
have keyboard shortcuts and you can
create bullet points, for example, by
pressing Opt/Alt+Shift+U.
03 Insert special characters 04 Indent a paragraph

There are certain characters and symbols that you might want to use in a Sometimes you might want to make a certain part of the text stand out
post that aren’t on the keyboard, such as the copyright symbol. You can find from the rest, such as when you quote something or perhaps for speech or
these by clicking on the Insert Custom Character icon, which is Ω, and then maybe even to start a new paragraph. To do this just position the cursor in
simply select the character you wish to use. the text and click the Indent icon.

Understanding SEO
110 The science of SEO
See where SEO is heading in the future
120 Get more people to visit

your website
Learn how SEO is vital for a successful site
122 Use Google Analytics to

Increase your visitors with this powerful tool
126 Create a Google sitemap for

easier searching
Make a huge difference to your recognition
110
The science
of SEO
122
Google
Analytics
WHAT YOU’LL LEARN

It’s the smallest section in our book, but it may well be the most
important. Understanding SEO will help you get people visiting your
site – hopefully over and over again. After all, your website could
look amazing and function perfectly, but if no one knows that it
exists, then there’s no point in it being there. You’ll learn key things
to help improve your SEO (Search Engine Optimisation), how to make
the most of Google Analytics, and how to speed up your website's
GET MORE
performance for better user experience. VISITORS
See how SEO gets your site viewed
by more people

GOOGLE
ANALYTICS
Make the most of this powerful
tool with our guide
GOOGLE
SITEMAPS
A simple yet essential way to
get more visitors

Understanding SEO
THE SCIENCE OF

London-based digital performance agency, Found, takes a peek into
what the future holds for SEO, talks about designing with search
engines in mind and explains the dos and don’ts of getting a site
ranking on the search engines
The future of SEO

O
ver the past few years Google has through content can webmasters ensure that
become increasingly effective at their websites send the correct on- and off-site
targeting what it considers to be low quality signals and avoid any form of penalisation.
quality sites, reducing their prominence in the
search results and leading many to espouse the Move to conversational search
mantra that “SEO is dead”. In truth, the idea that However, changes have not been purely focused
“SEO is dead” has been resurfacing every few on aspects of quality. More recently, various
years for over a decade and highlights nothing updates such as Hummingbird have signified
more than the rapidly evolving nature of search a commitment from Google to address recent
marketing as a whole. changes in the ways that users are performing
Go back a couple of years and rankings searches. With mobile queries looking to
fundamentally came down to two things – the overtake desktops for the first time, it is critical
total quantity of links from external websites and that search engines are capable of better
on-page relevance, derived from incorporating understanding their users’ intent and needs,
the desired target keywords. Thankfully, this is no particularly in longer, conversational queries. For
longer the case, with the websites in question designers this is particularly important, providing
that attempt to manipulate search results being a clear indication that Google may soon favour
actively penalised, and those adding value to the mobile users over those on desktop devices. This
internet rewarded. shift would actually signify a large change in web
design practice.
The Importance of content Further evidence of this change can be seen
In a post Penguin and Panda world, success is through the recent expansion of the knowledge
predicated on pursuing a strictly content-centric graph, providing users with detailed information
approach when it comes to your website. Only on real world entities directly in their internet
EXPERT INSIGHT
“Google has
laid down the
gauntlet to web
marketers through UNDERSTANDING
the introduction HUMMINGBIRD
of its recent
updates, stating an unequivocal The introduction of Hummingbird in 2013
commitment to its ultimate goal constituted the biggest overhaul of the Google
platform in over ten years. Hummingbird is
– ‘making the web a better place’. designed to enable Google to more effectively
Websites that conform to this goal deal with longer, conversational based searches,
while complying with Google’s such as those performed through a mobile
handset. It does this by attempting to interpret
best practices should expect to the meaning of a whole phrase or sentence
reap the benefits over the years rather than individual keywords. In a marketplace
to come” where one third of the UK population now own a
tablet and seven tenths own a smartphone,
designers should be ensuring that the websites
Will Nye they produce are responsive – Google’s preferred
SEO strategist, Found type of mobile implementation.

Understanding SEO
Designing for SEO

When designing a new website, the SEO is often an after-thought,
overlooked completely or seen as an obstacle in the way of
producing a good-looking site design
E
ven with the rise in awareness about SEO Great images can hold a visitor’s attention for a
over the last few years, it is still true that memorable experience but they may not convey
lots of great-looking websites being to the search engines what the site is all about,
created have poor SEO. However, if it is and therefore need to be backed up by decent
considered early enough in the design process, content. Try to ensure that all images that feature
this needn’t be the case at all. across key landing pages are optimised with the
Rather than hindering SEO, good design can relevant Alt text where possible, and consider
actually improve the chance of ranking well. If we how much text content you have on each page.
consider some of the metrics that matter the This doesn’t all have to be in paragraph form as
most, it’s the designer who is in control. After all, a headers, captions, lists and slider text all counts.
great-looking site is more likely to get increased Aim for a minimum of about 200 words.
page views, have a lower bounce rate and, most For image-heavy pages where space for text is
importantly, earn more links to its pages. limited, consider using Javascript to reveal extra
The earlier in the design process that you can text on click. It is quite a common technique for
start thinking about SEO the better, as the early large amounts of text to be hidden behind ‘lead
structural decisions can make a big difference in’ text, but always ensure the fallback is to display
and will be difficult to change later on. For all of the text if Javascript is disabled.
example, keeping your site architecture flat and, if To minimise the loading times of your pages,
possible, ensuring that no page is more than you should be designing with CSS and HTML in
three clicks away from the home page is still very mind. In order to do that, you must first know the
relevant when it comes to rankings. But more potential of what something as sweet as CSS3
importantly, it’s also very critical to user can bring to your designs. Box shadow, text
experience – a fundamental of good site design. shadow, border radius, gradients, animated
Successful web design strikes a balance between transition, animated transformation, the list goes
a visually pleasing website and one that gives the on. It is no longer necessary to rely on images
search engines what they need to rank well. After that increase the page load time for the sake of
all, why build a website if no one can find it? beauty – let the CSS and browser do the work.
The role of
web fonts
In the past it was common to see images
taking the place of the header tags
because a brand’s font was required,
forcing the web designer into making
SEO-unfriendly decisions. Designers are
now expected to create banner-like
elements of the page using HTML and
CSS with dynamic text that can be
crawled. These days sacrificing the H1,
H2, H3, H4… tags for images is the SEO
equivalent of committing design suicide.
Web fonts such as Google Fonts, Font
Deck and Typekit, among others, offer a
variety of options so there’s no excuse
not to have crawlable yet good-looking
copy. Images shouldn’t replace HTML
Buzzfeed has a completely unorthodox and unique
and CSS unless it’s a photo or logo. approach to its content topics, which is at the centre point of
their search strategy

Tools to start
optimising
There are lots of free tools online
to assist designers with SEO. Here
are a few that make life easier
Google PageSpeed Tools

developers.google.com/speed/pagespeed
Found are an award-winning performance An excellent suite of free tools from Google
marketing agency specialising in PPC, designed specifically to help you analyse and
SEO, social and mobile marketing optimise your site’s performance. It analyses it for
both desktop and mobile, helping you identify
the best practices that can be applied to the site.
“Text and images are no longer enough

for readers to feel engaged with content
and this is where Buzzfeed excels with its
approach to layout and design”
N
ot only does CSS bring designs to life webmasters out there. Another important
through its potential for animating element is user-generated content. Whether you Smush.it
graphics, it also has a faster load time use Facebook commenting or another platform, www.smushit.com/ysmush.it
and is easier to write than Javascript, so it’s it’s important that it sits well with the overall Another amazing free tool comes from Yahoo.
increasingly becoming designers’ favoured design of the website. Buzzfeed does this It takes your images and magically reduces the
medium for such effects. seamlessly and engages with thousands of its file sizes without any loss in quality whatsoever.
One example of a site that gets the balance readers to comment on a daily basis, which adds Smush.it even tells you how much it’s going to
between design and SEO spot-on is Buzzfeed. It fresh content. reduce them before neatly zipping them up.
has a completely unorthodox and unique By focusing primarily on great-looking content
approach to its content topics, which is right at and making the images very easy to share on
the centre of its search strategy. This enables it to mobile and desktop to platforms like Pinterest,
capture vast quantities of long tail traffic through Buzzfeed manages to drive huge quantities of
the SERPs (Search Engine Results Pages). referral traffic from various social platforms.
Text and images are no longer enough Much of this traffic is to articles that
for readers to feel engaged with have been on the site for some
content and this is where
Buzzfeed excels with its
Go easy time, ensuring that a large
proportion of pages are never
approach to layout and on the hi-res static and are continuously
design. Each post infuses a being updated. Screaming Frog SEO Spider
Not all users have retina displays
fantastic mix of textual and serving up hi-res images to these It is this attitude to users www.screamingfrog.co.uk/seo-spider
content, imagery, widgets, people will unnecessarily increase load and good-looking content This cross-platform desktop tool crawls a website
times. So use a script like retinajs.com
gifs or rich media, all of which to ensure you are serving up the hi-
that makes Buzzfeed so extracting key SEO elements including HTTP
Google loves. res images only to those who can shareable – and the same status codes, page titles, meta and heading tags.
It is this rich content that appreciate them and decrease kinds of techniques can be
the site’s overall Numerous configuration options and abilities to
meets the standards that Google load time. utilised to improve the content export data in .csv format makes it a flexible tool.
now seeks from all bloggers and and shareability on any website.

Understanding SEO
Investing in high-quality
content is more than
worth it in the long run Google Panda
and Penguin
Have you been hit by Panda or
Penguin? Learn which update
could be affecting your website
Google’s Panda and Penguin updates are
algorithms put in place to ensure users are
displayed the most relevant high quality results
when they use Google. They penalise websites
that operate against Google’s guidelines by
reducing their rankings, thus improving the
Are you sure your content quality of search results. Depending on the level
of offense committed, a site can potentially be
is up to scratch? completely removed from the SERPs (search

engine results pages).
The difference between the two are the areas
Creating quality content is the cornerstone of SEO success. Get this they target. Penguin targets low quality links
part right, and you’re creating a solid foundation for your website pointing towards a site. Historically a lot of SEO
agencies have adopted quick win tactics through
When Google crawls your site it will use a Engage your audience: Create content that purchasing links, often in bulk, to boost rankings.
number of indicators to assess its relevance and reads naturally, but don’t be too scared to This has resulted in a large number of sites
then index it according to its perceived value. The mention your keywords. Engage your reader by receiving penalties since Penguin’s release in 2012.
content of your website is one of the clearest creating original, unique content that offers real Google’s Panda algorithm targets sites that
signposts for Google to work out what keywords value. For content ideas, consider what the
and phrases your website should be ranking for, current questions, issues and debates are within
so it is crucial to get this section of your SEO your niche.
strategy right.
Be unique: Don’t copy what other people are
What does Google consider to doing. Write about something that your audience
will be genuinely interested in and that is unique
be good content? to your website. This is the best way to make your
Recent Google updates have indicated that thin website stand out.
content pages with little or no relevant content
are not likely to be ranked as highly as websites Produce high quality content: If you are
with more substantial, well-written content. outsourcing content cheaply, don’t expect it to
Blog posts, interactive animations, videos and be unique or engaging for your audience.
infographics are just some of the many ways in Investing in well-written content by an expert is provide low quality, scraped/duplicated and
which you can engage your audience and drive always a good idea, or if you know the subject spun content. It aims to lower the rankings of
traffic to your website. Written content, however, well, why not write about it yourself? these sites, while allowing sites with helpful, high
is still one of the most important ranking factors quality content to be seen higher up in search
for Google. Content needs to be accessible: Don’t hide results. If you suspect your site has been affected
away key sections of your website on pages that by Penguin or Panda, there are many timelines of
Tips for producing content that people can’t easily navigate to. Allow people to Google updates online. By analysing your Google
easily navigate to your key content pages and Analytics you can mirror traffic drops to Google
Google loves: present the content in a way that will provide updates to see if they’re due to Penguin or Panda.
Write for people, not for search real value to the user.
engines: This has been
said many times by many See how Use keywords appropriately: Use
people, and that’s because
it is true. How can you Google views the phrases and keywords that your
audience uses. Don’t be tempted
engage an audience
with something that
your site to overuse certain keywords, but at
mentions your keyword
Use a text browser such as Lynx to the same time, don’t be too scared
see your site as a search engine to mention them at all. You will
every third word? Write spider would do. If features such as
what people would want Javascript, frames or Flash stop you find it very hard to rank for a term
from viewing your site in a text or phrase if you don’t even mention
to read rather than what browser, then the spiders
you think Google wants. may have trouble
these terms on your site.
crawling it.

Ten mistakes to avoid
Building a technically sound website is vital for any successful SEO campaign. Here are ten
of the most basic mistakes to avoid
01 No sitemap 06 Poor Metadata
A sitemap is an XML file that feeds data to search Title tags are still regarded as one of the most
engines about a website’s most important pages such significant influences for on-site SEO success. This is
as the date of the last update and the importance of a the first thing the user sees on search result pages, so
page compared to others. All of this allows its spider to it should be unique, succinct (70 characters max) and
crawl the site more intelligently and economically. keyword optimised according to the content subject
Although creating a sitemap can’t solely guarantee matter of the page. Meta descriptions are also important as they are essentially an
search engine success, it is certainly a quick win and relatively easy to implement. opportunity to entice the user to click through to the page in the form of an ad copy.
02 Failed canonical
domain check 07 Keyword stuffing
When a domain fails a canonical check, this implies Ensuring that a fine balance of target keywords is
that the home page is accessible through more than incorporated into the body of a page is a challenging
one URL. For example, webdesignermag.co.uk/ feat for any copywriter. Too much and the page
index.php, webdesignermag.co.uk/home.php and appearing spammy is a risk, but too little and the
webdesignermag.co.uk all load the home page. search engine may have trouble understanding what
Having multiple URLs load identical content is a problem because inbound link equity to rank for. The solution is to use a good range of
can become divided and it diminishes the overall SEO site value. Some solutions to targeted synonyms presented in a well-written structure that will engage the reader.
this would be to either implement the correct canonical tags or have 301 redirects
pointing the duplicate pages to only one location.
08 Duplicate content
03 Slow loading times Having duplicate pages within a website is a
common mistake that usually occurs on larger sites or
Although broadband speeds in the UK are improving,
eCommerce sites with lots of product listings, resulting
Google announced in 2010 that loading times are
in detrimental consequences if not handled properly.
included in their algorithm, with slow loading times
Common instances of duplication can occur where
for desktops and mobiles still being a problem. Using
filters are applied to product listings or where several minor variations of a product
Google’s PageSpeed Insights tool, any page can
exist. A solution to this is to use a canonical tag to point the duplicated pages to the
be analysed – identifying reasons behind and solutions for slow speeds. Common
corresponding main pages – essentially having one page gaining all the SEO value.
solutions include eliminating render-blocking JavaScript and CSS above-the-fold,
leveraging browser caching, optimising images, enabling compression and minifying
JavaScript, CSS and HTML (which means removing any unnecessary spaces).
09 Links from
non-credible sources
04 No header tags Inbound links are considered the most important off-
Header tags such as <h1>, <h2> and <h3> give content site factor in determining natural ranking success, with
its structure and help the search engines understand the quality of the link source being at the forefront. The
which parts are important. Search engines use header most influential links come from authoritative websites
tags to prioritise a page’s content, so incorrect use can within the same industry, with the linking page containing content relevant to the
result in confusion. The solution is to ensure that the target page. Although acquiring links from quality sites is challenging, one link from
main <h1> tag is unique and accurately incorporates the topic of the page, including an authoritative site can have a more positive effect on rankings than a few hundred
relevant keywords. Likewise, any following subheadings should use <h2> and <h3> links from non-credible sources.
tags where applicable.
10 Generic internal
05 Missing Alt attribute anchor text links
Search engines cannot understand images, so it Anchor text is the clickable text of any link on a page.
is imperative to attach descriptive and relevant When a website is crawled, the search engine uses this
text in the form of an Alt attribute. This allows the when ascertaining the content and relevance of any
search engine to fully understand the image and associated page. Using generic anchor text such as ‘click
is an opportunity to add relevancy and keyword here’ when linking to internal pages is a missed SEO opportunity.
rich descriptions to the page. One common mistake is to be too vague with the The anchor text should include relevant keywords that the page wants
descriptions – for example, blue trainers can be further enhanced into blue and white, to rank for but over-optimising can also have a negative effect, so keep the
limited-edition Nike running trainers. balance right.

Understanding SEO
Sessions
Google has recently renamed
Visits to Sessions. Use this to
understand how many users
are coming to your site
Bounce Rate
Do they get
past the landing
page? Bounce
Rate is the
percentage of
users who only
view a single
page of your site
before leaving
Pages / Session
How interesting is your
site? Pages per session is an
average of how many pages
your users are visiting
Track
conversions
Unlock the full potential of GA by going
beyond tracking web stats. GA allows you
Conversions to set up goals and events to measure how
Conversions are goals measured which are set by the Average session duration well you meet your objectives.
How long do they stay? Average session duration gives Set up goals to track discrete actions
webmaster. An example may be landing on a Contact such as form fills and transactions or
page or making a purchase you the average time a user spends on your site set up events to measure interactions
that are independent of a page
load – such as video plays or
Analysing analytics document downloads.
“Backlinks are a key ranking factor

U
nderstanding the metrics behind your
website is fundamental to being able to
affect how the search engines rank your
site. You can use Google Analytics to help inform in Google’s ranking algorithm, and
you on how your current website content is
performing and where your website’s traffic is although the level of their importance
coming from. It can also be used to help you
define the next thing you should be improving or has decreased slightly over recent years,
adding to your site.
A page with a high bounce rate equates to low evaluating them is a key part of SEO”
interest from a user perspective and is going to
harm your rankings in the long term. Now this although the level of their importance has linking to yours is absolutely crucial and you are
could be down to poor content on your page, decreased slightly, evaluating them is a key part very likely to see an increase in traffic and
but equally it could be down to the low relevance of SEO. Tools like MajesticSEO, Ahrefs and Web positions, but perhaps a more significant metric
of a site linking to your content. If they came Master Tools allow you to assess your backlink for rankings than volume of traffic is traffic
looking for skateboards and all you have is profile, showing which sites link to you, what quality. Quality of backlinks rather than quantity is
cupcakes, they’re likely to leave pretty quickly. pages contain the most linking domains and a key here.
Ensuring links point to the page on your site number of other useful metrics. Pointing links towards pages purely to pass on
most relevant to the content they are linking from When combined with organic traffic data in GA link value can result in a penalty via the Penguin
is a good way to reduce bounce rate and increase (Google Analytics), you can get an insight into algorithm and should not be attempted. A good
user interaction on a site. Backlinks are a key how those links are affecting your pages and backlink is usually an earned, relevant and a
ranking factor in Google’s algorithm, and their rankings. Having high quality relevant sites logical link from one site to another.

Improving your results Resources
Sessions Reducing the bounce rate of users visiting There are many tools available to
The best way to improve organic sessions is via your site can be a daunting task but to overcome help create SEO-friendly websites.
rankings. If your site appears first in the SERPs, it there are simple steps you can take to get Below are some of the most useful
there is a likely CTR (click through rate) of around started. Firstly, increase the quality of the content out there
33%. The importance of rankings is shown by on your landing pages. Is it informative enough?
analysing the CTR of a result in tenth position, Is it interesting enough? Secondly, interlink your
which averages about 2%. pages to other relevant areas of the site. By doing
There are many ways to increase a website’s this, you’ll allow easy user navigation throughout
ranking for any individual term. The most the site and site visitors will be more likely to visit
common – and arguably most effective – multiple pages.
method is creating content and getting links
with that search term in mind. Conversions
Conversions are goals defined by the website
Page load speed owner. The webmaster commands GA to track
Page load times are now a significant factor in certain user interactions with the site; this can The Beginners Guide to SEO
Google’s ranking algorithm. Use free tools like be anything from landing on a product page, to
moz.com/beginners-guide-to-seo
Google PageSpeed to identify where you need filling out a contact form, to registering as a user.
This guide, produced by SEO software company
to spend the time. CRO (conversion rate optimisation) is the practice
Moz, provides a solid introduction to the
Once you have identified the pages with the of increasing conversions not by maximising
fundamentals. From background information to
problems and which elements need attention, the number of users but by increasing the rate
you should know what to do. Minifying the CSS at which current users convert. Would more advice on spider-friendly page design, creating
and Javascript can reduce file size dramatically people complete a form on your site if the a crawlable site structure, keyword research and
and you’ll be amazed what can be saved by button said Enquire rather than Submit? Without building site authority by link building.
optimising and compressing images. testing these things you won’t know, but luckily
GA contains its own page testing tool called
Bounce rate Experiments. Experiments allows you to divide
Bounce rate shows the percentage of users traffic to variations of a page to see how those
who view one page on your site before leaving. different variations affect conversion. Set up tests
Having a high bounce rate is a big issue as it on key pages to understand what page elements
shows low levels of user engagement and is one most affect user behaviour. This knowledge can
of the signs of a low quality site. be of vital importance.
Web Developer Toolbar

chrispederick.com/work/web-developer
This free browser toolbar for Firefox and Chrome
brings together a large collection of tools useful
for web developers and SEOs alike. Element
attributes can easily be viewed and support for
images, CSS and JavaScript toggled at will.
Google Keyword Planner

adwords.google.co.uk/KeywordPlanner
It’s important to use the terms users actually
search for to describe the products or services a
website offers. Keyword Planner enables you to
view an estimate of how many people search for
a particular query each month in Google.

Understanding SEO
Get more people to

visit your website
SEO is incredibly important for building a high-traffic website
S
EO (search engine optimisation) is not trying to attract the same visitors. There is no The consideration of how internet search engines
a feature that you may be aware of guaranteed way to ensure lots of traffic, but to work and what people are looking for will ensure
when first setting up a new website, but not make use of SEO techniques is probably to that you are targeting your content to the right
understanding how it works can make the ensure that your new site takes a long time to get people at the right time and give you a better
biggest difference of all to ensuring that you off the ground, with the possibility that it will never chance of making your site a success within a
drive as much traffic to your site as possible. gain more than a handful of visitors. relatively short time period.
The quality of your website’s content must
always be paramount, of course; but no matter
how good the quality, you still need to make “Ensure that you are targeting your content
sure that your website stands out and competes
against the millions of other sites that are also to the right people at the right time”

01 Encourage interaction 02 Google Webmaster Tools 03 Know the trends
If you allow readers to comment on your content, Sign up for Google Webmaster Tools. Google Since they change so quickly, it makes sense to
they are likely to add info that search engines will provides a great deal of information on how to know what the trending topics of the moment
pick up on. This means your readership is doing use keywords correctly and how to potentially are. Keep an eye on www.google.com/trends,
some of the work for you and increasing the increase the number of web searches that end up which shows the top searches in real-time. If
amount of information that search engines will at your website. Google is still the biggest search you can tap into these topics, provided they’re
list. It is also ideal for encouraging repeat visits. engine – ignore it at your peril! relevant to your site, you may increase traffic.
04 Avoid the bloat 05 Meta tags 06 Keywords

As you get more experienced with your website, Your website should have a meta description Although no longer the key way to generate
try to cut down the code as much as possible. at the top of the page. This is not visible to the search engine traffic, keywords (including
You are at the mercy of search engines and reader, but does tell search engines what the site synonyms) still indicate to search engines what
unnecessary code will only get in the way. is about and is also displayed in search engine your website is about. More and more, though,
Keeping everything trim will also speed up the results. Written effectively, it will entice people the emphasis is on well-written, user-centric
site for your visitors and the search engine robots, who receive results from your site to visit above content that is updated regularly: avoid keyword
so everyone’s a winner. the other results that are returned. stuffing at all costs.
07 Title tags 08 Try to be unique 09 Avoid duplication

Keywords should be used in title tags as they are Simply copying headlines and content from other You also need to be careful to avoid repeating
the overall label for the page's content. This helps sites is not a good idea. It not only shows a lack phrases or content on your own site. This can trick
search engines sift through sites by relevance of originality, but also means that you will receive search engines into believing that the content
and helps searchers identify if it is what they're very low search ratings for that content. Search is not justified and you will rank lower through
looking for. Make keywords relevant to each engines rate unique content above everything penalisation. It is good practice anyway to not
specific page rather than the site in general. else, so try to be original as often as possible. duplicate your own content on any site.

Understanding SEO
10 Be search engine friendly 11 The website structure 12 Build links

Most CMSs offer a choice of how URLs for each There are tricks to how content should be One very important factor in increasing your
page will be displayed. Try to use the ‘search displayed on any website and there are some traffic rank is to build links with other sites. The
engine friendly’ format, which uses the title tag rules that are worth following. It has been proved better quality incoming links you have, the better,
of the page in the URL, eg ‘/www.domain.com/ that people tend to read in an ‘F’-shaped format, improving your page rank with Alexa, Google,
article-title’. This also makes it look much cleaner so try to keep as much of your important content etc. Links build your reputation as well as your
and more professional to the reader. near the top and in a left-hand bar as is feasible. traffic – and you need both for success.
13 Automated SEO plug-ins 14 The hard work 15 Stop words

If you use a CMS like WordPress, there are You can build links to your site by increasing If you have your URLs presented using the titles of
many plug-ins available to automate much of your activity and shareability on social networks. each article, you need to be aware of stop words.
the process of improving SEO. If you have little Having a commenting facility will also boost Search engines ignore commonly used words
knowledge of how SEO works, you should try one interaction to keep your page regularly updated such as ‘I’, ‘the’ and others, so using them can
and then start working out your own solutions as without the hard work. Although it may take a confuse the searches. There are plug-ins available
your knowledge increases. while to establish, it'll be worthwhile in the end. that will automatically remove these for you.
16 Paying for help 17 Don’t buy traffic 18 Don’t obsess

A simple search for ‘SEO’ on the web will bring There are many services available that offer the The main thing with SEO is to understand the
back many companies offering to improve the chance to buy links and other mechanisms that tricks you need, but to not obsess over them.
SEO on your site. You should research these claim to improve your traffic. Google's algorithm Most of your time should be spent creating a web
carefully before you decide to pay for help, but is now sophisticated enough that it will be able experience that brings readers back repeatedly,
they can at the very least offer advice. Do bare in to identify when links are bad quality. This could and the SEO side should be seen as topping up
mind though, that no one knows your product or undo all of your hard work in a matter of days. your core audience. For businesses, SEO is much
service like you, so give it a try yourself first! Remember, it is quality not quantity. more important to gain new customers.

Important SEO factors SEO-friendly URLs
Make sure that your URLs are SEO friendly.
Make your site SEO friendly Using the right format will greatly help search
engines index your content and it also looks
much cleaner to visitors
Meta tags The right format Content above all

Try to ensure that your header code Websites should be displayed in a form that Don’t concentrate on SEO above the
includes meta tags and keywords that is easy to read by anyone who visits. This most important aspect of your site:
let search engines know what your site is will make it easier for them to understand the content. The majority of your time
about. This is vitally important for ranking the content and increase the likelihood of should still be spent creating interesting
higher on web searches them returning content worth reading
Judging SEO success It’s not easy to judge how effective your SEO strategy is
We said in the final step of this tutorial that SEO should not be obsessed about, and the loyalists who enjoy your content, while the one-time or referrals have most likely
that the content is the most important factor, but you still need to understand how come from searching for specific information. To add complexity, even your loyal
your statistics show your success. We can break down your visitors into two broad readers will have likely come via search in the first place so they could still represent
categories: those who repeatedly visit your site and those who have recently visited. a good example of SEO working effectively for you. The best advice is to keep an eye
In general terms, you can analyse how many are from each group by checking your on your stats and to check for shifts in the numbers. Ideally, you want a loyal base
stats and seeing who has come direct to the site, who has been referred by another of readers who may spread the word, but with a healthy number of new readers
site and which readers have come via search engines. The direct visitors are likely continually dripping through.

Understanding SEO
Use Google Analytics to

You need to analyse your traffic to see what you are doing right – or wrong
N
o matter how much effort you put in to a all aspects of your site, from social networking need, but there are premium options available
website or how great your content is, you impact to the number of people visiting on mobile should you need specific features to take your
need to understand what your audience is devices, and more general statistics including visitor analysing further. In this tutorial we will teach you
looking at and what they are interested in to keep numbers and when they visit. how to set up Google Analytics for your site and
growing your site. The basic Google Analytics service is free and how to make the most of the service to understand
You can use web services that claim to includes all of the features most webmasters will and increase your traffic.
understand your traffic, but by far the most
recognised service is Google Analytics. It can show
you, in great detail, which parts of your site are “The basic service is free and includes all
successful and which parts require extra effort to
receive attention from the masses. You can monitor of the features most webmasters need”
Highly analytical Customisation
You can create custom reports and
Time counts
The average visit duration shows
Master the art of reading and understanding add widgets to your dashboard to how interested visitors are in your
your website's statistics make the analytics fit the way you content – the higher the number,
and your site work. The service is the better. Keep a close eye on this
highly flexible and very accurate metric because it is very important
Visits are a priority
The graph will quickly show you how
well your site is doing over a period
of time and at a glance let you know
if you are growing more popular or
losing appeal to the masses
SET YOUR GOALS

When you first build a new website,
it is a good idea to have objectives
in mind for where you want the
site to go and how popular you are
expecting it to become. Google
Analytics includes a Goals feature,
which lets you set up targets for your
site in a number of areas. For example,
you can choose to have a goal for
the average duration of visits to be
60 seconds if they are low now, and a
separate goal for the number of daily
visitors. This gives you something to
aim for and the Analytics service will Mobile is vital
automatically check your stats to see
The mobile stats grow in importance
if you have reached your targets.
every day as more people use their
Once you have set up your goals,
smartphones and tablets to surf the
you can view your progress in the
web. You need to ensure your site
front graphs which show your goal
works on mobile devices
conversion rate and the number that
you have completed. Every business
and its associated websites needs to
have targets; the services offered by
Analytics are quite simplistic, but they
give you something to aim for and
can greatly enhance your site if you
put the effort in to reach the goals
you have set for yourself. They are
one of the most important parts of
Google Analytics.

01 The first step 02 Sign up
Go to www.google.com/analytics. If you don’t already have a Google Now you have a Google account, you’ll be asked to sign up to Google
account, click Create Account. Tap Sign up and enter the required details – try Analytics. Tap the Sign up button and proceed to the next page. You now
to make the password as secure as possible. Then click Create my account. need to input your website URL and choose an account name.
03 Starting the setup 04 Time to jump

On the next page, scroll down to the ‘What are you tracking?’ section and Now to find out how to insert the Analytics code for your site setup. Each
choose the correct option for your website setup. Most people will require service is different and you’ll need to find the correct process for yours,
the ‘Single domain’ option, but choose ‘Multiple subdomains’ if applicable. whether it is WordPress, Squarespace or another web publishing platform.
05 Use the code 06 No traffic

Return to the Tracking Code section and copy the code under ‘Paste this code Click the Home button at the top to see a series of windows which will all
on your site’. Paste it into the required place on your site. Then, when you click show zero hits. Don’t panic; it takes some time for the code to start showing
Save at the bottom, you should see a Success button appear at the top. traffic. Leave it for 48 hours before you come back and check your stats.

Understanding SEO
07 Your first stats 08 Check your visits

When you come back, you should see a series of graphs showing the traffic Click Visits at the top of the box and a new page will pop up. The graph at the
for your site. Don’t worry if it’s low, since analytics tends to get more accurate top shows the number of daily visitors and the boxes below delve deeper
over time, but you will need to spend some time looking at the graphs. into the operating systems used and geographical locations of your readers.
09 Study the data 10 Check the screens

It makes sense to check the Browser stats first, showing which browsers As well as the OS, check the screen resolutions used by visitors. If low ones are
visitors are using. You should ensure that your site presents correctly in each, at the top, you’ll need to ensure your site works on mobile devices. Either let it
putting emphasis on the most popular browsers within your readership. scale down or use a plug-in to change it to a mobile version automatically.
11 Build interest 12 Delving deeper

The ‘Avg. Visit Duration’ box details how long visitors stay on your site. Very Standard Reporting>Traffic Sources shows the keywords searched for to get
short visits are classed as ‘bounced’ and can be ignored. The longer the to your site. It also shows how much traffic is direct to the site and how much
average, the more interesting your content is to the readers – a good sign! comes from search engines – ideally, you’ll want to see the latter grow.

13 Referrals 14 Social stats
Also check the Referral stats, which show sites that are linking to you. This 'Social' shows traffic from social networks, which will help you analyse how
will show high-volume links and also sites that have completely copied your effectively you’re using Facebook, Twitter, etc. It’s not too hard to make these
content with a link back. This is not good practice, so ask them to stop. stats grow to form a decent percentage of your traffic.
15 Custom alerts 16 Advertising

You can create custom alerts by selecting Intelligent Events on the left, then Google Analytics also offers detailed AdWords reporting. This helps you to
Overview>Custom Alerts. Alerts can be set up to advise you immediately if see if your money is being well spent or if you need to change your methods.
you receive a lot of traffic or if it drops below a certain level. Well-targeted ads can make a huge difference to incoming traffic numbers.
17 Custom reports 18 Export your data

‘Custom Reporting’ lets you build reports tailored to your goals and the way Use the Export option at the top to export your data in PDF format. This can
your site is set up. You can create reports that cover all of your specific needs be useful to share with potential advertisers or for data analysis – you can
and this could potentially greatly speed up your traffic analysis in the future. send it to specialists for advice on the best methods to grow your site.

Understanding SEO
Create a Google Sitemap

for easier searching A Google Sitemap will make a huge
difference to your site’s recognition
A
Google Sitemap is important for a variety of reasons.
Firstly, it tells Google how your site is structured and
ensures that the search provider is aware of every page
present on your site. This provides for new sites with lots of
varied content, making sure they are properly structured in the
Google mechanism, not to mention the site itself. As a result,
the chances of search results coming your way are much more
favourable. In fact, a sitemap is more important for new sites
because Google is less likely to be aware of the extent of your
website's content if you are yet to establish external links from
other sites; this can spell a long road ahead towards gaining
recognition from the biggest search provider of all.
A sitemap offers a shortcut to Google recognition. While it
offers no guarantee of success, the process of uploading one is
quick and simple, so you have nothing to lose by following the
steps here. Once you have completed the process, you should
be able to leave it as is, although it can be beneficial to update
it from time-to-time. The most important factor, however, is to
ensure that you have uploaded one initially. Anything you can
do to make Google more aware of your site can only be a very
good thing.
“A Sitemap offers a shortcut

to Google recognition”
01 Sign up with Google 02 Create your Sitemap

Go to www.google.com/webmasters/tools/ and create a new account via Go to www.xml-sitemaps.com, which is a site that lets you automate
the 'Sign up' button. You then need to input your site URL and verify it by the process of creating a sitemap. Simply enter your URL and tap the
following the instructions provided on screen. You need to do this to prove Start button. When completed, you will be presented with an XML file
that the site is yours. to download.

Your site’s sitemap Regular updates
You will be able to see when the
Multiple Sitemaps
You can upload multiple sitemaps to Google
A look at your personal sitemap sitemap was last processed, which will to keep your site information fresh and
help you to ensure that the data being up-to-date. Try not to upload them too
scraped is recent and accurate. Try to often because that will add little benefit and
update every quarter if you can could cause problems with Google searches
How many pages?
You can check to see how many
pages are included in your Sitemap
against the number of pages you
can see on your site using FTP. They
should ideally be identical
Know the location

The Google Sitemaps page will
show which file it is looking at and
you should ensure that this matches
where you believe the file to be on
your own server. A single ‘/‘ means it
is in the root folder
NOT JUST GOOGLE

You can submit sitemaps and other
site-related data to other search
engines as well. For example, there are
webmaster tools available for Bing at
www.bing.com/toolbox/webmaster/
and these work in a very similar way
to the Google process. If you have the
time, try to submit sitemaps to all of
the large search engines to increase
your visibility to everyone.
03 Upload the Sitemap 04 Submit your Sitemap

You now need to upload the sitemap file to your root folder via FTP. Simply You now need to go to Site Configuration at Google Webmaster Tools and
upload it and check that it is visible by navigating to choose Add/Test Sitemap. Simply enter the URL of your sitemap and submit
<your domain>/sitemap.xml. You should see the file displayed and if it. Google will then analyse the file and index your site accordingly. It’s a
present, you can move to Step 4. painless operation.

Photoshop & Graphics
136 130 New ways to work
Create with Photoshop
visuals Get more from Photoshop with these tips
136 Create great backgrounds

Learn to make a great tiled background
140 Design header and footer graphics

Make your website memorable
WHAT YOU’LL LEARN

Although you’re more likely to hear about it being
used to retouch models or enhance landscapes,
Photoshop is used a lot in modern web design.
Although you can get a website online and viewed
by many without even touching the software, well-
realised graphics made in Photoshop will enhance
every website. We take you through its role in web
design, and you’ll learn how to get your images ready
to go on the web, as well as how to design a great
background, header and footer.
HEADER
& FOOTER
Effective header and footer art can
make the difference

PHOTOSHOP IN
WEB DESIGN
Learn how the image-editing
software is used
“Photoshop has found a place as a prototyping

tool, allowing designers to present clients with
ideas, palettes, styles and wireframes”
130 140
Best Design
plugins headers

PHOTOSHOP

W
ith the development of HTML5 and CSS3,
‘designing in the browser’ has become common
War has long been waged over practice. Photoshop has taken a back seat for most
web designers, as better standards and new technologies
have allowed for more creative freedom when working with
designing in Photoshop versus code. With the ability to create gradients, round corners, drop
shadows and more with ease in CSS, it sometimes feels like
designing in the browser. But, maybe Photoshop’s bloated feature set is steadily becoming obsolete.
However, a new movement has started, bringing Photoshop
back into the web design fold and repurposing its powerful
it’s time we all just got along tools for brainstorming sketching and wireframing.
Many designers have criticised designing in the browser for
what Andy Budd (CEO at Clearleft) described as, a lack of “even
the most rudimentary tools, like the ability to draw lines or
irregular objects through direct manipulation”. The argument
here is, although HTML and CSS are capable of rendering
designed elements without the use of Photoshop, the lack
of freedom to directly manipulate designs can be risky for
creativity. Instead we should be using Photoshop to create
mood boards and sketches at the start of the design process,
allowing creative ideas to flow and develop without the
abstraction of a text editor and strict standards to stunt them.
This year, Photoshop is 25 years old and, with the release
of CC 2015, now in its 22nd iteration. Over that time, Adobe’s
software has seen radical changes, developing from an
image-editing application into a powerful design tool, with a
huge and dedicated user base. With competitors – including
Adobe’s own Illustrator and Bohemian Coding’s Sketch,
popping up – Photoshop has had to battle to stay relevant.
This has lead to a repositioning of Photoshop. It’s no longer
the tool used to create polished, finished site designs to be
sliced and rebuilt on the web. Instead, it’s found a place as a
prototyping tool, allowing designers to present clients with
ideas, palettes, styles and wireframes that can be easily edited
and don’t involve hours of development time.
In response, Adobe and third-party developers have
been building tools to bridge the gap between Photoshop
and CSS, making the transition from prototype to product
smoother. Here, we’ll take a look at some of the tools, plugins
and features that make Photoshop the perfect application for
getting your ideas down, before you even open a text editor.
Sketching in Photoshop
Designing in the browser can make it hard to quickly move
elements around and try out new ideas. If you’re struggling
with this, why not turn to Photoshop? You can use familiar
tools to mock up simple, visual layouts to explore ideas and
see if they work. These don’t have to look perfect and can be
made up of simple shapes – the idea is to just get a feel for
what works and what doesn’t.
Photoshop’s Vector Smart Objects are perfect for creating
simple layouts to explore site designs. Once you’ve created
something you’re happy with, you can try it in browser and
build out the details. This approach utilises the best of both
worlds, using Photoshop to experiment fluidly with designs
and HTML and CSS to implement the final product. This
method is especially useful if you’re having trouble with where
elements should go in responsive layouts – it also avoids
getting stuck staring at code, when a little bit of creative
freedom could give you the answer.

Best tool for

sketches
Gauging the mood
Before jumping into the browser, to start putting done in the browser, so Photoshop is the perfect
together your site, it’s important to determine a set tool for getting all your ideas in one place, either for
of aesthetic guides for your designs. By creating your own inspiration, or to talk over with the client to
mood boards, collages, wireframes and mockups find the perfect feel for the project.
you are more able to establish the mood and
atmosphere you, and the client, are aiming for. Facing the elements
Element collages let you sketch out ideas for
Speaking the language particular elements of a site without putting the
Photoshop’s toolset isn’t completely whole design on paper. Dan Mall, the creator
perfect for building layouts. Even of element collages thinks they are
in the sketching stage you’ll useful because we don’t often come
find that sometimes it can be DON’T GET up with an entire site design in
WebZap less than fluid for putting CAUGHT UP IN one go, so full page comps aren’t
webzap.uiparade.com together designs. What it PROTOTYPING always a realistic concept. “An
WebZap is a fantastic Photoshop plugin is perfect for, however, is Make sure you don’t get too element collage allows me to
that makes sketching mockups quick and creating and exploring the obsessed with the finer details of document a thought at any state
easy. It lets you create fantastic looking UI visual language of your prototyping. It’s all too easy to of realization and move on to the
elements, grid layouts (based on the 960 designs: styles, effects, colour waste too many hours in next,” he writes on his site.
grid) and Lorem Ipsum text layouts all with palettes, fonts and a whole Photoshop polishing This method is useful as it lets you
a few clicks. You’ll save countless hours lot more can be predetermined mockups. explore the visual language of the
searching for UI kits and templates with through experimentation in site through elements that are likely
WebZap’s fantastic library of tools. It only Photoshop, saving you valuable to appear in the final designs. It also gives
costs $19 and could make the difference time when it comes to the code. This the client something more solid to feed back on
between spending hours on a mockup, also allows the client to feed back on many of the as the elements appear in context more so than in
rather than days. It also comes with a great basic elements before you devote a lot of time to many other prototyping methods.
little preview function that will have your building anything. Using collages, mood boards
mockups looking polished for the client. and mockups, you can explore the aesthetics of the Wireframing
site and develop a mood, while providing the client and prototyping
with a variety of deliverables. Wireframes and page prototypes are usually
basic representations of page elements, as they
Better than Getting in the mood

Creating mood boards can be a really useful exercise
might appear in the final product. They should
be simple, without detail and show the basic
the browser for establishing a visual direction, right at the

beginning of a project. This is one step that can’t be
structure of the page. You can use these to
establish the visual language of the site. Menus,
Sketching ideas in Photoshop has many
advantages over starting your concepts
in HTML and CSS. There is more room
for creative freedom and quick changes
to modules and page elements without
the abstraction of code. This is not to say
5 great plugins & tools
you should be creating full-page comps
in Photoshop and then translating them
to the web – this method can still cause
more problems than it solves and is best
avoided due to the sheer amount of
time it can take. Rather, Photoshop is the
perfect tool for creating visual concepts
that aren’t confined by the CSS, helping
to avoid the initial stumbling blocks of
building the site in the browser.
Page Layers 960 grid
“More room for www.pagelayers.com
Page Layers is a nifty little app that converts
960.gs
The 960 grid is a simple but effective grid system
creative freedom” webpages into layered Photoshop files. You can
open and edit entire webpages as PSDs, perfect
that comes with PSD and CSS templates to
translate your perfectly proportioned site to the
for late stage editing. web with ease.

EXPLANATION,
EXPLANATION,
Style Tiles
EXPLANATION What are they?
Help your client out. It’s Style Tiles are the invention of Samantha Warren,
sometimes hard to visualise who compared them to “the paint chips and fabric
how mockups will be realised swatches an interior designer gets approval on
later in the process. A little before designing a room”. They consist of styles for
explanation goes a specific design elements, including fonts, colours
long way. and UI elements that together portray a brand’s
visual language for the web. They are great for
starting and progressing discussion between Using Style Tiles is a great way to start crafting the visual
designers and clients about the visual direction they language of any design
headers, and breadcrumbs might need to be want and can be extremely useful in
differently styled to the other changeable page establishing the basic aesthetics for a convey your ideas and get feedback
elements like text and sidebars. Often, the site design. to keep the revision process quick
client might want to see a working prototype, Creating Style Tiles helps to NO and efficient. With each round of
in browser. For this purpose, Photoshop takes avoid the ‘do four Photoshop CONTEXT feedback, you can develop the
a back seat as it’s relatively straightforward and mockups of different Remember, while they tiles until everyone is happy, but
normally quicker to build the working prototypes webpages’ stage of the are great idea, Style Tiles lack the various revisions here won’t
completely in the text editor. design process, which often context and are sometimes take anywhere near as long as a
just ends up wasting time hard to visualise for clients. full comp.
For discussion, and provides very little of Element collages will solve Afterwards you can move on
not design any use. Using Style Tiles, the this problem. to the prototyping stage. You
A combination of any of these prototyping designer and the client can nail can download a handy Photoshop
techniques should be a perfect solution for down many of the important document from styletil.es to get
getting your ideas down and translating them interface choices needed to progress started. Start experimenting with a
to the client. The most important thing to with a build. They are also a good bunch of different colours, fonts and imagery
remember is that you’re repositioning Photoshop alternative for anyone who thinks that mood boards to begin building up a visual language. Then play
in the design process, using it as a tool for are a little too vague. around with the elements until you have three or
creating a dialogue between you and the client four individual tiles that all say something different
or a collaborator – not for pushing out finished Creating Style Tiles about the brand. Style Tiles are well suited to
pages. It can still be used for creating assets to Just like any design process, using Style Tiles begins responsive design, because, rather than designing a
be implemented in finished designs but in a with a lengthy conversation with the client. Finding fixed-width page layout, you’re developing a system
responsive world, static page mockups just don’t out what they want and then interpreting it can that can be applied in numerous ways, and used and
cut it any more. be a difficult task, but using Style Tiles helps to developed throughout the site.
One of the many advantages of using Photoshop over alternative software is the huge number of
built-in and third-party tools, available to help you out when you most need it
Web Font plug-in Pixel Dropr Cut&Slice me

bit.ly/1qen6lt pixeldropr.com www.cutandslice.me
Web Font Plug-in is a handy tool that lets you use Pixel Dropr lets you create libraries of various UI Cut&Slice allows you to export assets for different
Google Fonts in Photoshop, meaning you won’t elements and images and instantly drop them devices quickly and efficiently. If you do have to
have any nasty surprises when you move from into Photoshop as you’re working. It’s a great tool slice up a PSD, then make sure to use this tool to
PSD to CSS. for prototyping. improve your workflow.

From PS to CSS
O
nce you’ve finished with all of the in PhotoShop into CSS, which is just another
prototyping stages, it’s time to take your reason why lots of designers started avoiding the
designs to the browser. But what’s the Photoshop step completely.
best way to go about translating from Photoshop These days though, there’s a whole host of
to CSS? tools and plugins available to help you translate
Once you’ve done your sketches, created your your ideas from canvas to browser as smoothly
Style Tiles and developed your element collages, as possible. Some, that we’ll look at in a moment,
it’s time to take the visual elements you have directly convert your layer styles to CSS, while
established and translate them to web. In the past others simply aid in the transition. Layerstyles. your clipboard. When you paste it into your editor
this was a difficult enough operation. You would org, for example, is a totally web-based version with a little bit of HTML, you’ll have a button like
create a huge bitmap in Photoshop, slice it up of Photoshop’s layer styles dialogue that lets you the one you designed in app.
and reassemble it online. It could be painstaking mock up the style you want and then export the Unfortunately, this is a far from perfect solution;
and things often didn’t turn out as planned. Then result as CSS. the home brewed tool just isn’t up to scratch and
came CSS3 and implementing Photoshop style neglects to use RGBa values for low opacity –
effects in the browser, without the use of images, The in-house method and sometimes ignores effects altogether. It also
became a reality. As of version 13.1 (CS6 and above), Adobe has provides no formatting options before copying,
That being said, it can still be difficult to get the included a CSS export feature right inside the so everything has to be fixed later in the editor.
exact look you had achieved in PS sometimes, Photoshop package. Just select the layer that you Nevertheless, even with these bugs, it does
when you’re working with a whole different set want the CSS properties for, click on ‘Layer’ in provide you with a great base to start working
of tools and variables in a text editor. It can be the menu bar and hit ‘Copy CSS’. Photoshop will from, without having to manually input all of the
very time-consuming translating layer styles output a nice chunk of code and copy it straight to basics yourself.
Third-party CSS plugins

Photoshop’s own CSS export function works well – but it isn’t the dream solution we’ve all been
waiting for. With a few kinks left to iron out it’s up to the third-party plugins to offer a neat and
efficient way to get our styles from canvas to browser
CSS3Ps CSS HAT

css3ps.com csshat.com
CSS3Ps is a totally free Photoshop plugin that’s been around since long Unlike CSS3Ps, CSS Hat will set you back $30. Still, for the additional features
before the built-in PS to CSS3 functionality. With the extension installed, the and lack of ads, the price is worth it. CSS Hat has the ability to export in
functionality all sits inside a neat little window. All you have to do is select a multiple formats, including LESS, SASS and SCSS. You can also toggle a variety
layer group and then click the CSS3Ps logo to start the process. of other features, like comment explanations, browser prefixes, whether the
Due to the nature of the software being free, you’re forced to wait 20 code gets wrapped in a rule named after the layer and layer dimensions.
seconds and look at an ad, but that’s a small price to pay for such great Exporting with CSS Hat isn’t quite as simple as CSS3Ps, as it doesn’t support
functionality. CSS3Ps takes you to a page with your code, ready to copy and layer groups. This means you’ll have to export each layer separately. Other
paste. Something to note is that this plugin ignores positioning, so you’ll need than that, the process is simple and intuitive and the versatility of this plugin is
to fix that later. a huge advantage.

Working with type Alternative
options
T
ypography has always been something of a
problem for Photoshop. Font rendering has
never been the software’s strong suit and this
can become a problem when you’re designing for
the web.
There’s more and more emphasis, these days,
on typography for the web. With print designers
moving into the digital world en masse, a new
importance has been placed on type and fonts in
web design. Photoshop has always struggled with
rendering fonts and its Type tool is clunky and With Typekit’s desktop functionality, you can use the exact
leaves much to be desired. same fonts in your mockups as you’ll be using in your final
page designs online
The biggest problem is that, with new web- ADOBE ILLUSTRATOR
font-only subscriptions, you can’t see what the If you’re a CC user you will also have access to adobe.com/uk/products/illustrator
fonts will look like when you’re mocking up Typekit, Adobe’s own take on the web font library. Recently, Adobe’s Illustrator has become
designs in Photoshop. There’s nothing worse With Typekit you can download a set number of more powerful and now features many of
than getting a design to the web and realising fonts through CC to be used with your apps. This the tools and effects we’re used to seeing
your chosen font clashes horribly with the design. means you can access your Typekit fonts with in Photoshop. With layer effects and some
Web Font Plug-in from Extensis goes a long way ease, since they sit in Photoshop’s font window – powerful type and drawing tools there
in solving this issue, by allowing designers to use so you are able to test out firm favourites such as isn’t much Illustrator can’t do. It can also
Google Fonts in their PSDs. Proxima Nova and Bree in your static designs. be more useful than Photoshop when it
comes to sketching out early designs.
“ There’s more emphasis on typography for PRO: More fluid workflow and working
the web than ever, these days” completely in vectors mean that the
process can be quicker and easier.
Creating and CON: There’s no endless list of third-party

plugins to make your life a little easier like
there is with Photoshop.
exporting assets
L
et’s not forget that Photoshop will always be
essential for some tasks, like creating icons,
banners and images. But when the code can’t
cut it, what are the best ways for you to get your
assets online?
Even with all these tools and tips for effectively
combining Photoshop and code, there will always
be jobs that CSS and HTML can’t handle. If you
need to create any kind of bitmap image or
SKETCH
bohemiancoding.com/sketch
element, Photoshop will always be the fallback.
Sketch is a beautiful, lightweight and very
You can continue creating designs in Photoshop
Slicy is a powerful tool for exporting elements, with built-in powerful design app. The Mac-only
as usual but remember that, although you’ll be
retina-scaling features – best of all, it’s free software began as a drawing package but
exporting assets in bitmap format, you should
was quickly adopted by web and UI
utilise the vector tools as much as possible so that vector designs. Cut&Slice me is a free plugin that
designers due to its flexibility and feature
revising designs isn’t a hassle. will export your assets from Photoshop and make
list. It allows for PNG and CSS asset exports
Slicing up designs with Adobe’s ‘Save for Web’ them ready for use on all kinds of devices.
and on-the-fly previews for all iOS devices.
option has always been long-winded. These days It also never hurts to have some extra tips on
there are plenty of options for getting your raster hand for best practice. Make sure you have a
PRO: Predetermined UI element styles
assets into the browser, quickly and efficiently. look at bjango.com/articles/actions – this list
make creating buttons and sliders easy.s
Slicy from Macrabbit (macrabbit.com/slicy) is an of Photoshop actions, put together by the good
app that exports layer groups as independent people at bjango, will save you countless hours
CON: It can be hard to get used to Sketch’s
files, giving you the freedom to move, hide and when creating and exporting images and artwork
tools and interface after years of Adobe.
overlap elements. It also offers retina scaling on from Photoshop.

Create great backgrounds

for your website
Create a rich, original image that tiles perfectly in Photoshop
B
ackground images are an essential part of the era. ‘Vintage’ suggests age, refinement, We’ll weather and age our design to help create a
designing a website, so being able to create sophistication and experience. time-worn look and save it in a format that will work
a tiled image – one that repeats without In this tutorial we’re going to create a classic on the web. If you don’t fancy using a sketched
seams – is especially important. After all you don’t fleur-de-lys in Photoshop. We’ll start from a sketch fleur-de-lys, we explore ways to use Photoshop
know how long your pages will be. and work this up into a fantastic vintage wallpaper custom shapes to create simple and easy-to-use
We can find inspiration all around us for repeat tile, which will repeat perfectly for use on a website. patterns that will suit your website.
patterns, whether it’s a bee’s honeycomb, parquet
flooring or some vintage wallpaper. While it’s true
to say that styles and fashions come and go, often “We find pattern inspiration all around us –
at an alarming rate, there are those that are always
fashionable – timeless designs that work whatever from honeycombs to parquet flooring”

01 Do your research 02 Sketch and scan 03 New CS6 Pen Shape tool
It really is worthwhile doing your research and Sketch out your design elements on a sheet We’ll use the Pen tool set to Shapes to create
getting some real-world reference material. You of paper. Scan it to your computer, opening an outline in CS6. The new Stroke Shape Tool
can go to the library and get a book of interior your image file in Photoshop. If you’d like to Options are an ideal replacement for paths. Set
design, visit your local wallpaper shop, or take incorporate elements from two sketches into one stroke width to 1px then click to create and click
the easy option and use a search engine to find final design, that’s also fine: identify which part again further along the same edge to create
images of the motif you have in mind. you want to start drawing first and zoom in close. another. A straight line is drawn between points.
04 Create curves lines 05 Finish paths 06 Fill each path

To create a curved line, hold the mouse button We made a total of ten paths, setting Stroke to no Filling your Paths is super-easy with the new
after clicking, then drag to either side. Work your colour, Fill to black – one for each of the top and Shape Tool Options. All you need to do is activate
way around the motif, adding points, until you bottom petals, three for the central bands, and your Path Shape layer and set Stroke to No
can click on the original point. Now we want to one for the central flourish. Now we have to start Colour. Activate the Fill options and set colour to
move on and fill our selection. filling in our Path Shapes. black, making your Path Shape solid.
07 Use Custom shapes 08 Add layer styles 09 Merge and collaborate

As always, Photoshop provides you with even fast Choose a layer and select Layer>Layer Turn off any background layers, then select
ways to create shapes. Press U and select Custom Style>Gradient Overlay. Choose Copper. Tick the Merge Visible from the Layer panel pop-out
Shapes from the Tool Bar menu. You’ll find a boxes for Bevel & Emboss and Texture, then play menu. Using the Burn tool, burn shadows across
Fleur-de-lys shape preset in the default options. with the settings. Right-click on the layer in the the motif for a lightly distressed look. Add a Hue/
You can combine this with other preset shape Layers panel and choose Copy Layer Style. Right- Saturation adjustment layer and reduce the
options to create your own design. click and paste the layer style onto each layer. copper to silver by de-saturating the image.

10 Lay out the pattern 11 Add texture 12 Add extra distress

Reduce the size of your design accordingly, then Desaturate your pattern. Set a blue foreground, Download a free concrete texture from www.
make a selection of it and choose Image>Define darker blue background. Activate the background bittbox.com/freebies/free-texture-tuesday-
Pattern. Now File>New and set a canvas size layer. Select Filter>Render>Clouds. Duplicate concrete/ and add it to your image. Set it to
that’s 1800px square. Press Shift+F5 and set Use and place at the top of the layer. Set blending blend using Darker Color and reduce the opacity
to Patterns, setting custom pattern with your mode to Exclusion. Put a copy at the top; to 20% so that there’s some general additional
shape. Set Script to Brick Fill and click OK. Filter>Render>Fibers, blending mode Overlay. distress to your image.
15 Save for the web

We’ll use Photoshop’s ‘Save for Web and Devices’
function to output a web-ready version of our
artwork. Choose File>Save for Web & Devices
13 Create an offset 14 Offset, tweak and save and select Medium JPG – it’ll work well for the
Merge all visible layers into a single one, then Your image will now tile perfectly. Add a Curves subtlety of texture we’ve created. Save the image
choose Filter>Other>Offset. Enter values of Adjustment layer and Hue/Saturation Adjustment with a name with no spaces, eg ‘background.jpg’.
900px for both Horizontal and Vertical; this is half layer to increase contrast and recolour the
the canvas size. You’ll probably see a slight seam artwork if desired, to suit your website. Save your
across the middle of your image. Use the Clone document as a PSD file to ensure you retain the
Stamp tool to blur this seam. original source material for later reuse!
18 Other properties
Your image will need to be in the same folder as
your style sheet. You can set the position of your
repeating image using the background-position
property, how it repeats using background-
repeat, and a fallback colour to be used using
16 Use your image 17 Import your image background-color.
Once you’ve successfully saved your image, it’s Adding a background image to your website 001 body {
time to use it on your website. To do this you’ll using CSS is very simple. First you define the 002 background-color: #ccc;
need to have a webpage lined up and ready to element you’d like to create the CSS rule for – 003 background-image: url(background.jpg);
go, with a CSS stylesheet and an element you’re this is achieved by naming the element either 004 background-repeat: repeat;
going to apply your repeating background to. through its tag name, class or ID. Next, add a rule
If you haven’t already got these in place, come for background-image and specify the image 005 background-position: top left;
back to this section later on! you’d like to use as a background. 006 }

Repeating Add grunge
We’ve used a concrete texture to add
Curver for content
We’ve used a curve adjustment to increase
background images extra grunge and character to our

background tile. This is the antithesis of
the modern, clean web look, but it’s often
the contrast of our design. Our curve has
an S shape which darkens the dark pixels
and lightens the light pixels to create more
See how we constructed our good to go your own way and avoid dynamics in our image
repeating background image following fashions on the web – especially
if you want your site to stand out!
Adjust hue and saturation

Save as a JPEG The colours have been adjusted before we saved
Because our image has lots of colours and fine our image using a Hue/Saturation adjustment
textures, a JPEG file is the best format to use for layer. This allows us to control the overall colour
this particular background tile. We’ve created balance without having to manually alter each
quite a large tile, but you could have used just two layer individually, and allows for experimentation!
motifs arranged diagonally to get a similar effect
Repeating backgrounds The background tile is a great web design tool

Because you never quite know in advance how long a typical webpage may be, it’s to incorporate into your website design, it’s worth having a look at what other
often very useful to be able to create a background that is capable of scaling to fill websites are doing. A combination of a partially transparent image (saved as a
the space, no matter how big or small that space is. This is why repeating background PNG file for variable transparency) and a background colour set to use a CSS3
tiles are such a mainstay of web design – they can be quite small but cover a large gradient can give the impression of an image that’s much bigger than it really is.
area of screen without the need to create a different version of your background for CSS3 also allows you to apply more than one background image per element,
each page. The offset filter in Photoshop makes it easy to check that your image tiles opening up a whole series of possibilities that didn’t even exist until quite recently.
perfectly, and correct any issues if it doesn’t. When trying to decide on a background Don't be afraid to experiment till you find something that works best for you.

Design effective header and

footer graphics in Photoshop
Make your website memorable with a custom header and footer
H
ave you ever browsed the web and come Of course this can present a challenge, especially use in this tutorial will work with many different
across a website that has a really beautiful if you feel you’re lacking inspiration, artistic ability, types of subject matter, so follow the steps below
header? Do you wish you had something or both. Fortunately, you don’t really need either! and then apply the principles to your own project.
equally stunning sitting at the top of your website? Some basic Photoshop techniques can be used Once you’ve created your header, you can do the
Having a unique, memorable identity on the web to take a very simple concept and make it into same for the footer of your design too, creating an
can be the difference between a user remembering something really special. The same techniques we integrated, consistent design.
your site and the same user instantly forgetting it.
The most important rule on the web is to ensure
your site has great content that compels return “Some basic Photoshop techniques can be
visits, but, given the choice, most people would also
like their site to look nice. used to make something really special”

01 Create a document 02 Create the base colour 03 Organise your layers
Create a new Photoshop document. If you have We need to create a base colour to work over. In Fill the layer with the colour you’ve just selected
a recent version, choose one of the web presets; this tutorial we’re creating a graphic that includes by using the Paintbucket tool (or use Alt+Delete
if not, choose a document size of 1280x1024px at planets and stars, so it makes sense to choose a on a PC, Option+Backspace on a Mac). Let’s name
72dpi and a transparent background. If you create dark background base colour. Double-click on the our layers appropriately. Click twice on the name
a document with a background layer, double- foreground colour well on the toolbar and select of the layer you’ve just filled, then type ‘Page
click on this to convert it to a normal layer. a dark blue. We’ve used #070520. Background’ over the existing name.
04 Add the content area 05 Align your content 06 Create a glow

Select the Rectangular Marquee tool and change We want our content area to be centred. Select Duplicate the content layer and select Layer>
the style to ‘fixed size’. Enter a width of 720px and both layers by clicking on one, then Shift-clicking Layer Style>Outer Glow. Set the colour to white,
a height of 900px. Click once near the bottom on the other, then use Layer>Align>Horizontal spread 8% and size 13px. Click OK, make the
of the document to create a selection. On a new Centers. This will position your 720px content other content layer invisible and set Fill to 0% for
layer, fill this selection with white. area perfectly in the centre of the design. this layer. This should leave only the glow visible.
07 Create a planet 08 Add shading 09 Merge and blur

Create a new layer, 'Big Planet’. Select an orange The planet needs shading. With the selection still Select the planet layer and the shading layer,
for the foreground colour, dark red for the active (if you lost your selection just Ctrl/Cmd- then, using the fly-out menu at the top right
background. Using the Circular Marquee tool click on the planet layer), create a new layer and corner of the Layers panel, select 'Merge layers'
with Shift held down, draw a big circle then use the Gradient tool to fill the selection with a to convert these two layers into one. Add a small
Filter>Render>Clouds. (Hold Alt/Option when radial gradient from orange to black. Set the layer blur: Filter>Blur>Gaussian Blur. Enter a value of
selecting this to get a higher-contrast result). to use Multiply as the blending mode. 1.3px and click OK.

Using
Photoshop’s
brush engine
Using brushes in Photoshop,
you can achieve a wide
variety of effects
Photoshop comes with a variety of brushes
built in. Selecting the Brush tool opens up a
range of options in the toolbar, allowing you to 11 Copy and recolour
choose style, size and hardness. You might be 10 Give it a glow Let’s quickly create a second, smaller planet.
forgiven for thinking that this is the beginning It would be nice to have a light-distorting Make sure you have the planet layer selected,
and end of brushes in Photoshop, but there’s
atmosphere on the planet, so let’s add another then select Layer>Duplicate Layer. Select Edit>
so much more.
For starters, the set of brushes that appears outer glow to simulate this. Select Layer>Layer Transform>Scale and reduce the size. Finally,
by default is only one of many sets Adobe Style>Outer Glow. Choose a bright cyan as the choose Image>Adjustments>Hue/Saturation and
thoughtfully provides. To load other brush colour, and set the blending mode to Colour tick Colorize. Play with the settings to find a nice
sets, click on the flyout menu when selecting a Dodge. Play with the other settings to suit. result that suits.
brush style. You’ll see a whole bunch of brush
sets just waiting for you to activate. Choose
one you like the sound of and Photoshop will
ask you if you’d like to append or replace the
current brush set. Appending simply adds the
new brushes you’re loading to the existing set.
If you’d rather keep it clean, replace the set and
you’ll just have the set you last loaded.
In addition, you can download and load in
whole new brush sets from the web. A quick
internet search for ‘free Photoshop brushes’
yields thousands of results. Every kind of brush
you can imagine can be found, ranging from
simple shapes to entire illustrations in a brush.
To install, simply download the brush set of
your choice, then click Load Brushes from the 13 Bring the rainbow into
Brush flyout menu. 12 Create a rainbow your scene
Create a new document at 1024x1024px, 72dpi In the rainbow file, select Edit>Copy Merged
and transparent. Select the Gradient tool and, (shortcut: Shift+Ctrl/Cmd+C), then return to the
from the tool presets, choose Transparent main document. Select Edit>Paste (shortcut: Ctrl/
Rainbow. Draw a linear gradient top to bottom, Cmd+V). Add a layer mask to the rainbow layer,
covering the middle third of the canvas. Select and draw a black to white gradient onto the mask
Filter>Distort>Polar Coordinates. Ensure to hide the left-hand side of the rainbow. Position
‘Rectangular to polar’ is selected and click OK. the layer to the right of the canvas.
14 Add a lens flare 15 Add stars to the space

We’ll simulate a bright sun appearing behind Add stars to a new layer. Select a foreground
the planet. Duplicate the Page Background layer. colour of white. Using the Gradient tool set to
With the duplicate selected, Filter>Render>Lens use a radial foreground-to-transparent gradient,
Flare. Click on top left of filter preview window to draw small overlapping gradients covering the
set flare position, then click OK. You can use the top third of the canvas. You can always add more
Eraser tool to remove unwanted bits of flare. later, so don’t overdo your gradients.

Creating our custom Shooting stars
The shooting stars effect is achieved Rainbow a go-go
header design using a stroked path with simulated
pressure. The brush is set to use a scatter
effect so that the individual elements
The rainbow effect is created using
a simple gradient and the polar
co-ordinated filter inside Photoshop.
After creating basic planets, we use look like a meteor or comet trail. We’ve This, when combined with the
various effects and techniques for added an outer glow layer style to stars, planets and tentacles, helps to
the design complete the look create a coherent whole design
Planets
The planets were
created using
nothing more
sophisticated than
the Cloud filter and
a circular selection.
Shading helps to
create a sense of
mass, and an outer
glow layer style
ensures that the
planet fits into the
scene nicely
Fancy tentacles
of colour
The tentacles of
colour have been
created using
a stroked path,
with simulated
pressure. Each
colour is chosen
from the rainbow
to complement
and set off
against the other
elements nicely
16 Set the stars free 17 Create an aurora 18 Add streaks of light

With your gradients in place, it doesn’t quite Create a new layer and set the blending mode to Create a new layer; foreground colour magenta.
resemble a star field. To get the star effect, Colour Dodge. Using the Gradient tool, again set In Brush tool, select a small round brush. Select
change the layer’s blending mode to ‘Dissolve’. to foreground-to-transparent, draw magenta and Pen tool. Create a curved path by clicking and
This gives an instant star effect, but there are cyan gradients around the top third of the canvas dragging in three positions. Select Paths panel,
way too many stars. Reduce the number by to create a nice aurora effect. You can adjust the right-click on work path and select Stroke Path.
adjusting both the layer’s opacity and fill values opacity of the layer to control the amount of Ensure Simulate Pressure is checked. Repeat with
to something around 5% for each. aurora visible. different brushes to complete the effect.

Customise your site
158
146 The perception of colour Hover
Understand how colours impact your site effects
152 Make a CSS expanding
navigation menu
Build a dynamic navigation menu
156 Create CSS animated

background text
Make a feature of your text by animating it
158 Make image hover effects

Use your images to full effect
160 Animate a strike-through

text effect
As seen on mclarenagency.com
162 Add a shopping cart WHAT YOU’LL LEARN

Monetise your site by enabling payment Although by now you’ll have learned lots of
code and designed lots of graphics, there are still
plenty of things you can do to make your site
164 Create email newsletters and special. In this section you’ll learn how to create
let people subscribe your first script, add social-network interaction,
A more efficient way to reach your fans maps and videos to your pages, as well as how to
create newsletter forms to capture contact details
data to target interested parties with emails.
166 Add social media buttons
Promote your site with social buttons
168 Add Twitter Cards to your site

Display real-time Twitter updates
146
Perfect
”Making your palette
site respond to
different devices
is more important
than ever”
156
Animate
text

EMAIL
NEWSLETTERS
Get in touch with your visitors
with a newsletter
SOCIAL MEDIA
BUTTONS
Use Facebook, Google+,
Pinterest & Twitter

Customise your site
THE PERCEPTION
OF COLOUR HOW DO TINT, TONE AND SHADE INFLUENCE THE USER
EXPERIENCE? FIND OUT HOW TO USE THE BEST COLOUR
PALETTE IN YOUR SITE DESIGNS TO ENGAGE YOUR AUDIENCE

Why colour be purple? Or that green no longer meant ‘go’
at traffic lights?
We know blue is cold and red is hot. No other “ Colour defines the
personality of a design. It’s
more powerful than shapes,
matters message is needed; colour gives us all the
information we need, which is true of most
places in the world. So, in many cases, colour
symbols and words. It’s
totally subjective, so know
If asked, “Why does colour matter?”, the most transcends language as a tool for communication. your audience. Be single-
obvious answer would be, “Because if the And beyond its functional uses, colour affects minded, own a
world was black and white, it would be a moods: different hues evoke different emotions.
boring place”. This has been shown by research conducted by
simple colour
palette and be
”
Colour matters for many reasons. Familiarity, is governments, brands and designers that reveals
one. We know bananas are yellow, the sky is blue the effects different colours have on people. remembered
and the grass is green, and if that changed it Most simply, colour brings meaning to life.
would throw us. In nature, such changes aren’t When something has colour, it acquires its own MARK SEPHTON,
likely, but what if overnight someone decided unique style. Just by being a certain colour, an CREATIVE DIRECTOR
that hot taps should be pink and cold taps should object forms an idea in people’s minds. WWW.MARKSEPHTON.CO.UK
How colour works on the web

In the golden age of the web that we’re
experiencing now, we’re spoiled for choice
when it comes to colour. There are more options How to
available to us than we can physically determine
(16,777,216 to be precise) and it’s all too easy to
use colour
forget that, once upon a time, a mere 216 colours Bevisionare.com is an
had to suffice. This is owing to the fact that example of where colour in
computers themselves only supported 256 digital art does the talking,
colours, and in order to create a standardised while the navigational
method for displaying colour, this handful of just elements are kept in simple
216 were selected. But despite today’s increase to monochrome. The natural
over 16 million, the principle for creating and hues create an earthy
displaying colours on the web remains the same warmth when combined
as it has always been – through a mix of just three with the softly rounded
basic colours: red, green and blue. Each has 256 shapes. The style of the
shades that can be combined together to form illustrations do not
virtually any colour you could possibly imagine or immediately grab your
visibly recognise. attention but do give a real
Web colours are described through the humble sense of humour.
Hexadecimal value - effectively a three part
algorithm made from varying intensities of Red (R),
Green (G) and Blue (B) values, starting with the
absence of all colour, black (or 00), to the presence
of all colour, white (or FF).
How not to
Before you get carried away and start dipping use colour
your paintbrush into those 16 million colours, be Just because 16 million
mindful of the fact that all screens can, and will, colours exist, it doesn’t
display differently. This is particularly relevant as mean you should use all of
we enter the omnichannel age of web access via them! While designed
tablets, phones and TVs. Never is the reality of this purposely to attract
disparity felt more keenly than when you design a attention as a joke,
beautiful web concept on a 24-inch cinema lingscars.com is still a
display, only for the appearance to be wildly perfect example of how not
different when displayed on a client’s four-year-old to use colour. Check out the
Toughbook! Put simply, the more far out the horrendous neon glows, the
colour you use, the higher the chance of it very distracting bold paisley
displaying poorly. Neons, for example, may not background and the jarring
‘pop’ as much, or delicate shades of cream or grey reds and oranges in the
may not show at all. So always test on several middle of the page.
types of screen before signing anything off.

Customise your site
What colours mean

What associations are connected to different colours? They can go from personal preference to
becoming a symbolic representation that gets embedded as a cultural norm...
Colour psychology has long been the source of much debate, but colour will vary vastly, depending on personal experience. So while you can’t
attempting to label colours with specific meanings or emotions is rather guarantee it will have the desired effect on a viewer’s reception, clever colour
like trying to classify what effects different flavours have on us. It’s choice can – according to research – boost your chances of evoking
personal opinion, and each individual’s understandings and perceptions of particular associations in the viewer’s mind.
GREEN BLACK
ENVIRONMENTAL, FRESH, HONEST SOPHISTICATED, POWERFUL, DEATHLY
It’s been found that people relate better In western culture, black has traditionally
to colours that resemble those that they been associated with despair, decay, death
experience naturally. Green represents the and mourning, but it also has strong links
earth, nature, growth and honesty. In China, with power and authority. Black is also used to
green is the symbol of health and prosperity. It’s convey messages of sophistication, luxury and
also widely recognised as the colour for envy. even elegance.
% of males that state green as their favourite colour: 14% % of males that state black as their favourite colour: 9%
% of females that state green as their favourite colour: 14% % of females that state black as their favourite colour: 6%
YELLOW WHITE
BOLD, DISCOUNT, OPTIMISTIC INNOCENT, PURE, CLEAN
Interestingly, while we generally tend to Technically not a colour, white is in fact the
associate yellow with bright, bold and fun, presence of all colour. We associate it with clean
some studies have found most people associate slates, freshness, new beginnings, positive
yellow (along with orange) with cheap and energy and life. It can turn confusion into clarity,
inexpensive attributes. They also ranked it as but too much white can also bring a sense of
one of their least favourite colours. empty isolation and coldness.
% of males that state yellow as their favourite colour: 1% % of males that state white as their favourite colour: 2%
% of females that state yellow as their favourite colour: 3% % of females that state white as their favourite colour: 1%
RED BLUE
PASSION, WARMTH, AGGRESSION COOL, CALM, RELIABLE
Red shares a similarity with black but has Through its association with uniform and
conflicting connotations. We consider red to royalty, blue also delivers a sense of trust and
be the colour of the heart, relating to love, authority. Many of the largest corporations (IBM,
emotion and safety, but on the flip side, red also Barclays, Facebook) use blue for this reason. But
symbolises warnings such as ‘danger’ and ‘stop’ using blue filters in film can create a cold and
and the display of rage. isolated feeling.
% of males that state red as their favourite colour: 7% % of males that state blue as their favourite colour: 57%
% of females that state red as their favourite colour: 9% % of females that state blue as their favourite colour: 35%
Source: Joe Hallock (2003), Colour Assignment.
Cultural differences
HSBC ran a TV advert a couple years back that the royals, or more specifically: the king. In
explained that red signifies good luck and Belgium, baby girls wear blue and baby boys
weddings in China, whereas white represents wear pink, which is unlike what we are used to
death and mourning. This contrasts with our here. If we think of fertility, freshness and
own country, where white is often the bridal springtime in the Western hemisphere, we
theme colour and death is represented at the think of the colour green. The opposite is true
other end of the spectrum by black. in South America though, where the dense
Cultural variations of colour connotations green rainforests make the locals think of
don’t stop there. Yellow in the UK draws up death. Green is forbidden altogether in parts
images of supermarket price reductions. of Indonesia; a ban rooted in local culture and
However, in Thailand yellow is the colour of a myth about the wrath of a sea goddess.

Building a brand
Most people judge based on colour, which makes colour selection vital
in building a successful brand identity
Who owns red? Who owns orange? Who owns purple? Reaching a stage Let’s look at easyJet, which is a great example thanks to its easily
where your brand is recognised through colour alone is a testament to how recognisable branding. They arrived and turned the air travel industry upside
effective a marketing tool it is. down with their no-frills cheaper way to fly. It was a simplistic, bold move,
But there’s more to colour selection than something that looks nice on and they needed a bold colour to convey their message of value and
packaging, TV adverts and magazines. Finding the right colour is not an easy efficiency – who else could step up to handle a task other than bright
task and is something of an art form for many brands – not to mention a orange? Before long, orange became more representative of easyJet than
major commitment. any other brand using orange – including Orange themselves.
The easyJet brand uses a powerful orange Orange is now intrinsically linked to the brand
Why is Facebook blue?

Twitter, Tumblr, LinkedIn, Skype and WordPress all have varying shades of blue as their primary
colour. But did they jump on Facebook’s bandwagon or is there something more?
In a study conducted in the Fourties by Faber seem a logical choice. So with a bit of research it
Birren and again in 2003 by Joe Hallock, which would have almost been a no-brainer for the
explored the perception of colour, some company to choose a colour that attracted and
interesting correlations arose surrounding why appealed to as many people as possible.
certain colours in branding evoke particular But what is it about blue that people love?
feelings and associations better than others. Again, the results of the survey speak for
The results begin to explain why brands select themselves. Answers to the questions “what
the colours they do. colour do you associate with high quality, trust,
The most surprising result was that both men security, reliability/dependency and courage/
and women voted blue as their favourite colour. bravery?” were all met with blue on top. When
It wasn’t by some small margin either, as 35 per you think about it, what brand wouldn’t want this
cent of all females surveyed would choose blue type of association? So it would seem that while
over any other colour, followed by purple at 23 not terribly original, blue statistically has a solid
per cent. However 57 per cent of men cited blue purpose for its ubiquity among some of the
as their favourite colour with the next choice world’s most successful brands.
“
being green at 14 per cent.
Looking at how this breaks down into age,
blue appeared top of all ages surveyed, with
had a preference for brighter, longer-wave
colours (red, orange, yellow).
While not original,
people in their twenties, thirties, fourties and If we look at Facebook’s demographic, which blue statistically serves
fifties all choosing hues with shorter wave has roughly a 60 to 40 ratio leaning to a female a solid purpose thanks
”
lengths (blue, green, purple) compared to audience, and an average age of 40, finding a
younger audiences (those 19 and under) who colour popular among the typical user would to its ubiquity
Customise your site
Pick the perfect palette

If you’re in the fortunate position where no brand guidelines are determining the colours for your next
piece of work, here’s a selection of palettes to get the grey matter whirring
RED OR DEAD NINETIES NEONS

Red is one of the hardest colours to work with, but can also be one of Hot right now with the resurgence of Nineties fashion, neon colours are
the most memorable when done correctly. Coca-Cola are a testament to steadily finding their way back into designers’ palettes. Use of clashing
that. Think carefully before selecting red for your designs though, and electric blues and sunglass-inducing-pinks are the order of the day. It’s
consider specifically a style that screams
what type of red. young, fun, vibrancy
Try it out on several and life, but despite
types of screen. the playful nature,
It’s not the easiest these colours still
colour to work with require careful
in print, nor read selection to ensure
from, but if done your design doesn’t
well it can create a end up looking like a
look of high energy gunge tank from Pat
and excitement. Sharp’s Fun House.
PRIMARY’S COOL... THE BLUES

When handled with care and consideration, the vibrancy of the primary As we have discovered, blue is widely considered the most popular
colours – red, blue and yellow – can create an impactful and powerful colour in the world according to research. You may therefore be torn
look. Think Google and ebay for great examples of where this has between siding with its popularity or dismissing it as overused – but
worked well. The you can still make
bright, contrasting it unique. Start
colours mean by exploring the
everything else has varying shades for
to be kept simple, so a sense of calm and
go minimal. Clean depth and don’t
lines and bold, sans always opt for the
serif, geometric corporate hues;
typefaces create try turquoise, sky
a stylish feel and blue and navy for a
sense of humour. modern take.
BLACK AND WHITE

The classic. Love it or hate it, you know where
you are with it. Though be warned, once you
get heavily into using monochrome it’s hard to
pair it with other colours without spoiling the
minimalist feel. Generally, when using black and
white you should ensure that you introduce
colour through imagery. Use large, bold photos
so the design of the website becomes a mere
hanger for the content. And when you do select
the right colour, the page will really ‘pop’.
“ Clean lines and

bold, sans serif,
geometric typefaces

create a stylish feel
”
PANTONE’S TREND FORECASTING
Tools you can trust Pantone, the long-time kings of colour, bring
you their colour-based predictions for the year
Never feel a new colour palette has to just magically appear in your ahead. Broken down into categories for use,
mind - get out there to gain inspiration for new ideas gender, country and more, they make it easy to
determine the right colour for your audience
ADOBE KULER at any one time, but you can explore the most and you can even trace the sources of influence.
Over the years, the designer’s sidekick, Kuler popular palettes and find inspiration.
(pronounced ‘colour’), has gone from behemoth The beauty of using the Kuler app is the
flash website to nimble HTML5 application, variety and intensity of colour that it can
plugging directly into various Adobe desktop provide. If you are on the lookout for a palette
apps. A crowd-sourced platform for thousands that will provide a winning collection of colours,
of colour palettes searchable by phrase, it also this is undoubtedly a tool you need in your
provides a wide variety of options (or “Color creative arsenal. What’s more, it gets guaranteed
Rule”) for creating your own unique palette. results, with the added bonus of being really
There may only be five colours to choose from simple to use.
COLOURZILLA COLOUR PICKER

ColourZilla is invaluable for not only poaching
colour ideas, but also for checking designs
against build. This browser plugin allows you to
simply pick any colour rendered in the page just
by clicking and dropping.
Colour trends to follow What next?

Just because they’re in, doesn’t mean they’re right. Or does it? It’s impossible to predict exactly where
Just as trends in design come and go, colours do moment. It’s in all magazines, adverts, even cars colour trends will go next. It’s like stocks
the same, albeit less frequently. You’ll always have are being sprayed in it. Now if you were asked to and shares: the market could go one way
the classics: black and white, blue and grey, green design a flyer for a club night, you’d be wise or another. The most important thing to
and yellow and so on. Depending on the considering this as an option. Propose that same remember is, as a designer, to remain open
application, good design shouldn’t really follow a fluorescent pink to a client who runs an exclusive to possibilities. Don’t constrict yourself to
trend but be based on suitability for purpose. private wealth fund, however, and suddenly you’ll any specific style purely because you like it.
Always think beyond the current fad,
Let’s suggest fluorescent pink is the colour of the end up looking considerably less smart.
research who you’re communicating with
and consider the purpose.
Recent colour trends
Making predictions on what is going to be the
next big colour is a precarious business. But, it is
the business that Pantone are in. Every year they
predict the next big colour. In one sense they
are not predicting but suggesting a colour that
designers should be using. For example, the
Pantone Colour of the Year for 2014 was Radiant
Orchid. This is a shade of purple/lilac that has yet
to permeate the world of web design. But, Pantone’s colour for 2015 is Marsala
Pantone’s colour for 2014 was Radiant Orchid remember colour can be subjective too.

Customise your site
Make a CSS expanding

navigation menu
Create a space saving menu for all screens with the help of CSS and Font Awesome
N
avigation menus are vital to the success of any website. The bars) is quickly becoming known as something that ‘should’ be clicked on.
navigation menu on a website is like a road sign on a street or a level To help us develop this menu, we’re also going to be using Font Awesome,
directory in a shopping centre. You can’t decide on your destination which is an iconic font, and CSS toolkit, and we will be adding some vector
without knowing all of the options available to you, and reaching that icons to each menu button. So let’s get started on our expanding navigation
destination would be impossible without first knowing where you are. Just like menu by following these easy steps!
in real life, navigation in web design is very important and plays a major role in
a website’s usability, as well as in the user experience.
Nowadays you can see plenty of different types of navigation menus with
“Navigation plays a major role in
interesting, creative and unusual designs. In this tutorial, we will look at how
we can develop a simple and clean navigation menu. The menu will expand a website’s usability as well
horizontally and, when closed, will be tucked neatly away, with just the
popular Navicon icon showing. This icon (which is three horizontal or vertical as user experience”
With all the HTML completed, all we can see is a typical, boring and unordered list With the Font Awesome CSS imported, we can see what the icons look like with the text
We’ve now added the CSS reset and set the background colour to make sure the text stands out Everything is now hidden, but it saves space and is revealed when we click the Navicon

004 <li><i class="fa fa-home"></i></li> 018 <a href="#">
01 Use Font Awesome 005 <li><span>home</span></li> 019 <ul>
Throughout this tutorial we’ll be using Font
006 </ul> 020 <li><i class="fa fa-send"></i></li>
Awesome’s scalable vector icons, which can
007 </a> 021 <li><span>contact</span></li>
instantly be customised using CSS. There are two
008 </li> 022 </ul>
ways to use Font Awesome: you can use their
023 </a>
content delivery network CDN (as shown), or
024 </li>
download the whole file from the home page: 05 The about button 025 </ul>
www.fortawesome.github.io/Font-Awesome, Now, underneath the closing list item of our
026 </nav>
which is what we’re going to do so that we can home button, we’re going to add in another set
027 </div>
take a peek inside the CSS file. of lists and wrap this within an anchor tag. This
028
time we’re going to target a font icon that’s called
001 <link href="//maxcdn.bootstrapcdn. ‘fa-user’, which is a font icon that will be perfect
com/font-awesome/4.2.0/css/font-awesome. for our ‘about’ button. 07 Import Font Awesome
min.css" rel="stylesheet"> Create a new CSS file and open it up within your
001 <li> favourite text editor. If you haven’t already done
002 <a href="#"> so, create a new folder called CSS and put both
02 Create the menu 003 <ul> your new CSS file and the font-awesome.css file
Our first bit of HTML will be a div with five 004 <li><i class="fa fa-user"></i></li> in it. Now we simply import our font-awesome.css
different class names that we’ll use to position 005 <li><span>about</span></li> file using the @import url rule.
and style our menu. Then add in an input field 006 </ul>
and label element which we’ll use to animate the 007 </a> 001 @import url(font-awesome.css);
menu. The first icon font we’ll use is the popular 008 </li> 002
Navicon which has a class name of ‘fa-bars’ as
seen below.
06 Finish off the buttons 08 CSS reset
001 <div class="menu top left horizontal blue"> To finish off our navigation we’re going to add Adding in a reset to our CSS file is standard
002 <input id="slide" name="slide" in another three buttons. We are going to pull practice these days, but we’re going to target
type="checkbox"> in a camera icon font for our portfolio button, a every element by using the asterisk symbol and
003 <label for="slide" class="icon open"> bookmark icon for our blog button and finally a removing all margins, padding and any borders.
004 <i class="fa fa-bars"></i> paper plane icon for our contact button. These It’s not always a good idea to reset every single
005 </label> seem like good icons to use, but feel free to element, but this will do nicely this time for the
006 </div> experiment with other available icons. purposes of this tutorial.
001 <li> 001 * {
03 Menu buttons 002 <a href="#"> 002 margin: 0;
Inside the div that we created in the last step, let’s 003 <ul> 003 padding: 0;
start adding in our menu buttons. We’re going 004 <li><i class="fa fa-camera"></i></li> 004 border: 0;
to use the HTML5 <nav> element, and then give 005 <li><span>portfolio</span></li> 005 }
it a class name of ‘navigation’. Then, within that 006 </ul> 006
element, we need to add an unordered list. We 007 </a>
leave the unordered list empty for now, as we will 008 </li>
fill that in throughout the next few steps. 009 <li> 09 Body styles
010 <a href="#"> Another part of our CSS reset is to specify both
001 <nav class="navigation"> the ‘html’ and ‘body’ elements as 100% height.
011 <ul>
002 <ul> This will allow our page to stretch to fit the
012 <li><i class="fa fa-bookmark"></i></li>
003 </ul> whole browser window. Lastly, because our
013 <li><span>blog</span></li>
004 </nav> menu will be blue, we’re going to make the page
014 </ul>
005 background dark, which will make our menu pop
015 </a>
016 </li> off the page a bit better than if we were to use
04 The home button 017 <li> white as our background colour.
The next step is to move on to the all-important
001 html,
home button. Within our unordered list,
002 body {
we’re now going to add in our buttons using
a combination of list items and additional CSS combinator ~ 003
004
height: 100%;
}
unordered lists. Adding a class called ‘active’ for In a couple of steps throughout this tutorial we 005 body {
our first list will allow us to use that as a trigger for have used a very handy little selector called 006 background: #1b1b1b;
when we add the CSS for our animation. Then our the CSS general sibling selector. The 007 }
class name is called ‘fa-home’, and this class pulls combinator used to notify it is the tilde
in our icon fonts from the Font Awesome CSS file. character ‘~’, which separates two simple
selectors. The general sibling selector works 10 Menu position
001 <li class="active"> by selecting all of the elements that are Making sure the menu is in a fixed position will
002 <a href=""> siblings of a specified element. prevent vertical scrollbars from popping up.
003 <ul> Then we’re going to use the z index to make sure

Customise your site
this falls above everything else. To give us some 001 .menu input#slide:checked ~ label.open i {
breathing space, we will move the menu down by 002 -webkit-transform: rotate(90deg);
50 pixels. 003 -moz-transform: rotate(90deg);
004 transform: rotate(90deg);
001 .menu { 005
002 position: fixed;
003 z-index: 9999;
004 margin: 50px 0 0 0px; 14 Navicon and button
005 } transitions
With the Navicon rotating as quickly as it does,
11 Hide the menu it isn’t all that easy on the eye, so it will need to
Before we can have any kind of animation be altered. What we really want to do is add a
occurring on the page, we will first need to create little easing to it so that it will have a much nicer, We’ve now spaced out our buttons using margins and have
some space. This can be done by hiding all of our smoother rotation when it’s clicked on. The increased the size of our icons
menu buttons. So, by targeting the nav element, same goes with the menu buttons. Having them
we can set its opacity to zero. Then, you will need suddenly drop down in a blink of an eye isn’t
to make sure the input check box, which will be all that comfortable to look at, so we add some
our Navicon, is clicked. The next step is to set easing to those too.
its opacity to ‘1’ and you will see the menu will
appear underneath right away. 001 .menu label i,
002 .menu nav,
001 .menu nav { 003 .menu nav ul li a span {
002 -webkit-opacity: 0; 004 -webkit-transition: all 0.2s ease-in-out;
003 -moz-opacity: 0; 005 -moz-transition: all 0.2s ease-in-out;
004 opacity: 0; 006 transition: all 0.2s ease-in-out;
005 } 007 }
006 .menu input#slide:checked ~ nav { 008
007 -moz-opacity: 1;
008 -webkit-opacity: 1;
009 opacity: 1; 15 Space out the buttons Here we used the Google Font Lato and then set the size to
16px to boost the style and impact of this design feature
010 } We’ve got the menu buttons and Navicon looking
a lot better now, so let’s add some spacing to our
buttons. Then, once we have the spacing sorted,
12 Label styles we can remove the bullet points. Make sure the
Now we’re going to give our Navicon (the overflow is hidden and then increase the size of
horizontal lines) some default styles. Giving this our font icons to 20 pixels. Having the ability to
a position of ‘fixed’ will pull the icons up into change the size of our icons is what makes Font
alignment with the Navicon. Then we make sure Awesome, awesome!
that this will act like a button by adding in ‘cursor:
pointer’ and we’re going to remove the little 001 .menu label,
checkbox by specifying ‘display: none’ for the 002 .menu nav ul li a i,
input field. 003 .menu nav ul li a span {
004 line-height: 60px;
001 .menu label { 005 text-align: center;
002 position: fixed; 006 width: 60px;
003 font-size: 30px; 007 height: 60px; Now we add some CSS to make the menu go horizontal at the
004 cursor: pointer; 008 } top of the page, which is where visitors expect the navigation
005 z-index: 9999; menu to be
009 .menu nav ul {
006 } 010 list-style: none;
007 .menu input#slide { 011 overflow: hidden;
008 display: none; 012 }
009 } 013 .menu nav ul li a i {
010 014 font-size: 20px;
015 }
13 Navicon rotation 016
When the Navicon is clicked on, we want it
to rotate 90 degrees by using the transform 16 Button text
property. This will make the menu more The next step is to set the styling for our button
appealing as it spins around once clicked on, and text. For this tutorial, we’re going to use a Google
then the menu will slide out from underneath. Font called Lato, but you can experiment with
At the moment though, the rotation is way too any font you want to get the desired aesthetic.
quick, so let’s sort that out in the next step. Next we will set the size to 16px and make sure We’ve now added the background colour to our menu and all
that’s left is the menu buttons background

21 Button colour
In this last step, all we need to do is add some
colour to our menu buttons. What we’re going to
do is reverse the colours so that the background
colour to our buttons is the same colour as our
icons and the text will be the same colour as the
menu background. Lastly, let’s add in a hover
state for our button text with white as the colour
for that.
001 .menu.blue nav ul li a span {

002 background-color: #2980b9;
003 color: #3498db;
004 }
005 .menu.blue nav ul li a span:hover { color:
white;}
22 Final thoughts
The last step is to add a hover state to our button text, and our expanding horizontal menu is now complete You’ll more than likely see plenty of navigation
menus like this, especially now that responsive
003 float: left; webpages are now part of our design workflow.
it’s all in upper-case. Then we’re going to set the 004 } Using vector icons such as Font Awesome will
width to zero. 005 .menu.left.horizontal nav { really help make your navigation menus more
006 margin-left: -50px; easy and fun to develop.
001 .menu nav ul li a span { 007 }
002 font-family: 'Lato', sans-serif;
003 font-size: 16px;
004 text-transform: uppercase; 19 Home button
005 width: 0; At the moment the icon for our home button is
006 } hidden underneath the Navicon. So by adding
007 0 some margins we can push all of our buttons over
to the right slightly so the home icon will appear.
Another feature you will notice is that when you
17 Animate the buttons click on both the Navicon and the home icon, the The @keyframes at-rule
Now this is where things get a little more menu will close.
interesting. We are going to animate the buttons Throughout this tutorial we’ve made good use of
by using padding – this is so that when the 001 .menu.left.horizontal input#slide:checked ~ Font Awesome, a scalable vector icon font and CSS
buttons are hovered over, they will move to the nav { kit. So what are the benefits of using an icon font
right by 10px. Then we need to make sure that 002 margin-left: 60px; instead of images and sprites? The first and best
the active state is set and they are given a width 003 } benefit is that it is just a font. This means that you get
of 100px. 004 .menu.right.horizontal nav { all of the benefits of styling that you would get with
005 margin-right: -50px; regular text. So, for example, you can easily change
001 .menu nav ul li a:hover span { 006 } the colour and size of an icon with a little bit of CSS. It
002 width: 100px; 007 .menu.right.horizontal input#slide:checked ~ will also render as sharp as your device will allow it to,
003 padding: 0 10px; nav { so there’s no need to worry about creating
004 } 008 margin-right: 60px; Retina-ready graphics.
005 .menu nav ul li.active a span { 009 } The other benefit of using Icon Fonts is the
006 width: 100px; performance. Since all of the icons are included in
007 padding: 0 10px; one font file, it means that it is only one HTTP request
008 } 20 Menu colour to load. This can really give you quite a bit of
In the last few steps of this tutorial we are going page-load performance if you are using a number of
to add some colour to both our menu and the
18 Horizontal menu buttons. The first thing to do then is to add a
different icons.
Our main aim in this tutorial is to create a The best way of adding Font Awesome to your
nice light blue to our menu background. Then website is to use the CDN and add that to the head of
horizontal menu, so by targeting the horizontal we will give our icons a different shade of blue,
class we will be able to float the list items to the your HTML file.
which will be slightly darker than our main menu
left, which will fulfil that aim and make the whole background. 001<link href="//maxcdn.bootstrapcdn.
menu horizontal. Then, by adding a negative 50 com/font-awesome/4.2.0/css/font-awesome. min.
pixels to our menu, we can tighten things up a 001 .menu.blue label, css" rel="stylesheet">
little bit. 002 .menu.blue nav ul li a ul li i { The other way is to download the CSS file and link
003 background-color: #3498db; bg that in as you would with a normal CSS file – which is
001 .menu.horizontal nav ul li, 004 color: #2980b9; icons what we did for this tutorial.
002 .menu.horizontal nav ul li a span { 005 }

Customise your site
01 Inspiration
Create CSS animated Talk to me
background text Talk PR is a global communication and public

relations company specialising in brand
marketing and launches, SEO and social media
Use text to deliver a message and as an artistic element of the page management (among many other things).
They boast a very sleek and brilliantly executed
O
ver the last few years a ‘less is more’ become a far more creative endeavour in web website, which features parallax delivery of
aesthetic has taken root in web design design than it has been in many years. Here we will content and a simple but striking landing area.
practice and presentation. At present, explore just one way of turning text into a piece of This landing area contains little more than the
the use of text rather than images to create initial design on your website. Talk PR logo to emphasise the brand, but it is
impact on a website is becoming more and more also made a significant design feature, with
widespread. The old slide shows are being replaced
with bold, stark fonts and plenty of white space. “Typography has an animated background that makes for an
engaging introduction to the site. The Talk
There has also been, however, the re-emergence of
the font as an image in its own right. become a far more PR text feature is created using an animated
GIF background image, which is a simple and
This technique is predominantly being used effective way to achieve the effect. However, in
as an artistic element rather than a simple means
to deliver language and communicate a specific
creative endeavour this tutorial we will create our own text with an
animated background via two distinct methods
textual message. For this reason, typography has in web design” using CSS3.
Background text Menu position

Unusually, the navigation menu for
Let the text do all the talking the Talk PR site appears initially at
the bottom of the landing screen.
It readjusts to the top on scroll for
easier usage
Simplicity
The animated background
text is a striking introduction
to Talk PR’s website and the
landing page’s simplicity is a
brilliant gateway to the site’s
many features
Social media grid

Scroll down to see what
else this great site has to
offer. The responsive grid
layout below, which contains
Talk PR’s social media
updates, is particularly
pleasing and interesting
SIMPLE WORKS
Talk PR’s animated GIF
method for creating the
text background may Clear links Sliding grid links
seem too simple for those Take a look at the impressive list of It’s also worth taking a look
looking to use more modern clients for some smooth scrolling at the blog, from one of the
methods, but it works. It also links from each well-known client front page links. It is another
resizes smoothly within this logo. Some of them are given good example of grid image
responsive website, which colour upon rollover, which then layout for content links that
helps avoid browser issues. link to a page about the client slide into place

Old tricks, new techniques
“There was a time when this effect would have been handled quite adequately in Flash,
03 Technique two
but in the present, HTML5 and CSS3 enable us to replicate old animation tricks without Text-based method
<comment> losing device access or SEO standards. Sometimes the effects don’t change, just the
What our
experts think
method of delivery. This website is one of those sites that could have been built for other This technique looks at an alternative
of the site web designers.” Richard Lamb animation, where the same effect is created
with actual text, rather than a background
image. However, this process uses the webkit-
02 Technique one 006 width:950px;

only property ‘-webkit-background-clip:
text’, which currently only works on webkit-
enabled browsers.
Image-based method 007 height:395px;
008 background:url(wow.png);
01 Create the images
009 } 01 Use a span
010 .inner-wow { Set the wrap to the same dimensions as used
Make two images. The first should be a white 011 width: 100%;
background rectangle (with a width of 950px in the previous technique steps. Discard the
012 padding: 0% 0 41%; wow.png but retain the bg.jpg image. This
and height of 395px), within which there is the 013 }
word “WOW!” in transparency. The second image time, instead of using an image within the
should be a series of background images, each .wow div, we’ll use a simple <span> element.
measuring the same width and height as the text 04 Arrange the background Write your chosen word within it.
image, arranged in one long strip with a width of Declare the bg.jpg image as the background
to the .inner-wow div. Hide the overflow to be 001 <div id="wrap">
4750px. Name them ‘wow.png’ and ‘bg.jpg’. 002 <span>WOW!</span>
safe and then begin declaring your animation
styles for the background. The next step will be 003 </div>
to tweak the duration to suit. Don’t forget to add 004
vendor prefixes for non-webkit browsers. At the
end we will add a relative position and a minus
scale z-index to ensure that the image always 02 The CSS
remains present and correct in the background. Replicate the font, font-size and, if required,
font-weight used for the text image from
the previous method. Use the original
001 .inner-wow {
background image, but this time as the
002 ...
background for the span.
02 The base HTML 003 background: #fff url(bg.jpg) repeat;
The first step of our image-based method 004 overflow: hidden; 001 span {
involves creating the base code into which our 005 -webkit-animation-name: bg; 002 position:absolute;
elements will be placed. Here we are using a 006 -webkit-animation-duration: 35s; 003 font-family: 'Open Sans',
simple wrapper that contains two nested divs: 007 -webkit-animation-iteration-count: infinite; sans-serif;
the .wow div with the text PNG image and 008 -webkit-animation-timing-function: linear; 004 font-size:300px;
the ‘.inner-wow’ div, which with the animated 009 position: relative; 005 font-weight:800;
background image. 010 z-index: -1; 006 background:url(bg.jpg);
011 } 007 }
001 <body> 008
002 <div id="wrap"> 05 Add the keyframes
003 <div class="wow"> Our animation won’t do anything if we don’t
004 <div class="inner-wow"></div> assign the keyframes to it. The particular set we 03 Add properties
005 </div> are using involves a relatively simple animation, Now for the properties – add these and the
006 </body> where the background image slides from right to background-clip and text-fill-colour too,
left and then repeats on an infinite loop. When which enables the background image to
03 The base CSS in place, the background image will continually display within the confines of the span text.
Initially, we are centring our .wow div with pop from one image to the next. Once again, This will, in effect, turn the text into a mask.
automargins and setting a width of 950 pixels to remember to include vendor prefixes. We will replicate the animation from the
match the wrapper div, and a height of 395 pixels. previous method, as well as the keyframes.
This will house the wow.png image. Within this 001 @-webkit-keyframes bg {
div we nest the .inner-wow with 100% width and 002 0% { background-position: 0% 001 span {
the padding values, which enable the div to fill 50%; } 002 ...
the height of the parent div. 003 100% { background-position: 003 -webkit-background-clip: text;
100% 0%; } 004 -webkit-text-fill-color:
001 #wrap { 004 } transparent;
002 margin:100px auto; 005 @-moz-keyframes bg { 005 -webkit-animation: bg 20s
003 width:950px; 006 } linear infinite;
004 } 007 @keyframes bg { 006 }
005 .wow { 008 } 007

Customise your site
Make image hover 01 Inspiration

Artisan branding
effects in CSS Wood Shed Production is an American

company that specialises in hand-crafted art
made from reclaimed wood. They sell their
Use images as interactive elements in your webpage wares in local markets but also on Etsy, and
use their website as an introduction for the
I
n addition to the recent trends in web design complete with CSS hover effects and animated company and a channel for all of their specialist
towards typo graphics, there has also been a captions. It’ll be easy for you to animate your orders. In effect, it serves as a shop front for
shift in the use of images. As broadband speeds webpage, making it more beautiful and interactive. making sales and building brand awareness.
increase and web delivery methods refine, it’s no The site features a large quantity of imagery, as
“There has also been
longer detrimental to the load-time of a website if
it‘s heavy with large images. This enables imagery
well as an initial full-width video background. It
is simple, well laid out and extremely evocative
a shift in the use
to be used as part of more interactive elements,
such as navigation links. CSS now provides a
of the workshop environment, making it an
authentic representation of the business and
of images in web
wealth of possibilities to animate, embellish and
enhance online imagery, and turn your images
into interactive elements. In this tutorial, we will
its products. Scroll down and you’ll find an
Instagram-based, gallery-style image grid with
the style of hover effect that we will be using as
design trends”
look at the process behind creating an image grid, the basis of this tutorial.
Image hover effects Veiled background

Look carefully as you scroll up and down,
Let the images on your webpage take and you’ll see a parallax background (of a
centre stage wood detail image) covered with a black
overlay. This then slides up behind the link
for the Wood Shed Journal
Progress video
This screenshot displays
the Instagram image grid,
but users can scroll to the
top to view the initial video
background, which shows
clips of the production
Coloured in
The Instagram image grid
elements are initially black
and white. Hovering on
them transforms each
element into a full-colour
image, with a fade-in caption
IMAGE USE
It doesn’t take much work at
all to use your images as the Varied effects Unique menu
basis for smooth, eye-catching,
The Where to Buy section, Instead of a more typical
interactive effects. As with the
which is located above the menu that slides in from the
Wood Shed Production site,
Instagram section, features a left and features text only,
try to see your images as more
different set of hover effects. Hover this one occupies half the
than just pictures to be placed
on each link to view a slide-in screen width and has an
in a window for display.
underline element image background

Browser lag
03 Technique
“Building with CSS3 can sometimes bring home just how inconsistent browser support for Fade the colour
the newer web technologies is. While Internet Explorer has improved vastly over the last
<comment> few years, IE10 seemed to take some steps back. Even Firefox has fallen behind with certain To de-saturate images and saturate on hover,
What our
experts think
CSS properties. Time for better browser standardisation?” Richard Lamb we use the grayscale filter property. This is
of the site fully supported in Chrome and IE6 to 9, with
some support in Safari.
04 Set the H2 CSS tag

02 Technique The actual caption H2 tag also has an absolute
position to place and move it. Font size, colour
Set up the image wall and family can be at your discretion. Set an
initial opacity of 0.1, to hint at the caption before
hovering. We’ll use the transform property to
01 Build the base HTML animate the caption as it fades in. Begin with a
Start by building the first cell in our grid. The -30px height from the 0 bottom property.
cell div contains an image with caption div
underneath. These are wrapped in an ‘a’ link, 001 .caption h2 {
repeat it for the images you use, then adjust the 002 position: absolute;
pic and caption for each cell. 003 bottom: 0; 01 Focus on cell
004 left: 0; The key to implementing the filter is to make
005 margin:0; the cell div the focus of the hover action. Add
02 Set cell sizes 006 padding: 15px; the following to the .cell CSS, and change
Make sure that our images will adjust themselves 007 opacity:0.1; every instance of .caption:hover to .cell:hover
to fit the cell divs when set to a 25% width. 008 transition: all 0.6s ease; through original animations.
Equally sized images are essential for this grid. 009 transform: translate3d(0,-30px,0);
Note that the cell divs can have a finite width. The 010 } 001 .cell {
relative position will come into play when the 011 002 ...
caption is styled in the next few steps. 003 -webkit-filter: grayscale(1); /* Older
webkit versions */
001 img { 05 Change the hover effects 004 -webkit-filter: grayscale(100%);
002 max-width:100%; Now it’s time to tie up the hover effects. First lift 005 filter: grayscale(100%);
003 border:none; /*for IE*/ the opacity on the caption background, which 006 filter: gray; /* IE6-9 */
004 } will reveal the image, and increase the opacity of 007 transition: all 0.6s ease;
005 .cell { the H2 tag to full. Animate the H2 tag by reducing 008 }
006 position: relative; that -30 pixel distance back to 0, using the
007 overflow: hidden; transition to ease the animation.
008 width:25%; 02 Add a new hover effect
009 height:auto; 001 .caption:hover { Now add filter property transition and simply
010 float:left; 002 background:rgba(31,31,31,0); eliminate the grayscale filter with an easing
011 } 003 transition: all 0.6s ease; transition. You can adjust the opacity levels of
004 } the original caption div now that images load
005 .caption:hover h2 { in black and white.
03 Use the caption CSS 006 opacity:1;
We are using the caption div as an overlay to the 007 text-shadow: 1px 1px #1f1f1f; 001 .cell:hover {
image, giving it an absolute position and 100% 008 transition: all 0.6s ease; 002 -webkit-filter:
width and height. We will go on to style it in the 009 transform: translate3d(0,0,0); grayscale(0); /* Older webkit
next step. Choose your own background colour 010 } versions */
but rgba with opacity will give you transition on 011 003 -webkit-filter: grayscale(0%);
hover. Remember your vendor prefixes for the 004 filter: grayscale(0%);
transition declaration. 005 filter: none; /* IE6-9 */
006 transition: all 0.6s ease;
001 .caption { 007 }
002 position: absolute;
003 top: 0;
004 left: 0; 03 Colour or monochrome
005 width: 100%; Using the grayscale filter to ease between
006 height: 100%; monochrome and colour produces a very
Either as links to relevant destinations within the site
007 background:rgba(31,31,31,0.8); eye-catching effect. It may not be fully
or simply gallery images in their own right, adding
008 transition: all 0.6s ease; some animation and CSS reveals to your images can supported, but there are JavaScript fallbacks
009 } make a world of difference. and SVG alternatives as browsers catch up.

Customise your site
Animate a strike-through text effect

Learn how to add this nifty effect to your text
TEXT: THE BOTTOM LINE
T
he problem with descriptive language JavaScript can be used to redefine the standard Despite the design focus being on the strike-through
is that the addition or omission of a <strike> tag to present an animated strike- effect, it’s important that the focus is on how the text is
single word, or even a comma, can give a through effect. The advantage of this approach interpreted in all circumstances. The primary consideration
is the wording used. Make sure to be critical of how the
completely different meaning to the message is how it can be applied to websites containing
meaning of the text can be interpreted with and without
being communicated. Creative design can use massive amounts of existing content. All that is the text struck through.
this flaw in language to emphasise the difference required is the addition of the CSS – no HTML Another important consideration when integrating
between one meaning and another. In our modifications whatsoever! this effect into your web content is the use of a fallback
example, we use the text ‘I am not invincible’ The approach used in this tutorial provides a feature. It could be a failure for the strike-through text
with animation to emphasise the omission of standard fallback for modern browsers that don’t not to appear on browsers that don’t support some CSS
features. So the original text would appear without the
‘not’, thereby changing the meaning of the support the animation effect. For older versions
strike-through effect. Imagine this: ‘XYZ premium brand,
sentence. This effect has been used to good of Internet Explorer that don’t support the delivering [average] quality since 1984’, but without the
advantage on the McClaren agency website to before selector, you might want to use the ‘if [average] struck through. So bare in mind contractually
emphasise the agency’s excellence. This tutorial IE’ HTML tags to reactivate the standard strike- obliging text, like the well-known UK catalogue chain who
shows how standard CSS without support from through effect. had to sell TVs for £1 due to a wording error on their site.
Strike-through animations Strike importance

Make sure that the strike-
As seen on mclarenagency.com through effect is visible on all
browsers to avoid embarrassing
wording slipping through
Strike colour
Unlike the standard strike-through
effect offered by HTML and CSS,
this line is a different colour to the
main text
Strategic wording
The wording is written to make full
use of the strike-through effect, and
to change the context on each read
Semantic meaning
Legacy content The <strike> tag provides
Using the standard <strike> context to the text, allowing
tag will allow the effect to be apps and search engines
compatible with all content to understand what is
without needing HTML changes happening

01 Initiate webpage 001 text-align: center;
As usual, the first step is to define the webpage document. This consists of the
002 }
<html> document container, which contains the <head> section and the main
content <body>. This is the foundation for the next steps to be inserted.
001 <!DOCTYPE html> 06 Default strike display
This is the step where we start to define the properties of the strike-through
002 <html> text. We need to ensure that <strike> elements display as an inline-block, are
003 <head> relatively positioned and don’t show the default strike-through effect. These
004 <title>Text Strike</title> are all required to ensure that the strike-through effect covers the text as it
was intended.
005 *** STEP 3 HERE
001 strike{
006 </head>
002 display: inline-block;
007 <body>
003 position: relative;
008 *** STEP 2 HERE
004 text-decoration: none;
009 </body>
005 }
010 </html>
02 Insert content 07 Strike element: default

The strike effect is created as an element inserted before the <strike>
With the webpage document now in place, the next step is to insert the element – we achieve this using the :before selector and we also need to set
content into the document body. We will use an <article> container with content for it to be visible. The CSS is designed to ensure that all browsers
different types of text – each having a word ‘not’ struck through using the show the cross-out effect by default – even if the animation effect isn’t
<strike> tag. supported. We don’t want some people reading the wrong message.
001 <article> 001 strike:before {
002 <h1>I am <strike>not</strike> invincible!</ 002 content: '';
h1> 003 position: absolute;
003 <h2>I am <strike>not</strike> invincible!</ 004 display: block;
h2> 005 width: 100%;
004 <h3>I am <strike>not</strike> invincible!</ 006 height: .1em;
h3> 007 margin-top: .6em;
005 <p>I am <strike>not</strike> invincible!</ 008 background: red;
p> 009 animation: strikethrough 1s;
006 </article> 010 }
03 CSS link 08 Strike element: animation

The last part of the HTML document is to link to the CSS stylesheet – this
For browsers that can show the animation, we need to attach an animation
enables the styling to be kept separate from content for easier maintainability.
to the element that we’ve created. We are going to call the animation
Insert this HTML into the head section and create a file called ‘styles.css’.
‘strikethrough’ and we will want this to last for one second – hence 1s.
001 <link rel="stylesheet" type="text/css" href="styles.css" />
001 strike:before {
002 animation: strikethrough 1s;
04 Body style 003 }
Start the CSS by defining the styles of the page body. This will have a dark
colour background with white text. Ensure that the default text size is set to
40 pixels. 09 Animation definition
001 body { With the presentation rules for the strike-through effect in place, the last task
is to define how the animation works. This is simply a case of stating that the
002 background: #222;
width of the element starts from 0 per cent and ends at 100 per cent.
003 padding: 1em;
001 @keyframes strikethrough {
004 color: #fff;
002 from {
005 font-size: 40px;
003 width:0;
006 }
004 }
005 to {
05 Article container 006 width:100%;
For presentation, we will make all content within the <article> container 007 }
positioned in the centre. 008 }

Customise your site
Add a shopping cart

to your site
Allow people to stack goods high and pay for them online using PayPal
T
here are many ways in which you can We will be using PayPal for this tutorial. PayPal simple way of creating a cart which means people
sell items online. You could use eBay or is an accepted standard for online payment can shop and buy items from you.
Amazon Marketplace. You could sell direct transactions and people are familiar with it. It means All you have to do is create a button. You could
to companies that buy specific items. Or you could you have a solid name behind you and also the have just one, Add to Cart, or you could combine
go it alone and set up your own store via your higher likelihood that someone will be willing to that with a View Cart button. Whatever method,
personalised website. Maybe you want to be able buy. And, as luck would have it, PayPal offers a very your page will look inviting and professional.
to control the user experience or perhaps you
have just one item for sale and want to centre an
entire web offering around that specific product.
Whatever you want to do, it is easy to create a
“PayPal is an accepted standard for
shopping cart for your website. online payment transactions”
01 Go to PayPal 02 Create a button 03 My Saved Buttons

You will need a Premier or Business PayPal We are now going to create an Add to Cart You will now be taken to My Saved Buttons.
account. When signing up, you can specify a button. Click on Profile>My Selling Preferences. Assuming you have not created any before, click
Premier account from the start or upgrade. Click Update (next to PayPal Buttons). Create New Button under Related Items.
04 Follow the steps 05 Customise your button 06 Generate the button

On the Create PayPal Payment Button page you Choose one of three customised Add to Cart You can add postage information or skip straight
will see a series of steps. Ensure the button type is buttons. Click the examples to see what they are to the bottom of the screen and click Create
Shopping Cart by using the drop-down menu. like and what additional functions they offer. Button. This will generate code to copy and paste.

Create a PayPal button The code
After you’ve customised your
Monetise your site with a little help button, you will be presented with
from HTML this code that you can put into your
website. Click ‘Go back to edit this
button’ if you’re not happy with it
Preview
Rather handily, you are given a
preview of the button that your
buyer will see when he or she visits
your site. Edit the code to change
its appearance
More options
If you don’t like the button
you’re using, just create
another button via this link.
You can also keep the code
and use it as a template for a
similar one
07 View Cart button 08 Seeing options 09 Paste the code

You will want a View Cart option as well. Ensure Now you will see a Create a View Cart button Once again you will be given some code to copy
that you go to the Track Inventory and clear the option. Unless you want a small button, click and paste into your website. Now your visitors
Save Button at PayPal box. Click Create Button. Create Button. The process is now complete. can add items to their cart, view the cart and buy.

Customise your site
Create email newsletters and

let people subscribe
Creating a newsletter script for your site need not be
hard with a little help from MailChimp
I
n order to promote your website or the subject of your website, you
may consider producing an email newsletter. These are sent out to
subscribers, keeping them up-to-date with the latest additions to your
webpages. The idea is that it keeps driving traffic back to the site among
those who have already expressed an interest in it, allowing you to show
them that you are still up and running and that there's plenty of content
to keep visitors coming back for more.
In order to be effective, you will want to add a newsletter script to your
webpage. This will produce a form into which people can insert their
contact information and sign up for your regular updates. This is a great
way to capture marketing data for targeting interested individuals. Once
subscribed, they will automatically receive your newsletter every time you
produce one. It can also be a good idea to have an Unsubscribe
button somewhere on your website, maybe in the
About Us section, as subscribers are more likely
to try it out if they know they can leave.
The easiest way to set up a
newsletter script is via MailChimp.
Although the service can charge, if you
have fewer than 2,000 subscribers and don’t send
more than 12,000 emails each month, there is no charge at all.
You don’t need to input any payment details either to sign up, which is
a plus. MailChimp is easy to use and it is all done online with menus and
wizards, ensuring you will be up and running in next to no time.
01 Sign up to MailChimp 02 Create a list

Go to www.mailchimp.com and click the Sign Up Free button. Fill in your The first thing you need to do to get your newsletter up and running is to
email, username and password where prompted and you’ll then be sent an create a list into which the subscriber details will be inserted. Give it a name,
email with a link. Click this to activate your account. Complete the sign up say who you want the emails to come from, give a reply address and a
with your name, address and website details. default email subject.

The design interface Share it
Clicking on here will give you the
Add a Field
The items to the right show the
How to design and build your form form that you can then embed various fields that you can use for
into your website. When people fill your form. You can ask people to give
in the form, it will subscribe them you their address, phone number,
Signup Form to your email newsletter URL and birthday, for instance
Click the Signup Form drop-down
menu and you will see many other
different types of forms that you
can use for your sign up process.
These include Unsubscribe options
and confirmation replies
Email address
The only required box – denoted
by an * – is the email field. This is
because you need to know where
the email with your newsletter is
going to be sent
CAMPAIGN BUILDER
MailChimp has a Campaign
Builder option that enables you
to create newsletters that can
then be sent out to the list of
your choice. As people subscribe
to your newsletter, they will be
added to the list and become a
recipient of it. All you have to do
is keep creating your newsletters.
These templates can be set up at
https://us5.admin.mailchimp.
com/templates.
03 Design a sign up form 04 Get the code

The next stage is to click on the Design Signup Forms button. Click on a The Design It tab lets you alter the form’s look. When happy, click the Share
field in the left-hand box to alter the settings to your liking. Under the Add a It tab. Click the Create HTML Code for a Small Subscribe Form button.
Field tab, you can include new fields from date to birthday. Build your form Choose the perfect form type for you and the embed code appears. Copy
the way you want it. and paste it into your site.

Customise your site
Add social media buttons

Learn to add social media buttons to your website
to connect with users and boost interactivity
O
ver the past few years the web has increasingly become a
true social platform. Networks such as Facebook and YouTube
now boast over a billion users each. For someone involved in
creating a website, this is a terrific opportunity. Social networks democratise
content sharing, so that if your website strikes a chord with users of these
networks, the networks themselves become a effective promotion platform.
There’s nothing to stop you from regularly posting a link to different
pages on your website and encouraging your friends and followers to share
your link, but this is really only scratching the surface of the power of social
networks. Instead of relying on you to post, it can be far more effective to
encourage visitors to your website to post to their wall or tweet in
response to your site.
In truth, anyone could post a link to your site
on their wall or stream as a matter of
course, and some of the most
dedicated social network
users might, but for the majority of
people there needs to be both a reminder
and an easy one-click way to post. Webmasters can
address this by creating social media buttons with recognisable
logos, which are designed to facilitate easy posting to the visitor’s wall,
adding to their channel or tweeting.
Standard buttons
Breaking it down All the common social networks are available, including
the likes of Twitter and Facebook, so you can choose
which networks to include and appeal to within your set
There are many different social of buttons. Here we’ve opted for just Facebook
networks available
Recognisable logos
Users of social networks recognize
the standard buttons for their
preferred network. This means that
you shouldn’t change the way a
Facebook Like buttons looks, unless
you feel it’s worth the risk that
visitors won’t recognize the button
for what it is
Extended functionality
Some services allow you to create
your own custom buttons to
perform additional actions on the
page, such as printing, converting to
PDF or other custom actions
Integrate with your page SOCIAL NETWORKS

Social media buttons are great Over the past few years, the concept of social networks has
promotional tools, but you don’t exploded. Instead of being limited to a couple of major players,
want them to overpower the content we now have dozens of different options available to us. This
you’re offering, so make sure they can make it difficult to keep up with, and particularly to cater
are an appropriate size – not too big, for, all the networks. To avoid clutter, focus on the primary
but not so small you can’t find them options unless your website uses a particular specialist network.

01 Log in or sign up 02 Choose your style
We’re going to be using the free service at www.addthis.com to generate If you want to create buttons that will allow your users to share content from
our buttons and install them. You don’t need an account, but if you create your website with their friends on social media, use the share tab. Choose
one you’ll be able to see how popular your buttons are, and track their from the different styles of button that appear in the left-hand column to
usage. Visit www.addthis.com and create an account before generating generate code beneath the preview on the right-hand side of the page.
your buttons. There’s no need to enter data here.
03 Encourage followers 04 Copy and paste

If you’d prefer to make it easy for people to follow your social network Once you’re happy with your selection of buttons, copy and paste the copy
accounts, choose the Follow Buttons tab at the top. This tab allows you to from the right hand column of the page into your web page’s HTML code.
choose the type of buttons again, but you’ll need to enter details of your The buttons will appear exactly where you paste the code, so be careful to
username for each network you’d like to include. place them where you intend them to render.

Customise your site
Add Twitter Cards to your site

Twitter allows you to show a special card of information when your page is linked to it within a tweet
T
witter is a great way to engage with your visitors, and can help to drive
traffic to your website. An ideal way to encourage visitors to tweet a link to
your pages is to include a tweet button in your design, but a shortened link
isn’t the most eye-catching, attention grabbing advert for your website. Fortunately,
there is a way you can enhance tweets that link to your website, whether it’s you
sending the tweet or one of your visitors. This is done with the help of Twitter cards.
What are Twitter cards? Twitter cards make it possible for you to attach additional
information to tweets when your website is linked within a tweet. These cards can
take a few different forms, and will show up slightly differently according to whether
you access the Twitter service through the main www.twitter.com website, or
through different Twitter apps.
There are six different card types you can choose from, each of which has a
different layout and, as Twitter puts it, consumption experience. The principal
options are the Summary Card, which provides a title, description, thumbnail image
and Twitter account link; the Large Image Summary Card, which is similar but adds
a large image in place of the thumbnail; the Photo card, which provides a single
image; and the Gallery Card, which offers space for a number of images. There are
also specialist cards for video and audio, apps and product listings.
In this tutorial we’ll show you how to create one of the basic card types, install
it on your website, and test the results with the Cards Validator service. Using this,
you can add other cards to your website. Depending on your website's layout and
content placement, take a call as to which card will look best on it.
Thumbnail image
Anatomy of a card A picture adds immediate visual pull

to the card, making it stand out from
the rest of a tweet stream. Choose
Twitter Cards are easy to generate and install one that reflects your website!
Card Title
This title can either be the name
of your website, or better still the
name of the page or post itself. The
more specific you are, the more
likely you’ll grab attention
Card description
This description allows you to
convey the basic ideas behind the
content on your page. Make the
most of the limited character count.
Summarise to attract readers
Twitter Account
This section of the card can be set APPROVAL NEEDED
to point to your website’s official All cards need approval before use, so use the Validator to test
Twitter account, encouraging your cards and request this. The specialist Twitter Cards all
followers when a link is posted to require special approval, and some are still in development.
your site on Twitter Check with the official documentation at https://dev.Twitter.
com/docs/cards if you want to use one of these special types,
otherwise stick with the four basic types for your website.

01 Decide on the type 02 Enter your details
The easiest way to generate a Twitter card is to use the specialist tool on Once you’ve chosen your card type, enter details for each of the mandatory
the Twitter Developers site. Visit https://dev.Twitter.com/docs/cards/ fields that appear on the Try Cards tab. Make sure you enter the data in the
validation/validator and sign up or sign in to access the tool. Once you’re format requested and stick to the character limits to avoid your content
logged in, choose from the available card types in the Card Catalog. being truncated.
03 Update and preview 04 Install and approve

Once you’ve completed all the fields, click the Update Preview button at the Edit your page’s HTML, inserting the copied code into the <head> section
bottom of the list of fields to update the live preview on the right-hand side of your page, alongside any existing <meta> tags. Ensure you’ve pasted in
of the page. Note that your actual card will appear slightly differently to this. the code, then save and upload the page to your site. On the Card Validator,
When you’re happy, copy the code shown below to your clipboard. enter your page’s URL to Validate and request approval from Twitter.

Glossary
Web design
glossary As with most specialisms, there are many
specific terms that relate to web design. We
look through some of the key terms to clear
up any confusion
Above the fold AJAX Blog

Anything that resides in the web browser Standing for asynchronous JavaScript and XML, Short for weblog. It’s a common form of website
window when your webpage first loads is AJAX is a group of technologies which include in which small items of news or opinion are
referred to as above the fold. Imagine it as a large HTML, CSS and JavaScript. It allows data from a frequently posted.
newspaper – above the fold is the top part with web server to be loaded after a webpage has
the name of the paper. loaded, without altering its performance. Breadcrumb
Refers to the navigation elements at the top of
Accessibility Backlink the webpage. These not only show you the site
This is the extent to which a website can be used A link that refers users from another website you are on but where it lies in the site hierarchy
by people with a disability. Ideally, a website will to yours. The more the merrier because search so that you can see the process of clicks that got
be accessible for people with visual and hearing engines look for the number of quality links to you there. It can enhance navigation because
problems and those who are colour blind or your site to help raise its rankings. they can quickly get to a higher-level page.
physically disabled.
Bandwidth Captcha
Address bar The amount of data requested from your website. Captchas are places within web forms. They are
Also referred to as the URL bar. This is where you Your host web server will have a set limit and you the sometimes undecipherable words which you
type in the web address in a browser. may be charged extra if you go over. Either that have to work out and type in when you want
or requests are denied. to submit a form within a site. The idea behind
making you type these correctly is to reduce
the levels of spam that would otherwise be
generated from automated computer bots.
Content management
system (CMS)
A CMS manages aspects of your site using
a backend tool. Popular examples include
WordPress. Commonly, you will be able to create
posts, add headlines, text and images within a
simple form in the admin area for your site that,
when published, appear online. The various
elements are usually separated so that content is
set aside from design.
Cookie
Cookies are useful for remembering what a
visitor did when they last landed on a webpage.
A cookie can hold all sorts of data including any
customised elements, ensuring they do not have
to tailor the site for their needs each time.
CSS
Cascading style sheets have superseded HTML
Content management systems such as WordPress remove the hassle of coding and ensure updating a site is easy tables, telling a web browser how its pages

GIF
An image file which refers to graphic interchange
format. GIFs can also be animated. In that case
a series of images (or maybe just two) is created
and it gives an illusion of movement.
Hosting
A website has to be stored on a computer. This
is referred to as a server. The server has to be
connected to the internet. Servers are owned
by host companies, hence hosting is the act of
providing the service.
HTML
Hypertext markup language enables you to
create webpages. It is an adaptable language
that is used to provide website content and
can incorporate elements of design. HTML5 is
the latest iteration and it adds new syntactical
features including <video> and <audio>.
Here you can see how this site shows a breadcrumb trail, letting you jump to football or sport very quickly
should look. The language specifies the layout can be copied and pasted into the relevant area
HTTP
and style of a site, giving information about the of your own page code. The site will then pull in Hypertext transfer protocol is most often used as
fonts, colour, typeface, border, alignment, width, content, be it a video, tweets, images and more. part of a URL. It sets out the rules of exchange on
height and much more. the web between the server and browser. HTTP
does this over a secure and encrypted connection
Favicon and it is used when sensitive information is being
Domain The 16x16 pixel icon which appears next to the sent online.
A website domain refers to the name of the site. address bar in the browser to identify the site.
For example imagine-publishing is the domain Hyperlink
for the publisher of this bookazine. The .co.uk Focal point Where text or an image can be clicked so that
suffix is the domain’s extension.
The area where the eye is naturally drawn is the user is sent to another page or website, this
called the focal point, so you need to make sure is referred to as a hyperlink. When hyperlinks
Dots per inch that if something is catching the attention more are carried within text, they will be shown in a
DPI refers to the resolution of an image. Typically than anything else, that it is the part you wish to different colour or underlined. The cursor will also
an image for the web will need to be 72dpi. This draw attention to. A focal point can be anything, change when a hyperlink is available on a section
is low when compared to print. The images in this but you want it to stand out. of your webpage.
bookazine, for example, are 300dpi.
Hyperlinks are familiar to web users. Often coloured
Font family or underlined, they point you to other areas of the
website or internet
Fonts refer to the characters that make up the
words on your webpage. A font family is a group
of typefaces which look similar, for example Arial
and Arial Black, Arial MT Std and so on.
Font weight
The thickness or thinness of a font.
Form
Shopping carts are key features of eCommerce websites and will be Rather than just have a link to an email address
identifiable to anyone who has bought items online
(<a href=”mailto:youremail@email.com>email</
a>), you can use a form. They are great for
eCommerce interactivity and for allowing people to fill in
Sites which allow the buying and selling of items details directly on the page. You can code them
online are examples of eCommerce. yourself or use third-party software to generate
a form which can then be embedded.
Embed code
Many sites such as YouTube, Facebook, Twitter
and so on allow you to feed their content into
your own site. This is done via embed code, which

Glossary
iframe Metadata
An iframe is used when you want to display more Within the <head> of an HTML document, it is
than one webpage in a single page. You could, possible to write metatags. These are hidden
therefore, have two webpages. For example, from view so visitors cannot see them, but search
there could be a menu where clicking on a engines will find and make use of such metadata.
hyperlink will open a new webpage in a frame on
the same page while retaining the menu area. Liquid layout Navigation
A website with a liquid layout will alter depending Refers to the way people move around your
Image map on the physical size of the browser window. So webpages. Your navigation needs to be as simple
Coded in XHTML, an image map is a picture that if someone minimises their browser, the content as possible so that people do not become lost.
is broken down into different clickable areas, each will optimise to fit the window, whereas a non- Navigation is usually in the form of menus but it
of which send the user to different URLs. liquid layout will hide some of the content. The can also be via links on a page.
containers on the page have their widths defined
JPEG in percentage terms. Non-breaking space
A file format which reduces an image’s file size, In HTML, this refers to a white-space character.
therefore making pictures quicker to download Use it when a single white-space is needed such
when they are placed within a webpage. as when indenting a line. It is also referred to by
the indicator .
Keywords
Search engines are important because they
Outbound link
point people to your website. Search engine A hyperlink which sends people to another
optimisation is therefore crucial and keywords – website. Also called an external link.
the terms that people will use to search for your
page or content – are one element of that. A PDF
keyword used prominently on a page will ensure This is an example of a non-liquid layout where resizing the A portable document format file provides
better ranking. browser cuts into the page. A liquid layout readjusts to fit information in a layout that is fixed. PDFs can be

used for a variety of purposes, such as making a
printed leaflet available to download from your
site or a timetable of events that's too intricate to
be placed on a webpage.
Plug-in
Some web content requires a plug-in – an extra
piece of software that expands the possibilities
of an existing app. For a browser, for instance,
you could have a Flash plug-in to be able to play
Flash video. Plug-ins are also available for content
management systems. An example of this is an
eCommerce plug-in for WordPress to allow users
to set up an online store and accept payments.
Podcast
Web design is not just about the visual. You
should be aiming for all sorts of content,
including audio. A podcast – which can also
Many websites make it simple to add dynamic content via embed code such as this on the YouTube site
be video – is a recording to which visitors can
subscribe or download.
Sitemap Traffic
Responsive Design If you have lots of content, a sitemap can be used When people come to your site for whatever
Reponsive Design has become a buzzword for to make sense of it. It is a list of all of the items reason, they will download data. The amount
websites. It basically means creating a website within your site, organised by their hierarchy or they transfer is called traffic, although this term
that can be used efficiently across all platforms. importance, depending on the type of site. is also used to describe the number of people
It ensures consistent user experience whether on visiting a site.
a PC, mobile device or tablet, irrespective of your Social media
screen and resolution size. It's soon becoming
mandatory for web designers to adhere to
Most people are a dab hand with social media WYSIWYG
nowadays. From Facebook to Blogger, Twitter 'What you see is what you get' refers to a
responsive design as their website can be viewed
to YouTube, there is a rich tapestry of content program that will publish a webpage on the
on any device.
provided by users. These elements can be internet that appears exactly as it did within the
inserted into a webpage. They help to drive
RSS people to your site too. The developer areas of
app. One good example of this is Apple’s intuitive
and easy-to-use iWeb. It basically means that you
Really simple syndication not only allows such sites often carry embed code and individual will see a webpage exactly as you published it.
websites to pull in content feeds from other sites, elements are also embeddable. This is a good starting point for beginners.
but it also allows web managers to give visitors
the option of subscribing to their feeds. A feed Template XHTML
will typically show you a website’s headlines and
Commonly associated with content management Standing for extensible hypertext markup
sometimes the first paragraph of text.
systems, templates (and themes) give websites a language, it refers to HTML which complies with
standardised and consistent look and feel, which
Script helps to ensure they appear more professional.
XML rules.
JavaScript is an example of a script, a code that
XML
is placed within an HTML page that produces Text editor Extensible markup language is a markup
interactive and dynamic elements. This could be
A fancy web design package is not needed if you language used to write other markup languages.
a drop-down menu or pop-ups.
know HTML. All you need is a simple text editor
program such as Notepad on the PC, saving the
SEO file with the extension .html.
Search engine optimisation is the act of
enhancing your website so that it is picked up by
the likes of Google and Bing. It’s a complicated
area but metadata, inbound and outbound
links and allowing RSS feeds to encourage your
content to be used within other sites helps.
Shopping cart
Online shops do not usually require you to buy
items individually. Most often you place them in
a basket or cart and then check out, paying for
them all at the same time. Having a captcha on a web form bars it from being overrun by The top of a webpage – the part that shows – is referred to as
automated bots that scour the web and randomly fill them in above the fold. You can scroll to see the rest

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 ZGGZINE must be
quoted to receive this special subscriptions price. Direct debit guarantee available on request. This offer will expire 30 April 2017.
** This is an US subscription offer. The USA issue rate is based on an annual subscription price of £65 for 13 issues which is equivalent to $102 at the time
of writing compared with the newsstand price of $14.99 for 13 issues being $194.87. Your subscription will start from the next available issue. This offer
expires 30 April 2017.
About
the Uncover the secrets
mag of web design
Practical projects
Every issue is packed with step-by-step tutorials
for HTML5, CSS3, Photoshop and more
In-depth features
Discover the latest hot topics in the industry
Join the community
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 ZGGZINE
Or telephone UK 0844 848 8413+ overseas 01795 592 878
+Calls will cost 7p per minute plus your telephone company’s access charge
YOUR FREE RESOURCES
Log in to filesilo.co.uk/bks-921 and download your great resources NOW!
EVERYTHING
YOU NEED
TO BUILD ON
THE AWESOME
SKILLS IN THIS
BOOKAZINE
HELPFUL TUTORIAL FILES
80 frosted
backgrounds
YOUR BONUS
RESOURCES
ON FILESILO WITH THIS
BOOKAZINE, FREE AND
EXCLUSIVE FOR WEB DESIGN
FOR BEGINNERS READERS,
YOU’LL FIND A WEALTH OF
RESOURCES, INCLUDING…
• All the files you need to complete the
tutorials in this bookazine
15 free fonts • Free fonts, including Cotton, Gameness,
Dacquoise and more
• Over 90 minutes of in-depth video tuition
Video tutorials to help you develop your skills, including
adding fullscreen images and multiple
transitions to your site
PACKED WITH BRILLIANT • A selection of 80 premium background
DIGITAL CONTENT, AVAILABLE images to spruce up your site
ANY TIME, ON DEMAND
filesilo.co.uk/bks-921
FILESILO – THE HOME OF PRO RESOURCES
Discover your free online assets
A rapidly growing library No more broken discs
Updated continually with cool resources Print subscribers get all the content
Lets you keep your downloads organised Digital magazine owners get all the content too!
Browse and access your content from anywhere Each issue’s content is free with your magazine
No more torn disc pages to ruin your magazines Secure online access to your free resources
This is the new FileSilo site that replaces

your disc. You’ll find it by visiting the link on
the following page
The first time you use FileSilo, you’ll need to

register. After that, you can use your email
address and password to log in
The most popular downloads are shown in

the carousel here, so check out what your
fellow readers are enjoying
If you’re looking for a particular type of

content, like software or video tutorials,
use the filters here to refine your search
Whether it’s programming tutorials or

video workshops, categories make it easy
to identify the content you’re looking for
See key details for each resource

including number of views and
downloads, and the community rating
Find out more about our online stores, and

useful FAQs, such as our cookie and
privacy policies and contact details
Discover our fantastic sister magazines

and the wealth of content and information
that they provide
* Content subject to change

HOW TO USE
EVERYTHING YOU NEED TO KNOW ABOUT
ACCESSING YOUR NEW DIGITAL REPOSITORY
To access FileSilo, please visit filesilo.co.uk/bks-921

01 Follow the
on-screen
instructions to create an
02 Once you have
logged in, you are
free to explore the wealth of
03 You can access
FileSilo on any
desktop, tablet or
04 If you have any
problems with
accessing content on
account with our secure content available on smartphone device using FileSilo, or with the
FileSilo system, log in and FileSilo, from great video any popular browser (such registration process, take a
unlock the bookazine by tutorials and online guides as Safari, Firefox or Google look at the FAQs online or
answering a to superb downloadable Chrome). However, we email filesilohelp@
simple question resources. And the more recommend that you use a imagine-publishing.co.uk.
about it. You can bookazines you purchase, desktop to download
now access the the more your instantly content, as you may not be
content for free accessible collection of able to download files to
at any time. digital content will grow. your phone or tablet.
NEED HELP WITH

THE TUTORIALS?
Having trouble with any of the techniques in this bookazine’s tutorials? Don’t know
how to make the best use of your free resources? Want to have your work critiqued
by those in the know? Then why not visit the Web Designer and Imagine Bookazines
Facebook pages for all your questions, concerns and qualms. There is a friendly
community of fellow web design enthusiasts waiting to help you out, as well as
regular posts and updates from the team behind Web Designer magazine. Like us
today and start chatting!
facebook.com/ImagineBookazines
facebook.com/WebDesignerUK
Packed
with top
Web Design
tips
Everything you need
to know to get started
with web design
Build a site Work with WordPress 4.3

Learn how to code with HTML and CSS Get online with the popular hosting platform
Photoshop & Graphics Customise your site

Use creative effects to enhance your site Tweak your website and add brilliant features
Free assets
t'POUT XBMMQBQFSTBOE)5.-UFNQMBUFT
t0WFSNJOVUFTPGWJEFPUVJUJPO
t'JMFTUPIFMQZPVGPMMPXUIFUVUPSJBMT

Web Design For Beginners

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design For Beginners

Uploaded by

Copyright:

Available Formats

OVER 90 MINUTES

Master HTML & CSS Make the most of WordPress

Senior Art Editor

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

6 Web Design for Beginners

Web Design for Beginners 7

8 Web Design for Beginners

Web Design for Beginners 9

“Websites cover every aspect of life,

What are HTML & CSS?

10 Web Design for Beginners

Web Design for Beginners 11

12 Web Design for Beginners

Websites tend to follow a similar layout formula

Use exciting patterns to catch the eye

Employ clever tricks on

Web Design for Beginners 13

14 Web Design for Beginners

Web Design for Beginners 15

16 Web Design for Beginners

Web Design for Beginners 17

The mobile web

18 Web Design for Beginners

What’s the best software?

Web Design for Beginners 19

32 Create lists in your website

34 Learn about div tags

46 Centre your page

48 Define text & heading styles

50 Style your lists to stand out

72 Add content to your footer

20 Web Design for Beginners

Web Design for Beginners 21

22 Web Design for Beginners

Web Design for Beginners 23

“The most exciting aspect of

24 Web Design for Beginners

Web pages for

Web Design for Beginners 25

The new HTML5 specification has been drawn up by the W3C, an

been grouped using the same single nondescript

What about Flash?

26 Web Design for Beginners

Web Design for Beginners 27

Create a basic layout

The head tag

NEW ELEMENTS IN HTML5

28 Web Design for Beginners

03 Add the body 04 Add the header

05 Sidebar and content 06 Add the footer

Web Design for Beginners 29

“Links are the key building blocks

Adding in links to pages Link text

30 Web Design for Beginners

03 Internal links 04 Add link text

Web Design for Beginners 31

Create lists in your website

“Coding up a list in HTML is quick

Types of lists in HTML Links can be put into lists simply by

32 Web Design for Beginners

03 Nested lists 04 Ordered lists

Web Design for Beginners 33

Learn to use div tags