The thumbnail is decorative. In the centre of the thumbnail is the image of a wall going up in the shape of a house. A blue card with Logical Developments logo in the top left corner on a white background. The Logical Developments logo is a diamond with the letters L and D inside of it. The letters are offset from each other vertically while also overlapping horizontally. The each sit inside of their own rectangle. The thumbnail has the title, Design to Deployment: Rebuilding our Digital Home, printed on it and centre aligned along the bottom.

Design to Deployment: Rebuilding our Digital Home

Aaron Muilne - Nov 27, 2020

How many times have you had this conversation? “Are you on Facebook? Did you see what happened over on Twitter? Check out the latest Tiktok!” Or perhaps you’ve read for the umpteenth time, “the key to a successful business is to be on and across social media”. These are the questions we have been dealing with over the last year and a half. Compounding these questions was a website slowly ageing out in the background.

Better get onto it then! Here we are, a Custom Software company, slowly falling behind on the current trends. A few years ago, we decided that it was time to change that and began to build a presence on Facebook and LinkedIn. Roughly a year ago, we updated all of our branding (with a few iterations in quick succession) and expanded onto Twitter. While this is all well and good, our website wasn’t getting the same attention.

Trends over the last ten years, depending on your take, place a heavy emphasis on having a brand presence on social media. This is so that audiences and customers (new and returning) can be easily reached thanks to scheduling and analytical tools readily supplied by the platform. The issue though is that the advice isn’t to just be on the social media, but to build your brand/company on them – the logic goes, social media is easy to get on, it’s something you’re already familiar with because you likely have a personal account on it and it’s where the people are. It’s an appeal to accessibility, no coding (or special knowledge) required.

Problematically social media thrives on attention – anything to keep you there longer – which means everything is distracting! From ads to notifications, it takes a lot to get noticed and a lot of work to stay ahead of the algorithm. Attention is where the issue lies. It takes a lot of time, work and attention from us to keep your attention and if we spend that on social media it’s building someone else’s business. While we exist to create business solutions, that isn’t what we had in mind. We decided to address that by rebuilding our website from scratch.

Continuing in a similar vein, pulling on desires for control and creative freedom, there has recently been a pull back towards personal websites – whether they’re for start-ups or for a blog. Ads for website builders such as Wix, Squarespace or the various tools and plugins for WordPress have started to appear. Each have a strong emphasis on ease-of-use while being creatively liberating, and more anecdotally, being more authentic.

Why have a website in the first place? We want social media to be a tool, not the foundation for our business. It requires a lot of attention and is ultimately building someone else’s business. The same can be said for making use of Google. They make tools which are great at what they do – but that’s not the basis to build a platform. Perhaps counter-intuitively, a lot of our business is still generated from word of mouth. It’s much easier to direct someone to our website than it is to funnel them to our social channels, making them dig through the myriad of content to find what they might want. Website referrals are a more streamline experience, with less distractions. We want to be able to direct people straight to what they’re looking for. For bonus points, should something go wrong, we can fix it! It’s up to us to fix it, not merely petition for a fix.

Starting in March (though arguably earlier), we began work to overhaul our slice of the internet at logicaldevelopments.com.au. Previously, our site was built using an old version of WordPress with an old template, that we hosted. After lots of researching we found that WordPress wasn’t a good fit for us anymore, and for a similar amount of effort we were putting in, we could build a website from scratch. This became an increasingly appealing option because it was something new and different, and the possibilities began springing to mind for projects that we could do in the future as they become relevant.

Beginning with design, rough sketches were drawn up. As a company, we asked the questions – what did we like from the old site verses what we didn’t. How is content to be laid out, what made sense to go where? Based on those conversations, I made some rough sketches to help everyone visualise what it is we wanted. From there, I moved on to creating the basic wire-frames. After a learning curve in Adobe XD, I got the wire-frames drawn up, turning them into a prototype to test the basic functions of the website – what will the basic flows be, where will users expect to be able to click through? After a few rounds of internal testing and feedback, I moved onto higher fidelity wire-frames. This would give us a decent sense of how our content would inform our design and vice-versa.

It was a lot of fun diving into the colour tools that Adobe leaves at the user’s disposal and certainly helped get the colour scheme down for the website. With the colours chosen and the content was laid out, and dressed up it was time to start coding!

Development took a couple of starts. Websites are built, with some variation, on a foundation of HTML (HyperText Markup Language) – HTML tells web browsers what to display. While HTML is ‘just a markup language’- it still takes a little getting used to. It has its own set of rules and semantics (that is, set of best practices). The phrase, “What am I looking for, it’s on the tip of my tongue”, took up a lot of room in my head as I tried to look up better ways to write the HTML (and I’ve learned a few better ways since too).

With the foundation laid, it was time to move onto decoration. This is where CSS (Cascading Style Sheets) come in. CSS is how websites get dressed up to look good, and is one of the ways that the internet is made responsive – that is, made to work on all different screens. By design, it operates differently to other languages, and is more complex than it might appear at first.

Once I got somewhat on top of that (but still with plenty to learn), progress came more readily. To begin with, it was bloated and confusing – it was all very hacked together, but as I spent time reading around and learning, I refactored the code and cut it down making it work more consistently. I still have a lot to learn, and plan to do another major refactoring!

At the time of writing our site, barring the news section, is static – nothing drastically changes, but we wanted to be able to handle users and post articles straight to the website from the website á la WordPress. The goal is to make content creation accessible to more people in the office, not just to the coders. This means it was time to bust out the server scripting! By implementing server-side scripting, we can make use of databases to store information and have the server generate new pages as we need them.

Like a lot of web technologies, getting started is simple enough, but gets complicated fairly quickly. Thankfully, Paul was familiar with the CodeIgniter framework, so we got started using that. The advantage of doing that meant that we could recycle some of Paul’s old code that was handling very similar tasks, greatly speeding up parts of the back-end development. Once that was all done, it was time to go live! It took a few weeks, only because we all wanted to be in the office, be able to give it our full attention and it not be 3pm on a Friday, so that we could iron out any issues that came up once we flipped the switch.

The website is live now, which is where you’re reading this! The next step is to catch all the typos, tighten up the code a bit and then start planning what it is that we want to do next. We have a few ideas, but if they go ahead or not really depends on what our users want and need. Please be in touch! Message us across our socials or get in touch by email. We’re excited to see what we can do.


Update! Wow, a lot has happened since this went up! Since then, I (Aaron) have taken a couple more courses to help shape and improve my skill set. Now, the website no long relies on a PHP server or CodeIgnighter, but instead is built on Node.js for all our server side needs. Node makes it easy to roll in libraries as needed which allows us to focus on what we're good at. Hopefully you'll have noticed that the website has had another another facelift, and is more inline with what is seen across our social media! This update has taken so long that it itself has undergone changes as I've learnt more about what is achievable. On that note, I've found the e-book Every-Layout invaluable as I look for ways to augment everything whether that's slimming the code base or making everything just a little more robust.