Chapter 11. Using Basic CSS To Add Style

In the last chapter, Ken used basic HTML tags to build his home page. So far, the page looks like this Click Here. It looks very plain. Ken would like it to look more professional. Ken plans to use CSS (cascading style sheets) to add some style. CSS is powerful, but Ken is only needs to use a basic subset of that power to give his page some style. Following is the various style characteristics that Ken wants to add:

• Make the page font family Georgia , the font color a dim gray (#696969), and the default font size 14 pixels
• Make the heading level 1 a maroon color (#800000), font size 20 pixels, and 10 pixels from the left margin
• Give paragraphs a left margin of 20 pixels
• Before a link is taken it has a light blue color (#487643), after a link is taken it turn orange (#ECBA5D), and when the reader hovers over a link it turns maroon (#800000)
• The tag line’s font size is 24 pixels, it is italic, and it is moved from the bottom of the table cell

The style definitions in the style.css style file look like this:

body {font-family:georgia, helvetica, arial; font-size:14px; color:#696969; background-color:#ffffff;}
h1 {font-size:20px; color:#800000; margin-left:10px;}
p {margin-left:20px;}
a:link {color:#4876A3;}
a:active {color:#000000;}
a:visited {color:#ECBA5D;}
a:hover {color:#800000;}
.background1 {background-color:#800000; line-height:30px; color:#ffffff; text-align:center;}
.background2 {background-color:#F8F7F5;}
.tagline {font-size:24px; font-style:italic; margin-bottom:50px;}
.mainnav {margin-bottom:10px;}

Using the CSS styles, the page now looks like this Click Here. The page has a nice, clean appearance and it looks nicer that the plain HTML version.

Chapter 10. Breaking the Design Down into Manageable Chunks

In previous chapters, Ken decided to use tables for his layout and he made a sketch of his design. As Ken looks at his design, he wonders how he can easily control the layout with one large table. There will be a lot of rows and columns, with some information spanning several columns. But, what if he breaks the page up into manageable chunks (tables).

 

The top part can be one table with two columns (cells). The first cell contains his business name and tag line. The second cell contains the main navigation links for the web site. So, for this table and contents, Ken only needs to use the following HTML tags — table (start a table), tr (table row), td (table definition), h1 (heading level 1),  p (paragraph), and a (anchor or link).

 

The three column format under the top part can also be a table with one row, but with three cells. The first cell contains a drawing of a golfer, the second cell contains unique content for the web page, and the third cell has the latest news. The layout works for the home page. For the other pages, Ken will only use two cells — one with the golfer image that he will carry across all web pages and one for the unique content for that page. Since there is not a third cell for these additional pages, the second cell is wider. In addition to the HTML tags used so far, Ken just needs to use an additional tag – img (image) .

 

The bottom bar, with the contact information will be a table with one row and one column.

 

Ken finds that he doesn’t need to use a lot of complicated HTML tags to build his web pages. Ken builds a simple prototype page and gets five people that can play the role of consumers looking for custom golf clubs. He gets their input and review comments on the design. Based on those comments, he makes several improvements that will help meet his target audience wants and needs.

 

The next design step is to use CSS to add style to the web page. This is a fun thing to do.

Chapter 9. Sketching the Design

Ken has looked at other web sites and has a good idea of what he wants his web site to look like. He wants a crisp clean look. He knows that for his target audience, too much technology such as Flash will just get in the way of the reader finding the information they are looking for. Ken likes the clean look of web sites like the Mayo Clinic, many government web sites, or a Bill Gates business venture web site he found. If it is good enough for them, it is good enough for him. He wants his site to include:

• His business name and tag line in the upper left corner
• The main navigation links for the web site across the top, next to his business name and tag line
• A three-column format under the top header. The first column contains a drawing of a golfer. The second column contains content information relating to a specific page. For the home page, this will be Ken’s value proposition. The third column contains the latest news about new products or the golfing industry. Only the home page has the latest news column. Other pages will just have two columns — the drawing and unique content for that page.
• At the bottom of the page is a bar across the page that contains his address and contact information.

Ken sketches his web site design on a sheet of paper. Now, he needs to determine how he will layout the web page using HTML code. The next step is to break the design down into manageable HTML chunks.  

Chapter Eight. Table versus CSS layout

A few years back, most web site layout was done using table cells to position text and images on the page. Using CSS positioning gained popularity as browsers improved and did a much better and consistent job of formatting CSS instructions. Now many experienced web site developers only use CSS layout. They believe that it is totally wrong to use tables for layout — you must always separate web page content (HTML code) from web page layout (using CSS positioning instructions). There are advantages to using CSS for layout, the HTML code is cleaner and much easier to read because you do not have all the table code in the way. It is easier to make global layout changes to the web site, and so on. There also disadvantages. CSS positioning is not always easy to understand, it might work a little differently across browsers, and it does take a little more tweaking. When using tables, the browser can do some of the tweaking for you. 

 

So what should Ken do? He gives Dan a call. Dan explains that:

• Ken can still use tables for layout if he wants to. As a matter of fact, for a nice, simple web site like Ken wants for his small business, using table to define the web page layout can work out very well. His pages are not that complicated and he can break the page down into manageable parts. Then, rather than trying to make the page one big table (which is very hard to manage), he can use a separate table to format or manage each of these parts.   
• Just because he can use tables to define the layout of the page doesn’t mean that he doesn’t need to use CSS. He should use CSS definitions to define fonts, colors, backgrounds, margins and so on. There are times when he will want to make global changes to the web site and it is much easier to make those changes in one place. 
• The end user doesn’t care if the site layout is done using tables or CSS. The most important thing to the user is that the web site provides what they are looking for.

 

Ken decides to go with table layout for his web site. We will see how he breaks the page down into manageable chunks in a later chapter.     

 

Chapter Seven. Designing The Web Site

Ken is ready to start defining the “look & feel” of his web site. When looking at the web sites of several web site designers, he notices that they emphasized the need for a completely unique look and feel to a web site. But, the question is why? There are millions of web sites on the Internet today. When users visit a web site, they appreciate a clear, crisp, easy to use design — but they are not that concerned about a unique look.

 

Ken doesn’t know where to start. Dan (the consultant) suggests that he do some research on the Internet and find some sites that he likes. Ken finds several sites that he thinks look very nice. He is not going to copy their source code, but he does get some good ideas for the look and feel of his web site. What will make Ken’s web site unique is the quality content.  

 

Ken sketches the web site on paper. This sketch identifes the main layout, the main navigation, fonts, and colors. Ken reviews the design sketch with the same five people that previously reviewed and commented on his audience definition statement. As before, Ken incorporates their review comments into the design. Next, Ken will build a prototype page using basic HTML tags and CSS. In the next chapter, we will see how Ken chooses between using tables or CSS layout to implement his design. There are pros and cons to both methods.  

Chapter Six. What Are Your Competitors Doing?

One last thing before Ken starts the web site design phase. He does a competitive analysis. He wants to meet or beat the competition. But, first he needs to know what the competition is doing. Ken has two local competitors. They both have web sites. In analyzing their web sites, Ken observes that the competitor’s web sites:

• do not address the benefits of custom made golf clubs. They focus on “features” – but not on the benefits, such as how custom clubs can help improve some one’s golf game.
• one site is not laid out very well and does not have curb appeal.
• the other site is laid out very well, has a nice business logo, and makes good use of images.
• one site offers coupons for ordering custom golf clubs online. The person still has to meet with the provider to get properly fitted to the golf clubs.
• neither site’s content contains the keywords and phrases that the target audience would use when searching for their products.
• one site has some good incoming links. Search engines give sites with relevant incoming links more weight than sites without relevant incoming links. (Notice that we said relevant incoming links. Non-relevant links can hurt your rankings.)

 

Ken decides the get with a graphic designer to create a professional logo for his business and web site. He will take quality photos of his products for the web site. He knows that benefits sell and plans to highlight benefits over features in the web site content. He will incorporate keywords and phrases into the content and create a “theme” for each page. He knows that he can get several golf courses and pro shops to link to his site. He will also look for other quality relevant links to his web site.

 

Now, Ken is ready to start the Design Phase.    

 

Chapter Five – Who Is Your Target Audience?

 So far, in our story, Ken has made the decision to build a web site for his custom golf club business. He has determined his budget and defined the web site purpose statement. The next “very important” step in the planning phase is to define the target audience. This definition helps him focus on the the target audience’s wants and needs, what influences their buying decision making process, how they will find his web site, and what gets them excited about his products. Sometimes, we will call the target audience the end user or just user. All this information is important because it has a direct influence on the organization and content of the web site. If Ken meets his target audience wants and needs, he will have an effective web site.

Ken starts his target audience definition by identify the following characteristics:

• Age 25 to 30 years. Getting started in their business career and just getting into golfing. They enjoy the sport, but they would like to improve their game. They need to watch their disposable income which is $40K to $70K.

• Age 45 to 70 years. Established in their careers, enjoy golf and looking for ways to improve their game. Cost is a factor, but not the main concern. Cutting a few strokes off of their game makes it more enjoyable. Their income is $60K to $90K.

Ken also identifies target audience want and needs when using the web site. This includes:

• Finding products that can lower their golf score making the game more enjoyable. Beating their friends (or the boss) is enjoyable.

• They are willing to spend some money, but they do not want to spend money frivolously. There must be a perceived return on their investment.

• They need to trust the provider. They need to know that they will get a quality product and service.

Another part of the audience definition is determining the keyword phrases that users will use when they search for the web site on the Internet. Ken identifies the following keywords and phrases – custom golf clubs, Ken’s custom golf clubs, Ken’s golf clubs, hand made golf clubs, Tigerville golf clubs (Ken lives in Tigerville). This list of keywords and phrases can change as Ken tests his web site design with users. He will need to verify what keywords users are actually using to search.

Chapter Four – Plan Your Work, Work Your Plan

 Now that Ken has identified his overall budget for building his business web site, he is ready to start developing the Project Plan. Actually, Ken would just as soon skip the planning and jump into building the web pages. That is the fun part where you get to see results. But, Ken also knows that you can’t make up for lack of planning.

The first step in the planning phase is to define a clear purpose for the web site – something that is simple, realistic, and achievable. Ken starts with the simple purpose statement – To drive more sales. He thought that was pretty simple, realistic, and achievable. But in talking with Dan, he realized that it was way to general, he needed to be more specific. He worked on the definition some more and finally came up with the following purpose statement.

Using this web site, the user can:

• Learn about the benefits of custom golf clubs, such as possibly shaving ten strokes off of your 18 hole score and getting quality golf clubs at 40% less than the cost at retail prices.

• Establishing a sense of trust in Ken’s business by seeing what others have to say about Ken’s products and his passion for golf and helping other improve their game.

• Learn about the various products that Ken’s Custom Golf Clubs has to offer.

• Find out how to contact Ken with orders or questions.

The next step is to describe his target audience – that is the wants and needs of people that will be using his web site and ordering his products.

Chapter 3. Will the Web Site be Worth It?

 Ken knows that doing a good job of planning helps him stay on track through out the project. But, before diving into planning the actual web site, in this chapter, we see how Ken handled two important parts of the Planning Phase – the budget and the anticipated ROI (return on investment).

 When Ken first thought about a web site for his business, he thought that he would build this wonderful web site, everyone would find it, and he would have more business than he could handle. He would learn that it just isn’t that easy. There are details that matter when building a successful web site. After discussions with Dan, his friend and web site consultant, the first thing that he does is establish his budget, his ROI goals, and how he expects to achieve those goals. Later in the process (Maintenance Phase), Ken can adjust his goals as he learns more about how people use his web site.

 First, let’s look at Ken’s ROI goals – Ken makes $100 net profit on each sale of his custom golf clubs. He averages three sets sold per week. Ken wants to increase his sales by seven to a total of ten sets per week. Ken expects the web site to drive five of the extra seven sales. That is, Ken expects the web site to produce sales of $500 per week or $25,000 year. (Ken is a hard worker and only takes a two week vacation.)

 How Ken expects to achieve the ROI goals – Ken has a lot of confidence in his product, he just needs to get the message out. The web site is a key tool in getting that message out and having potential customers take action. Ken’s marketing plan includes:

 

• Referrals. For each new customer, he includes his business card with the web site address. Ken expects the customer’s friends and associates to be impressed with the custom golf clubs and using the web site address, to check him out on the web. Ken knows that a large percentage of people check products out on line before actually buying off line.

• Ken’s community has three golf courses. Ken has a good relationship with the pro shops and he can display a set of custom golf clubs at each course. The display will also include a business card with the web site address where golfers can learn more about the benefits of Ken’s Custom Golf Clubs.

• Ken does expect some potential customers will find him by just surfing the web. Search engine friendly will be a part of the planning process.

• In the future, advertising in the local media.

 

Ken expects that these promotions and visibility can increase his sales by five sets per week.

 The budget – As with most small businesses, Ken watches his expenses closely. Even with a web site that potentially increases his sales by $25000/year, his is still cautious. At this point in time, Ken decides that he can put $1000 into his web site budget. That budget includes $100/ year for the domain name and web site hosting, $300 for advertising, and $600 to build the web site. Ken is busy running his business, but he feels like he can do much of the development work and save some of the $600. He has a back up plan, he can use some of Dan’s services if needed.

 

Bottom line, if the web site drives an extra $25000/year, the $1000 is a very good investment. Later in the process (Maintenance Phase), we will see how Ken monitors his web site’s effectiveness.

 

What do you think about Ken’s ROI analysis?

Chapter Two – Setting the Stage

 Getting back to the web site for Ken’s Custom Golf Clubs, there are several parts to the Internet that are important for Ken to understand:

• The browser – for example Internet Explorer. The browser is Not the Internet, it is just a software program that formats and displays a web page. The browser doesn’t care if the web page comes from storage on your computer or actually comes from an Internet web site. All browsers don’t format and display a web page exactly the same. Each browser has certain quirks. Most of Ken’s customers use Internet Explorer for their browser, but Ken also knows that some customers use another browser. So, keeping his web site design simple means that it will work more consistently across these browsers.

• The web page – a file that a browser can read and format the content into a web page. The file can be stored on your computer or requested from the Internet. Ken will use some ‘tools’ to build his web pages on his computer before uploading the final pages to his web site host.

• The web site – one or more web pages stored on the Internet.

• The domain name – for example KenCustomClubs.com is used as the address to reach your web site on the Internet. Ken needs to register his domain name.

• The web site host – a server, for example godaddy.com, where you rent space for your web site. Visitors can request and get pages from the web site host using the domain name.

• The Internet Service Provider – your connection to the Internet, for example Charter or Qwest Internet services.

• The Tools – we will cover tools in more detail in a later chapter. You do not need a lot expensive hardware and software to build web pages.

• HTML (HyperText Markup Language) – a simple markup language that tells the browser how you want it to format and display a web page. We will cover basic HTML in a later chapter.

• CSS (Cascading Style Sheet) – an easy way to ’style’ elements on your web page. We will cover basic CSS in a later chapter.

 

In the next several chapters, we will find Ken starting the planning phase. He will think about his budget and the ROI. He will make some key decisions regarding his web site. Ken is also concerned about the tools needed to develop a web site. We will also see how Ken uses available tools to build a nice site using just basic HTML and CSS.

Chapter One – Getting Started

 Many small business owners believe that they need a web site, even if they are unsure exactly why.  Let me introduce a small business — Ken’s Custom Golf Clubs. Ken builds custom made golf clubs that are fitted to the individual. Ken factors in your height and swing speed as he builds the custom clubs.

Currently, Ken gets most of his business through referrals, but he wants to expand his customer base through more advertising and to get his message out to a larger group.

Ken’s target customer set is Internet savvy and they like to do research online before make the purchase at a brick and mortar store. Ken does have several competitors in town and they have web sites. Ken believes that he has a better product at a competitive price.

In the current economic environment, Ken’s business must control expenses. Ken does have basic computer knowledge and wants to build his web site in-house. That would be Ken doing it himself. He is apprehensive about taking on the job, but he intends to follow a proven development process and to break the work down into manageable chunks. The development process looks like this:

 (1)Plan,  (2)Design,  (3)Develop,  (4)Publish,  (5)Maintain

As Ken goes through each step in the development process, it will be discussed in future chapters (posts). In the next chapter, we will set the stage for Ken’s project. Then we will work our way through the development process.