I recently started becoming a freelancer in the tec-business. Like every eager businessman, I recognized, that I will need a website to succeed. Since I am too “proud” (or rather to stubborn) to just use a template from an arbitrary service, I found that I need a “special” theme for my page.
These are my learnings from creating and designing that theme with ‘state-of-the-art’ tools (html5,css,bootstrap4) :
Design and think beforehand
This seems like a no-brainer, but it is often overlooked. Grab a piece of paper and a pencil and start sketching. Throw things away and start again until you are satisfied. It is far too tempting to begin implementing a half-finished idea, which will lead to many hours of adjusting and not-good-enough results. In an age of mobile devices with far too many resolutions, this is truer than ever.
Write your content without the layout
If you are working on a CMS based thing like a blog, this is natural to some of us, but even for a small static website, it is crucial. First of all, it becomes easier to correct things if the text is written in a plain file instead of an html monster. Second, if you want to pass the content around to get fresh ideas on your text it is far more convenient to edit only text and images instead of the whole page.
Colors are important, but so is layout
No doubt, colors are king; especially if they were chosen properly (There are tons of tools online to help you with that, e.g. Paletton ) However, if you are not 100% sure if the designed layout is perfect, they can distract you from the obvious things. Your mind will start to wander and suddenly the topic of are those two colors an ideal match? becomes more important than the fact that 2 images are not aligned properly.
To fix this issue (the distraction, not the colors) apply a grayscale filter to the whole page. That way you can focus on the layout and you will get a Wow effect when removing the filter.
Scaling SVGs is not so easy
Vector graphics are simply great. No fuzz about the image resolution and serving multiple devices at ones, just content that will be shown properly. If everything works as planned, that is.
Without going too much into the details: Consider enough time when you want to use svgs (which you should!)
Do not forget print!
This is a criterion often ignored. Hence, you can use it to distinguish a good website from a great one! From a css-perspective, just use this:
@media print{ ... }
and start over. Frameworks like bootstrap makes it easy to separate print from non-print.
Do not over optimize
It is tempting to use speed-tools like Googe PageSpeed Insights and try to get the best score possible. However, this can be rather time-consuming when reaching the last 10%. Remember the 80⁄20 rule? This is such a case.
Found an error or you have something to comment? Drop me a line!