Category: Design

WordPress image sliders – home page slider – good or bad?

image sliders good or bad on websites

Sliders and website design

Also referred to as image carousels and slideshows, sliders are a common design aspect on many websites. Seen as a way to visually present images, or other content including text and videos, the concept of a slider is based on the idea of using a slide show to present to your audience.

There was a time when image sliders were very popular, like anything new and shiny. However many online marketing experts would now argue that sliders are ineffective and even “suck” – that they contribute to confusion (visitors miss your messages) and hinder conversion (difficult to use) on websites.

Others say that a slider can improve the initial interest in a website – kind of cover page for your website, or a way to introduce your business.

Whichever way you look at it, sliders and any other design ideas that are used on websites, must be considered on a case by case basis, not just whether they are popular or not, or whether they worked for one type of website, but not another.

My opinion is that image and content sliders can be a valuable visual asset on a page, especially on the home page, but to be effective one must do more than just adding images, setting a transition speed and choosing an transition effect.

How to decide if a slider is right for me?

Going back to what a slider is, a simplified web version of a slideshow, making a decision should be based on whether the slider can offer something that is useful to the design and functionality of your web page.

Questions you should ask yourself include:

  • how will a slider benefit the person viewing?
  • should I use images only, or images and text?
  • will each slide link to a key page on my website?
  • will a slider cause confusion?
  • how does the slider help user pathways?
  • does a slider fit in with the rest of the design?
  • what impact does a slider have on the position of other page content?

Also it is important to consider your audience and what they might expect to see on your website. What first impressions are you looking to give? What kind of business are you in? If people landing on your website are expecting to see plenty of visual media and photos, then a slider can also be a great tool to display this.

Forgotten considerations when using a slider

If you decide that a slider is a good fit for your home page, then there are some other very important things to consider that are often overlooked.

Will you display your slider on mobiles and tablets, or just at full size on desktops and laptops?
– If you are considering using a slider then make sure you are using a responsive slider
– Test it on smartphones and tablets to be sure that it works effectively
– If you are using text overlay, then reduce the amount of text on smaller devices, or better still replace the slider with a static image banner on mobile phones

How long does your home page take to load?
– Test the loading speed of your website’s home page before and after implementing a slider
– Optimise images before uploading (see point below)
– Use less slides rather than more
– A slow loading page increases “bounce rate”

What did you do with your images before uploading to the slider?
– Never just purchase an image without optimising first
– Resize to the maximum dimensions of the slider
– Compress to the minimum resolution that doesn’t impact image appearance
– Rename all image files with search engine friendly filenames, not something like image1834509345053480803.jpg, but rather business-team-member-support.jpg

How to choose a slider?

Many great themes already have a jQuery slider built in. By choosing a theme where the slider is included, you don’t have to then try to integrate one manually. You can see how it will look on the page, and also this saves on issues that can arise with 3rd party slider plugins that may conflict with theme scripts.

If you are concerned about a slider making your home page too slow to load, then grab the URL of the theme’s demo page and plug it into something like GTMetrix to test how long the page takes to load.

Some themes include a copy of a premium 3rd party plugin slider, that you can implement. Or you might have to find one yourself. Either way it is important that the slider is the best WordPress slider for the job.

You can find out some stats on slider loading times by viewing a recent article and tests by Chris Lema titled “How do you find the best WordPress slider” – He tested 20 and found some interesting results.

If you do choose a slider plugin, then make sure that the developer is maintaining the plugin, and also check what support is included. With so many updates and upgrades in WordPress each year, compatibility is really important.

What is your experience with sliders?

I’d love your feedback by answering one question in my survey – What are your thoughts on image sliders to show off content on a website?

If I get enough responses, I’ll publish the results back here in the near future.

Filed under: DesignTagged with: ,

Hidden danger of using free digital photo websites

copyright dangers using free photos

Before you use another “free” digital image, you must read this

Do you use free digital photos on your blog or your website? Well you might be sitting on a ticking time bomb!

DISCLAIMER: The information contained in this article is based on my interpretation of my findings. I am not an expert in legal matters, so recommend that you do your own research in this area and consult legal advice if needed. The purpose of this article to raise awareness and provide a warning to those using free digital imagery.

With all the free services popping up across the internet to solve the issue of finding stock photography for each blog post we churn out, it seems like it has become so much easier to find that ideal image. And yes it makes life easier for us designers, internet marketers and bloggers. But what happens when Getty Images lets Dun & Bradstreet loose on you?

Think this won’t happen? Well how do you prove where you downloaded a free image from 5 years ago, that now only seems to be available on GettyImages, when free images don’t actually come accompanied with a licence?

If you buy an image, you should receive a copy of the licence that you can download with the image. Also you generally need an account with that image provider, so there is usually a record then of the images you have purchased. But when you download a free image, you get nothing. You are told that the image is “Public Domain” or “Creative Commons CC0”, but you don’t get a copy of this attached to the image to prove that. You also don’t have a record of downloading that image from the website either.

But it says it is free to use, even for commercial purposes

This is true. But what if I told you that the free image websites waive responsibility for checking that an uploaded image isn’t actually someone else’s work? What if I told you that an image can be removed by the author for whatever reason – how would you then prove that the image existed on that website in the first place? That’s if you can remember which website you downloaded it from in 5 years time (especially if you use a few image sources)!

What if I told you that a free photos website can remove an image if they find out it has breached copyright? How would they notify people who have already downloaded that image and are using it on their own websites – that they are now infringing on copyright? THEY DON’T TELL YOU THIS – THEY CANNOT TELL YOU THIS.

It is happening at this moment and you could be next!

A website client of mine recently received a bill for over $600 for use of a small “unlicenced” image on their website. It was an old image downloaded several years ago from a free photo source, and so no licence could be shown to prove this. Searching on the internet it was discovered that this image was being used on many different websites, but that the only “official” place to obtain the image now was through GettyImages. As a result they had no option but to pay the fee for “copyright infringement”.

Following the incident, I took a moment to view the terms of use for some well known free image websites, to see what they were doing to protect their users. I guess I expected to find what I did, but I was still a little disappointed.

“In this regard, all Users acknowledge that the Company is not verifying the Pictures, and therefore the use of such Pictures in any way is at each User’s own risk, and same are being provided on the Website “as-is, where-is”, without any representations or warranties whatsoever by the Company.”

Unsplash

“Pixabay cannot be held responsible for any copyright violations, and cannot guarantee the legality of the Images stored in its system. If You want to make sure, always contact the photographers. You use the site and the photos at your own risk!”

Pixabay

“To the extent possible under law, Public Domain Archive has waived all copyright and related or neighboring rights to all images published on publicdomainarchive.com”

Public Domain Archive

“Copyright Infringement and DMCA Policy. As morguefile.com asks others to respect its intellectual property rights, it respects the intellectual property rights of others. If you believe that material located on or linked to by morguefile.com violates your copyright, you are encouraged to notify morguefile.com at admin at morguefile.com in accordance with the Digital Millennium Copyright Act. morguefile.com will respond to all such notices, including as required or appropriate by removing the infringing material or disabling all links to the infringing material.”

MorgueFile

“You agree to indemnify, defend, and hold harmless freeimages and its officers, employees, shareholders, directors and suppliers against all claims, liability, damages, costs and expenses, including reasonable legal fees and expenses, arising out of or related to a breach of this Agreement, the use of this site and the use or the inability of use of any Image, your failure to abide by any restriction regarding the use of an Image, or any claim by a third party related to the use of an Image.”

Free Images

It might seem reasonable that if a website, especially a small business, were to find themselves in a situation where an image appeared on their website and they had unknowingly and unintentionally used an image they believed to have been free, that a request and warning to remove it from their website would be fair. But it seems that the first notification is by way of compensation ordered to pay by debt collectors.

So what next?

Well my recommendation is that if you use free images on your website or blog, try to credit the source of the image in your blog post (so that you have a record of where the image came from), or record the URL of the image you download, or otherwise purchase an image that is accompanied by an actual downloadable copy of the licence to use that image.

I’d welcome any comments from anyone who has encountered any issues with using free images, or any representatives of the free image sources that would like to reassure users of their free stock photos, or any other useful advice. Feel free to share below.

Filed under: DesignTagged with: , ,

Is my WordPress responsive website mobile friendly?

mobile ready responsive websites

This is the question I was asking myself a couple of days ago. I have a WordPress responsive website, and I know that it works well on mobile devices. So why would Google’s mobile friendly tester show my website as NOT friendly?

Firstly let’s explore why you need a mobile friendly website.

Google’s upcoming algorithm change

Well according to the Google Webmaster blog in a post titled “Finding more mobile friendly search results“, Google will very soon be making a change to the search results displayed on a mobile device.

From the article:
“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices”

The key words here are “… will affect mobile searches … worldwide … will have a significant impact in our search results …”

I think you get the picture that if you want to appear when someone is doing a Google search on a mobile device after 21st April 2015, then you need to be mobile friendly.

How to be mobile friendly

Well the preferred way to be mobile, according to Google is to have just one version of your website that is a Responsive Website Design.

What reasons does Google give for this (source: why responsive design):

easier for people to share a single link to a page on your website, rather than multiple links to the same content

easier for Google to index a single url than a separate desktop and mobile url

only have one page for the webmaster to maintain

saves on load time when redirection is required based on device type

improves Googlebot’s crawling efficiency as only one version of a page to be crawled and indexed so “can indirectly help Google index more of your site’s content and keep it appropriately fresh”

So if you are running a WordPress website, then simply choose a responsive theme. You can also use a mobile plugin that creates a mobile version of your website, however given the reasons listed above you would be better off using a responsive theme. There are plenty to choose from and sometimes the theme you are using may actually have a setting to turn on responsive design, so if you are not sure then check the documentation that comes with your theme, or alternatively contact your theme provider.

How to test if your website is now mobile friendly?

This step is nice and easy, since Google have provided us with a really easy tool to use. Simply visit test here and enter your home page url for Google to test.

Another way to test is by setting up your website with Google Webmaster Tools, and view the “mobile usability” section for any errors that Google has found.

What if I have a responsive website and Google is showing it as “not friendly”?

Well this is what I found out the other day. Even though my website is mobile friendly through testing on a range of mobiles and tablets, Google seems to be of the opinion that it is not.

Why is it so?

So I checked using the Chrome developer tools, and switched on the device mobile emulator to verify that the website was still appearing correctly on mobile devices. Yes that checked out ok.

Then I considered why the mobile testing tool might be showing a different result to Google. Reading on the page I realised that Google is trying to view the website exactly as a typical mobile user might see the page. So that means it needs access to all the stylesheets and javascript, images and other resources that might effect how a page looks.

Then it made sense. Based on the way that used to be recommended for WordPress websites, we use the robots.txt file to help prevent crawling and indexing of content that isn’t relevant for search results. In other words, we simply wanted Google and other search engines to crawl the text content of our websites, not all the other files. So the Googlebot was being blocked from crawling all the stylesheets and javascript, so it cannot therefore see the website exactly how it actually appears on a mobile device.

So even though the website is fully responsive, the reason why Google believes it is not is because the robots.txt file blocks the files that Google now wants to be able to view.

So what to do? Do I simply remove the robots.txt file and allow all crawling of the website? Do I amend the file and stop blocking all the files?

A new robots.txt file for Googlebot

