Frank Schulte-Ladbeck

A look into the evolution of a home page. Thoughts behind a design change, and how it was done.

I have joked with a friend that websites are never done. We constantly tweak them in an attempt to find the optimal solution, which may never happen. When I had a static site, I saw that other home inspectors had main pages packed with information, and I kept changing my page to have various pieces appealing to users or to meet the latest data on what works for marketing. When I set up a landing page on my blog, I did the same. Packing content on that page in the hopes of a sale.

Most visitors to your site will make a decision to stay on the site, or leave for another within a few seconds. How much can you see on a webpage in a few seconds? The visitor to the page will not read all of that wonderful content. They want the phone number, the address, or the link to contact you. They want to see the one bit of content that brought them to your site through a search. Your job is to pull them in, and have them really look through your site, and encourage them to purchase after you have them on the site.

I began by pairing down my content to the basics. The web is visual. People decide to stay on your site partly on the images. To clean up the navigation on my blog, I used icons that represented pages. This has increased click throughs to those pages, but not by a large number. However, these images will not suffice to catch the visitors eye. I had included photos that helped with the topic of each paragraph. Images do help focus the eye, and they encourage a visitor to read the connected text, but the photo has to tell the story of the text. This is not always easy to establish. To help these images keep a visitor on the site, I have a description attached to each image. When the pointer hovers over the image, you get the message. This is done by adding an ALT command to the image. For example the image would be represented by the following HTML code: <img height=”45” width=”35” alt=”Here we go to the store!” src=”image.gif”>. To sum up, the image with the message, cause many users to stay a second or two longer to take them in.

Images are not enough to compel a user to stay on the site; clear direction to obtain the content that they want is what will really keep them on the site. Most people who come to your site will not stay. Site design, images, and icons hold their attention a little bit longer in the hopes that they spot what they are seeking. Highlighting keywords or sentences by making them bold or a different color is the next step in catching the user’s eye. Keyword research is another post, but when you have chosen a few keywords, you want them to stand out, because your potential customer is looking for those terms. Since I deleted much of my content, I was left with scattered images, bold text, with some other content. I paired my content down to five topics: welcome/about; service; forum; store; and search. I still will work on the content under each topic, but these are the topics which I want users to explore, or that I think will keep users on the site. My “service” is the reason for the site. I want people to hire me. The”forum” is what I hope the site will become, a place for homeowners to interact and help each other. The “store” has never been a main goal of mine; however, I do think that it may benefit the user and me, and I am considering how to better develop this aspect of the site. Content is why people come to my site, so I want them to understand how they can “search” to find what they need. By searching, they stay on the site longer. Longer equals potential client. Lastly, I want to acknowledge that people are welcomed to the site, even if they are not going to be a client, because eventually they may be.

I ended up with scattered images and text, which may have caught an eye, but it was not clean looking and ineffective. I had options to make the landing page stand out. I could have created a special stylesheet just for the landing page. This is a bit of work, but it can be effective to convert a quick visitor into a user. I could clean up the content with the image followed by the clock of text. This is easy to do, and it creates a simple look. I could style the page with tables to block off the content in understandable sections. That is what I did. The boxes had easily readable elements to encourage the visitor to stay longer.

Here are the steps taken to create these boxes. Writing the code for a table (a box to hold your content) is not hard. I wanted to see what I was getting, so I opened up my office suite, OpenOffice. I chose to work with an HTML document. I picked the table command to create a one columned, two tiered (rows) table. The top would be for a header, while the content will go below. I then roughly sized the table. My images would later cause me to redefine the size, so I am not trying for perfect. I then played with border line, colors, fonts, and other features of the table, till I had something that worked for me. I did not place my content or images, nor did I lay out all of the tables on the page. I was looking for how the individual table would look. I saved this file.

Now I wanted to organize my page and content. I opened up my editor Notepad++. In the editor, I could have downloaded the HTML from WordPress, but I chose to edit the code in the WordPress editor on my site. In the editor, I opened up the document that has my sample table. Here is the code that came up:

<TABLE WIDTH=188 BORDER=2 BORDERCOLOR="#000000" CELLPADDING=4 CELLSPACING=2 STYLE="page-break-before: always">

<COL WIDTH=172>

<TR>

<TD WIDTH=172 VALIGN=TOP>

<P ALIGN=CENTER STYLE="background: #008000"><FONT COLOR="#ffffff"><FONT SIZE=5>Forum</FONT></FONT></P>

<P STYLE="background: #008000"><BR>

</P>

</TD>

</TR>

<TR>

<TD WIDTH=172 HEIGHT=255 VALIGN=TOP>

<P><BR>

</P>

</TD>

</TR>

</TABLE>

You will notice that you see the word “forum”. I used this a place holder for the different titles/headers. The content and images will go between the <p></p> tags with the <br> tag below the title. I copied and pasted the code for the table around my images and content, and I changed the headers to something appropriate. This left me several boxes lined up vertically on my home page. Neater looking, but not the look that I was going for.

Tables come again to the rescue for the styling of the page. I want the tables to line upon the page horizontally, but I do not want them to overlap other elements. I am going to place my tables in a table. I did not style this before, because I did not know how the images would fit into my created table, and I did not know what would fit on my page. I do not want an overarching border on this new table; I am only using it to align elements on the page. So here is the code:

<table border="0" cellpadding="6" cellspacing="0" summary="">

<tr><td style="vertical-align:top;" width="50%">

/* put a table here */

</td><td style="vertical-align:top;" width="50%">

/* put a table here */

</td></tr></table>

What is happening with this code? First, you see that the border is set to 0, so there is no border line. Next cellpadding is set to 6; this is the spacing around the border. Cellspacing is the spacing of content in the cell. This table has two columns and one row. By setting the width to a percentage, I am telling the browser that this table’s column will be half the available space of the page. I changed this to 33% when I had three tables to line up. If I had given a specific size in pixels or inches, the table may have interfered with other parts of the site. This code was pasted around the tables mentioned previously. Now the tables lined up horizontally. This technique for lining up content does not need to happen within a border. Tables within tables with no borders is a quick method for aligning content on your pages.

The page has a clean, organized look that I liked, but I want to automate some information on the page. I am still working on this aspect of the page at the time that I am writing this post. When I write a post for the site, it shows up on the recent posts widget in the sidebar, but I think having it towards the top of the home page encourages visitors to click through and read articles on the site. To list the latest post, I edit the home page with a new link and statement about the post. Currently I have the code up that will pull up the post and its excerpt, but you cannot execute php code in a WordPress page. There are various plugins to accomplish this task, and I am playing with a few of them now, but the set up is more involved than what I initially thought, so you may see the code displayed when you go to my site. I could add this code to my page template, but I did not want it on each page, so we will see how this goes.

About your home page, you may find that packing it with content works for you. You may want to spend some time with stylesheets, which can be visually appealing. Tables is the simple method for styling your page’s content. Think about what would keep a visitor on your site.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.