BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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!
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.
A typical excerpt from a web page, showing C# code mingling with HTML.
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:
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:
The tablet still retains the logo at the top of the page, however.
On a mobile phone, the top logo banner disappears too:
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:
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:
|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:
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!