Introduction
Preparation is the key to success, and web design is no exception in here. It’s crucial to manage the shit out of your new website project, or the entire operation will be a long, frustrating and tedious process. Believe me, I’ve been there more than I care for.
To avoid unnecessary frustration at any phase in the process, I’ve designed a workflow that significantly reduces the chance of the project going bananas. It’s a battletested workflow that divides the project into little chunks and takes them on one at a time. Don’t be fooled, I won’t be the only one at work here, creating a new website is a collaboration all the way from start to finish. If we eliminate all options of things going pear-shaped it will be fun all the way through though, I promise.
Structure & Methods
There are roughly two different approaches in designing your new website. Either you have little to no clue about what you would like in terms of design and we start from scratch, or you have consulted a graphic designer who has made you a custom static design. Each approach has its own workflow.
Converting your graphic Design into a functional design
Having a design available is of course a great start for creating a new website. This will limit the surprise factor throughout the process, resulting in less extensive revisions. Bear in mind that a functional design will always “look” different than a static design, because you only see one portion of the design in a single viewport, instead of the entire design as a whole.
When converting a graphic design into a functional design it’s important to talk about animations and user interaction early on in the process. It’s also important to see how the design reacts on different screen sizes, unless the designer has made device-specific designs for mobile and desktop.
If you have a static design ready to go and are looking for a developer who can turn your design into reality, feel free to contact me for a free consultation. We can go through your design together and discuss the various options and possibilities such as interaction, animations and transitions.
Starting your new website from scratch
When you develop a website from scratch it is important to have a good starting point before just pumping out some code. This starts with a briefing document that asks the right questions that make you think about the type of website you want, what the main purpose of your website is, what you would like your visitors to do on your website, etcetera.
I have you look at examples of existing websites to see what you like and don’t like, and what kind of structure and colors you prefer on your website. Of course, we will also look at your existing logo and corporate identity to see what matches that.
From there we start with an initial mock-up. This is a very basic prototype of your website so you have a clear understanding of what is happening on different pages. If the initial mockup is approved we can start the development phase.
Even when using a mock-up, things might turn out different than you were expecting. During the development phase I present various versions of the project, leaving plenty of options for revisions. The website is built on a local server, but new versions are pushed to a live test server so you can check it anywhere, anytime.
Depending on your websites needs I choose the right front-end framework for the job. Frameworks are like starting kits that get the development process up to speed. They already include basic styling and a grid system to speed up the workflow of building a great responsive website. Depending on your wishes I can use Bootstrap, UIKit or Foundation as a starting point, where the aim is of course to utilize as much of the out-of-the-box functionality as possible to reduce cost and gain speed.
As soon as we have the basic layout worked out on the homepage we move on to the other pages and functionality. Depending on the size of your website the entire process can take a couple of weeks upto a couple of months.
Creating a website is a collaborative project, where I rely on your input for content (text and images). To structure the process, I’ve developed a solid workflow that helps guide everyone involved. By using various tools I’ll make sure that you know exactly where we are and what input I need from you when, so you have 0 headaches throughout the process.
Intrigued? Feel free to reach out to me and discuss your project, I’m happy to schedule some time for a free consultation!
Responsive Webdesign
Mobile website traffic has risen again this year, and now accounts for more than 52% of all online traffic worldwide . 57% of consumers won’t recommend your business if it has a poorly designed mobile website . This means it is more important to have a smooth performance on mobile then it is on desktop.
I design websites from a mobile first point of view as much as possible, where we look at the content together and decide on the hierarchy of content in terms of importance. From this point we scale up as the screen size increases, resulting in a better performing website on all screensizes. Using this approach the codebase stays as clean as possible, we only load necessary resources and start loading more only if needed.
All websites I design are optimized for various screen sizes. No matter if you are a desktop or a mobile user, an Android or an Apple user, websites are designed to deliver consistently awesome user experience on all devices and all platforms.
Curious about this? Drop me a line and I will gladly go over this in more detail, as long as there's coffee involved...
SEO Optimization
With a background in Online Marketing I have a thorough understanding of the important factors to optimize a website for SEO. In the last couple of years Google has made some significant changes to it's algorithm, where content is getting more and more important. A couple of years ago web developers could still manipulate the algorithm by just using a couple of nifty coding tricks. This is no longer the case, and great content is definitely king in securing a top position in the Search Engine Result pages. However, the variables that were important a few years ago are still important today, as search engines need to have a good indication of what your content is about.
Other elements are also taken into consideration when ranking your website, such as the time it takes your website to load, the structure of your codebase and security while browsing your website. Each project is delivered with all these elements optimized, meaning not only all the right SEO meta-data, heading structure and alt-tags, but also performance and security.
If available at your hosting provider I will install an SSL certificate which will serve your website over a secure connection and will display the green lock next to your URL.
If you have any questions about any of this feel free to reach out.
Coding Standards
Technology changes rapidly and so do coding-standards. I work with the latest versions of programming languages for web. As a front-end developer that means I mainly work with the three pillars in web development: HTML, CSS and JavaScript.
HTML is used to build the framework, CSS is responsible for styling and JavaScript is used to create interactivity. Apart from these main three languages I use PHP as this is the programming language used by WordPress, and AJAX and various JavaScript Libraries such as jQuery to further enhance the functionality of your page.
You can rest assured that your project will be written in accordance with the most recent coding standards.
Want more geeky stuff? Hit me up and I’ll tell you all about it.
WordPress Development
Most clients prefer to have their website delivered in a Content Management System (CMS). My go-to platform is WordPress, which is a popular choice as it powers a staggering 30% of the web . The great advantage of using a CMS is that you’re easily able to create and edit content yourself, without any knowledge of coding or the risk of breaking any code.
WordPress has great resources and is constantly updated in terms of usability, performance, security and stability. We can use WordPress's extensive library of plugins to dramatically speed up our workflow by adding standardized blocks of coding functionality for things like eCommerce functionality, booking forms, contact forms etc.
Migration & Maintenance
Upon completion of the website it is time to migrate the website to your live server. After migration the website to your live server I optimize the server dependent variables, such as page-speed and security. For the first six months after completing your website I will update the technical aspects of your websites, which consists of the WordPress core, plugins and theme.
I check if there are any conflicts between existing code and updated plugins, and if all is clear update to the most recent and stable versions of the available software. After the initial 6 months I offer an extended maintenance contract tailored to your website.