Building the new Ferguson Moriyama website in Umbraco 5
So I need to learn how to use Umbraco 5 - because in a couple of months of time I'll be teaching it to others. I've played with version 5 during development and contributed a few bits of information back to the community but now is the time to get real.
I always find that there is nothing like a real project when learning a technology. I'd spent the last couple of weeks deciding what would be my proof of concept project, a little afraid to commit a client to such as breaking piece of tech and then it hit me.
Gathering dust in a folder somewhere on my laptop was a set of mock-ups for the new Ferguson Moriyama website. So why not? Ferguson Moriyama on Umbraco 5 and blog and screencast about it step by step so others can benefit from my experiences during the process.
A little project background
FergusonMoriyama.com has served me well since 2005 and Umbraco version 2.0.6. My company website is (and always has been) a secondary channel when it comes to new business. I'm fortunate enough to have enough repeat business that I rarely have to convince people that we can help them out.
Having said that the site does need a little TLC, In the 7 years that the site has been in service we've diversified the types of work we do and that obviously impacts the content we serve. From being a pure services company we now sell some products and as we provide training for which we need to take bookings.
In performing this technology refresh we'll get rid of some of the "shoe-horning" and hacking of content that has gone before. It used to be just me updating my Umbraco sites but now there are a few of us, it'll be nice to remove those "special pages that only Darren can edit".
The Starting point
The mark-up that I had built can be viewed on my preview server:
When I undertook the refresh of the look and feel I had the following criteria.
- Consistent positioning of content
- Navigation to depth of 3 levels
- Adding a standard form template
- Adding a product template
- Making our contact details more prominent to encourage people to call us
- Re-writing lots of the copy to focus on a smaller set of services that we want to provide
One concern is that I didn't really consider mobile devices very well. In the last year I've started to use tablets and phones to browse the site and I'm now kicking myself at the omission. Still I've decided to move forward with what I have and address it as the first issue post go live.
The blog series
I'll aim to write each step of this development up as I work on it. I'll do my best to use screencasts and screen grabs where appropriate. The aim is to make things fairly simple to follow and the target audience will be people who are familiar with Umbraco 4.
I understand that I'm working with a product that is maturing and expect to hit issues along the way - these will of course be logged and reported. I'm not going to put a timescale on this or commit to update the blog at regular intervals - I'm phenomenally busy just now.
In part 1 of this series (coming sometime soon) I'll look at two things:
- Designing and implementing my document types
- Versioning my development
The versioning part will also consider a release process - Once I've versioned my development I'll need to be able quickly release iterations to multiple environments. At the end of each blog post I'll plan to have the site public facing so you can follow my progress.
So before we start the build let's get a development environment set up. This is really simple as I have the Microsoft web platform installer and WebMatrix already on my machine.
Here are the steps:
- Download Umbraco 5 RC 2
- Extract to a folder
- Right click and choose Open as a website with Microsoft WebMatrix
- Click run and choose a browser - in my case Chrome
- On the splash screen click the launch installer link
- When prompted choose SQL CE as the database - I'll change this later.
That is all, an empty vanilla Umbraco 5 up and running. This leaves me ready to start building my site.
The screencast below illustrates the steps described above. There is no sound.
Note: I installed the wrong version of Umbraco in the cast but the process is the same.