Blog

Our New Website

You may have noticed things have changed around the blog and the entire Antelle website.  I’m not entirely sure what iteration of it we are on but I’m very happy with how things have turned out.

Working off of a fantastic static mockup created by Kerri, with a good deal of help from Conor who I hope can point at this site as part of his past work.  We have put together a new, clean, Umbraco powered website that will be easier to manage and update, fitting into the latest and greatest of capability that Razor, HTML and CSS can provide.

It’s fun to toot that horn and think of everything that’s now working without a problem.  Instead l will throw out some lessons that I learned over the course of making the website.

Flexible Flexes

Honestly, two years is not that long for things to change so drastically.  But when I were a lad, we used classes with set percentage widths to do responsive design, we also walked up hill to work, both ways.  Instead I’ve begun to massively favour flexbox as my go-to for responsive design.  The functionality there is supreme in so many ways, the advantages over a set width column approach are things like:

• Changing the order of elements at different screen sizes, this is visible on our website on the service pages.
• Defining element widths and then using up the remaining width of the container to space these elements apart evenly and very aesthetically with disarmingly little effort.  This is everywhere on the new site.
• Vertical Alignment, praise be.  This was the problem that I used for my first “hackaround” in development when I couldn’t get two elements of different heights to occupy the same amount of space so that they could look equal and consistent no matter what content is in them.  Most notably used in the service index page.

That’s just a few things as well, there are more, more subtle things that would take longer to explain.  I haven’t strictly only started using flexbox for the Antelle site, but it felt good to be able to double down and use for responsiveness.  A big, big shoutout to Kerri, she was the one who introduced me to using Flexbox CSS Rules and it’s been so important for my confidence in designing a good website.

Razor Reuse

Umbraco is a bit foreign when you first start off, but once you’re in it and understand the cause and effect of changes on the front and back end it’s a pleasure to work with.  Utilising the power of .Net to help design an easily customisable website with practically limitless options for data delivery.  It creates an intuitive platform both for a customer to use, and for us to design for.  Making an Umbraco website for ourselves let’s us sort of unleash the fancy features and it’s so nice to know exactly what is needed and how it’s going to work.

Razor let’s data in the back end decide how much content is created on the front end without the manual busy work that a static, pure HTML website would entail.  On this blog I’ve talked at length about how not knowing something can hamstring you and reduce your productivity. It’s nice to say about Razor when used in conjunction with Umbraco that once it is learned, the only way is up as you learn ways to save yourself work with good planning and design.

In the past, earlier in my use of Umbraco.  I would have perhaps made more work for myself as opposed to now, having common design elements across the Umbraco back end means that I can reuse code as much as possible without deliberately reducing functionality.  Just for example, every single page on the Antelle website has functionality for the title of a page.  If the actual title of the page makes sense for browsing the content of our website but perhaps not for showing to browsing users, there is a single field common to every page in the back end that overrides that title.

The same code is on every template, a small piece of the page that means that we can name something that makes using the back end easier without sacrificing the ability to provide good content on our front end.  There are a few places where this logic has been used and the amount of time it saved for myself and for the company in completing the website overhaul has cumulatively felt really impressive.  It’s probably up there with the most competent and self-satisfying work I’ve done while working with Antelle.

Thank you for reading.

Ben Thrussell