Merging Result-merged.pdf

Learn HTML and CSS
Learn to build a website with HTML and CSS

Hey Thank you for checking out my book!
For more free tutorials and guides
Sign up at my website below:
http://learnBuildCode.com

Downloading your tools
The only tool you will need is sublime text, a text
editor used for programming/coding.
You don’t want to use a word processor as this
saves files in rich text format and we want plain
text format.
Go to the sublime text website to download the
editor.
Click here to take advantage
How CREATE A CLEAN MODERN FULLY RESPONSIVE CUSTOM WEBSITE DESIGN

Open Your Tools
You will need sublime text open and
a web browser open.
I recommend google chrome but feel
free to use what you want.
On your desktop create a folder
named websites.
Then in sublime text click file, then
new file, then save as and save the file
as index.html and save it in your
website folder.

Google chrome web browser on the left and sublime text on the right.

Example HTML
<!DOCTYPE html>
<html>
<head>
<title>The title of the webpage</title>
</head>
<body>
<p>A paragraph of text.</p>
</body>
</html>
Here is an example of some html, At the top is the doctype declaration
which tells the browser what version of html is being used, in this case
html5.
Then a html opening tag and a closing html tag at the bottom. Closing
tags have a forward slash at the start of them to distinguish them from
opening tags.
Then there is a opening and closing head tag, The head tags contain
information that sets up the webpage, this information does not get
displayed on the screen.
In the body tags is all the content that gets output to the screen. The
tags themselves do not get output but the content in them does.
In the body tags is a set of paragraph tags the p’s, The text inside the p
tags gets output to the screen. Not the <p> tag.
Add the example to your index.html file and save it.

Open the website folder and drag the file over to the web browser, Drop it on to the web browser.

The file will load and you will see the html from the body tags being displayed, The information between the title
tags gets displayed in the tab at the top, That is the title of the page.

What Is HTML?
HTML stands for Hyper Text Markup Language

HTML is a language for
describing web pages
A HTML document is made up of
HTML tags.
Every HTML tag describes a certain
piece of the document/page content.
Markup language is just a set of
tags.

Parts of a HTML Document
The doctype declaration at the top tells the
browser what version of html is being used And
helps to display the page correctly.
The <head> tags are where you add information
about the web page, such as importing styles.
The <body> tags show any visible information or
content.
Every document must be between an opening and
closing <html> tag.
The <title> tag is used to give the document a title.
The <h1> tag can be used for a web page heading,
and the <p> tag can be used to describe a
paragraph.

What makes up a tag?
A tag is made up of a word or letter such as body,
and is surrounded by angular brackets.
HTML tags usually come in pairs, however not
always. The first tag is an opening tag, and the
second tag with a forward slash at the beginning is
a closing tag.
<body></body>
<tagName>Content</tagName>

HTML Headings
<h1>The largest heading</h1>
<h2>A sub heading that is
smaller</h2>
<h3>An even smaller heading</h3>
<h6>The smallest heading</h6>
Headings are defined with a h tag followed by a
number. The largest heading or title you can have
on a page is made with the h1 header tag.
The smallest heading you can have on a page is the
h6 heading tag.
Try out the examples on the left, heading tags
range from h1 to h6.

HTML Paragraphs
Paragraph tags consist of angle brackets with just a
letter p in them.
Nothing too fancy.
Whenever you want to add a large amount of text
in a document you use the <p> tag.
<p>What is the meaning of life?</p>
<p>To have fun of course!</p>

HTML Links
<a href=”www.google.com”>Google</a>
Try out the code above!
To define a link that goes to another webpage you use
anchor tags, Or if you want to call them link tags you can.
An anchor tag consists of two <a></a> tags an opening and
closing one.
Inside the opening <a> tag you will see a href attribute. This
stands for hyperlink reference. Here we put the url of the
website that you get directed to if you click the link. The url
must be between quotes.
Between the <a> tags is some text Google, This text can be
anything. The text is what gets displayed. If you click the
text then you get redirected to the href website.

HTML Images
The image tag is a bit different, it is just one tag. It doesn’t
have an opening and closing tag, it is self closing and
consists of a single img tag.
The image tag has an src attribute which stands for source.
This attribute should contain a url of the path to the image
file. If you look at the url in the example you can see it goes
to the publicdomainarchive website then at the end you can
see it ends in jpg format which is a type of image format.
These types of url’s are called absolute url’s as they define
the path exactly. If you changed one character/letter then
the url would break. We will cover relative url’s later.
The alt attribute is text that gets displayed when you hover
over the image, it is a descriptive snippet of information.
The text will also get displayed if the image can’t be loaded
or it will get read by a screen reader if one is being used.
<img src=”http://publicdomainarchive.
com/wp-content/uploads/2014/03/public-
domain-images-archive-high-quality-
resolution-free-download-0036-1080x675.
jpg” alt=”An image of a bike” >

HTML Attributes
Html tags can have attributes
They provide more information to a
tag

Attributes
Attributes are a way of providing more
information to a tag, you have seen them already.
An attribute always goes inside the opening tag.
Attributes have a name such as href and then an =
sign and finally a value Which should be wrapped
in quotes “google.com”.
You have seen attributes with the <a> tag and the href
attribute:
<a href=”www.google.com”>A Link</a>
The href attribute provides a url destination that you will
end up at.
The img tag has the source attribute:
<img src=”an_image.jpg” >
You also have the alt attribute to display alternative text
when an image can’t be loaded:
<img src=”an_image.jpg” alt=”An Image” >

HTML lists
You can have an ordered list or an
unordered list
An ordered list will have numbers
next to it, an unordered list will have
bullet points.
Unordered lists are most frequently
used and CSS is used to remove the
bullet points.

Unordered Lists
Unordered lists have an opening and closing
<ul></ul> tag. Inside the unordered list you have
list items which are defined with the <li></li> tags.
For every new item you put in the unordered list
you must use an <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try writing out a list

Ordered Lists
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try writing out an ordered list
Ordered lists have only one difference, They start
and close with an <ol></ol> tag.
You still have <li> tags inside an ordered list.
Remember an ordered list will output numbers to
the screen.

Challenge: List out some website links
Create a new html file, name it something simple. (Or just use an old
html file and remove the contents of it).
In the blank html file add a Doctype declaration at the very top.
After the doctype declaration add an opening and closing html tag.
Nested inside the html tags add an opening and closing head tag.
Inside the head tags add a title tag and name the webpage lists.
Next below the head tags but still inside the html tags add some body
tags. (Opening and closing).
Inside the body tags add an unordered list.
Inside the unordered list add three blank opening and closing li tags.
Inside each li tag add an anchor tag that goes to a website.
Nicely done, you have a list of links that go to different pages.
Helpful Hints:
<!DOCTYPE html>
<head></head>
<ul>
<li></li>
</ul>
<li><a href=”www.mypage.com” >My Page</a></li>

The div Tag
The div element is used for
separating code or if you like,
dividing it up

<div><p>Hello</p></div>
The div element is used as a container for other elements. Here it surrounds a paragraph element.
If you try this example you will see that the only thing on the screen is the text “Hello”.
This is because you will need to add css styles to the div element in order to see it.
Divs are commonly used to style a certain block of content.
Hello

The Span Tag
The span tag is commonly used to add a container
around something very specific such as a word in a
paragraph.
CSS styles can then be applied to the span tag to
make the word coloured or bold.
Span tags are used for very specific content
whereas div tags are used for larger blocks of
content, like styling multiple paragraphs.
Span example:
<p>Hello <span>World</span></p>
Div example:
<div>
<p>Hello there</p>
<p>This is another one</p>
<p>Three paragraphs in total</p>
</div>

HTML Tables
HTML tables start with a table tag.
The table is then divided into horizontal rows with
the table row tags.
Then to create a cell a table data tag is placed
inside the tr tag.
<table></table>
<tr></tr>
<td></td>

HTML Table Example
As you can see from your own output to the screen the first row
contains three table data cells the first which is cell1 and then cell2 and
cell3.
Then below the first row is the second row containing the names Jack,
Will and Fred.
This is the basics of creating a table in HTML.
Tables are not used as much as they used to be however are still very
useful. A lot of financial websites will use tables to display information,
and if you take a look you can also see that they can be styled very
nicely as well.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Number 3</td>
</tr>
<tr>
<td>Jack</td>
<td>Will</td>
<td>Fred</td>
</tr>
</table>

HTML Classes
You can add a class attribute to a html element.
This allows you to more easily target that element
when writing CSS rules.
It also allows you to style elements the same way
using one class.
If you had a class called “blog-posts” you could
apply that class to a div element that surrounded
each blog post. Then you could style all the blog
posts in the same way.
<div class=”blog-post”>
<h2>A Journey to France</h2>
<p>On my journey I visited many
cities and visited many different
locations, however the one ...</p>
</div>

HTML ID
You can add an id attribute to a HTML element just like you add a class
attribute. The difference is that a class name such as blog-posts can be
used many times over. You can name many divs with the blog-post
class.
An id is for naming something once. If you giv a div tag an id of first-
post then no other id attribute can be named the same thing.
Id attributes are another way to style something very specifically. If you
want all blog posts to have white text and black backgrounds but want
the first blog post to be red and white then you can give the first blog
post an id attribute as well.
<div id=”first-post”>
<h2>A Journey to France</h2>
<p>On my journey I visited many
cities and visited many different
locations, however the one ...</p>
</div>

Basic forms and input
You can use a html form to collect user input,
You create a form with opening and closing form tags
<form>
<input type=”text” name=”username” placeholder=”
Enter a Username”>
</form>
The input element is the most important form element, it has many
different types such as text and radio and submit.
A submit button can be defined with:
<input type=”submit” “Accept” >
Or you could define a radio button with:
<input type=”radio” name=”sex” value=”male” >Male
<br/>
<input type="radio" name="sex" value="female" >
Female <br/>
Every input field must have a name attribute
except the submit input.

Adding Style To Your
Webpage
Adding CSS Styles

To add styles you are going to need another file
called styles.css
The name isn’t important but the .css extension is.
The CSS extension stands for cascading style sheet
and is where you will put all the style rules for your
website.
In your text editor, open a new file and then save it
as styles.css
Save it in the same folder as your index.html file.
The index.html file will import the styles from the
css stylesheet.
You should now have a folder with an
index.html file and a styles.css file
You can use the same folder you have
been working in or a different one if
you want to start fresh

A folder with both of the files, index.html and styles.css

The Link Tag
The link tag is used to create a link between a document
and another resource. In this case we want our html page to
link to our stylesheet.
The link tag is self closing it is a single tag.
It has a href attribute which just like the anchor tag is used
to point to the location of a resource. The example points
to the styles.css file in the same folder.
There is a type attribute which lets the browser know what
type of file it is, the stylesheet is type text/css.
There is also a rel attribute which stands for relationship.
The relationship between the index and css document is
that again the file is a stylesheet.
You can use a link tag many times to import many different
files if you want to. The link tag goes in the head tag at the
top of the page.
<link href="styles.css" type="text/css"
rel="stylesheet">
The link element is empty apart from its
attributes.
It must only be placed in the head tags
of a html document.
The head tag is where we place
information about the web page, it will
not get displayed.

Add your link tag
In your index.html file add your link tag inside the head tags.
The most important attribute is the href attribute. Since both files are in the same folder you can use a relative path href=”
styles.css” (The relative path is the name of the file, we don’t need to specify the folder name of “websites” as both files are in
the same location).
Absolute paths are links that contain the full website address.
We don’t actually have a website set up, so we use relative links. (You would use relative links in a real website as well.)
The coffee cup website has a good explanation of relative vs absolute links if you are interested.
<head>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>

CSS example
On the next page is a css example,
update your index.html and styles.css
files and save them.
Then reload the browser to see the
result.

Testing your link tag and stylesheet
index.html
(You should have the doctype and head tags in your
document already set up, I am just excluding them from
this example.)
<body>
<p>Hello World<p>
</body>
styles.css
p {
color: red;
}
Don’t copy this below just the css above:
(Make sure you use curly brackets)
(Use a colon after the word color and then after
the word red use a semicolon.)

The Result
Hello World
You will see the paragraph text
has changed colour.

CSS is a language that
describes presentation
CSS describes how HTML
elements look on the screen.
body {
background-color: blue;
}

What makes a
CSS Rule?
body { background-color: blue; }
Selector { property: value; }
Selector
Declaration
The syntax for a CSS rule starts with a selector. This can
be a html tag or a class or id that we have made. The
example uses a body tag as the selector. It is the
element being selected.
A property is then added, the example here uses
background-color as the property.
Finally a value is given for the property. What color do we
want the background to be? The value in the example is
blue.

CSS Colors
CSS colors can be defined with:
Color Names,
RGB color values,
Hexadecimal color values,

CSS Color Names
When setting a property value such as background-
color or color (changes text color) you can use
built in color names for the value.
As you can see there are quite a few options, if you
can think of a colour then it is quite likely there is
a color name.
Color names are however restricting, using one of
the methods covered next gives you a lot more
flexibility.
p { color: white; }
p { color: red; }
p { color: green; }
p { color: blue; }
p { color: black; }
body { background-color: yellow; }
body { background-color: orange; }
body { background-color: firebrick; }

RGB Color Values
rgb(red, green, blue)
The rgb color scale runs from 0 to 255.
255 is the strongest and 0 weakest. You can use the scale to
make any combination of colours by specifying different
levels for the red, green and blue.
Try experimenting with the colours you can make. You
don’t need to remember the values as you can google an
rgb color you are after.
Red:
p { color: rgb(255,0,0); }
Green:
p { color: rgb(0,255,0); }
Blue:
p { color: rgb(0,0,255); }
Light grey:
p { color: rgb(200,200,200); }

Hexadecimal Color Values
Hexadecimal color values range from 0 to F.
Wait what? Yes 0 is darkest and F is lightest.
0 1 2 3 4 5 6 7 8 9 A B C D E F
Hexadecimal values can be recognized because of the # sign
in front of the letter and number combinations.
A hexadecimal color is made up of 6 characters. 2 red 2
green and 2 blue. #rrggbb two red characters and 2 green
and 2 blue.
If 0 is the darkest then we could represent black as #000000
This shows red green and blue each at their lowest value.
Why two lots of red green and blue, rgb had one number
for each? Look at the colour for red:
#ff0000 You have both red values at their highest point on
the scale which is f, and green and blue values at 0 so the
colour is red. Think of the first f as the main colour you're
trying to create. Then the second f as a different shade of
that main colour.
If you change the hex value from the highest red to this:
#f50000 then you end up getting a slightly darker shade of
red.
#f00000 would be an even darker red as the second value is
0.
If you wanted an even darker red you could do #900000
which ends up being a brownish red.
#000000 Just remember that syntax and you will be good.

More on Hexadecimal
Again don’t worry about memorizing colour values
there is no need, just google a colour such as light
blue hex value and you will be able to get what you
need.
It does help if you understand how hex values
work, Try experimenting with making a colour
lighter or darker and then eventually trying to
create certain colours.
Here are some more examples to help:
Green: #00ff00
Blue: #0000ff
Yellow: #ffff00 (red and green)
Shade of green: #77AA77
Shade of purple: #992299
Light grey: #eeeeee
Also light grey: #eee (same colour)
The value of e is all the same so the three letter
version is the shorthand.
#ffffff -> #fff or #000000 -> #000
#CC22AA -> #C2A or #AABBCC -> #ABC
#CD0066 -> #CD06 will not work, only if all values
are 2 of a kind.

Challenge
Recreate what you see on the right.
Index page:
Add a h1 tag and add some text.
CSS page:
Target the body tag and change the background color to lightblue.
Target the h1 tag and:
Change the color to white,
Change the background to red,
Change the text to align center using: text-align: center;

Borders
You can have a wide variety of borders, the values
allowed are solid, dashed, dotted, groove, inset,
outset, hidden, double, ridge and none.
The ones you will most likely require however are
solid, dotted, and none.
The shorthand border property is:
p {
border: 2px solid green;
}
The properties you are specifying in the shorthand
are:
border: width style color;
The width in the example is specified in pixels
which is an absolute unit. Try changing each
property about. 50px or dotted for the style and
change the colour using hexadecimal values.
You can also specify a single border if you wish:
border-top: 2px solid green;
border-bottom: 5px dotted #eee;
border-left: 1px outset red;
border-right: 2px double orange;

Challenge
Recreate what you see:
Index page:
Add a h2 tag with some text inside it
CSS page:
Target the h2 tag and:
Change the color to green,
Change the text align to center,
Add a top border that is 4px wide, double for the style and
coloured green,
Add a bottom border that is 4px wide, solid for the style and
coloured light grey.

CSS Margin
Margin sets the amount of whitespace around the border.
The margins you can set are:
Margin-top
Margin-right
Margin-bottom
Margin-left
To make something move downward on a page you would
use margin-top as you are pushing away from the top of the
screen.
To make something move away from the left side of the
screen you guessed it, margin-left. If you use a negative
margin then things can be moved off the page.
Margin shorthand property is
Margin: 100px 50px 100px 50px;
That would be 100px top margin, 50px right margin, 100px
bottom margin, and 50px left margin. As you can see the
list on the left goes clockwise and is important to
remember.
You could think of margin as a picture frame on a wall. If
you want to move the frame down then add some margin-
top to increase the whitespace above it.

Challenge
Index page:
Add a paragraph with the text “normal paragraph”
Add another paragraph below with the text “margin paragraph”, Add a
class to the margin paragraph called margin-paragraph.
<p class=”margin-paragraph” >
CSS page:
Target the second paragraph with the margin-paragraph class.
Do this by placing a dot/period/full stop in front of the class name.
.margin-paragraph { }
The dot is the syntax we use to target a html class in our CSS stylesheets.
Give the paragraph a 1px border, solid that has a colour of
firebrick.
Give the paragraph a margin-top of 50px.

Margin can be set to auto
Index page:
Add a div tag and inside add the text “A div container with auto margin”
CSS page:
Target the div tag and:
Add a solid border that is 1px wide and coloured red,
Refresh the page,
Now change the width to 500px, width: 500px;
Finally set the margin to auto.

CSS Padding
Padding is the space arount an element. Padding is the
space between the element and the border. If you have a
paragraph with a border and you want the border to be
further away you would use padding to pad it out.
If your paragraph has a background color then the padding
will also be that color.
Just like margin you have:
Padding-top
Padding-right
Padding-bottom
padding-left
Padding shorthand is just like margin shorthand:
padding : 50px 100px 50px 100px;
That is 50px of padding on the top, 100px on the right,
50px on the bottom and 100px of padding on the left.
So a simple explanation could be if you want to move
something around on the page use margin, and if you want
to make something bigger then use padding.

Challenge
Index page:
Add a paragraph with some text in it.
CSS page:
Target the paragraph tag:
Give the paragraph a 1px border coloured green and make it
solid,
Save and refresh the page.
Next add some top padding of 50px,
Save and refresh again to see the changes,
Add a background-color of lightblue to the paragraph,
Add 50px of padding-bottom
Save & Refresh,
Add 100px of padding-left.
Cool hopefully you are starting to see how margin and padding work.

Make a CSS button
Index page:
Add a div tag,
Inside that div tag add an anchor tag with the text “Join Now”, give the anchor tags href
attribute a value of “#” like this:
<a href="#">Join Now</a>
CSS page:
Target the div tag:
Make the text align to center in the div tag,
Give the div tag a margin-top of 50%, - This shifts the div tag down 50% of its
parent container. What is the parent container? For this div tag it is the page(body tags) for
the anchor tag the parent is the div tag.
Target the anchor tag inside the div tag like this:
div a { } - A space between the word div and anchor means
target all anchor tags inside div tags. Look at your anchor
tag, it is inside the div tag. Check your html if you need more
clarification.
(save & refresh after each step to help understanding)
Set the text-decoration to none,
Give it a background color of #191,
Change the text color to white,
Add padding of 1em top, 2em right 1em bottom and 2em left,
em is another unit, it is a relative unit.
Use text-transform and set it to uppercase,
Use font-weight and set it to bold,
Set a bottom border 4px wide that is solid and coloured #333,

Now create a new css rule like this:
a:hover { }
Here you target the anchor tag with a, you then type colon hover :hover
which means apply this style anytime you hover over an anchor tag.
It is known as a pseudo class, Which is used to define a state, In this case
the state of hovering over an anchor element. We will use the hover
pseudo class to style the anchor tag when the mouse cursor hovers over
the anchor tag.
Inside the a:hover CSS rule add:
A background-color of #1c1
Save and refresh and hover over the button.
Cool the button background colour becomes lighter when you hover
over it!!
Well done there were quite a few things covered in this little button
tutorial, Give yourself a pat on the back.

Button challenge code
If you got really stuck here is the way I coded the
button, Note that there are many ways to achieve
the same result.
Index page:
<div>
<a href="#">Join Now</a>
</div>
CSS page:
div {
text-align: center;
margin-top: 50%;
}
div a {
text-decoration: none; /*Remove underline*/
background: #191;
color: white;
padding: 1em 2em 1em 2em;
text-transform: uppercase; /*upcase the text*/
font-weight: bold; /*Bold the text*/
border-bottom: 4px solid #333;
}
a:hover {
background-color: #1c1;
}

Height and Width
You can add the height and width of an element like so:
div {
height: 200px ;
width: 200px;
background-color: #999;
}

Height and Width
Index page:
<div>Make me a box</div>
<div>Me too</div>
CSS page:
div {
height: 200px;
width: 200px;
background-color: green;
margin: 25px; /*25px of margin on every side */
}
The margin is shorthand for equal amounts on all
sides.

Max Width
Index page:
<div>50% please</div>
CSS page:
div {
border: 2px solid green;
max-width: 50%;
}
The div gets set to a maximum of 50% of the page, as that is the parent
of the div. Look at your html and you will see the div nested inside the
body tags.
If you resize the page the div will also resize, never getting wider than
50% of the page size.
If you have a width property in your CSS rule and a max-width property
then the max-width will override the width property. It has a higher
specificity.

Min Width
Index page:
<div>Welcome Visitor</div>
CSS page:
div {
color: white;
background: #f59;
text-align: center;
padding: 20px;
min-width: 500px;
}
If you add a min-width property then resize the screen so that it is
smaller, the element won’t keep getting smaller and resizing to the page.
Once it reaches the minimum width value the page can get smaller but
the size of the element will not decrease anymore. You will get a
scrollbar at the bottom of the page to scroll along with.

Text
You can align text with the text-align property.
You have already used center to align text in the center of the page.
Other values are left, and right.
You have also briefly seen the text-decoration property, which
can be used to add underlines, overlines, lines through the text or as we
did with a link remove the decoration all together.
text-decoration: none;
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
You have also seen text-transform which can be used to change text to
upper or lower case.
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
Capitalize only changes the first character of each word.
You can use letter-spacing to to change the space between each letter.
letter-spacing: 4px;
letter-spacing: -1px;
If you have a paragraph and want more or less of a gap between the
lines to make it easier to read then you could use line-height.
line-height: 1.3;
line-height: 0.7;
line-height: 1.9;
Note that line height doesn’t have a unit such as px or em, just a
numeric value. The number is multiplied by the font-size of the
element. You can have a unit if you wish such as 5% or 2em. The
unitless number value is preferred as you won’t get unexpected results.

Line height, Letter spacing
Index page:
<h1>Click Here</h1>
<p>Lots of text here Lots of text here Lots of
text here Lots of text here Lots of text here Lots
of text here Lots of text here Lots of text
here</p>
CSS page:
h1 {
letter-spacing: 5px;
}
p {
line-height: 1.9;
}

Font
You can change the font with the font-family property. You can specify
a general font like serif, or sans-serif or monospace or you can be
specific and use a font in that generic family such as arial or verdana
which are both sans-serif fonts. Times new roman is a specific font from
the serif family.
font-family: “Times New Roman”, serif;
If the font name is more than one word then surround it in quotes. If
you specify more than one font family then separate them with a
comma.
Here Times New Roman is specifically used, however if a computer
does not have that specific font we have said just use any serif generic
font you have.
font-family: Arial, sans-serif;
Here we say specifically use an Arial font which is part of the generic
sans-serif family. However if a computer does not have that font then
just use any generic sans-serif font. As you can see the order matters.
Font style can be used to alter the way text looks such as italicised or
oblique.
font-style: normal;
font-style: italic;
font-style: oblique;
If you want to make a font larger or smaller on the page then you use
font-size.
font-size: 30px;
font-size: 2em;
font-size: 100%;
1em is equal to whatever the current font size is. The default font size
starts at 16px in browsers. So 1em will equal 16px unless you alter it.
This means that a font-size of 2em is equal to 32px, Play around with it.
It is a relative unit as its value it relative to the font-size that is currently
set. Whereas a px is absolute it is not relative to anything else.
You have also seen font-weight which was used to bold the text.
font-weight: bold;
font-weight: normal;

I am the content, a paragraph for example.
Box Model
Padding
Border
Margin

The box model is a visualisation of what you are actually doing
when you add padding, a border, and margin.
Essentially every html element can be thought of as a box. The box model is just a box that wraps around every element and you
have been doing it this whole time. The box is made up of a combination of the content, the padding, the border and the margin.
Padding is the area around the content.
Border is the bit that goes around the padding and content.
The margin is the amount of space between the border and other elements on the page.

CSS Layout
How elements are displayed on a page

Display Property
Add a div to your page and give it a border. Now
look at it, it stretches the entire width of the page,
and if you added another div they would not line
up next to each other, This means by default it is a
block level element.
Think of a block, it takes up all the space given to
it. Every block element will begin on a new line on
the page.
Now add an anchor element to your page, And another
short one. So you have two links..
Look at how they sit together one after another on the
same line. They are inline elements. It sits inline (on the
same line) and does not take up all the space.
These are the default display values. Every html element
has a default display value. Next time you add an element
to a page try to guess what its default display value is.
The most common default display values are either block
or inline.

Display: none
You can set the display property to none to make
something not show up on the page.
Try adding a paragraph to your html file.
Now target the paragraph in your CSS file and add the line:
display: none;
This will change the default value from inline-block to
none and the paragraph will not be displayed.
The page is displayed as if the element is not even there.
If you want to hide something but have it still affect the
layout then you could use the visibility property and give it
a value of hidden.
visibility: hidden;
The element will take up the same amount of space on the
page as before, it will just be hidden, so it will affect the
page layout.
The page will render as if it were there.

Challenge Menu
Index page:
Add an unordered list with some li tags inside it, Then in each li tag add
an anchor link:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
CSS page:
Target the li tag and change the display to inline.
Target the ul tag and change the text-align to center
Target the anchor tag and change the text-decoration to none
Change the anchor background color to lightblue
Give the anchor top and bottom padding of 1em and left and
right of 2em

Menu Code
Index page:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
CSS page:
ul {
text-align: center;
}
li {
display: inline;
}
a {
background: lightblue;
padding: 1em 2em;
}

Inline-block
Another display value is inline-block.
Inline block elements are like inline elements but you can give them a width and a
height. Think of it as combining the inline value and the block value.
The element gets treated as if it were a block level element so you can then decide how
much space you want it to take up, but it can act as an inline element and have other
elements next to it!
COOL!

Position Property - relative
An element can be positioned in four ways.
Static, relative, fixed or absolute.
Once the position property has been set you can then use the top,
bottom, left and right position properties. Depending on what position
value you use the outcome will be different.
By default html elements are positioned static.
position: static;
If an element has a static position then it will not be affected by the top,
bottom, left and right properties.
Static position is not special, elements are just placed onto the page in
the normal flow, one after another.
The relative position means an element is displayed relative to its
normal position. If you set the left property to a value of 50px then the
element will be pushed 50px to the right from where it would have
otherwise been.
It is positioned relatively, it is 30px away from where it would have
been. There will be a gap from where you pushed the element, into its
new position, no other element will fill this gap that has been left.
Other elements will not move out of the way either. So you could
overlap elements.
try :
Index page:
<div>Hello There</div>
CSS page:
div {
position: relative;
left: 50px;
border: 1px solid red;
}

Position Property - fixed
If you set the position property to fixed then it will be positioned in
relation to the viewport, It will stay in exactly the same place even if the
screen is scrolled.
Think of a website whee you have scrolled down but a menu is always
there at the top of the page. That is fixed positioning. Or a menu on the
side of a webpage that has social media icons, As you scroll it is always
in the same place, That is fixed positioning. Very useful stuff.
Remember relative positioning? The element would leave a gap where
it would have been.
Fixed positioning does not leave a gap where the element would have
been, The page flow remains normal.
With fixed positioning set you can use the top, bottom, left and right
properties to position an element on the page. If you want something
right at the very top of the page you can set top to 0. This means there
are 0 pixels or any unit between the element and the top of the page.
If you want the element to be fixed to the right side of the page then
give it a width and give the right property a value of 0, or maybe 20px if
you want a gap between the page and the element.
Try out the example on the next page.

Fixed position footer
Index page:
<h2>Fix that down the bottom!</h2>
<div>
setting a fixed position;
</div>
CSS page:
div {
position: fixed;
bottom: 0;
right: 0;
left: 0;
text-align: center;
border: 5px dotted lightblue;
}

Position Absolute
Absolute positioning can be a little more confusing. An element that has absolute positioning is positioned relative to the nearest positioned
element.
If there is no other positioned element then the absolute positioned element is relative to the document body.
So if you have a div positioned relative, Then inside that div you add another div but position it absolute. If you set the absolute positioned divs
right and bottom values to 0 it will position that div relative to the outside div.
This example will demonstrate.

Position Absolute
Index page:
Add two divs and give them a class name:
<div class="relative-div">Relative div
<div class="absolute-div">absolute div</div>
</div>
CSS page:
Target each div with a specific class:
div.relative-div {
position: relative;
width: 500px;
height: 250px;
border: 5px solid red;
}
div.absolute-div {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 100px;
border: 1px dotted blue;
}

Overlapping elements
You can overlap html elements, and with the z-index property you can
specify the order of the elements.
Index page:
<h1>This is a heading</h1>
<div></div>
CSS page:
div {
background-color: firebrick;
height: 80px;
width: 500px;
border-radius: 10px;
position: absolute;
top: 0;
z-index: -1;
}

Float and Clear properties
The float property can be used to position elements on a page.
Index page:
<div class="right">Im on the right</div>
<div class="left">Im on the left</div>
CSS page:
.left {
float: left;
background: lightblue;
color: #fff;
padding: 1em 2em;
font-weight: bold;
}
.right {
float: right;
background: #1c1;
color: #fff;
padding: 1em 2em;
font-weight: bold;
}

Clear property
If you have the same CSS as the previous page but
add another div:
<div class="right">Im on the right</div>
<div class="left">Im on the left</div>
<div class=”bottom”>Bottom yeah down here</div>
As you can see if you float elements then they
don’t follow the normal flow of the page.
Elements placed after other floated elements will
flow around.

Target the bottom div
Add the rule:
.bottom {
clear: both;
}
This clears both of the divs with float properties.
The values you can give clear are:
clear: right; floating elements are not allowed to
float on the right side of an element.
clear: left; floating elements are not allowed to
float on the left side of an element.
clear: both; floated elements are not allowed to
float around any side of the element. (It is
therefore pushed to the bottom where we wanted it)

Common float property problems
If you have one element that is a set height, and
then another element in it that is taller, so an
element that is taller than its containing element
and you float it, it will then overflow outside of the
container element.
Usually this is undesired however there is a
common solution that people use.
You can create a class called clearfix or clear or
anything you wish and then set the overflow
property to auto.
.clearfix {
overflow: auto;
}
An example would be an image inside a
containing div, if you floated the image
to the right then the div would not
adjust, so the overflow property can be
used to make the div correctly surround
the elements within it.

Pseudo classes
A pseudo class defines the state of an element.
We used the hover pseudo class to change the background of a button
earlier on.
Some anchor pseudo classes are:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: orange;}
a:active {color: yellow;}
Try out the examples above to help you understand each state. The
active state would be when you are clicking on an element.
There are many pseudo classes so feel free to
google for more of them. It is unlikely you will use
them all and more likely just a handful.
Another useful pseudo class is :focus which can be
used to style an input box when you are targetting
it.
Check out the next page for an example.

Focus on the input
Index page:
<input type="text" name="username" placeholder="
Username"> <br/>
<input type="password" name="password"
placeholder="Password">
CSS page:
input {
margin-top: 1em;
padding: .5em 1em;
font-size: 1.2em;
border-radius: 10px;
}
input:focus {
color: #fff;
background: #333;
outline: none;
}
The focus pseudo class allows us to change properties when that input
field has focus. The outline property is set to none to remove the default
blue line that occurs when you focus on an element.

Navigation bar challenge
Index page:
Add an unordered list
In the ul add some li tags and add an anchor element inside each list
item.
CSS page:
Target the ul:
Set the padding and margin each to 0,
Set the background to #333,
Target the li:
Set the display to inline,
Target the anchor tags inside the list items:
Set the display to inline-block,
Set the text decoration to none,
Change the text color to white,
Add 1em of padding on the top and bottom and 2em of padding
on the left and right.
Target the hovered anchor tag:
Set the background color to #191
Nicely Done!

Navigation bar code
Index page:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
CSS page:
ul {
margin: 0;
padding: 0;
background: #333;
}
li {
display: inline;
}
li a {
display: inline-block;
color: #fff;
padding: 1em 2em;
}
a:hover {
background-color: #191;
}

CSS3 the newest standard
The new features

Round corners
border-radius: 5px 10px 5px 10px;
I’m pretty sure you have seen this before,
Round the corners of any element.
Top-left Top-right Bottom-right Bottom-left

background-size
You can set a background image in CSS with
background-image: url(‘a url path’);
You can set the position with values such as center,
top bottom, left and right.
background-position: center;
You can set whether you want an image to tile and
repeat over the page
background-repeat: no-repeat;
The background-size property can be used to specify the size of the
background image. You can set the size in length and height or
percentages or using the keywords cover or contain.
Cover scales the image so that the area you specify is completely
covered. The image height and width may exceed the elements area as
it is being scaled. It won’t overflow however so you will not see it. It will
just mean some parts of the image are not visible.
Contain scales the image to be as large as possible but the width and
height of the image must still fit inside the element. So there may be
areas of the element that are not covered by the background image.
See an example on the next page to create a background image that
covers the top of a page.

Background image
Find an image url you can use or add an image to your website's folder.
CSS page:
Taget the html tag (at a minimum it will always be the screen height):
html {
background: url('landscape.jpg');
background-repeat: no-repeat;
background-position: center center; /*horizontal
and vertically centered*/
background-size: cover;
min-height: 100%;
}
Set the background image with background and the url. Then set the
repeat to none. Set the position to center vertically and horizontally. Set
the size to scale and cover the area, in this case the html tags which are
as large as the whole page. Notice some of the image will be missing as it
has been scaled. Set the minimum height to be 100% of the html tag
height. Otherwise the image will not cover the whole screen.
A shorthand is:
background: url('image_url') no-repeat center center fixed;
background-size: cover;

RGBA Colors
RGBA colors are just RGB color values with an alpha value.
The alpha value sets the opacity of the color.
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0, 1);
The opacity value ranges from 0 - 1 zero
being transparent and 1 being fully
opaque. Try the examples above to see the
different values of red created with the
varying opacity level.
Opacity
The opacity property can be used on its own:
.post {
background-color: #11cc11;
opacity: 0.8;
}
In the example above you are not targeting just the background color
but a post which also contains text. (That is what a post is after all) This
method will target all the elements that make up the post class and
change their opacity. Compared to the rgba example on the left which
only targets the color itself.

Text shadow
text-shadow: horizontal vertical blur color;
Box shadow
box-shadow: horizontal vertical blur color;

Text Shadows
You can add shadows to elements with css. You can add a text shadow to
any piece of text or use a box shadow to apply a shadow to the actual
element.
The text shadow has a horizontal shadow and a vertical shadow, you
then specify the colour you want the shadow to be:
h2 {
text-shadow: 2px 2px green;
}
You can also add a blur to the text shadow, It will be the third value,
here a 5px blur is added.
h2 {
text-shadow: 2px 2px 5px green;
}

Box Shadows
The box shadow has a horizontal value and a vertical value for the box
shadow, You also specify the color of the shadow.
div {
width: 300px;
height: 300px;
background-color: lightblue;
box-shadow: 10px 10px slategrey;
}
You can also add a blur to the shadow, This will be the third value. Here
I will add a 10px blur.
div {
width: 300px;
height: 300px;
box-shadow: 10px 10px 10px slategrey;
}

Inset box shadow
Just add the keyword inset and the shadow gets applied inside the
element.
<button>Normal Button</button>
<button class="button">Button</button>
Add some styles:
.button {
border: none;
color: white;
padding: 1.3em 4em;
font-size: 1em;
outline: none;
box-shadow: 0px 1px 5px #333;
}
.button:active {
box-shadow: inset 0px 3px 5px #333;
}
When you click on the button the active pseudo class is triggered and
the inset box shadow gets applied.

Making a Form
This form won’t actually submit anywhere but it is a nice example to
practice your html and css skills.
Index page:
<div class="form-div">
<form>
<h2>Sign Up For Free</h2>
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="submit" value="Sign Up">
</form>
<div>
CSS page:
.form-div {
text-align: center;
}
form {
background-color: #eee;
padding: 1em;
}
input {
display: block;
margin-top: 0.5em;
}

Index page:
<form>
<div>
<input type="text" name="name" placeholder="Name">
</div>
<div>
<input type="email" name="email" placeholder="Email"
>
</div>
<div>
<input class="btn" type="submit" value="Sign Up">
</div>
</form>
<div>
CSS page:
.form-div {
text-align: center;
}
form {
padding: 1em;
min-width: 80%;
}
input {
margin-top: 0.5em;
outline: none;
padding: 0.75em;
border: none;
min-width: 80%
}
input.btn {
min-width: 0;
color: #fff;
background-color: #22de7a;
padding: 1em 2em;
margin-top: 1.5em;
font-weight: bold;
}

Index page:
<form>
<div>
<input class="data-entry" type="text" name="name" placeholder="
Name">
</div>
<div>
<input class="data-entry" type="email" name="email"
placeholder="Email">
</div>
<div>
<input class="btn" type="submit" value="Sign Up">
</div>
</form>
<div>

CSS page:
body {font-family: sans-serif; background-color:
lightblue;}
.form-div {
text-align: center;
}
form {
padding: 1em;
min-width: 80%;
box-shadow: 2px 4px 15px #555;
}
h2 {
color: #22de7a;
}
input {
margin-top: 0.5em;
outline: none;
padding: 0.75em;
border: none;
min-width: 80%
}
.data-entry:focus {
color: #fff;
}
input.btn {
min-width: 0;
color: #fff;
padding: 1em 2em;
margin-top: 1.5em;
font-weight: bold;
}
input.btn:active {
box-shadow: inset 1px 1px 5px #333;
}
input.btn:hover {
background-color: #22fe7a;
}

The Result
Some styles get added so that when the user clicks
on an input box it changes color, and styles are also
applied to the button when it is clicked.

If you liked the html and css guide then feel free to check out my
website and sign up for more tutorials.
http://LearnBuildCode.com

Learn to build websites with
my free tutorials
Learn Build Code

Learning to build beautiful looking websites doesn’t have to be
hard, Follow along and get learning!

I hope you really enjoyed this book and most of all
learned something from it!
Feel free to leave a review on amazon and let me
know what you think of it.
Thanks again
Harry

Good luck on your Website
building journey!

Imprint
Published in December 2010
Smashing Media GmbH, Freiburg, Germany
Cover Design: Andrea Austoni
Editing: Thomas Burkert
Proofreading: Brian Goessling
Concept: Sven Lennartz, Vitaly Friedman
Founded in September 2006, Smashing Magazine delivers useful and
innovative information to Web designers and developers. Smashing
Magazine is a well-respected international online publication for
professional Web designers and developers. Our main goal is to support the
Web design community with useful and valuable articles and resources,
written and created by experienced designers and developers.
ISBN: 978-3-943075-04-5
Version: March 29, 2011

Table of Contents
Preface
Ge!ing Started With E-Commerce
5 Universal Principles For Successful E-Commerce-Sites
12 Tips for Designing an Excellent Checkout Process
How to Engage Customers in Your E-Commerce Website
Principles of Eﬀective Search in E-Commerce Design
15 Common Mistakes in E-Commerce Design
E-Commerce: Fundamentals of a Successful Re-Design
Improve Your E-Commerce Design With Brilliant Product Photos
How To Use Photos To Sell More Online
Design To Sell: 8 Useful Tips To Help Your Website Convert
7 More Useful Tips To Help Your Site Convert
Optimizing Conversion Rates: Less Eﬀort, More Customers
Optimizing Conversion Rates: It’s All About Usability
Use Conversions To Generate More Conversions
#e Ultimate Guide To A/B Testing
Multivariate Testing: 5 Simple Steps to Increase Conversion Rates
#e Authors
Smashing eBook #5│How to Create Selling E-Commerce Websites │ 2

Preface
Designing and developing for e-commerce takes a lot of brain work,
knowledge and research before you start. You don‘t only have to please
your customer with a beautiful layout and a smart structure – you also have
to make your client‘s customers easily understand what it‘s all about, thus
providing for a great user experience and high conversion rates.
This book steps you through the preparation of your e-commerce projects,
showing you what it takes to present merchandise as beautifully and
convincingly, and how to run valid and successful A/B and multivariate
testing of various designs.
These articles are a selection of the best from Smashing Magazine in 2009
and 2010 dealing with creating e-commerce websites. The articles have
been carefully edited and prepared as a PDF version and versions for ePub
and Mobipocket compatible e-book readers, such as the Apple iPad and
Amazon Kindle. Some screenshots and links were removed in order to
make the book easier to read and to print.
We have put this book together to give you all the information you need for
successful e-commerce websites in one fell swoop. Enjoy and good luck
with your work!
— Thomas Burkert, Smashing eBook Editor

Ge!ing Started With E-Commerce
Rachel Andrew
The world of online sales, whether of products or services, can be daunting
at first; the options seem confusing and the information conflicted. Yet as
the designer or developer of an online store, you will need to guide your
client through the maze of choices in order to get it up and running.
I have developed many e-commerce websites during my career as a Web
developer. I’ve used and modified oﬀ-the-shelf software and have also
developed custom solutions — so I know from experience that there are a
number of important questions to answer before presenting possible
solutions to a client. Getting all the pertinent information up front is vital if
such a project is to run smoothly, and it can save you from delays during the
process. It can also help you advise the client on whether they need a full
custom cart or an open-source or oﬀ-the-shelf product.
This article responds to some questions you should be asking of your client
before putting together a proposal for the development of an e-commerce
website. I’ll explain the most important things to think about in terms of
taking payments and credit card security. It should give you enough
information to be able to guide your client and to look up more detailed
information about the aspects that apply to your particular situation.
What this article doesn’t cover is the design and user experience side of
creating an e-commerce website, because gathering this information would
normally occur alongside the designing and branding of the website.

What You Need To Know
It is really tempting to select a solution based on something you have used
before or perhaps after asking around to see what others recommend. But
you can get stuck in a rut this way. Every online business has different
needs, so one solution is unlikely to fit all. Before writing any code or trying
an off-the-shelf package, you need to ask yourself or your client a few
questions:
• What are you selling?
• What shopping functionality should you offer?
• How will you take payment?
• How will items be delivered?
• What reporting and other functionalities are required?
What Are You Selling?
Your online store may be selling physical products that are shipped by the
postal service or a courier to the customer after a completed purchase. Or it
might be selling products that are delivered electronically, such as e-book
downloads, MP3 music or software. Donations and subscriptions are types
of transactions to consider as well.
What Shopping Functionality Should You Offer?
Will you be selling a single item, (such as an e-book) or will visitors need to
be able to browse and add multiple items to their cart? Are these items
associated with distinct options? If you’re selling t-shirts, for example, size
and color might be options to include. Are categories needed to make
ordering easier? Will a given item be listed in only one category, or could it

be found in several? Would the ability to tag items be useful, or the ability to
link them to related items (thus allowing the store owner to promote
accessories for items that the customer has added to their cart)?
Items on the Hicksmade website can be displayed in categories.
Will there be special offers on the website? Standards ones are “Buy one,
get one free,” “20% discount,” “two for one” and “buy item x and get item y
at half price.” Setting up these kinds of offers can be quite complex if you
are developing a custom system; and if you’re buying an off-the-shelf
solution for the store, then you’ll need to know whether it supports them.

The devil (and the budget) is in the details. If your client is expecting
particular functionality, find out about it now.
Accounts and Tracking Orders
Part of the user experience could include managing an account and tracking
orders. Must users create accounts, or is it optional? Can they track their
order and watch it move from “processing” to “shipped”? Account
functionality must include basic management functions, such as the ability to
reset a forgotten password and to update contact details.
How Will You Take Payment?
You’ll likely need to accept credit and debit card payments from customers.
There are a number of options that range in complexity and expense.
PayPal
PayPal is a straightforward way to take payments online. The advantages
are that creating a PayPal account is easy, it doesn’t require a credit check,
and integration can be as simple as hardcoding a button on your page or as
involved as full integration. Google Checkout oﬀers a similar service (and a
similarly low barrier to entry), as does Amazon (in the US) through Amazon
Payments.

Using A Merchant Account
To accept card payments directly, rather than through services like PayPal,
you will need an Internet Merchant Account. This enables you to take credit
card payments and process the money to your bank account. If you have an
existing merchant account for face-to-face or telephone sales, though, you
will not be able to use it for online transactions. Internet transactions are
riskier. So, to start trading online, you’ll need to contact your bank. The bank
will require that you take payments securely, in most circumstances via a
payment service provider (or PSP, sometimes called a payment gateway).
What you should definitely not do is store card details in order to enter them
in an oﬄine PDQ later. This would be against the terms of the merchant
agreement. So, unless you have written permission from your bank saying
you are allowed to do this, and you’re complying with the PCI DSS, just
don’t.
The Payment Gateway
The purpose of the payment gateway is to take the card payment of your
customer, validate the card number and amount and then pass the payment
to your bank securely. You can interact with a payment gateway in two
ways:
• Via a pay page
The user moves from your website to a secure page on the payment
gateway server to enter their details.
• Via API integration
The user enters their card details on your website (on a page with a
secure certificate installed, running SSL), and those details are then
passed to the gateway. Your website acts as the intermediary; the user
is not aware of the bank transaction happening, having seen it only via
your website.

The advantage of pay page integration is that your website never touches
the card details, so you are not liable for the customer’s security. The most
significant disadvantage is that you lose some control over the payment
process, because the final step requires gathering all the details to pass to
the payment server. In addition, you are often unable to customize the
payment screen, even if only to upload a logo.
Store owners are often concerned about this break in the user experience:
they fear the user will bail before going to the payment page on WorldPay
or another server. But transferring your user to a known banking website
where they’ll enter their card details might actually give them confidence in
the legitimacy of your website. When I deal with an unknown website
(perhaps a small retailer) and it asks me to enter my card details, I
immediately worry about how it will handle them. Does the website email my
card details in clear text? Will the details be stored in a database
somewhere by the website? Even if the page has a secure certificate and
checks out, I still have no idea what happens to my details after I hit
“Submit” on the form. If the final step of checking out takes me to a known
PSP page, then I can be confident that my details are safe and the small
website isn’t handling them at all. I trust WorldPay with my details far more
than I trust Joe Blogg’s Widget Store.
Another useful argument for using a pay page is that, should there be any
changes in card payment regulations, these will be handled by the PSP. For
example, 3-D Secure (verified by Visa or MasterCard SecureCode) was
instituted recently. It requires that users verify their payment on a page
related to their bank before it can be authorized. If you had API integration,
you would need to edit your code to ready it for 3-D Secure; whereas on
payment page websites, those changes are done by the PSP.
These points have encouraged many website owners to reconsider their
reluctance to use a pay page — most realize that being responsible for
credit card details is more trouble than it’s worth.

Pay page integration should work with most oﬀ-the-shelf software. After
payment is made, it typically sends back something that enables your
website — which has a script running for this — to identify the user and the
transaction and perform any post-purchase processing that may be needed
(such as marking an order as “Paid” in the database or giving access to an
electronic download).
The advantage of full API integration is that you control the payment
process from beginning to end, including the look and feel of the payment
pages. However, you are also responsible for the security of the user’s card
details, and regulations require that you prove you are following best
practices.
PCI DSS
The Payment Card Industry Data Security Standard (PCI DSS) is a set of 12
requirements that must by complied with by all businesses that accept credit
and debit card payments. This doesn’t just cover online transactions; a
street store that takes payments online must also comply with the PCI DSS
for both their oﬄine and online payment methods.
If you are just taking online payments via a pay page and do not take,
process or store any card details at any time, then you can complete the
shortened PCI DSS questionnaire (SAQ A) to confirm that your PSP is PCI
DSS-compliant. If you use API integration, then you’ll be need to comply fully
with the PCI DSS — even if you do not store the details — including by
allowing quarterly security scans that check ongoing compliance. Explaining
PCI DSS compliance in detail is beyond the scope of this article, but if you’re
involved in a project that takes card details without a pay page, then you
should acquaint yourself with it — or take on the services of someone who
already knows it.

Storing Card Data
I would strongly advise any designer or developer against storing card data
on their website server, even in encrypted form. Storing card data will, of
course, require you to comply with the PCI DSS and to maintain a server and
network capable of keeping this data safe. If you need the data of card
holders for recurring billing, for example, some payment gateways oﬀer data
storage services.
If you are considering storing card data only for “one-click” ordering (as
Amazon does), please be careful. Do you really want to be liable for your
customer’s data? Are you willing to deal with the extra and ongoing
expenses that maintaining compliance will require?
Multiple Currencies and Local Taxes
You’ll likely need to account for local taxes or VAT in Europe. Understanding
exactly what taxes you need to collect can be diﬃcult enough, but you also
need to ensure that your system can process them correctly. For example,
my company has a downloadable product, a mini CMS called Perch. Our
company is registered in the UK, so we need to collect VAT from UK buyers.
We also need to collect VAT from EU (European Union) buyers, unless they
have a valid VAT number. If the buyer is outside the EU, then we don’t need
to charge VAT. So, our system has to allow for validation of VAT numbers as
well as for the correct calculation of price with and without VAT. If you find
yourself in a similar situation, then the European VAT Number Validation API
(written by Aral Balkan) will be helpful.

Collecting the VAT Number here triggers the VAT Number Validation process so
that we can determine whether to charge VAT.
Most stores take payment in a single currency. If you want to accept multi-
currency payments — that is, allow visitors to select their regional currency,
see pricing and make a payment in that currency — you will need to set the
desired currencies in your merchant account. Another option is to get an up-
to-date exchange rate and display prices in other currencies while accepting
payment only in your local currency. You can either update these exchange
rates manually or use data from an API to do automatic currency
conversions. If the user will be paying in your currency and not theirs, then
they will need to understand that the prices displayed are solely
informational and that the actual price may diﬀer slightly (owing to
fluctuating exchange rates).

What About Delivery?
If you are selling physical items that need to be shipped, you’ll need to
charge somehow for the shipping costs and perhaps arrange for order-
tracking. Because you’re selling online, you may attract customers from
other countries, so you’ll need to decide how to calculate shipping for
diﬀerent destinations. Otherwise, limit potential buyers to people in your
country or a small group of countries.
Threadless explains to the user how shipping works and then presents shipping
options based on the user’s mailing address.

Typically, websites offer free shipping for orders of a certain price or higher.
They also typically offer shipping with different carriers, such as by regular
post or by priority courier (depending on when the user wants to receive the
item). Consider these things when planning your website.
Digital Products
When customers buy a digital item (an e-book, music download or software)
they expect to be able to download their item quickly after purchase. For
digital products, delivery takes the form of a link or a page in their profile
where the product can be downloaded (and a license code issued if
required).
Your system will need to be able to secure products prior to download and
provide an account — or at least an emailed link — through which the
download can be accessed. When selling software, you may also need to
generate a product code.
Reporting And Other Functionality
Your client will need to receive and process orders as they come in, and
they might also need to mark items as shipped as they are processed. Some
form of download to CSV would likely be helpful to allow a mail-merge of
data onto address labels, as would the ability to import to an offline
accounting system of payment information. Other questions to ask your
client are:
• Do you need the system to be linked to any other systems (for example,
a system running in a street shop or an accounting package with
particular data requirements)?
• Do you need to be able to control stock through the website?
• How do you want to deal with orders that you can only partially fulfill?

• Will the website generate invoices or will this happen oﬄine?
Most successful store owners will want to automate their accounting
processes eventually in order to avoid duplicating data when calculating
their year-end accounts. Many accounting systems have an API that allow
you to send transactions from the store automatically to the accounting
package.
Accounting systems with APIs, such as Xero, make it simpler to tie website orders
to accounts.

Finding Your Solution
With all the above questions answered (in addition to thinking about the
design — i.e. the look and feel of the store itself), you are in a position to
prepare a solution that suits your client’s needs. Your options are either to
develop something yourself (or contract a developer to do so) or to select
an oﬀ-the-shelf system that meets as many of your needs as possible either
on its own or with modifications.
With e-commerce, you can always start small. Begin with a simple solution
or a simple payment method, and then move on to more complex solutions
as you start to get a return on your investment. Including many features right
away is tempting, but your goal is to make money, not to spend it. Testing
the water before spending a fortune is perfectly acceptable.
Keep It Simple
First, be sure of your actual needs. For example, if you are selling a single
product, then you won’t need a shopping cart; all you’ll need is a way for
customers to pay. At the most basic level, this could be a PayPal “Buy Now”
button on an HTML page, or your own form that posts the data to a PSP pay
page. You could test the waters with PayPal’s “Buy Now” buttons for just a
few products, using PayPal as a simple shopping cart.
Online Solutions
If you need more than a few PayPal or Google Checkout buttons but would
rather not invest time or money in installing an e-commerce solution, then
hosted solutions are available. Selling online becomes more straightforward
when someone else worries about the complexities of the cart.
Popular hosted products include Shopify and Foxy Cart. Both of these
services allow you to create a store, hosted on their servers, for a monthly

fee. Some hosted solutions target a particular market and are therefore
more likely to have features that the market wants. A good example of this
is Big Cartel, a shopping cart for artists.
The Big Cartel website.
There are also specialist services that assist with the delivery of digital
purchases such as e-books and software. Fetch is a hosted application that
integrates with Shopify and other carts to deliver digital purchases.

You should be able to get up and running quickly with a hosted solution. But
hosted solutions come with a few disadvantages: usually a monthly fee,
limited customization, and the prospect that users will have to visit three
websites to complete their purchase (your website, a hosted cart and a pay
page). To keep things simple, though, it can be a great solution, especially in
the early stages of a business.
Commercial and Open-Source Products
There is a huge range of oﬀ-the-shelf e-commerce products that you can
download and install yourself, including plug-ins for CMS systems. When
assessing these systems, check each one against your list of essential and
ideal features. You don’t want to buy something that isn’t the best fit. Most
software will have a demo website set up as a basic installation that you can
play with to see what options are available. If you have a comprehensive list,
it will be easier to see whether your needs are supported.
The Open Source CMS website has an e-commerce category that allows
you to try out a number of open-source systems from one location, including
the popular Magento and osCommerce applications.
With a store-bought system, consider whether creating templates or
changing the look and feel are feasible. Some systems enforce their website
design and thus compromise yours. You should also look at the mark-up
generated by the system; will your pages still validate? How accessible and
usable will the store be for visitors?
One problem with many popular existing systems is their reliance on
JavaScript, both in administration and in the shopping experience. While
JavaScript can greatly enhance the user experience, it should only be used
as an enhancement. That is, your website should have basic functionality
(e.g. purchasing and checking out) without JavaScript, even if the
experience is less smooth. The popular Magento Cart requires that users
enable JavaScript in order to add products to their cart; an article in the

Magento wiki suggests that you display a message asking users to turn on
JavaScript. Paul Boag recently wrote an article about Business Catalyst and
its lack of support for users without JavaScript.
If you are tied to a particular payment method or PSP, make sure the
product supports that method. Also, make sure the product allows you to
comply with your local legal and tax requirements.
When assessing a product, find out what support is available. Open-source
products might oﬀer a community forum; check that the forum is active and
the community helpful. For commercial products, find out what support you
can expect after buying a license. Finally, check how frequently the product
is upgraded. If the latest version is two years old, newer payment methods
might not be supported.
With Trading Eye, you must purchase support credits in order to get product
support
A Note on Modifying Commercial Products
If you can’t find an oﬀ-the-shelf product that meets your needs, it can be
very tempting to grab whatever nearly does and start hacking away, trying
to force it to fit your requirements. I urge caution when doing this: by

modifying the basic source code, you might make the product very diﬃcult
to upgrade — because upgrading to a new version could overwrite your
changes. Keeping up with security upgrades is also important; a
compromise in a widely used system can attack many websites.
Many open-source products have a plug-in architecture that allows
supported modifications and additions that can be upgraded. If you decide
to modify an existing product, look for one with a good plug-in system and a
helpful community. You could even oﬀer your plug-in back to the community
when it is ready for those with similar needs.
Developing Your Own Solution
Sometimes the only way to get the features or create the user experience
you want is to develop your own solution. In this case, the requirements list
that you created earlier will help you develop a specification before starting
work or hiring a developer to build the solution for you.

MySoti offers many color options and types and sizes of t-shirts.
Custom e-commerce systems are prone to scope creep, because there are
so many potential elements of functionality to develop, and clients tend to
expect a clone of Amazon! By outlining exactly how shipping, special offers,
categorization of offers and so on will work, you keep the client’s
expectations and yours in line. A well-built system should be able to extend
as time goes on. I encourage clients to develop only what they need to
begin, rather than spend a fortune on bells and whistles “just in case.”

“Special oﬀers” is a good example of this. You could develop a system that
lets the client create many combinations of special oﬀers, which would
require a complex user interface and a lot of logic. But in most cases, the
client would use such a system minimally. A lot of time and money would be
saved by creating only what is needed, but building it in such a way that it
can be modified later if desired.
Conclusion
I hope this article has clarified some of the technical considerations of
developing an e-commerce website. I enjoy e-commerce projects; they’re a
great opportunity to help clients develop their businesses online, and it’s
nice to see quantifiable results as people start making purchases. When you
create a solid set of requirements based on real business needs and match
them with great design and care for the user experience, you build a
website that increases sales — and you enable another business to grow.
That is a satisfying thing to do.

5 Universal Principles For Successful
E-Commerce-Sites
Jeﬀrey Olson
When was the last time you called customer support because you were
having problems checking out online? Probably never! Cart abandonment
rate is at around 60%, and most of it happens before the user even begins
the checkout process. Sometimes, convincing your customers to trust you is
your biggest challenge.
There is no “Consumer Trust for Dummies,” but as e-commerce designers,
we need to focus on some fundamentals. The following topics may seem as
obvious as walking into a seven-foot Wookie, but rest assured you will find
plenty of websites with a mouth full of fur.
1. Paint Your Pictures At Home
If your core demographic is women between the ages 35 and 65 who have
an annual income of $60,000+, you would treat them diﬀerent than the 18-
to 25-year-old male demographic. First and foremost in e-tail: forcing your
visitor to think is a bad idea. When creativity stops being subjective and can
be measured by a dollar amount, making sure you’re designing for the
customer is a no-brainer.
Years ago, I had an SVP of DotCom tell my team, “You can go home if you
want to paint pictures.” And for the rest of the day, I couldn’t wait to get
there so that I could make sure the next morning his inbox was full of
expletive material illegal in most counties. After calming down, I realized he
was right. All along, what he was telling us was simply to design for the

customer and not ourselves. This was a challenge for designers working in
an e-commerce corporate atmosphere but a very important lesson to learn.
2. Good UX Is Like A Perfect Movie Score
Build brand loyalty to gain patient, forgiving customers for a lifetime. For
instance, Apple’s customer loyalty exceeds all other brands with an unusual
cult following. Apple lovers forgive the company when it makes mistakes
and zealously defend the company’s products and reputation.
How do you make your customers trust you this much? The answer is to
give the user an “Experience.” It is not enough simply to make a website
usable. The experience you create for the customer has to make them not
realize that they are “using” it. It’s a tough concept to grasp, and the recipe
changes from website to website, but the right combination of usability,
creative design, writing, psychology and metrics and a strong brand will
create an experience through which your customers learn to trust you.
Like the perfect score to a film, a good user experience is unobtrusive and
transparent to the consumer because “it just works.” The Apple model will
not work for everyone, but I often find myself challenged with a W.W.J.D.
moment. Ask, “What would Jobs do?” and then look at other websites for
inspiration.
3. E-Commerce UX Pitfalls To Avoid
Just because a website is usable, does not mean customers will use it.
Usability and user experience are in the same family, but more often than
not user experience is the forgotten child. There are key areas in which the
two must co-exist. Below are suggestions for some areas where websites
should spend as much, if not more time, on the user experience.

Product Detail page
The product detail (PD) page is where some retail websites drop the ball.
Too much focus is put on the design and usability of the home page, and
that eﬀort does not continue through to the rest of the website. More of the
user’s time is spent on the product detail page than any other. Here, you
need to oﬀer customers all of the information they are looking for but
present it in an intelligent way as well.
A few recent trends on e-commerce websites are “no-click” alternate
images and swatches. A user simply has to roll over an image, without
clicking, to get immediate feedback. The same approach can be used to
zoom in to the image. Other UX options for the PD page are smart fields that
let users know they still have to perform a required action before
proceeding, without getting a typical error message.
The Checkout Process
Much like the PD page, the checkout process is a critical piece that engages
the customer on a somewhat intimate level. However, unlike the PD page,
where customers want to spend time to make sure they want what they are
looking at, the checkout process should have as few steps as possible. Too
many steps and the customer feels trapped.
But too quick and they feel like they have lost control. For instance, asking
for credit card information too soon will seem out of order and no doubt
scare even the most seasoned online shopper into abandoning their cart.
Hidden taxes and shipping costs will make them feel like you are trying to
take advantage of them.
Security
Always making sure your customer knows that your website is secure and
that their privacy will never be compromised goes back to the issue of trust.

It does not take much effort to display a message telling your customers that
they are safe in your hands; a footer link to your privacy policy is not always
enough.
Page Weight
A page’s weight is determined by its file size, by adding up every image,
every line of code and anything that gets loaded when the user first hits the
page. Libraries such as Scriptaculous, jQuery, MooTools and even Flash
Shared Objects are often forgotten, but they all add to a page’s “weight.”
Some fascinating things are on the horizon for developers related to user
experience and page weight. One notable development as of late was the
release of web browsers, which has support for HTML 5 media tags, CSS
animation and CSS effects. As more and more of these features become
standard in browsers across the board, we can look forward to offering
users a better experience by using features directly in the browser.
4. #e Value Of Content And #en SoMe
We cannot talk about user experience without touching on content and
social media (SoMe). In order to be profitable, e-commerce retailers need to
engage customers with their content and use social media outlets within
and outside their own websites.
93% of social media users believe a company should have a presence in
social media, according to Cone, while an overwhelming 85% believe a
company should not only have a presence in but also interact with its
consumers via social media.
• 60% of all online adults use social media.

• 56% of users feel a stronger connection with, and feel better served by,
companies when they can interact with them in a social media
environment.
When a website such as Facebook, which just turned 6 years old in
February, has an active user base of over 500 million people, it is easy to
see the unlimited potential to increase your wallet share simply by giving
your customers what they want. Some options are:
• Give your customer the ability to add your website or product detail
pages to websites such as Delicious, StumpleUpon, Digg, Twitter and
Facebook.
• Give them the ability to customize their experience on your website.
These experiences can range from customizing the home page as they
see fit to uploading their image to go beside their product reviews.
• Create an RSS feed for your website. If your website has a blog or some
other content area that changes regularly, give your customers the
option to add it to their favorite RSS reader.
They say, “Content is king,” but if you cannot account for your king’s
whereabouts, he needs to be beheaded. Your website’s content is only as
relevant as its success. So, test as much as you can. Some tests you can
perform to get hard data include:
• Website and email A/B testing
Split your promotion views between your customers. 50% see version
A, and 50% see version B. You can perform these tests for just about
any purpose, but make sure your goals are clear before beginning.
Figure out what you are trying to solve, and then move forward with the
testing. From changing your website’s navigation to simply testing the
style of your promotion’s copy, doing an A/B test will give you the
relevant data you need to decide whether to update or remain the
same.

• Polls
Polls are quick and simple but, depending on your pool of users, can
give you mountains of data. To get more people to take your poll,
consider giving some kind of incentive to participate. Some polls are fun
to take, but if you’re asking, “Which brand of television is better?” and
not, “Who’s hotter, Jessica Simpson or Britney Spears?” then you may
want to think more carefully about how much the feedback is worth.
5. Using Type And Color To Influence
Using color and typography is nothing new to designers. Using them in e-
commerce is not much diﬀerent. When designing for a retail website, your
client is the customer. You are trying to convince thousands, tens of
thousands, even millions of potential customers to click on your promotion
and buy whatever you are selling. Consider the following.
Can It Be Read?
Most designers love to play with typography: twisting, shaping and
contorting letters and word to obey your every whim, forming a beautiful
masterpiece of skill and beauty. However, if your customer is not an artist,
chances are they won’t get what you’re doing, and you’ve just lost a sale.
Up front and to the point messaging is not always the answer either.
Consider using fun copy as an alternative. For example, if you sell banjos,
instead of saying, “Shop New Banjo Supplies,” you could say, “Add More
Twang to Your Thang.” As stated earlier with regard to designing for the
customer, this depends a lot on what your target demographic is.
Can It Be Red?
No big surprise, red is the color of choice for error messages. But consider
this when thinking about the user experience. What color does Target.com

use for its error messages? Makes you think, right? Good! By the way, it
uses red, too. The point is to consider alternatives. If your company has red
in its brand, and the website has a lot of red as well, consider another color.
You’re trying to get the user’s attention, so blue text with an alert icon could
work just as well.
Consistency in Type: Stylistically and Creatively.
Making sure your headers, sub-headings and body copy are consistent
across your website is easy. Making sure your website has a well-defined
style guide is not. A style guide requires a lot of patience and care and is
never complete. A website’s style guide should be a living, breathing
document that continues to grow as your company and brand grows.
There is nothing wrong with this. As you find certain styles that perform
better than others, find a way to add them to the guide. This document,
depending on the complexity of your brand and the size of your website,
could potentially be split into two separate documents: a creative style
guide and a copy style guide. Each guide serves a diﬀerent purpose but live
together harmoniously.
Inspiration and Sources
Designing for the user experience in e-commerce is a multi-faceted puzzle.
Some solutions work across the board, and some are specific to your
website alone. The good news is that finding the solutions that best fit your
particular needs is the most challenging and rewarding work a designer can
do. It takes a rare breed to fully appreciate the value of the user experience,
and if you are part of it, I hope this article and these resources give you as
much pleasure as they have given me.

12 Tips for Designing an Excellent
Checkout Process
Dmitry Fadeyev
Shopping online can be a great experience. You don’t have to leave the
comfort of your home and you can quickly compare and read about all the
competing products in order to pick the best one for you. But it can also be
a little frustrating if the process isn’t designed correctly.
Looking around for that checkout link, having to fill out registration forms
and then being told the product is out of stock isn’t going to make your day.
Spend a little bit of time fine tuning your checkout process and polishing oﬀ
the user experience and you’ll be rewarded with happier customers and
more sales. Here are 12 useful tips to help you do just that.
1. Don’t require registration to shop
Your customers are here to shop, not to fill out forms. Make sure that the
registration is done during the checkout process and not before — and
certainly not before a visitor places goods into their shopping basket. Sign-
up forms are barriers because they take eﬀort and time to fill in.

Target requires an account, but it’s only prompted after you’re ready to check
out.
By moving these barriers further down the line you increase the chance of
your visitors becoming paying customers. This is because they’ve already
spent time shopping so they’re less likely to stop now and waste that initial
involvement. If that barrier is placed right at the beginning, however, they

might just walk away. Think of it as holding the door to your store open for
your customers to come in.
2. Inform customers if the item is available
Be clear about the availability of the items and inform your customers about
the stock levels. If an item isn’t available, don’t take your potential customer
through several steps just for them to discover that they can’t actually buy it
right away. Don’t just display stock levels on product pages either, show
them right on the search results page.
Overclockers provides detailed stock information right from the product listing
pages.
Additionally, if an item is out of stock right but will be available at a later
date, oﬀer a pre-order option so those people who aren’t worried about
getting it right away can still make the purchase.

3. Allow your customers to easily modify the order
Everyone makes mistakes. People put the wrong goods into their shopping
basket or change their mind. By making things easy to modify, you make
sure you don’t frustrate your potential customers during the checkout
process by making things easy to modify.
IconDock makes sure to provide simple controls to change the quantity of an
item or remove it.
If someone wants to remove an item or items from their cart, don’t force
them to enter the zero amount; instead, provide a “remove” link that will
delete a product from the cart and ensure order modification is quick and
easy.
4. Provide users with real-time-support
Since the checkout process requires user’s input, it is very likely to assume
that many users might experience problems – caused by any
misunderstandings or some particular needs or interests that can not be
easily defined using the available web-interface. In these situations it may

Merging Result-merged.pdf

Recommended

Recommended

More Related Content

Similar to Merging Result-merged.pdf

Similar to Merging Result-merged.pdf (20)

Recently uploaded

Recently uploaded (20)

Merging Result-merged.pdf