Building your site: The Front Page

January 25th, 2006 | Category: Heidi's Entries,Planning Your Website
written by: Heidi Cool

Screen Capture of Cartooning Site

In the last chapter of the tutorial we discussed content acquisition. Now that some time has passed, and we've gathered our content it is time to start building the page. For the purposes of this entry my focus will be to explain what content goes where. This will not be a detailed explanation of HTML and CSS.

The image on the right is a screen capture of the first page of our fictional Department of Cartooning website. As was decided when building the site map, I'm using an "Advanced Template" with a horizontal menu for this site. (Template files are available in the Web Toolkit.) I've assigned a number to each section of the site, and will now use that to explain the various elements of the page.

1: Top Navigation

This section is meant to offer consistent navigation from every website at Case. It should not be edited.

2: Masthead/Banner

This area contains 3 primary elements, the logo, a background image, and the name of your site. In an Advanced Template this area is usually gray. In this case I used Turquoise as I felt cartooning would benefit from something more whimsical.

Each template comes with a background image, but if you have an image in mind that more aptly fits your site, then we can change that. 99% of the time this image should be a photograph, but for the department of cartooning I felt an illustration would be better. I used a drawing of bears I'd made for an earlier project. If this were a real site I would have used something from the department.

The image used in this area is 422 x 108 pixels wide. It is created from a Photoshop file that incorporates a particular mask that both fades out the left side and applies uniform color to the image. If you would like a diffent image, you can create one by following the customize your masthead image instructions.

The third element in this area is the site name. This need not be the name of your department. Here I've used "Department of Cartooning", but I could just has easily have chosen "Cartooning at Case." Simply pick a name that reflects your content. The name should appear in UPPERCASE letters and should remain constant for every page on your site.

3: Primary Navigation Menu

This menu will appear on every page in your site. It will allow users to easily switch between sectional areas no matter what page they are viewing at a given moment. The links used in this menu are simply the section names you came up with when building your site map. Additionally this menu includes a link to your home page.

4: Headline & Image

This area is meant to announce "who you are" and "what your mission is" to your audience. You could choose something as simple as "Welcome to Department X" or something more descriptive. This space should tell your audience that they've landed at the right place, the information you provide is just what they are seeking, and that your site is worth exploring. The photo on the right should reinforce this message or reflect the nature of your site.

The templates were built with certain sized images in mind, and you should size your photo to match. Then choose your text to fit the space. While this may seem backwards, it helps to ensure that you don't overload this area with too many words. If you really need to change the size of the photo to reflect different dimensions, then you may need to adjust your stylesheets as well. You should also view the page in multiple browsers. A photo that looks fine in Internet Explorer may move things around in Firefox or Mozilla. If you need assistance with this feel free to contact me or Kevin.

5: The Search Box

This box allows users to search your site via Google. You will need to edit the code to match the address of your site. Maintainers of older sites will also need to ensure that they use the current Case convention rather than the former CWRU convention. Learn more.

6:Related Sites

Just as it sounds, this box gives you a place to link to related sites. These may be other Case sites, or external sites. Try to pick the places that would give people additional information that supports the content on your site. If you have 50 related sites you should just pick the top few and create a links page for the rest. The use of double angle brackets to indicate a site external to your own is optional.

In some cases you may find that you need an additional box. Perhaps you have multiple types of related sites. Or you have special content that you wish to feature more prominently. Feel free to do this so long as you maintain the same look and feel. Pharmacology did this both by including an extra gray box for "Our People" and a navy box for "Apply Here." You'll note that aside from the color change the navy box otherwise maintains the same look and feel of the gray boxes. Another example can be found at ITS.

7, 8, 9: Primary Content, New, Events, Announcements, etc.

These elements make up your main content area, but this is also the area where you have the most flexibility. You may wish to use multiple announcement boxes, bring in a feed of headlines from your blog, describe your department, etc. American Music Masters, Marketing & Communications, and Varsity Athletics all provide examples of this.

Choose your content carefully. People often try to throw everything "important" on the main page, but if include too much you will find that your "important" items become lost in the crowd, competing with one another for attention. If you have a great event coming up, give them a brief headline with a link to more info. You can do the same with news and other announcements. Give them just enough of a taste to whet their appetite to learn more.

