I’ve built a lot of websites already; I started many years ago by writing the HTML, CSS, and JavaScript code by hand and publishing the pages by uploading all files to the server via FTP. Then I moved on to using a popular content management system (CMS) called WordPress (see happy eating or design architektur pfusterer—both sites were done in 2016). A few years ago I learned about static websites; so basically, I’m back to where I started but with a more complex setup and some tooling in place. The most recent projects I worked on are
- Feldenkraispraxis
- TimeSloth
- and websites for my music projects Lara Amalia and anders_chor.
Free website builders vs. handcrafted websites
Nowadays there are many website builder tools available that promise cheap and fast website development without any coding skills required. The valid question raised: Why should somebody pay (a lot of) money to get a website for their company or startup (or project, organization etc…) when there are much easier ways to bring your ideas online?
The short answer is: You can use any tool you find online—be it a free CMS with a fancy theme for one-off costs or a website builder—, create your own website without any tech knowledge, publish and host it for free, and it will be fine. For months or even years. However, there might be problems coming up down the road. There are (important) parts of a project a developer with many years of experience 👩💻 can do better than a free online tool.
How I work on website projects
Choosing scale as a partner for your website project means that you get a lot of knowledge and features out of the box. My websites are responsive by default, means they adapt to (almost) all available screen sizes and taking care of basic accessibility features is a given. Here’s how I usually approach website projects.
Communication is key
Every project starts and ends with communication; there’s also a lot of communication going on in between. Talking to clients, finding out their needs, explaining things, receiving and giving feedback takes up 15-20% of the total project time. And this is good. Getting to know the client and the project is important groundwork before I start drawing a sketch or writing a single line of code. Emails should be sent regularly to keep everyone updated. Phone calls are good to discuss features and find out what the requirements are. Friends and colleagues would probably describe me as talkative; that’s because I don’t think there’s such a thing as asking too many questions.
Content structure and design expectations
It’s great when the client can provide content for the website at the beginning of the project. It will come in handy when defining a content structure, navigation, and first design mockups. In a recent project I had to deal with the following chicken-egg 🐣 problem: I wanted to have content to base the design on, the client wanted to have a design first. It’s hard to design without any content at all, so I provided rough sketches how the homepage could look like, which sections could go where, and where to use images. The client liked it and started writing text based on the sketches while I was implementing the first content components.
One reason why this turned out to work well is because we had an extensive kick-off meeting where I got to know the client, their project and the website’s target audience. This way I could help with the content creation while finding a design that fits the content.
The experience was similar when working on feldenkraispraxis.at. As you can guess, Ulla and I are related, which made it easy for me to build the perfect content structure and design for the already third relaunch of this website.
User experience design for websites
I’m a fan of great user experience (UX) in web applications and websites. When building a website for with a client, I ask a lot of questions about the potential website users. With this in mind, I give supportive feedback about the navigation and the content structure, develop clean, decluttered designs, and take care of basic accessibility features.
When building a website without any tech skills (using a website builder) you probably don’t have too much knowledge about accessibility and performance. There’s a lot of things that can easily lead to the user having a bad experience. However, there are easy ways to fix these issues, assuming you know what you’re doing.
- Reducing image file sizes and providing different file sizes for different devices and screen sizes is crucial to avoid long loading times.
- The structure of content blocks as well as the resulting code is important for assistive technologies like screen readers.
- Decorative elements should be hidden from them and relevant non-text content (images, videos, icons) should always get a text description.
- When choosing colors for your design, certain tools can help to make sure these are accessible by a wide variety of people who have disabilities when it comes to color perception.
- Contact (and all other types of) forms can get messed up very easily. As one business goal of a website might be that a visitor enters data and contacts you, such forms should be easy to use and should not lead to frustrations.
Future-proof code quality
When I (as a developer) have a look at the code created by a website generator, I always hope that I’ll never have to touch it. I remember times when I tried to customize expensive WordPress themes for clients and couldn’t find a proper way to do it. I came up with a lot of !important keywords in my CSS code (for all non-developers: this is not a good thing to do 😉) and hoped that nobody would ever see it.
When I (as a developer) write code, I always have in mind that I might be the one who has to update it months or years later. Therefore, I always aim at writing as much code as needed but as little as possible; thus, I write code that’s readable and reusable. This has a positive impact on search engine optimization (SEO) and accessibility and leads to better performance (because less code means less data) as well—a win-win-win situation! 🎉
Sometimes I work a few hours and update the codebase without any visible changes to the website. During this time I update and refactor the code to make it more robust to future enhancements and requested changes that suddenly pop up on the way. A solid (code) setup that fits the current project often takes longer in the beginning, but will pay off later, when new features come up or existing features are in need of an update.
Individual design
Content management systems and website builder tools come with a wide variety of (customizable) themes, but sometimes you have special needs where even the most awesome tool reaches its limits. Furthermore, if everyone chooses one of the most popular themes available, all websites will start to look the same. An experienced developer with design skills (or a network including good designers) can create website designs tailored to the client’s needs and wishes and add individuality and personality. This is great if you want your website to stand out from the crowd.
For TimeSloth’s marketing website I did subtle animations for these cute sloth illustrations done by our friend Caroline Abl and created product illustrations to give the user a glimpse of the product without clutter the website with detailed screenshots.
(What is TimeSloth? Glad you asked… Felix’ blog post about the story behind TimeSloth has you covered. 😉)
You don’t always get what you wish for
When you as a client have definite ideas it can happen that in the end a part of the website will look different and is not what you wished for in the first place, but better. 😉 This is a result of me asking questions. Past website projects have taught me a lot about what works and what does not and trends, best practices and articles from the web community influence my opinion about certain features (which can change over time). The combination of clients’ ideas and my experience lead to great outcomes in the end.
Stay in control and get support on demand
Having a dedicated person building your website does not mean that you can’t do nothing at all by yourself. If the website setup allows it, you can edit text blocks, upload images, and more by yourself and you don’t have to pay a developer to manage your website content. On the other hand, when questions arise, there’s always somebody who can help you with problems.
Lessons learned
To sum up my thoughts about building websites, here are a few lessons I learned during the years:
- When I (as a developer) am interested in the website’s topic, communication with the client gets easier and I am more motivated for the project overall.
- Explaining the value of working with an experienced web developer compared to a free website builder tool helps justifying the price for a website.
- Communication during the project takes up more time than initially expected.
- Communication and keeping the client up-to-date prevents misunderstandings and requirements changing too frequently.
- Requirements always change during the project. Always.
- Refactoring code as soon as requirements change and avoiding “hacks” makes future updates easier to maintain for the developer and cheaper for the client in the end.
- After launching a new website, my clients have always been happy with the result. I like building websites from scratch every once in a while even if this means discussing many of the topics mentioned in this post yet again. 😊