Code highlighting Most HTML editors offer code colour highlighting of some sort. This can help you when checking which divs have classes applied etc
34 Web Design for Beginners
Doing this allows you to have a universal style to the ‘content’ div, and then apply different styles to the divs contained within.
WorldMags.net
WorldMags.net
01 The basic div
02 Closing the div
A div is started by using this simple piece of code:
. Following on from that, you can then insert all the content you want to contain within the div.
. Note the forward slash denoting the ending 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 or by any JavaScript you may add. To apply an ID to a div, use:
Classes are similar to IDs, but many items on a page can have the same class. To apply a class to a div, use:
Using classes makes styling multiple elements much easier.
WorldMags.net
Web Design for Beginners 35
Build a WorldMags.net 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 huge range of freedom when designing your pages, but there are a few layout principles that have developed over the years which it’s a good idea to follow. If you have a quick look at some of your favourite sites on the internet it’s quite likely that they will use a column layout, akin to a newspaper. A common layout for a site is to have the site or company logo at the top of the page, then have a column down the left for navigation or links, a main content section in the centre, and then a sidebar on the
36 Web Design for Beginners
right with supplementary information or Facebook and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright information, the name of the site designer, site links and sometimes a contact address. This tutorial will
show you how to code up the HTML scaffolding for a three-column layout using modern HTML5 elements. Once you have mastered this, it can then be adapted into a two- or more-than-three-column layout if you so wish.
”This tutorial will show you how to code up the HTML scaffolding for a three-column layout using modern HTML5 elements”
WorldMags.net
WorldMags.net
01 Set up your HTML page To start off, open up your favourite editor and create the initial HTML elements as usual. The first thing we need to add is the HTML5 doctype declaration: 001 This tells our browser that we are using the HTML specification within the page, and it should be placed right at the top of your HTML file.
02 Open HTML tag Next up we need to start off our HTML by entering the HTML tag – – and then making sure we close this with . This tag tells the browser that contained within this section is HTML code. All the page content that we will be creating will need to go within these tags.
03 Insert the head The head tag is an important one in HTML, and shouldn’t be confused with the ’header’ tag. Content within the head is not displayed to the user, but is used to include your CSS style sheets, JavaScript and metadata. Within your tags, place , then to close it off.
05 Define character set 04 Add a title The title tag is used to display text in the browser’s title bar at the top (if it has one), and also used as a guide for search engines to identify what content is contained within the page. Add a
tag within your head. Next, add a page title to describe the content, and close the title tag with .
There are many different ways of displaying characters in computing, and a few different standards depending on language; eg Greek or Arabic text looks very different from Chinese. Luckily for us, almost all the web uses the UTF-8 standard, which we define within our head with: 001
UTF-8 does a good job of displaying most characters correctly.
06 The body tag All the content you wish to be displayed to the user is put within a ’body’ tag. This goes after your ’head’ tag has been closed, but within your tag. Start it off with , then close it off in the normal way: . From now on we will place all code within the body tag.
09 The header 07 Adding comments
08 The container
Sometimes you may wish to add a note to a location within your page, perhaps as a reminder or to make it easier to see where certain elements start or finish. Comments are started using ’’. For example:
It’s quite common to wrap all the main content within the body in a ’container’ div. This can make styling and centring easier when you start to write up your CSS. Add a container div within the body with
and
, then give it an ID so we can style it later:
WorldMags.net
The top element to our page is usually referred to as a ’header’ and contains the site title, logo, navigation, and sometimes adverts. To create a header we use the header tag, which is new in HTML5. To open it enter
. A page can have multiple headers, although they cannot be contained within each other. Web Design for Beginners 37
Build a WorldMags.net site
10 Nav tag
11 Navigation items
12 First column
Nearly all pages contain a navigation or menu bar of some sort to allow visitors to get around the site. HTML5 now has a tag specifically for this. The ’nav’ tag is where to place links to other items. Let’s add one to our page –
– and then close off again with .
To add links to the navigation we use the
or anchor tag. Eg Products . If you don’t yet know your exact site layout, it’s common to use a ’#’ in place of the link. A hash symbol can also be used to target a specific div within a page.
Now we can add our first left column. This goes after the header tag, but still within our container div. Add this in with
and then don’t forget to close:
. Again, you can give it an ID or class, such as
. This column 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 content. Add it to the page the same way as before, but give it a different ID this time. 001
Don’t be concerned if you can’t see any content within your browser – as without styling, divs are essentially invisible and only the content contained is displayed.
16 Metadata (optional) If you know what content is going into the pages and wish to improve search engine optimisation, you can add meta information to the head. Meta information helps Google and other search engines to index and organise sites by content. The meta description tag is used to give a short account of the page content:
38 Web Design for Beginners
14 Third column
15 The footer element
The third and final column is then added in exactly the same way, with a unique ID: . If you wanted to place the name within each div to see the results in the browser and help you visualise the page layout, then you can:
The footer is used to mark the bottom of the page, and often contains a list of common links, along with copyright and/or contact information. To add a footer we simply use the HTML5 footer tag –
– and as always, close it off using . Place this after your sidebar column in the code.
17 Stopping Google indexing (optional)
18 The end result
To stop Google and other search engines indexing your page, you can add the following code to your head:
. This means the page will not be shown in Google’s search results. This can be useful on client login pages, or out-of-date pages that you wish to archive.
WorldMags.net
Save the file now, making sure to have the .html extension at the end. Open the file within a browser to see the result. As there is no styling applied yet, it won’t look particularly attractive by any means, but you’ve created a basic web page layout that’s now ready for CSS and content to be added.
WorldMags.net The three-column layout The flexible three-column page structure is used by many sites
Metadata
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 contains the navigation elements of the page, although it’s also often used for site title and logos. Here we are using the HTML5 nav element
The footer element often remains consistent throughout a site and is usually not as tall as the header, although recently there have been some great designs featuring very prominent footer elements
The main columns are
elements that you can apply CSS to later, such as width, height, padding etc. It’s usual to have the centre column the widest, but 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 of the internet population running older versions of Microsoft’s Internet Explorer which don’t support the new standard. With all the new HTML5 elements, it’s required to add in a few workarounds to get everything to work satisfactorily. One of the most popular methods is to use the HTML5Shiv . This small piece of JavaScript allows us to include the new tags such as
, and without worry. Adding the script is simple, and as it’s hosted on GoogleCode you don’t even need to download any files. Simply add this to your page’s head:’ tags, place your link to your CSS. Then we want to add in a wrapper div that will help us contain everything on the page and allow us to centre it all using CSS.<br />
<br />
03 The header<br />
<br />
04 Navigation<br />
<br />
Next we want to add in a header for our page and we do this by adding a div with an ID of ‘header’. Then within the header we are going to put our type-based logo that is wrapped within an anchor tag that links back to the home page (index.html).<br />
<br />
In this step we are going to add in the navigation. What we will use here is a standard unordered list and each list item (<li>) will have a link to each page using the ‘<a href=”’ attribute. Then we will give our unordered list a class name of ‘navigation’.<br / rel="nofollow">
<br />
05 Sidebar and search<br />
<br />
06 Sidebar navigation<br />
<br />
Let’s now add in our sidebar section. All we do here is create a div ID with the name of ‘sidebar’ just underneath the closing header div ‘</div>’. Then, using the code above, within our sidebar section let’s add in a search field that will just sit there and look pretty.<br />
<br />
Now what we need to do is now is add in what will be our sidebar navigation. This is the exactly the same code as our top main navigation, so it’s just a case of copying and pasting that into the sidebar. But we will need to give it a different class name, which can be ‘sidebar_list’.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 65<br />
<br />
Build a WorldMags.net site<br />
<br />
07 Sidebar images<br />
<br />
08 The main content<br />
<br />
We’ll now add some images to sit below our navigation list. We have the same image here for both, set to the size of 100x100px. We've given them a class name of ‘thumb’ so we can use CSS to position them better without relying on the ‘img’ tag. Also we've given this section a title with the ‘<h3>’ tag.<br />
<br />
To finish off our HTML markup, we will add in a main content section. Again let’s use an ID and name it ‘main_content’. Then within the ‘main_content’ section we can add in a ‘welcome’ title accompanied by some dummy text wrapped in a paragraph tag ‘<p>’.<br />
<br />
10 The wrapper<br />
<br />
09 The CSS Open up your ‘styles.css’ file and at the top add in the universal selector that will allow you to reset every element (<p>, <h1>, div, etc) to zero margin and padding. Then using the ‘body’ tag we can set the background colour to an off white ‘#f1f1f1’ and set our default font style and size. 001 * { 002 padding: 0; 003 margin: 0; 004 } 005 006 body { 007 background: #f1f1f1; 008 font-family: Verdana, Geneva, sans-serif; 009 font-size: 12px; 010 }<br />
<br />
11 The header & logo We’re styling our header by giving it a 100% width with a height of 250px. Adding the logo is also going to be very simple as we’ll only be using text for now. We've given ours a drop shadow using the ‘text-shadow’ property. 001 #header { 002 float: left; 003 width: 100%; 004 height: 250px; 005 } 006 #logo h1{ 007 font-size: 35px; 008 float: left; 009 margin-top: 130px; 010 color: #dac91a; 011 text-shadow: 1px 1px 3px #333; 012 }<br />
<br />
66 Web Design for Beginners<br />
<br />
So with our wrapper acting as a container for all our page content, we can centre everything using a fixed width and margin. We’re specifying 0 pixels on top and bottom, with auto margins on the left and right. This is an easy and most often the best way of centring your page on your screen. 001 #wrapper { 002 margin: 0 auto; 003 width: 960px; 004 }<br />
<br />
12 The navigation Now let’s style our navigation. We can do this by floating the whole element right, positioning it 150px down and then pulling it over to the right using a negative margin of ‘-50px’. Then we give the navigation a width of 600px. To bump everything to a horizontal position we float all the ‘<li>’ left, then create our button separator by adding a ‘border-right’ to the ‘navigation li a’ selector. 001 .navigation { 002 float: right; 003 margin: 150px -50px 0 0; 004 width: 600px; 005 } 006 .navigation li { 007 float: left; 008 list-style: none; 009 } 010 .navigation li a { 011 float: left; 012 color: #333; 013 padding: 6px 20px; 014 text-decoration: none; 015 border-right: 1px solid #333; 016 font-size: 16px; 017 }<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 14 Google fonts<br />
<br />
13 Navigation hover state At the moment our navigation looks nothing like a functional navigation menu and it still needs a couple of things added. The hover state will be the first thing we are going to add here, and then in the next step we will shoot over to Google fonts to download the ‘lobster’ font and use that. 001 .navigation li a:hover { 002 003 background-color: #333; 004 color: #fff; 005 }<br />
<br />
15 The sidebar Now in this step we are going to style our sidebar. So first we are going to float the sidebar over to the right and set a fixed height and width. Then we can style the ‘<h3>’ header tag and just push that off the left side using padding. Then give the text a dark grey colour of ‘#333’. 001 #sidebar { 002 float: right; 003 width: 300px; 004 height: 100%; 005 background: #fff; 006 } 007 008 #sidebar h3 { 009 padding-left: 20px; 010 color: #333; 011 }<br />
<br />
17 The search field In this step let’s style our search field. First of all we push it down slightly and then make sure anything underneath it is 50px away. Then we slightly push it away from the left edge using 20px. And lastly we give the input field some padding to make it a bit more attractive. 001 #search_form { 002 003 margin: 10px 0 50px 20px; 004 } 005 006 #search_form input{ 007 008 padding: 5px; 009 }<br />
<br />
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 <!-- CSS --> 002 <link rel=”stylesheet” href=”styles.css”> 003 <link href=’http://fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ 004 type=’text/css’> 005 006 .navigation li a { 007 float: left; 008 color: #333; 009 padding: 6px 20px; 010 text-decoration: none; 011 border-right: 1px solid #333; 012 font-size: 16px; 013 font-family: ‘Lobster’, cursive; 014 }<br />
<br />
16 Sidebar list Style the sidebar navigation list by pushing it away from the edges using a 20px margin. Add a subtle dotted line using the ‘border-bottom’ property. 001 .sidebar_list { 002 margin: 20px; 003 } 004 005 .sidebar_list li { 006 list-style: none; 007 margin: 10px; 008 padding-bottom: 10px; 009 border-bottom: 1px dotted #ddd; 010 } 011 012 .sidebar_list li a{ 013 text-decoration: none; 014 color: #333; 015 font-size: 13px; 016 }<br />
<br />
18 Finishing off To finish, we need to style our thumbnail images. So we float them left so they bump up to each other and then space them out by using margin. 001 .thumb { 002 float: left; 003 margin: 22px; 004 border: 1px solid #fff; 005 box-shadow: 0px 4px 6px #999; 006 }<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 67<br />
<br />
Build a WorldMags.net site<br />
<br />
Add content to your website Learn how you can add content to the main area of your website<br />
<br />
A<br />
<br />
dding content to your website is either done dynamically using a content management system (CMS) or by hand. Either way, you are going to have to learn how it’s styled and what options you have. For instance, will you have just text or text with images? How about a video that’s either embedded using YouTube’s, or your own flash or HTML5 player? Of course your choices should be dependent on what niche your website caters for and thus knowing who will be visiting your website. So in this tutorial, we will add a few elements of content where one will include a video (which you can grab whatever video you want, you don’t have to use our<br />
<br />
one) and also some text and an image. So open up the index.html and styles.css files within your text editor and follow these simple steps.<br />
<br />
“Your content choices should be dependent on the niche audience your website caters for”<br />
<br />
Content is king Let’s check out the most important parts of adding content to your webpage<br />
<br />
The top section<br />
<br />
The width<br />
<br />
It’s a good idea to add some text about your website so users can see what you are all about before going any further<br />
<br />
You will need to think about the width of your main content area(s) and plan ahead accordingly<br />
<br />
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!<br />
<br />
The bottom section The bottom section is again used as a text-based section that describes the middle section video<br />
<br />
68 Web Design for Beginners<br />
<br />
THE RIGHT STUFF Adding the right amount of content to any website is vital and can mean the difference of having a 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 it’s the white space and the way that your sections are aligned that will give your web page a better and 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 rule; we can just as easily use an image here or in some cases a bottom border. Just remember that if there’s no content, you won’t get many visitors.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
02 Main content header 01 Getting started 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 sidebar to the right. On the left we have our content area.<br />
<br />
Now in this step we are going to give our main content area a title that will welcome everyone to the website. We do this very easily by adding in a ‘<h2>’ tag and a nice message within. What we will do is use CSS later to see what we can do to make this look a little nicer. 001 <h2>Hi, Welcome to my website</h2><br />
<br />
04 Adding an image 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 will just wrap about three or four sentences within some ‘<p>’ tags.<br />
<br />
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 underneath the header. Then we will use CSS later to float it to the right. 001 <img src=”imgs/thumbnail.jpg” height=”100” width=”100” class=”main_thumb”><br />
<br />
05 Styling our content<br />
<br />
06 Content image<br />
<br />
03 Welcome text<br />
<br />
Let’s open up our ‘styles.css’ file. We can point to the ‘#main_content’ div and then hock onto the ‘p’ tag. We can then use multiple selectors here and use the same style properties and values for the<h2> tag. 001 #main_content p, h2 { 002 line-height: 22px; 003 margin-top: 10px; 004 padding: 20px; 005 width: 350px; 006<br />
<br />
}<br />
<br />
Now let’s float the image over to the right and add some styles to it. We are going to use the same CSS as we did on the sidebar thumbnails. Then we’re going to make sure we have enough white space around the image. 001 .main_thumb { 002 float: right; 003 margin: 40px; 004 border: 1px solid #fff; 005 box-shadow: 0px 4px 6px #999; 006 }<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 69<br />
<br />
Build a WorldMags.net site 08 The main content height<br />
<br />
07 Video Next we want to add the video to our main content area. Now we can get really technical and use an HTML5 or flash player here, but to keep things really simple, we can shoot over to youtube.com and copy and paste the embed code within our ‘index.html’ page. Then we want to be able to shift this video about using CSS, so it would make sense to wrap a div around it with an ID of ‘video’. 001 <div id=”video”> 002 <iframe width=”420” height=”315” src=”http://www.youtube.com/ embed/kNn44gHqanM” frameborder=”0” allowfullscreen></iframe> 003 </div><br />
<br />
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{ 002 float: left; 003 height: 100%; 004 width: 630px; 005 background: #fff; 006 border-radius: 6px; 007 margin-bottom: 40px; 008 }<br />
<br />
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 finish off our video. 001 #video { 002 float: left; 003 margin: 20px; 004 border: 5px solid #000; 005 }<br />
<br />
10 Horizontal rule 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 design software such as Photoshop or Fireworks. It’s simply an HTML tag called a horizontal rule ‘<hr>’ and we can add that just above the video div within our ‘index.html’ file. 001 <hr> 002 <div id=”video”><br />
<br />
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 using ‘margin-left’. 001 hr { 002 color: #ddd; 003 width: 570px; 004 margin-left: 20px; 005 }<br />
<br />
70 Web Design for Beginners<br />
<br />
12 Adding more content So now you should get the idea of how and what we can add for our main content. To get a real feel of it, let’s add something underneath our video. What we can do then is add in another thumbnail image. So the best way would be to use the same image but give it a different class name of ‘main_ thumb2’ and place this directly under our closing div of our ‘video’. 001 <img src=”imgs/thumbnail.jpg” height=”100” width=”100” class=”main_thumb2”><br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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”> 002 <p class=”vid_excerpt”>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making itlook like readable English. 003 </p><br />
<br />
14 Styling the content What we need to do now is style our new content using some simple CSS. So, open up your ‘styles.css’ file and position our thumbnail image first. We will float it left and then give it a 40px margin all around. Then to finish it off we can give it the same subtle drop shadow as the other thumbnail we used in the sidebar. 001 .main_thumb2 { 002 float: left; 003 margin: 40px; 004 border: 1px solid #fff; 005 box-shadow: 0px 4px 6px #999; 006 }<br />
<br />
15 The excerpt 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. 001 .vid_excerpt { 002 float: right; 003 margin: 0 50px 40px 0; 004 }<br />
<br />
16 Bottom content When looking at our HTML, it would make more sense to wrap our bottom thumbnail and excerpt content within its own div. That way we can have more control of this section if at all we need to position it further. So, create a div with an ID of ‘bottom_content’ and make sure you use an HTML comment to mark the ending div ‘</div><!-- END bottom content -->’ 001 <div id=”bottom_content”> 002 </div><!-- END bottom content --><br />
<br />
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; 005 float: left; 006 }<br />
<br />
18 Going further As we said in the intro text to this tutorial, it’s down to you as to what your content should include. Later in this book we explore adding maps, newsletters, social media icons and more!<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 71<br />
<br />
Build a WorldMags.net site<br />
<br />
Add content to your footer Finish off your first site with a footer to be proud of<br />
<br />
I<br />
<br />
n the past, the humble footer was not much more than a slim strip of colour with nothing more interesting than the copyright text written within. But in many modern websites, we have seen a huge improvement in footer designs and the content held within them. These days, they are a lot higher and contain all sorts of content, which can include contact forms, newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a newsletter sign-up field and generic About Us text, features another set of links for navigation, so our<br />
<br />
readers don’t have to scroll back to the top or to the sidebar if they want visit another page. As crazy as it sounds (and this would have sounded incredibly crazy no more than a few years ago), the footer has really taken the modern web by storm and has now developed into an area that needs good planning – like all parts of your website, it is important to offer the right amount of content without confusing the user. So in this tutorial we will build a simple footer and include some useful content that you would most likely see in a modern layout.<br />
<br />
Dissecting the footer The most important things to keep in consideration for a good footer<br />
<br />
Navigation<br />
<br />
The newsletter field<br />
<br />
Having a list of links for an extra navigation will allow your users to click through other pages without needing to scroll up<br />
<br />
We added this feature because it would make sense for people to learn more about your business/service. A contact form here is also a good idea<br />
<br />
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<br />
<br />
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.<br />
<br />
72 Web Design for Beginners<br />
<br />
“The footer has taken the web by storm and has now developed into an area that needs good planning”<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 03 Footer links<br />
<br />
01 Getting started<br />
<br />
02 About us<br />
<br />
Open up your ‘index.html’ file from the last project and scroll down to the very bottom of the document. The first we are going to do here is just underneath our closing ‘main_content’ div, add in a div with an ID of ‘footer’. 001 <div id=”footer”> 002 </div><!-- END footer --><br />
<br />
In this step we are going to add some ‘about us’ text that will be positioned to the left of our footer. So first thing to do would be to create a div with a class name of ‘about_txt’ within our footer ID making sure we add on a HTML comment to the closing div. For content, we will start with a ‘<h4>’ header tag that includes the words ‘about us’. Then underneath that we will add in some dummy text that is wrapped within paragraph tags ‘<p>’. 001 <div class=”about_txt”> 002 </div><!-- END about txt --><br />
<br />
04 Newsletter sign up Many websites would have either a contact form or newsletter sign up field within their footer. 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 under the footer links. We can then position this later over to the right using CSS. 001 <form id=”newsletter” action=”” method=”get”> 002 <input id=”search_term” type=”text” 003 placeholder=”newsletter sign up....” /> 004 <input class=”submit_button” 005 type=”submit” value=”sign up”> 006 </form><br />
<br />
05 Footer background Now we have finished our HTML mark-up, but if we viewed it in the browser now it would look a bit of a mess! So let’s open up the ‘styles.css’ file, scroll down to the very bottom and start adding some CSS for our footer. First thing we can do is clear the floats so it pops underneath everything above and give it some dimensions and a background colour of white. 001 #footer { 002 clear: both; 003 height: 200px; 004 width: 100%; 005 background: #fff; 006 margin-bottom: 20px; 007 }<br />
<br />
08 Finishing the navigation 07 List items Now style the list items‘<li>’. Here we are removing the default bullet points and then floating all the items left, which will push each one up and next to each other giving us a horizontal alignment. Then using ‘margin-left’ we can create some space between each other. 001 .footer_links li { 002 list-style: none; 003 float: left; 004 margin-left: 20px; 005 }<br />
<br />
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=”” rel="nofollow">home</a></li> 003 <li><a href=”” rel="nofollow">about</a></li> 004 <li><a href=”” rel="nofollow">blog</a></li> 005 <li><a href=”” rel="nofollow">portfolio</a></li> 006 <li><a href=”” rel="nofollow">services</a></li> 007 <li><a href=”” rel="nofollow">contact</a></li> 008 </ul><br />
<br />
Now we’re going to finish off our footer navigation. What we need to do is remove the default underline and then give the text a light grey colour. Then for our hover state, let’s just change the colour of the text to black ‘#000’, giving us a subtle rollover effect. 001 .footer_links li a { 002 text-decoration: none; 003 color: #333; 004 } 005 .footer_links li a:hover { 006 color: #000; 007 }<br />
<br />
WorldMags.net<br />
<br />
06 The links In this step let’s style our footer links so they look more like a horizontal navigation list. We are going to float it left and push it down using margin and give it 20px space at the bottom. Then let’s give it a width of 370px. 001 .footer_links { 002 float: left; 003 margin: 90px 0 20px 0px; 004 width: 370px; 005 }<br />
<br />
09 About text Styling the 'about' text is going to be very simple. We first float it left and then give it a width of 250px. We then give it some padding to allow some white space all around. One thing to remember by using padding is it will make the box element (‘div’) 20 pixels bigger as the padding effects the inner element, not the outer element, and pushes it out. 001 .about_txt { 002 float: left; 003 width: 250px; 004 padding: 20px; 005 }<br />
<br />
Web Design for Beginners 73<br />
<br />
WorldMags.net<br />
<br />
WordPress POST IMAGES Get your blog looking great and professional with our tutorial on images,<br />
<br />
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<br />
<br />
“Getting a WordPress blog up and running is much simple than firsttime users might think” 74 Web Design for Beginners<br />
<br />
SET UP YOUR SITE Get your WordPress blog up and running<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 76 Get to know WordPress 4.0 Get to see the latest updates<br />
<br />
84 Download, install and set up a self-hosted site The path to the perfect blog starts here<br />
<br />
88 View and organise WordPress dashboard modules Keep your dashboard clean and tidy<br />
<br />
94 Edit your WordPress blog posts Update that info and correct those mistakes<br />
<br />
98 Post images into your blog Get to know the multiple methods<br />
<br />
102 Embed external media in your posts Make your WordPress blog truly come alive<br />
<br />
106 Add special features to text Make your text pop<br />
<br />
90 Creating a WordPress blog Create posts with text, images and videos<br />
<br />
102 Embed media<br />
<br />
94 Edit post<br />
<br />
76 The new 4.0 WorldMags.net<br />
<br />
Web Design for Beginners 75<br />
<br />
WordPress WorldMags.net<br />
<br />
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?<br />
<br />
W<br />
<br />
ordPress 4.0 includes a selection of new features and security fixes to help bring your blog or website right up to date. Not only have improvements been made to the theme customiser view and media library interface to enhanced media handling in the visual posting view and a brand new interface for installing plugins, you’ll also find changes to the TinyMCE UI when creating a new post. It is now even possible to select a language when you install WordPress 4.0 for the first time. Enhancements to managing images and videos helps<br />
<br />
76 Web Design for Beginners<br />
<br />
to save time with previews, while browsing for new plugins has become a far better experience, allowing you to see small previews of the plugins. In the background, various security fixes have been made, ensuring that your blog, your posts and any user data is protected against online intruders. Remember to make sure your blog is up to date, and this means reviewing plugins regularly as well as making a backup before you upgrade. If you’ve been holding off on some recent updates, you shouldn’t miss WordPress 4.0!<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 77<br />
<br />
WordPress WorldMags.net<br />
<br />
Get to know the 4.0 Dashboard A new look tells you everything you need to know when you log in to WordPress At irst glance the Dashboard may not seem all that diferent in WordPress 4.0, but on closer inspection you should spot the Welcome panel, where a collection of shortcuts can be found. This panel is ideal for newcomers to WordPress because it provides shortcuts for adding widgets, installing a new theme, writing a new post and adding an about page, as well as managing widgets and menus, turning comments on and of 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, which is useful for spotting when new updates are imminent. These are all<br />
<br />
customisable as they were before, you are able to drag and drop for your own liking. You can use the Screen Options to determine which boxes appear and which remain hidden. Further items will be added to the Dashboard as you install plugins. Several prominent apps add important “at a glance”-style information to the Dashboard, such as Jetpack’s visitor stats plugin.<br />
<br />
“Everything you need to know when you log in to WordPress”<br />
<br />
Updates<br />
<br />
Customise your site<br />
<br />
Welcome panel<br />
<br />
Quick Draft<br />
<br />
Screen options<br />
<br />
Update alerts will help you to keep your blog secure and protected against online threats as well improve functionality<br />
<br />
Use the site customisr to get a preview of how your blog will look with a new background colour or with widgets added<br />
<br />
The Welcome panel introduces you to WordPress 4.0. This is useful whether you’re new to the software or an experienced user<br />
<br />
Employ the Quick Draft panel to add new blog posts in a stripped-down form, without any pressure to publish your post immediately<br />
<br />
Use the screen options to tailor each screen in WordPress to your particular workflow requirements<br />
<br />
Plugins Adding new Plugins has been revised in WordPress 4.0, with a brand new user interface that improves the experience<br />
<br />
78 Web Design for Beginners<br />
<br />
At a Glance The At a Glance panel gives you all of the information you need about your blog<br />
<br />
Activity panel<br />
<br />
Rearrange panels<br />
<br />
All recent activity on your Wordpress is grouped together in a easy to read section called Activity panel<br />
<br />
Dashboard panels can be rearranged as needed, allowing you to prioritise the information you need<br />
<br />
WorldMags.net<br />
<br />
News panel The WordPress News panel keeps you up to date with new and upcoming versions of the blogging software<br />
<br />
WorldMags.net 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.<br />
<br />
“Some plugins may need to be disabled until the developers release compatible updates”<br />
<br />
Creating posts<br />
<br />
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 beneit to new bloggers and those using WordPress as the publishing system for their top-rated, busy website. At a glance, there are very few diferences with the previous version of WordPress, but these improvements have been gradual over the past couple of years, and as such are more secure and stable here. In the Add New Post screen you’ll still ind 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 ind these work best when they are supported by your blog theme.<br />
<br />
01: Use full page editing Use the ‘Distraction Free Writing’ button to take the WordPress post editor box full-screen, and enjoy a completely new way of writing your blog.<br />
<br />
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.<br />
<br />
03: Visual Posting<br />
<br />
Customising the look and feel of your blog posts has never been easier<br />
<br />
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.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 79<br />
<br />
WordPress WorldMags.net 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.<br />
<br />
Top tip<br />
<br />
“The software will display the video preview, as it would on the sites it originates”<br />
<br />
Easily embed videos Now there is no need to preview embedded videos 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 ofers a reined 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 diferent URL. WordPress only requires the URL rather than the embed code. Should you want to remove the video, simply click the X button.<br />
<br />
80 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
Intelligent resizing rearranges the left and right menus to it above and below the editing box, enabling you to edit your blog on smaller devices.<br />
<br />
WorldMags.net 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<br />
<br />
Upload a plugin If you’ve developed your own plugin or have one to upload, use the Upload Plugin button to start<br />
<br />
Search To find plugins that aren’t listed here, use the Search box to search the WordPress plugins repository to find it<br />
<br />
Plugin details Full details about the plugin you’re considering can be viewed by clicking More Details<br />
<br />
Add new The new Add Plugins screen summarises the information you need about each plugin<br />
<br />
Plugins made easy<br />
<br />
Top tip<br />
<br />
New user interface takes the pain out of plugin installation Installing plugins can be a stressful experience. After backing-up your database and iles, you then need to ensure the plugin you’re about to install is the best option for your blog. You may run it on a test blog irst to make sure that there are no inadvertent side-efects. With WordPress 4.0, the developers Automattic have introduced a new user interface that will alleviate some of the stress by presenting available 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 ind 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 ind in future.<br />
<br />
WorldMags.net<br />
<br />
When checking new plugins, always view the screenshots. If the developer believes in the plugin, they will take time to upload screenshots.<br />
<br />
Web Design for Beginners 81<br />
<br />
WordPress WorldMags.net 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 efectively. 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 irst 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.<br />
<br />
“You can now get a full preview in the Theme Customizer”<br />
<br />
Live widgets<br />
<br />
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 installed widgets on your chosen blog theme, as long as it is compatible with live widget previews, before you have installed it. The advantage of this is clear. Where once you would have added a widget, saved it and 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!<br />
<br />
01: Customise your blog Access the Theme Customizer via Appearance>Customize. Click Widgets to view available widgets for your blog theme sidebars. You can change them in the Widgets Settings.<br />
<br />
02: Adding a widget Click Add a Widget to display the widgets you can use, and conigure the one you want to use. Observe how it updates as conirm options. Take time to try the diferent options.<br />
<br />
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.<br />
<br />
82 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Adjust your Screen Options Customise your WordPress 4.0 experience by configuring screen options How do you use WordPress? For most, it is a case of sign in, scramble around looking for the link or feature you’re looking for on the Dashboard or New Post page, write your post, and then logout. With the addition of more and more plugins over time, this process can become increasingly slow. The reason for this is simple: you’re not using WordPress right. Using the Screen Options button, available at the top of almost every admin screen in the Dashboard, you can customise the<br />
<br />
blogging software’s back-end to see only what you need. For instance, you’ve installed several plugins to your WordPress 4.0 blog, and the Dashboard is beginning to look a bit cluttered. All you need to do in this situation is open the Screen Options box at the top of the browser window, and disable items that you don’t need to see, don’t use, or don’t need to access through the Dashboard. Click the Screen Options button when you’re done.<br />
<br />
Top tip The Screen Options button is even available across several admin screens in WordPress 4.0, such as the Add New Post, All Posts and Dashboard. Open the Options Click the Screen Options button to open the concealed window, where you can make any changes to the layout<br />
<br />
The Options are flexible You can activate as many or as few of the Screen Options settings as you like<br />
<br />
Tick it to activate it To enable a control, place a tick in the corresponding box. Removing the tick will hide the control<br />
<br />
TinyMCE editor Maximise the space to compose your posts by using this option to expand the TinyMCE editor’s dimensions<br />
<br />
Number of columns Too many columns? Use the Number of Columns option to restyle the layout<br />
<br />
Click it to close it Click the Screen Options button to close the window, and carrying on blogging<br />
<br />
Toggling tools Even controls with their own tool for closing can be toggled off and on<br />
<br />
Don’t hide, minimise Rather than disable panels completely, you might prefer to minimise them, expanding them only when you need to use them<br />
<br />
Tailor menus These controls are tailored to your WordPress Dashboard screen<br />
<br />
Different screens Different WordPress admin screens feature a different set of options<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 83<br />
<br />
WordPress WorldMags.net<br />
<br />
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<br />
<br />
W<br />
<br />
ordPress has become synonymous with the term blog, and with good reason. The web publishing platform is free to download, easy to install and simple to use. Add into this already appealing mix the fact that there are continual updates and development, swathes of themes and literally thousands and thousands of add-ons and it’s hard to see what’s not to like. WordPress itself comes in two distinct flavours: either hosted via www.wordpress.com or selfhosted via www.wordpress.org, as we explained<br />
<br />
earlier. In this tutorial we are focusing on the selfhosting option, which relates to users who already own a domain name and web space. The WordPress site extols the virtues of its famous 'five-minute installation’ and undoubtedly<br />
<br />
“It’s free to download, easy to install and simple to use” The WordPress Dashboard Where you’ll be spending most of your time in WordPress<br />
<br />
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<br />
<br />
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<br />
<br />
84 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WordPress can be installed in five minutes, when you know what you are doing. However, for those not so well acquainted with the WordPress platform, the process is a little more in-depth. Here we look at the basics, namely where to download the latest version of WordPress and how to install. We also take a more in-depth look at setting up a MySQL database and how to transfer files, ready for installation, via an FTP client. Finally, we run through the installation process and take a peek at how to modify some of WordPress’s essential settings.<br />
<br />
WorldMags.net<br />
<br />
01 Get WordPress<br />
<br />
02 Web host account<br />
<br />
03 Create a database<br />
<br />
The first step to a great blog is downloading and installing the platform. To download the latest version of WordPress, head to wordpress.org/ download, click Download WordPress and save the file to the desktop.<br />
<br />
Before installing WordPress, a database needs to be created. We are going to demonstrate a typical setup using cPanel. First of all you’ll need to log in to your web host account; these details should have been provided by your web host.<br />
<br />
Locate the Database section and MySQL Database Wizard. Create a database, add a name in New Database and press Next Step. Now add a username and password, then press Next Step. Now click All Privileges and Next Step.<br />
<br />
04 Database details<br />
<br />
05 Settings<br />
<br />
06 Get connected<br />
<br />
Head to the location of the WordPress download and locate wp-config-sample.php. Rename the file 'wp-config.php' and then open it in a text editor. At the top under MySQL settings is where the database and details need to be added.<br />
<br />
The only settings that need to be changed are ‘DB_NAME’, ‘DB_USER’ and ‘DB_PASSWORD’. Now substitute the putyourdbnamehere, usernamehere and yourpasswordhere with the appropriate text. Now save the file.<br />
<br />
Now upload all the WordPress files to the desired web space using FTP. Open FileZilla and go to File>Site Manager and enter the Host address, ie ftp.mywebsitename.co.uk and username and password as provided by your host. Press Connect.<br />
<br />
07 Create directory<br />
<br />
08 Transfer files<br />
<br />
09 Installation script<br />
<br />
There will be two windows, the left displaying local files and the right showing files on the server. Double-click the www folder in the top-right pane to get to the root. Right-click the bottom-right pane, select Create directory and name.<br />
<br />
Double-click the folder just created. Go to the left windows and use both to locate the WordPress download. Make sure the WordPress folder lowest down the structure is selected. Select all files, rightclick and select Upload to transfer the files.<br />
<br />
After all the files have been uploaded, open a browser and enter www.yoursite.co.uk/blog/ wp-admin/install.php. ‘Yoursite.co.uk’ is the domain name where WordPress is installed and ‘blog’ is the name of the folder.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 85<br />
<br />
WordPress WorldMags.net 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 space is required and the expected traffic. Typically, users can get 200MB of web space and gigabytes of traffic for a very small fee. But if more space is likely to be needed, eg for a photo blog, go for more. A small UK company that provides cheap and 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 domain name supplier is Easily (www.easily.co.uk). If the prospect of finding web space and getting a domain name seems like a lot of hard work, you could always go for the hosted option. Go to www. wordpress.com, click Sign Up Now and all that’s needed is an email address. This gives a new user a unique WordPress URL, for example myname. wordpress.com, and hosts the account.<br />
<br />
10 It’s the dashboard<br />
<br />
11 New password<br />
<br />
Now add a Blog Title, your email address, click the Allow… checkbox and press Install WordPress. Press Log In to skip to the log-in screen, enter the details just given and hit Log In to view the WordPress Dashboard.<br />
<br />
WordPress automatically displays a notice telling the user that they are using the auto-generated password. Now add a new password under About Yourself (under Users in the sidebar), enter again and then press Update Profile.<br />
<br />
12 General Settings<br />
<br />
13 Writing and reading<br />
<br />
Click Settings to extend the menu and select General. This section allows users to change the Blog title and tagline, as seen in the header. There is the option to change the original email address added at setup.<br />
<br />
The Writing settings includes the option to choose the default category. This will be applied when a post is not given a category. There’s also an option to set up remote publishing. This allows users to post from a desktop without logging in.<br />
<br />
Find a domain name to create an identity for your blog<br />
<br />
14 Media Settings Try the free ‘no hassle’ option at www.wordpress.com<br />
<br />
86 Web Design for Beginners<br />
<br />
The media settings determine the size of images placed in a post. WordPress allows users to select the original size of the image or a predefined<br />
<br />
WorldMags.net<br />
<br />
option set up here. Change the settings to the desired size. This makes sure that when a specific option is selected the image will be a uniform size.<br />
<br />
WorldMags.net 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.<br />
<br />
"There are certain things that need to be set up from the very start"<br />
<br />
01 The General Settings<br />
<br />
02 The Writing Settings<br />
<br />
03 The Permalink Settings<br />
<br />
At the top of the Settings panel you will find the ‘General' settings option. If you click to open that up you will see first and foremost an option to change your site’s main title. You will also have an option to include a tagline here. These two options are really all you need to change. Once you have added in your website’s title and perhaps your tagline, you can scroll down to the bottom and click the Save button.<br />
<br />
The next option down in the Settings panel is the ‘Writing’ option. Click that to open up our Writing panel. In here, among other things, you have the option of changing the number of lines you have to work in when you’re adding a new post to your blog. By default it is set to ten lines, but on a small screen this can seem quite cramped. So you can, for example, set it to 20 lines to allow yourself more space when adding content to posts or pages.<br />
<br />
The other options in Settings are not really important enough to warrant an explanation and can be left as is. But the last option, the ‘Permalink’ settings, certainly does, so let’s open that up to take a better look. You have different ways your posts will be shown inside the URL and by default the top one should be selected. However, the best ones to use here are the second or third option as these include the ‘slug’ of your post which is good for SEO purposes.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 87<br />
<br />
WordPress WorldMags.net<br />
<br />
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<br />
<br />
O<br />
<br />
ne of WordPress’s many strengths is its simplicity, and the Dashboard is an area where this simplicity truly shines. Offering everything you need right from the get-go, you can quickly get on with the actual work of editing and posting to your site without distraction. As well as a side panel that offers navigation, the Dashboard is made up of modules. These are small widgets that provide you with information from various portions<br />
<br />
of your site, such as comments and links. As with most elements of WordPress, the Dashboard is customisable so you can set it up exactly as you<br />
<br />
Dashboard modules Keep the ones you like, and get rid of the ones you don’t<br />
<br />
88 Web Design for Beginners<br />
<br />
“You can set your dashboard up exactly as you wish”<br />
<br />
wish and position the most important elements within easy reach. Over the following nine steps we will show you how to determine which modules are shown on your Dashboard, where they are placed and how they are displayed. You will also learn how to save space on your Dashboard by expanding and collapsing your modules, as well as the side panel itself.<br />
<br />
Comment module<br />
<br />
Screen options<br />
<br />
If you don’t receive many comments or you don’t want to see the ones that you do, uncheck its ‘Show on Screen’ box in Screen Options and you won’t have to worry about it<br />
<br />
Click here to access all the options for customising your WordPress dashboard. From here you can delete modules or arrange them in a specific order<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 Log in to WordPress<br />
<br />
02 Screen options<br />
<br />
03 Help options<br />
<br />
Begin by logging in the normal way. The first page you hit will be your Dashboard. At the top of the screen you will see a Screen Options button. You need to click on this button to begin adjusting the way your Dashboard is set up.<br />
<br />
The check boxes under the ‘Show on screen’ section on the Screen Options menu determine which modules will be displayed by default on your Dashboard. Check or un-check a box to add or remove the module from your Dashboard.<br />
<br />
Click on the Screen Options tab again to close the section. Once done you will also see a Help tab in the top-right corner of the main Dashboard screen. Click on this to get assistance with all aspects of your WordPress Dashboard.<br />
<br />
04 Drag and drop<br />
<br />
05 Expand and collapse<br />
<br />
06 Side panel<br />
<br />
You can now click on Help again to hide the window and return to your Dashboard. With your preferred modules in place, you can organise them. You have to click the title of a module and drag it to a new location.<br />
<br />
If you don’t need to access a module all the time but you still want it to be available on your Dashboard, you can collapse it until you need it. To do this, hover your cursor over the title of your module and click on the triangle that appears.<br />
<br />
The side panel, which includes Posts, Media, Links, Pages and Comments, works in the same way as modules when it comes to expanding and collapsing. You need to hover over the title of the side panel element and use the triangle.<br />
<br />
07 Hide the panel<br />
<br />
08 Easy access<br />
<br />
09 Back to dashboard<br />
<br />
If you want more room to work with your modules, you can choose to hide the side panel and see its contents as small buttons. To do this, click on the arrow found bellow the side panel called ‘Collapse menu’.<br />
<br />
If you want to jump straight in without using modules on your Dashboard then you can click on the New button at the top of your Dashboard screen and choose Post to begin writing, or click on one of the other options.<br />
<br />
The Dashboard button is found on all of the pages you will use in WordPress. If you move into another section of WordPress, such as Comments or Posts, you can always head back to your Dashboard by clicking this button at any time.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 89<br />
<br />
WordPress WorldMags.net<br />
<br />
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<br />
<br />
G<br />
<br />
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.<br />
<br />
01 Log in<br />
<br />
02 The Dashboard<br />
<br />
There are two options, first visit the URL of the blog, for example www. myblog.co.uk/blog. If the default theme hasn’t been changed it’ll have a Log in link under Meta. Click this and add your details. Otherwise it can be accessed via www.myblog.co.uk/blog/wp-login.php.<br />
<br />
In the Dashboard , users will need to pay attention to the menu on the left and to a lesser degree At A Glance and QuickPress. The other modules Incoming Links, Other WordPress News etc, can be hidden to free up screen space. Click Screen Options and the check boxes of the modules you want removed.<br />
<br />
90 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
03 At a Glance<br />
<br />
04 The Posts menu<br />
<br />
05 New post<br />
<br />
The At a Glance module gives users a quick summary of the current state of the blog. All the elements in the Right Now module link directly to its related counterpart. Click the title bar on a module to expand/collapse.<br />
<br />
To add or edit posts, the Posts menu is the place to start. Click the Posts title bar and the menu will expand to reveal the post options. To edit a current post, click Edit and all the posts stored on the database will be revealed.<br />
<br />
The new post window is divided into two sections, the title and the body. The first text box in Add New Post is where the title goes. Remember, the formatting will differ from what you see as this is determined in the style sheet.<br />
<br />
06 Post text<br />
<br />
07 Simple styling<br />
<br />
The body of the post is placed in the second text box and this will contain all the text and images found in a single post. To add the post text, type in the desired text like you would do in any other document. Remember to abide by any standard grammar rules, such as paragraphs and so on.<br />
<br />
The Visual post editor is a simple editor, it is much like using word processing software such as Microsoft Word. Click the last icon on the toolbar, it’s called Toolbar Toggle, to view all options. To bold the first sentence, select the text and press B, alternatively use the keyboard shortcut Ctrl/Cmd+C.<br />
<br />
08 More styling<br />
<br />
09 Resizing text<br />
<br />
To add more styles to the text, select the appropriate button. ‘I’ adds the italic effect, ‘ABC’ chooses a language, ‘U’ adds an underline and ‘A’ allows users to choose a new colour for the text. Use the Align buttons to place your text left, right or centrally.<br />
<br />
The text in a post can’t be resized in the traditional sense. The text size is predetermined by the theme in use. However, the Paragraph drop-down list has a number of options, such as Paragraph, Heading 1, Heading 2, etc. Heading 1 is the largest, 6 the smallest and Paragraph normal.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 91<br />
<br />
WordPress WorldMags.net 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 and provides all the essentials without the need to go beyond the opening page. Users can add a title, text, insert images, video, audio etc and add tags. Editing and updating posts is a simple but essential task and a visit to Edit>Posts will reveal all 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 (needs http:). By default, WordPress includes http://, so if copying in a URL remember to check that the http:// has not doubled up. Target allows the user to choose if the link URL opens in the same window or new window. There is the option to add a title, and to add a class. This effectively styles the link using a predetermined style.<br />
<br />
10 Preview post<br />
<br />
11 Save Draft<br />
<br />
The post is now beginning to take shape. Click Preview in the Publish module, this will open another window to display the selected post. Keep the window open and refresh when more has been added to the post.<br />
<br />
If the post is in good shape, save a draft by pressing Save Draft. This will save the post and reload the page, allowing the user to continue adding to the post. The draft of the post can be found via Posts>All Posts.<br />
<br />
12 Upload an image<br />
<br />
13 Insert options<br />
<br />
Post text is often accompanied by an image. To insert an image, place the cursor in the position where the image is set to appear. Click the Add Media icon, then Select Files, browse to the location of the image, select it and press Open.<br />
<br />
There are a whole host of image options. The name of the image is used as the title, this is the text that will be seen in the browser when the cursor is placed on the image. Caption text will appear directly underneath the text.<br />
<br />
14 Image alignment<br />
<br />
15 Image size<br />
<br />
Before inserting an image the alignment options need to be determined. If the Alignment option remains as the default (None), all text will be placed above and below the image. Left, right and centre will wrap text around the image.<br />
<br />
Users can choose to select an image size before adding to a post. Full Size is the actual size of the image. The remaining options – Thumbnail and Medium – have their sizes predetermined by the current theme.<br />
<br />
Use the Quick Edit option to quickly change categories, add tags and modify the title<br />
<br />
The Insert/edit link window allows users to link to internal posts or pages<br />
<br />
92 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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.<br />
<br />
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.<br />
<br />
18 Video options<br />
<br />
19 Add a YouTube video<br />
<br />
20 Read more<br />
<br />
Place the cursor in the position where the video is to be added. Click the Add Media button, select the video and wait for it to upload. Click the video to view the different options. Add a Title, Caption or Description and click Insert into Post.<br />
<br />
Head to YouTube (www.youtube.com) and search for a video. Underneath the video is a Share button, click to reveal the Embed button. Copy the code, head back to WordPress, switch to the HTML view and paste the code into the post.<br />
<br />
A post will display all the text and images on the front page of a post. To reduce the amount of post text on the front page, the More tag can be inserted. Place the cursor in the desired position and press the Insert More tag button.<br />
<br />
21 Tags<br />
<br />
22 Categories<br />
<br />
23 Publish<br />
<br />
Adding tags helps identify the content of a post and helps visitors find a specific post. To add a tag simply enter the descriptive text in the Post Tags text box and press Add. Repeat to add more tags. To remove a tag click 'x' next to the tag.<br />
<br />
Categories help define where a post can be found. Create a new category by clicking Add New Category, adding the title and pressing Add. By default all new categories are selected. Choose the relevant category or categories for the post.<br />
<br />
Finally, the time has come to publish the post. Check the post via the Preview button, make any adjustments and hit Publish. The post will now appear on the blog front page. Head back to Posts>Add New and start populating your blog.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 93<br />
<br />
WordPress WorldMags.net<br />
<br />
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<br />
<br />
W<br />
<br />
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 timesensitive, 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.<br />
<br />
01 A quick check over<br />
<br />
02 Editing shortcut<br />
<br />
Once you have finished composing a post and have published it on your blog it is always good practice to go to your site and give it a quick once over – if you haven’t got someone checking your text, simple mistakes can be easily missed. Click View Post to preview it.<br />
<br />
To edit your words, you need to click through to the post you have just published. If you are still logged in to your WordPress account then you will see a little red icon called Edit Post at the top of the post. If you click on this, you will be taken straight through to the edit post screen.<br />
<br />
94 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
03 Begin editing<br />
<br />
04 Post management<br />
<br />
05 Editing options<br />
<br />
You will be back at the editing screen where you created the post in the first place. Use it as you would when creating a new post from scratch – text, images, URLs, tags and categories are all editable too. Click ‘Update post’ when done.<br />
<br />
For much wider editing purposes, open the control panel and click on the Posts menu option found over on the left-hand side of the screen. This will now open a new screen showing every post you have published on your site.<br />
<br />
Hover your mouse over a post and some options will appear, including Edit and Quick Edit. Edit is the same as the Edit Post option from Step two, taking you to the regular post editing screen. Choose this option if you need to change the text.<br />
<br />
06 Quick Edits<br />
<br />
07 Changing the slug<br />
<br />
If you are happy with the content of a post but still need to edit it more for housekeeping purposes, for example to add it to a new category or change its tags, you can simply select the Quick Edit option. The box will now expand to give you a range of admin options.<br />
<br />
One interesting – and useful – change you can make to a post is the slug. This is the part of the URL that is automatically generated from the title of your post. For ease of use, you can change this to something a little bit more memorable than the default one.<br />
<br />
08 Author name<br />
<br />
09 Categories<br />
<br />
Likewise, you might need to change the author name assigned to the post. Even if you are the only person posting on your site, you might want to post site announcements under ‘admin’ or similar to keep them separate from content posted under your own name.<br />
<br />
If you forgot to add your post to relevant categories initially then you can do that under the Quick Edit function here. However, if you want to create a new category you will need to either go into full editing mode or click on the Categories option in the left-hand menu in order to create it.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 95<br />
<br />
WordPress WorldMags.net 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 you are only correcting a typo or tweaking an image, this is exactly how you would want it to be, but if you have made a significant change to one of your posts then you need to be able to alert readers to your changes so they can find out all the latest news on stories available on your blog. The way to go about this is by adjusting the date 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 you have more information to add to a news story, or are making a change based on readers’ comments. Rather than writing in the lines, add a new paragraph at the bottom of the post, marked Update. If necessary, you could also add the word (updated) to the post title as well. Your readers will be grateful for this as it’ll save them searching for the new content.<br />
<br />
10 Changing status<br />
<br />
11 Make it stick<br />
<br />
After making any of these changes, you need to make sure you click the Update button in order to apply them to the post. If you open another post before doing so then your post will not be updated. If you want to undo any changes, click the Cancel button.<br />
<br />
Quick Edit is extremely useful for making minor changes to single posts, but sometimes you will want to make similar changes to multiple posts, for example, when you are cleaning up your tags, to ensure consistency. Click the Posts option to view all the posts on your blog.<br />
<br />
12 Update your post<br />
<br />
13 Bulk editing<br />
<br />
To insert an image into a post first, place the cursor in the position. Click the Add Media icon, the first in the line next to Upload/Insert. Click Select Files, browse to the location of the image, select, press Open and it is uploaded.<br />
<br />
There are options associated with an image before it is inserted into a post. The name of the image is used as the title; the text seen in the browser when the cursor is placed on the image. Caption text will appear under the text.<br />
<br />
14 Choosing your posts<br />
<br />
15 Getting ready to edit<br />
<br />
There is a check box next to every post, so tick the ones you want to edit in bulk. If some of the posts are listed on another page you will need to use the Search function to find them – clicking through pages will lose your previous selections.<br />
<br />
With your multiple posts selected, click on the drop-down menu at the top of the window that is marked Bulk Actions and choose Edit from the list. Click Apply to open the bulk editing menu options. This feature can save you a lot of time.<br />
<br />
Updated RSS feeds will be clearly marked so your readers can look out for changes<br />
<br />
Mark the changes you make to your posts clearly so your readers can find them easily<br />
<br />
96 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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.<br />
<br />
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.<br />
<br />
18 Closing comments<br />
<br />
19 Managing tags<br />
<br />
20 Editing categories<br />
<br />
Another good use of batch editing is for closing comments that may appear on older posts. These are the ones that are likely to attract spam so you can prevent more comments by selecting the ‘Do not allow’ option from the Comments menu.<br />
<br />
Under Posts is the Tags option, click to open. Here a new tag can be added by adding a tag name, slug and description and pressing Add New Tag. The available tags are listed to the right, hover the cursor over a tag and press Edit.<br />
<br />
Categories are the most important way of keeping your site organised and its content manageable. As with posts you can edit them in bulk by ticking the box next to them, although in this instance they can only be deleted.<br />
<br />
21 Tidying your categories<br />
<br />
22 New categories<br />
<br />
23 Category slugs<br />
<br />
Hover your mouse over a category in order to see the Edit option. Click this and you can fill in additional details about the category, for example a description which can be shown in your blog’s theme to give users more info.<br />
<br />
To create a new category enter a name and click on the Add New Category button. You can now assign posts to this category using the Quick Edit function explained in Step nine. Try to keep categories to a minimum though.<br />
<br />
Finally you can change the slugs for each category. By default, the category URL will be derived from the name, but if there are multiple words in it you might want to give it a shorter, friendlier name.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 97<br />
<br />
WordPress WorldMags.net<br />
<br />
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<br />
<br />
I<br />
<br />
t almost goes without saying that good images are a crucial part of any blog – yours or anyone else’s. Even if your site is not particularly visually oriented, you’re not running a photography business for example, a well-chosen image displayed on the front page of the blog is second only to post titles in encouraging visitors to click through to read your content. Images can also be used to help pace the reader by breaking up longer posts, transforming large swathes of text into more digestible chunks. If you want to drive traffic onto your blog and keep it there, then you need to make it look good – text-<br />
<br />
only pages will drive people away, and that’s the last thing that you want to happen. Adding images to posts is actually quite a simple process in WordPress, but the site does give you a number of different ways of not only adding but also managing the images you’ve used.<br />
<br />
“Images can also be used to help pace longer posts by breaking up large swathes of text into more digestible chunks”<br />
<br />
Effective images<br />
<br />
How well-placed pictures can improve your blog dramatically<br />
<br />
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<br />
<br />
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<br />
<br />
98 Web Design for Beginners<br />
<br />
In this tutorial we will take a look at each of these techniques, giving you and insight into how to get the most from your blog. Once you have got going with adding visual enhancements in this way, it will be one of the most common tasks you will – or at least, you should be – performing on your blog.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 Position the cursor<br />
<br />
02 Find your images<br />
<br />
03 Uploading images<br />
<br />
As a general rule, it’s easier to add your images either before or after you have added your text. All you have to do is position the cursor where you would like your first image to go, then simply click the Add Media button.<br />
<br />
From the window that opens, you will see that you have various methods for finding and adding images to your post. Select Upload Files and then find the image that you wish to add. You can either drag it in or find it by clicking Select Files.<br />
<br />
Now select an image, or images, to upload to your site. It’s a good idea to group all your images together into a folder before you begin. Ensure your files are JPEG, GIF or PNGs – WordPress will upload other formats but won’t display them.<br />
<br />
04 Pick a name<br />
<br />
05 Adjusting links<br />
<br />
06 Resize the image<br />
<br />
The caption serves as caption and alternate text if the image is not displayed, and a relevant name will help you find an image to reuse it later. Be aware that some templates might have problems displaying captions on the front page.<br />
<br />
You have three options on what you link an image to. Choose File URL so that when the image is clicked the full size version is displayed separately, or Post URL so that clicking the image displays the full post. Click None to remove all links.<br />
<br />
If your image is large you should resize it before uploading to WordPress. The Medium option will resize an image so that it is usable within most templates. Thumbnail crops an image down to 150x150. Full size may require resizing.<br />
<br />
07 Alignment options<br />
<br />
08 Inserting the image<br />
<br />
09 Manually resizing pictures<br />
<br />
When you’ve selected the image size, you need to choose how the image is aligned in the post. Align Left or Right will wrap the text of your post around the image. Your post needs to be long enough to cover the height of the image.<br />
<br />
In most cases you may choose None and use the default alignment. Once you have done this, click the Insert into Post option and the image will now be placed at the position of your cursor in Step one, or you can just drag it to a new position.<br />
<br />
If you selected Full Size in Step six, your image might now be too wide. If this is the case you can resize it. Click on the image then grab one of the handlebars and drag inwards to make it smaller – the new dimensions are shown.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 99<br />
<br />
WordPress WorldMags.net 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 images as a way of enhancing both the look and usability of your site. Dragging the image handles, as we showed in Step nine, will change the physical dimensions of an image as it is displayed on a webpage, but will have no effect at all on its file size. If your site is image-heavy, and if you are working with photos especially, your original image files 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 text, but clicking on the image will open it in a new window, displaying the full high-res version. Remember that high-res images can easily be acquired and used on other sites, so if you have any that are especially unique to you, it is a good idea to watermark them, something you can do simply by 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.<br />
<br />
10 Images from URLs<br />
<br />
11 The gallery<br />
<br />
The other options for inserting images include ‘from URL’. This requires you to enter the URL of an image hosted on another site. You should use externally hosted images very sparingly, since displaying the image on your site will use the other site’s bandwidth.<br />
<br />
The third image option is Gallery. What this does is show all of the images associated with the post you are editing. If you uploaded multiple images in Step three, they’ll all be listed here, ready for you to edit and insert them into the post. It’s not possible to batch edit all of your images.<br />
<br />
12 Create an image gallery<br />
<br />
13 The Media Library<br />
<br />
If you want to insert a thumbnail image gallery into your post, view the bottom half of the gallery screen. The Gallery Settings enable you to post an entire group of images in one go. To manually order them you need to enter a number in the Order column, then just click Insert Gallery.<br />
<br />
The final option is the Media Library, where you can access every image you have uploaded to your site. This is where you come when you need to reuse images already posted. So long as you’ve given them sensible names they will be easily searchable. Click Show to see the usual options.<br />
<br />
Size your images to fit neatly into the main column of your blog template<br />
<br />
14 Editing and deleting Linking to the file will also ensure users can view a higher res version if they need to<br />
<br />
100 Web Design for Beginners<br />
<br />
If at any point you want to make changes to the way an image is displayed on your blog, simply click on 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.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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.<br />
<br />
“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.<br />
<br />
03 WordPress year theme changes 01 Use the Set Featured Image link<br />
<br />
Up until the Twenty Ten WordPress theme, once the post’s featured image had been uploaded and saved, it could be found on the post page. But from the Twenty Eleven theme up to Twenty Fifteen, it is actually added to the header of that post.<br />
<br />
Once logged into your dashboard, you should see a Featured Image box on the right-hand side of the post page. Initially it will only include a link to “Set Featured Image”. Clicking the link will open up the usual WordPress image uploader where you will upload the image as usual.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 101<br />
<br />
WordPress WorldMags.net<br />
<br />
Embed external media in your WordPress posts Engage your audience by creating WordPress posts that feature embedded videos, images and more<br />
<br />
C<br />
<br />
reating posts in WordPress entails writing content that is interesting and engaging. This may be a daunting prospect but you’re not just limited to text. WordPress includes the facility to embed media within posts. This means you can place images, music, videos and more in a post to help bring your blog to life. Don’t worry if you don’t have any content of your own to begin with. You can embed content from other online sources. Think of it as creating a web link to something on another website. This linked<br />
<br />
102 Web Design for Beginners<br />
<br />
content will then play from within your WordPress blog. You can embed content from services such as Vine, Tumblr and SoundCloud to name but a few. In earlier versions of WordPress embedding content was a more technical task. It used to involve a little HTML coding to get working. The good news is that for the most popular online services this is no longer the case. WordPress has a white list of services that it supports for automatic embedding. You can find it at https://codex.wordpress.org/ Embeds. Embedding content from these services<br />
<br />
WorldMags.net<br />
<br />
requires just a web link. Once added to a post (as text, not as a hyperlink) the WordPress editor will recognise it. From here it will embed the content into your post. Often the embedded item will carry the look and feel of the source website and in some cases it will even include various interactive controls. Embedded media can add a professional touch to a blog post with minimal effort. Just ensure it’s used in the right way. Overloading a post with embedded media can be messy. It can also slow download times which could put off your audience.<br />
<br />
WorldMags.net Go full screen<br />
<br />
Visual or HTML<br />
<br />
You can expand the editor view by clicking on the Full Screen icon. Click it again to reduce the view back to the default size<br />
<br />
There are two main post editing windows, Visual & HTML. Visual works like a word processor. HTML is for adding HTML code. Use the tabs to switch between the two<br />
<br />
Remove the hyperlink If the embedded content is not appearing make sure that the link has not been converted to a hyperlink. Highlight it and click the ‘Remove Link’ icon<br />
<br />
Add Media There is an ‘Add Media’ option which can also be used to place images and videos in your blog. Bear in mind, this method uses storage space and server resources<br />
<br />
Positioning a link<br />
<br />
Preview your content<br />
<br />
When adding an embed link bear in mind where you would like it to appear in your post. It will appear wherever you place it within your normal text<br />
<br />
You can get an idea of how your added content will look by clicking the ‘Preview’ button. This will open a new tab without losing your current post edit<br />
<br />
01 Embedding an image<br />
<br />
02 Copy and paste<br />
<br />
03 Embed Video<br />
<br />
Images are a quick and simple way to make a blog post more interesting. WordPress has a built-in menu for embedding images but there is a simpler method. First, browse to an online image that you wish to embed.<br />
<br />
When pasting a URL for embedding purposes make sure it is pasted as text only. Don’t use the ‘Insert Link’ option from the toolbar. This means the difference between embedding the image or just displaying the link itself.<br />
<br />
Whether it’s a six second Vine video or an extended YouTube clip, embedding a video into your posts can help draw an audience. Much like the previous step you can go with a simple copy and paste approach.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 103<br />
<br />
WordPress WorldMags.net Pick a player SoundCloud gives you a choice of two music players. Large or streamlined. The larger option also provides a range of sizes<br />
<br />
Adjust colours<br />
<br />
Code and preview<br />
<br />
SoundCloud provides some simple colour options with regards to the playback button. You can also click on the colour grid to apply various shades<br />
<br />
As options are selected the code box updates to relect any changes. Tick the ‘WordPress Code’ option to convert it to optimised code<br />
<br />
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 will appear in your blog<br />
<br />
Toggling options By default the extra choices regarding colours and playback are not visible. You can access them by clicking ‘More Options’<br />
<br />
Automatic playback This option determines whether your embedded media player will automatically play the chosen song once it has inished loading<br />
<br />
04 Embedding a tweet<br />
<br />
05 Copy the link<br />
<br />
06 Preview your Tweet<br />
<br />
An embedded tweet can provide a snapshot of information or a quote. It will appear in your blog as it would appear on the Twitter website. To embed a tweet, head to twitter.com and click on the ‘More’ icon.<br />
<br />
Select ‘Copy Link to Tweet’ from the drop down menu. Twitter will now open a new window showing you the link. Copy this and open a post in WordPress that you wish to edit. Paste the link into the appropriate section of your post.<br />
<br />
Click the Preview button in the WordPress editor to see how it will appear in your blog. From the avatar to the hashtags, various parts of the tweet are interactive. There’s even a Follow button. Embedded Tweets are easy on loading times.<br />
<br />
104 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Support for embedding The key to safely embedding is to keep your WordPress up to date<br />
<br />
07 Embed music<br />
<br />
08 Grab a link<br />
<br />
Embedding a song places it into your blog within a dedicated player helping increase audience engagement with your posts. Two examples of music sources are SoundCloud and Spotify. Extracting a song from them and adding it to your blog is a simple copy and paste job.<br />
<br />
On SoundCloud find a track and click ‘Share’. Copy the link and paste it into a blog post. Make sure you leave it as text, don’t convert it into a hyperlink. In Spotify right click on a track or an entire playlist to access the link. Again, paste this into a post.<br />
<br />
09 Embed Tumblr Posts<br />
<br />
10 Vine’s embedding options<br />
<br />
If you have a Tumblr blog you can embed posts into your WordPress blog. You can also embed Tumblr posts created by others. Again, it’s a case of copying and pasting the URL. WordPress embeds posts with a Tumblr header and footer.<br />
<br />
Some services offer specific embedding options. These allow for more customisation over the simple copy and paste approach. For example, in Vine you can toggle video size, the window format and the video auto-play.<br />
<br />
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 is why the Whitelist exists, to prevent accidental embedding from malicious websites. Support for newer services is available with each new release of WordPress. By keeping WordPress updated you will ensure you have the most embedding options available. If your blog is hosted on the WordPress servers then it is updated automatically. Users with self-hosted WordPress blogs will 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.<br />
<br />
Maximise your embedding options by keeping WordPress regularly updated<br />
<br />
11 Adding HTML code<br />
<br />
12 The [Embed] shortcode<br />
<br />
With this approach you will need to copy the code and paste it to the HTML section of the post editor. Click the tab titled ‘HTML’ in the post editor. Now paste the HTML code in the relevant place. Click the ‘Visual’ tab once you’re done.<br />
<br />
WordPress also has a dedicated [Embed] shortcode. This instructs WordPress on the allowed dimensions of an object. Place the chosen URL within the integers ‘width’ and ‘height’ (as per our example).<br />
<br />
WorldMags.net<br />
<br />
Some of WordPress’s many plugins will help you when embedding on your site<br />
<br />
Web Design for Beginners 105<br />
<br />
WordPress WorldMags.net<br />
<br />
Add special features to the text Improve the readability of your website with bullet points, lists and indents<br />
<br />
I<br />
<br />
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.<br />
<br />
“These effects will brighten up dull text and make your blog more interesting”<br />
<br />
01 Add bullet points<br />
<br />
02 Add numbered lists<br />
<br />
If you want to add one or more bullet points into your text, you can do so by simply enter the first one on a line on its own and then click the Unordered List icon in the formatting bar. Press Return once to continue to add another, or twice to stop.<br />
<br />
If you don't want to use bullet points, you might want to create a numbered list of items instead, which is just as simple to do. Just type them on separate lines and then select the first, click Ordered List, select the second and repeat the process.<br />
<br />
106 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Special features<br />
<br />
Discover the features in WordPress Bullets and lists<br />
<br />
Indent the text<br />
<br />
Add interest<br />
<br />
Text can be indented and a large lefthand margin created in order to make your words stand out. It can be clicked more than once and it increases the indent each time. Outdent reverses this<br />
<br />
Add interest for your readers by varying the text and the special efects that you use. It is good to have something to break up the text like bullets, indents, lists and so on<br />
<br />
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<br />
<br />
Custom characters This icon displays a palette of characters that are either hard to ind on the keyboard or are simply not available. Just point and click on the one you want to insert in the text<br />
<br />
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 efects have keyboard shortcuts and you can create bullet points, for example, by pressing Opt/Alt+Shift+U.<br />
<br />
03 Insert special characters<br />
<br />
04 Indent a paragraph<br />
<br />
There are certain characters and symbols that you might want to use in a post that aren’t on the keyboard, such as the copyright symbol. You can find these by clicking on the Insert Custom Character icon, which is Ω, and then simply select the character you wish to use.<br />
<br />
Sometimes you might want to make a certain part of the text stand out from the rest, such as when you quote something or perhaps for speech or maybe even to start a new paragraph. To do this just position the cursor in the text and click the Indent icon.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 107<br />
<br />
WorldMags.net<br />
<br />
Understanding SEO 110 The science of SEO See where SEO is heading in the future<br />
<br />
120 Get more people to visit your website Learn how SEO is vital for a successful site<br />
<br />
122 Use Google Analytics to understand your audience Increase your visitors with this powerful tool<br />
<br />
126 Create a Google sitemap for easier searching Make a huge difference to your recognition<br />
<br />
110<br />
<br />
The science of SEO<br />
<br />
122<br />
<br />
Google Analytics<br />
<br />
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 performance for better user experience.<br />
<br />
GET MORE VISITORS See how SEO gets your site viewed by more people<br />
<br />
108 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
GOOGLE ANALYTICS<br />
<br />
Make the most of this powerful tool with our guide<br />
<br />
GOOGLE SITEMAPS A simple yet essential way to get more visitors<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 109<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
THE SCIENCE OF<br />
<br />
110 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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<br />
<br />
The future of SEO<br />
<br />
O<br />
<br />
ver the past few years Google has become increasingly effective at targeting what it considers to be low quality sites, reducing their prominence in the search results and leading many to espouse the mantra that “SEO is dead”. In truth, the idea that “SEO is dead” has been resurfacing every few years for over a decade and highlights nothing more than the rapidly evolving nature of search marketing as a whole. Go back a couple of years and rankings fundamentally came down to two things – the total quantity of links from external websites and on-page relevance, derived from incorporating the desired target keywords. Thankfully, this is no longer the case, with the websites in question that attempt to manipulate search results being actively penalised, and those adding value to the internet rewarded.<br />
<br />
The Importance of content In a post Penguin and Panda world, success is predicated on pursuing a strictly content-centric approach when it comes to your website. Only<br />
<br />
through content can webmasters ensure that their websites send the correct on- and off-site quality signals and avoid any form of penalisation.<br />
<br />
Move to conversational search However, changes have not been purely focused on aspects of quality. More recently, various updates such as Hummingbird have signified a commitment from Google to address recent changes in the ways that users are performing searches. With mobile queries looking to overtake desktops for the first time, it is critical that search engines are capable of better understanding their users’ intent and needs, particularly in longer, conversational queries. For designers this is particularly important, providing a clear indication that Google may soon favour mobile users over those on desktop devices. This shift would actually signify a large change in web design practice. Further evidence of this change can be seen through the recent expansion of the knowledge graph, providing users with detailed information on real world entities directly in their internet<br />
<br />
EXPERT INSIGHT<br />
<br />
“Google has laid down the gauntlet to web marketers through the introduction of its recent updates, stating an unequivocal commitment to its ultimate goal – ‘making the web a better place’. Websites that conform to this goal while complying with Google’s best practices should expect to reap the benefits over the years to come”<br />
<br />
Will Nye<br />
<br />
SEO strategist, Found<br />
<br />
WorldMags.net<br />
<br />
UNDERSTANDING HUMMINGBIRD The introduction of Hummingbird in 2013 constituted the biggest overhaul of the Google platform in over ten years. Hummingbird is designed to enable Google to more effectively deal with longer, conversational based searches, such as those performed through a mobile handset. It does this by attempting to interpret the meaning of a whole phrase or sentence rather than individual keywords. In a marketplace where one third of the UK population now own a tablet and seven tenths own a smartphone, designers should be ensuring that the websites they produce are responsive – Google’s preferred type of mobile implementation.<br />
<br />
Web Design for Beginners 111<br />
<br />
Understanding SEO WorldMags.net 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<br />
<br />
E<br />
<br />
ven with the rise in awareness about SEO over the last few years, it is still true that lots of great-looking websites being created have poor SEO. However, if it is considered early enough in the design process, this needn’t be the case at all. Rather than hindering SEO, good design can actually improve the chance of ranking well. If we consider some of the metrics that matter the most, it’s the designer who is in control. After all, a great-looking site is more likely to get increased page views, have a lower bounce rate and, most importantly, earn more links to its pages. The earlier in the design process that you can start thinking about SEO the better, as the early structural decisions can make a big difference and will be difficult to change later on. For example, keeping your site architecture flat and, if possible, ensuring that no page is more than three clicks away from the home page is still very relevant when it comes to rankings. But more importantly, it’s also very critical to user experience – a fundamental of good site design. Successful web design strikes a balance between a visually pleasing website and one that gives the search engines what they need to rank well. After all, why build a website if no one can find it?<br />
<br />
Great images can hold a visitor’s attention for a memorable experience but they may not convey to the search engines what the site is all about, and therefore need to be backed up by decent content. Try to ensure that all images that feature across key landing pages are optimised with the relevant Alt text where possible, and consider how much text content you have on each page. This doesn’t all have to be in paragraph form as headers, captions, lists and slider text all counts. Aim for a minimum of about 200 words. For image-heavy pages where space for text is limited, consider using Javascript to reveal extra text on click. It is quite a common technique for large amounts of text to be hidden behind ‘lead in’ text, but always ensure the fallback is to display all of the text if Javascript is disabled. To minimise the loading times of your pages, you should be designing with CSS and HTML in mind. In order to do that, you must first know the potential of what something as sweet as CSS3 can bring to your designs. Box shadow, text shadow, border radius, gradients, animated transition, animated transformation, the list goes on. It is no longer necessary to rely on images that increase the page load time for the sake of beauty – let the CSS and browser do the work.<br />
<br />
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 and CSS unless it’s a photo or logo.<br />
<br />
112 Web Design for Beginners<br />
<br />
Buzzfeed has a completely unorthodox and unique approach to its content topics, which is at the centre point of their search strategy<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Tools to start optimising There are lots of free tools online to assist designers with SEO. Here are a few that make life easier<br />
<br />
Google PageSpeed Tools Found are an award-winning performance marketing agency specialising in PPC, SEO, social and mobile marketing<br />
<br />
“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”<br />
<br />
N<br />
<br />
webmasters out there. Another important ot only does CSS bring designs to life element is user-generated content. Whether you through its potential for animating use Facebook commenting or another platform, graphics, it also has a faster load time it’s important that it sits well with the overall and is easier to write than Javascript, so it’s design of the website. Buzzfeed does this increasingly becoming designers’ favoured seamlessly and engages with thousands of its medium for such effects. readers to comment on a daily basis, which adds One example of a site that gets the balance fresh content. between design and SEO spot-on is Buzzfeed. It By focusing primarily on great-looking content has a completely unorthodox and unique and making the images very easy to share on approach to its content topics, which is right at mobile and desktop to platforms like Pinterest, the centre of its search strategy. This enables it to Buzzfeed manages to drive huge quantities of capture vast quantities of long tail traffic through referral traffic from various social platforms. the SERPs (Search Engine Results Pages). Much of this traffic is to articles that Text and images are no longer enough have been on the site for some for readers to feel engaged with time, ensuring that a large content and this is where proportion of pages are never Buzzfeed excels with its static and are continuously approach to layout and being updated. design. Each post infuses a Not all users have retina displays It is this attitude to users fantastic mix of textual and serving up hi-res images to these people will unnecessarily increase load and good-looking content content, imagery, widgets, times. So use a script like retinajs.com that makes Buzzfeed so gifs or rich media, all of which to ensure you are serving up the hishareable – and the same Google loves. res images only to those who can appreciate them and decrease kinds of techniques can be It is this rich content that the site’s overall utilised to improve the content meets the standards that Google load time. and shareability on any website. now seeks from all bloggers and<br />
<br />
developers.google.com/speed/pagespeed An excellent suite of free tools from Google designed speciically to help you analyse and 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.<br />
<br />
Smush.it www.smushit.com/ysmush.it Another amazing free tool comes from Yahoo. It takes your images and magically reduces the ile sizes without any loss in quality whatsoever. Smush.it even tells you how much it’s going to reduce them before neatly zipping them up.<br />
<br />
Go easy on the hi-res<br />
<br />
WorldMags.net<br />
<br />
Screaming Frog SEO Spider www.screamingfrog.co.uk/seo-spider This cross-platform desktop tool crawls a website extracting key SEO elements including HTTP status codes, page titles, meta and heading tags. Numerous coniguration options and abilities to export data in .csv format makes it a lexible tool.<br />
<br />
Web Design for Beginners 113<br />
<br />
Understanding SEO WorldMags.net Investing in high-quality content is more than worth it in the long run<br />
<br />
Google Panda and Penguin Have you been hit by Panda or Penguin? Learn which update could be afecting your website<br />
<br />
Are you sure your content is up to scratch? Creating quality content is the cornerstone of SEO success. Get this part right, and you’re creating a solid foundation for your website When Google crawls your site it will use a number of indicators to assess its relevance and then index it according to its perceived value. The content of your website is one of the clearest signposts for Google to work out what keywords and phrases your website should be ranking for, so it is crucial to get this section of your SEO strategy right.<br />
<br />
What does Google consider to be good content? Recent Google updates have indicated that thin content pages with little or no relevant content are not likely to be ranked as highly as websites with more substantial, well-written content. Blog posts, interactive animations, videos and infographics are just some of the many ways in which you can engage your audience and drive traffic to your website. Written content, however, is still one of the most important ranking factors for Google.<br />
<br />
Tips for producing content that Google loves:<br />
<br />
Engage your audience: Create content that reads naturally, but don’t be too scared to mention your keywords. Engage your reader by creating original, unique content that offers real value. For content ideas, consider what the current questions, issues and debates are within your niche. Be unique: Don’t copy what other people are doing. Write about something that your audience will be genuinely interested in and that is unique to your website. This is the best way to make your website stand out. Produce high quality content: If you are outsourcing content cheaply, don’t expect it to be unique or engaging for your audience. Investing in well-written content by an expert is always a good idea, or if you know the subject well, why not write about it yourself? Content needs to be accessible: Don’t hide away key sections of your website on pages that people can’t easily navigate to. Allow people to easily navigate to your key content pages and present the content in a way that will provide real value to the user.<br />
<br />
Write for people, not for search engines: This has been said many times by many people, and that’s because it is true. How can you engage an audience with something that Use a text browser such as Lynx to mentions your keyword see your site as a search engine every third word? Write spider would do. If features such as Javascript, frames or Flash stop you what people would want from viewing your site in a text to read rather than what browser, then the spiders you think Google wants. may have trouble<br />
<br />
See how Google views your site<br />
<br />
Use keywords appropriately: Use the phrases and keywords that your audience uses. Don’t be tempted to overuse certain keywords, but at the same time, don’t be too scared to mention them at all. You will find it very hard to rank for a term or phrase if you don’t even mention these terms on your site.<br />
<br />
crawling it.<br />
<br />
114 Web Design for Beginners<br />
<br />
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 quality of search results. Depending on the level of ofense committed, a site can potentially be completely removed from the SERPs (search engine results pages). The diference between the two are the areas they target. Penguin targets low quality links pointing towards a site. Historically a lot of SEO agencies have adopted quick win tactics through purchasing links, often in bulk, to boost rankings. This has resulted in a large number of sites receiving penalties since Penguin’s release in 2012. Google’s Panda algorithm targets sites that<br />
<br />
WorldMags.net<br />
<br />
provide low quality, scraped/duplicated and spun content. It aims to lower the rankings of these sites, while allowing sites with helpful, high quality content to be seen higher up in search results. If you suspect your site has been afected by Penguin or Panda, there are many timelines of Google updates online. By analysing your Google Analytics you can mirror traffic drops to Google updates to see if they’re due to Penguin or Panda.<br />
<br />
WorldMags.net 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<br />
<br />
06 Poor Metadata<br />
<br />
A sitemap is an XML ile that feeds data to search engines about a website’s most important pages such as the date of the last update and the importance of a page compared to others. All of this allows its spider to crawl the site more intelligently and economically. Although creating a sitemap can’t solely guarantee search engine success, it is certainly a quick win and relatively easy to implement.<br />
<br />
Title tags are still regarded as one of the most signiicant inluences for on-site SEO success. This is the irst thing the user sees on search result pages, so it should be unique, succinct (70 characters max) and keyword optimised according to the content subject matter of the page. Meta descriptions are also important as they are essentially an opportunity to entice the user to click through to the page in the form of an ad copy.<br />
<br />
02 Failed canonical domain check<br />
<br />
07 Keyword stuffing<br />
<br />
When a domain fails a canonical check, this implies that the home page is accessible through more than one URL. For example, webdesignermag.co.uk/ index.php, webdesignermag.co.uk/home.php and webdesignermag.co.uk all load the home page. Having multiple URLs load identical content is a problem because inbound link equity can become divided and it diminishes the overall SEO site value. Some solutions to this would be to either implement the correct canonical tags or have 301 redirects pointing the duplicate pages to only one location.<br />
<br />
Ensuring that a ine balance of target keywords is incorporated into the body of a page is a challenging feat for any copywriter. Too much and the page appearing spammy is a risk, but too little and the search engine may have trouble understanding what to rank for. The solution is to use a good range of targeted synonyms presented in a well-written structure that will engage the reader.<br />
<br />
03 Slow loading times<br />
<br />
Having duplicate pages within a website is a common mistake that usually occurs on larger sites or eCommerce sites with lots of product listings, resulting in detrimental consequences if not handled properly. Common instances of duplication can occur where ilters are applied to product listings or where several minor variations of a product exist. A solution to this is to use a canonical tag to point the duplicated pages to the corresponding main pages – essentially having one page gaining all the SEO value.<br />
<br />
Although broadband speeds in the UK are improving, Google announced in 2010 that loading times are included in their algorithm, with slow loading times for desktops and mobiles still being a problem. Using Google’s PageSpeed Insights tool, any page can be analysed – identifying reasons behind and solutions for slow speeds. Common 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).<br />
<br />
04 No header tags Header tags such as <h1>, <h2> and <h3> give content its structure and help the search engines understand which parts are important. Search engines use header tags to prioritise a page’s content, so incorrect use can result in confusion. The solution is to ensure that the main <h1> tag is unique and accurately incorporates the topic of the page, including relevant keywords. Likewise, any following subheadings should use <h2> and <h3> tags where applicable.<br />
<br />
08 Duplicate content<br />
<br />
09 Links from non-credible sources Inbound links are considered the most important ofsite factor in determining natural ranking success, with the quality of the link source being at the forefront. The most inluential links come from authoritative websites within the same industry, with the linking page containing content relevant to the target page. Although acquiring links from quality sites is challenging, one link from an authoritative site can have a more positive efect on rankings than a few hundred links from non-credible sources.<br />
<br />
05 Missing Alt attribute<br />
<br />
10 Generic internal anchor text links<br />
<br />
Search engines cannot understand images, so it is imperative to attach descriptive and relevant text in the form of an Alt attribute. This allows the search engine to fully understand the image and is an opportunity to add relevancy and keyword rich descriptions to the page. One common mistake is to be too vague with the descriptions – for example, blue trainers can be further enhanced into blue and white, limited-edition Nike running trainers.<br />
<br />
Anchor text is the clickable text of any link on a page. When a website is crawled, the search engine uses this when ascertaining the content and relevance of any associated page. Using generic anchor text such as ‘click here’ when linking to internal pages is a missed SEO opportunity. The anchor text should include relevant keywords that the page wants to rank for but over-optimising can also have a negative efect, so keep the balance right.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 115<br />
<br />
Understanding SEO WorldMags.net Sessions Google has recently renamed Visits to Sessions. Use this to understand how many users are coming to your site<br />
<br />
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<br />
<br />
Pages / Session How interesting is your site? Pages per session is an average of how many pages your users are visiting<br />
<br />
Track conversions Conversions Conversions are goals measured which are set by the webmaster. An example may be landing on a Contact page or making a purchase<br />
<br />
Average session duration How long do they stay? Average session duration gives you the average time a user spends on your site<br />
<br />
Analysing analytics<br />
<br />
U<br />
<br />
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 you on how your current website content is performing and where your website’s traffic is coming from. It can also be used to help you define the next thing you should be improving or adding to your site. A page with a high bounce rate equates to low interest from a user perspective and is going to harm your rankings in the long term. Now this could be down to poor content on your page, but equally it could be down to the low relevance of a site linking to your content. If they came looking for skateboards and all you have is cupcakes, they’re likely to leave pretty quickly. Ensuring links point to the page on your site most relevant to the content they are linking from is a good way to reduce bounce rate and increase user interaction on a site. Backlinks are a key ranking factor in Google’s algorithm, and<br />
<br />
116 Web Design for Beginners<br />
<br />
Unlock the full potential of GA by going beyond tracking web stats. GA allows you to set up goals and events to measure how well you meet your objectives. Set up goals to track discrete actions such as form fills and transactions or set up events to measure interactions that are independent of a page load – such as video plays or document downloads.<br />
<br />
“Backlinks are a key ranking factor in Google’s ranking algorithm, and although the level of their importance has decreased slightly over recent years, evaluating them is a key part of SEO” although the level of their importance has decreased slightly, evaluating them is a key part of SEO. Tools like MajesticSEO, Ahrefs and Web Master Tools allow you to assess your backlink profile, showing which sites link to you, what pages contain the most linking domains and a number of other useful metrics. When combined with organic traffic data in GA (Google Analytics), you can get an insight into how those links are affecting your pages and their rankings. Having high quality relevant sites<br />
<br />
linking to yours is absolutely crucial and you are very likely to see an increase in traffic and positions, but perhaps a more significant metric for rankings than volume of traffic is traffic quality. Quality of backlinks rather than quantity is key here. Pointing links towards pages purely to pass on link value can result in a penalty via the Penguin algorithm and should not be attempted. A good backlink is usually an earned, relevant and a logical link from one site to another.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Improving your results Sessions The best way to improve organic sessions is via rankings. If your site appears first in the SERPs, there is a likely CTR (click through rate) of around 33%. The importance of rankings is shown by analysing the CTR of a result in tenth position, which averages about 2%. There are many ways to increase a website’s ranking for any individual term. The most common – and arguably most effective – method is creating content and getting links with that search term in mind. Page load speed Page load times are now a significant factor in Google’s ranking algorithm. Use free tools like Google PageSpeed to identify where you need to spend the time. Once you have identified the pages with the problems and which elements need attention, you should know what to do. Minifying the CSS and Javascript can reduce file size dramatically and you’ll be amazed what can be saved by optimising and compressing images. Bounce rate Bounce rate shows the percentage of users who view one page on your site before leaving. Having a high bounce rate is a big issue as it shows low levels of user engagement and is one of the signs of a low quality site.<br />
<br />
Reducing the bounce rate of users visiting your site can be a daunting task but to overcome it there are simple steps you can take to get started. Firstly, increase the quality of the content on your landing pages. Is it informative enough? Is it interesting enough? Secondly, interlink your pages to other relevant areas of the site. By doing this, you’ll allow easy user navigation throughout the site and site visitors will be more likely to visit multiple pages. Conversions Conversions are goals defined by the website owner. The webmaster commands GA to track certain user interactions with the site; this can be anything from landing on a product page, to filling out a contact form, to registering as a user. CRO (conversion rate optimisation) is the practice of increasing conversions not by maximising the number of users but by increasing the rate at which current users convert. Would more people complete a form on your site if the button said Enquire rather than Submit? Without testing these things you won’t know, but luckily GA contains its own page testing tool called Experiments. Experiments allows you to divide traffic to variations of a page to see how those different variations affect conversion. Set up tests on key pages to understand what page elements most affect user behaviour. This knowledge can be of vital importance.<br />
<br />
Resources There are many tools available to help create SEO-friendly websites. Below are some of the most useful out there<br />
<br />
The Beginners Guide to SEO moz.com/beginners-guide-to-seo This guide, produced by SEO software company Moz, provides a solid introduction to the fundamentals. From background information to advice on spider-friendly page design, creating a crawlable site structure, keyword research and building site authority by link building.<br />
<br />
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.<br />
<br />
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 ofers. Keyword Planner enables you to view an estimate of how many people search for a particular query each month in Google.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 117<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
Get more people to visit your website SEO is incredibly important for building a high-traffic website<br />
<br />
S<br />
<br />
EO (search engine optimisation) is not a feature that you may be aware of when first setting up a new website, but understanding how it works can make the biggest difference of all to ensuring that you drive as much traffic to your site as possible. 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 sure that your website stands out and competes against the millions of other sites that are also<br />
<br />
118 Web Design for Beginners<br />
<br />
trying to attract the same visitors. There is no guaranteed way to ensure lots of traffic, but to not make use of SEO techniques is probably to ensure that your new site takes a long time to get off the ground, with the possibility that it will never gain more than a handful of visitors.<br />
<br />
The consideration of how internet search engines work and what people are looking for will ensure that you are targeting your content to the right people at the right time and give you a better chance of making your site a success within a relatively short time period.<br />
<br />
“Ensure that you are targeting your content to the right people at the right time”<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 Encourage interaction<br />
<br />
02 Google Webmaster Tools<br />
<br />
03 Know the trends<br />
<br />
If you allow readers to comment on your content, they are likely to add info that search engines will pick up on. This means your readership is doing some of the work for you and increasing the amount of information that search engines will list. It is also ideal for encouraging repeat visits.<br />
<br />
Sign up for Google Webmaster Tools. Google provides a great deal of information on how to use keywords correctly and how to potentially increase the number of web searches that end up at your website. Google is still the biggest search engine – ignore it at your peril!<br />
<br />
Since they change so quickly, it makes sense to know what the trending topics of the moment are. Keep an eye on www.google.com/trends, which shows the top searches in real-time. If you can tap into these topics, provided they’re relevant to your site, you may increase traffic.<br />
<br />
04 Avoid the bloat<br />
<br />
05 Meta tags<br />
<br />
06 Keywords<br />
<br />
As you get more experienced with your website, try to cut down the code as much as possible. You are at the mercy of search engines and unnecessary code will only get in the way. Keeping everything trim will also speed up the site for your visitors and the search engine robots, so everyone’s a winner.<br />
<br />
Your website should have a meta description at the top of the page. This is not visible to the reader, but does tell search engines what the site is about and is also displayed in search engine results. Written effectively, it will entice people who receive results from your site to visit above the other results that are returned.<br />
<br />
Although no longer the key way to generate search engine traffic, keywords (including synonyms) still indicate to search engines what your website is about. More and more, though, the emphasis is on well-written, user-centric content that is updated regularly: avoid keyword stuffing at all costs.<br />
<br />
07 Title tags<br />
<br />
08 Try to be unique<br />
<br />
09 Avoid duplication<br />
<br />
Keywords should be used in title tags as they are the overall label for the page's content. This helps search engines sift through sites by relevance and helps searchers identify if it is what they're looking for. Make keywords relevant to each specific page rather than the site in general.<br />
<br />
Simply copying headlines and content from other sites is not a good idea. It not only shows a lack of originality, but also means that you will receive very low search ratings for that content. Search engines rate unique content above everything else, so try to be original as often as possible.<br />
<br />
You also need to be careful to avoid repeating phrases or content on your own site. This can trick search engines into believing that the content is not justified and you will rank lower through penalisation. It is good practice anyway to not duplicate your own content on any site.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 119<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
10 Be search engine friendly<br />
<br />
11 The website structure<br />
<br />
12 Build links<br />
<br />
Most CMSs offer a choice of how URLs for each page will be displayed. Try to use the ‘search engine friendly’ format, which uses the title tag of the page in the URL, eg ‘/www.domain.com/ article-title’. This also makes it look much cleaner and more professional to the reader.<br />
<br />
There are tricks to how content should be displayed on any website and there are some rules that are worth following. It has been proved that people tend to read in an ‘F’-shaped format, so try to keep as much of your important content near the top and in a left-hand bar as is feasible.<br />
<br />
One very important factor in increasing your traffic rank is to build links with other sites. The better quality incoming links you have, the better, improving your page rank with Alexa, Google, etc. Links build your reputation as well as your traffic – and you need both for success.<br />
<br />
13 Automated SEO plug-ins<br />
<br />
14 The hard work<br />
<br />
15 Stop words<br />
<br />
If you use a CMS like WordPress, there are many plug-ins available to automate much of the process of improving SEO. If you have little knowledge of how SEO works, you should try one and then start working out your own solutions as your knowledge increases.<br />
<br />
You can build links to your site by increasing your activity and shareability on social networks. Having a commenting facility will also boost interaction to keep your page regularly updated without the hard work. Although it may take a while to establish, it'll be worthwhile in the end.<br />
<br />
If you have your URLs presented using the titles of each article, you need to be aware of stop words. Search engines ignore commonly used words such as ‘I’, ‘the’ and others, so using them can confuse the searches. There are plug-ins available that will automatically remove these for you.<br />
<br />
16 Paying for help<br />
<br />
17 Don’t buy traffic<br />
<br />
18 Don’t obsess<br />
<br />
A simple search for ‘SEO’ on the web will bring back many companies offering to improve the SEO on your site. You should research these carefully before you decide to pay for help, but they can at the very least offer advice. Do bare in mind though, that no one knows your product or service like you, so give it a try yourself first!<br />
<br />
There are many services available that offer the chance to buy links and other mechanisms that claim to improve your traffic. Google's algorithm is now sophisticated enough that it will be able to identify when links are bad quality. This could undo all of your hard work in a matter of days. Remember, it is quality not quantity.<br />
<br />
The main thing with SEO is to understand the tricks you need, but to not obsess over them. Most of your time should be spent creating a web experience that brings readers back repeatedly, and the SEO side should be seen as topping up your core audience. For businesses, SEO is much more important to gain new customers.<br />
<br />
120 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Important SEO factors<br />
<br />
SEO-friendly URLs Make sure that your URLs are SEO friendly. Using the right format will greatly help search engines index your content and it also looks much cleaner to visitors<br />
<br />
Make your site SEO friendly<br />
<br />
Meta tags<br />
<br />
The right format<br />
<br />
Content above all<br />
<br />
Try to ensure that your header code includes meta tags and keywords that let search engines know what your site is about. This is vitally important for ranking higher on web searches<br />
<br />
Websites should be displayed in a form that is easy to read by anyone who visits. This will make it easier for them to understand the content and increase the likelihood of them returning<br />
<br />
Don’t concentrate on SEO above the most important aspect of your site: the content. The majority of your time should still be spent creating interesting content worth reading<br />
<br />
Judging SEO success<br />
<br />
It’s not easy to judge how effective your SEO strategy is<br />
<br />
We said in the final step of this tutorial that SEO should not be obsessed about, and that the content is the most important factor, but you still need to understand how your statistics show your success. We can break down your visitors into two broad categories: those who repeatedly visit your site and those who have recently visited. In general terms, you can analyse how many are from each group by checking your stats and seeing who has come direct to the site, who has been referred by another site and which readers have come via search engines. The direct visitors are likely<br />
<br />
the loyalists who enjoy your content, while the one-time or referrals have most likely come from searching for specific information. To add complexity, even your loyal readers will have likely come via search in the first place so they could still represent a good example of SEO working effectively for you. The best advice is to keep an eye on your stats and to check for shifts in the numbers. Ideally, you want a loyal base of readers who may spread the word, but with a healthy number of new readers continually dripping through.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 121<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
Use Google Analytics to understand your audience You need to analyse your traffic to see what you are doing right – or wrong<br />
<br />
N<br />
<br />
o matter how much efort you put in to a website or how great your content is, you need to understand what your audience is looking at and what they are interested in to keep growing your site. You can use web services that claim to understand your traic, but by far the most recognised service is Google Analytics. It can show you, in great detail, which parts of your site are successful and which parts require extra efort to receive attention from the masses. You can monitor<br />
<br />
all aspects of your site, from social networking impact to the number of people visiting on mobile devices, and more general statistics including visitor numbers and when they visit. The basic Google Analytics service is free and includes all of the features most webmasters will<br />
<br />
need, but there are premium options available should you need speciic features to take your analysing further. In this tutorial we will teach you how to set up Google Analytics for your site and how to make the most of the service to understand and increase your traic.<br />
<br />
“The basic service is free and includes all of the features most webmasters need”<br />
<br />
Highly analytical Master the art of reading and understanding your website's statistics<br />
<br />
Customisation<br />
<br />
Time counts<br />
<br />
You can create custom reports and add widgets to your dashboard to make the analytics it the way you and your site work. The service is highly lexible and very accurate<br />
<br />
The average visit duration shows how interested visitors are in your content – the higher the number, the better. Keep a close eye on this metric because it is very important<br />
<br />
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<br />
<br />
SET YOUR GOALS When you irst 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 automatically check your stats to see if you have reached your targets. Once you have set up your goals, you can view your progress in the front graphs which show your goal conversion rate and the number that you have completed. Every business and its associated websites needs to have targets; the services ofered by Analytics are quite simplistic, but they give you something to aim for and can greatly enhance your site if you put the efort in to reach the goals you have set for yourself. They are one of the most important parts of Google Analytics.<br />
<br />
122 Web Design for Beginners<br />
<br />
Mobile is vital The mobile stats grow in importance every day as more people use their smartphones and tablets to surf the web. You need to ensure your site works on mobile devices<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 The irst step<br />
<br />
02 Sign up<br />
<br />
Go to www.google.com/analytics. If you don’t already have a Google account, click Create Account. Tap Sign up and enter the required details – try to make the password as secure as possible. Then click Create my account.<br />
<br />
Now you have a Google account, you’ll be asked to sign up to Google Analytics. Tap the Sign up button and proceed to the next page. You now need to input your website URL and choose an account name.<br />
<br />
03 Starting the setup<br />
<br />
04 Time to jump<br />
<br />
On the next page, scroll down to the ‘What are you tracking?’ section and choose the correct option for your website setup. Most people will require the ‘Single domain’ option, but choose ‘Multiple subdomains’ if applicable.<br />
<br />
Now to ind out how to insert the Analytics code for your site setup. Each service is diferent and you’ll need to ind the correct process for yours, whether it is WordPress, Squarespace or another web publishing platform.<br />
<br />
05 Use the code<br />
<br />
06 No traic<br />
<br />
Return to the Tracking Code section and copy the code under ‘Paste this code on your site’. Paste it into the required place on your site. Then, when you click Save at the bottom, you should see a Success button appear at the top.<br />
<br />
Click the Home button at the top to see a series of windows which will all show zero hits. Don’t panic; it takes some time for the code to start showing traffic. Leave it for 48 hours before you come back and check your stats.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 123<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
07 Your irst stats<br />
<br />
08 Check your visits<br />
<br />
When you come back, you should see a series of graphs showing the traffic for your site. Don’t worry if it’s low, since analytics tends to get more accurate over time, but you will need to spend some time looking at the graphs.<br />
<br />
Click Visits at the top of the box and a new page will pop up. The graph at the top shows the number of daily visitors and the boxes below delve deeper into the operating systems used and geographical locations of your readers.<br />
<br />
09 Study the data<br />
<br />
10 Check the screens<br />
<br />
It makes sense to check the Browser stats irst, showing which browsers visitors are using. You should ensure that your site presents correctly in each, putting emphasis on the most popular browsers within your readership.<br />
<br />
As well as the OS, check the screen resolutions used by visitors. If low ones are at the top, you’ll need to ensure your site works on mobile devices. Either let it scale down or use a plug-in to change it to a mobile version automatically.<br />
<br />
11 Build interest<br />
<br />
12 Delving deeper<br />
<br />
The ‘Avg. Visit Duration’ box details how long visitors stay on your site. Very short visits are classed as ‘bounced’ and can be ignored. The longer the average, the more interesting your content is to the readers – a good sign!<br />
<br />
Standard Reporting>Traffic Sources shows the keywords searched for to get to your site. It also shows how much traffic is direct to the site and how much comes from search engines – ideally, you’ll want to see the latter grow.<br />
<br />
124 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
13 Referrals<br />
<br />
14 Social stats<br />
<br />
Also check the Referral stats, which show sites that are linking to you. This will show high-volume links and also sites that have completely copied your content with a link back. This is not good practice, so ask them to stop.<br />
<br />
'Social' shows traffic from social networks, which will help you analyse how efectively you’re using Facebook, Twitter, etc. It’s not too hard to make these stats grow to form a decent percentage of your traffic.<br />
<br />
15 Custom alerts<br />
<br />
16 Advertising<br />
<br />
You can create custom alerts by selecting Intelligent Events on the left, then Overview>Custom Alerts. Alerts can be set up to advise you immediately if you receive a lot of traffic or if it drops below a certain level.<br />
<br />
Google Analytics also ofers detailed AdWords reporting. This helps you to see if your money is being well spent or if you need to change your methods. Well-targeted ads can make a huge diference to incoming traffic numbers.<br />
<br />
17 Custom reports<br />
<br />
18 Export your data<br />
<br />
‘Custom Reporting’ lets you build reports tailored to your goals and the way your site is set up. You can create reports that cover all of your speciic needs and this could potentially greatly speed up your traffic analysis in the future.<br />
<br />
Use the Export option at the top to export your data in PDF format. This can be useful to share with potential advertisers or for data analysis – you can send it to specialists for advice on the best methods to grow your site.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 125<br />
<br />
Understanding SEO WorldMags.net<br />
<br />
Create a Google Sitemap for easier searching A<br />
<br />
A Google Sitemap will make a huge diference to your site’s recognition 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 ofers a shortcut to Google recognition. While it ofers 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 beneicial 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.<br />
<br />
“A Sitemap offers a shortcut to Google recognition”<br />
<br />
01 Sign up with Google<br />
<br />
02 Create your Sitemap<br />
<br />
Go to www.google.com/webmasters/tools/ and create a new account via the 'Sign up' button. You then need to input your site URL and verify it by following the instructions provided on screen. You need to do this to prove that the site is yours.<br />
<br />
Go to www.xml-sitemaps.com, which is a site that lets you automate the process of creating a sitemap. Simply enter your URL and tap the Start button. When completed, you will be presented with an XML ile to download.<br />
<br />
126 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Your site’s sitemap A look at your personal sitemap How many pages?<br />
<br />
Regular updates<br />
<br />
Multiple Sitemaps<br />
<br />
You will be able to see when the sitemap was last processed, which will help you to ensure that the data being scraped is recent and accurate. Try to update every quarter if you can<br />
<br />
You can upload multiple sitemaps to Google to keep your site information fresh and up-to-date. Try not to upload them too often because that will add little beneit and could cause problems with Google searches<br />
<br />
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<br />
<br />
Know the location The Google Sitemaps page will show which ile it is looking at and you should ensure that this matches where you believe the ile to be on your own server. A single ‘/‘ means it is in the root folder<br />
<br />
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.<br />
<br />
03 Upload the Sitemap<br />
<br />
04 Submit your Sitemap<br />
<br />
You now need to upload the sitemap ile to your root folder via FTP. Simply upload it and check that it is visible by navigating to <your domain>/sitemap.xml. You should see the ile displayed and if present, you can move to Step 4.<br />
<br />
You now need to go to Site Coniguration at Google Webmaster Tools and choose Add/Test Sitemap. Simply enter the URL of your sitemap and submit it. Google will then analyse the ile and index your site accordingly. It’s a painless operation.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 127<br />
<br />
WorldMags.net Photoshop & Graphics 136<br />
<br />
130 New ways to work<br />
<br />
Create visuals<br />
<br />
with Photoshop<br />
<br />
Get more from Photoshop with these tips<br />
<br />
136 Create great backgrounds Learn to make a great tiled background<br />
<br />
140 Design header and footer graphics Make your website memorable<br />
<br />
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, wellrealised 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.<br />
<br />
HEADER & FOOTER Efective header and footer art can make the diference<br />
<br />
128 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
PHOTOSHOP IN WEB DESIGN Learn how the image-editing software is used<br />
<br />
130<br />
<br />
“Photoshop has found a place as a prototyping tool, allowing designers to present clients with ideas, palettes, styles and wireframes”<br />
<br />
140 Design headers<br />
<br />
Best plugins<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 129<br />
<br />
Photoshop & Graphics WorldMags.net<br />
<br />
PHOTOSHOP<br />
<br />
130 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net War has long been waged over designing in Photoshop versus designing in the browser. But, maybe it’s time we all just got along<br />
<br />
W<br />
<br />
ith the development of HTML5 and CSS3, ‘designing in the browser’ has become common 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 code. With the ability to create gradients, round corners, drop shadows and more with ease in CSS, it sometimes feels like 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 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, inished 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.<br />
<br />
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 inal 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.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 131<br />
<br />
Photoshop & Graphics WorldMags.net Best tool for sketches<br />
<br />
Gauging the mood Before jumping into the browser, to start putting together your site, it’s important to determine a set of aesthetic guides for your designs. By creating mood boards, collages, wireframes and mockups you are more able to establish the mood and atmosphere you, and the client, are aiming for.<br />
<br />
done in the browser, so Photoshop is the perfect tool for getting all your ideas in one place, either for your own inspiration, or to talk over with the client to ind the perfect feel for the project.<br />
<br />
Facing the elements<br />
<br />
Element collages let you sketch out ideas for particular elements of a site without putting the whole design on paper. Dan Mall, the creator Photoshop’s toolset isn’t completely of element collages thinks they are perfect for building layouts. Even useful because we don’t often come in the sketching stage you’ll DON’T GET up with an entire site design in ind that sometimes it can be CAUGHT UP IN one go, so full page comps aren’t less than fluid for putting PROTOTYPING always a realistic concept. “An together designs. What it Make sure you don’t get too element collage allows me to is perfect for, however, is obsessed with the iner details of document a thought at any state creating and exploring the prototyping. It’s all too easy to of realization and move on to the visual language of your waste too many hours in next,” he writes on his site. designs: styles, efects, colour Photoshop polishing This method is useful as it lets you palettes, fonts and a whole mockups. explore the visual language of the lot more can be predetermined site through elements that are likely through experimentation in to appear in the inal designs. It also gives Photoshop, saving you valuable the client something more solid to feed back on time when it comes to the code. This as the elements appear in context more so than in also allows the client to feed back on many of the many other prototyping methods. basic elements before you devote a lot of time to building anything. Using collages, mood boards and mockups, you can explore the aesthetics of the site and develop a mood, while providing the client with a variety of deliverables. Wireframes and page prototypes are usually basic representations of page elements, as they might appear in the inal product. They should Creating mood boards can be a really useful exercise be simple, without detail and show the basic for establishing a visual direction, right at the structure of the page. You can use these to beginning of a project. This is one step that can’t be establish the visual language of the site. Menus,<br />
<br />
Speaking the language<br />
<br />
WebZap webzap.uiparade.com WebZap is a fantastic Photoshop plugin that makes sketching mockups quick and easy. It lets you create fantastic looking UI elements, grid layouts (based on the 960 grid) and Lorem Ipsum text layouts all with a few clicks. You’ll save countless hours searching for UI kits and templates with WebZap’s fantastic library of tools. It only costs $19 and could make the diference between spending hours on a mockup, rather than days. It also comes with a great little preview function that will have your mockups looking polished for the client.<br />
<br />
Better than the browser 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 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 conined by the CSS, helping to avoid the initial stumbling blocks of building the site in the browser.<br />
<br />
“More room for creative freedom” 132 Web Design for Beginners<br />
<br />
Wireframing and prototyping<br />
<br />
Getting in the mood<br />
<br />
5 great plugins & tools<br />
<br />
Page Layers<br />
<br />
960 grid<br />
<br />
www.pagelayers.com Page Layers is a nifty little app that converts webpages into layered Photoshop iles. You can open and edit entire webpages as PSDs, perfect for late stage editing.<br />
<br />
960.gs The 960 grid is a simple but efective grid system that comes with PSD and CSS templates to translate your perfectly proportioned site to the web with ease.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net EXPLANATION, EXPLANATION, EXPLANATION Help your client out. It’s sometimes hard to visualise how mockups will be realised later in the process. A little explanation goes a long way.<br />
<br />
headers, and breadcrumbs might need to be diferently styled to the other changeable page elements like text and sidebars. Often, the client might want to see a working prototype, in browser. For this purpose, Photoshop takes a back seat as it’s relatively straightforward and normally quicker to build the working prototypes completely in the text editor.<br />
<br />
For discussion, not design A combination of any of these prototyping techniques should be a perfect solution for getting your ideas down and translating them to the client. The most important thing to remember is that you’re repositioning Photoshop in the design process, using it as a tool for creating a dialogue between you and the client or a collaborator – not for pushing out inished pages. It can still be used for creating assets to be implemented in inished designs but in a responsive world, static page mockups just don’t cut it any more.<br />
<br />
Style Tiles What are they? Style Tiles are the invention of Samantha Warren, who compared them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room”. They consist of styles for speciic design elements, including fonts, colours 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 language of any design designers and clients about the visual direction they want and can be extremely useful in establishing the basic aesthetics for a convey your ideas and get feedback site design. to keep the revision process quick Creating Style Tiles helps to and eicient. With each round of NO avoid the ‘do four Photoshop feedback, you can develop the CONTEXT mockups of diferent tiles until everyone is happy, but Remember, while they webpages’ stage of the the various revisions here won’t are great idea, Style Tiles lack design process, which often take anywhere near as long as a context and are sometimes just ends up wasting time full comp. hard to visualise for clients. and provides very little of Afterwards you can move on Element collages will solve any use. Using Style Tiles, the to the prototyping stage. You this problem. designer and the client can nail can download a handy Photoshop down many of the important document from styletil.es to get interface choices needed to progress started. Start experimenting with a with a build. They are also a good bunch of diferent colours, fonts and imagery alternative for anyone who thinks that mood boards to begin building up a visual language. Then play are a little too vague. around with the elements until you have three or four individual tiles that all say something diferent about the brand. Style Tiles are well suited to Just like any design process, using Style Tiles begins responsive design, because, rather than designing a with a lengthy conversation with the client. Finding ixed-width page layout, you’re developing a system out what they want and then interpreting it can that can be applied in numerous ways, and used and be a diicult task, but using Style Tiles helps to developed throughout the site.<br />
<br />
Creating Style Tiles<br />
<br />
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<br />
<br />
Web Font plug-in<br />
<br />
Pixel Dropr<br />
<br />
Cut&Slice me<br />
<br />
bit.ly/1qen6lt Web Font Plug-in is a handy tool that lets you use Google Fonts in Photoshop, meaning you won’t have any nasty surprises when you move from PSD to CSS.<br />
<br />
pixeldropr.com Pixel Dropr lets you create libraries of various UI elements and images and instantly drop them into Photoshop as you’re working. It’s a great tool for prototyping.<br />
<br />
www.cutandslice.me Cut&Slice allows you to export assets for diferent devices quickly and efficiently. If you do have to slice up a PSD, then make sure to use this tool to improve your worklow.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 133<br />
<br />
Photoshop & Graphics WorldMags.net<br />
<br />
From PS to CSS O<br />
<br />
nce you’ve inished with all of the prototyping stages, it’s time to take your designs to the browser. But what’s the best way to go about translating from Photoshop to CSS? Once you’ve done your sketches, created your Style Tiles and developed your element collages, it’s time to take the visual elements you have established and translate them to web. In the past this was a diicult enough operation. You would create a huge bitmap in Photoshop, slice it up and reassemble it online. It could be painstaking and things often didn’t turn out as planned. Then came CSS3 and implementing Photoshop style efects in the browser, without the use of images, became a reality. That being said, it can still be diicult to get the exact look you had achieved in PS sometimes, when you’re working with a whole diferent set of tools and variables in a text editor. It can be very time-consuming translating layer styles<br />
<br />
in PhotoShop into CSS, which is just another reason why lots of designers started avoiding the Photoshop step completely. These days though, there’s a whole host of tools and plugins available to help you translate your ideas from canvas to browser as smoothly as possible. Some, that we’ll look at in a moment, directly convert your layer styles to CSS, while others simply aid in the transition. Layerstyles. org, for example, is a totally web-based version of Photoshop’s layer styles dialogue that lets you mock up the style you want and then export the result as CSS.<br />
<br />
The in-house method As of version 13.1 (CS6 and above), Adobe has included a CSS export feature right inside the Photoshop package. Just select the layer that you want the CSS properties for, click on ‘Layer’ in the menu bar and hit ‘Copy CSS’. Photoshop will output a nice chunk of code and copy it straight to<br />
<br />
your clipboard. When you paste it into your editor with a little bit of HTML, you’ll have a button like the one you designed in app. Unfortunately, this is a far from perfect solution; the home brewed tool just isn’t up to scratch and neglects to use RGBa values for low opacity – and sometimes ignores efects altogether. It also provides no formatting options before copying, so everything has to be ixed later in the editor. Nevertheless, even with these bugs, it does provide you with a great base to start working from, without having to manually input all of the basics yourself.<br />
<br />
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 ofer a neat and efficient way to get our styles from canvas to browser<br />
<br />
CSS3Ps<br />
<br />
CSS HAT<br />
<br />
css3ps.com CSS3Ps is a totally free Photoshop plugin that’s been around since long before the built-in PS to CSS3 functionality. With the extension installed, the functionality all sits inside a neat little window. All you have to do is select a layer group and then click the CSS3Ps logo to start the process. Due to the nature of the software being free, you’re forced to wait 20 seconds and look at an ad, but that’s a small price to pay for such great functionality. CSS3Ps takes you to a page with your code, ready to copy and paste. Something to note is that this plugin ignores positioning, so you’ll need to ix that later.<br />
<br />
csshat.com Unlike CSS3Ps, CSS Hat will set you back $30. Still, for the additional features and lack of ads, the price is worth it. CSS Hat has the ability to export in multiple formats, including LESS, SASS and SCSS. You can also toggle a variety of other features, like comment explanations, browser preixes, whether the code gets wrapped in a rule named after the layer and layer dimensions. Exporting with CSS Hat isn’t quite as simple as CSS3Ps, as it doesn’t support layer groups. This means you’ll have to export each layer separately. Other than that, the process is simple and intuitive and the versatility of this plugin is a huge advantage.<br />
<br />
134 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Working with type T<br />
<br />
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 leaves much to be desired. The biggest problem is that, with new webfont-only subscriptions, you can’t see what the fonts will look like when you’re mocking up designs in Photoshop. There’s nothing worse than getting a design to the web and realising your chosen font clashes horribly with the design. Web Font Plug-in from Extensis goes a long way in solving this issue, by allowing designers to use Google Fonts in their PSDs.<br />
<br />
With Typekit’s desktop functionality, you can use the exact same fonts in your mockups as you’ll be using in your final page designs online<br />
<br />
If you’re a CC user you will also have access to Typekit, Adobe’s own take on the web font library. With Typekit you can download a set number of fonts through CC to be used with your apps. This means you can access your Typekit fonts with ease, since they sit in Photoshop’s font window – so you are able to test out irm favourites such as Proxima Nova and Bree in your static designs.<br />
<br />
“ There’s more emphasis on typography for the web than ever, these days”<br />
<br />
Creating and exporting assets<br />
<br />
Alternative options<br />
<br />
ADOBE ILLUSTRATOR adobe.com/uk/products/illustrator Recently, Adobe’s Illustrator has become more powerful and now features many of the tools and efects we’re used to seeing in Photoshop. With layer efects and some powerful type and drawing tools there isn’t much Illustrator can’t do. It can also be more useful than Photoshop when it comes to sketching out early designs. PRO: More luid worklow and working completely in vectors mean that the process can be quicker and easier. CON: There’s no endless list of third-party plugins to make your life a little easier like there is with Photoshop.<br />
<br />
L<br />
<br />
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 efectively 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 element, Photoshop will always be the fallback. You can continue creating designs in Photoshop as usual but remember that, although you’ll be exporting assets in bitmap format, you should utilise the vector tools as much as possible so that revising designs isn’t a hassle. Slicing up designs with Adobe’s ‘Save for Web’ option has always been long-winded. These days there are plenty of options for getting your raster assets into the browser, quickly and eiciently. Slicy from Macrabbit (macrabbit.com/slicy) is an app that exports layer groups as independent iles, giving you the freedom to move, hide and overlap elements. It also ofers retina scaling on<br />
<br />
SKETCH Slicy is a powerful tool for exporting elements, with built-in retina-scaling features – best of all, it’s free<br />
<br />
vector designs. Cut&Slice me is a free plugin that will export your assets from Photoshop and make them ready for use on all kinds of devices. It also never hurts to have some extra tips on hand for best practice. Make sure you have a look at bjango.com/articles/actions – this list of Photoshop actions, put together by the good people at bjango, will save you countless hours when creating and exporting images and artwork from Photoshop.<br />
<br />
WorldMags.net<br />
<br />
bohemiancoding.com/sketch Sketch is a beautiful, lightweight and very powerful design app. The Mac-only software began as a drawing package but was quickly adopted by web and UI designers due to its lexibility and feature list. It allows for PNG and CSS asset exports and on-the-ly previews for all iOS devices. PRO: Predetermined UI element styles make creating buttons and sliders easy.s CON: It can be hard to get used to Sketch’s tools and interface after years of Adobe.<br />
<br />
Web Design for Beginners 135<br />
<br />
Photoshop & Graphics WorldMags.net<br />
<br />
Create great backgrounds for your website Create a rich, original image that tiles perfectly in Photoshop<br />
<br />
B<br />
<br />
ackground images are an essential part of designing a website, so being able to create a tiled image – one that repeats without seams – is especially important. After all you don’t know how long your pages will be. We can find inspiration all around us for repeat 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 at an alarming rate, there are those that are always fashionable – timeless designs that work whatever<br />
<br />
136 Web Design for Beginners<br />
<br />
the era. ‘Vintage’ suggests age, refinement, sophistication and experience. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop. We’ll start from a sketch and work this up into a fantastic vintage wallpaper tile, which will repeat perfectly for use on a website.<br />
<br />
We’ll weather and age our design to help create a time-worn look and save it in a format that will work on the web. If you don’t fancy using a sketched fleur-de-lys, we explore ways to use Photoshop custom shapes to create simple and easy-to-use patterns that will suit your website.<br />
<br />
“We find pattern inspiration all around us – from honeycombs to parquet flooring”<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 Do your research<br />
<br />
02 Sketch and scan<br />
<br />
03 New CS6 Pen Shape tool<br />
<br />
It really is worthwhile doing your research and getting some real-world reference material. You can go to the library and get a book of interior design, visit your local wallpaper shop, or take the easy option and use a search engine to find images of the motif you have in mind.<br />
<br />
Sketch out your design elements on a sheet of paper. Scan it to your computer, opening your image file in Photoshop. If you’d like to incorporate elements from two sketches into one final design, that’s also fine: identify which part you want to start drawing first and zoom in close.<br />
<br />
We’ll use the Pen tool set to Shapes to create an outline in CS6. The new Stroke Shape Tool Options are an ideal replacement for paths. Set stroke width to 1px then click to create and click again further along the same edge to create another. A straight line is drawn between points.<br />
<br />
04 Create curves lines<br />
<br />
05 Finish paths<br />
<br />
06 Fill each path<br />
<br />
To create a curved line, hold the mouse button after clicking, then drag to either side. Work your way around the motif, adding points, until you can click on the original point. Now we want to move on and fill our selection.<br />
<br />
We made a total of ten paths, setting Stroke to no colour, Fill to black – one for each of the top and bottom petals, three for the central bands, and one for the central flourish. Now we have to start filling in our Path Shapes.<br />
<br />
Filling your Paths is super-easy with the new Shape Tool Options. All you need to do is activate your Path Shape layer and set Stroke to No Colour. Activate the Fill options and set colour to black, making your Path Shape solid.<br />
<br />
07 Use Custom shapes<br />
<br />
08 Add layer styles<br />
<br />
09 Merge and collaborate<br />
<br />
As always, Photoshop provides you with even fast ways to create shapes. Press U and select Custom Shapes from the Tool Bar menu. You’ll find a Fleur-de-lys shape preset in the default options. You can combine this with other preset shape options to create your own design.<br />
<br />
Choose a layer and select Layer>Layer Style>Gradient Overlay. Choose Copper. Tick the boxes for Bevel & Emboss and Texture, then play with the settings. Right-click on the layer in the Layers panel and choose Copy Layer Style. Rightclick and paste the layer style onto each layer.<br />
<br />
Turn off any background layers, then select Merge Visible from the Layer panel pop-out menu. Using the Burn tool, burn shadows across the motif for a lightly distressed look. Add a Hue/ Saturation adjustment layer and reduce the copper to silver by de-saturating the image.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 137<br />
<br />
Photoshop & Graphics WorldMags.net<br />
<br />
10 Lay out the pattern<br />
<br />
11 Add texture<br />
<br />
12 Add extra distress<br />
<br />
Reduce the size of your design accordingly, then make a selection of it and choose Image>Define Pattern. Now File>New and set a canvas size that’s 1800px square. Press Shift+F5 and set Use to Patterns, setting custom pattern with your shape. Set Script to Brick Fill and click OK.<br />
<br />
Desaturate your pattern. Set a blue foreground, darker blue background. Activate the background layer. Select Filter>Render>Clouds. Duplicate and place at the top of the layer. Set blending mode to Exclusion. Put a copy at the top; Filter>Render>Fibers, blending mode Overlay.<br />
<br />
Download a free concrete texture from www. bittbox.com/freebies/free-texture-tuesdayconcrete/ and add it to your image. Set it to blend using Darker Color and reduce the opacity to 20% so that there’s some general additional distress to your image.<br />
<br />
15 Save for the web 13 Create an offset<br />
<br />
14 Offset, tweak and save<br />
<br />
Merge all visible layers into a single one, then choose Filter>Other>Offset. Enter values of 900px for both Horizontal and Vertical; this is half the canvas size. You’ll probably see a slight seam across the middle of your image. Use the Clone Stamp tool to blur this seam.<br />
<br />
Your image will now tile perfectly. Add a Curves Adjustment layer and Hue/Saturation Adjustment layer to increase contrast and recolour the artwork if desired, to suit your website. Save your document as a PSD file to ensure you retain the original source material for later reuse!<br />
<br />
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 and select Medium JPG – it’ll work well for the subtlety of texture we’ve created. Save the image with a name with no spaces, eg ‘background.jpg’.<br />
<br />
18 Other properties<br />
<br />
16 Use your image<br />
<br />
17 Import your image<br />
<br />
Once you’ve successfully saved your image, it’s time to use it on your website. To do this you’ll need to have a webpage lined up and ready to go, with a CSS stylesheet and an element you’re going to apply your repeating background to. If you haven’t already got these in place, come back to this section later on!<br />
<br />
Adding a background image to your website using CSS is very simple. First you define the element you’d like to create the CSS rule for – this is achieved by naming the element either through its tag name, class or ID. Next, add a rule for background-image and specify the image you’d like to use as a background.<br />
<br />
138 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
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 backgroundrepeat, and a fallback colour to be used using background-color. 001 body { 002 background-color: #ccc; 003 background-image: url(background.jpg); 004 background-repeat: repeat; 005 background-position: top left; 006 }<br />
<br />
WorldMags.net Repeating background images See how we constructed our repeating background image<br />
<br />
Add grunge<br />
<br />
Curver for content<br />
<br />
We’ve used a concrete texture to add extra grunge and character to our background tile. This is the antithesis of the modern, clean web look, but it’s often good to go your own way and avoid following fashions on the web – especially if you want your site to stand out!<br />
<br />
We’ve used a curve adjustment to increase the contrast of our design. Our curve has an S shape which darkens the dark pixels and lightens the light pixels to create more dynamics in our image<br />
<br />
Adjust hue and saturation Save as a JPEG<br />
<br />
The colours have been adjusted before we saved our image using a Hue/Saturation adjustment layer. This allows us to control the overall colour balance without having to manually alter each layer individually, and allows for experimentation!<br />
<br />
Because our image has lots of colours and fine textures, a JPEG file is the best format to use for this particular background tile. We’ve created quite a large tile, but you could have used just two motifs arranged diagonally to get a similar effect<br />
<br />
Repeating backgrounds<br />
<br />
The background tile is a great web design tool<br />
<br />
Because you never quite know in advance how long a typical webpage may be, it’s often very useful to be able to create a background that is capable of scaling to fill the space, no matter how big or small that space is. This is why repeating background tiles are such a mainstay of web design – they can be quite small but cover a large area of screen without the need to create a different version of your background for each page. The offset filter in Photoshop makes it easy to check that your image tiles perfectly, and correct any issues if it doesn’t. When trying to decide on a background<br />
<br />
to incorporate into your website design, it’s worth having a look at what other websites are doing. A combination of a partially transparent image (saved as a PNG file for variable transparency) and a background colour set to use a CSS3 gradient can give the impression of an image that’s much bigger than it really is. CSS3 also allows you to apply more than one background image per element, opening up a whole series of possibilities that didn’t even exist until quite recently. Don't be afraid to experiment till you find something that works best for you.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 139<br />
<br />
Photoshop & Graphics WorldMags.net<br />
<br />
Design effective header and footer graphics in Photoshop Make your website memorable with a custom header and footer<br />
<br />
H<br />
<br />
ave you ever browsed the web and come across a website that has a really beautiful header? Do you wish you had something equally stunning sitting at the top of your website? Having a unique, memorable identity on the web can be the difference between a user remembering 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 visits, but, given the choice, most people would also like their site to look nice.<br />
<br />
140 Web Design for Beginners<br />
<br />
Of course this can present a challenge, especially if you feel you’re lacking inspiration, artistic ability, or both. Fortunately, you don’t really need either! Some basic Photoshop techniques can be used to take a very simple concept and make it into something really special. The same techniques we<br />
<br />
use in this tutorial will work with many different types of subject matter, so follow the steps below and then apply the principles to your own project. Once you’ve created your header, you can do the same for the footer of your design too, creating an integrated, consistent design.<br />
<br />
“Some basic Photoshop techniques can be used to make something really special”<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
01 Create a document<br />
<br />
02 Create the base colour<br />
<br />
03 Organise your layers<br />
<br />
Create a new Photoshop document. If you have a recent version, choose one of the web presets; if not, choose a document size of 1280x1024px at 72dpi and a transparent background. If you create a document with a background layer, doubleclick on this to convert it to a normal layer.<br />
<br />
We need to create a base colour to work over. In this tutorial we’re creating a graphic that includes planets and stars, so it makes sense to choose a dark background base colour. Double-click on the foreground colour well on the toolbar and select a dark blue. We’ve used #070520.<br />
<br />
Fill the layer with the colour you’ve just selected by using the Paintbucket tool (or use Alt+Delete on a PC, Option+Backspace on a Mac). Let’s name our layers appropriately. Click twice on the name of the layer you’ve just filled, then type ‘Page Background’ over the existing name.<br />
<br />
04 Add the content area<br />
<br />
05 Align your content<br />
<br />
06 Create a glow<br />
<br />
Select the Rectangular Marquee tool and change the style to ‘fixed size’. Enter a width of 720px and a height of 900px. Click once near the bottom of the document to create a selection. On a new layer, fill this selection with white.<br />
<br />
We want our content area to be centred. Select both layers by clicking on one, then Shift-clicking on the other, then use Layer>Align>Horizontal Centers. This will position your 720px content area perfectly in the centre of the design.<br />
<br />
Duplicate the content layer and select Layer> Layer Style>Outer Glow. Set the colour to white, spread 8% and size 13px. Click OK, make the other content layer invisible and set Fill to 0% for this layer. This should leave only the glow visible.<br />
<br />
07 Create a planet<br />
<br />
08 Add shading<br />
<br />
09 Merge and blur<br />
<br />
Create a new layer, 'Big Planet’. Select an orange for the foreground colour, dark red for the background. Using the Circular Marquee tool with Shift held down, draw a big circle then Filter>Render>Clouds. (Hold Alt/Option when selecting this to get a higher-contrast result).<br />
<br />
The planet needs shading. With the selection still active (if you lost your selection just Ctrl/Cmdclick on the planet layer), create a new layer and use the Gradient tool to fill the selection with a radial gradient from orange to black. Set the layer to use Multiply as the blending mode.<br />
<br />
Select the planet layer and the shading layer, then, using the fly-out menu at the top right corner of the Layers panel, select 'Merge layers' to convert these two layers into one. Add a small blur: Filter>Blur>Gaussian Blur. Enter a value of 1.3px and click OK.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 141<br />
<br />
Photoshop & Graphics WorldMags.net 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 choose style, size and hardness. You might be forgiven for thinking that this is the beginning and end of brushes in Photoshop, but there’s so much more. For starters, the set of brushes that appears by default is only one of many sets Adobe thoughtfully provides. To load other brush sets, click on the flyout menu when selecting a 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 Brush flyout menu.<br />
<br />
142 Web Design for Beginners<br />
<br />
10 Give it a glow<br />
<br />
11 Copy and recolour<br />
<br />
It would be nice to have a light-distorting atmosphere on the planet, so let’s add another outer glow to simulate this. Select Layer>Layer Style>Outer Glow. Choose a bright cyan as the colour, and set the blending mode to Colour Dodge. Play with the other settings to suit.<br />
<br />
Let’s quickly create a second, smaller planet. Make sure you have the planet layer selected, then select Layer>Duplicate Layer. Select Edit> Transform>Scale and reduce the size. Finally, choose Image>Adjustments>Hue/Saturation and tick Colorize. Play with the settings to find a nice result that suits.<br />
<br />
12 Create a rainbow<br />
<br />
13 Bring the rainbow into your scene<br />
<br />
Create a new document at 1024x1024px, 72dpi and transparent. Select the Gradient tool and, from the tool presets, choose Transparent Rainbow. Draw a linear gradient top to bottom, covering the middle third of the canvas. Select Filter>Distort>Polar Coordinates. Ensure ‘Rectangular to polar’ is selected and click OK.<br />
<br />
In the rainbow file, select Edit>Copy Merged (shortcut: Shift+Ctrl/Cmd+C), then return to the main document. Select Edit>Paste (shortcut: Ctrl/ Cmd+V). Add a layer mask to the rainbow layer, and draw a black to white gradient onto the mask to hide the left-hand side of the rainbow. Position the layer to the right of the canvas.<br />
<br />
14 Add a lens flare<br />
<br />
15 Add stars to the space<br />
<br />
We’ll simulate a bright sun appearing behind the planet. Duplicate the Page Background layer. With the duplicate selected, Filter>Render>Lens Flare. Click on top left of filter preview window to set flare position, then click OK. You can use the Eraser tool to remove unwanted bits of flare.<br />
<br />
Add stars to a new layer. Select a foreground colour of white. Using the Gradient tool set to use a radial foreground-to-transparent gradient, draw small overlapping gradients covering the top third of the canvas. You can always add more later, so don’t overdo your gradients.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Creating our custom header design After creating basic planets, we use various effects and techniques for the design<br />
<br />
Shooting stars The shooting stars effect is achieved using a stroked path with simulated pressure. The brush is set to use a scatter effect so that the individual elements look like a meteor or comet trail. We’ve added an outer glow layer style to complete the look<br />
<br />
Rainbow a go-go The rainbow effect is created using a simple gradient and the polar co-ordinated filter inside Photoshop. This, when combined with the stars, planets and tentacles, helps to create a coherent whole design<br />
<br />
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<br />
<br />
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<br />
<br />
16 Set the stars free<br />
<br />
17 Create an aurora<br />
<br />
18 Add streaks of light<br />
<br />
With your gradients in place, it doesn’t quite resemble a star field. To get the star effect, change the layer’s blending mode to ‘Dissolve’. This gives an instant star effect, but there are way too many stars. Reduce the number by adjusting both the layer’s opacity and fill values to something around 5% for each.<br />
<br />
Create a new layer and set the blending mode to Colour Dodge. Using the Gradient tool, again set to foreground-to-transparent, draw magenta and cyan gradients around the top third of the canvas to create a nice aurora effect. You can adjust the opacity of the layer to control the amount of aurora visible.<br />
<br />
Create a new layer; foreground colour magenta. In Brush tool, select a small round brush. Select Pen tool. Create a curved path by clicking and dragging in three positions. Select Paths panel, right-click on work path and select Stroke Path. Ensure Simulate Pressure is checked. Repeat with different brushes to complete the effect.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 143<br />
<br />
WorldMags.net<br />
<br />
Customise your site 158<br />
<br />
Hover effects<br />
<br />
146 The perception of colour Understand how colours impact your site<br />
<br />
152 Make a CSS expanding navigation menu<br />
<br />
Build a dynamic navigation menu<br />
<br />
156 Create CSS animated background text<br />
<br />
Make a feature of your text by animating it<br />
<br />
158 Make image hover effects Use your images to full effect<br />
<br />
160 Animate a strike-through text effect<br />
<br />
As seen on mclarenagency.com<br />
<br />
162 Add a shopping cart Monetise your site by enabling payment<br />
<br />
164 Create email newsletters and let people subscribe<br />
<br />
A more efficient way to reach your fans<br />
<br />
166 Add social media buttons<br />
<br />
WHAT YOU’LL LEARN 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 special. In this section you’ll learn how to create your first script, add social-network interaction, 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.<br />
<br />
Promote your site with social buttons<br />
<br />
168 Add Twitter Cards to your site Display real-time Twitter updates<br />
<br />
146<br />
<br />
”Making your site respond to different devices is more important than ever”<br />
<br />
Perfect palette<br />
<br />
156<br />
<br />
Animate text<br />
<br />
144 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net<br />
<br />
EMAIL NEWSLETTERS Get in touch with your visitors with a newsletter<br />
<br />
SOCIAL MEDIA BUTTONS Use Facebook, Google+, Pinterest & Twitter<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 145<br />
<br />
Customise your site WorldMags.net<br />
<br />
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<br />
<br />
146 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Why colour matters If asked, “Why does colour matter?”, the most obvious answer would be, “Because if the world was black and white, it would be a boring place”. Colour matters for many reasons. Familiarity, is one. We know bananas are yellow, the sky is blue and the grass is green, and if that changed it would throw us. In nature, such changes aren’t likely, but what if overnight someone decided that hot taps should be pink and cold taps should<br />
<br />
be purple? Or that green no longer meant ‘go’ at traic lights? We know blue is cold and red is hot. No other 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 transcends language as a tool for communication. And beyond its functional uses, colour afects moods: diferent hues evoke diferent emotions. This has been shown by research conducted by governments, brands and designers that reveals the efects diferent colours have on people. Most simply, colour brings meaning to life. When something has colour, it acquires its own unique style. Just by being a certain colour, an object forms an idea in people’s minds.<br />
<br />
“<br />
<br />
Colour deines the personality of a design. It’s more powerful than shapes, symbols and words. It’s totally subjective, so know your audience. Be singleminded, own a simple colour palette and be remembered<br />
<br />
”<br />
<br />
MARK SEPHTON, CREATIVE DIRECTOR WWW.MARKSEPHTON.CO.UK<br />
<br />
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 available to us than we can physically determine (16,777,216 to be precise) and it’s all too easy to forget that, once upon a time, a mere 216 colours had to suice. This is owing to the fact that computers themselves only supported 256 colours, and in order to create a standardised method for displaying colour, this handful of just 216 were selected. But despite today’s increase to over 16 million, the principle for creating and displaying colours on the web remains the same as it has always been – through a mix of just three basic colours: red, green and blue. Each has 256 shades that can be combined together to form virtually any colour you could possibly imagine or visibly recognise. Web colours are described through the humble Hexadecimal value - efectively 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). Before you get carried away and start dipping your paintbrush into those 16 million colours, be mindful of the fact that all screens can, and will, display diferently. This is particularly relevant as we enter the omnichannel age of web access via tablets, phones and TVs. Never is the reality of this disparity felt more keenly than when you design a beautiful web concept on a 24-inch cinema display, only for the appearance to be wildly diferent when displayed on a client’s four-year-old Toughbook! Put simply, the more far out the colour you use, the higher the chance of it displaying poorly. Neons, for example, may not ‘pop’ as much, or delicate shades of cream or grey may not show at all. So always test on several types of screen before signing anything of.<br />
<br />
How to use colour Bevisionare.com is an example of where colour in digital art does the talking, while the navigational elements are kept in simple monochrome. The natural hues create an earthy warmth when combined with the softly rounded shapes. The style of the illustrations do not immediately grab your attention but do give a real sense of humour.<br />
<br />
How not to use colour Just because 16 million colours exist, it doesn’t mean you should use all of them! While designed purposely to attract attention as a joke, lingscars.com is still a perfect example of how not to use colour. Check out the horrendous neon glows, the very distracting bold paisley background and the jarring reds and oranges in the middle of the page.<br />
<br />
WorldMags.net<br />
<br />
Web Design for Beginners 147<br />
<br />
Customise your site WorldMags.net What colours mean What associations are connected to diferent 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 attempting to label colours with speciic meanings or emotions is rather like trying to classify what efects diferent lavours have on us. It’s personal opinion, and each individual’s understandings and perceptions of<br />
<br />
colour will vary vastly, depending on personal experience. So while you can’t guarantee it will have the desired efect on a viewer’s reception, clever colour choice can – according to research – boost your chances of evoking particular associations in the viewer’s mind.<br />
<br />
GREEN<br />
<br />
BLACK<br />
<br />
ENVIRONMENTAL, FRESH, HONEST<br />
<br />
SOPHISTICATED, POWERFUL, DEATHLY<br />
<br />
It’s been found that people relate better to colours that resemble those that they experience naturally. Green represents the earth, nature, growth and honesty. In China, green is the symbol of health and prosperity. It’s also widely recognised as the colour for envy.<br />
<br />
In western culture, black has traditionally been associated with despair, decay, death and mourning, but it also has strong links with power and authority. Black is also used to convey messages of sophistication, luxury and even elegance.<br />
<br />
% of males that state green as their favourite colour: 14% % of females that state green as their favourite colour: 14%<br />
<br />
% of males that state black as their favourite colour: 9% % of females that state black as their favourite colour: 6%<br />
<br />
YELLOW<br />
<br />
WHITE<br />
<br />
BOLD, DISCOUNT, OPTIMISTIC<br />
<br />
INNOCENT, PURE, CLEAN<br />
<br />
Interestingly, while we generally tend to associate yellow with bright, bold and fun, some studies have found most people associate yellow (along with orange) with cheap and inexpensive attributes. They also ranked it as one of their least favourite colours.<br />
<br />
Technically not a colour, white is in fact the presence of all colour. We associate it with clean slates, freshness, new beginnings, positive energy and life. It can turn confusion into clarity, but too much white can also bring a sense of empty isolation and coldness.<br />
<br />
% of males that state yellow as their favourite colour: 1% % of females that state yellow as their favourite colour: 3%<br />
<br />
% of males that state white as their favourite colour: 2% % of females that state white as their favourite colour: 1%<br />
<br />
RED<br />
<br />
BLUE<br />
<br />
PASSION, WARMTH, AGGRESSION<br />
<br />
COOL, CALM, RELIABLE<br />
<br />
Red shares a similarity with black but has conlicting connotations. We consider red to be the colour of the heart, relating to love, emotion and safety, but on the lip side, red also symbolises warnings such as ‘danger’ and ‘stop’ and the display of rage.<br />
<br />
Through its association with uniform and royalty, blue also delivers a sense of trust and authority. Many of the largest corporations (IBM, Barclays, Facebook) use blue for this reason. But using blue ilters in ilm can create a cold and isolated feeling.<br />
<br />
% of males that state red as their favourite colour: 7% % of females that state red as their favourite colour: 9%<br />
<br />
% of males that state blue as their favourite colour: 57% % of females that state blue as their favourite colour: 35% Source: Joe Hallock (2003), Colour Assignment.<br />
<br />
Cultural differences HSBC ran a TV advert a couple years back that explained that red signiies good luck and weddings in China, whereas white represents death and mourning. This contrasts with our own country, where white is often the bridal theme colour and death is represented at the other end of the spectrum by black. Cultural variations of colour connotations don’t stop there. Yellow in the UK draws up images of supermarket price reductions. However, in Thailand yellow is the colour of<br />
<br />
148 Web Design for Beginners<br />
<br />
the royals, or more speciically: the king. In Belgium, baby girls wear blue and baby boys wear pink, which is unlike what we are used to here. If we think of fertility, freshness and springtime in the Western hemisphere, we think of the colour green. The opposite is true in South America though, where the dense green rainforests make the locals think of death. Green is forbidden altogether in parts of Indonesia; a ban rooted in local culture and a myth about the wrath of a sea goddess.<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 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 where your brand is recognised through colour alone is a testament to how efective a marketing tool it is. But there’s more to colour selection than something that looks nice on packaging, TV adverts and magazines. Finding the right colour is not an easy task and is something of an art form for many brands – not to mention a major commitment.<br />
<br />
Let’s look at easyJet, which is a great example thanks to its easily recognisable branding. They arrived and turned the air travel industry upside down with their no-frills cheaper way to fly. It was a simplistic, bold move, and they needed a bold colour to convey their message of value and eiciency – who else could step up to handle a task other than bright orange? Before long, orange became more representative of easyJet than any other brand using orange – including Orange themselves.<br />
<br />
The easyJet brand uses a powerful orange<br />
<br />
Orange is now intrinsically linked to the brand<br />
<br />
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 Birren and again in 2003 by Joe Hallock, which explored the perception of colour, some interesting correlations arose surrounding why certain colours in branding evoke particular feelings and associations better than others. The results begin to explain why brands select the colours they do. The most surprising result was that both men and women voted blue as their favourite colour. It wasn’t by some small margin either, as 35 per cent of all females surveyed would choose blue over any other colour, followed by purple at 23 per cent. However 57 per cent of men cited blue as their favourite colour with the next choice being green at 14 per cent. Looking at how this breaks down into age, blue appeared top of all ages surveyed, with people in their twenties, thirties, fourties and ifties all choosing hues with shorter wave lengths (blue, green, purple) compared to younger audiences (those 19 and under) who<br />
<br />
seem a logical choice. So with a bit of research it would have almost been a no-brainer for the company to choose a colour that attracted and appealed to as many people as possible. But what is it about blue that people love? Again, the results of the survey speak for themselves. Answers to the questions “what colour do you associate with high quality, trust, security, reliability/dependency and courage/ bravery?” were all met with blue on top. When you think about it, what brand wouldn’t want this type of association? So it would seem that while not terribly original, blue statistically has a solid purpose for its ubiquity among some of the world’s most successful brands. had a preference for brighter, longer-wave colours (red, orange, yellow). If we look at Facebook’s demographic, which has roughly a 60 to 40 ratio leaning to a female audience, and an average age of 40, inding a colour popular among the typical user would<br />
<br />
WorldMags.net<br />
<br />
“<br />
<br />
While not original, blue statistically serves a solid purpose thanks to its ubiquity<br />
<br />
”<br />
<br />
Web Design for Beginners 149<br />
<br />
Customise your site WorldMags.net 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<br />
<br />
NINETIES NEONS<br />
<br />
Red is one of the hardest colours to work with, but can also be one of the most memorable when done correctly. Coca-Cola are a testament to that. Think carefully before selecting red for your designs though, and consider speciically what type of red. Try it out on several types of screen. It’s not the easiest colour to work with in print, nor read from, but if done well it can create a look of high energy and excitement.<br />
<br />
Hot right now with the resurgence of Nineties fashion, neon colours are steadily inding their way back into designers’ palettes. Use of clashing electric blues and sunglass-inducing-pinks are the order of the day. It’s a style that screams young, fun, vibrancy and life, but despite the playful nature, these colours still require careful selection to ensure your design doesn’t end up looking like a gunge tank from Pat Sharp’s Fun House.<br />
<br />
PRIMARY’S COOL...<br />
<br />
THE BLUES<br />
<br />
When handled with care and consideration, the vibrancy of the primary colours – red, blue and yellow – can create an impactful and powerful look. Think Google and ebay for great examples of where this has worked well. The bright, contrasting colours mean everything else has to be kept simple, so go minimal. Clean lines and bold, sans serif, geometric typefaces create a stylish feel and sense of humour.<br />
<br />
As we have discovered, blue is widely considered the most popular colour in the world according to research. You may therefore be torn between siding with its popularity or dismissing it as overused – but you can still make it unique. Start by exploring the varying shades for a sense of calm and depth and don’t always opt for the corporate hues; try turquoise, sky blue and navy for a modern take.<br />
<br />
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’.<br />
<br />
“<br />
<br />
Clean lines and bold, sans serif, geometric typefaces create a stylish feel<br />
<br />
150 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
”<br />
<br />
WorldMags.net Tools you can trust Never feel a new colour palette has to just magically appear in your mind - get out there to gain inspiration for new ideas ADOBE KULER Over the years, the designer’s sidekick, Kuler (pronounced ‘colour’), has gone from behemoth lash website to nimble HTML5 application, plugging directly into various Adobe desktop apps. A crowd-sourced platform for thousands of colour palettes searchable by phrase, it also provides a wide variety of options (or “Color Rule”) for creating your own unique palette. There may only be ive colours to choose from<br />
<br />
at any one time, but you can explore the most popular palettes and ind inspiration. The beauty of using the Kuler app is the variety and intensity of colour that it can provide. If you are on the lookout for a palette that will provide a winning collection of colours, this is undoubtedly a tool you need in your creative arsenal. What’s more, it gets guaranteed results, with the added bonus of being really simple to use.<br />
<br />
PANTONE’S TREND FORECASTING Pantone, the long-time kings of colour, bring you their colour-based predictions for the year ahead. Broken down into categories for use, gender, country and more, they make it easy to determine the right colour for your audience and you can even trace the sources of inluence.<br />
<br />
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.<br />
<br />
Colour trends to follow Just because they’re in, doesn’t mean they’re right. Or does it? Just as trends in design come and go, colours do the same, albeit less frequently. You’ll always have the classics: black and white, blue and grey, green and yellow and so on. Depending on the application, good design shouldn’t really follow a trend but be based on suitability for purpose. Let’s suggest fluorescent pink is the colour of the<br />
<br />
moment. It’s in all magazines, adverts, even cars are being sprayed in it. Now if you were asked to design a flyer for a club night, you’d be wise considering this as an option. Propose that same fluorescent pink to a client who runs an exclusive private wealth fund, however, and suddenly you’ll end up looking considerably less smart.<br />
<br />
Recent colour trends<br />
<br />
Pantone’s colour for 2014 was Radiant Orchid<br />
<br />
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, remember colour can be subjective too.<br />
<br />
WorldMags.net<br />
<br />
What next? It’s impossible to predict exactly where colour trends will go next. It’s like stocks and shares: the market could go one way or another. The most important thing to remember is, as a designer, to remain open to possibilities. Don’t constrict yourself to any speciic style purely because you like it. Always think beyond the current fad, research who you’re communicating with and consider the purpose.<br />
<br />
Pantone’s colour for 2015 is Marsala<br />
<br />
Web Design for Beginners 151<br />
<br />
Customise your site WorldMags.net SOURCE FILES AVAILABLE<br />
<br />
Make a CSS expanding navigation menu Create a space saving menu for all screens with the help of CSS and Font Awesome avigation menus are vital to the success of any website. The navigation menu on a website is like a road sign on a street or a level directory in a shopping centre. You can’t decide on your destination without knowing all of the options available to you, and reaching that destination would be impossible without irst knowing where you are. Just like 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 diferent types of navigation menus with 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 horizontally and, when closed, will be tucked neatly away, with just the popular Navicon icon showing. This icon (which is three horizontal or vertical<br />
<br />
“Navigation plays a major role in a website’s usability as well as user experience”<br />
<br />
With all the HTML completed, all we can see is a typical, boring and unordered list<br />
<br />
With the Font Awesome CSS imported, we can see what the icons look like with the text<br />
<br />
We’ve now added the CSS reset and set the background colour to make sure the text stands out<br />
<br />
Everything is now hidden, but it saves space and is revealed when we click the Navicon<br />
<br />
N<br />
<br />
152 Web Design for Beginners<br />
<br />
bars) is quickly becoming known as something that ‘should’ be clicked on. To help us develop this menu, we’re also going to be using Font Awesome, which is an iconic font, and CSS toolkit, and we will be adding some vector icons to each menu button. So let’s get started on our expanding navigation menu by following these easy steps!<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 01 Use Font Awesome Throughout this tutorial we’ll be using Font Awesome’s scalable vector icons, which can instantly be customised using CSS. There are two ways to use Font Awesome: you can use their content delivery network CDN (as shown), or download the whole file from the home page: www.fortawesome.github.io/Font-Awesome, which is what we’re going to do so that we can take a peek inside the CSS file. 001 <link href="//maxcdn.bootstrapcdn. com/font-awesome/4.2.0/css/font-awesome. min.css" rel="stylesheet"><br />
<br />
02 Create the menu Our first bit of HTML will be a div with five different class names that we’ll use to position and style our menu. Then add in an input field and label element which we’ll use to animate the menu. The first icon font we’ll use is the popular Navicon which has a class name of ‘fa-bars’ as seen below.<br />
<br />
004 005 006 007 008<br />
<br />
<li><i class="fa fa-home"></i></li> <li><span>home</span></li> </ul> </a> </li><br />
<br />
05 The about button Now, underneath the closing list item of our home button, we’re going to add in another set of lists and wrap this within an anchor tag. This time we’re going to target a font icon that’s called ‘fa-user’, which is a font icon that will be perfect for our ‘about’ button. 001 002 003 004 005 006 007 008<br />
<br />
<li> <a href="#" rel="nofollow"> <ul> <li><i class="fa fa-user"></i></li> <li><span>about</span></li> </ul> </a> </li><br />
<br />
06 Finish off the buttons<br />
<br />
018 <a href="#" rel="nofollow"> 019 <ul> 020 <li><i class="fa fa-send"></i></li> 021 <li><span>contact</span></li> 022 </ul> 023 </a> 024 </li> 025 </ul> 026 </nav> 027 </div> 028<br />
<br />
07 Import Font Awesome Create a new CSS file and open it up within your favourite text editor. If you haven’t already done so, create a new folder called CSS and put both your new CSS file and the font-awesome.css file in it. Now we simply import our font-awesome.css file using the @import url rule. 001 @import url(font-awesome.css); 002<br />
<br />
08 CSS reset<br />
<br />
001 <div class="menu top left horizontal blue"> 002 <input id="slide" name="slide" type="checkbox"> 003 <label for="slide" class="icon open"> 004 <i class="fa fa-bars"></i> 005 </label> 006 </div><br />
<br />
To finish off our navigation we’re going to add in another three buttons. We are going to pull in a camera icon font for our portfolio button, a bookmark icon for our blog button and finally a paper plane icon for our contact button. These seem like good icons to use, but feel free to experiment with other available icons.<br />
<br />
Adding in a reset to our CSS file is standard practice these days, but we’re going to target every element by using the asterisk symbol and removing all margins, padding and any borders. It’s not always a good idea to reset every single element, but this will do nicely this time for the purposes of this tutorial.<br />
<br />
03 Menu buttons<br />
<br />
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017<br />
<br />
001 * { 002 margin: 0; 003 padding: 0; 004 border: 0; 005 } 006<br />
<br />
Inside the div that we created in the last step, let’s start adding in our menu buttons. We’re going to use the HTML5 <nav> element, and then give it a class name of ‘navigation’. Then, within that element, we need to add an unordered list. We leave the unordered list empty for now, as we will fill that in throughout the next few steps. 001 002 003 004 005<br />
<br />
<nav class="navigation"> <ul> </ul> </nav><br />
<br />
04 The home button The next step is to move on to the all-important home button. Within our unordered list, we’re now going to add in our buttons using a combination of list items and additional unordered lists. Adding a class called ‘active’ for our first list will allow us to use that as a trigger for when we add the CSS for our animation. Then our class name is called ‘fa-home’, and this class pulls in our icon fonts from the Font Awesome CSS file. 001 <li class="active"> 002 <a href="" rel="nofollow"> 003 <ul><br />
<br />
<li> <a href="#" rel="nofollow"> <ul> <li><i class="fa fa-camera"></i></li> <li><span>portfolio</span></li> </ul> </a> </li> <li> <a href="#" rel="nofollow"> <ul> <li><i class="fa fa-bookmark"></i></li> <li><span>blog</span></li> </ul> </a> </li> <li><br />
<br />
CSS combinator ~ In a couple of steps throughout this tutorial we have used a very handy little selector called the CSS general sibling selector. The combinator used to notify it is the tilde character ‘~’, which separates two simple selectors. The general sibling selector works by selecting all of the elements that are siblings of a specified element.<br />
<br />
WorldMags.net<br />
<br />
09 Body styles Another part of our CSS reset is to specify both the ‘html’ and ‘body’ elements as 100% height. This will allow our page to stretch to fit the whole browser window. Lastly, because our menu will be blue, we’re going to make the page background dark, which will make our menu pop off the page a bit better than if we were to use white as our background colour. 001 002 003 004 005 006 007<br />
<br />
html, body { height: 100%; } body { background: #1b1b1b; }<br />
<br />
10 Menu position Making sure the menu is in a fixed position will prevent vertical scrollbars from popping up. Then we’re going to use the z index to make sure Web Design for Beginners 153<br />
<br />
Customise your site WorldMags.net this falls above everything else. To give us some breathing space, we will move the menu down by 50 pixels. 001 002 003 004 005<br />
<br />
.menu { position: fixed; z-index: 9999; margin: 50px 0 0 0px; }<br />
<br />
11 Hide the menu Before we can have any kind of animation occurring on the page, we will first need to create some space. This can be done by hiding all of our menu buttons. So, by targeting the nav element, we can set its opacity to zero. Then, you will need to make sure the input check box, which will be our Navicon, is clicked. The next step is to set its opacity to ‘1’ and you will see the menu will appear underneath right away. 001 002 003 004 005 006 007 008 009 010<br />
<br />
.menu nav { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } .menu input#slide:checked ~ nav { -moz-opacity: 1; -webkit-opacity: 1; opacity: 1; }<br />
<br />
12 Label styles Now we’re going to give our Navicon (the horizontal lines) some default styles. Giving this a position of ‘fixed’ will pull the icons up into alignment with the Navicon. Then we make sure that this will act like a button by adding in ‘cursor: pointer’ and we’re going to remove the little checkbox by specifying ‘display: none’ for the input field. 001 .menu label { 002 position: fixed; 003 font-size: 30px; 004 cursor: pointer; 005 z-index: 9999; 006 } 007 .menu input#slide { 008 display: none; 009 } 010<br />
<br />
13 Navicon rotation When the Navicon is clicked on, we want it to rotate 90 degrees by using the transform property. This will make the menu more appealing as it spins around once clicked on, and then the menu will slide out from underneath. At the moment though, the rotation is way too quick, so let’s sort that out in the next step.<br />
<br />
154 Web Design for Beginners<br />
<br />
001 .menu input#slide:checked ~ label.open i { 002 -webkit-transform: rotate(90deg); 003 -moz-transform: rotate(90deg); 004 transform: rotate(90deg); 005<br />
<br />
14 Navicon and button transitions With the Navicon rotating as quickly as it does, it isn’t all that easy on the eye, so it will need to be altered. What we really want to do is add a little easing to it so that it will have a much nicer, smoother rotation when it’s clicked on. The same goes with the menu buttons. Having them suddenly drop down in a blink of an eye isn’t all that comfortable to look at, so we add some easing to those too. 001 002 003 004 005 006 007 008<br />
<br />
.menu label i, .menu nav, .menu nav ul li a span { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }<br />
<br />
15 Space out the buttons 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, we can remove the bullet points. Make sure the overflow is hidden and then increase the size of our font icons to 20 pixels. Having the ability to change the size of our icons is what makes Font Awesome, awesome! 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016<br />
<br />
We’ve now spaced out our buttons using margins and have increased the size of our icons<br />
<br />
.menu label, .menu nav ul li a i, .menu nav ul li a span { line-height: 60px; text-align: center; width: 60px; height: 60px; } .menu nav ul { list-style: none; overflow: hidden; } .menu nav ul li a i { font-size: 20px; }<br />
<br />
Here we used the Google Font Lato and then set the size to 16px to boost the style and impact of this design feature<br />
<br />
Now we add some CSS to make the menu go horizontal at the top of the page, which is where visitors expect the navigation menu to be<br />
<br />
16 Button text The next step is to set the styling for our button text. For this tutorial, we’re going to use a Google Font called Lato, but you can experiment with any font you want to get the desired aesthetic. Next we will set the size to 16px and make sure<br />
<br />
WorldMags.net<br />
<br />
We’ve now added the background colour to our menu and all that’s left is the menu buttons background<br />
<br />
WorldMags.net 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;}<br />
<br />
22 Final thoughts The last step is to add a hover state to our button text, and our expanding horizontal menu is now complete<br />
<br />
it’s all in upper-case. Then we’re going to set the width to zero. 001 002 003 004 005 006 007<br />
<br />
.menu nav ul li a span { font-family: 'Lato', sans-serif; font-size: 16px; text-transform: uppercase; width: 0; } 0<br />
<br />
17 Animate the buttons Now this is where things get a little more interesting. We are going to animate the buttons by using padding – this is so that when the buttons are hovered over, they will move to the right by 10px. Then we need to make sure that the active state is set and they are given a width of 100px. 001 .menu nav ul li a:hover span { 002 width: 100px; padding: 0 10px; 003 004 } 005 .menu nav ul li.active a span { width: 100px; 006 padding: 0 10px; 007 008 }<br />
<br />
18 Horizontal menu Our main aim in this tutorial is to create a horizontal menu, so by targeting the horizontal class we will be able to float the list items to the left, which will fulfil that aim and make the whole menu horizontal. Then, by adding a negative 50 pixels to our menu, we can tighten things up a little bit. 001 .menu.horizontal nav ul li, 002 .menu.horizontal nav ul li a span {<br />
<br />
003 004 005 006 007<br />
<br />
float: left; } .menu.left.horizontal nav { margin-left: -50px; }<br />
<br />
You’ll more than likely see plenty of navigation menus like this, especially now that responsive webpages are now part of our design workflow. Using vector icons such as Font Awesome will really help make your navigation menus more easy and fun to develop.<br />
<br />
19 Home button At the moment the icon for our home button is hidden underneath the Navicon. So by adding 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 click on both the Navicon and the home icon, the menu will close. 001 .menu.left.horizontal input#slide:checked ~ nav { 002 margin-left: 60px; 003 } 004 .menu.right.horizontal nav { 005 margin-right: -50px; 006 } 007 .menu.right.horizontal input#slide:checked ~ nav { 008 margin-right: 60px; 009 }<br />
<br />
20 Menu colour In the last few steps of this tutorial we are going to add some colour to both our menu and the buttons. The first thing to do then is to add a nice light blue to our menu background. Then we will give our icons a different shade of blue, which will be slightly darker than our main menu background. 001 .menu.blue label, 002 .menu.blue nav ul li a ul li i { 003 background-color: #3498db; bg 004 color: #2980b9; icons 005 }<br />
<br />
WorldMags.net<br />
<br />
The @keyframes at-rule Throughout this tutorial we’ve made good use of Font Awesome, a scalable vector icon font and CSS kit. So what are the benefits of using an icon font instead of images and sprites? The first and best benefit is that it is just a font. This means that you get all of the benefits of styling that you would get with regular text. So, for example, you can easily change the colour and size of an icon with a little bit of CSS. It will also render as sharp as your device will allow it to, so there’s no need to worry about creating Retina-ready graphics. The other benefit of using Icon Fonts is the performance. Since all of the icons are included in one font file, it means that it is only one HTTP request to load. This can really give you quite a bit of page-load performance if you are using a number of different icons. The best way of adding Font Awesome to your website is to use the CDN and add that to the head of your HTML file.<br />
<br />
001<link href="//maxcdn.bootstrapcdn. com/font-awesome/4.2.0/css/font-awesome. min. css" rel="stylesheet"> The other way is to download the CSS file and link that in as you would with a normal CSS file – which is what we did for this tutorial.<br />
<br />
Web Design for Beginners 155<br />
<br />
Customise your site WorldMags.net SOURCE FILES AVAILABLE<br />
<br />
01 Inspiration<br />
<br />
Create CSS animated background text<br />
<br />
Talk to me Talk PR is a global communication and public relations company specialising in brand marketing and launches, SEO and social media management (among many other things). They boast a very sleek and brilliantly executed website, which features parallax delivery of content and a simple but striking landing area. This landing area contains little more than the Talk PR logo to emphasise the brand, but it is also made a significant design feature, with an animated background that makes for an engaging introduction to the site. The Talk PR text feature is created using an animated GIF background image, which is a simple and effective way to achieve the effect. However, in this tutorial we will create our own text with an animated background via two distinct methods using CSS3.<br />
<br />
Use text to deliver a message and as an artistic element of the page<br />
<br />
O<br />
<br />
ver the last few years a ‘less is more’ aesthetic has taken root in web design practice and presentation. At present, the use of text rather than images to create initial impact on a website is becoming more and more widespread. The old slide shows are being replaced with bold, stark fonts and plenty of white space. There has also been, however, the re-emergence of the font as an image in its own right. This technique is predominantly being used as an artistic element rather than a simple means to deliver language and communicate a specific textual message. For this reason, typography has<br />
<br />
become a far more creative endeavour in web design than it has been in many years. Here we will explore just one way of turning text into a piece of design on your website.<br />
<br />
“Typography has become a far more creative endeavour in web design”<br />
<br />
Background text<br />
<br />
Menu position Unusually, the navigation menu for the Talk PR site appears initially at the bottom of the landing screen. It readjusts to the top on scroll for easier usage<br />
<br />
Let the text do all the talking<br />
<br />
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<br />
<br />
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<br />
<br />
SIMPLE WORKS Talk PR’s animated GIF method for creating the text background may seem too simple for those looking to use more modern methods, but it works. It also resizes smoothly within this responsive website, which helps avoid browser issues.<br />
<br />
156 Web Design for Beginners<br />
<br />
Clear links<br />
<br />
Sliding grid links<br />
<br />
Take a look at the impressive list of clients for some smooth scrolling links from each well-known client logo. Some of them are given colour upon rollover, which then link to a page about the client<br />
<br />
It’s also worth taking a look at the blog, from one of the front page links. It is another good example of grid image layout for content links that slide into place<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net Old tricks, new techniques <comment> What our experts think of the site<br />
<br />
“There was a time when this effect would have been handled quite adequately in Flash, but in the present, HTML5 and CSS3 enable us to replicate old animation tricks without losing device access or SEO standards. Sometimes the effects don’t change, just the method of delivery. This website is one of those sites that could have been built for other web designers.” Richard Lamb<br />
<br />
02 Technique one Image-based method 01 Create the images Make two images. The first should be a white background rectangle (with a width of 950px and height of 395px), within which there is the word “WOW!” in transparency. The second image should be a series of background images, each measuring the same width and height as the text image, arranged in one long strip with a width of 4750px. Name them ‘wow.png’ and ‘bg.jpg’.<br />
<br />
02 The base HTML The first step of our image-based method involves creating the base code into which our elements will be placed. Here we are using a simple wrapper that contains two nested divs: the .wow div with the text PNG image and the ‘.inner-wow’ div, which with the animated background image. 001 <body> 002 <div id="wrap"> 003 <div class="wow"> 004 <div class="inner-wow"></div> 005 </div> 006 </body><br />
<br />
03 The base CSS Initially, we are centring our .wow div with automargins and setting a width of 950 pixels to match the wrapper div, and a height of 395 pixels. This will house the wow.png image. Within this div we nest the .inner-wow with 100% width and the padding values, which enable the div to fill the height of the parent div. 001 #wrap { 002 margin:100px auto; 003 width:950px; 004 } 005 .wow {<br />
<br />
006 width:950px; 007 height:395px; 008 background:url(wow.png); 009 } 010 .inner-wow { 011 width: 100%; 012 padding: 0% 0 41%; 013 }<br />
<br />
04 Arrange the background Declare the bg.jpg image as the background to the .inner-wow div. Hide the overflow to be safe and then begin declaring your animation styles for the background. The next step will be to tweak the duration to suit. Don’t forget to add 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 remains present and correct in the background. 001 .inner-wow { 002 ... 003 background: #fff url(bg.jpg) repeat; 004 overflow: hidden; 005 -webkit-animation-name: bg; 006 -webkit-animation-duration: 35s; 007 -webkit-animation-iteration-count: infinite; 008 -webkit-animation-timing-function: linear; 009 position: relative; 010 z-index: -1; 011 }<br />
<br />
05 Add the keyframes Our animation won’t do anything if we don’t assign the keyframes to it. The particular set we are using involves a relatively simple animation, where the background image slides from right to left and then repeats on an infinite loop. When in place, the background image will continually pop from one image to the next. Once again, remember to include vendor prefixes. 001 @-webkit-keyframes bg { 0% { background-position: 0% 002 50%; } 100% { background-position: 003 100% 0%; } 004 } 005 @-moz-keyframes bg { 006 } 007 @keyframes bg { 008 }<br />
<br />
WorldMags.net<br />
<br />
03 Technique two Text-based method This technique looks at an alternative animation, where the same effect is created with actual text, rather than a background image. However, this process uses the webkitonly property ‘-webkit-background-clip: text’, which currently only works on webkitenabled browsers.<br />
<br />
01 Use a span Set the wrap to the same dimensions as used in the previous technique steps. Discard the wow.png but retain the bg.jpg image. This time, instead of using an image within the .wow div, we’ll use a simple <span> element. Write your chosen word within it. 001 <div id="wrap"> 002 <span>WOW!</span> 003 </div> 004<br />
<br />
02 The CSS Replicate the font, font-size and, if required, font-weight used for the text image from the previous method. Use the original background image, but this time as the background for the span. 001 span { 002 position:absolute; 003 font-family: 'Open Sans', sans-serif; 004 font-size:300px; 005 font-weight:800; 006 background:url(bg.jpg); 007 } 008<br />
<br />
03 Add properties Now for the properties – add these and the background-clip and text-fill-colour too, which enables the background image to display within the confines of the span text. This will, in effect, turn the text into a mask. We will replicate the animation from the previous method, as well as the keyframes. 001 span { 002 ... 003 -webkit-background-clip: 004 -webkit-text-fill-color: transparent; 005 -webkit-animation: bg 20s linear infinite; 006 } 007<br />
<br />
text;<br />
<br />
Web Design for Beginners 157<br />
<br />
Customise your site WorldMags.net SOURCE FILES AVAILABLE<br />
<br />
Make image hover effects in CSS<br />
<br />
01 Inspiration Artisan branding<br />
<br />
Use images as interactive elements in your webpage<br />
<br />
I<br />
<br />
n addition to the recent trends in web design towards typo graphics, there has also been a shift in the use of images. As broadband speeds increase and web delivery methods refine, it’s no longer detrimental to the load-time of a website if it‘s heavy with large images. This enables imagery to be used as part of more interactive elements, such as navigation links. CSS now provides a wealth of possibilities to animate, embellish and enhance online imagery, and turn your images into interactive elements. In this tutorial, we will look at the process behind creating an image grid,<br />
<br />
complete with CSS hover effects and animated captions. It’ll be easy for you to animate your webpage, making it more beautiful and interactive.<br />
<br />
Wood Shed Production is an American company that specialises in hand-crafted art made from reclaimed wood. They sell their wares in local markets but also on Etsy, and use their website as an introduction for the company and a channel for all of their specialist orders. In effect, it serves as a shop front for making sales and building brand awareness. The site features a large quantity of imagery, as well as an initial full-width video background. It is simple, well laid out and extremely evocative of the workshop environment, making it an authentic representation of the business and 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 the basis of this tutorial.<br />
<br />
“There has also been a shift in the use of images in web design trends” Veiled background Image hover effects<br />
<br />
Look carefully as you scroll up and down, and you’ll see a parallax background (of a wood detail image) covered with a black overlay. This then slides up behind the link for the Wood Shed Journal<br />
<br />
Let the images on your webpage take centre stage<br />
<br />
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<br />
<br />
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<br />
<br />
IMAGE USE It doesn’t take much work at all to use your images as the basis for smooth, eye-catching, interactive effects. As with the Wood Shed Production site, try to see your images as more than just pictures to be placed in a window for display.<br />
<br />
158 Web Design for Beginners<br />
<br />
Varied effects<br />
<br />
Unique menu<br />
<br />
The Where to Buy section, which is located above the Instagram section, features a different set of hover effects. Hover on each link to view a slide-in underline element<br />
<br />
Instead of a more typical menu that slides in from the left and features text only, this one occupies half the screen width and has an image background<br />
<br />
WorldMags.net<br />
<br />
WorldMags.net 03 Technique<br />
<br />
Browser lag <comment> What our experts think of the site<br />
<br />
“Building with CSS3 can sometimes bring home just how inconsistent browser support for the newer web technologies is. While Internet Explorer has improved vastly over the last few years, IE10 seemed to take some steps back. Even Firefox has fallen behind with certain CSS properties. Time for better browser standardisation?” Richard Lamb<br />
<br />
02 Technique Set up the image wall 01 Build the base HTML Start by building the first cell in our grid. The cell div contains an image with caption div underneath. These are wrapped in an ‘a’ link, repeat it for the images you use, then adjust the pic and caption for each cell.<br />
<br />
02 Set cell sizes Make sure that our images will adjust themselves to fit the cell divs when set to a 25% width. Equally sized images are essential for this grid. Note that the cell divs can have a finite width. The relative position will come into play when the caption is styled in the next few steps. 001 img { 002 max-width:100%; 003 border:none; /*for IE*/ 004 } 005 .cell { 006 position: relative; 007 overflow: hidden; 008 width:25%; 009 height:auto; 010 float:left; 011 }<br />
<br />
03 Use the caption CSS We are using the caption div as an overlay to the image, giving it an absolute position and 100% width and height. We will go on to style it in the next step. Choose your own background colour but rgba with opacity will give you transition on hover. Remember your vendor prefixes for the transition declaration. 001 .caption { 002 position: absolute; 003 top: 0; 004 left: 0; 005 width: 100%; 006 height: 100%; 007 background:rgba(31,31,31,0.8); 008 transition: all 0.6s ease; 009 }<br />
<br />
Fade the colour To de-saturate images and saturate on hover, we use the grayscale filter property. This is fully supported in Chrome and IE6 to 9, with some support in Safari.<br />
<br />
04 Set the H2 CSS tag The actual caption H2 tag also has an absolute position to place and move it. Font size, colour 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 animate the caption as it fades in. Begin with a -30px height from the 0 bottom property. 001 .caption h2 { 002 position: absolute; 003 bottom: 0; 004 left: 0; 005 margin:0; 006 padding: 15px; 007 opacity:0.1; 008 transition: all 0.6s ease; 009 transform: translate3d(0,-30px,0); 010 } 011<br />
<br />
05 Change the hover effects Now it’s time to tie up the hover effects. First lift the opacity on the caption background, which will reveal the image, and increase the opacity of the H2 tag to full. Animate the H2 tag by reducing that -30 pixel distance back to 0, using the transition to ease the animation. 001 .caption:hover { 002 background:rgba(31,31,31,0); 003 transition: all 0.6s ease; 004 } 005 .caption:hover h2 { 006 opacity:1; 007 text-shadow: 1px 1px #1f1f1f; 008 transition: all 0.6s ease; 009 transform: translate3d(0,0,0); 010 } 011<br />
<br />
01 Focus on cell The key to implementing the filter is to make the cell div the focus of the hover action. Add the following to the .cell CSS, and change every instance of .caption:hover to .cell:hover through original animations. 001 .cell { 002 ... 003 -webkit-filter: grayscale(1); /* webkit versions */ 004 -webkit-filter: grayscale(100%); 005 filter: grayscale(100%); 006 filter: gray; /* IE6-9 */ 007 transition: all 0.6s ease; 008 }<br />
<br />
Older<br />
<br />
02 Add a new hover effect Now add filter property transition and simply eliminate the grayscale filter with an easing transition. You can adjust the opacity levels of the original caption div now that images load in black and white. 001 .cell:hover { 002 -webkit-filter: grayscale(0); /* Older webkit versions */ 003 -webkit-filter: grayscale(0%); 004 filter: grayscale(0%); 005 filter: none; /* IE6-9 */ 006 transition: all 0.6s ease; 007 }<br />
<br />
03 Colour or monochrome Either as links to relevant destinations within the site or simply gallery images in their own right, adding some animation and CSS reveals to your images can make a world of difference.<br />
<br />
WorldMags.net<br />
<br />
Using the grayscale filter to ease between monochrome and colour produces a very eye-catching effect. It may not be fully supported, but there are JavaScript fallbacks and SVG alternatives as browsers catch up.<br />
<br />
Web Design for Beginners 159<br />
<br />
Customise your site WorldMags.net<br />
<br />
Animate a strike-through text effect Learn how to add this nifty effect to your text<br />
<br />
T<br />
<br />
he problem with descriptive language is that the addition or omission of a single word, or even a comma, can give a completely different meaning to the message being communicated. Creative design can use this flaw in language to emphasise the difference between one meaning and another. In our example, we use the text ‘I am not invincible’ with animation to emphasise the omission of ‘not’, thereby changing the meaning of the sentence. This effect has been used to good advantage on the McClaren agency website to emphasise the agency’s excellence. This tutorial shows how standard CSS without support from<br />
<br />
JavaScript can be used to redefine the standard <strike> tag to present an animated strikethrough effect. The advantage of this approach is how it can be applied to websites containing massive amounts of existing content. All that is required is the addition of the CSS – no HTML modifications whatsoever! The approach used in this tutorial provides a standard fallback for modern browsers that don’t support the animation effect. For older versions of Internet Explorer that don’t support the before selector, you might want to use the ‘if IE’ HTML tags to reactivate the standard strikethrough effect.<br />
<br />
TEXT: THE BOTTOM LINE Despite the design focus being on the strike-through effect, it’s important that the focus is on how the text is interpreted in all circumstances. The primary consideration is the wording used. Make sure to be critical of how the meaning of the text can be interpreted with and without the text struck through. Another important consideration when integrating this effect into your web content is the use of a fallback feature. It could be a failure for the strike-through text not to appear on browsers that don’t support some CSS features. So the original text would appear without the strike-through effect. Imagine this: ‘XYZ premium brand, delivering [average] quality since 1984’, but without the [average] struck through. So bare in mind contractually obliging text, like the well-known UK catalogue chain who had to sell TVs for £1 due to a wording error on their site.<br />
<br />
Strike-through animations As seen on mclarenagency.com<br />
<br />
Strike importance Make sure that the strikethrough effect is visible on all browsers to avoid embarrassing wording slipping through<br />
<br />
Strike colour Unlike the standard strike-through effect offered by HTML and CSS, this line is a different colour to the main text<br />
<br />
Strategic wording The wording is written to make full use of the strike-through effect, and to change the context on each read<br />
<br />
Legacy content Using the standard <strike> tag will allow the effect to be compatible with all content without needing HTML changes<br />
<br />
160 Web Design for Beginners<br />
<br />
WorldMags.net<br />
<br />
Semantic meaning The <strike> tag provides context to the text, allowing apps and search engines to understand what is happening<br />
<br />
WorldMags.net 01 Initiate webpage As usual, the first step is to define the webpage document. This consists of the <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> 002 <html> 003 <head> 004 <title>Text Strike 005 *** STEP 3 HERE 006 007 008 *** STEP 2 HERE 009 010 elements display as an inline-block, are relatively positioned and don’t show the default strike-through effect. These are all required to ensure that the strike-through effect covers the text as it was intended. 001 strike{ 002 display: inline-block; 003 position: relative; 004 text-decoration: none; 005 } container with different types of text – each having a word ‘not’ struck through using the tag. 001 002 I am not invincible! 003 I am not invincible! 004 I am not invincible! 005 I am not invincible! 006
container positioned in the centre. element – we achieve this using the :before selector and we also need to set content for it to be visible. The CSS is designed to ensure that all browsers show the cross-out effect by default – even if the animation effect isn’t supported. We don’t want some people reading the wrong message. 001 strike:before { 002 content: ''; 003 position: absolute; 004 display: block; 005 width: 100%; 006 height: .1em; 007 margin-top: .6em; 008 background: red; 009 animation: strikethrough 1s; 010 } and .email), you can use a form. They are great for interactivity and for allowing people to fill in details directly on the page. You can code them yourself or use third-party software to generate a form which can then be embedded.
