Example of a UI design for Bridal Outlet

Example of a UI design for a Bridal Outlet

Here is an example of the user interface and prototype for a site which I have recently finished for the Southport Bridal Outlet. The brief was for a simple clean interface with a Sans Serif font (Roboto) without any unnecessary clutter.

Just to gauge the overall look and feel I built a prototype in Adobe XD to get an sense of the layout and to see which colours worked best with the interface. The finished site remained quite faithful to the original layout.

Project page here

Seven ways to improve your website speed

Improve your site speed

A slow loading or incorrectly loaded site certainly has a negative impact on uses. Even worse if your homepage has elements missing or responsive issues which causes text or images to clip or display incorrectly. Remember a business website is the shop window to your business.

Although content is King when it comes to website ranking and SEO, page speed does play an important role and Google will penalise you if your site is just too slow.

The following seven tips below are a tried and tested method I use to increase site speed. The image above shows a GTMetrix and PageSpeed Insights near perfect score for a client of mine which increased from a 'F' rating to 'A' rating and loaded less than a second when the website was complete.


Here are seven things to do to improve your website speed:

Get a good hosting provider
Sounds obvious but essential. Even if you're are a budget there are still reputable hosting providers. Make sure your hosting provider has options for you to alter/tweak performance enhancing options such as the ability to update your PHP version to the latest i.e. 7.3. There has been significant speed improvements form version 5x to 7x. The hosting provider should give you (if not set my default) to optimise your website by serving a 'compressed version' of it.

There are a few ways to test the server speed (not to be confused with your site speed). You can test your server provider here: https://www.bitcatcha.com/


Optimise your images
This is critical. One thing guaranteed to bring your site to a grinding halt are badly optimised images. The amount of times I've worked on client’s sites which have incorrectly sized or have placed images with LARGE file sizes is quite staggering. Remember crop your images to the size that you need and compress them either using photo editing software or upload them to a image compression site. There are a few out there but here is one I recommend HERE
.Although this isn't an exact science any image should really be under the 100k size.


Get rid of the whizzes and bangs
Simply put the more things you've got going on the home page the slower your site will be. By this I mean online Chat functions, Carousels with multiple images, unnecessary audio playing, too many animations, forms and social media streams. Some of these things may be necessary but if you don't really need it then lose it or move it to another page.


Excessive HTTP requests
Every time a user views your site the browser uses multiple requests of your server to retrive CSS files, images and JavaScript (to mention a few). A simple way of doing this is of course minimising the amount of fonts, images and site functionality (see above). With WordPress you can use certain plugins that will minify HTML or CSS files into 1 file to reduce server requests.


Cache your site
Again very important especially for CMS sites like WordPress to use a caching plugin will stores temporary static content of your site for example images so they can be served quicker for the user. This also reduces stress on the server. There are a multitude of WordPress plugins which provide excellent caching capabilities HERE is one I use which is a good all rounder and can even minify CSS/HTML files for you.


Use a CDN
What's a CDN you ask? Simply put it is a Content Delivery Network which delivers your site through a network of servers usually close to your geographic location which intern provides a faster experience for the end user. It also alleviates bandwidth usage from your servers. This is especially useful for larger-sized websites. There a few paid options but Cloudflare offers a free package suitable for most sites.


Don't forget the Gzip compression
This makes a big impact on page speed. Gzip compression stores the information of your site into smaller files which transfer quicker from the server. This can done via your .htaccess files (there are plenty of tutorials how to do this on the internet) or again if you are using a CMS like WordPress or Joomla simply use a speed improvement plugin like 'Enable Gzip compression' for WordPress.


Build it right
Lastly make sure your website contains clean code and if your using a templating system for WordPress or other CMS make sure the template is known for its speed and efficiency without too much bloat. If you're coding, make sure you avoid multiple CSS files and don't forget to minify your code.


Fast and bloat free websites

 

A better way to produce websites

These past few months I have been using a new software which integrated straight into WordPress without the need for over-bloated themes and page builders so effectively you are building the site from scratch. This also gives me the opportunity to design and build it the way the client needs it without having to use a cookie-cutter theme which a lot of web designers and studios tend to use.

The result are impressive as the sites are leaner, faster to load and strip away any unnecessary code. The latest example is a new site www.kdereli.net for a very talented Ormskirk artist. The site has a clean and minimalistic approach with the portfolio pages being the main emphasis. Even with a great deal of images the site loads effortlessly on all mobile devices even when supporting live Instagram feeds and Google fonts.

Running the website through (the notoriously difficult to please) Google PageSpeed insights gave the desktop version a near-perfect score of 99/100.