JoepEijkemans.nl
This website was one of those projects that was a long time coming. I believe that if I am trying to promote and sell my services, which include Web Design & Development, that I should have something to show my competence. In this line of work, a nice business card or LinkedIn profile isn’t going to cut it. So I decided to build this website instead. I've had this idea for a long time. Initially, I was planning to take a gap year between my Bachelor and Master to make this website, as well as to take online courses in Web Development languages (HTML, XHTML, CSS, PHP, JavaScript, jQuery, NodeJS & Bootstrap). I also wanted to work, preferably 2 – 3 days a week. I really wanted to transform from student to competent employee. This plan didn't work out in the end. But just one quarter into my Master, I was asked to do the Boerenkerkhof AR project. I considered this as an alternative to a job and decided to do this besides by study. I would only do 10 EC per module instead of 15. So, I had time to do this project, as well as the previously mentioned online courses and build this website.
One-Page Layout
I had a lot of ideas and wishes for this website. A lot of the processes that I wanted to implement are present right now but probably invisible or unnoticeable if you do not pay too much attention to them. At the time of writing this article, the website is still under heavy maintenance, so some of the items on my list aren’t implemented yet, but will be soon. A design style that I really like is the one-page layout. It is sort-of a fashion trend in Web Design right now, but I enjoy it nevertheless. I really wanted to use this style for my website as well. You can see this very clearly at the design of the homepage. The one-page layout I originally had planned was meant to give a friendly, human impression. My website would be divided into different sections, just like it is right now. The sections followed each other in a logical order. Every section title would be posed as a question:
- Landing page (masthead)
- Who am I?
- What things can I do?
- What things have I done?
- What inspires me?
- How can you reach me?
- Footer
You can still see this same division in my current website. It starts out with a nice landing page (a so-called masthead). This page welcomes you and the website makes a nice and professional first impression. To make it a bit more personal, I made it say "Welcome back" instead of "Welcome" if you've visited this page more than once (Delete your cookies and it will be 'Welcome' again). Then there's the "About" ("Who am I?") section, the "Services" section ("What things can I do?"), the "Portfolio" & "CV" sections ("What things have I done?"), and finally the "Contact" section ("How can you reach me?"). You might notice that I skip the "What inspires me?" section. This is because I decided that it was too personal and informal and not professional enough. Also, a lot of my inspirations can be deducted from the tons of projects listed in the "Portfolio" section. But, although I made some slight tweaks and changes, the one-page layout remained the very basis of my design.
Cutting loading times
A one-page layout does mean that your website will load more slowly, since it needs to load a lot of information at once, even if you're only searching for a small part of that. For this reason, as well as for others, I used image URLs for my portfolio project thumbnails instead of images from my file directory. This means that if you clear your cache for this website, the images will remain cached and the site will still load fast and smoothly.
Another thing I, and most other web developers, do to cut down on loading times, as well as to increase the ease with which I can edit my website, is to make each page consist of multiple puzzle pieces. The navigation bar, for example, is the same on every page. It's actually a separate file which is referenced to by each individual page. This means that after you've visited a single page, the navigation bar won't have to load for any of the following pages. It also allows me to edit the navigation bar at one place, rather than having to adjust every single webpage. Using a practice like this cuts down on loading times and overall required server storage, whilst increasing ease of editing.
I also wanted to be able to easily update my website. For example, adding a new project to my portfolio. That's why all of the portfolio projects are loaded via a database, rather than just a file server. Every project still has their own webpage, but I can easily upload a new project. This is mainly because I am lazy, and I fear that if I don't make this easy for myself, I will forget to regularly upload projects. I designed it as such that every project has a short description, which becomes visible as you hover over the thumbnail. This description is also your introduction (in the masthead) if you go to the webpage for this project. One more thing that I want this website to have is proper ErrorDocs. This website is bulking with CSS and Bootstrap, but as soon as you click a dead link, or misspel an URL, you see this ugly error message. I want to have a page, in style with the rest of the website, that gives messages like "Coming soon" or "This page doesn't exist". I think this is more professional and polite.
Findability & SEO
Findability (the ease with which one can find this website) is of course very important for a website like this. I use different techniques to increase the findability. Most of these techniques originate from a field called Search Engine Optimization, or SEO for short. I'll quickly describe some basic ones, but I won't go into too much depth because, well, this is one of the things I do for a living, so it's probably unwise to share all my tips & tricks. I use specific keywords in my meta-data for each webpage, as well as in the regular text. Search Engines like Google use these keywords, as well as words from e.g. title or header elements to give the best search results. Naturally, keywords like 'Web Design' won't do much for me. I use more rarely-used, but still relevant, keywords. Google then notices that people who access your site via these words do find results and you slowly earn Google's trust and the right to use more popular keywords. I reference my website via other websites. For example: My LinkedIn links to this website. This does not only increase the amount of visitors and the amount of routes that lead to my website, the amount of external sites that link to your website is used by Google and other Search Engines to determine how trustworthy your website is. I've indexed myself by Google, meaning that I've given them permission to use my website as a search result. This isn't necessarily required I believe, but Google prefers indexed search results over non-indexed results. The longer you've been indexed, the more trustworthy Google thinks you are. I also use Google Analytics to monitor the behavior of people on my website. That means that I can see exactly how many people visit which page, at what time, for how long, from which country, etc. I can use this information to detect the parts of my website that receive the most attention from visitors and should therefore also receive the most attention from me.
I use SSL (Secure Socket Layer) encryption. This is one of the main reasons that I've stopped hosting from my own server, since an SSL certificate is more expensive for home servers. An SSL certificate means that all the data traffic via my website is encrypted and, thus, safe. This means that my website uses HTTPS rather than HTTP. It's also what causes the padlock in the left of your URL bar. I've actually made it impossible to access my website via regular HTTP. Even if you try to go to http://www.joepeijkemans.nl, my website will take you to https://www.joepeijkemans.nl.
If you don't have an SSL certificate, Google Chrome will give a notification "Not Secure" instead of a padlock. Although for most websites, this isn’t a problem, since you do not send sensitive data like passwords or credit card info via these sites, it doesn’t come across as being very trustworthy. And since a few years, Google has been using the presence of an SSL certificate as a ranking criterion as well. Lastly, I use Crawler software to see how my website performs. This is software that imitates Search Engines and gives feedback on how to improve your website to optimize it for Search Engine Findability. Popular Crawler software includes programs like SiteLiner and Screaming Frog. If you wish to learn more about the design and development of this website, or have me build a (similar) website for you, please contact me.