While the main page should be inviting and informative, keep in mind that it is just the front door. What you put on this page is the sign that invites users to open that door and come inside. Your job, is to select content that makes them open that door.

Next chapter: Interior pages

Next >>

Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

42 Comments »
  1. good info. can you share some more related links. again I wanted to redesign My real estate portal any suggestions?

    Comment by website designer — February 1, 2006 @2:29 pm

  2. good info. can you share some more related links. again I wanted to redesign My real estate portal any suggestions?

    Comment by website designer — February 1, 2006 @2:29 pm

  3. After reading your post, I found out that although I am building websites and optimize them for search engines since 4 years. Learning never ends. You gave me some more inspiration, thanks a lot and go on blogging. Best liconum

    Comment by Liconum — April 22, 2007 @4:30 am

  4. A lot of what you are speaking about is what I would call "visitor conversion". For a website targeting a buying audience - for example, my real estate website - attracting visitors is only the first step. You have to keep them interested and get them to eventually contact you. Streamlined navigation and a well-ordered page are vital - otherwise your page just becomes a quick stop on the customer's serach for what they're looking for.

    Comment by Naperville Real Estate — May 1, 2007 @1:51 am

  5. There's some good basic advice here. I am just starting out my two property related sites, investment property and sell my house fast and it seems I need to make them a little more interesting to use. I particularly need to focus on the news and events side to keep users coming back.

    Comment by double glazing — May 6, 2007 @5:01 am

  6. Great post, We've been comparing straight web design against blog post in the Belleville Ontario Real Estate area. Forgive the link. You should see what result you get comparing different CMS systems. Belleville Ontario Real Estate

    Comment by Tara Lyons — May 11, 2007 @12:36 am

  7. I agree with Naperville. Getting people to your site is one thing, conversion, or getting them to contact you is a whole other issue. I just launched my new Hawaii real estate website and we have been watching the stats very carefully. Even though we though the new site was improved, the conversion rate wasn't as good as the new ones. It comes down to, people were having a hard time finding homes using the new navigation. We have been working on it and conversion is up. My advice, pay some people to browse your site and watch carefully to what they are doing and you'll see where things go wrong.

    Comment by Justin Britt — May 11, 2007 @1:22 am

  8. That is great experience. I am just trying to understand the search engines and how to built a quality real estate website. This info was very helpfull. Well done.

    Comment by Antalya Homes — May 13, 2007 @6:09 am

  9. This is good basic information but what I find most designers lack is basic Call To Action on any of their sites. With good SEO and Design you WILL get visitors but without Good Call to Action on the pages you will only convert a very low percentage of those visitors. Remember to old saying, "Ask and you shall receive". Most sites don't ever ask the user to do anything?!?

    Comment by Carlsbad Realtor — May 21, 2007 @3:51 pm

  10. You offer some very good advice. After starting my own real estate related sites Denver Real Estate and Highlands Ranch Real Estate I find that I should be focusing on refreshing content like news and events.

    Comment by Bruce Swedal - Denver Real Estate — June 11, 2007 @3:09 pm

  11. I am really glad I stumbled across this post. It has some great ifnormation on site building, which I am in the process of doing. Thanks!

    Comment by Bruce Swedal - Denver Real Estate — June 12, 2007 @9:53 am

  12. I am working to learn and improve my website offerings. Thank you for the insight and if you have any other information please pass it along. Bruce Swedal - Denver Real Estate

    Comment by Bruce Swedal - Denver Real Estate — June 17, 2007 @8:54 pm

  13. As far as the Headline section is concerned, Its really important to format your headline. First by putting it inside H1 tags, then adding coloring,size,highlight,background, ect to certain keywords in the headline This makes the Search engine perk up when reading....

    Comment by Locate Homes — June 25, 2007 @11:26 am

  14. Headlines and subheads should always be coded as headlines (h1, h2, h3, etc.) but if you are going to format your headlines, make sure to do it using CSS. Here on this blog and in the Case Web sites we use h1 for the title of the site and h3 for the headline on a particular page. The h1 is styled to be all caps white against a background photo and the h3 is lime against white. You should include keywords in your headlines, but I would not add additional formatting to these words. The search engines already know that something in an h1 is more important than something in an h5, and that something in an h5 is more important than something in a plain paragraph. Search engines do not give extra priority for words that are bold, bright purple, in large sizes, blinking, etc. Colors, fonts etc. are matters of presentation only and do not affect your search rankings. So when it comes to visual styles, don't worry about the search engines, instead worry about your users and present them with something clear and easy to read. Also when choosing keywords, pick out words that make sense to your readers, as well as to the search engines. If you fill your headlines with keywords to bring traffic to your site, but your headlines aren't logical, your traffic will immediately leave.

    Comment by Heidi Cool — June 25, 2007 @3:14 pm

  15. SEO is like anything else. Search out information and soon you will begin to understand what works and doesn't work. I am presently changing hosting companys because of the way the spiders grab information of my old real estate site.

    Comment by Suzi Enders — July 9, 2007 @7:23 pm

  16. I give about 2 hours time everyday to improve my website and popularity. I like this. It looks like a long term game. Statistics make me happy and motivate me.

    Comment by ???????????? — July 13, 2007 @2:13 pm

  17. Regarding the "Search Box", I don't like using Google's search as there to many adsense results that show up next to my site's page results. I rather use the "Search Box" that comes with WP or another similar Content Management System. One of the most important steps in building the site's front page is how to proper build the internal link structure to the interior pages for the visitor to easily find the door to them.

    Comment by san diego real estate — July 17, 2007 @12:55 pm

  18. The Google search box used by Case doesn't include adsense results as it only indexes sites in the case.edu domain. When set up for an individual site it will only search pages within that site. Google offers similar commercial products for use by businesses. The search box on the Case home page searches all sites in the case.edu domain. As the university Web site is actually a collection of sites housed on a variety of servers, this solution allows visitors to search all of our pages, no matter where they are housed. Server based search tools wouldn't give us this ability. There are a number of options for Web maintainers to use; available from Google, through Web hosting providers and through other commercial enterprises. Which solution works best depends on the nature of the site, but for a site the size of ours we've had good results with Google.

    Comment by Heidi Cool — July 17, 2007 @8:21 pm

  19. Actually, your points are all "universal" web design truths. However, I prefer a non-conformist style. The days of a portal like web page design -- the kind that you are advising are gone. They give a high degree of standardisation but also promote acute boredom. We need refreshing standards :)

    Comment by Tool the Web — August 6, 2007 @5:31 pm

  20. I wonder sometimes that we are trying to do too much with the web site design and people are getting jaded. Recently, my tracking software disclosed that a simple site will gain conversions. More importantly, visitors are lingering longer on the sites and leave their email for opt-in purposes. Please give it some thought.

    Comment by Bill — September 27, 2007 @12:37 pm

  21. I have to say thank you for this blog post, as I've been working hard on a number of websites, yet had been missing out many of the aspects you have pointed out here. Thanks again

    Comment by Mark Attwood — September 28, 2007 @11:43 am

  22. Those are some great methods described above... I have been doing web design for over 5 years and even have a degree in a related major, and I still learned something from that...

    Comment by Saint Louis MO Real Estate — September 28, 2007 @5:49 pm

  23. Hi Heidi, I just commented on one of your other posts, and my input remains the similar :) If one is thinking about starting a website today, I would recommend that person get a good grasp of easy to add widgets that can considerably increase the level of involvment of the visitor. That is what the over-hyped web 2.0 is all about.

    Comment by Ajeet Khurana — October 3, 2007 @12:07 pm

  24. Your post about "Building your site: The Front Page" is well written... I think I am going to try to implement it on my Columbus Ohio Real Estate website.

    Comment by John Anderson — October 5, 2007 @7:59 pm

  25. An excellent post regarding the need for a well done front page is very well written... I wonder if you would look at my http://www.reinalliance.com/cash-back-incentives/turnkey-investments.html">Real Estate Investments website and write me if it seems well done.

    Comment by Real Estate Investments — October 9, 2007 @8:51 pm

  26. there really should be a department of cartooning! - but the clear structural advice in this article is very helpful for organising an effective homepage. as a beginner in web development, such sensible guidelines are very welcome...

    Comment by lime in the coconut — October 19, 2007 @11:36 am

  27. A very well written post, some amazing methods which I have already started adopting for my web sites, especially with the headline and image section

    Comment by sell my house fast — October 22, 2007 @5:57 am

  28. i will agree this is an excellent post, thanks for the methods and will run them myself

    Comment by charles — October 26, 2007 @12:11 am

  29. this makes for great reading, thanks for this site will def. have to work with this one.

    Comment by cruiser — October 26, 2007 @12:15 am

  30. Brilliant Read . Will post it in my blog and give a link back to this page. Thanks.

    Comment by Investment Property in Dubai — November 16, 2007 @3:50 am

  31. I think your comments about having too much information on the front page of your site is right on. Many times you see people trying to shove ten pounds into a five pound sack. On my real estate site, I have just a few links that then lead people to the main content of my site, which are the videos.

    Comment by Brett — November 20, 2007 @1:32 pm

  32. Thanks for the beginning structure of good web design. Quality website design can start with an easy user interface and a simple design. If there is overwhelming design elements the viewer will get confused.

    Comment by Las Vegas Real Estate — November 24, 2007 @3:19 am

  33. Your websites lay-out sample is great. Like many of your readers have commented, getting them there is one thing and getting them to opt-in is another. Do you have any other posts on getting potential clients to take action, like raising their hand and identifying themselves? On my Phoenix Real Estate site I have offered clients a five hundred dollar incentive to join my newsletter. To date it's not really converting.

    Comment by Arizona Real Estate — March 16, 2008 @2:54 am

  34. It's easy to get carried away with trying to fit too much content on your front page. I have been working hard on my Real Estate website for a while now, and find that balancing good design and content are good for both the reader and the designer...great post!

    Comment by Colorado Springs Real Estate — March 21, 2008 @1:02 am

  35. Thank you for a great post and topic. With all the millions of websites out there one can definately tell the difference between high quality and those that are without a doubt very amateurish at best. I find sites that are not only very eye appealing but draw me in with topics and sometimes questions that interest me are the ones that keep me there. As a Realtor I am turned off with sites that are all about the Realtor and "Look at Me" type of sites. Two of the top sites are Toyota and Microsoft. Toyoto does not show a photo of it's chairman and Microsoft does not have a photo of Bill Gates. Many Realtors would be wise to take a tip from some of these top sites.

    Comment by George Tallabas — April 12, 2008 @10:50 pm

  36. I'm glad I found this, cause I'm in the middle making my site now and this info is extremely useful.

    Comment by Jeremy — May 13, 2008 @12:34 am

  37. Thanks for the information, this will be very useful for beginner

    Comment by Poeps — May 19, 2008 @5:38 am

  38. Thanks for the tips

    Comment by csifstore — May 19, 2008 @5:40 am

  39. I was searching for ideas because we are currently re-designing my Hawaii real estate website and found this page. There is a lot of great ideas here and I think we will be using some of them. After reading this information I think we should put the real estate search on our home page above the fold front and center. What do you think? Any advise would be greatly appreciated. We should have the new design launched within a couple months or sooner. We will post again when we are live with the new design to get feed back. Thanks for such a great post!! Aloha :-)

    Comment by Jeff Manson — June 7, 2008 @9:07 pm

  40. With the short attention span of many web site visitors, it is important to capture their interest right away through good design key pieces of information. Too much information on the landing page could distract the visitor,and create a visual or content overload. A perfect balance needs to be found, given the type of the visitor the site is designed for.

    Comment by Faina Sechzer — June 8, 2008 @12:06 am

  41. I've had some luck using google maps and google earth embedded in a web page to keep visitors. They interact with the map to find home listings. I'm sure there are many more ways the internet can help people with real estate.

    Comment by austin_mls realtor — July 29, 2008 @5:14 am

  42. Hi, We specialise in Brazil Property and have always needed help on web design as the subject is confusing enough for a lot of people, so web site organiation is very important. Thanks for your help.

    Comment by Robh — July 31, 2008 @1:44 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL