Web Site Extreme Makeover, Part 1 of 7

This "Web Site Extreme Makeover" series of articles will provide kind of a "behind-the-scenes" step-by-step look at the process I will go through as I create a new web site for a friend, using his business' existing site as a starting point.

This series of articles (I don't know yet how many it will take to get to the finished product), will be written in sort of a "stream-of-consciousness" style, as I will be experimenting as I go, and letting you know my thought process, experiences, expectations, and probably some false turns I will have to back out of.

As to preconceived ideas I have for proceeding, I know that I want to use Twitter Bootstrap to facilitate RWD (Responsive Web Design), so that it adapts to whatever form factor/screen size it is viewed on; that having been said, as of right now I don't know Bootstrap from Molasses, though! So, we'll be learning that together and see how easy or hard it is to incorporate RWD using Bootstrap.

The purpose of this exercise is to make my friend's site more visually appealing and "professional-looking" so that it is more impressive to potential customers; IOW, the bottom line is to increase his company's bottom line by drawing more people to the site, and converting more of them into customers.

To achieve this objective, I will use the following three tactics:

1. Give the site a more polished/distinctive look (give it some "branding," if you will)
2. As mentioned, make the site "responsive" to different form factors (so that it looks good on any device - desktop/laptop, tablet, or phone)
3. Enhance the site's SEO ranking through various tricks

So, with the ground rules laid, let's begin:

The existing site can be seen at http://www.replaster.com/

I do like the blue background image they used, which makes me think of a nice cool pool beckoning on a sweltering summer's day. I will see if I can retain that feel in the new version of the site. And this will be a completely new version of the site, not a refactoring of the existing site, which apparently was built with Yahoo Site Builder.

As you can see, the page only takes up the left side of the screen on my laptop, and the typography leaves something (namely, panache) to be desired. So let's get started with the makeover.

I will use my IDE of choice, Visual Studio, and indeed the new version of it, Visual Studio 2013. As previously mentioned, for RWD (Responsive Web Design, so that the site will be suited for viewing on any device), I will use the Twitter Bootstrap framework (which is now built into the Visual Studio project templates).

I will also use doubtless jQuery and jQueryUI to make the site interactive and to give it the polish that will make it stand out from the crowd of generic websites that can be created by web amateurs with free wizards.

As this is 2013 (almost 2014, in fact), I will definitely use HTML5 and CSS3 in conjunction with jQuery so as to construct a state-of-the-art site.

So let's finally get started. In Visual Studio 2013, I select File > New Projects > Templates > Visual C# > Web, and then select the only option there (ASP.NET Web Application). I then replace the generic automatically chosen name (WebSite1) with "HarttPools" and select the OK button.

Now there are some more choices to make in the New ASP.NET Projects dialog, and I sagely select the Web Forms option. I say "sagely" because for this site, Web API will not be necessary (as we are not going to expose any RESTful methods), MVC would be overkill (as there is no data to model), and choosing an initially Empty site would make me do a lot of work I'd rather have Visual Studio do for me. I have created Web Pages (Razor/CSHTML) sites in the past (http://www.awardwinnersonly.com and http://www.bigsurgarrapata.com) for myself, and have worked on MVC and Web API projects at work, but have not yet created a Web Forms ASP.NET site – unless you count the "classic" (old) ASP.NET sites from "back in the year" to which these are similar.

It's nice to receive validation from acknowledged experts. This is what is stated about this in C# 5.0 In a Nutshell: The Definitive Reference by Joseph and Ben Albahari, when comparing MVC with Web Forms projects, and when you might select one over the other: 

"What you lose over Web Forms [with MVC] is a designer. This makes Web Forms still a good choice for web pages with predominantly static content."  

The other option would have been to select "New Website" instead of "New Project" and then used a "closer-to-the-metal" model (using the web's underlying building blocks of HTML and CSS, as well as Javascript/jQuery), but that option does not supply the Twitter Bootstrapper framework built-into the project, as this choice does.

So, onward with the Web Forms project. Once the project opens, I first jettison the effluvia that I won't use in this simple site, namely the Accounts folder (there's no need to prevent some people from entering by making them log in first, so I right-click the project and select "Exclude from Project"). Just to make sure nothing broke by doing that, I mash Ctrl+Shift+B to build the project – it builds; good! Now I do the same with the App_Data folder. I may not need the "fonts" or "Models" folders either, but I leave them, at least for now, just in case. If you look in the Contents and Scripts folders you will see the Bootstrap files that have been added there for you (such as bootstrap.min.css in the Contents folder and Bootstrap.min.js in the Scripts folder).

Now I run the app via F5 to see just what I'm starting with. This generic/default page greets me:

Not too shabby; for starters, I'll keep this basic look by replacing some of the verbiage, and by removing the things that don't make sense for this site. First, I'll change the "Application Name" to "Hartt's Pool Plastering"

So, I mash Shift+F5 to stop the app/site from running and select Edit > Find and Replace > Find in Files and search for "Application Name". I find it in Site.Master (remember, this Web Forms way of working is new to me); I change that to "Hartt's Pool Plastering"

Now I just go to the top of the page to see what else I want to change in this file; thus, "My ASP.NET Application" becomes "Hartt's Pool Plastering" too.

Next, I add a comment to remind myself to swap out the generic favicon.ico later:

<link
href="~/favicon.ico" rel="shortcut icon"
type="image/x-icon" />

<%--TODO: Replace
favicon with a custom one--%>

I notice the bootstrap CSS that's being referenced:

<div
class="navbar navbar-inverse navbar-fixed-top">

...which will doubtless save me a lot of time, grief, and hair later, for this will see to it that the page is "responsive" to changes in screen size and different devices – I hope so, anyway.

I add another item (Testimonials) to the unordered list so that it is now:

<ul class="nav
navbar-nav">

<li><a
runat="server" href="~/">Home</a></li>

<li><a
runat="server" href="~/About">About</a></li>

<li><a
runat="server" href="~/Contact">Contact</a></li>

<li><a
runat="server"
href="~/Testimonials">Testimonials</a></li>

</ul>

I need to also add the page referenced, so I do that: I right-click the project, select New > Existing Item > Web Form with Master Page, and name it "Testimonials"

Since I'm not going to require authentication, I remove the entire LoginView section from the Site.Master file.

I replace another "My ASP.NET Application" in the footer section (the footer is a semantic HTML element, new with HTML5) so that it is now:

<p>&copy;
<%: DateTime.Now.Year %> - Hartt's Pool Plastering</p>

which will "translate" (this year) to:

©2013 - Hartt's Pool Plastering

at browsetime.

I mash F5 again to make sure I didn't break anything and, if not, to see the changes in the browser. A close inspection reveals that the verbiage has changed (where intended), the Login items no longer appear, and my new Testimonials link does open the appropriate new page with some placeholder text I put in there for now:

The new site is not all that impressive yet, but the hardest part is done – overcoming the initial inertia. In the next webisode, we'll look at the source behind the existing (currently live) web site to see what needs to be brought over to the new site.