Technology Toolbox

Your technology Sherpa for the Microsoft platform

Jeremy Jameson - Founder and Principal

Search

Search

Introducing TechnologyToolbox.com

In this inaugural post for my new blog location, I'll introduce various features of the new Technology Toolbox website and provide a high-level overview of the underlying architecture. Subsequent posts will cover different aspects of the site in greater detail.

Home Page

The following screenshot shows the current home page for Technology Toolbox.

Technology Toolbox home page
Figure 1: Technology Toolbox home page

As I detailed in a previous post, I find it very helpful to create wireframes that illustrate blocks of content, navigation elements, and other site features. These often start out as simple "grey box" diagrams (as described in Andy Clarke's excellent Transcending CSS book and Jason Santa Maria's original blog post). However, I often update them after the static design is complete (in other words, after some sample HTML, CSS, and images are sufficiently "baked" and ready to serve as a reference for the visual design).

Here is the corresponding page layout for the site home page.

Technology Toolbox home page (page layout)
Figure 2: Technology Toolbox home page (page layout)

Branding

The branding area in the masthead is simply comprised of the company logo and serves as a link back to the site home page from all other pages in the site. Some sites explicitly include a "Home" link in the main navigation. Personally, these days I think most people are used to the company logo linking back to the site home page and thus there's no sense having one more link in the main navigation.

Site Search

If your site doesn't provide a way to quickly search for content of interest, then chances are I am not going to spend much time on your site. I believe this also holds true for most people who visit TechnologyToolbox.com.

Consequently, I added a ubiquitous "Search" box in the top right corner of the master page for the site. Currently, the Site Search functionality on TechnologyToolbox.com is powered by Google. I'll talk more about why Google was chosen for this feature in a subsequent post and how I integrated Google's custom search functionality into the site.

Main Navigation

Along with branding and site search, the master page for the site also specifies navigation elements corresponding to the main areas of the site:

  • Services
  • Company Overview
  • Contact Form
  • Blog

Main Content

The default master page for the site includes a single placeholder for the "main content" of each page. However, individual content pages (such as the home page) typically divide this content into two parts: the "primary content" and the "secondary content." On the home page, the primary content is comprised of a "slider" that highlights the various services provided by Technology Toolbox (via a series of rotating images and corresponding captions) and a couple of short paragraphs of marketing content.

Secondary Content

Since the majority of content for the Technology Toolbox site is provided in the form of blog posts, it seems logical to highlight blog content on the site home page.

Most Recent Posts

As the heading states, the "Most Recent Posts" control simply lists the three most recent blog posts (in other words, by date published in descending order). In addition to the post title and date published, this section includes the "summary" as well as a link to post comments.

Most Popular Posts

The "Most Popular Posts" control renders the top ten blog posts based on number of views. Like the "Most Recent Posts" section, this content is dynamic and easily generated using the Entity Framework and a little bit of LINQ to query the underlying database. The content is cached for a short period of time in order to greatly reduce the database load whenever someone visits the home page.

Site Information (a.k.a. Site Footer)

The standard copyright notice appears at the bottom of all pages -- along with links to the Privacy Policy and Terms of Use.

Services

The Services page for the site is shown in Figure 3 below. This represents a typical "content" page in which the "primary content" consists of text with various headings and other markup, while the "secondary content" is comprised of a related illustration (typically obtained from iStockphoto -- my image provider of choice).

Services page
Figure 3: Services page

Note that I still like to use the 960 Grid System to layout Web content -- something I first discussed in a blog post about Web Standards Design in MOSS 2007. The following screenshot shows how the primary content spans 7 columns and the secondary content spans the remaining 5 columns (since I chose the 12 column layout option).

Services page (with grid)
Figure 4: Services page (with grid)

In order to minimize the amount of CSS for the site, I chose to extract only those rules from the 960 Grid System that are currently being used and subsequently embed those in the "main" CSS file for the TechnologyToolbox.com. This way I don't have the entire 960.css file linked as a separate style sheet (or the entire file embedded in my own style sheet). I'll talk more about CSS optimization in a separate post.

Company Overview

The "Company Overview" page is very similar to the Services page shown above, so there's really no sense including a screenshot of it in this post. If you want see what it looks like, just click the Company link in the site navigation.

Contact Form

The site provides an online form prospective clients can use regarding potential projects and other contact requests, as shown in Figure 5.

Contact form
Figure 5: Contact form

As shown below, validators are used to ensure the required fields are specified when submitting the form. Also note how required fields have a light yellow background color (that changes to white when the field has the focus).

Contact form validation errors
Figure 6: Contact form validation errors

To ensure responses are generated by a person -- rather than annoying spam submitted by some worthless "bot" -- the form includes a CAPTCHA control that requires the correct image to be selected in order to successfully submit the form. Personally, I prefer this type of challenge-response (i.e. "image-recognition CAPTCHAs") over the "distorted text" approach that has become common on many websites today. I often find it frustrating and time consuming to decipher a random string of characters that have been mashed together along with a wavy line running through the middle.

When the incorrect image is selected (or no image is selected) in the CAPTCHA control, an error appears in the validation summary, similar to when required fields are missing.

Contact form CAPTCHA validation error
Figure 7: Contact form CAPTCHA validation error

While the simple image-recognition CAPTCHA is arguably not as "strong" as a distorted text CAPTCHA (depending, of course, on how much you choose to distort the text), I think it is sufficient to prevent bots from submitting spam -- at least for now. I can always make it more robust with a little bit of tweaking if I discover that someone has written code specifically to hack this particular CAPTCHA implementation.

Blog

My new blog is currently powered by Subtext -- or rather my own (slightly modified) version of Subtext 2.5 -- in combination with a custom blog skin that leverages the same "theme" (i.e. CSS files and associated images) as the other parts of the site. I discovered some issues with the current release of Subtext that required some tweaks in order to render the blog pages in the desired structure and format (for example, to show the Archives section at the bottom of the "secondary content" using expandable lists of links grouped by year).

Blog home page
Figure 8: Blog home page

The primary content on the blog home page is, not surprisingly, the most recent list of posts (sorted in descending order). The secondary content provides links for the blog RSS feed, quickly finding blog posts by tags or categories (note that Subtext supports these concepts differently), and browsing through the historical archive of posts.

Figure 9 shows a typical blog post. The secondary content is similar to that shown on the blog home page, but also contains a Recent Posts section. The thought behind this is that people often find blog posts through search sites like Google or Bing, so when they browse directly to an individual post, we should try to "hook" them into reading other posts during the same visit. [The Recent Posts section is not shown on the blog home page, since this would be redundant with the items shown in the primary content area on that page.]

Sample blog post
Figure 9: Sample blog post

Note that the form for adding a comment to a blog post uses the same custom CAPTCHA control described previously for the Contact form. Getting this to work as expected was another reason why I had to modify the Subtext solution for the Technology Toolbox site. Again, I'll cover this in more detail in a subsequent post.

At first I was little wary of having both "tags" and "categories" for blog posts (since my old MSDN blog only used tags). However, after experimenting with a couple of different taxonomies before settling on my initial list of categories and tags, I discovered that I actually liked the way Subtext supports these distinct facets.

Other blog-related topics that I plan to cover in subsequent posts include:

  • Why I (eventually) chose Subtext as the blog engine for the site after looking at numerous other blog solutions
  • How I migrated content from my old MSDN blog (running on the Telligent platform) to Subtext
  • Why I still prefer using Expression Web for authoring blog posts, including why I completely disabled the default HTML editor in Subtext

Logical Architecture

As noted in the previous section, the Blog portion of the Technology Toolbox site is powered by Subtext (an ASP.NET MVC application for which the current release is built with Visual Studio 2008). However, the other areas of the site are based on a "classic" ASP.NET Web application built with Visual Studio 2010 (that targets .NET Framework 3.5).

Originally, I had planned on using .NET Framework 4 for the entire site (and actually had it running in that configuration for a little while), but that was before I swapped out the original blog engine for Subtext. [I discovered some serious scalability issues in the original blog engine selected for the site.]

Upon switching to Subtext, I thought about using ASP.NET MVC across the entire site. However, I ran into several issues when upgrading the Subtext solution from Visual Studio 2008 to Visual Studio 2010 -- and to be perfectly honest, I really don't like working in Visual Studio 2008 these days (unless I absolutely have to). In order to avoid any further delay, I decided to "punt" and use two different solutions for the site.

Figure 10 illustrates how the two solutions are merged together during the deployment process. The blog folder is configured as a separate application in IIS. It contains the Subtext solution and a few updated/additional files from the "Caelum" solution -- such as the site map file and the custom blog skin.

Solution architecture
Figure 10: Solution architecture

Physical Architecture

The production environment for TechnologyToolbox.com is currently hosted by WinHost, as shown in the following figure. Separate servers are used for database services (i.e. SQL Server) and the Web tier.

Infrastructure
Figure 11: Infrastructure

In addition to Production, separate Development and Test environments are used to validate releases before deploying to the "live" environment. DEV is automatically rebuilt at least once a day, whereas TEST is updated "manually" as release candidate builds become available.

The actual development of the solution is performed on other servers (e.g. FOOBAR7 and FOOBAR2) that are not shown in the above infrastructure model.

Comments

No comments posted yet.

Add Comment

Optional, but recommended (especially if you have a Gravatar). Note that your email address will not appear with your comment.
If URL is specified, it will be included as a link with your name.

To prevent spam from being submitted, please select the following fruit: Watermelon

Pear
Strawberry
Apple
Watermelon
Cherries
Grapes
 
Please add 5 and 2 and type the answer here: