Behind the scenes of a new website
An overview of the process. What's involved?
Creating a new website involves more than simply entering some code. We often hear the comment, "Isn't it just a matter of entering some code?" Well, no. Developing a Web site requires collaboration between a designer and a front-end developer, both with different responsibilities.
Let's take a look behind (or inside!) the scenes and discover what's involved. First, it's helpful to know that the web designer and the web developer perform the work of a website.
Web designers focus on the design, translating the client's requirements into a functional, uncluttered and user-friendly website with an appropriate design.
Web developers then take care of the front-end (the visible part) and the back-end (the functionality) of the website. They ensure that the web design is actually built and functions as a working website, using various frameworks and codes.
Step 1: Kick-off
The project team defines the goals and strategy for the website. Technical challenges, the amount of copy & content, multilingualism, setting up website sections for future campaigns, and more are discussed. Only after this coordination can the team get to work as planned.
Step 2: Website structure
To determine the navigation and content, a sitemap and/or a wireframe are created. This allows us to clearly indicate the structure to the client.
The sitemap created with the online tool Coggle, gives a tree structure of all parts of the website. You can also think of it as a mind map.
The wireframe, designed in Figma, is a visual blueprint that represents the skeleton of the website. For the client, it also shows what the header will look like and where the CTA (call-to-action) buttons will be located.
Step 3: Website launch
After design approval, the front-end developer gets to work. Domain name, web server with database, and Umbraco CMS are set up. Version control (GIT), uSkinned, and OTAP ensure an organized development environment.
- Domain name, the URL of your website. Example: ikwileenwebsite.nl. Sometimes you have a great name for your website in mind, but it is already taken. We can check this and if a name is not yet taken, we will immediately purchase it for you.
- Umbraco CMS is a Content Management System we use to edit and manage a web page. It is user-friendly and well secured. In this CMS you can easily maintain your website: edit texts or photos, change structure, etc.
- GIT is a version control system. Version control is the system in which changes in a file or group of files are tracked over time, so you can retrieve specific versions later.
- uSkinned is a theme framework with components that we use in conjunction with Umbraco. Think blocks for banners, CTAs, text, photo/video gallery, etc that are preset. uSkinned is a tool for front-end developers.
- OTAP stands for Development, Test, Acceptance and Production. Think of it as 4 separate websites. This is where we launch automated jobs and processes to update the website environments. The Development and Test servers we run internally and are not visible to the outside world. The Acceptance (test environment, only for the customer) and Production (live website, visible to everyone) servers run at an external hosting provider. Have we made changes internally that can be sent to you, the customer, for approval? Then we put this ready on the test environment. This OTAP street gives us an internal and external backup system and we can, for example, fix a bug in the development server without affecting the live website.
Step 4: Build the website
Through GIT, the basic Umbraco CMS is retrieved. With a custom theme from uSkinned, programmed in HTML/CSS and Javascript (mainly in Visual Studio and Visual Studio Code (VS Code), the website is built. The style guide is integrated, including corporate identity elements and all necessary components according to the design.
The front-end developer ensures that the complete styleguide, also known as the "kitchen sink," is integrated into the website. This means that all elements of the corporate identity are incorporated, such as colors, logos and fonts. In addition, all the necessary components are created, including headers, banners, CTAs, text blocks, and more. In short, everything the web designer has designed and established.
Once this is complete, it is time to set up the page templates according to the specifications in the sitemap or wireframe. At this point, exactly what the designer envisioned is built, and what website visitors will soon experience. Important to note: often these templates still contain temporary texts and images. This depends on who is responsible for placing the final texts and images: the client or our team.
Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \ Goals & Strategy \ Technical Challenges \ Copy & Content \
Step 5: CMS course
Optionally, the client can take a CMS course before the website is populated. During the course the client will learn how the Umbraco CMS works, how to edit texts, place images and videos, create pages, and more. We can fill and maintain this for you, but it is also an option that you do all or part of this yourself.
How fun and convenient is it to play an active role in filling your own website and then continue to make adjustments yourself after going live? During the course we will teach you the following:
- The operation of Umbraco CMS
- Adjusting texts
- Placing photos and videos
- Creating links
- Adding new pages
- Publishing news, projects and cases
- Customizing the menu
- Editing/viewing contact forms
- Implementing various components
- A brief explanation of what to look out for regarding SEO
Interested in participating in this course? Then contact us, we will be happy to help you!
Step 6: Fill content
The next step involves actually providing the website with text (copy) and images (content). This is often done by the front-end developer, but the client can also easily do this themselves in the Umbraco CMS. Filling in itself is not particularly complex, but it is often underestimated that this aspect simply takes a lot of time (depending on the size of the website, of course).
Which parts of the page always deserve a "double check"?
- Page name/message title
- Titles on the page
- Texts
- Images (if applicable)
- Call-to-action (CTA) blocks such as, for example, 'Contact us' or 'Call us'
- Links between pages
- SEO guidelines and keywords (if applicable)
Step 7: Going Live
Before going live, redirects are set up, and a thorough check takes place. 'Redirect' stands for redirect and this is a term used to indicate that a web page does nothing but redirect to another page. For example, if you search directly to a page that has already been removed, you will get an 'error' unless a redirect is set up that redirects an old URL to the updated page.
Then the entire website is re-checked against a checklist. Not only the person who built the website, but also a fellow developer checks, for example, functionality on various devices, different resolutions, speed, correct operation of contact forms, correct content, redirects, search functions, and more. Once everything is approved, the website goes live. Party!
It doesn't stop after delivery; there is ongoing hosting, monitoring, and maintenance to keep the website in top condition. Support is provided through various subscriptions. Read more about our hosting and SLA packages here. Not unimportantly, of course, we also offer support after this, for which we have several subscriptions. Do you encounter an error or would you like to have something adjusted? Then together we will always find the right solution.
Would you also like a new or adjusted website? Get in touch with us!
Contact
We would like to hear from you
Arne
Managing director and Co-Founder