Your website content and Masterchef

Masterchef is a TV cooking show we love and have been watching for years. One evening, while I was watching it and at the same time thinking about a new website we had taken on at web-mate, I realised how much cooking has in common with building a website. I thought about how the ingredients in cooking relate to the text and photos on a website or an e-shop.

Cooking and website development

In cooking, and in Masterchef in particular, contestants have to create a dish, or they create one, based on the ingredients they have. In other words, if they are given tomato, cucumber and feta, they cannot make roast chicken with potatoes. They are far more likely to make a Greek salad.

When building a website, we also need to work out from the start what we want to build, based on the ingredients we have. So what are these ingredients?

• The format and shape of the logo
• The colours of the brand’s corporate identity
• The sector the brand operates in
• The text we will be given or will write
• The photos we have
• Which pages we want to create and what they will contain (home, contact, company etc.)

Based on the above, it makes no sense to create a blog section on a website when we know from the outset that the client will not keep it updated. Or, to put it even more simply, there is no point creating a home page full of text when the client has given us a two-paragraph Word document for the whole site and does not want to pay a copywriter.

With a website, just as when we cook a meal, we need to see from the start which ingredients we have and do the “cooking” based on them. You cannot build a site whose main design asset is photography when the client only has photos taken on a mobile phone!

Requirements analysis in website development

So the first step we take at web-mate when we meet a prospective client is to ask what ingredients they have, or what ingredients they are prepared to buy. Most people we meet tell us what they want their site or e-shop to look like, without first checking whether they can have matching material.

Always keeping this in mind, our questions focus on what material someone wants to present on their website, rather than on how they want it to look. Of course we will ask how they would like the website to look, so we get the look and feel. And of course we will ask who their main competitors are, but always once we know exactly what they can give us or what they want us to create.

It is our job, and that is why the client chose us: so that we create the site based on our experience and knowledge, instead of them doing it. If the website fails functionally in the end, the mistake will be ours, for trying to cook steaks with lentils.

Requirements analysis is the most important step for a site

Requirements analysis is a crucial step for a website, and the most important one, because if we know exactly which pages the client wants to build, what they want them to contain and, finally, what material they will supply for them, then in all likelihood the result will be right and look good.

An article I understood three years later

In 2013 I read an article that I did not understand at the time and only understood three years later. It was written on the well-known website https://css-tricks.com by the equally well-known Chris Coyier.

The article said that before we design any page, or even think about its layout, we should look at the text and photos we have. To be precise, it said we should look at how much text we have and how our photos are laid out (that is, landscape or portrait).

At the time, the prevailing idea was to design with the familiar lorem ipsum and then write the text to fit what had been built. Most people worked that way, so naturally the design failed in the end, because they did not have the real photos and the real text: to achieve the design, money had to be spent on photography and copywriting, which the client usually did not have.

Chris Coyier’s revolutionary view was that we should have the material first and design based on it, and that way the design will never fail.

The menu example

So as not to limit this to text and photos, in that article the author talked about the menu of a website, because having 5 items in a menu is different from having 10. With 10, the menu has to fit on one line, otherwise it will have to break and switch to the mobile-friendly version very early.

So it is important to have the material, as mentioned above, and also to know in general how many pages we want to create, based on the goal.

The ingredients of an e-shop

Since we have mainly been talking about websites, it makes sense to mention the ingredients of an e-shop too. In an online shop, the ingredients start with having the product categories from the outset, the way the client thinks of them. Of course, the right categorisation and guidance should always be there, provided by whoever builds the e-shop. Once you have the categories, it is much easier to plan the shop’s menu and decide whether you need a mega menu.

Another ingredient you need to create or design something properly is the products. With dummy products you will never understand the client’s needs. With a decent number of products, say 30, you can understand both the needs and what you have to do in the design. Is the product title one, two or three lines long? Are the photos portrait or square? These and many other questions will lead the developer to the right decisions.

Raw materials in cooking and website development

You will often have heard people on Masterchef, and great chefs elsewhere too, analysing and talking about the importance of raw materials and how they should be of high quality.

The same goes for creating a website: if we want it to be top quality, we need top-quality ingredients. We need professional-level photography that suits the profile and type of business. We need text whose tone and terminology match the persona the business is speaking to. And finally, we need a design that serves the goal the client has set.

Have your ingredients before you cook or build a website

Whether you want to go to an agency to have your website or e-shop built, or you are a web developer, you should never start building without first having the ingredients and first agreeing exactly which “dish” you will make based on them.

Would you ever start cooking without knowing what you want to make and without having the ingredients for it? Would you cook with missing ingredients or poor-quality ones?