I decided that the reason for blocking certain resources on the website is still relevant at this stage, though in the future this may change again. So the best way to fix the issue with Googlebot is to allow it to crawl the javascript, css, images and other important files. However I still may have some files loaded in my website that I don’t want crawled.

Thankfully we can target Googlebot in our robots.txt using “User-agent: Googlebot”. Also although the directive “Allow” is not recognised across all crawlers (so it shows as an error in robots txt testing tools), Google does actually recognise it, provided that it is “the URL path in of a subdirectory, within a blocked parent directory, that you want to unblock” (source: Webmaster tools help).

This is my revised robots.txt tool with an explanation below:

User-agent: Googlebot
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-content/plugins/
Allow: /wp-content/plugins/*.css
Allow: /wp-content/plugins/*.js
Disallow: /wp-content/mu-plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Allow: /wp-content/themes/*.css
Allow: /wp-content/themes/*.js
Allow: /wp-content/themes/*.gif
Allow: /wp-content/themes/*.png
Allow: /wp-content/themes/*.jpg
Disallow: /*.php$
Disallow: /*.inc$
Disallow: /*? 

User-agent: *
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/mu-plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*?

Sitemap: https://www.davidtiong.com/sitemap.xml

Explanation:

  • Lines 1-17 are for Googlebot
  • Lines 19-31 are for all other bots
  • Line 33 is to inform search engines where my sitemap is located
  • Line 4 blocks the directory “plugins”, but lines 5-6 allow Googlebot to access css and js files in there
  • Line 9 blocks the directory “themes”, but lines 10-14 allow Googlebot to access css, js and image files in there

You can add other allow or disallow rules in there as needed using the same pattern, however remember that your robots.txt file is publicly available so be careful what you put in there, eg: don’t put important pathways in there to hidden files.

Submitting the new robots.txt file to Google and testing

Once you have uploaded your new robots.txt file to your website, you want to do the following:

1. Clear any caches to ensure your new robots.txt file is available

2. Purge any old copy of your robots.txt file from your CDN or Cloudflare if applicable

3. Test your robots.txt file for errors – try tool.motoricerca.info/robots-checker.phtml (remember that the allow directive will show as errors)

4. Tell Google about your new robots.txt file by going into your Google Webmaster Tools account, then navigate to Crawl > Robots.txt tester. Then click on the submit button, then next to 3 ask Google to update – click submit (see images below).

Submit robots.txt to Google

mobile friendly changes to robots.txt

5. Check that css, js and image files are not being blocked by Googlebot anymore by using the Robots.txt tester, view the images below as an example.

robots.txt tester

check Googlebot not blocked


6. Check that your website is now mobile friendly using the mobile friendly tester – www.google.com/webmasters/tools/mobile-friendly/.

7. Keep an eye on your Google webmaster tools account over the next couple of weeks to make sure that no new errors are showing up.

How did you go? If you need to print out this page to refer to, then click the button below.

Print a copy

Are you ready now for April 21?

Filed under: Design, WordPressTagged with: , , ,

Image resizing and compression for faster webpage loading best free tools

png image compression
Images need to be optimised for faster loading on web pages, especially now that more websites are being viewed on tablets, iPads and smart phones.

Most image software will allow you to resize your images and compress them, as well as to change between image types.

If you are looking for some great free tools that are both easy to use and effective then the following is worth a look.

For general batch processing, converting between popular image formats, modes to allow resizing based on height, width, percentage, desktop and more, as well as quick folder or file processing and image file size, then you cannot go past Plastiliq Image Resizer.

For compression of PNG image files then try PngGuantlet and TinyPNG

image example before png compression

image example after png compression

As you can see from the images above, you often cannot see any difference between the compressed image and the original, so consider optimising your website’s images to decrease your page loading times – for both usability and SEO reasons.

Filed under: DesignTagged with: ,

CSS Box styling – how to

box shadow css style

Now with CSS3 we can style boxes easier and quicker using CSS rather than background gradient images. There are quite a few possible combinations of styles to use, depending on what you are looking to achieve, though you need to be aware that some don’t work in certain browsers, or certain browser versions.

Let’s get started with box-shadow. This one works across newer versions of Firefox, Chrome, Safari and IE9. Simply add to your CSS stylesheet the following:

     -webkit-box-shadow: 3px 4px 5px 5px  #333;
     box-shadow: 3px 4px 5px 5px  #333;

The first part is for horizontal offset, followed by vertical offset, followed by blur distance, then spread and lastly the colour.

Using negative numbers for horizontal and vertical offset will produce shadows to the left and above, whereas positive numbers will make your shadow appear to the right and below.

Another variation you can use is box-shadow: inset. This makes an inner shadow. The example CSS below will show an inner shadow with no offset, blur distance of 5px and a spread distance of 5px:

     -webkit-box-shadow: inset 0 0 5px 5px #888;
     box-shadow: inset 0 0 5px 5px #888;

Taking the idea of box-shadow even further, you can create multiple layered shadows. The CSS code below produces a white blurred outline with slight red shadow to the right and a faint blue shadow to the left:

     -webkit-box-shadow: 0 0 15px 5px #FFFFFF, 15px 10px 25px 0px red, -15px -10px 25px 0px blue;
     box-shadow: 0 0 15px 5px #FFFFFF, 15px 10px 25px 0px red, -15px -10px 25px 0px blue;

Depending on your web page design, you may even want to try using some transparency in your shadow, which can be achieved using RGBa colour:

     -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
     box-shadow: 5px 5px rgba(0,0,0,0.5);

Next up is the border of your box, which is styled using border-style, border-width, border-color and border-radius. You can also style top, bottom, left and right borders individually, by replacing “border” with “border-left” for example.

  • Border-style can be dotted, dashed, solid, double, groove, ridge, inset or outset
  • Border-width can be styled using thin, medium, thick or by px size, such as 1px, 2px, etc
  • Border-color can be specified as a color name, like “red”; RGB – specify a RGB value, like “rgb(255,0,0)”; or Hex – specify a hex value, like “#ff0000”. You can also set the border color to “transparent”, or use RGBa such as “rgba(255,0,0,0.5)”
  • Border-radius controls whether the border has rounded corners or straight edges. The css example below creates rounded corners. The higher the px number you choose, the more rounded the corners will become.
         -webkit-border-radius: 5px;
         border-radius: 5px;
    

    You can do so much more with CSS3 box styling, though just be aware that different browser versions will handle the rules differently. For more great ideas and to see examples of CSS3 box styling, check out this website: css3please.com

Filed under: DesignTagged with: ,

Special characters, html entities and symbols on websites and social media

How do you add special characters or html entities or mathematical symbols on websites and in your social media posts? Well you can see on your keyboard some of the characters, however they won’t show up properly online, because some of them are reserved for code usage and markup.

So how do you add them?

Well some are pretty simple to figure out, such as the copyright symbol, which is simply &copy; © or the &lt; < or the &gt; > signs.

But what about the others, or some of the mathematical symbols or the smiley faces or the arrows? There are many to choose from.

Tweet this

Below are 2 good resources for finding the “hidden” characters that you need to make the symbols show-up online.

ℋ ⓐ Ⓥ ℯ — Ƒ Ⓤ Ƞ

Html entities at W3schools
CopyPasteCharacter

Filed under: DesignTagged with: ,

Create simple and quick text based graphics logos

[youtube link=”http://www.youtube.com/watch?v=JGh3NcetNGA”]

If you are looking to create a simple text logo for your website then watch this video which shows a simple and easy technique using Paint.net.

This program is available as a free download from Filehippo.com: www.filehippo.com/download_paint.net/

The tutorial video shows the process of creating a text logo with a border and shadow effect on a transparent background, that then can easily be added to your website onto an image, or a background texture.

Filed under: DesignTagged with: