Theming for Wordpress
It's ok to use a readymade theme, but ...
Most themes out there have shiny demo-sites where everything fits well to together.
– The outstanding key-visual and messages are unique and intriguing.
– High class Icons underline the features of the product behind the site.
– Chosen fonts perfectly fit the overall nature of the site.
Its like in restaurants: the real food on you plate will not look as shiny and polished as the one of the menu-card.
No matter what WordPress theme you buy or even which page-builder-service like squarespace or wix you use: Sooner or later you will come to a point where you need an expert who is stripping all parts together.
This is what I do: Instead of providing a eye-candied theme, I bootstrap and configure WordPress for your needs, and this contains more than a shiny frontend.
Custom WordPress Systems tailored to your needs
An important part in Webdesign is to structure content and put it into well consumable chunks of information.
A CMS can support or hinder this process. Lets take one of these so called “Page Builders”. They give a lot of possibilities for structuring and arranging. When you are not an experienced user of these tools, you will get lost in the mass of possibilities to display your content.
Good Theming in combination with a customized CMS will provide you with a graspable set of options how to structure your content.
The trick here is to find right mixture of a solid design-framework and flexibility. A solid design-framework, supported by the CMS, helps structuring your content and supports consistency between pages and content-blocks.
Nowadays we do not have rigid page-templates anymore, but compose our pages out of different content-blocks. This is where custom post types, metablocks and Gutenberg-blocks come in.
In my point of view, speed in loading and displaying websites is one of the most positive user experience you can provide. Not only users honor speedy websites, but also search engines take it as a ranking criteria (at least for mobile search).
Instead of focusing on rather “standard” optimization techniques like minification of JS and CSS files, browser-caching or compression of transferred files, I would like to look look at responsive images.
Images usually take the most of data to be transferred when visiting a website. So its worth to optimize them in terms of visual quality and size. Serving the right image to your visitors screen is not a simple task and involves:
Responsive Images: Given the huge difference between a 30″-Desktop-Monitor and a 4″-mobile phone screen its required to serve different images sizes depending on screen-resolution.
Art-Directed-Images: Landscape or portrait screen orientation need different images, since they show a complete different view-port.
So, to have an outstanding user experience, we require “lazy loading, art-directed responsive images”. Its already hard for the mighty brain-interface to configure this properly and I do not know even one visual interface which is capable of doing all this. If you try to set all this up with a visual page-builder tool like Gutenberg or a plugin like “Visual Composer” you will probably fail.
My WordPress System all get green lights from google page speed insights and reach at least a score of 80%.
The gulp based SCSS to CSS processing is working well and fast, but I got annoyed by the slow JS build process used by zurb and switch to a webpacked based one.
Strictly – without consent from your user before the request – this is already a violation of the data-privacy of your visitors.
To prevent this I follow the policy: As long as possible, load all resources from your own web-host. If its necessary to load something from a third-party host (e.g. a youtube video) get consent of the visitor BEFORE doing so.
A cookie warning is not enough.