As is happens, my own projects sometimes get neglected because of family, other client projects or just some house duties. This was the case with my own foodblog delikatesy.sk.
The site is running from 2008 on WordPress and it still had version 3.1.3 installed together with a really dated theme. But I must say, with 900 posts and another 9.000 comments in the database it was running without any problems and none of the plugins was giving me headaches. Problems started, when the site was moved to a different server. It was hosted at my advertising partner Trend and after the server change a few things stopped working. First of all the homepage took ages to load. And I wasn’t getting any new site notifications. After some troubleshooting we’ve decided to move it back to my own server and also do a full redesign.
Here is a brief history, how the site looked like over the years:
March 2010
Shortly before 2016 redesign
Design process
That redesign was planed two years ago. Theme choice was really quick – I went with the default Twenty Fourteen from WordPress. But then the design process carried me away looking for “that perfect font”. With plenty of options out there it was really hard to get back to the drawing board and start designing the proper way. I’ve never done A-B testings or questionaires, but since my site is based on community and long term commenters I had enough quality feedback for where to take the site in terms of functionality. I definitely wanted to add a special section for really short posts or better statuses, that would show up only on the homepage. The old site had a calendar focused on gastronomy events, that had to be moved from the sidebar and made one of the highlights. And I wanted to make recipes more usable even without special plugins. You would be surprised how many well known cooking sites produce crap, when you try to print their recipes. But there are also good things around, like a dedicated “cooking mode” made for tablets. It is sometimes hard to follow a recipe while cooking and scrolling between list of ingredients and instructions. With a single button everything from the site is hidden, leaving you only with the recipe. That featured I wanted to have and it was easier to implement than I first thought.
Cooking mode button
From the design point of view, the whole process was mostly about taking out rubbish. Pattern background was gone, but for continuity I’ve kept the brown color for some special areas and the footer. The “content-sidebar” setup hasn’t changed, but I’ve decided to widen the content area after there is usually nothing in the sidebar and you are left with tons of whitespace. Some solve it with a “fixed-after-scrolling” sidebars, I’ve decided to show bigger photos and more content on the homepage as well as on single posts. The overall design is more or less minimal and without any graphics, so that gave me a chance to drop in one special section, that had really colorfull backgrounds. It is a “in season” box, that is checking the current season and changes colors accordingly. From the functional side it is a widget where I pick tags of seasonal ingredients, which are showed in random order. This way I can utilize all the 900 posts I have written over the 8 years and give some inspiration to people on some seasonal recipes.
When speaking of years, a small detail like post and comment dates are probably the most important part of my content. People sometimes comment on really old articles not realizing that they are 4-5 year old. Or they react to other peoples comments that are equally old. To help them better navigate in time I’ve changed to the so called human diff time, which doesn’t show the date, but how far back the post was published (24th of June 2009 vs. 7 years ago). Some areas still keep the date in the regular format though.
Delikatesy.sk on mobiles:
Rest of the design process was about taking care of mobiles and tablets. Before I had WP Touch installed. It was a really basic option, but it worked. With a new responsive theme it was gone, but new problems arose. Some icon fonts were not displaying properly, content was bleeding out and the site was slow to load. All of my problems came to a solution, when the decision was made to move it back to my server. That was when the design process had to stop and I had to do a technical job.
Updating a really dated WordPress installation
Like I said, the database was holding 900 posts and 9.000 comments. Plus some posts revisions and old data from uninstalled plugins. As a result I was left with a 142MB SQL database. The first step was to get rid of post revisions and cutting them to only 2 per post. That already helped a bit so I could proceed to the next step – bring 3.1.3 to 4.4.3. You just can’t make such a huge step with one single installation. So I’ve gradually updated the system in 9 steps, updating the database each time. After that everything seem to be fine, which was a relief. Next on the list was taking out rubbish again. I’ve got rid of all the old plugin data and settings and optimizing the database. In that time it was 64MB big and when I was finished it went all the way down to 25MB.
My biggest headache were photos in posts. Resizing them to fit into the new design was fine. But all of them had width and height set in their HTML tags. So I had to do a search and replace using regex on around 3.500 images. Even that step went fine so I could move onto installing all plugins from scratch. I’ve only added the ones I’ve really needed and those, which were lightweight. For dead simple functions and modifications I’ve rather used functions.php in my theme and made the adjustments there. Good thing is that some of the plugins add multiple functions, like the FV Player, which plays videos but also adds lightbox.
Another huge chunk were translations. There are a lot of great plugins out there – if your site is in English, that is. But some of the plugins don’t even count with internationalization, not to speak of half done translations. I’m speaking of Event Organizer and some other plugins too. So after being a designer and programmer now I had to switch coats again and become a translator too. But that’s fine, I actually am a translator for the moment, getting a coffee encyclopaedia called Coffee Obsession to Slovak. After that is done, I might actually contribute to some plugin translations.
Assembling tech and design
Database cleaned up, using one of the latest WordPress versions, all plugins up to date. Next step was site testing using all different tools. First of all a HTML validator from W3C. Then tools.pingdom.com to check how much stuff and how fast it’s loaded. Even with ads the homepage has only 48 requests and takes around 2 seconds to load from EU countries, which is the majority of my visitors. Not bad at all. My final check was made on Google Pagespeed Insights, really helpfull for mobiles. Here are some numbers:
Old site
Desktop 68/100 points
Mobile 60/100 points
New site
Desktop 85/100
Mobile 71/100
After some finetuning
Desktop 81/100
Mobile 74/100 (+ user experience 99/100)
Google was still whinging about not minifying my CSS and JS. When I’ve tried that, the scores were even worst. I might work a bit more on the mobile version, but there is certainly a limit to those numbers. You can’t get 100 points and have all the functions you’d like to have. Right now most of the issues are related to ads, so I have to speak to my ad network and find ways how to load banners faster.
Btw… want to see one extreme scenario? Try to load your site on Opera Mini with an old Nokia C2-01. If your site is still usable, you can congratulate yourself…
How I’ve made the site this fast?
Well, most of my design problems were solved by the fact I had to play with my advertising partner. There also adding their thin stripe of network links to the very top of the site. It might come as a burden, because you have to load all their fonts and image sprites, but I’ve made an advantage out of it. Suddenly also my design problems were gone. Since I was loading Open Sans for them, I’ve used it on my site too, but with extreme versions – thin and super bold. I’ve mentioned, that some icons were broken on mobiles. So instead of using icon fonts for the mobile menu and search loupe I’ve taken the already loaded image sprite. Although I might adjust it a bit more for devices with Retina screens. This way the icons are loaded safe and on all devices. And of course, everything I could move to my own server and not load from external resources was a bonus.
I ended up even using some of their scripts, for instance mobile detection. With that I’m hiding some of the content on mobiles or simply load smaller image sizes. Although this feature is already built into WordPress with srcset.
Final word
If you happen to be pushing a really old WordPress site in front of you, your biggest problem is probably fear. Leave it to the fearful ones and just get the job done. You need to take the time, even if it’s one hour a day. Then patience and breaking the process into several logical steps. I was preparing the redesign for a couple of years, but it was only the last month I was really pushed by that sudden server change to make it really happen. When you start with it, you will learn tons of new stuff you can use later on. I’m pretty sure the site was launched with a few glitches, but they’ll be ironed out on the go. Being your own client is always hard, but if you focus on your visitor experience (which you should do anyway), it will help to fight all that emotional baggage that comes with doing something very personal. Your site IS personal and if you do that much design and technical work on it, there is enough of you in it already.
Of course, this all would not be possible, if I wouldn’t have some previous experience with web-development as a CSS designer at Foliovision. Good thing is I didn’t have to bother any of my colleagues for help, but on the other hand, using some of our company plugins actively on my personal foodblog helped me find and report a few bugs back at the office.
