News, web design articles, web design tips & tricks archive

At kc web design kent we’ve become obsessed with getting WordPress to work at peak performance over the last few months so we thought it would be good to document some of things we’ve been doing to increase WordPress performance and reduce loading times. Not all of these things work on all servers and you may get different millage out of some but they’re all worth a try and a look at the principles behind them. First off, lets look at the server…

Server optimisation

The first thing to look at is the server and with htaccess files enabled there are a few tricks that we can use to speed things up. A great place to look at advanced htaccess rules is the brilliant HTML5 Boilerplate but it can get quite complex. To start with lets just tackle the major ones.

GZIP and Deflate

Compression is very important and can speed up your WordPress site a considerable amount. Check if either of these modules are installed for Apache or just add the code for both into your htaccess file. Here’s an example for deflate. Please note the mod_filter wrapper around this code, if you don’t have the filter module enable in Apache then this won’t work so check its installed or in later versions of Apache just remove these wrapper tags.

<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/x-javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/x-httpd-php \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/javascript \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule> 

EXPIRES CACHING

Setting the cache expiry means the server won’t be dishing out new files with every page request which will speed things up for the user. Make sure to set the limits at a realistic level and if you site is always changing then set them shorter. If it never changes then set them longer!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Set keep-alive’s

When you run Googles Pagespeed tests – which you really should be doing – it sometimes alerts you to keep alives. This is to do with the server keep connections open while serving all the files and not closing the connection after each file is served. If you’re serving lots of small files then closing and opening new connections each time can slow things down. To keep connections open you can add this to the htaccess file.

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule

Memory limits

WordPress can be power hungry at times. We’ve had instances at kc web design kent where a new VPS with only 256 memory was struggling with a basic WordPress site. If you can, go for more memory on your server and then change the default memory allocation for WordPress by adding this in the htaccess file.

php_value memory_limit 128M php_value upload_max_filesize 20M php_value post_max_size 20M

There are many, many more things you can do with a htaccess file but these will make a big difference on the speed and performance of you WordPress site and should be done on all installations.

WordPress optimisations

When using WordPress it’s important to know what it’s limits are and how it works on a server. We’ve already mentioned that it can be quite power hungry so just throwing any old template on it for a professional website isn’t always the best idea.

When creating your won WordPress web design theme for a client try and limit the amount of database calls you use to pull out paths to CSS and JS files and reduce the amount of queries. When using a bought theme check its not one that gives you endless options for this frontage or 3 different shop systems or endless page layouts as these will significantly increase the amount of data pulls on the site even if you’re not using half of what available in the theme. You can trim things down by removing php paths and hard coding things.

Another area to be watchful of is plugins. They can add lots of files and weight to a page that you just don’t know about. If you can do it yourself with code you know in the theme files then thats the way I would go first. If you do need a plugin then try a few out, read reviews and forums and test on a dev platform first before using on a live site.

Be careful of render blocking elements. Google Pagespeed loves this one and its always cropping up, especially on WordPress sites. Render blocking elements are CSS or mainly JS code in the head of a page that prevents the rest of the page loading and working before these files have loaded themselves. Jquery is the main culprit and some WordPress plugins like to stick a lot of code in the head so watch out for those. These days its good practice to put all JS in the footer to avoid this problem. If you have to put scripts in the head you can add this little bit of PHP code just before you body tag to help ease the problem…

<?php flush(); // http://developer.yahoo.com/performance/rules.html#flush ?>

And lastly, minify all HTML/CSS/JS and use a caching plugin such as WP Super Cache to speed up serving pages to users. After you change any of these points above check on Google Pagespeed for improvements and keep optimising until you get a good score.

Oh, and one more thing, you could also use a CDN service like Cloudflare to server all you static files. We used it on kc web design kent as a test and saw some big improvements.

I came across Dash – The API Documentation Browser and Code Snippet Manager for OSX – in a tweet the other day and thought it sounded interesting and maybe useful at kc web design kent. At kc web design we work a lot with html, css, WordPress, Expression Engine and all sorts of other code bases like PHP, Jquery, etc at kc web design kent and when forgetting syntax or functions it’s a case of using Google or Stack Overflow to refresh your memory. When I’m using Coda I sometimes use the books to lookup syntax while I’m coding but they don’t always cover everything you need and don’t have the full documentation for things such as WordPress or Expression Engine which we use a lot at kc web design kent.

Dash is a desktop app for the Mac that gives you access to a searchable, offline selection of over 80 API’s. You can download just the ones you need, search for specific words in all documentation and even store your own code snippets and make your own searchable documents. It sits nicely in the menu bar at the top and hides away until you need it. One really nice feature in Dash is when you search it also searches google and Stack Overflow so if it doesn’t find an answer for you in the API documentation then you have the option to see whats there as well. After testing Dash while doing a bit of WordPress dev the other day at kc web design kent I found it extremely useful. It doesn’t always give you what you need when searching but it does make it very easy to look through the documentation without having to search through online codecs and docs.

I’m not sure how useful the snippet manager will be at kc web design – I tend to store all my code snippets directly in Coda so they’re right where I need them – but it could be good for storing large chunks of code for templates and themes.

And, as I’m writing this I’ve just had a notification window pop-up to tell me the WordPress 3.7.1 docs have been updated so it looks like it updates all docs in the background. Bonus!

Recently, while sifting through Google Analytics data, I noticed that page load times on this particular website design were over 10 secs. This is a long time for a page to load and well over the recommended times. Google uses page speed as a metric now and so slow page load times could have an impact on search listings so having a fast website design is important.

After optimising javascript loading and images as much as possible the website design was still loading quite slowly. To begin with it seemed like the issue could be with WordPress but after a few tests it looked like static html pages were loading very quickly but php files were not. Could this be a server issue? I contacted the hosting company but they seemed to think the load times were ok which could have been a symptom of me being in the UK but the website being hosted in the US. The hosting company didn’t seem to think that would be a problem though so I looked at the website design files and tried to optimise some more. There’s only so much you can do with a website design to optimise speed and everything possible had been done including minifying CSS/JS/HTML, optimising script loading and images, reducing plugins in WordPress, etc. One plugin issue I did come across was the WordPress super cache plugin seemed to be increasing the initial load times so I swapped this for the ‘Quick Cache’ plugin which seemed to make a difference. While looking at the load times in detail it was obvious that the biggest lag was the initial ‘time to load’ which is the time it takes for the server to issue its first response back to the browser. Some of these times for this website design were over 4 secs which seemed a long time to me. With no more help from the hosting company it was time to look at other options.

I cam across an article talking about CDN delivery systems for whole websites which I thought might be worth looking at. CDN’s are well know for serving images and external javascript files but less so for serving whole websites. Cloudflare looked like a very interesting system and with a free account for 1 website it’s easy to test. Essentially, what Cloudflare does is take your DNS and route it through Cloudflare first where it stores cached files of your website. You have full control over all the speed settings and there’s the added bonus of security threat detection as well which they filter out before anything hits your non-cahced pages in your website design. Its a bit scary swapping nameservers and DNS settings but Cloudflare make the process very easy and within 24 hrs my website design was being severed by Cloudflare.

Did it make a difference? Yes, quite a big difference actually. Page load times are now down below 4 secs for the quite large homepage design and much less for the internal pages. For a free service its actually very good and well worth testing out. I’ll keep an eye on my Google stats over the next few weeks to see if average page load times start to come down and hopefully search rankings will go up as well.

While developing a series of websites using the great Woocommerce for WordPress the development process we’re using at kc web design kent meant we needed to make copies of existing website designs and then redevelop them into new websites. Part of the process we went through at kc web design kent was changing the design and then adding a different set of products but to do this we first have to delete the existing ones. Adding products in Woocommerce is made very easy with the CSV import suite and updating existing products using a merge CSV import but there is no easy way to delete all products, especially when there are thousands of them. A nice feature in Woocommerce would be a way to bulk delete products but until that appears in the core or until someone makes a plugin the only way to delete products on-mass is to do it directly on the database.

Working directly on the database is always a bit scary, especially if you don’t know MySQL syntax and how to write complicated queries. Because of the way Woocommerce uses posts to store product data and the fact that products can have variations and custom post types, it can make it very difficult to know where all the data is stored. Woocommerce spreads the product data across posts, terms, taxonomies, term_relationships and post meta which makes things tricky if you want to do it in a visual SQL client. The best way is to use a few SQL queries. On this recent project at kc web design kent we needed to delete a lot of products and so after a bit of searching around on Google we came up with these queries.

Before using these remember to backup your database in case anything goes wrong. You’ll also need to change the default table prefix (wp_) to whatever you have used in your database. And remember, its always good practice not to use the default wp_ prefix on any WordPress websites. The queries below also have to be run in this order.

DELETE relations.*, taxes.*, terms.*
FROM wp_term_relationships AS relations
INNER JOIN wp_term_taxonomy AS taxes
ON relations.term_taxonomy_id=taxes.term_taxonomy_id
INNER JOIN wp_terms AS terms
ON taxes.term_id=terms.term_id
WHERE object_id IN (SELECT ID FROM wp_posts WHERE post_type='product');

DELETE FROM wp_postmeta WHERE post_id IN (SELECT ID FROM wp_posts WHERE post_type = 'product');
DELETE FROM wp_posts WHERE post_type = 'product';

WordPress has come a long way since it’s early days as a simple CMS. At kc web design kent we used to build bespoke e-commerce systems for big wholesale clothing companies that would take months to develop and integrate with internal stock management and ordering systems. These days we don’t do many bespoke e-commerce solutions but we do still create e-commerce website design here at kc web design kent. The costs involved in creating a bespoke e-commerce web design solution are high and can be prohibitive to most businesses so these days we tend to use different solutions.

There have been some very good e-commerce packages in recent years including the noes debunked Trading Eye and the very good, and still with us, Lemon Stand. At kc web design kent we’re experts in WordPress and Expression Engine and these top class content management systems can be used for e-commerce website design. Having created a number of e-commerce website design solution with both of these systems I have to say that WordPress comes top of my list.

The ease of setup and user friendly control panel makes WordPress ideal for small to medium e-commerce solutions. With the addition of the fantastic Woocommerce plugin a feature rich e-commerce website can be designed and built in a very short time and at minimal cost to the customer. The Woocommerce plugin gives website owners a rich suite of tools to deal with products and a complete order management system. Building this on top of WordPress means a whole e-commerce website can be built that our customers can have full control over including all page content, news sections and shop. Woocommerce is built by Woothemes and has a wealth of additional plugins to deal with all sorts of e-commerce features such as payment gateways, invoicing, Google product feeds, EU VAT, wish lists and anything else a modern shop needs.

Even though the combination of WordPress and Woocommerce can enable us to create fantastic e-commerce website designs, like all good e-commerce websites, it’s how that functionality gets translated into a good user experience that matters. Just grabbing a free theme and creating a shop isn’t always the right option. Making sure the buying process and user interface design is intuitive and sticks to standard design patterns is the key to creating a good online buying experience. At kc web design kent we’re experts in e-commerce website design and user interfaces and our bespoke designs will make sure your e-commerce website succeeds.

Its been reported quite widely  in the media this week that WordPress has been under attack. WordPress powers millions of websites so an attack like this is no small thing. Millions and millions of sites will have been hacked and the brute force attached looks like it was aimed at weak admin usernames and passwords. Probably an attempt to gain access to more servers for a bigger attack, the hackers targeted WordPress websites with weak passwords that were still using the default admin login. Even WordPress websites with different usernames but weak password could still have been compromised. kc web design specialise in WordPress website design in kent and all over the UK and we’ve seen a lot of damage done by this attack.

Whenever we build a WordPress website design here at kc web design kent we take security very seriously. The first thing we do is to setup WordPress on the server then lock it down, harden it and add extra security features. We try and protect it from all of the most well known attacks as well as making sure password policies are tight. There are a few useful plugins we use on every WordPress website design we do as well as using some other tricks to secure config files and other important areas of the WordPress system. There are loads of tutorials around that explain the best practices when securing WordPress so I won’t bore you with a huge article on that. The plugins that we always use and are well worth taking a look at are: Block Bad Queries, Wordfence, Secure WordPress by WebsiteDefender and WordPress Backup 2 Dropbox because if anything does happen to your website you want to get it back up quickly right?

Security on any system is a serious issues so don’t let anyone build you a WordPress website without making sure its secure. kc web design specialise in WordPress website design in kent and all over the UK so talk to use before you decide on creating a WordPress website. We can make sure its safe.

At kc web design kent we create a lot of websites based on WordPress: blogs, e-commerce websites, corporate websites and even web apps. As soon as we get WordPress installed on a web design project we always add our own set of plugins for security and other odds and ends. So here’s our quick list of WordPress plugins to get into a WordPress website quickly…

Wordfence

In my opinion, one of the best WordPress security plugins there is. Even on the basic level it will scan your site for all sorts of attacks and hacks and lockdown your login to brut force break-in attempts and you can even set firewall rules to change actions on certain events. There’s an option to go pro if you want to for added features but the basic features seem to be enough for most situations.

Block bad queries

A simple little plugin that checks for SQL injection and cross-site scripting and other types of attacks on URL’s. Does exactly what it says!

wp Time Machine (for Backups)

There are many, many different plugins for backups but we find this one very simple to use and the backup to Dropbox works great for us here at kc web design kent. You can also use Amazon S3.

WP Custom Admin Bar

When we’re designing WordPress themes at kc web design kent we don’t want the pesky admin bar getting in the way while we trying to check our design so this simple plugin turns it on/off for certain users or roles. Even when a WordPress website goes live we keep this plugin on as the admin bar can be a little confusing for some users.

WordPress SEO

If you’re serious about SEO on your WordPress website then this is THE SEO plugin to go for. Joost de Valk has a great reputation in the SEO world and this plugin does everything you’d expect. It even guides you on good SEO practice and helps create good written articles that are keyword rich. We could write for kc web design kent without this plugin!

Akismet

Being a pre-installed plugin this one sometimes gets over-looked but if you want to have comments on your WordPress site then this is your first defence against comment spam. And believe me, you’ll need it! It’s easy to sign up and get a key so there’s no excuse to getting it setup and protecting your comments.

Over the last few months here at kc web design kent we’ve been collecting some useful tools and snippets of code and all sorts of interesting links so I thought we’d share some of those for other web designers out there. First on the list is a great little tool for online typography…

www.gridlover.net

Gridlover is a great tool for creating a html text with a perfect modular scale and vertical rhythm. If setting out your text styles while creating a new website design feels tricky then this well designed online tool will help you create those text style just by dragging a few sliders. Very easy to use and the results are pretty good.

subtlepatterns.com

Everyone likes a good texture and pattern to use on a website design and Subtle Patterns is the perfect place to find them. There are all kinds of patterns and subtle textures here to use on your website designs and they easy to find and use. You can even download the whole pack to keep on your own resource folders.

Emmet

One thing I’ve been using more and more when coding website designs these days is Emmet. It used to be called Zen Coding but after a name change and a big update its now better than ever. Learning a new bunch of syntax’s to use while coding websites in your favourite editor (we use Coda 2 here at kc web design kent) takes a little while to learn but once you get used to it it does make certain takes while coding much quicker. Here’s one I use for expanding a list into options for a select list including the value…

option[value=$#]*>{$#}

It might not seem like much but when you have a select list with lots of options this saves a lot of time! With any complicated expressions like this that I can’t remember instantly I tend to save them as Coda clips so they’re easy to just copy and use.

kc web design Kent and William Cowley have been working hard over the last few months to launch a brand new website for the 140 year old parchment and vellum maker. When Adrian from William Cowley first came to see me at kc web design Kent I was instantly drawn to this project. William Cowley are one of only 3 companies in the world that still make Vellum (a type of parchment made from animal skins – all ethically sourced of course) and it’s a company that’s been around for 140 years. They still make Vellum in the same way they did 140 years ago and the methods used are top secret. William Cowley have a fantastic heritage and have contributed parchment and vellum to some amazing projects and uses such as Royal wedding certificates and Bibles on display in Museums.

The quality of the parchments and the tactile nature (honestly, Vellum is unbreakable, you just can’t rip the stuff!) of what they do is fascinating and kc web design kent wanted to try and get across this feeling of a beautiful physical product on the website design. Working very closely with William Cowley, kc web design kent designed and built a WordPress based website design that was unique, showed the heritage of a 140 year old business as well as the skill and craftsmanship involved, while making the website still feel modern. Easy!

…I must back up the phone message, I’ve just left you, to say that I’m delighted with the finished result. Many thanks for all your efforts (and patience!) to get everything right, it’s much appreciated.

Visit Website

Citrus Service Desk is a Service Management software application designed to help organisations deliver ITIL best practise.

Simplisys came to use needing a new brand and website for their new service desk product – Citrus. The brand was created around the name using appropriate colours and shapes while keeping the overall look simple so that the brand could be easily used across a multitude of media types and sizes.

The website was built on WordPress allowing Citrus staff to easily update and expand the site as the new product grew.

Visit Website

A long time ago we did a website for David Hicks of Really Good/Soul fame (I used to work with David as a card designer years ago) for his photography hobby. Now, much more than a hobby, David travels the world taking photos of all kinds of people and places. Over the years the galleries have built up and David adds new galleries almost every month so the old site was in need of a revamp. We originally used Adobe Contribute as the CMS but this was now too slow and cumbersome for the way David worked and how often he needed to add new galleries.

I’ve travelled to over 60 countries to date, and in some ways I see myself as helping to record and interpret the planet at this point in it’s history. I like to experience this world with it’s different cultures and interact with it’s people. I like to eat what the locals eat (within reason) and watch how they work, rest and play. I don’t see my work as just travel photography but as documentary, portraiture and reportage.

With the new website design we chose to use WordPress as the CMS to allow David very easy uploads of new galleries, no matter where he was in the world. He could even do it from his iPhone or iPad. Again, the focus was on the photos so the site is very minimal, but bold, and the photos and galleries dominate the layout.

If you have a project you’d like to work with us on please call kc web design, Kent for a chat.

kc web design created Notebox – a design and concept feedback app/tool – to help designers get client feedback on their designs and concepts in a simple, client-friendly way.

Back in March we had an idea. By July we had a working product. By September it had been in private beta with a select group of testers for a few months. Finally, last month, we launched…quietly!

We have big plans for Notebox next year but for now we wanted to grow slowly but surely making sure we had the infrastructure to support all new users and keep adding new features and adapting the service. We’re already over 400 users with new ones signing up every day. So far, Notebox has been a success but we have a long way to go yet and we’re hoping that 2011 will be the year of great things.

Do you have a web app idea or a web service that needs UI design or web design? We have a wealth of experience when it comes to web apps and creating SaaS applications so give kc web design in Kent a call. We CAN make your web app a success.

Visit Notebox Website

Alison Jane Photography is a professional wedding photographer in Kent and is based near Canterbury. Alison offers Wedding and Portrait photography across Kent and the South East.

Alison came to us for a complete web design overhaul so we decided to completely rebuild the website using WordPress to allow Alison complete control over the content and give her an easy way to add photo’s to galleries. We created a unique WordPress theme with built in gallery modules to help Alison keep control over all 3 gallery sections. Theres also a large blog area to Alison’s site so we wanted to keep the adding of new photos to the galleries as easy as adding a new blog article.

Visit the website

Myers Lister Price Solicitors is one of the leading law firms within the Manchester area. MLP needed a new, modern website with advanced SEO that would generate leads and allow them to focus on new areas of their business. The design had to be modern and clean yet still give a feeling of confidence in a company that had been established for many years and had its roots in old-school law. MLP’s two sites were completely redesigned to work on the WordPress CMS platform allowing MLP to have full control over the content, create news and blog articles and utilise social networking sites such as Twitter, Facebook and Linkedin.

One of the other main focuses of the design was content display as the site would have a lot of text in many different section for each area of the business. Advanced SEO was supplied by our SEO partner ’Progress SEO‘.

Visit the website