Colour Choice Mistakes To Avoid In Web Design

Colour choice in web design is a highly debated topic. Many articles have been written on the subject and new trends emerge yearly. However, there are a few rules about which colour choices to avoid. In our blog this week, we look at which web design colour choices to avoid, and why.

colour choice

Colour Choice

Colours matter in web design. A lot. The right combination of colours can convey professionalism, experience, authority, friendliness, etc. Whilst the wrong combination of colours can lead to a marketing disaster.

Discussing the use of colour in design, Graphic designer, Josh Beadon says,

Colour touches us all of us at a basic, even primal level. To give you an example: In nature we all know that Red is a warning colour. Red berries, Red-capped mushrooms, – they’re poisonous right? We also know that Yellow in certain situations means danger – think wasps, bees and hornets. Over the thousands of years of human evolution, we have learnt to ‘read’ the world around us using colour… this hasn’t just disappeared because we live in modern cities and have state-of-the-art technologies at our fingertips. Understanding the power that colour holds over us, and harnessing this properly is what designers strive for – or should do.

This rough guide to negative and positive responses to colour is from the same article and gives a good starting point for colour choice,

colourassociations

Colour choice mistakes

Don’t use Pure Black

Pure black does not occur naturally, as a colour on a computer screen, #000000 – or pure black, is jarring and overpowers adjacent colours. Whole articles have been devoted to why you should avoid pure black in design with one author noting, 

When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray.

In the same way, the majority of black you see on a website is not actually black, rather it is very dark shades of grey. As a good tip, add a little colour such as blue to your greys to make them less dull and more blended.

Red and Green Should Never be Seen

There are a few good reasons to avoid putting the colours red and green next to each other,

  • You will have visitors to your site that have some form of colour blindness. The most common form of colour blindness is deuteranopia which means people are unable to distinguish between green and red.
  • Red and green are very close together on the visible spectrum and as a result side by side, they tend to increase the brightness as each colour competes with the eye for the foreground.
  • People tend to have very strong emotional associations to these colours that are polar opposites for each colour, resulting in conflicting emotional responses to your page.

Avoid green, yellow and purple on a green background

Yellow and purple become too intense to be read properly with a green background, making the reader squint. Here is a great graphic from Site Point that shows exactly the problems a green background can cause.

12-bad-colors

Don’t put light colour text on a white background

Adding a pale colour text to an already white background creates a conflict for the eyes and leads to readability problems for your page. As you can see here. 

Darker shades of grey or black are probably best for a white background. 

Neon and rainbow colours are abrasive

While it may certainly be eye-catching, neon or rainbow colours on a website become abrasive to the eye very quickly. Whilst the image below may be an extreme example it highlights the issue well,

colour choice mistakes neon

Don’t put red, blue or purple text on a black background

Unless you really want to push the goth look, always avoid red text on a black background. Black is not a good background for blue or purple text either, the swallowing effect of the colour combinations render it hard to read. In fact, even white text can be difficult to read against a black background. If you must have a black background try putting the text in boxes instead.

 

We hope this blog has been of use. If you have any questions or would like to talk to us about your website design you can call us on 0800 612 1098 or contact us here 

Website Image Optimisation – Why It Matters

Image optimisation for websites is the process of using the most compressed (smallest) file available whilst retaining a visually acceptable picture. There are three important reasons for optimising your website images; reducing download speed, minimising bandwidth use and enhancing search engine optimisation (SEO).

Image Optimisation

Download Speed

Each image that is added to a website page has to be downloaded by visitors from your server to their device, either desktop, mobile or tablet. Large or multiple images increase page loading times. A website that is slow to load is losing customers. Research shows that 1 in 4 people will abandon a website that takes longer than 3 seconds to load. Slow loading times will also negatively affect your ranking on search engines pages such as Google.

Bandwidth Use

Images take up a lot of bandwidth on your website. The average website uses 60% of its bandwidth for images, this rises to 85% for high-end visual websites,

Bandwidth is unfortunately a costly commodity. For high traffic websites, bandwidth will probably be responsible for the majority of your IT costs, easily surpassing hosting and storage costs. In addition, such a large volume of traffic takes time to consume, and so, when browsing your website, your visitors are likely to spend a lot of time waiting for images to load.

With many mobile plans charging for data downloaded, image optimisation on mobile sites saves visitors money.

Image file types

There are essentially 3 file types for images on a website, these are called, JPEG, GIF, and PNG. It is useful to look at these file types individually to understand which is required for each circumstance.

JPEG (.jpg)

JPEG (or .jpg) is the de-facto standard for images on the internet. JPEGs are able to be significantly compressed without compromising the image quality too highly so therefore is the perfect file type for photos. Creating images with small file sizes but with good quality images.However JPEG files do not support transparency.

GIF

GIFs are lower quality images than JPEGs making them perfect for limited colour icons or decorative images. Perhaps most importantly, GIFs support animation and this is perhaps its most widely used format on the internet.

For an example of the difference between JPEG and GIF for images, this picture has been compressed to 75% of its original size, the first picture is saved as a JPEG file and the second as a GIF file. You can see on the second picture the quality has degraded noticeably and areas are pixilated.

JPEG Image Optimised

GIF Image Optimisation

PNG

PNG images are becoming a popular alternative to GIFs as PNG files support many more colours than GIFs. PNG files also don’t degrade over re-saves like a JPEG, however, PNG files are still considerably larger than JPEG files. Both GIF and PNG files support transparency.

Google Developers have provided a useful flowchart for deciding the best file type for your image requirements, but essentially both GIF and PNG degrade with reduced file size so JPEG is the usual choice for images.

Image Optimisation Flow Chart

Here are some great tips from Shopify to remember when choosing file formats:

  • For most e-commerce situations – JPEGs will be your best bet. They provide the best quality and the smallest file size.
  • Never use GIFs for large product images. The file size will be very large and there is no good  way to reduce it. Use GIFs for thumbnails and decorative images.
  • PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel at simple decorative images because of their extremely small file size.

Image Optimisation

There are many ways to compress individual images and no definitive answer for which is best. Many photo editing packages such as PhotoShop enable you to compress and then save an image in different file types. If you don’t have an editing package then GIMP is a good, free alternative.

There are also a variety of free online services that allow you to resize your images and then save in your desired format, PicResize is a good one to start with.

By compressing your image and saving in the most appropriate file format before you upload to your website you are saving valuable bandwidth and ensuring your website loads in the quickest time possible.

 

We hope this blog has been of use, if you have any questions about your website or are thinking of a new website, we can help. You can contact us here or call us on 0800 612 1098

 

Spring Clean Your Website – Here’s How

At this time of the year, everything needs a little spring clean and your website is no different. Our blog this week discusses our top tips to leave your website spruced and ready for the year ahead.

SEO

spring cleanWhen was the last time you searched Google and other search engines for your search terms? Do you know which search terms have the best results for your service or product? If it has been more than a few months, – or you don’t know the answers to those questions, chances are you need to look at your search engine optimisation (SEO)

SEO is the process of updating and adapting your website pages, so when a customer searches for your service or product you rank highly on a search results page.

  • Research shows 85% of consumers searching for a product or service now conduct their first search on Google or similar search engine

Whilst we don’t know the exact algorithms search engines use to rank web pages, there are a few things we do know that will count towards a high ranking for your website.

  • Relevant and specific keywords
  • Links to and from other trusted websites
  • Informative, industry relevant content
  • User-friendly and mobile optimised website

Content

How fresh is the content on your site? Not just the blogs – which should be regular, but the wording on each page. Is each page still relevant, does it still reflect your company? Check your contact details too, if any of your companies phone numbers or social media accounts are different now your website needs to be updated.

Content is also a vital component of your SEO and now is a great time to refresh your content with this in mind. You can check out our full blog on SEO tactics for 2016 here.

The staple of all SEO is content. If your content is not immediately engaging and relevant it won’t encourage visitors to stay on your website. Just as importantly Google and other search engines know if your content is well written. If a search engine detects poor quality content, duplicated or plagiarised content it will rank your website poorly.

Broken Links

Check your website for links that no longer work. Broken links can have an adverse affect on your search engine rankings and may annoy users. Use a tool such as Broken Link Check to identify the broken links then fix or remove them.

Branding

When was the last time you looked at your branding? Not just your logo, but the tone and character of your brand? In a previous blog, we looked at the physical aspect and personality of a brand, which can be useful when refreshing your website,

Physical

The physical aspects of brand identity include your logo, name, trademark and company colours. This is what makes your brand recognisable. Your online spaces, packaging and marketing should all carry this physical identity. When someone thinks of your business, the physical aspect of your brand is what they will visualise.

Personality

A brand’s personality is expressed by how it communicates with the outside world. This may be with a certain tone of voice and writing style. If your company were a person, what characteristics and personality would that person have? Some companies like LEGO, employ a helpful, enthusiastic and fun approach to their communications. Others companies such as IBM, adopt a more serious and technical approach.

When spring cleaning your website, keep both the physical and personality aspects of your brand in mind and consider some of the following,

  • Does your logo or design look tired?
  • Are your photos outdated?
  • Is your content reflecting your brand personality?
  • Is your mission statement current?

Software and Plugins

In reality, you should be checking for necessary software updates almost continually. If you haven’t checked for awhile, now is a great time. There are several good reasons to keep your software and plugins updated.

First and foremost, you should update your software and plugins regularly to avoid security risks. New updates normally include additional security measures that have been identified. If your software or plugins are not updated then your data and security are at risk.

Software and plugin updates also include better functionality. Usually, updates have identified areas that could work better and include a fix, some include major changes to functions like advanced searches or new menus. Updated software can mean improved usability and function speed.

Updates fix bugs. Often an update is to fix a bug that has been identified in the software or plugin. Running the latest versions of your software or plugins ensures you have the optimum functionality available.

Analytics

Now is the perfect time to check your analytics. What is the bounce rate of your website? Which of your blogs are most successful? Which landing pages on your website are not gaining traffic?

Google Analytics is a free web application, that gives you basic, visitor and traffic information on your website and is a good place to start.

Website speed

Website speed matters. Consider the following facts,

  • 40% of people abandon a website that takes more than 3 seconds to load.
  • 47% of consumers expect a web page to load in 2 seconds or less.

So if your website takes longer than 3 seconds to load, you are losing 2 out of 5 of your potential customers before they have even viewed your website.

Your website speed can depend on your provider and hosting services.

A study showed that WordPress has one of the top load times for web pages, of any content management system.

For example, here at Seal Island Media, we build all our websites with WordPress. We use dedicated IP addresses and our network now runs entirely on Solid State Drives (SSD), which are hundreds of times faster than hard disk drives. This significantly increases the speed of a site. We use servers are based in London to ensure a quick page load time for our UK based customers. These servers use a virtualisation method known as Linux Containers, to ensure a website remains fast even if a large spike in traffic occurs.

Your website speed can also be affected by large photo files and widgets. Try and keep picture files small and remove any widgets that are too large – such as some social media widgets, or widgets that are unnecessary and not being used.

Check your website load times using tools such as Pingdom.

Responsive

A responsive website is one that automatically adjusts its size and functions to fit on different size screens so it works as well on a mobile device as it does on a desktop.

In 2015, Google confirmed that more searches had been carried out on a mobile device than on a desktop. This means if your website is not responsive, you will miss the majority of your customers.

For an initial check on the responsiveness of your website follow these 3 steps.

  1. Load your website on a desktop then make your browser page narrower. A responsive website will adjust to fit automatically and elements will collapse so that the whole page is still viewable by just scrolling down.
  2. Use any mobile device to load your website, if all you can see is a much smaller copy of your desktop site, then your website is not responsive.
  3. Ask colleagues and friends to view your website on their devices and ask for feedback, is it easy to navigate? Does it load quickly?

If your website is not responsive it is possible your web developer or designer can help, but you may need a whole new website. A new website can be a daunting idea but during a spring clean, a new website is a great way to focus your content, design and branding in a forward thinking way.

 

We hope this blog has been of use, if you have any questions about your website or are thinking of a new website, we can help. You can contact us here or call us on 0800 612 1098

Web Design Trends For 2016

Web design trendsWeb design trends are constantly evolving and changing. We look at which web design trends you should follow in 2016 and which you should drop.

Use larger fonts

This might seem counter-intuitive, – as the smaller the text the more information you can put on a page, but in reality if the text on your page is too small people will navigate away from the page without ever reading it.

The huge growth of mobile use has also impacted the need for a larger font. On a smaller screen, a font smaller than 16 pixels is essentially useless.

The harder your text is to read, the less of it will get read — and the less of what is read will be understood. 10 pixels is essentially pointless. 12 pixels is still much too small for most readers. Even 15 pixels will turn off visitors who might have otherwise converted.

Thus, we can conclude that if you want the maximum number of people to read, understand and act on your text, then you need to set it at a minimum size of 16 pixels.

Responsive is not a choice

A responsive website is one that automatically adjusts its size and functions depending on the size of the screen you are viewing the website with. There are essentially four types of screens; desktop, tablet, laptop and mobile phone.

According to industry leaders, eMarketer.com, in 2016, at least, 87.3% of internet users will own a smartphone, and for the first time in 2015, more internet searches were performed from mobile devices than from desktops.

Recent changes to Google search engine algorithms favour mobile friendly sites, particularly for searches on mobile devices.

If your website does not work well on a mobile device, not only will your site be difficult to use and navigate for visitors, but mobile users will not be shown your website in a Google search for your product or service.

Here is how to check if your website is responsive,

  1. Load your website on a desktop then make your browser page narrower. A responsive website will adjust to fit automatically and elements will collapse so that the whole page is still viewable by just scrolling down.
  2. Use any mobile device to load your website, if all you can see is a much smaller copy of your desktop site, then your website is not responsive.
  3. Ask colleagues and friends to view your website on their devices and ask for feedback, is it easy to navigate? Does it load quickly?

On-line emulators can test your website’s responsiveness across a variety of platforms. A number are available on-line. Google’s Mobile-Friendly Test tool is a must.

Less is more. Simplify your navigation

When someone is given a lot of options, it takes longer to make a decision. Often web designers try and cram in navigation to every page on your site from the menus. The sidebar menu is particularly often overloaded as designers assume the user is used to scrolling down.

In reality, the user is often overwhelmed by the large numbers of choices available and unsure of where to go.

When designing primary navigation for your website try to keep it to an absolute minimum number of choices. Using separate categories for your menus if you have multiple pages can help avoid too much clutter.

In a recent article on navigation, the author highlights the ‘beauty in simplicity’ saying,

Achieving consistency across the entire website fortifies the faith of the users in your website and helps them feel comfortable and “at home” as they peruse through the pages. When navigation menus are found at the exact same place and in the exact same model at every page of the website, it helps the users find the information they are looking for easily.

Lose your sidebars

Sidebars were meant to help the user navigate your site by displaying additional navigation elements. In reality, sidebars are often crammed with email opt-in forms and promotional content.

More to the point, when heat map tests were conducted by ConversionXL, they showed that very few people actually use the sidebar links. Meaning you may be compromising you websites design for sidebars that aren’t being used.

One web designer who was highly sceptical of removing side bars, experimented with removing them and was shocked by the results, saying,

The results of this experiment were shocking. I think the new design made the user-experience more enjoyable, drew more attention to the content, and ultimately moved a visitor to a reader to a supporter much quicker than with the previous design. Turns out I wasn’t the only person who was feeling tired of clunky, cluttered websites. And when you give people a simple look, they’re drawn right in.

Don’t use sliders

Sliders have become a very popular website feature. Often on the homepage of a website a slider takes centre stage and will scroll through pictures, pages or mission statements.

With the rise of mobile devices, the focus for website design in 2016 is ease of use and simplification. Sliders don’t help with either of those things and in fact, research shows that very few visitors to a website actually use sliders at all.

If it’s your homepage you’re concerned about, opt for a large header space that uses a unique, well-crafted static design that clearly defines your brand of that of your client. Again, play around with big typography to make static images more visually appealing and come up with better page designs that make sliders redundant.

 

We hope this blog has been useful. We would love to hear your feedback, you can get in touch via our Facebook or Twitter or if you have any questions about your website you can contact us here, we can help.

Mobile-First Design For Websites

Mobile-first design is the method of designing a website for the mobile user first. Traditionally websites are designed first for desktops and then adapted for mobiles. The explosion of mobile use, means designers are finding advantages in designing for mobiles first.

Industry leaders Uxpin provide the following useful description of the differences between designing for a mobile or a desktop first.

The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. What it boils down to is that, the smallest of the designs will have only the essential features, so right away you have designed the heart of your site.

The opposite approach is graceful degradation. This incorporates all of the complexities right from the start, then strips them away later for smaller devices. The problem with graceful degradation is that when you build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate. The entire philosophy runs the risk of treating mobile design as more of an afterthought since you’re “cutting down” the experience.

Mobile-first web design

The rise of mobiles

It is official, the internet has gone mobile. More people now access the internet from a mobile device than from a desktop.

A recent study on mobile usage by Cisco revealed the following statistics,

  • Global mobile devices and connections in 2015 grew to 7.9 billion, up from 7.3 billion in 2014
  • Average smartphone usage grew 43 percent in 2015. The average amount of traffic per smartphone in 2015 was 929 MB per month, up from 648 MB per month in 2014.
  • There will be 11.6 billion mobile-connected devices by 2020, including M2M modules—exceeding the world’s projected population at that time (7.8 billion).

Responsive Website

What does this all mean for your website? If your website is not responsive ie, adapts and resizes for smaller screens, then you are now missing the majority of your customers.

For an initial check on the responsiveness of your website follow these 3 steps. initial check on the responsiveness of your website follow these 3 steps.

  1. Load your website on a desktop then make your browser page narrower. A responsive website will adjust to fit automatically and elements will collapse so that the whole page is still viewable by just scrolling down.
  2. Use any mobile device to load your website, if all you can see is a much smaller copy of your desktop site, then your website is not responsive.
  3. Ask colleagues and friends to view your website on their devices and ask for feedback, is it easy to navigate? Does it load quickly?

On-line emulators can test your website’s responsiveness across a variety of platforms. A number are available on-line. Google’s Mobile-Friendly Test tool is a must.

Why design for mobile-first

Designing for mobile-first forces a designer to work in the limited size and performance specifications that a website on a mobile requires. A mobile user not only has a device that is much smaller than a desktop but they are often restricted in terms of data use and connection speed.

With desktop-first design, there is a tendency to build large exciting sites that utilise lots of available technologies on the platform only to realise later that this technology does not scale down to mobile very well. Leaving your mobile site severely watered down and looking like more of an afterthought.

When you are dealing with a screen-size that is 320px X 480px or less you have to rethink and design the layout of your traditional desktop website layout. You only have enough space on the screen for the most important and key parts of your website. So if something isn’t absolutely necessary for your clients, then ditch it for your mobile-first design!

All websites essentially aim to communicate specific content, it is your site’s most important function. In essence, mobile-first design also means content-first design.

When designing a website for the desktop it can be very easy to get caught up in the layout and graphic design often to the detriment of content placement. By starting with content you are focusing on the most important part of your website and then designing the layout around it.

We hope this blog has been useful. We would love to hear your feedback, you can get in touch via our Facebook or Twitter or if you have any questions about your digital website you can contact us here, we can help.

WordPress – Why We Use It And Why You Should Too

WordPress started in 2003 and by 2009 had the largest brand strength of any open source content management system. Now in 2016, 25% of all websites in the world use WordPress. 18 million new WordPress sites were added in 2014 alone and,

As of January 2015, more than 23.3% of the top 10 million websites use WordPress

WordPress is a huge phenomenon and its growing. We take a look at why WordPress is so successful and why a WordPress website is the right solution for any size business.

Successful Websites

WordPress is flexible

The truly amazing thing about WordPress is that it is open source. This means the code used to run WordPress is available to everyone. Anyone, anywhere, can customise and modify the code and create new plugins and templates (themes). Because the code is open source, any plugins or themes created must also be open sourced.

Themes – Are basically design templates for WordPress sites

Plugins – Are easily installed add-ons to a WordPress site that create additional features

Now imagine a worldwide community of web designers, working together to improve usability and functionality. The possibilities are almost endless.

WordPress is a powerful content management system (CMS) that is easy to use, easy to customise and very flexible.

WordPress can build any size site

There is a continuing myth that WordPress is best suited to small and medium businesses. Possibly this is because in its early years it was primarily used for small blogs. By 2008, WordPress was a complete CMS. Today WordPress powers some of the world’s largest websites and approximately 1 in 4 of all websites worldwide.

The following companies websites are all powered by WordPress.

WordPress is responsive

Internet searches on a mobile device have outnumbered those on a desktop for the first time last year. This means it is essential your website is responsive, that is, it looks and functions equally well on a mobile, tablet or desktop.

A website that is not responsive not only looks and works below standard, it can be slow to load. Statistics show over 40% of visitors will abandon a website that takes longer than 3 seconds to load.

WordPress fully supports responsive themes and if a certain theme is not responsive, WordPress enables designers to fully customise the theme without ruining the website.

WordPress helps optimise for search engines

85% of all people conduct their first search for a product or service on Google. If your website cannot be found by search engines, then you are losing customers.

WordPress is coded to be search engine friendly from the outset giving you a huge advantage. Furthermore, the worldwide community of designers has developed a wide variety of SEO plugins, making it easy for your web manager to adapt and update your pages for maximum SEO.

WordPress is easy to use

Websites are no longer static places containing fixed information. To have a successful website your content, such as newsletters, blogs and reviews, need to be updated regularly.

WordPress has designed it’s content management system to be easy accessible, uncomplicated and logical. This means content changes do not have to be the responsibility of the web designer. In a blog discussing the merits of WordPress, UC Web Creatiosn say,

You don’t have to be a technical genius to learn how to use WordPress. I always tell my clients: if you know how to edit a Microsoft Word document, then you’ll be able to easily update the content on your WordPress site. Updating pages and/or blog posts on WordPress is literally as easy as editing a Word document – you don’t have to be a web designer to update your content. That is the magic of WordPress!

 

We hope this blog has been useful. We would love to hear your feedback, you can get in touch via our Facebook or Twitter or if you have any questions about your website, contact us here, we can help.

Pin It on Pinterest