Chapter 3
IN THIS CHAPTER
Planning a well-structured business website
Finding out how to build your own website
Using HTML commands effectively
Building web pages with specific software tools
Hiring the right professional to help you design your site
In the early days of the Internet, simply having a website was a way to differentiate your business from the competition. As interest in the web developed and grew, companies of all shapes and sizes focused their efforts on capturing people’s attention with websites. Because of this growth in online competition, planning a site and building a distinctive design and proposition became increasingly important. After all, an outstanding site encourages current customers to stay with your business and promotes your site’s presence to the new shoppers who come online every day.
The same basic principles of website design apply as much now as they did when the web took off in the mid-1990s. Technologies used on the web might come and go, but you don’t have to include the latest and greatest technology on your site. Customers are drawn to sites that are simple, focused, easy to use, well organized, and useful. Everything else is just sound and fury.
In this chapter, we present the steps for creating a website that serves your business and your customers. We direct you to spend some time defining exactly what you want on your site, and then we show you ways to implement your ideas, either by yourself or with the help of a professional. In either case, we specify the issues you need to consider and the traps you need to avoid so that you can focus on designing your website and then move on to the next phase of your business.
When people opt to build a new house or commercial building, they don’t just hire a contractor, bring over the concrete and tools, and say “Go for it.” Before construction even begins, they craft a carefully detailed plan that they review, edit, and approve. Your website should be treated the same way. The best sites aren’t dreamed up by eccentric designers and thrown together quickly. Good sites require a clear road map from the people who run the business to ensure that the focus of the business is never lost.
Thinking about your website before you start its design is important. Start by making a list of all the functions you want to provide on your site. If you’re tempted to believe that your site has just one function — to sell stuff — we encourage you to break down that function into subfunctions, by answering these questions:
After you come up with your list of site functions, the next step is to draw a map showing the web pages you need to accomplish those functions and showing how the pages relate to one another. At this point, don’t even think about how the website or the individual pages will look; just identify the different pages that need to exist on your site. Assign each page to a box on your map, and check off the function that the page will handle. When you’re done, you should have a map of your site that looks like a flowchart.
At the top of your map is the home page, which is your launch pad to the rest of the website (see Figure 3-1). This page answers all the basic questions that customers have about your business, just like the friendly receptionist in the lobby of a 50-story building. Whether this visit is the first — or the fiftieth — for your customers, the home page has to answer their questions in a clear, concise, organized way or be able to point them in the right direction quickly.
Below the home page are your main category pages. Although your first draft might look like the one shown in Figure 3-1, the beauty of such a simple map is that your site plan can expand and grow from that basic model. As you design more complex and function-intensive websites, you can add more levels to your website map. When you build your site map this way, you can visualize how your entire site operates, because you capture how your pages support each other.
When your website is in the paper-and-pen phase of design, you might find that you’re adding a bunch of boxes (pages) and dreaming up the ultimate website. After all, you haven’t designed or written the pages yet, so creating a gigantic, robust, fully functional site for any customer is easy — on paper.
Although we don’t want to take the wind out of your sails (or is that sales?), we definitely advise you to keep these expectations and guidelines in mind as you begin to turn your road map into your virtual store:
Keep the number of steps to a minimum. One reason why customers come back to a site such as Amazon is that they can find an item, click once, and have the item shipped to them. Customers turn to online shopping for convenience, so offer them a quick or smooth process to navigate the critical areas of your site. Even though some customers stay to look around, take advantage of your content, or use other functions, your site needs to appeal to the customers who want to get in, get what they want, and get out.
One way to check the complexity of your website is to look at your road map. If you have too many levels between the home page and a finishing point for placing an order, consider revamping your plan to provide a smoother path.
The last part of any website design process involves looking at the site map and page count and then estimating how much time you need to create the site. Expert designers typically estimate a number (of hours, days, or weeks, for example), and then pad that number by adding extra time to complete the project. You might ask, “Why pad the estimate?” After all, if someone is just implementing your well-structured plan, what can go wrong?
Developing your site can take longer than you expected for a variety of reasons. As you move from website design to implementation, beware of these traps:
Forgetting about the message: As your website grows and expands, you can easily lose focus on what the site should accomplish. At any time, you must be able to go back to your home page — or any other page — and determine the site focus by viewing the page for a few seconds. If you spend longer than 10 or 15 seconds interpreting the message, you’re off track.
No matter how many changes you make, never let the message of your site get lost or obscured.
The thought of turning site maps, content lists, and other plans into a full-blown website can intimidate almost anyone — especially someone who has never created a web page. To create web pages in the early days of the Internet, you had to know the specialized computer code HyperText Markup Language (HTML) and be able to write that code by using a program such as Notepad. Nowadays, you can find many tools to help you design your own site without having an extensive knowledge of HTML, but you can also benefit from knowing how to implement some of the helpful features in the current HTML5 version of markup language.
Therefore, knowing how to use some HTML (specifically, HTML5) is still a good idea because this knowledge gives you more control over the site-building process. Although website tools can create a lot of HTML code and help you build functions quickly, you might have to edit the work those tools do to make your site faster, smoother, and easier for customers to use. You have to direct these efforts to make sure that your site is an effective communications tool for your customers to do business with you. These website tools can help you get something done, but you have to provide the “why’s” of the web page: Why is it being built, and why should customers use it?
If your web host doesn’t provide any site-building tools or you’re not happy with its offerings, don’t worry — you have more options, as outlined in this list:
Free tools online: You can find a number of free or inexpensive site builder tools on the Internet. Table 3-1 lists some of these tools.
You might also find free web tools from your Internet service provider. Companies such as your cable or Internet provider offer free web-hosting space and some basic tools for building your personal website. You can use these same tools to help create your e-commerce site. As your site grows, you should consider transitioning it to a paid account because free hosting accounts usually come with a lot of restrictions.
TABLE 3-1 Companies with Site-Building Tools
Company Name |
URL |
CoffeeCup |
|
Creating Online |
|
Trellian WebPage |
|
Web Starts |
Regardless of the web design tool you use to build your website, you need a basic understanding of how HTML works. This understanding helps you edit your pages and figure out what your tools are creating.
Unlike software code that has to be translated, compiled, and otherwise prepared before a consumer can use it, HTML code is written, saved as a file, and then interpreted by the program that reads the file. Usually, the software program that reads the HTML file is a web browser, such as Microsoft Internet Explorer. The web browser opens the HTML file and finds these two elements:
The browser reads all the instructions that you place in these markup tags and draws the web page on the computer screen according to your specifications. Because this language is uniform and structured, most web browsers interpret the commands in the same way. Your customers see the same design regardless of the computer or operating system they’re using.
Commands are marked in the HTML file by command-start and -stop symbols: the <
and >
signs. They look like this:
<command>
Typically, HTML commands are implemented by indicating, in this order:
For example, if you want a word to appear bolded on your web page, you write
<B> word </B>
The <B>
command indicates that you’re turning on (starting) the Bold command. Adding a slash (/
) to the ending command tag indicates that you’re turning off the command. Your web browser looks at this code and creates an effect as though you’re holding down the Bold key, typing a word, and then releasing that key and moving on to the next section.
Every HTML file has certain essential commands that should always be present. The following listing shows a skeleton HTML file:
<HTML>
<HEAD>
<TITLE>Basic webpage title</title>
</HEAD>
<BODY>
The content of your web page would go here.
</BODY>
</HTML>
Always put the <HTML>
tag on the first line of your HTML file. This tag tells the web browser that it can find HTML code inside your file. Next, your web page contains two sections: the header (marked by <HEAD>
) and the body (marked by <BODY>
).
Your header section should contain all the information that defines your web page, which includes — but isn’t limited to — these elements:
The body section contains everything else related to the web page, especially anything visible to your customers, such as
Sometimes, designers put all the information in the body and very little in the header section. Although your web page still loads and presents itself to your customers, the lack of a divider between header and body information makes it harder to update your web pages properly (for example, when you need to change some functions on your website) and maximize your outreach to the Internet community. Similarly, putting main content inside the header section can distort the display of your web page because some web browsers try to condense the header to the top of the screen.
Some HTML tags require markup instructions other than the caret signs (<
and >
) and the command name. These needy tags require specific information, known as attributes, which your web browser uses to implement the command. Like the commands, these attributes are written inside the caret signs to separate the markup instruction from the regular text of the file.
Suppose that you want to provide a web link so that when customers click the words Order Here from your home page, their web browsers open your catalog page. Although the command for building a web link is <A>
, you have to assign the attribute of the destination page, which is known as Hypertext REFerence, or HREF
. You would write the following HTML code:
<A HREF="catalog.html">Order here!</A>
You turn on the web link command with <A
, assign the destination catalog.html
as your web link (HREF
), add the words Order here!
as the text your customers see, and end the command with </A>
. Notice that you do not have to close out the attribute separately; just define it within the carets surrounding the opening tag.
Table 3-2 shows some common HTML commands that have important attributes to define.
TABLE 3-2 HTML Commands That Require Attributes
Command |
Attribute |
Element That It Assigns |
|
|
Background color |
|
Color of text in the body |
|
|
Color of web links |
|
|
Color of visited web links |
|
|
|
Color of the font |
|
Size of the text using this font |
|
|
|
Source of the image file |
After you understand the basics on how to set up a web page, you want to find ways to organize all the text, graphics, and data that you present on your web page. Specifically, if you want to show an array of products on your website, you organize the product photo, description, Buy Now button, and other specifics in a smooth, centered format. One popular way that website designers ensure a smooth presentation is to use HTML tables.
Originally designed to show numbers and data in a spreadsheet-style format, tables are now becoming the building blocks for aligning every element in a web page. Many navigation toolbars, whether they run across the top or left side of a web page, are in fact HTML tables that space the navigation commands evenly, no matter which web browser or computer screen is being used.
The easiest way to build a table is to use an automated website builder (such as the ones we discuss in the next section). However, understanding how tables are created in HTML helps you make any necessary edits, in case the builder tools don’t properly create all aspects of the table.
Follow these steps to define a table in HTML:
For every horizontal row you want to build in your table, type the <TR> command to start the row and the </TR> command to end the row.
You can assign as many rows to a particular HTML table as you want. Although there’s no minimum number, you should try to put at least one row in each table you create.
For each column cell you want within a row, type the <TD> command to start the cell and the </TD> command to end the cell.
Although you define the number of rows in the table, your web browser interprets the number of columns in your table by counting the number of cells created with <TD>
and </TD>
.
If you create different numbers of cells within your rows of a table, your web browser tries to compensate by evenly spacing out the cells. This compensation, however, can result in an uneven display. When necessary, create cells with no content by simply putting <TD></TD>
in the necessary rows.
To give you an idea of what a complete table definition looks like in HTML, we show you a basic three-row, three-column table that contains four different prices for a product:
<TABLE BORDER=1>
<TR>
<TD>JOEL'S SNOWBOARDS</TD>
<TD><B>UNPAINTED</B></TD>
<TD><B>PAINTED</B></TD>
</TR>
<TR>
<TD><B>MODEL 1000</B></TD>
<TD>$79.99</TD>
<TD>$129.99</TD>
</TR>
<TR>
<TD><B>MODEL 2000</B></TD>
<TD>$99.99</TD>
<TD>$179.99</TD>
</TR>
</TABLE>
Using this code sample results in something like the table shown in Figure 3-2.
By default, your table takes the entire width of your web page. You can assign the WIDTH
attribute to your <TABLE>
, <TR>
, or <TD>
commands to manually space a particular cell, row, or table to appear on the web page. Using the preceding example, suppose that you want the cell containing the painted price to occupy just 20 percent of your table width. To accomplish this task, you can use this line of code:
<TD WIDTH="20%">$129.99</TD>
You need to assign the WIDTH
attribute for all cells in the table for that same column. Otherwise, you risk throwing off the spacing for the entire table.
Web pages have many elements you can specify, and keeping track of them all is hard when you design pages using only HTML. The growing number of commands available in HTML fueled the need for software programs to help organize all these elements. These programs create the HTML commands automatically so that you can focus on the layout, design, and content of your web page rather than worry about whether you defined all your table cells properly.
One of the most popular software applications for web page design is WordPress, which was developed by a core set of volunteer programmers. Preprogrammed templates and plug-in applications that work with WordPress enable those with little coding skill to quickly develop a dynamic website. The other program that some people use is Adobe Dreamweaver. This program provides many buttons and menus to help you place HTML commands as though you’re writing a paper in Microsoft Word. The software prompts you for specific information and then displays a sample of what your web page will look like, as you’re building the page. This way, you can try a command to see how it will look and then change it right there, if necessary, before continuing with your development.
You can use a website builder tool or application, such as WordPress, to create sophisticated web pages without having much specific knowledge, which is why millions of people buy these tools every year. However, using automated site builders isn’t without a downside, and you can fall into certain traps if you rely solely on these tools.
Here are some reasons to use a site builder tool:
Despite the attraction of these features, you should also see the drawbacks of relying on a builder tool:
www.iwebtool.com/html_optimizer
) or the W3C Markup Validation Service (validator.w3.org
) to help you go through your HTML files.One way that entrepreneurs get ahead is by understanding their strengths and weaknesses: They focus on their strengths and have other people handle their weaknesses. Many people who want to operate their own online businesses aren’t necessarily skilled website designers, and nothing is wrong with that. In the earlier section “You Can Do It! Making a Build-It-Yourself Site,” we outline tools and technologies that can help you create your own website. You can choose another approach, however: Make the investment to have a professional website designer create your business site. The right interactions and communications with a professional designer can fuel an excellent site, and can even improve your overall business model so that increased orders and higher visibility help you recover the time and money you spent.
Some people consult with professional designers to create their sites and then give the business owners the tools to maintain their sites without any additional help. Other business owners contract with professionals to create and maintain their sites so that the designers can introduce new styles and functions as their businesses progress. Either approach can be beneficial for your business. You should decide how much help you want, as either a one-time investment or an ongoing expense.
Half the battle of finding a website designer is deciding that you need to hire one in the first place. The other half of the battle involves knowing where to look and talking to potential candidates until you find the right fit. Finding the right designer is similar to finding other specialists you need to solve specific problems. Whether you’re looking for an auto mechanic, a plumber, a dentist, or in this case, a web designer, consider these methods for finding a qualified professional:
www.upwork.com
) or review sites like Yelp (www.yelp.com
) to find a few companies. Then evaluate the samples or references they provide, to see whether their work for other people is good enough or fits the style you want for your own business.From the early days of the Internet, some web design companies have focused on providing quality work for their clients. Going to a design firm gives you specific benefits for completing your project:
When you ask around to find the right website design professional, you might be pointed toward talented individuals who work on a freelance basis and take on specific clients and projects that fit into their schedules. Some freelance professionals take assignments outside their full-time jobs, as a way to make some extra money. Others have enough clients to make their freelance jobs become their full-time careers.
Choosing a freelance designer over a design firm has several benefits. A freelancer
While you’re deciding whom to hire as your website designer, comparing quoted prices is a natural consideration for making up your mind. If you don’t consider certain factors, however, they can skew the math and thereby make your comparison invalid.
For example, a price for designing a website is normally determined in one of two ways:
Knowing a few key items from your designer or firm can help you compare prices more evenly. In this section, follow the advice that applies to your situation to find out the specific details.
If a designer or firm charges a flat fee for the entire project:
If a designer or firm charges by the hour:
Sometimes, web designers can offer a lower quote because they refuse to cover the cost of fixing the work when the project is complete. Although the initial price is low, you could pay more if a lot of reworking or correction is needed, and then you don’t save anything. Request assurances that the designer will spend the time necessary at the end, and specify that no one will be fully paid until the project is completed to your satisfaction.
Your best bet is to ask your designer to provide a full checklist of every action that’s necessary to build your website and then to review that checklist as your site is being designed. To ensure that the review takes place, many people tie their designer’s payments to the completion of the checklist. For example, when the designer can show that 50 percent of the items were completed, he or she receives 50 percent of the payment. This strategy helps prevent someone from receiving a full payment upfront and then quitting before completing all the agreed-on tasks.
Regardless of whom you choose to be your website designer, take the time to get the following “ducks in a row” to ensure that your designer is working as efficiently as possible — and costing you less in the end:
Have your content ready. Make sure that the content you want for your site is typed and available in electronic format. You’re paying the designer by the hour, most likely, and you don’t want to pay a skilled professional to type reams of data for you.
If necessary, hire a copywriter separately from your web designer, and give that copywriter the sole responsibility of creating electronic text or Word document files with your information.
When you hire a website design professional, the expectation is that you don’t need to know how to use HTML or have any design skills. That is, after all, why you’re hiring the professional. However, your design professional will have expectations about how you participate in the project, how your business operations are reflected in the site, and who owns the rights to the resulting site and its content. You must know your role in this process so that you can contribute to a successful site that contributes in turn to your business success.
Keep in mind the concept of scope when you’re hiring someone to develop your site. Scope, in this case, refers to the amount of information and areas of concern that affect your website developer. She should operate within her role as specified in the contract or agreement between you and her. Don’t involve your developer in other aspects of your business or create expectations that she will contribute to your business plan. Keep the developer’s activities focused on the job at hand so that she can deliver your site as specified.
As the business owner, you determine how your site fulfills your business goals. Although an eager website developer might want to build something to highlight his specialties, they can conflict with your business purpose. If you’re focusing on a pure e-commerce site with little extra content, you need to communicate that fact so that your designer doesn’t hand back a content-rich, bloated site.
Know your customers and the audience you want your site to attract. Talented designers can build your site in different ways to appeal to different audiences, and you must point them in the right direction to “hook” the right people. Without any specific targets, your designer might produce something that speaks to every group but says nothing of value to any of them.
You can’t just drive your car into a service station, toss the guy the keys, say “Fix it,” and then walk away and expect to get a fully repaired car hours later. The same situation applies to designing your website: You must provide the right information to your designer, and at the right time during the process, so that your site is built correctly from the start. Here are some tips:
Outline your business practices. Your website designer isn’t necessarily a businessperson and can’t be expected to understand the intricacies of your business. You need to explain how your site should operate and why. If you have certain rules or exclusions for how you sell your goods and services, spell them out before development begins. For example, if you need to enforce a minimum order or disallow certain product combinations in the same order, those business rules must be a part of the proposal. Don’t expect your designer to implicitly know how your business operates or understand its specific requirements.
When you’re hiring someone to design and build your website for you, establish the ownership of this work after it’s complete. You might assume — because you’re paying a professional to do the work — that this constitutes a work-for-hire agreement where you automatically own full rights to the resulting site and its content.
After the job is done, ask the web designer for a copy of your website, either available online as a backup copy on a cloud storage service like Dropbox, or on a DVD or USB drive. This way, if something happens to your web server or you have a falling-out with your designer, you still have a full copy that you can use to keep your site running. Make sure that all the images, icons, logos, buttons, and other types of graphics — not just the HTML files — are included in your copy. If your web designer also designed your company logo, ask for the logo in different file formats and sizes.
13.58.247.31