Web Site Extreme Makeover, Part 5 of 7

Jumping Right In (not unlike a Calaveras County Frog)

Here in part five of this installment, I continue with some necessary plumbing and extensions to the site. Based on verbiage ("Our territory includes Central California from Stockton to Madera and Sonora to Tracy.") that I found on the existing site, I changed this on the home page:

...to this:

Based on information on their home page, I added yet another menu item, namely:

<li><a runat="server" href="~/VGB">VGB Pool and Spa Safety Act</a></li>

...and then added that new page, and transferred the text they had on the home page onto that page.

This time, though, when adding the web form, I select Add > New Item > Web Form with Master Page, and select Site.Master (not Site.Mobile.Master).

One Small Step for Coderkind

Next I copy over the "About Us" text that is on the existing site's home page, and put it in the About page. After I do that, I notice that they mention being in business since 1971, and then say it's been 38 years. Obviously, this is a little outdated, so I change the figure to 42 years, as this is 2013.

The "right" way (better way, anyway) to do this, though, is to add some code that would subtract 1971 from the current year and display that value, so that this year it will say 42 years, next year it will say 43 years, etc. So I add this code to About.aspx.cs, above the Page_Load() event handler:

private const int BUSINESS_GENESIS = 1971;
protected int yearsInBusiness = DateTime.Now.Year – BUSINESS_GENESIS;

I could have gotten away with just adding one line:

protected int yearsInBusiness = DateTime.Now.Year - 1971;

...adding the year directly to the computation, but I like to follow the advice of Steve McConnell in his seminal programming book Code Complete and use constants for every number except (sometimes) 0 and 1. If you don't know why, and want to know – read the book; it's full of great advice for coders. In fact, a programmer who is not familiar with and follows the tenets of Code Complete is like a … (fill in the ellipsis dots with a fitting comparison of your own devising – I think you get the gist (no pun intended)).

Also, I changed the text within the H3 tag in About.aspx from:

...to:

...For the past <% =yearsInBusiness %> years we've helped thousands...

..so that 42 (or whatever the calculation ends up being) replaces the variable name. Here's what the About page looks like now:

Functional, but pretty bland; I will definitely return to this to try to give it some pizzazz, panache, or what have you before I'm through with it. For the moment, though, I'll settle for boring but functional.

One Giant Leap of Peroration

I do the same with the VGB page, copying the text from the home page of the existing site to that new page.

I set out to do the same with the Contact page, but notice that the default contact page is already set up a little better than the others. Here's Microsoft's provided template (leaving out the first line, which is very similar to that on the other pages):

<asp:Content ID="BodyContent" 
ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>
    <h3>Your contact page.</h3>
    <address>
        One Microsoft Way<br />
        Redmond, WA 98052-6399<br />
        <abbr title="Phone">P:</abbr>
        425.555.0100
    </address>

    <address>
        <strong>Support:</strong>   
        <a href="mailto:Support@example.com">Support@example.com</a><br />
        <strong>Marketing:</strong> 
        <a href="mailto:Marketing@example.com">Marketing@example.com</a>
    </address>
</asp:Content>

So, using this as a starting point, I copy over the various parts of the existing text for Hartt's Pool Plastering, so that it ends up being:

<asp:Content ID="BodyContent" 
ContentPlaceHolderID="MainContent" runat="server">
    <h2>Contact Hartt's Pool Plastering</h2>
    <h3>Request More Information</h3>
    <p>Use this link to contact our Sales Department to get more information about our company, 
    products, or services.</p>
    <address>
        Hartt's Pool Plastering & Construction<br />
        Turlock, CA 95380<br />
        <abbr title="Phone">P:</abbr>
        209.668.2550
        <abbr title="Fax">F:</abbr>
        209.664.1955
    </address>

    <aside>please <a href="mailto:sales@replaster.com">email us</a></aside>

The Contact page now looks like this:

I've seen worse things. Still, all of these pages (About, VGB, and Contact) need some work to make them more visually appealing, but the "gingerbread" will wait until the end.

I change the ordering of menu items to: Home Images Contact VGB Pool and Spa Safety Act About

...and remove the Testimonials page, as they don't have one.

Denouement

In the next exciting installment of this Extreme Website Makeover, I will dive into the Images page, and probably add a jQuery UI widget to that, such as a carousel, to show various images in a sort of "slide show." I will likely also subdivide them into categories with the use of a tab widget. Until then!

BTW, forgive me for using the odd and hard-to-pronounce word "peroration," but I've been reading William Safire's book Lend Me Your Ears: Great Speeches in History lately and have become inundated by and thus immune to it, as William's afire with that word.