how-to-build-a-website-from-a-to-z

HOW TO BUI LD A

WEBSI TE FROM A TO Z F r om t hef i r stmeet i ngwi t ha cl i entt ot hel aunchonl i ne oft hesi t e

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Nan doP appal ar do&Sar aP r es en t i

Your Inspiration Web | http://en.yourinspirationweb.com/

1

HOW TO BUILD

A WEBSITE FROM A TO Z Nando Pappalardo & Sara Presenti

Your Inspiration Web | http://en.yourinspirationweb.com/

2

How to build a web site from A to Z An eBook of Nando Pappalardo & Sara Presenti Copyright Š 2009-2010 Your Inspiration Web

First edition: August 2010

Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews.

Notice of Liability

The author and publisher have made every effort to ensure the accuracy of the information herein.

However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and Your Inspiration Web, nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Trademark Notice

Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by Your Inspiration Web

Web: http://en.yourinspirationweb.com

Email: info@yourinspirationweb.com

Your Inspiration Web | http://en.yourinspirationweb.com/

3

Authors Sara Presenti Web designer, has been working in the field of graphics and web development for several years and at the moment besides collaborating with any web agencies successfully manages her freelance activity under the name of mascara design 1.

Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Nando Pappalardo

Nando is the founder of Edi Group 2, an Italian Communication and Education company, founded in 2005.

He’s also Web Design Teacher and besides Microsoft Trainer with years of experience in regional and private training courses as a designer and trainer.

Your Inspiration Web

From symbiosis to Nando and Sarah in May 2009 born Your Inspiration Web 3, a community dedicated to web design that offers daily guides, tutorials, tips, freebies, tips and tricks and numerous showcase of inspiration for your work.

Your Inspiration Web is becoming an increasingly ambitious project thanks to the continuous collaboration of some professionals that have been added along the way at our team. Special thanks to: Giustino Borzacchiello, Maurizio Tarchini, Cristian Angelini, Ivan Signorile, Nicolas Gutierrez, Daniele Nicolosi and Marco Di Mauro.

To learn more, visit the pages 4 dedicated to authors of YIW.

A heartfelt thanks goes also to Antonino ScarfĂŹ that deals a few months to administer the Italian forum 5of YIW.

1

http://www.mascaradesign.it/ http://www.edi-group.it/ 3 http://en.yourinspirationweb.com/ 4 http://www.yourinspirationweb.com/en/authors/ 5 http://www.yourinspirationweb.com/forum 2

Your Inspiration Web | http://en.yourinspirationweb.com/

4

SUMMARY

INTRODUCTION .................................................................................................................. 12 WHICH TOPICS WILL BE DISCUSSED? ................................................................................................ 12 HOW TO UNDERSTAND THE CLIENT’S NEEDS ON THE FIRST ENCOUNTER? ........................... 14 WHAT IS THE BRIEF? ..................................................................................................................... 15 WHAT ARE THE REQUESTS OF THE CLIENT? ........................................................................................ 15 WHAT INFORMATION DO I HAVE TO GATHER FROM THE CLIENT? ........................................................... 15 AN OUTLINE OF A BRIEF, COMPILED AT THE END OF A MEETING WITH A CLIENT: ........................................ 16 Heading .............................................................................................................................. 16 Background ......................................................................................................................... 16 Objective ............................................................................................................................. 17 Target audience .................................................................................................................. 17 Summary............................................................................................................................. 17 Keywords ............................................................................................................................ 17 Key points ........................................................................................................................... 17 CONCLUSIONS ............................................................................................................................. 17 HOW TO CALCULATE COSTS AND DELIVERY TIME OF A WEB PROJECT? ................................ 18 HOW SHOULD I CALCULATE THE COSTS AND DELIVERY TIME OF A WEB PROJECT WITHOUT MISREPRESENTING THESE FIGURES? ........................................................................................................................... 19 Main aspects of the project plan ........................................................................................ 20 1st video – Introduction and task list creation – (length: 9′ 29”)........................................ 21 2nd Video – Adding all the tasks that form a project – (length: 16′ 32”) ........................... 21 3rd Video – Adding resources and assigning each to a specific task – (length: 7′ 15”) ...... 21 4th Video – Complete allocation of all single tasks – (length: 5′ 24”) ................................ 22 5th Video – Defining the length of each activity – (length: 10′ 47”) ................................... 22 6th Video – Linking various tasks – (length: 12′ 46”).......................................................... 22 CONCLUSIONS ............................................................................................................................. 22 HOW TO AVOID FUTURE THOUGHTS FROM THE CUSTOMER ............................................... 24 THE PERSONALIZED SALES CONTRACT ............................................................................................... 25 Contract Killer ..................................................................................................................... 25 Freelance Web Designer Contract ...................................................................................... 25 Aiga standard form for design services .............................................................................. 26 CONCLUSIONS ............................................................................................................................. 26 HOW TO DEVELOP AND ORGANIZE THE STRUCTURE OF A WEBSITE? ................................... 28 DEFINING THE INITIAL CONCEPT ...................................................................................................... 29

Your Inspiration Web | http://en.yourinspirationweb.com/

5

WHAT IS THE STRUCTURE OF A WEBSITE? .......................................................................................... 30 WHAT IS THE ARCHITECTURE OF INFORMATION? ................................................................................ 30 WHAT IS THE DIFFERENCE BETWEEN STRUCTURE AND ARCHITECTURE OF INFORMATION?............................ 30 RETURNING TO OUR PRACTICAL EXAMPLE.......................................................................................... 30 IT’S TIME TO CREATE THE WIREFRAME .............................................................................................. 31 CONCLUSIONS ............................................................................................................................. 32 HOW TO FIND INSPIRATION AND DESIGN THE LAYOUT OF A WEBSITE? ............................... 34 FIND THE RIGHT INSPIRATION.......................................................................................................... 35 Phase 1: Searching .............................................................................................................. 35 Phase 2: Express yourself in detail ...................................................................................... 36 Phase 3: Take a break ......................................................................................................... 36 WE HAVE FOUND OUR INSPIRATION…WHAT’S NEXT? .......................................................................... 36 ADDING SOME IMAGES IN THE LAYOUT ............................................................................................. 43 ATTENTION TO THE TYPOGRAPHY .................................................................................................... 44 THE PHOTO GALLERY ..................................................................................................................... 46 FINAL TOUCHES ........................................................................................................................... 48 HOW TO PRESENT THE GRAPHIC DRAFT TO THE CLIENT? ..................................................... 52 HOW SHOULD I PRESENT THE DRAFT TO THE CLIENT? ........................................................................... 53 ESTABLISHING A GOOD RELATIONSHIP .............................................................................................. 53 AVOID BEING ARROGANT ............................................................................................................... 53 EXPLAIN THE CHARACTERISTICS ....................................................................................................... 54 HIGHLIGHTING THE STRONG POINTS ................................................................................................. 54 BE OPEN TOWARDS A CLIENT’S OBJECTIONS ....................................................................................... 55 YOU FEEL THAT YOU’RE DOING THINGS THE RIGHT WAY? PROVE IT. ........................................................ 55 WHAT IF I AM WORKING FROM HOME? ............................................................................................ 56 CONCLUSIONS ............................................................................................................................. 56 HOW TO DESIGN THE INTERNAL PAGES AFTER THE LAYOUT IS APPROVED? ......................... 58 THE FIRST THING .......................................................................................................................... 59 DESIGN BASED ON CONTENT........................................................................................................... 60 INSERT THE LINKS AT THE INTERNAL PAGES ........................................................................................ 61 TO ADD SOME GRAPHICAL ELEMENTS ............................................................................................... 63 HOW TO EXPORT A PSD INTO XHTML AND CSS WITHOUT LOSING YOUR SOUL? (PART 1)..... 68 PREMISE .................................................................................................................................... 69 STEP 1: HOW CAN I DIVIDE THE LAYOUT OF A WEBSITE? ...................................................................... 70 STEP 2: LET’S EDIT OUR STYLE SHEET ................................................................................................ 71 STEP 3: ASSIGNING A PATTERN TO THE BODY ..................................................................................... 72 STEP 4: WRITING THE FIRST LINES OF (X)HTML CODE ........................................................................... 74 STEP 5: DEFINING THE CONTAINER OF THE WEBSITE ............................................................................ 75 STEP 6: DIVIDING THE CONTAINER INTO TWO COLUMNS ...................................................................... 76

Your Inspiration Web | http://en.yourinspirationweb.com/

6

STEP 7: ITS TIME TO ADD THE FOOTER .............................................................................................. 79 CONCLUSION............................................................................................................................... 81 HOW TO EXPORT A PSD INTO XHTML AND CSS WITHOUT LOSING YOUR SOUL? (PART 2)..... 82 STEP 1: ADDING A HEADER ............................................................................................................ 83 STEP 2: ADDING TEXT TO A PAGE .................................................................................................... 85 STEP 3: EDITING THE FOOTER ......................................................................................................... 87 STEP 4: BROWSING THROUGH THE SITE ............................................................................................ 94 And now, let’s look at the code! ......................................................................................... 96 Hovering while browsing .................................................................................................... 98 STATUS UPDATE ON THE PROJECT .................................................................................................. 100 HOW TO INDEX A WEBSITE WITHOUT BEING AN SEO EXPERT ............................................ 102 WHAT IS THE DIFFERENCE BETWEEN INDEXING AND POSITIONING?....................................................... 102 WHEN A WEBSITE IS GIVEN A MAKEOVER, IN ORDER TO OBTAIN A BETTER RANKING, WHAT ARE THE MAIN ASPECTS THAT WE MUST TAKE INTO ACCOUNT? ................................................................................ 104 HOW DO I USE THE TAG TITLE CORRECTLY? ..................................................................................... 104 Hints and Tips ................................................................................................................... 105 WHAT ARE META TAGS AND HOW DO I USE THEM? .......................................................................... 105 HOW IMPORTANT IS THE CONTENT FOUND ON OUR WEBPAGE? ........................................................... 106 Hints and Tips ................................................................................................................... 107 WHAT ARE HEADING TAGS AND HOW DO I USE THEM CORRECTLY? ...................................................... 108 Hints and Tips ................................................................................................................... 108 IS THE ALT ATTRIBUTE FOR IMAGES USEFUL FOR RANKING PURPOSES? .................................................. 109 Case 1: Images with hyperlinks......................................................................................... 109 Case 2: Images without hyperlinks ................................................................................... 109 CONCLUSION............................................................................................................................. 109 HOW TO MAKE SURE OF NOT HAVING COMMITTED ERRORS BEFORE LAUNCHING THE WEBSITE ONLINE? ............................................................................................................. 110 WHAT DO I HAVE TO CHECK BEFORE PUBLISHING THE WEBSITE ONLINE?................................................ 111 Content analysis ............................................................................................................... 111 Search engine optimization .............................................................................................. 111 Code validation ................................................................................................................. 112 Accessibility tests .............................................................................................................. 112 Functionality test on browsers and different Operating Systems ..................................... 113 Functionality test on modules........................................................................................... 113 Analysis of the website performance................................................................................ 113 Last remarks ..................................................................................................................... 114 CONCLUSIONS ........................................................................................................................... 114 CONCLUDING REMARKS ............................................................................................................... 114 INDEX ............................................................................................................................... 116

Your Inspiration Web | http://en.yourinspirationweb.com/

7

Your Inspiration Web | http://en.yourinspirationweb.com/

8

Your Inspiration Web | http://en.yourinspirationweb.com/

9

Nothing happens by chance.

Each is the reflection of the other in the flow of the universe.

[Celestine Vision - James Redfield]

Your Inspiration Web | http://en.yourinspirationweb.com/

10

Your Inspiration Web | http://en.yourinspirationweb.com/

11

Introduction

This book focus on clients, invoices, drafts as well as on other thing and is highly recommended, especially if you’re new to all of this, and you will be able to learn about new theoretical notions as well as being able to learn how to work in an organized way.

If instead you’re a professional, you can always find it helpful to discover other techniques.

The articles in this guide will be published on a weekly basis: this means that our course will continue for the next ten weeks.

