An under-the-hood look at how the new Wise Owl website works
This blog summarises the technology used to make this website appear on your screen, including ASP.NET MVC, SCSS, responsive website design and entity data models.

Posted by Andy Brown on 08 October 2014

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

The new Wise Owl website - a behind-the-scenes look

You may have noticed if this isn't the first visit to our website that it has changed completely!

Old website

What the website used to look like, up until the end of August 2014.


The new website sees not only a complete new design, but also a new logo and new branding.  We don't believe in small, incremental changes!

For anyone interested, the remainder of this blog shows how this website works.

Development environment

This site is written in Visual Studio using ASP.NET 4.0 MVC, with Razor markup language and C# programming code:

A typical Razor excerpt

A typical excerpt from a web page, showing C# code mingling with HTML.

Why C#?  Well, despite my own personal preference for VB, we finally accepted that C# is winning (has won?) the coding war.

Responsive design

The website uses Zurb Foundation, which allows for responsive website design.  To see what this means, here is the same webpage shown on a mobile phone, a tablet and a desktop computer.  Start with the desktop computer:

Blog page on desktop

On a desktop computer you can see the menu on the right and two columns of blogs.

On a tablet you lose the left-hand menu, and just get one column of blogs:

Blog page on tablet

The tablet still retains the logo at the top of the page, however.


On a mobile phone, the top logo banner disappears too:

The website on a mobile phone

What the website looks like on a mobile phone.


With a bit of luck, it's now possible to browse the Wise Owl site from almost any device, but we'd love to hear from you if you find any anomalies!

Styles and formatting

The website uses CSS cascading style sheets (naturally), but these are written using SCSS.  Here's an example of what this looks like:

Setting variables in SCSS

A bit of SCSS setting variables, used to avoid having to hard-code hex colours throughout our style sheets.


SCSS also allows you to extend existing styles, create "mix-ins" (basically, user-defined functions) and much more besides.


We use SQL Server as a back-end database (what else?).  There are 3 ways in which we edit and select data, shown here in order of frequency:

Method Notes
LINQ Language INtegrated Query allows you to write .NET code to extract and manipulate SQL Server tables directly.
Access front-end We have an Access database front-end to our database, which allows us to edit website data easily using forms.
Stored procedures Occasionally we've written stored procedures to amend SQL Server data (usually where we're trying to do something complicated, which is just easier to code in SQL).

Underpinning all of this we have used database-first entity data models - here's an example:

Entity data model example

An example of an entity data model (there are 11 in this website at the time of writing, although the above isn't one of them).


Recommendations and conclusions

In retrospect I think we chose pretty well (20+ years of development experience helped, during which we've taken many wrong turns).  Be warned, however, that ASP.NET MVC has a l-o-n-g learning curve!


This blog has 0 threads Add post