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:
- Give the site a more
polished/distinctive look (give it some "branding," if you will)
- As mentioned, make the
site "responsive" to different form factors (so that it looks good on
any device - desktop/laptop, tablet, or phone)
- 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
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
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
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
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:
href="~/favicon.ico" rel="shortcut icon"
I notice the bootstrap
CSS that's being referenced:
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
I add another item (Testimonials) to the unordered
list so that it is now:
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
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:
<%: DateTime.Now.Year %>
"translate" (this year) to:
©2013 - Hartt's Pool
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.
Other articles in the series: