Crafting a website, or how we rebuilt Thalassa’s online presence from the ground up

27/12/2017

Well, here it is, our brand new online face! We’re excited to finally be able to share with you our new web design, and in this first post I’d love to tell you a little bit about how we got through the process.

Creating a new website had been in our minds for quite a while. The problem was: who’s got time for that, because we have a resort to run after all. We also didn’t have the kind of budget to pay a professional design agency, so we decided to build our new site in-house, making sure we handled every phase of the project with adequate TLC, especially since we had to do it ourselves.

So how do you start building a site? Let’s break it down, shall we?

1. Content

Like every decent website, content is always king, so we needed a text rewrite to make sure our content is updated to reflect current times a little bit more. The old text wasn’t bad at all, but we felt we could optimize the text a little. The thing is, people don’t really read anymore, they just scan for the information they need, especially when they are asked to make decisions that concerns their willingness to part with their money (such as booking a holiday at your favorite dive resort)!

We created a content document that generally described the “flow” of the site, but also established a tone of voice to keep reader engaged. We decided to do away with long “walls of text”, and instead create text that is easier to digest to keep the bounce rate low. “Bounce rate” is an SEO term to describe how people show little to no interest in your website by leaving it immediately after visiting.

2. Wireframe

Before jumping straight into the production phase, we took time to find out how the content relates to the design. For this we created what’s called a wireframe, which is a very stripped down, non-functioning version of the website. It kind of looks like this:

Screenshot of website wireframe.

What you’re seeing is a very zoomed-out view of all webpages we think we needed to have, and put the text in all their respective places, including a lot of repeating elements such as navigation and footers.

Here’s a detailed view of part of the home page:

Screenshot of website wireframe homepage

 

The reason everything looks gray at this stage, is so that we could focus on how the content relates to the form, without the risk of graphics and colors “getting in the way” of stifling this process. This way, we could still shift things around before we started building the real site, and make sure everything fell into place logically.

3. Development

Now I had to start thinking on how to build this thing, and armed with a fairly good wireframe, I was quick to ignore today’s easier drag & drop website building solutions. I simply started coding this thing by hand.

Call me crazy, but the reasons for redesigning this website from scratch are varied.

For one, the site is really ours and none of it is owned by a media company who provides a “free” website when in reality, they just want you to buy their product.

Another big reason is to be able to access and tweak every aspect of the source code, which is crucial in the ever-changing digital landscape. By linking the website’s source code to a Version Control System, we also made sure we always have a backup as well as a revision history in case something goes wrong.

One thing about this site though, is that’s never really finished. I never intended to build it, and then say “here it is”, so over the course of the next months I’ll be constantly tweaking the site so it conforms better to WWW standards, as well as giving you a smoother user experience. Some improvements we’re planning to add are: multiple languages, restructuring the code for optimal mobile viewing, more visual tweaks and a lot more content!

Arjen


Arjen