Which topics will be discussed?

There isn’t a specific and limited topic: it will range on all those are the steps that are generally carried out in developing a web project, the first meeting with the client and the drafting of the brief, to the final check to do before you launch the site online. Quotation, Contract, inspiration, design, development, SEO ... a complete overview of everything you need to know before, during and after the building of a site.

Obviously, some topics covered in this guide (such as development and project management, optimization for search engines, information architecture, etc.) are very complex and could not be further in a detailed and complete each topic. In some cases we have tried to link material and external resources in order to make you better understand certain passages of our guide, in the next part of this e-book which we hope to also analyze specifically what in here we have not treated or we could expose only superficially.

We hope you enjoy reading and please contact us for any further questions or information, report any inaccuracies or suggest improvements.

Our contact address is info@yourinspirationweb.com.

Your Inspiration Web | http://en.yourinspirationweb.com/

12

Your Inspiration Web | http://en.yourinspirationweb.com/

13

Chapter

1

How to understand the client’s needs on the first encounter?

Let’s begin this series by looking at one of the most pressing issues, which is understanding the specific needs of a client. In order to create and deliver a great project, it is fundamental to know who we are working with and what his or her requests are so that we can use this information to compile a preliminary worksheet. An essential tool that we can use to keep track of a client’s input is a brief.

Your Inspiration Web | http://en.yourinspirationweb.com/

14

What is the brief?

Brief can be considered the foundation behind every great project: essentially it is a document which contains detailed information regarding your client. It is compiled once the client is met, with the objective of collecting as much information as possible, such as data and personal inputs from the client, that will help us in developing a web project.

Briefs are created when the client is met for the first time, and this first phase can be considered of great importance that will determine the final look of a given project. Briefs are not as popular as one might think, considering they are of obvious importance. For instance, projects are laid out as drafts, and eventually started without even considering the specific needs of a given client.

Working this way is useless: it is highly unlikely that one will be able to satisfy the needs of a client by working through trial-and-error, without having a valid point of reference.

Imagine being on a boat, ready to set sail from a port without even knowing where to go.

What are the chances that you will go shipwreck if you don’t’ know where you’re going exactly? What are the chances that you will arrive at a port that is in worse condition than the one you’re coming from? Chances are pretty high for both situations. And for a number of reasons. The main reason is because you don’t really know what you want, therefore it is impossible to realize anything.

This is what happens when one lacks organization.

What are the requests of the client?

In an ideal situation, a client would come to you with something already in mind, letting you know what his or her needs are. However, in reality clients can be confused and not have a clear idea as to what they want. Then it is up to you to listen to them, guiding them to the most adequate solution available.

If there’s something unclear, it is important to ask the client simple and concise questions: gathering data will become a much easier process and in the meantime you will avoid creating a sense of misunderstanding with the client.

What information do I have to gather from the client?

It is up to you to know what the needs of your clients are; so that you can then point them in the right direction.

Your Inspiration Web | http://en.yourinspirationweb.com/

15

Keep in mind that a brief will have to answer the following questions: 1.

Who: Who is our target audience?

3.

How: How can we make sure a potential customer knows that our offer is genuine? Is there any evidence that we can provide as proof?

2.

4.

What: What are we offering to this target audience? (What’s our product line?)

What main idea are we trying to convey to our target audience?

Once this basic set of information is obtained, we can go into more detail by sharing our ideas with the client and by debating on the various aspects of the project.

It can be useful to look at the websites of the client’s main competitors together with the client: this will help you get an idea of the client’s preferences concerning aesthetics, so that it will be easier for you to ask your client about what kind of look the site should have: •

• • •

•

Does the client need to have corporate colors shown on the website (such as logos, brochures, labels)?

Does the client have any preferences in the colors that will be used?

Does he or she request a specific set of graphic-related elements?

Does the client want to have a photographic gallery or any type of animated effect?

Will the client provide the material that is going to be added in the website (such as images, logos, and text)?

An outline of a brief, compiled at the end of a meeting with a client: Heading

Details concerning the meeting: date and place, title of project, names and titles of participants.

Background

Who is the client and what is his or her line of business.

Your Inspiration Web | http://en.yourinspirationweb.com/

16

Objective

What kind of objective does our client have? Does he or she want to sell products? Obtain better rankings? Advertise the services that are offered?

Target audience

Who is the target audience? Who are the potential customers and/or users of this service?

Summary

Exactly what kind of service is the client requesting?

Keywords

In this section we are to jot down some keywords that summarize and identify the client and his or her type of business. For example, if our client was involved in the autotransport business, what kind of keywords would we jot down? Promptness, safety, efficiency, stability..

Key points

These are essential details that need to be written down.

For example: company colors, logos, images that will be used, the personal style of the client.

Conclusions

After reading the previous sections, you should know what the client expects from you.

And, it should be clear what kind of work you will have to do for the client.

Before coming up with a preliminary estimate for the project, you should take some time to reflect.

What might seem to be an easy project that can be finished in a matter of hours, can turn out to be quite long and tedious: Do you want to avoid falling prey to this and working in total confusion?

If your answer to this question is yes, we suggest you take a look at the next chapter: How to calculate costs and delivery time of a web project avoiding the writing of pointless figures?

Your Inspiration Web | http://en.yourinspirationweb.com/

17

Chapter

2

How to calculate costs and delivery time of a web project?

After having established with your client the general structure of the website and the objectives behind its creation (type of content, number of pages, etc.), you will have to create a detailed budget estimate, which will include the costs and the estimated time of completion for the project at hand.

Your Inspiration Web | http://en.yourinspirationweb.com/

18

How should I calculate the costs and delivery time of a web project without misrepresenting these figures?

The best way is to work on a project-basis.

Web development is not an easy task, as someone who is misinformed might think. Rather, it is a complex endeavor that requires the collaboration of various professionals, each of whom is assigned a specific role in the development of the project.

Let’s take a look at some of the most important positions we will find in web development.

•

•

Project manager: is in charge of managing the project by coordinating the work team, coming up with a budget for the project and establishing the types of resources, costs and delivery time.

Development team: depending on the complexity of the project, it can include the following positions: 







•

Web concept designer: is responsible for giving shape to the project, starting from the initial idea, the communication strategies and the business objectives.

Web designer: is responsible for giving shape to the project, starting from the initial idea, the communication strategies and the business objectives.

Graphic designer: working with the web designer and/or the client, the graphic designer is in charge of the page layout and the overall graphics of the website. The graphic designer’s main responsibility is to convey a range of emotions to the user through his or her choice of images and graphics.

Web developer: is in charge of structuring the various web pages. He or she is responsible for the correct transfer of a web designer’s ideas into a page that can be viewed online. This is done using a series of codes, as well as by using XHTML, CSS, ASP, PHP, JSP, SQL for script development and to encode the dynamic part of the website.

Contents team: in charge of writing. Using the notes collected from the client, the contents team is to come up with a language that pertains to the web project, is specific to the needs of your client and that can also help embellish the site.

Your Inspiration Web | http://en.yourinspirationweb.com/

19

•

Marketing team: is responsible for advertising the website, making sure that there are enough visitors and that the website reaches its intended goals. The marketing team is involved in the project from the very beginning, working alongside the web and graphic designers, and the web developer. 

Web Marketing Strategist: is in charge of the communication and web services that are part of the project. Mostly, it involves: coming up with a business idea, product/service placement, technological aspects, and partnership creation. It also involves a continuous monitoring of the various services offered by the web site.

These specific positions are tied to the complexity and overall budget of a given project. So, a small project that has a limited budget could have one person cover more than one of these positions.

Now that we have looked at the various positions involved in web development, let’s get acquainted with the role of the Project Manager. Let’s begin by listing the objectives, creating a list of needed programs, defining the various phases behind the web development process and attributing a specific task to a given position.

Our client has hired us not only for website development but also for other services such as copywriting and site indexing.

Main aspects of the project plan

These are the main aspects that a project plan needs to consider: 1.

project objectives: what needs to be done (in this case, website development);

3.

necessary skills: what skill set is needed (what kind of professional does the project need to hire);

2.

4.

5.

6.

steps involved: how should it be done (what are, in detail, the steps needed to complete the project);

dividing the work load: who is in charge of what (each task will be assigned to a specific role);

project schedule: what is the timeline (outlining the various phases and how long each of them should take to finish);

budget divisions: how much will the project cost to make (cost of project is calculated based on the resources involved and the deadline for the project);

Your Inspiration Web | http://en.yourinspirationweb.com/

20

7.

control mechanism: how to verify (checking up on the completion status of the project);

Let’s move on to the practical side of things: it’s clear that these various phases cannot be managed manually, otherwise they would be prone to mistakes and errors. Therefore what we need is a valid support tool which can automatically take care of each phase, managing it correctly and in an organized manner.

Project management can be done by using an open source software such as Planner 6 and Gantt Project. 7 In this case, we will rely on Microsoft Project since we have used it before.

What follows is a full screencast that shows how one is to manage the development process of a website. It will show you how well you can work on a project if it is done in an orderly and organized fashion. Also, take a look at how to use the software.

Unfortunately the videos are in Italian, but we hope that you can still understand the project process.

1st video – Introduction and task list creation – (length: 9′ 29”)

After a brief introductory note, you will be shown how to add a task list to the program, which details the activities that need to be completed. http://nandop.blip.tv/file/2154320/

2nd Video – Adding all the tasks that form a project – (length: 16′ 32”) In this video you will be shown how to add all the single tasks that constitute a project. I suggest you watch this if you want to know about all the phases that are part of the web development process. Otherwise you can skip and go directly to the third video, which will show you how to add the various resources to your project and how to assign a resource to a specific task. http://nandop.blip.tv/file/2154684/

3rd Video – Adding resources and assigning each to a specific task – (length: 7′ 15”) Once you have added all the activities, you can start adding resources assigning a predefined resource to a single activity. http://nandop.blip.tv/file/2154728/ 6 7

Download Planner here: http://bit.ly/d4yvmm Download Gantt here: http://bit.ly/V99sa

Your Inspiration Web | http://en.yourinspirationweb.com/

21

4th Video – Complete allocation of all single tasks – (length: 5′ 24”) Now you can finish allocating the remaining tasks. If you are only interested in learning how to assign a single resource to an activity or task, you can jump to the fifth video in which you will learn how to define the length of each activity so that the cost can be automatically calculated by the software. http://nandop.blip.tv/file/2154858/

5th Video – Defining the length of each activity – (length: 10′ 47”) In this video you will see how to set a specific timeframe for each activity, so that you can get an idea of how long it will take to finish all the activities that define a project, thus knowing what it will cost. http://nandop.blip.tv/file/2154854/

6th Video – Linking various tasks – (length: 12′ 46”) This last video will show you how to connect the various tasks between one another. It will show you which activities deserve priority and need to be completed before tackling others as well as showing you which ones can be realized simultaneously. http://nandop.blip.tv/file/2155160/

Conclusions

We have finally come up with an answer to the query we posed at the beginning of the chapter. Now we know how to calculate the costs and delivery time of a web project without misrepresenting these figures.

In the next chapter we will look at an important aspect of web development: how to avoid second thoughts from a client once a project is completed.

Your Inspiration Web | http://en.yourinspirationweb.com/

22

Your Inspiration Web | http://en.yourinspirationweb.com/

23

Chapter

3

How to avoid future thoughts from the customer

Once we defined with the client what are his needs and what he wants to realize in the specific, we finally can estimate the cost and the related deadlines. We can now present everything to him for the definitive acceptation of the work.

But how can I protect myself from possible future doubts from the client? All the services provided by your Web agency or, in the freelancer’s case, directly by you holder of VAT, should be provided on the basis of a professional relationship between you and the client.

Your Inspiration Web | http://en.yourinspirationweb.com/

24

It often happens to meet clients that have second doubts, that don’t pay, that make excuses on the quality of your product and more you have more you put. To avoid misunderstandings it is essential that the client approves every point of the project and that you can count on a secure and reliable contract, with regard to the different services provided (hosting, developing website, maintenance website, etc.), estimated costs, conditions of payment, timeframes, propriety and copyright, duration and withdrawal right, etc.

So avoid to make an agreement based “on confidence”, limiting yourself to work on verbal assent basis: every agreement made with your client has to be always put pen to paper and signed by the two parties.

It should be good manners to go and see for a contractual consultant to prepare a standard contract, with all the general terms and a work note that briefly describes the characteristics of the site and the related timeframes. Obviously the standard contract will be modified from time to time on the basis of the effective work required by the client.

The personalized sales contract

If you don’t have the economic possibility for a contractual consultant that personally draws up your standard sales contract, you can find on the web several types of open source contract models. Below we list some of the most known ones and easy to personalize.

Contract Killer

Contract powered by Andy Clarke 8 for 24 Ways 9. You can to take all or any part of it to use for yourself, it has a creative-commons attribution share-a-like license. Download this contract from this page 10.

Freelance Web Designer Contract

Contract powered by Acuiti Design 11 Perfect for the freelancer who wants something simple, and nice. You can download this contract in .pdf, MS Office or Open Office formats.

8

http://bit.ly/HzVj http://bit.ly/CN6l 10 http://bit.ly/i0hX 11 http://bit.ly/I6umH 9

Your Inspiration Web | http://en.yourinspirationweb.com/

25

Aiga standard form for design services Standard Form powered by Aiga.org, 12 it is not an extensive pre-printed document where you simply fill in the blanks.

Conclusions

In this chapter we talked about how fundamental it is to rely on a secure contract in order to protect your work. Besides this, you made the acquaintance of an open source contract that you can easily personalize and use to regulate the relationship with your client.

As you can see from the image below, on the basis of the project realized in the previous chapter you can now check the state of work: with the signing of the contract our percentage of completion of the project has reached 16%.

12

http://bit.ly/49g8by

Your Inspiration Web | http://en.yourinspirationweb.com/

26

Your Inspiration Web | http://en.yourinspirationweb.com/

27

Chapter

4

How to develop and organize the structure of a website?

In the previous chapter we left off at a very good point. The client has accepted our offer inclusive of our estimate for the project -signed the contract and given us the green light to start working on the project.

The next step is a delicate one that is fundamental for the project. We have to create a concept and develop the structure of the website.

The Web Concept Designer is responsible for managing this aspect, and -as we saw in a previous article – he or she is responsible for creating a structured body to the final project, beginning with the initial idea, the strategies of communication and the business objectives. By coordinating the project using syntax and semantics used on the Internet, the Web Concept Designer is in charge of defining the guidelines for the architecture of

Your Inspiration Web | http://en.yourinspirationweb.com/

28

the information present in the website and he or she is also responsible for the graphic and strategic settings of the contents.

Defining the initial Concept

This process will be present throughout the entire project: from the time when the navigation tree is designed to the productive and updating phase, thus guaranteeing coherency in the overall message we want to communicate.

After having looked at the contents of the Brief we created during our preliminary meetings with the client, it will be necessary to conceptualize the business objectives of the project and to define the communications strategy that we will employ to reach such objectives.

Let’s continue by looking at a practical example: your client is the director of a nursery who would like to have his school represented through a website.

Looking at the brief is helpful: the main objective of your client is to be found easily by potential new parents and to provide updates to the parents of enrolled children on the various programs (school activities, cafeteria, etc.) The target audience is obviously families in this case.

Furthermore, now that you know what the specific needs of your client and target audience are, you can focus on the graphic and conceptual elements which will then be worked on by a graphic designer. Inoltre, ora che conosci le esigenze del tuo cliente e il suo target, puoi concentrarti sugli elementi grafici e concettuali su cui, in un secondo tempo, dovrĂ lavorare il grafico.

Choose the base colors that will be used in the project. In this case, it will be best to select a range of colors that are both vivid and fit for depicting a child’s own world. The logo of the nursery is colored in red, so you could go with red or use orange or yellow.

The images chosen will have to evoke a mood of playfulness and joy. We will have to select images that are appropriate for this purpose: children playing and laughing, which convey a sense of peace and security. We will have to convey to others a sense of trust in our website, a sense of trust that is both serious and reliable while being at the same time both joyful and lively -essential characteristics of a place that is connected to young children.

Finally, an analysis of the biggest competitors and their respective websites can be a useful practice to learn about their communication strategies, possibly picking up a thing or two that can we can use in our project.

Your Inspiration Web | http://en.yourinspirationweb.com/

29

Afterwards, we will delineate the structure of a website and the architecture of the information that will be included.

What is the structure of a website?

The structure of a website refers to the hierarchy that defines the various hyperlinks in the various pages, starting from the main page.

The contents are structured on several navigation levels and the overall structure can be of varying dimensions.

What is the architecture of information?

The architecture of information plays a fundamental role in every web application: it allows to organize logically and semantically data and other contents that are to be used. It also makes the digital system easily accessible and usable by all final users.

What is the difference between structure and architecture of information?

The structure of a website refers to the tree-like hierarchy made up of many hyperlinks that are present and start from the main page. The architecture of information allows instead to form connections between two or more pieces of information that are found on different branches on the hierarchy tree so that their relative distances are shortened.

Returning to our practical example

The web concept designer needs to be familiar with all the browsing standards, in order to make a website that is as user-friendly and as accessible as it can be to any visitor.

Basically, the purpose of browsing is: • • •

so that users can easily find the contents they are looking for.

to allow users movement from one page to another in a way that is fast and logical. to let users know which section of the site they are currently in.

In our current project, based on the contents that will be added to the site, the resulting wireframe will look like this:

Your Inspiration Web | http://en.yourinspirationweb.com/

30

From the main page (home), users will be able to access directly the three basic sections of the site: pages “nursery”, “activities”, and “contacts”.

As you can see, the “nursery” page includes within itself two further pages: “structure” and “the staff”. Similarly, the “activities” page includes three other pages, which are “didactic activities”, “cafeteria”, and “entertainment”. This subdivision allows users to easily find what they are looking for.

It’s time to create the wireframe

Once the structure of the website and the architecture of information have been defined, we can move onto creating a Wireframe 13 for a client which graphically defines the structure of a website.

13

http://bit.ly/9EWObm

Your Inspiration Web | http://en.yourinspirationweb.com/

31

Conclusions It is easy to delineate the structure of a website if it will be used as a ‘display’ website that has only about 4/5 pages. However, as more and more pages and content are added, this part of the project acquires more and more importance.

With this article we conclude the “theoretical” part of our project. Over the years, I’ve come to realize that this aspect of site building goes largely unnoticed by beginners, so I hope these four lessons will be able to convey its fundamental importance.

As you can see in the image below, as the client has approved the wireframe, we have completed 23% of our project.

Your Inspiration Web | http://en.yourinspirationweb.com/

32

At this point we can continue by looking at the next two steps: the first is about how to develop the content, something which this guide will not cover at the moment. The second is designing a graphic draft, which we will cover in the next chapter.

Your Inspiration Web | http://en.yourinspirationweb.com/

33

Chapter

5

How to find inspiration and design the layout of a website?

We have reached a crucial point in our project, which refers to the creation of a graphic layout. Website design is no easy task and one must confront many unknown variables such as: finding inspiration, representing it graphically on the site, finding the right balance between aesthetics and function.

Let’s start from the very beginning.

Your Inspiration Web | http://en.yourinspirationweb.com/

34

Here you can find a wireframe - created in a previous chapter - as well as the concept and structure of the website we are developing:

You will be responsible for creating a website that has an efficient and great-looking graphic layout, based on the wireframe and the directives you received on the colors and images chosen for the website. Where do we start?

Find the right inspiration

A blank page or screen is very intimidating, even for experienced professionals. Even if you don’t know where to start, don’t despair. Finding inspiration is a long and tortuous process that can be separated into three distinct phases. Let’s look at them in detail.

Phase 1: Searching

The proliferation of many css galleries has been advantageous for graphic designers.

Designers are now able to browse through an almost limitless number of layouts, learning a trick or two in the process. It’s pointless to list all the galleries, there are so many of them and most of us are familiar with them. However, it is advisable to go here 14 to take a look at 14

http://bit.ly/sjmI

Your Inspiration Web | http://en.yourinspirationweb.com/

35

an updated list of all the css galleries. While you browse through the gallery, most likely you will run into something that might be useful to use in one of your projects, such as colors, images, concepts, or text. Keep a note of what you feel are the most ‘adaptable’ elements.

Personal advice: Don’t spend too much time on this initial phase. You could end up altering your design, creating something that is graphically similar to another website, which would mean it is a mediocre attempt in copying a design we like. A general rule of thumb is that if one tries to copy someone else’s style, inevitable they will end up with an imperfect copy of the original.

Generally it is best to jot down whatever you are brainstorming during this first phase.

Even if it’s nothing more than a simple sketch, it will replace the void and allow you to visually organize your ideas.

Phase 2: Express yourself in detail

Judging from experience, I can tell you that once you have found the right input, the rest will follow without much effort. Once the graphic structure is in place, you will have to work on the details. Fonts and typography in general, the positioning of images and other content, and additional aesthetic elements, will be beneficial in making your work look original and pleasing to look at. This phase should not be overlooked: for instance, choosing the right font 15 can take a lot of time as well as being quite a complex endeavor.

Phase 3: Take a break

It can be very frustrating to wait for an idea if it never materializes. At this point then it is useless to stay locked in front of a screen. While considering deadlines and other requisites, it is best to take a break: sleeping, going for a walk, taking a shower, talking to a friend. Any one of these activities is beneficial to you as long as they have nothing to do with web design. Furthermore, it is of no use to feel guilty for not being glued to your computer 24 hours a day. A graphic designer must accept the fact that intuition comes and goes on its free will, so one must be patient.

We have found our inspiration…what’s next?

You can unleash your fantasy by transposing your ideas onto a graphic layout using any photo-editing program (Adobe Photoshop in our case).

Let’s open the program and create a new document that is 1680 pixels long, 1200 pixels in height with a resolution of 72 dpi.

15

http://bit.ly/c24S5E

Your Inspiration Web | http://en.yourinspirationweb.com/

36

Even if we have set the length to 1680 pixels (so that it looks great on a 21-inch widescreen display) it is essential to have additional content set to 960 pixels. This is helpful for users who use a lower resolution (keep in mind that only 5% of all users still use a resolution that is lower than 1024 x 768) so that they will not have to scroll vertically to see the entire website.

There is a simple calculation that must be done: we will subtract 960 pixels from the original 1680px, then we will divide this remaining figure into two, so that the additional content to be included can be centered. To set limits, we will insert two guides in this document.

Your Inspiration Web | http://en.yourinspirationweb.com/

37

Let’s start by adding some color to the page. First we are to draw two lateral sections with the rectangle tool: the right-hand section being of 426px and the left-hand of 654px. Then let’s color these sections in orange (#ff7c0b;) since we will be using warm colors throughout.

To create a good contrast level, let’s insert a pattern that is granular and paper-like in the right-hand rectangle.

Your Inspiration Web | http://en.yourinspirationweb.com/

38

The pattern can be applied by double-clicking the level on the rectangle, which will open the Layer Styles window and then by selecting the “Pattern overlap� option.

This is the effect we get:

Your Inspiration Web | http://en.yourinspirationweb.com/

39

Let’s draw a rounded rectangle tool (with a radius of 20°) in the middle of the white section. This rectangle is set to have a length of 560 px and a height of 232 px. This will be our header in which we will place an image representing our client’s business.

Personal advice: If you have just started working with Photoshop, you should remember to rename all the levels and learn to keep them organized. A graphic project can build and use hundreds of different levels, so it is best to keep them organized in a clean and simple way.

Your Inspiration Web | http://en.yourinspirationweb.com/

40

Before proceeding any further, let’s look for some images that we can use in our project.

Personally, I find Fotolia 16 to be a great place where one can find and purchase inexpensively photos and images that have a very high resolution. Also, as it was noted in this article 17, it is best not to use low-quality images or images taken directly from google images.

Based on the research done, we have chosen the following images that -as it was previously defined in the brief- depict children playing, laughing, and having fun. These images, needless to say, share a certain affinity with the world of children.

When you are choosing images, remember to trust your instinct and go for images of a certain color or subject-manner that you feel are appropriate. Keep a large selection of images, Don’t worry, eventually you will be able to narrow this selection down, keeping only the best ones for the website project.

We can now add the photo of the baby with the plush toy in the rectangle containing the header. First we have to resize the photo so that it is of the same size as the rectangle (or a bit bigger, just by a couple of pixels). Once you have resized the image, click on Edit >> Define pattern to save the photo as a new pattern which we will save as “header image”.

16 17

http://bit.ly/3DDA89 http://bit.ly/cjt5M6

Your Inspiration Web | http://en.yourinspirationweb.com/

41

To apply the pattern, let’s go back to our initial document, open the Layer Styles window containing the rectangle of the header and select “pattern overlap“. From the list of available patterns you can select the one we just created and apply it to the site.

As you can see, this image not only does it convey the client’s activity, it also highlights the color orange we chose for the background. Remember that a good color scheme can be the key to creating a great-looking layout.

Your Inspiration Web | http://en.yourinspirationweb.com/

42

Adding some images in the layout The picture of the painting child is going to be added on the left-hand section, to create an original effect. It will seem as if the child is painting the site background with her brush. To enrich the page even more, we can draw some simple sketches using doodle brushes that are found on the internet. Little houses, flowers, small birds…remember this is a nursery website so you can even exaggerate a bit with pictures and colors.

On the right-hand part, let’s insert the image of the child carrying the banner: it can become useful later on.

To soften the opening and closing of the website, let’s add a bunch of white clouds, which will enrich the look of the page. It will also give us the chance to create, in the upper section, a blank space where we can add the nursery’s logo. (Remember that the logo has to be visible, positioned on top of the page, preferable towards the left.)

Clouds can be added through a variety of methods: those artistic enough can use the pen tool to draw them manually, otherwise you can find various brushes and shapes that can be of use. Let’s draw a big cloud next to the head, where we will insert the logo.

Your Inspiration Web | http://en.yourinspirationweb.com/

43

Attention to the typography Our website is coming along nicely. Let’s add some content using the classic Lorem Ipsum text. We will use verdana font 12px with a line spacing of 21px.

Personal advice: Don’t just copy and paste the lorem ipsum. Try to format the text using a bold outline, a list, or by dividing it into various paragraphs so that it will resemble the website in its final form. How is the end result? Is everything clear? Is the text aligned properly with the right set of margins? Once the text is formatted, it will be much easier to spot typographic errors, if there are any.

To keep all the page elements in harmony, we have aligned the contents with the photo header, leaving 20px of margin on each side. Consequently, the page now appears more balanced.

Your Inspiration Web | http://en.yourinspirationweb.com/

44

At this point we can choose the font to use for the page titles and for the navigation. The contents of the site require a font that is web-safe. However, for titles and navigation we can let our imagination run wild and choose any type of font since we will be exporting everything as an image.

Let’s look for a playful font that would fit in with the graphics of the site. There are many fonts to choose from and in this case, we will go with the “Cocktail bubbly” 18 font for the navigation menu and “Bellerose” 19 for titles, which will evoke the font used for the logo.

Personal advice: Use the guides to make sure all the elements are properly aligned and properly divided from one another. If “home” and “nursery” are separated by a margin of 30px, all of the other links should be separated by the same amount as well.

Let’s be a little creative and use the photo of the child with banner to express a specific idea or message. We could add anything such as a slogan, a company’s info, or anything else. In this case we have decided to add show the telephone number of the nursery.

18 19

http://bit.ly/bGVZVX http://bit.ly/bRFtnS

Your Inspiration Web | http://en.yourinspirationweb.com/

45

We can make the banner appear more lively by using different colors for the text and by adding an outer border of 1px that is of a brighter color (Layer Styles window >> Stroke).

The photo gallery In the wireframe we saw that a photo gallery will have to be added to the homepage.

We will add the title, “Photo gallery� to this page in order to divide the text section from the photos, so that users will realize that this is a section of its own.

Your Inspiration Web | http://en.yourinspirationweb.com/

46

Let’s draw a set of small, rounded rectangles using the rounded rectangle tool. This round shape is ideal to evoke the roundness of the image placed at the header. Afterwards we will be able to create thumbnails.

At this point, let’s open the photos to be added to the thumbnails, and just as we did for the header image, let’s resize them to fit inside the rectangles. Then let’s click on edit -> define patterns to apply the patterns to the rectangle in the gallery. Let’s repeat this step for each photo until each rectangle will house a different photo.

We are almost done building our website! Do you want to see how it turned out?

Your Inspiration Web | http://en.yourinspirationweb.com/

47

Final touches Our layout looks nice, but it seems as if something’s missing. Don’t you think the side sections look a bit empty? Then, let’s enrich them with some graphic additions.

Let’s add some balloons of varying shapes and colors to the background using a specific font, SF balloons. 20

In the section that contains a paper-like effect, let’s add the balloons in a way that they appear to integrate naturally with the background.

In order to do this, we can select the “overlap” function (Style levels window -> fusion options) so that the background color of the balloon blends with the background of the web page.

20

http://bit.ly/bJ7RtS

Your Inspiration Web | http://en.yourinspirationweb.com/

48

This is the end result:

Your Inspiration Web | http://en.yourinspirationweb.com/

49

Basically, users who have a screen resolution of 1024px in length will be able to see only section A, while those who have a screen resolution of 1280px will be able to see sections A and B. And, following this sequence, users with a screen resolution of 1680px will be able to see the entire picture (section C).

Are you satisfied with the result? We have created a web page that is graphically modern, great to look at, and full of joy. Thanks to our keep eye for detail, this site will serve as a great online representation of our client’s activity, which will hopefully attract a new set of potential clients.

Did you see how easy it is to create a great web project once you have found the right inspiration? All you need is some practice and a good aesthetic sense.

Now that we have created a draft, we will have to present it to our client, making sure that he or she approves it without affecting the graphic layout.

How? You will find out in the next chapter!

Your Inspiration Web | http://en.yourinspirationweb.com/

50

Your Inspiration Web | http://en.yourinspirationweb.com/

51

Chapter

6

How to present the graphic draft to the client?

Once you have created the layout of the website, you will have to present it to your client.

The approval process of the draft has many aspects which are similar to the sales and marketing techniques employed throughout the business world, so it is your job to convince the client to accept your project offer.

By following this method you will be able to avoid making last-minute changes; additions which sometimes hinder the quality of your project and only add more time to it.

Your Inspiration Web | http://en.yourinspirationweb.com/

52

How should I present the draft to the client?

It’s best to present the draft directly to your client, so that you can discuss the details of the project without creating any misunderstandings with the client. Furthermore when you meet a client, during the encounter you could put to use a range of techniques, which PNL also teaches that can determine whether a deal is reached successfully.

There are a plethora of books available on the subject of Neuro-Linguistic Programming adopted during the sales process. However, this subject is beyond the scope of this guide so we will not go into much detail on this particular topic. In this article, we will cover only the basic concepts, which can become useful in managing your business relations. On top of this, we will provide you with some tips on how to avoid creating a negative relationship with your client.

Establishing a good relationship

One of NLP’s main concepts with regards to communication has to do with establishing a relation or rapport with your client. This refers to the process of creating a mental connection with your client spontaneously.

To create this feeling of unity you can use several methods such as the art of reflection and tracing; techniques that are familiar to anyone who has experience with NLP.

Both of these techniques are based on thinly tracing a person, through the person’s breathing, gestures, and verbal expressions. Breathing with the same tempo, gesturing in a similar fashion, and expressing yourself in a way that your client can feel at ease is a good way to establish a solid relationship with your client, one in which your client will share an affinity with you. Said simply, you will share the same skin with your client so that disputes are naturally minimized.

This however does not mean you can monkey around with your client: if you execute these techniques without the adequate theoretical know-how, you run the risk of creating an opposite effect, one in which your client would feel left-out and be skeptical about your own intentions. And, in this case, it would be very hard to instill a sense of trust between you and your client.

Avoid being arrogant

Even if you -as a graphic designer- have ten years of experience working in the field, it is important that you do not show off your competencies in a way that is perceived to be arrogant. Most importantly, avoid using phrases such as, “if I told you so, then that’s the

Your Inspiration Web | http://en.yourinspirationweb.com/

53

way it’s going to be” or “leave it to me”. It’s best to avoid using these kind of expressions because they might make you appear conceited and unlikeable.

Remember that you are not hired to do as you please and, especially at the beginning of the project, it’s essential to establish a relation of trust between you and your client.

Your job is to understand his needs and have them represented in the finished project.

It’s true that the client has come to you, evidently because he or she believes you are fit for the job. In this case, it is important that you don’t flatter yourself too much in front of your client. There’s a huge difference between being confident in one’s own abilities and being presumptuous.

Explain the characteristics

One of the most common errors committed by wed designers is to present a draft to a client without providing a detailed technical description of its characteristics. As a matter of fact it is not enough to show to your client that you have created a great set of graphics that is both detailed and pleasing to the eye. Most of the times the client will want to know what he or she is looking at and to understand why certain choices were made.

Why was that particular image used in the header? Colors were selected based on what set of criteria? Is there a relation between a specific graphic effect that was used and the overall message of the website? The client will have to be certain that your work is not based on a random set of choices and that it is the fruit of an accurate set of decisions made in an objective and professional manner.

Highlighting the strong points

Once you have detailed to your client the technical aspects behind the project, it is time to bring to his attention the various strong points of the project. Furthermore, you will have to demonstrate that the choices you make will be of benefit in finalizing the project.

In our case we could start by getting the client’s attention focused on the graphics of the website which have been optimized to sow in the display’s native resolution so that a sure will see the graphic layout the way it is intended to be seen regardless of the user’s own resolution settings.

Or we could explain why the banner being held by a child at the bottom-right of the page includes the nursery’s own telephone number. This is so that colors are added and also so that the contact number is visible on the home page, enticing the viewer to dial the number for additional information.

Your Inspiration Web | http://en.yourinspirationweb.com/

54

Details are important because they demonstrate the kind of work you have done. And highlighting the strong points can help the client become more and more acquainted with the draft, bringing the client closer to the draft.

Be open towards a client’s objections

In our line of work, it is a given to receive criticism and objections regardless of the quality of the work involved. It is important not to take this personally: there will always be someone who will not understand or approve of our aesthetic choices, and someone might even try to modify what you’ve done so far, eventually regretting it.

Even if it’s not always easy, when a client objects you should always maintain a sense of utmost respect for the client’s opinion. It is important never to impose your opinion onto the client and to never take an objection personally. The client might have doubts on certain aspects of the project which does not mean they are dubious of you and your expertise. So, remember to take a deep breath and listen to your client wholeheartedly, without interrupting them.

Don’t appear to be hostile. Rather, try to understand and resolve the problems that your client has pointed out. How should I do this? Well, you should adopt a gentle stance and refer to your client using such phrases as, “I understand your doubts on the matter. Let me try to explain to you why I made the following choice”, or “You are absolutely right in pointing this out. However, due to a series of…“. If you follow these simple guidelines, you will come out looking professional and not too authoritative, so that the client will feel as if his comments are treated with the utmost respect.

You feel that you’re doing things the right way? Prove it.

You cannot always convince your client that you have made the right choices by relying solely on your word. As a matter of fact, in this kind of situation there is nothing but your word against that of your client’s. And, if you find yourself face-to-face with someone who doesn’t change his mind easily, it will be very hard to convince them to follow your course of action without providing some data that can be used to support your own position on the matter.

Do you want to convince your client that blue is the best color to use in this project?

Then prepare a set of articles, statistics, surveys as well as any other type of data that can support your idea.

Your Inspiration Web | http://en.yourinspirationweb.com/

55

Does your client have difficulty distinguishing between a cool graphic layout and one that is amateurish? Look for a website that relates to the activity of your client and let him make a comparison with the graphic draft you have designed.

Does the client insist on having a shinystat counter in the footer of the web page?

Then show him that most professional websites (such as the ones of multinational corporations) do not have a counter, and that there must be a reason for this conscious omission.

Be diplomatic. Even if the client’s tastes are somewhat peculiar, it is definitely not helpful if you point this out too forcibly.

What if I am working from home?

It’s important to include -as an attachment to the draft- a sheet that describes in detail the graphic choices you have made. Once you have compiled this, you should send it to your client through e-mail or any other pre-arranged form of exchange. Le the client know that you will get in touch with him when he looks at the document so that you can explain and clarify any doubts that emerge. Keep in mind that even when you are talking on the phone with your client, it is important to respond to your client’s objections in a professional, discrete manner, one that is open to such criticisms.

Conclusions

We have been very convincing, so much so that our client has accepted our draft without any hesitation. What’s the next step? It will be to create the internal pages of our website.

We will do this next Chapter! For now, take a look at the progress bar, which has reached 61% as we have completed this last phase.

Your Inspiration Web | http://en.yourinspirationweb.com/

56

Your Inspiration Web | http://en.yourinspirationweb.com/

57

Chapter

7

How to design the internal pages after the layout is approved?

Once the draft is approved, you will need to work on the other internal pages. And once the home page is created, the other pages will follow with less effort since they share the same structure with slight variation in the graphics and the order of the content.

Let’s see how we can develop and graphically create the internal pages of a nursery website for one of our clients.

Your Inspiration Web | http://en.yourinspirationweb.com/

58

The first thing The first thing to do is to save the file home.psd, as asilo.psd. This way we will be able to keep the same graphic layout without changing the file used as our main page.

Some elements will be left untouched. In our current graphic layout, things such as logos, links and background images will stay the same even in the internal pages. Keep in mind that making too many changes can be spotted when one is moving from one page to another. This can be confusing for the viewer and it can be detrimental to the overall look of these webpages.

This notion can be summarized with one word: coherency.

Let’s start by editing the photo in the heading: it’s advisable to choose for the internal header certain images that can convey the message of the entire website, thereby visually representing the website’s textual content. For example, it is preferable to use a series of photographs of the nursery, the playrooms, and of the outside of the school since we will be working on the page that includes a description of the nursery.

Once you have chosen an image, you can transform it into a pattern in the same way that was described in the previous lesson. You can click on the style levels in the square containing the picture, and choose the pattern you want to apply to the image.

Your Inspiration Web | http://en.yourinspirationweb.com/

59

Design based on content Before working on the graphic layout of the page, it is important to have an idea of the type of contents that will be inserted. Is there going to be a lot of text present in the website?

Are there going to be images as well? Will the page include many other subpages? These are some of the various factors that need to be considered before working on the graphic layout.

The “nursery” page contains a brief introduction as well as two links to the “structure” and “staff” pages, that we looked at before in a structure that has been defined. Let’s start by changing the title and inserting the textual content: this will allow us to see the website and the unoccupied spaces within its pages through a wider lens.

Your Inspiration Web | http://en.yourinspirationweb.com/

60

As you can see, there is not that much text, giving the page a look of emptiness that is quite unattractive to look at. We should come up with something to add, which we will cover at a later stage.

Insert the links at the internal pages

Now we must decide on how to insert the links to the internal pages. It is best to insert the navigation menu before the textual content, so let’s move the text to the bottom of the page and create a space in-between the title and the text.

At this point, you can unleash your creativity. It’s clear that links included as text will not be pleasing to look at as well as not being very effective so much so that viewers might miss these links entirely.

Your Inspiration Web | http://en.yourinspirationweb.com/

61

With a bit of imagination we can change all this. Let’s draw an orange cloud to evoke the already-used cloud theme. We can then add an image of a smiling child and a couple of doodles so that our menu acquires a totally different look.

Now we can remove all of the other graphic elements found in the file home.psd that we have no intention of using in this page, like the image of a child with the right-hand banner and photo gallery. This is what it will look like:

Your Inspiration Web | http://en.yourinspirationweb.com/

62

To add some graphical elements The top part is ok, but it is clear that we will need to add some elements at the end of our page, which now appears too simplistic.

It’s up to you to experiment: images, colors, drawings, brush strokes. It’s important to try out various things until you find a creative way to fill the void still there on the page.

Looking for a good idea that is simple and quick? Let’s choose an image, in this case the following:

Your Inspiration Web | http://en.yourinspirationweb.com/

63

Let’s put it in the background, lowering the opacity to 60%.

Your Inspiration Web | http://en.yourinspirationweb.com/

64

Looks nice, don’t you think? Now let’s choose our ‘spokes child’ for this website.

Remember what the main objective is: reflect the business or organization involved in each and every graphic element present in the site.

Let’s place the child in the background, with a “darken” fusion setting that is enabled so that the background image peeps in from the pad he is carrying. This is the end result:

Your Inspiration Web | http://en.yourinspirationweb.com/

65

On the pad we could have added a slogan, a brief text description or a comment from a satisfied parent, just as we have done before with the banner and child in the homepage.

These are choices that you will have to make, specifically on how to manage and combine concepts with design.

In ten minutes we were able to create a great looking internal page, using images and colors while also integrating all the graphic elements with one another. What’s next?

Our next task will be to codify our graphic draft.

In the next chapter we will cover the layout in XHTML and CSS code.

Your Inspiration Web | http://en.yourinspirationweb.com/

66

Your Inspiration Web | http://en.yourinspirationweb.com/

67

Chapter

8

How to export a PSD into XHTML and CSS without losing your soul?

(Part 1)

In this chapter we will divide and then recompose a website as if it was a puzzle using style sheets and XHTML. This is one of the most exciting aspects of web development as it allows you to follow closely the various stages involved in the website-making process.

And, it is always nice to see one’s creation being built piece by piece. This feeling of satisfaction that a web developer has is quite similar to the one that a graphic designer might feel during the drafting of a website layout.

Your Inspiration Web | http://en.yourinspirationweb.com/

68

Premise Let’s start by making a copy of the folder we will use as a standard module to create a new website. This is important because we don’t really want to have to create a working structure for every new website we create. So, if you haven’t already come up with a standard model, this is the time to create one.

The standard module contains the following items: •

• •

• •

•

a “css” folder which contains style sheets that make up our personal CSS Framework (our version has been compiled using the Blueprint framework, version 0.7.1)); an “images” folder where we will put all of the images for our website;

an “include” folder where we will add files that will be later pasted inside our webpages; a “js” folder that contains javascript files;

an “index.php” file that provides the structure of a standard web document (doctype declaration, head, main meta tag, links to style sheets, favicon, etc.);

a “robot.txt” file that lists the rules governing spiders and their ability to restrict an analysis of certain webpages.

.

Your Inspiration Web | http://en.yourinspirationweb.com/

69

Step 1: How can I divide the layout of a website?

Before editing the code, it is very important that you know how to dissect and export the various sections of the layout. A careful analysis reveals that in our case it is preferable to divide the page into three sections: •

•

•

The first section will be 1680 pixels in length, enough to include the image in its full horizontal-range, and a height of 632 pixels, essential to be able to visualize the side balloons. This image will form the background of the main section of the website, which we will name wrapper.

The second section will be 1680 pixels long and 86 pixels in height. This image will be used as a pattern applied vertically to the body in relation to the added text in the website. Why does it have to be exactly 86 pixels? Using the smallest dimensions possible, we are able to replicate the image seamlessly [ backgroundrepeat: repeat-y; ] so that it appears as one large image without any gaps.

The third section will be 1680 pixels in length and 306 pixels in height. This image will be used as the background to the footer section, which is at the end of our layout. In this section we will add the photo gallery.

Once the various sections are laid out, you should hide the useless levels using Photoshop which we will then refer to at a later time. Also hide the side links, the text, and the thumbnails so that only the three main sections are left visible, just like in the image above.

Your Inspiration Web | http://en.yourinspirationweb.com/

70

Now you have to export the various sections, one by one. With the selection tool you are to enclose the first section, being extra careful in getting the same dimensions we outlined above. Keep in mind that this task requires much patience and a high degree of precision: being off by just one pixel is enough to cause problems in the website development process.

Once you have selected the first section, click on “copy combined elements” that is found under the “edit” menu. Open a new document -which is configured to have the same dimensions as the one saved in the memory – and paste the selected object. In this way you will create a document which contains only the images you are interested in. Now save the image in the “images” folder and follow this same procedure for the other two sections of the website.

Step 2: Let’s edit our style sheet

Let’s open, using our favorite editor, the file “screen.css” that is found inside the css folder.

The first section which we will create, naming it “wrapper”, will contain the main background of our site. It will have a minimum height of 632 pixels, essential for viewing the side balloons.

The image will be 1680 pixels in length [this is the maximum resolution for viewing the finished website] and 632 pixels in height.

Below you can find a screenshot:

Your Inspiration Web | http://en.yourinspirationweb.com/

71

#wrapper { height: auto!important; height: 632px; min-height: 632px; background-image: url('../images/bg1.jpg'); background-position: top center; background-repeat: no-repeat; width: 100%; }

To implement the min-height function in browsers such as internet explorer version 6 [which does not support this function], we can use one its weaknesses to our advantage. Here 21 you can find additional information on the adopted solution.

In this way we oblige the wrapper to have a minimum height of 632 pixels.

Step 3: Assigning a pattern to the body

If there is too much text on a webpage [that extends beyond the 632 pixels in height of the background image which we have made as a wrapper] the background will become blank again. This can be fixed by adding a pattern which will provide a smooth transition from the previous background.

Let’s assign to the body a background image, “pattern.jpg” which has the following dimensions: 1680 pixels in length and 86 pixels in height.

21

http://bit.ly/2nD4Zu

Your Inspiration Web | http://en.yourinspirationweb.com/

72

body { font-size: 70%; color: #222; background: #fff; background-image: url('../images/pattern.jpg'); background-position: top center; background-repeat: repeat-y; font-family: verdana, Arial, Helvetica, sans-serif; }

Your Inspiration Web | http://en.yourinspirationweb.com/

73

Step 4: Writing the first lines of (x)html code Before proceeding any further, we should verify that what we have so far works on a practical level. Letâ&#x20AC;&#x2122;s open the file index.php with our favorite editor. The first part of the file will have an aspect similar to this one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Asilo Nido - YourInspirationWeb</title> <meta name="author" content="Your Inspiration Web" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- [template css] begin --> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> <!--[if IE]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> <!-- [template css] end --> <!-- [favicon] begin --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <!-- [favicon] end --> </head>

Letâ&#x20AC;&#x2122;s add these lines of code and see the results on all the browsers.

Your Inspiration Web | http://en.yourinspirationweb.com/

74

<body> <div id="wrapper"> </div> </body>

This is exactly what we were looking for: notice how the pattern we assigned to the tag body is repeated in a vertical fashion, blending seamlessly with the background image used in the wrapper section.

Step 5: Defining the container of the website

Let’s create a section that will be used as the container of our website. This section, named “container”, will have a total length of 960 pixels (the actual dimensions of the box are 920 pixels, to which we add 20 pixels for each side, yielding the desired length: 920+20+20) and it will be placed at the center of the screen.

Your Inspiration Web | http://en.yourinspirationweb.com/

75

#container {width:920px;margin:0 auto;padding:20px;}

<body> <div id="wrapper"> <div id="container"> </div> </div> </body>

Letâ&#x20AC;&#x2122;s look at the result on all the browsers. Adding a black border to container, thus making it visible, we will come up with the following:

Inside the container we will add the site contents which will automatically regulate the height of the container.

Step 6: Dividing the container into two columns

In order to obtain a good ranking on Google during the indexing phase, it is important to add the textual content to the website before anything else. As such, we must make sure that the right column, which will contain the textual content of the various web pages, is the first thing we write up in our html page.

Your Inspiration Web | http://en.yourinspirationweb.com/

76

#right { float: right; padding: 0 65px 0 20px; width: 560px; } #left { margin-right:645px; width:260px; }

This css technique is just what we need to reach our previously-stated goal. Now we can insert the right-hand column (#right) before anything else, followed by the left-hand column (#left).

The markup (x)html will look like this:

Your Inspiration Web | http://en.yourinspirationweb.com/

77

<body> <div id="wrapper"> <div id="container"> <div id="right"> <!-- right column content --> </div> <div id="left"> <!-- left column content --> </div> <div class="clearer"></div> </div> </div> </body>

Adding a border to the two columns and momentarily changing the height to 400 pixels, we will be provided with a preview of the two boxes shown in the image below:

Keep in mind that the borders and the height of the two columns are shown just for didactic purposes, they will not be present in the final style sheet.

Your Inspiration Web | http://en.yourinspirationweb.com/

78

Step 7: Its time to add the footer The photo gallery at the end of the page will be inserted in a separate section of the site, which is called “footer”. This section is going to have a height of 306 pixels, like the background image we will assign to it.

#footer { width: 100%; height: 306px; background: url('../images/footer.jpg') no-repeat top center; }

Now let’s create a box that will contain the footer section, in which we will then add the photos from the photo gallery. #containerFooter { width:390px; margin:0 auto; padding:0 250px 0 320px; }

The (x)html markup that provides the structure of the site we are developing is going to look like this:

Your Inspiration Web | http://en.yourinspirationweb.com/

79

<body> <div id="wrapper"> <div id="container"> <div id="right"> <!-- right column content --> </div> <div id="left"> <!-- left column content--> </div> <div class="clearer"></div> </div> </div> <div id="footer"> <div id="containerFooter"> <!-- content footer --> </div> </div> </body>

The screenshot below is indicative of all the various steps we have applied so far:

Your Inspiration Web | http://en.yourinspirationweb.com/

80

We are halfway done with the coding of this particular website. Next week we will continue this lesson but for now it is enough that you become familiar with what we have covered so far. If you have any questions, donâ&#x20AC;&#x2122;t hesitate to ask in the comments section.

Conclusion

As you have seen, it is fundamental that you know how to divide correctly the layout of a website so that it can be recomposed through a new set of coding. One small error in this first phase is enough to hinder our progress in the development of (x)html and css coding, which will not produce the expected results.

Another important aspect is to verify, step by step, that the website is visualized correctly on all the major web browsers so that errors can be corrected right-away, without leaving them uncorrected until the last part of the project. If this is not done, we might have to correct the entire coding and start almost from scratch.

In the next chapter we will look at the necessary steps needed to organize the various contents (heading, navigation, text, photo gallery) in the sections we have just created.

Your Inspiration Web | http://en.yourinspirationweb.com/

81

Chapter

9

How to export a PSD into XHTML and CSS without losing your soul?

(Part 2)

Are you ready to “reassemble” the second part of the puzzle? In the previous chapter, we looked at how to create the general structure of a website using code. Now we will continue with the “reconstruction” process by looking at how to code the various contents in each of the sections we have created.

Patience is a virtue, especially in this case. Let’s begin.

Your Inspiration Web | http://en.yourinspirationweb.com/

82

Step 1: Adding a header In the right-hand section we can place the image which we will use as header.

Letâ&#x20AC;&#x2122;s add to our page the following lines of code:

Your Inspiration Web | http://en.yourinspirationweb.com/

83

<body> <div id="wrapper"> <div id="container"> <div id="right"> <!-- right column content --> <img src="images/header/header.jpg" alt="header – baby photo" /> </div> <div id="left"> <!-- left column content--> </div> <div class="clearer"></div> </div> </div> <div id="footer"> <div id="containerFooter"> </div> </div> </body> Finally, don’t forget to check the webpage on all of the major web browsers at the end of every step, so that we won’t be flooded with unexpected surprises at the end of the project.

Your Inspiration Web | http://en.yourinspirationweb.com/

84

Step 2: Adding text to a page We have used a font that vaguely recalls the one used in the navigation bar in the title of the paragraph “Home”.

This font is not one of the standard fonts used by all web browsers. So, in order to correctly visualize the text embedded in “Home”, let’s proceed in the following manner: first, we must export the paragraph title as an image, followed by placing it right under the header.

A padding (both top and bottom) is assigned to the image, so that it stands separate from the header. Next we add the text.

Let’s take a look at the code:

Your Inspiration Web | http://en.yourinspirationweb.com/

85

h1 {padding:20px 0;} <div id="right"> <!-- right column content --> <img src="images/header/header.jpg" alt="header – baby photo" /> <h1><img src="images/home.gif" alt="home" /></h1> <p> <strong>The Other Space nursery</strong> è un servizio educativo che risponde ai bisogni dei bambini dalla nascita ai tre anni di vita favorendone un equilibrato sviluppo fisico e psichico. </p> <p> I bambini sono divisi in vari gruppi, per età, e insieme giorno dopo giorno <strong>consolidano la propria identità personale e sociale</strong> allo stesso tempo. </p> <p> Sono stati predisposti degli spazi per le attività quotidiane a seconda delle richieste dei vari gruppi: </p> <ul> <li>Il <strong>laboratorio della manipolazione</strong>, del colore e travasi.</li> <li>La <strong>zona della comunicazione</strong> con un angolo morbido per la lettura di storie.</li> <li>La zona della <strong>casetta e dei travestimenti</strong></li> <li>Il salone per il <strong>gioco motorio</strong></li> </ul> <p> I gruppi sono omogenei per età e vengono seguiti dalla stessa educatrice per tutto il ciclo scolastico. </p> </div>

Your Inspiration Web | http://en.yourinspirationweb.com/

86

Our site is becoming more and more complete, as you can see below:

Step 3: Editing the footer Letâ&#x20AC;&#x2122;s add the photo gallery to the page footer. Four images are uploaded to the web page in the following manner:

Your Inspiration Web | http://en.yourinspirationweb.com/

87

<div id="footer"> <div id="containerFooter"> <a href="#"> <img src="images/gallery/img001.jpg" alt="foto 1" /> </a> <a href="#"> <img src="images/gallery/img002.jpg" alt="foto 2" /> </a> <a href="#"> <img src="images/gallery/img003.jpg" alt="foto 3" /> </a> <a href="#"> <img src="images/gallery/img004.jpg" alt="foto 4" /> </a> </div>

Images from the photo gallery could end up obscuring the heading “Photo Gallery”, so in order to avoid this, we should move them down.

We should add a top-padding of 90 pixels to the “containerFooter” section, which we created in a previous lesson. This should be enough to relocate the images to a lower position.

Your Inspiration Web | http://en.yourinspirationweb.com/

88

#containerFooter { width: 390px; margin: 0 auto; padding: 90px 250px 0 320px; }

We’re almost there, but something’s not quite right. Don’t you think the photos appear to be too close to one another?

Let’s create a small gap in-between the images, separating one from the other. By adding a small padding to the right-hand section, we should obtain the result we desired: #containerFooter img { padding-right: 2px; }

We are going to make the browser add a 2 pixel right-padding to all the images found inside the containerFooter section.

Following this operation, the last image has moved, being on the next line. This is because the image, as it acquired 2 pixels of right-padding, spilled over the containerFooter section.

Let’s see how we can resolve this problem.

The quickest solution would be to eliminate the 2 pixels of right-padding that was applied on the last image, checking whether or not this fixes the problem.

We will use a value attribute selector to eliminate this hassle:

Your Inspiration Web | http://en.yourinspirationweb.com/

89

#containerFooter img[alt="foto 4"] { padding-right:0; }

Finally our desired result, which is an image that has an attribute alt=”foto 4″. It now has a right-padding of zero pixels, which prevents it from moving to the next line on the webpage.

To finish off the footer section, let’s add this caption, “Look at the other photos”, placing it at the bottom-right of the images.

On our style sheet let’s create a class that allows to align the text on the right-hand side of the container: .alignRight { text-align:right; }

Next let’s assign this class to the paragraph that contains the text, allineating it on the right-hand margin:

Your Inspiration Web | http://en.yourinspirationweb.com/

90

<div id="footer"> <div id="containerFooter"> <a href="#"> <img src="images/gallery/img001.jpg" alt="foto 1" /> </a> <a href="#"> <img src="images/gallery/img002.jpg" alt="foto 2" /> </a> <a href="#"> <img src="images/gallery/img003.jpg" alt="foto 3" /> </a> <a href="#"> <img src="images/gallery/img004.jpg" alt="foto 4" /> </a> <p class="alignRight"> <a href="#">>> Look the other photo</a> </p> </div> </div>

Also, hyperlinks and their respective colors are to be defined:

Your Inspiration Web | http://en.yourinspirationweb.com/

91

/* Link */ a {color:#ca4608; text-decoration:none;} a:link, a:visited {color:#ca4608;text-decoration:none;} a:active, a:hover {color:#621303;text-decoration:underline}

So we have finally finished working on the footer section.

Now if you check whether the website displays correctly, you will notice that when using Internet Explorer 6, the last image in the photo gallery will be indented onto the next line.

This is because this particular version of Internet Explorer does not support the attribute value selector, so the last image continues to have a right-padding of two pixels.

In order to fix this, we can create a style sheet customized for this browser.

How? By using the conditional comments, which allow one to define a specific style sheet to be used with Internet Explorer: <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" /> <![endif]-->

After adding this previous line of code inside the <head></head> section, we can move on and create a new style sheet named “ie6.css“, saving it in the css folder of our website.

Thanks to the conditional comment that we inserted before, this style sheet will only be loaded by previous versions (version 6 or below) of Internet Explorer.

Now let’s open the “ie6.css” style sheet to add the following line of code:

Your Inspiration Web | http://en.yourinspirationweb.com/

92

#containerFooter img {padding-right:1px;}

As such, if one uses Internet Explorer, version 6 or below, the right-padding that is assigned to the image gallery will be of only one pixel instead of two.

Obviously in this case one could have approached the problem from a different perspective. For example, one could have created a new id with zero padding, assigning it to the last image in the photo gallery. However, we have chosen to go with the other method so that you could see how value attribute selectors work as well as conditional comments.

Before moving on to the next topic, letâ&#x20AC;&#x2122;s take a look at our site:

Your Inspiration Web | http://en.yourinspirationweb.com/

93

Step 4: Browsing through the site You might have noticed that the navigation links have an unusual font, one that is not part of the standard array of fonts. Thus, it becomes necessary to export each link as a single image.

In order to enrich the browsing experience, we are going to apply a mouse hover effect on the links so that they are to change color when hovered over with a mouse. This effect is created -using css- by exporting every single item on the menu in both white (for links in their natural state) and yellow (for links during hovering).

Let’s look at the steps involved.

First, let’s select the items in our navigation menu. We can refer to the guide for help:

In this case, all of the sections have a height of 84 pixels. This is because in order for this method to work, it is necessary that all the exported images are of the same exact height.

With the rectangle tool let’s select the link section – home in this case -, copy the selection (Edit –> Copy bound elements) and paste the image in a new document.

Your Inspiration Web | http://en.yourinspirationweb.com/

94

Be careful though! The new document will need to have a height that is twice that of the exported image since we will add the same section to this document, changing only the color of the link to yellow for the hover state. Having said this, we can now open a new document that has a height of 168 pixels (84px *2) and paste the selected item.

You should come up with something that is similar to this, with the added section on top and a blank space at the bottom:

Now let’s return to our home page and change the color of the word “home” and make a copy of this section.

Let’s go back to the other document and paste the section in the blank space.

Your Inspiration Web | http://en.yourinspirationweb.com/

95

As such, we find ourselves with an image of 168 pixels in height which includes both types of link, active and hovering. Here it is important to keep in mind that the two sections which were pasted (the white and yellow links) are of the same dimensions and in the same exact position.

A slight variation -of only one pixel – between the two can create an adverse effect, whereby links move in their respective position from one page to another.

And now, let’s look at the code!

Let’s finish the last part of coding by adding a browsing function inside the previouslycreated left-hand section.

In our style sheet, let’s define step-by-step the list that will contain the site navigation.

To begin with, let’s create a border at the top of the navigation so that it can be placed under the logo. Also, let’s remove the annoying default circle that appears when a list is visualized: ul#nav { list-style-type: none; margin: 180px 0 0 0; padding: 0; }

Now for all of the items on the list which have a hyperlink, we will have to hide the written text that appears on the screen (text-indent:-9999px). Also, since we will be using images (the ones we exported from our psd) to represent the various navigation items, we will align the content on the right-hand side (float:right) and set the margins and padding to zero.

Your Inspiration Web | http://en.yourinspirationweb.com/

96

ul#nav li a { padding: 0; margin: 0; float: right; text-indent: -9999px; }

Then we are to create IDs named home, management, structure, events and contacts; assigning to each of them their respective field in navigation. Also, they are to have the same height of 84 pixels. li#home a, li#gestione a, li#struttura a, li#eventi a, li#contatti a { height:84px; }

Now letâ&#x20AC;&#x2122;s define the background image which will be used by each navigation item, assigning the relative height and the directory in which each is located:

Your Inspiration Web | http://en.yourinspirationweb.com/

97

li#home a { width: 134px; background: url('../images/nav/home.gif') no-repeat; } li#gestione a { width: 226px; background: url('../images/nav/gestione.gif') no-repeat; } li#struttura a { width: 210px; background: url('../images/nav/struttura.gif') no-repeat; } li#eventi a { width: 133px; background: url('../images/nav/eventi.gif') no-repeat; } li#contatti a { width: 176px; background: url('../images/nav/contatti.gif') no-repeat; }

Even if the images are 168 pixels in dimension, on the website they will have a height of 84 pixels since we have already defined all of the navigation elements to be of this length in a previous step.

Hovering while browsing

Hovering can be set for each element by applying a simple rule to all of the navigation items with the help of :hover and :focus pseudo-classes. In this way, we can assign the second part of the image that is set as the background to show the portion of image we are interested in.

Your Inspiration Web | http://en.yourinspirationweb.com/

98

/* hover status nav*/ li#home a:hover,li#home a:focus,li#gestione a:hover,li#gestione a:focus,li#struttura a:hover,li#struttura a:focus,li#eventi a:hover,li#eventi a:focus,li#contatti a:hover,li#contatti a:focus { background-position: 0px -84px; }

Letâ&#x20AC;&#x2122;s finish by writing the (x)html code that will allow us to visualize the navigation of the site inside the left-hand section: <div id="left">

<!-- START NAV --> <ul id="nav"> <li id="home"><a href="#" title="Home page">home</a></li> <li id="gestione"><a href="#" title="la gestione">la gestione</a></li> <li id="struttura"><a href="#" title="la struttura">la struttura</a></li> <li id="eventi"><a href="#" title="eventi">eventi</a></li> <li id="contatti"><a href="#" title="contatti">contatti</a></li> </ul> <!-- END NAV --> </div> Donâ&#x20AC;&#x2122;t forget to check if the website is displayed correctly on various web browsers.

Your Inspiration Web | http://en.yourinspirationweb.com/

99

You should be able to see it properly on all the major browsers. We can be proud of the work we have done so far. Are you satisfied with the result?

Take a look at the Live Preview 22 of the website.

Status update on the project

Once the home page is fully-developed, we can codify all of the other pages that share a similar structure in a simple and time-consuming manner.

Look at the figure below. It shows that we are at 99% in our progress bar, since we have finished working on the coding behind the graphic draft.

Our site is ready to go online and we are only a few steps away from finishing this project.

Next we will be optimizing the site for a basic form of indexing. This is an aspect you donâ&#x20AC;&#x2122;t want to neglect so that the website can be easily retrievable.

Do you want to learn how to index a website without even being an SEO expert? Letâ&#x20AC;&#x2122;s find out in the next chapter.

22

http://bit.ly/bZ2N0A

Your Inspiration Web | http://en.yourinspirationweb.com/

100

Your Inspiration Web | http://en.yourinspirationweb.com/

101

Chapter

10

How to index a website without being an SEO expert

Even though we might have come up with a website that is great to look at and very informative –making sure that it includes all of the requests made by the client – it can go unnoticed if nobody knows about its existence, as if it was never created.

A website is of little use if there are no visitors. Indexing our website on some the biggest search engines is of fundamental importance, as well as optimizing pages in order to obtain a good ranking. Let’s go in order and take a look at the next step.

What is the difference between indexing and positioning?

Let’s look at the differences between indexing and positioning, two terms that are often used erroneously.

Your Inspiration Web | http://en.yourinspirationweb.com/

102

Indexing a website on search engines means that a given website is added to the index of a search engine, so that its existence is noted regardless of the position assigned to the site. A website can be added to the indexes of various search engines by going to a specific page; for instance, Google provides the following page 23:

===========

Positioning a website on a search engine means that a given website is given a good result in terms of its visibility, so that for a list of keywords searched through an engine, our website appears as one of the first results listed by the engine.

In order to optimize a websiteâ&#x20AC;&#x2122;s positioning, one must change the structure of every single (x)html page (and not only the homepage, as many tend to do by mistake) in a way that allows for certain aspects to be taken into consideration by the search engines while they are indexing.

The first step towards creating a great site is to aim for a good positioning or ranking, followed by registering on various search engines: this is important if we want our site to reach a large audience of potential users.

23

www.google.com/addurl/

Your Inspiration Web | http://en.yourinspirationweb.com/

103

When a website is given a makeover, in order to obtain a better ranking, what are the main aspects that we must take into account?

The most important aspects that need to be considered are: the correct use of the Tag “Title”, the Meta Tag, the contents of the document, the structure of the (x)html page, the ALT attribute for images, and hyperlinks.

In this article we will not go into much detail on the main aspects that need to be considered since it is such a broad subject that it would fill up an entire guide. However, at the moment we are planning to write up a guide containing more information on these aspects thanks to the arrival of a new writer who specializes in all things SEO. Let’s move on and quickly look at what these main aspects are.

How do I use the tag Title correctly?

During the positioning phase, the Tag Title is very important as it is an element that is looked at by search engines so it is fundamental to use it properly. Google, as well as other search engines, looks at only this tag when they have to assign a title to a page (when it is not modified based on other factors such as retrieving it from DMOZ if the site is listed in that directory).

Let’s try to add inside the Tag Title certain keyword combinations that will provide a rank or positioning for the given website.

An example is the nursery website.

After a careful analysis of the main keyword combinations that will be indexed, we have decided to prioritize the following: “Reading stories”, “moving games”, “Saint John’s nursery”, “Milan nursery”, “Lombardy nursery”. <title> Reading stories, moving games | OtherSpace Nursery - Saint John's, Milan, Italy </title>

Your Inspiration Web | http://en.yourinspirationweb.com/

104

Hints and Tips Be careful not to exaggerate with the number of keywords you insert in the Tag Title otherwise you run the risk of having too many keywords that become less and less valuable as well as incurring in a ban that will not allow you to appear in the search results.

Some people may claim that it is best to have a 160 character-long title, but for our purposes it is best to limit the length of the title and keep it between 50 and 80 characters, which includes spaces.

The keyword that you want to position will be inserted as the first word. Generally speaking keywords that are placed at the beginning of the title obtain a better ranking.

If the keyword combinations that we have chosen are included at the beginning of the page, these will be reinforced further.

What are Meta Tags and how do I use them?

Meta Tags (or Meta Data) are Tags that we insert in the <head> of a document. These will be invisible to users who visit the website. There has been much talk about the importance of Meta Tags and of how they are taken into consideration by various search engines for ranking purposes. However, times ago, Google announced 24 that it will not consider, for ranking purposes, the Meta Tag â&#x20AC;&#x153;Keywordsâ&#x20AC;?, as this has been overused by those who were trying to obtain a higher ranking through the addition of hundreds of words inside a Meta Tag.

The main Meta Tags that are used in the optimizing phase are Meta Tag Keywords (which contain a list of keywords or a combination of these) and the Meta Tag Description (which contains a brief description of the contents of a page. This is generally what is shown, as part of a search result, right under the title of a given page).

24

http://bit.ly/3SdTa1

Your Inspiration Web | http://en.yourinspirationweb.com/

105

Let’s look at the structure of a sample page, in this case looking at how two Meta Tags are added to the nursery webpage: <meta name="keywords" content="Reading stories, moving games, OtherSpace Nursery, Saint John's, Milan, Lombardy"> <meta name="description" content="OtherSpace nursery is dedicated to providing for all the needs of children until they reach the age of three, helping them develop both physically and mentally.">

Here 25 you can see how Google treats the main Meta Tags.

Is this all? Not yet.

In order to obtain a better ranking for a website, we must work on the contents as well as on the structure of the page. This is because a good website can only be developed through the addition of many important elements (hyperlinks, titles, images, content, etc…).

How important is the content found on our webpage?

“Content is power.” In reality it’s true, the contents of our webpage, including how it was constructed semantically, makes all the difference.

25

http://bit.ly/d0uQMT

Your Inspiration Web | http://en.yourinspirationweb.com/

106

It seems that Google executes a comparison between the first set of words inserted right after the Tag Body and the textual content of a page which is found inside the Tag Title. If there is a relation between the two, one is certain to obtain a good ranking.

From this we can deduct that it’s preferable to begin adding textual content to our webpage rather than with an image, a menu for navigation, or other material. This is why we provided a way for putting content (using the power of style sheets) right after the Tag Body during the coding phase of the (x)html markup (even though the navigation bar was on the left-hand side).

Here you can find the css code that was used to obtain the desired effect: #right { float: right; padding: 0 65px 0 20px; width:560px; } #left { margin-right: 645px; width: 260px; }

There are other elements as well that are found inside the contents of a page which greatly contribute to the evaluation and indexing of that particular page. For instance, words that are in bold found inside the Tag “<b>keywords</b>“ and “<strong>keywords</strong>”; text that is inserted inside the Heading Tags (<hn>keywords</hn>); text that is inserted inside the attribute Alt of Tag Img; hyperlinks, etc…

Hints and Tips

It seems that the first 20-25 words inserted right after the tag Body are the ones that contribute the most to the ranking of a given page.

Remember to always validate the (x)html code of your page so that it can read easily from all the web browsers and the various search engine spiders. To validate the (x)html markup, you can use this tool provided by W3C, HTML VALIDATOR 26.

26

http://bit.ly/8ubq

Your Inspiration Web | http://en.yourinspirationweb.com/

107

Don’t highlight bold words using style sheets, like in the following example: .bold { font-weight: bold; }

Otherwise search engine spiders will not be able to recognize that the word is emphasized.

What are Heading Tags and how do I use them correctly?

Heading Tags are used to structure semantically the contents of our pages, the correct use of these Tags will enable you to create and obtain a greater affinity between certain combinations of words that you would like to index.

Semantically, heading tags are used to categorize the contents of a document, subdividing the document into titles, subtitles, paragraph titles, paragraph subtitles, etc. They are divided into six levels that start from <h1></h1>, <h2></h2>… to <h6></h6>.

It is very important, when possible, to subdivide the contents into individual paragraphs by correctly using these Tags.

Hints and Tips

The words found inside the <h1></h1> Tag are those that Google pays the most attention to when a search is made. Semantically, this Tag is used to indicate the Title of the contents of a page.

Don’t overdo it: it’s preferable to use only one <h1></h1> Tag per page.

Your Inspiration Web | http://en.yourinspirationweb.com/

108

If the content of a site begins with text and this is included within the <h1></h1> tag, Google will then award more relevancy to the other list of keywords.

Is the ALT attribute for images useful for ranking purposes?

With regards to the question of whether or not the ALT attribute is relevant for ranking purposes, there are two cases that need to be taken into consideration:

Case 1: Images with hyperlinks

Keywords that are inserted within the ALT attribute of an image, which are also in possession of a hyperlink will be highly considered by Google.

Case 2: Images without hyperlinks

Keywords that are inserted within the ALT attribute of an image, but which do not have a hyperlink will not be given much consideration for ranking purposes. However, these keywords are useful in increasing the density of keywords found inside a given page.

Conclusion

In this chapter on indexing and optimizing websites, we were able to see that it’s possible to get great results without having to look at complex algorithms generated by search engines. We were able to see that just by writing a clean, semantic, and validated markup, most of the work has already been done during this coding phase.

Keep in mind that indexing and positioning are two fundamental aspects in building a website. They should not be underestimated; otherwise one runs the risk of turning a newly-created website into one that is “inexistent”.

Your Inspiration Web | http://en.yourinspirationweb.com/

109

Chapter

11

How to make sure of not having committed errors before launching the website online?

We have arrived in the last part of this book dedicated to the creation of a website. We started from the first encounter with the client, and step by step, we have accompanied you to the completion of the entire project.

But are we sure we are all set? Have we really paid attention to everything? Letâ&#x20AC;&#x2122;s discover it together in this last lecture.

Your Inspiration Web | http://en.yourinspirationweb.com/

110

What do I have to check before publishing the website online?

In order to avoid the loading online of a website with potential flaws, omissions or something else, it is absolutely recommended to execute verification operations and tests, correcting where necessary eventual negligence.

Let us see in details which are the main aspects to take into consideration.

Content analysis

Great importance should be dedicated to the content analysis because this is the message that will be transmitted to the users, thus make sure that: •

• • •

•

The text should be error free; grammar has to be correct and appropriate words used.

Punctuation and the use of apostrophes and commas should be correct.

Text blocks should not be too long and the pages not too loaded.

Eventual special characters are to be substituted with their respective html code (entity name 27), like for example the use of the commercial “&” or the symbol of the Euro “€”, which have to be represented by the codes “&amp;” e “&euro;” respectively.

All hypertext links, internal and external, have to be valid and correctly point to the relative destination pages.

Search engine optimization

We have already mentioned in the last two chapters that in order for a website to be ranked well in the search engine indexes it is indispensable to bear in mind some aspects, thus make sure you have: •

• •

27

Inserted the titles in an adequate manner (correctly using search keys in which you wish to place the website) on all pages.

Inserted the Meta Tag “Description” containing a brief description for each page.

Written the content in a semantic way using the hierarchical subdivision of Heading Tags (<h1></h1> for the page title, <h2></h2> for the paragraph titles, etc.)

http://bit.ly/dh6qy

Your Inspiration Web | http://en.yourinspirationweb.com/

111

•

•

•

Adding the Google Analytics code on all pages to keep track of access statistics extremely useful in a second moment for the trend analysis and the success of the website.

Created a Sitemap of the website using one of the various instruments that are available online.

Created the robot.txt file (use it if necessary).

Code validation

Make sure to have written the correct code. You can find several instruments on the web for the validation of code correctness that you have developed: •

•

•

Xhtml code validation (use this strument 28 put at your disposal by W3C to validate single pages or this other strument 29 to execute the validation of an entire website);

CSS code validation (use this instrument 30) to execute the validation of style sheets used on your website;Validazione del codice CSS (utilizza) per eseguire la validazione dei fogli di stile utilizzati sul tuo sito; Javascript code validation.

Accessibility tests

Make sure your website is accessible even to users who use browsers that are different from the standard ones, like for example, a screen-reader.

In a few words, an accessible website has to be: •

•

•

Displayed and surfed even without the loading of style sheets.

Easily comprehensible and exploited even without the loading of images (there are users who as a result of different needs might have disabled the loading of images, make sure that for every image there is an alternative text that can replace them).

Exploited even without the loading of JavaScript effects (for example, a navigation menu entirely made in javascript would render the website completely unnavigable for a user who makes use of a browser with disabled javascript).

28

http://bit.ly/8ubq http://bit.ly/ifKsh 30 http://bit.ly/zpFN 29

Your Inspiration Web | http://en.yourinspirationweb.com/

112

Functionality test on browsers and different Operating Systems Before putting the website online it would be appropriate to perform some functionality tests in order to verify the correct functioning even on different systems from the one with which it was developed.

Thus make sure the website is correctly displayed and functioning: •

•

On all versions of main browsers (Internet Explorer, Firefox, Chrome, Safari, etc.) and main Operating Systems (Windows, OSX, Linux, etc.).

Using the main screen resolutions utilized by users (1680×1050, 1600×1200, 1280×1024, 1024×768, etc.).

Functionality test on modules

Moreover, verify also the correct functioning of each eventual module (contacts, book, etc.) currently on the website: •

• • • •

Send an e-mail to your e-mail address and verify the reception.

Check the text of the received e-mail to make sure it is the same.

Verify the correct functioning of the eventual anti-spam control.

Make sure the error check set on eventual fields of the module performs correctly.

Make sure a message is displayed which indicates to the user the successful delivery of the message.

Analysis of the website performance

Another factor not to be neglected is the loading time for each page of the website: in fact, some statistics demonstrate that the maximal waiting time on the user’s behalf corresponds to approximately tot seconds, after which is inclined to abandon the page. It is thus indispensable for the success of our website make sure that all the pages are loaded in an interval inferior to the tot seconds.

Thus verify: •

•

•

The loading speed and the size of every single page.

The size of every image, and if necessary, reduce it with a photo retouch program optimizing it for use on the web.

That the CSS are optimized and utilized correctly: try to avoid the redundancy of rules that can be amalgamated between them in particular.

Your Inspiration Web | http://en.yourinspirationweb.com/

113

•

The size of Javascript, CSS and (x)HTML files, compressing them when necessary.

Last remarks

Although they are not indispensable prerequisites for the success of a website, I would advise you to take into consideration: •

•

The personalization of the error page 404 (file not found) so as to offer to the user the possibility to choose an alternative content or easily turn back into the website’s main page.

The creation of a favicon which can easily identify the website.

Conclusions

In this lesson we dealt with the verifications to perform before launching a website online, in order to make sure we didn’t miss anything.

I decided to make a list with the main remarks to keep in consideration based on the arguments dealt with in this article and share it with you. They might turn very useful during the final verification phase.

You can download the check list in this page 31.

Concluding remarks

This chapter has officially end our complete guide to build a website, although some subjects - such as indexing - because of their size and complexity have been treated only superficially, do not worry: we intend to continue to build more targeted readers with additional insights on various aspects of this guide.

31

http://bit.ly/b22DXI

Your Inspiration Web | http://en.yourinspirationweb.com/

114

Your Inspiration Web | http://en.yourinspirationweb.com/

115

A

Index

add the footer................................................. 79 Adobe Photoshop ........................................... 36 aesthetics ....................................................... 34 alternative text ............................................. 112 analysis of the biggest competitors ............... 29 analysis of the main keyword ...................... 104 Analysis of the website performance ........... 113 architecture of the information ..................... 29 Attention to the typography ........................... 44 attribute selectors .......................................... 93 attribute value selector ................................. 92 avoid the redundancy of rules ...................... 113

B Background ..................................................... 16 basic form of indexing .................................. 100 brainstorming ................................................. 36 Brief ................................................................ 15 browsers ......................................................... 81 budget divisions .............................................. 20 budget estimate.............................................. 18

C check list ....................................................... 114 check the webpage on all of the major web browsers .................................................... 84 Choose the base colors................................... 29 choosing images ............................................. 41 choosing the right font ................................... 36 clientâ&#x20AC;&#x2122;s input ................................................... 14 code the various contents.............................. 82 Code validation ............................................. 112 codify our graphic draft ................................. 66 common errors............................................... 54 conditional comments. .................................. 93 container ........................................................ 75

content analysis ........................................... 111 Contents team ................................................ 19 contract models ............................................. 25 contractual consultant ................................... 25 convince your client ....................................... 55 corporate colors ............................................. 16 correctly the layout of a website ................... 81 costs and delivery time of a web project ........ 22 creation of a favicon ..................................... 114 css galleries .................................................... 35

D definitive acceptation of the work ................ 24 designing a graphic draft ............................... 33 Development team ......................................... 19 differences between indexing and positioning ................................................................. 102 dissect and export the various sections of the layout ......................................................... 70 draft ................................................................ 52

E editing the photo ........................................... 59 entity name .................................................. 111 establishing a rapport with your client .......... 53 export each link.............................................. 94 export the various sections ........................... 71

F finding inspiration .......................................... 34

G google images ................................................. 41 Graphic designer ............................................. 19

Your Inspiration Web | http://en.yourinspirationweb.com/

116

H

O

Heading........................................................... 16 Heading Tags ........................................ 107; 108 hierarchy ........................................................ 30 hierarchy tree ................................................. 30 how to assign a single resource to an activity 22

open source contract ..................................... 26 optimize a websiteâ&#x20AC;&#x2122;s positioning ................. 103 optimizing the site ........................................ 100 organize logically and semantically data ........ 30

P

I

keyword combinations ................................ 104

pattern ........................................................... 72 Pattern overlap ............................................... 39 phases behind the web development process 20 Planner ........................................................... 21 PNL.................................................................. 53 Positioning a website on a search engine ... 103 present the draft ............................................ 53 Project manager: ............................................ 19 project objectives ........................................... 20 project schedule ............................................. 20 protect your work .......................................... 26 purpose of browsing ...................................... 30

L

R

launching a website online .......................... 114 loading speed................................................ 113 loading time ................................................. 113

receive criticism and objections .................... 55 rename all the levels....................................... 40 resolution settings ......................................... 54 resolution that is lower than 1024 x 768 ........ 37 robot.txt.......................................................... 69

ie6.css ............................................................. 92 images that we can use in our project ............ 41 index of a search engine .............................. 103 information regarding your client ................. 15 insert the links................................................ 61 internal pages................................................. 58

K

M main background of our site .......................... 71 Make sure your website is accessible ........... 112 manage and combine concepts with design. 66 Marketing team .............................................. 20 meeting........................................................... 16 Microsoft Project ............................................ 21 mouse hover effect ........................................ 94

N needs of a client.............................................. 14 neurolinguistic programming ........................ 53 number of keywords .................................... 105

S screen resolution ............................................ 50 screencast ....................................................... 21 secure and reliable contract .......................... 25 select images .................................................. 29 signing of the contract ................................... 26 size of every single page ............................... 113 standard contract ........................................... 25 standard fonts ................................................ 85 steps involved ................................................. 20 strong points of the project ............................ 54 structure of the website ........................... 18; 28 style sheet customized................................... 92

Your Inspiration Web | http://en.yourinspirationweb.com/

117

style sheets ..................................................... 68

W

T

web concept designer..................................... 19 Web designer.................................................. 19 Web developer ............................................... 19 Web Marketing Strategist............................... 20 when a client objects ..................................... 55 wireframe ..................................................... 30 wrapper .......................................................... 72 Written the content in a semantic way ........ 111

Tag Title ........................................................ 104 take a break.................................................... 36 target audience............................................... 16 text-indent ...................................................... 96 typographic errors .......................................... 44

V

X

validation of code ......................................... 112 value attribute selector ............................. 89

Xhtml code validation ................................... 112

Your Inspiration Web | http://en.yourinspirationweb.com/

118

Your Inspiration Web | http://en.yourinspirationweb.com/

119

Your Inspiration Web | http://en.yourinspirationweb.com/

120

Thi sbookf ocusonal lt hosear et hest epst hatar egener al l ycar r i edouti n devel opi ngawebpr oj ect ,t hef i r stmeet i ngwi t ht hecl i entandt hedr af t i ngoft he br i ef ,t ot hef i nalcheckt odobef or eyoul auncht hesi t eonl i ne.Quot at i on,Cont r act , i nspi r at i on,desi gn,devel opment ,SEO . . .acompl et eover vi ew ofever yt hi ngyou needt oknow bef or e,dur i ngandaf t ert hebui l di ngofasi t e.

Nan doP appal ar do Nandoi st hef ounderofEdiGr oup,anI t al i anCommuni cat i onand Educat i oncompany ,f oundedi n2005.

He’ sal soWebDesi gnT eacherandbesi desMi cr osof tTr ai nerwi t hyear s ofexper i encei nr egi onalandpr i vat et r ai ni ngcour sesasadesi gnerand t r ai ner .

Sar aP r es en t i Webdesi gner ,hasbeenwor ki ngi nt hef i el dofgr aphi csandweb devel opmentf orsever alyear sandatt hemomentcol l abor at ewi t hany webagenci esandsuccessf ul l ymanagesherf r eel ancewebdesi gn act i vi t yundert henameof“ mascar adesi gn” .