Adesignguy Torbay website design http://www.adesignguy.co.uk/ Latest blog items from adesignguy en-gb Copyright (C) 2016 adesignguy.co.uk Useful datetime functions with PHP and MySQL Here are a few useful date & time functions and especially useful when pulling a datetime field from a mySQL database using PHP.

<?php

//date and time
function datetime($input){
$input = date_create($input);
$input = date_format($input, 'd/m/Y H:i:s');
return $input;
}

// returns date and time in this format: 18/02/2016 18:54:34

echo datetime($row['date']);

?>

2: How to return a date in ISO8601 format. Useful for json+ld rich snippets.

<?php

$datetime = new DateTime($row['date']);

echo $datetime->format(DateTime::ISO8601);

//returns a date in ISO8601 format as so: 2016-02-18T18:54:34+0000

?>

3: Return the date with the day in long format.

<?php

//date time with day
function longdatetime($input){
$input = date_create($input);
$input = date_format($input, 'l d F Y H:i:s');
return $input;
}

//returns the date with day like so: Thursday 18 February 2016 18:54:34

echo longdatetime($row['date']);

?>

]]>
http://www.adesignguy.co.uk/blog/code/useful-datetime-functions-with-php-and-mysql http://www.adesignguy.co.uk/blog/code/useful-datetime-functions-with-php-and-mysql Sun, 28 Feb 2016 23:55:05 +0000 Here are a few useful date & time functions and especially useful when pulling a datetime field from a mySQL database using PHP.

<?php

//date and time
function datetime($input){
$input = date_create($input);
$input = date_format($input, 'd/m/Y H:i:s');
return $input;
}

// returns date and time in this format: 18/02/2016 18:54:34

echo datetime($row['date']);

?>

2: How to return a date in ISO8601 format. Useful for json+ld rich snippets.

<?php

$datetime = new DateTime($row['date']);

echo $datetime->format(DateTime::ISO8601);

//returns a date in ISO8601 format as so: 2016-02-18T18:54:34+0000

?>

3: Return the date with the day in long format.

<?php

//date time with day
function longdatetime($input){
$input = date_create($input);
$input = date_format($input, 'l d F Y H:i:s');
return $input;
}

//returns the date with day like so: Thursday 18 February 2016 18:54:34

echo longdatetime($row['date']);

?>

]]>
Get image size values with PHP This is especially useful if you need to grab either width and height values from an image that you need to display when implementing rich snippets and you need singular values (for one example).

<?php

//lets set up some variables

$dir = $_SERVER['DOCUMENT_ROOT'].'/images/';
$image = $dir.$row['image1']; //example for imagename stored in database ie: picture1.jpg

//check if image exists

  if (file_exists($image) && $image !== $dir) {
  list($width, $height) = getimagesize($image);

//return the values

echo $width;

echo $height;

}

?>

 

]]>
http://www.adesignguy.co.uk/blog/code/get-image-size-values-with-php http://www.adesignguy.co.uk/blog/code/get-image-size-values-with-php Thu, 18 Feb 2016 18:54:34 +0000 This is especially useful if you need to grab either width and height values from an image that you need to display when implementing rich snippets and you need singular values (for one example).

<?php

//lets set up some variables

$dir = $_SERVER['DOCUMENT_ROOT'].'/images/';
$image = $dir.$row['image1']; //example for imagename stored in database ie: picture1.jpg

//check if image exists

  if (file_exists($image) && $image !== $dir) {
  list($width, $height) = getimagesize($image);

//return the values

echo $width;

echo $height;

}

?>

 

]]>
Bootstrap Breadcrumbs with PHP I found this excellent but not perfect function on stackoverflow and modified it as it allowed the last crumb to be a hyperlink and clickable, which is not right for the end user and just not semantically correct through the eyes of a web developer, so I added logic to find the last crumb in the foreach loop to display a non clickable last breadcrumb. I removed the custom text argument which allowed for a custom string such as "You are here". It's just clutter and bad design and really not needed.

I also added the bootstrap classes to the function as seen on this website(page).

PS: The html is easily adaptable for any other CSS framework too, just modify the html within the function.

All you need to do is add <?php echo breadcrumbs(); ?> to the very top of your page(s), below your top navigation area and add the below function to your PHP file or includes file.

Obviously if you are using bootstrap, you do not need to change the separator argument, leave as is, as the bootstrap css automatically adds them.

<?php

function breadcrumbs($sep = '', $home = 'Home') {
$bc     =   '<ul class="breadcrumb">';
//Get the server http address
$site   =   'http://'.$_SERVER['HTTP_HOST'];
//Get all vars en skip the empty ones
$crumbs =   array_filter( explode("/",$_SERVER["REQUEST_URI"]) );
//Create the homepage breadcrumb
$bc    .=   '<li><a href="'.$site.'">'.$home.'</a>'.$sep.'</li>';
//Count all not empty breadcrumbs
$nm     =   count($crumbs);
$i      =   1;
//Loop through the crumbs
foreach($crumbs as $crumb){
//grab the last crumb
$last_piece = end($crumbs);

    //Make the link look nice
    $link    =  ucfirst( str_replace( array(".php","-","_"), array(""," "," ") ,$crumb) );
       
    //Loose the last seperator
    $sep     =  $i==$nm?'':$sep;
    //Add crumbs to the root
    $site   .=  '/'.$crumb;
    //Check if last crumb
    if ($last_piece!==$crumb){
    //Make the next crumb
    $bc     .= '<li><a href="'.$site.'">'.$link.'</a>'.$sep.'</li>';
    } else {
    //Last crumb, do not make it a link
    $bc     .= '<li class="active">'.ucfirst( str_replace( array(".php","-","_"), array(""," "," ") ,$last_piece)).'</li>';
    }
    $i++;
}
$bc .=  '</ul>';
//Return the result
return $bc;
}
?>

]]>
http://www.adesignguy.co.uk/blog/code/bootstrap-breadcrumbs-with-php http://www.adesignguy.co.uk/blog/code/bootstrap-breadcrumbs-with-php Fri, 12 Feb 2016 20:37:48 +0000 I found this excellent but not perfect function on stackoverflow and modified it as it allowed the last crumb to be a hyperlink and clickable, which is not right for the end user and just not semantically correct through the eyes of a web developer, so I added logic to find the last crumb in the foreach loop to display a non clickable last breadcrumb. I removed the custom text argument which allowed for a custom string such as "You are here". It's just clutter and bad design and really not needed.

I also added the bootstrap classes to the function as seen on this website(page).

PS: The html is easily adaptable for any other CSS framework too, just modify the html within the function.

All you need to do is add <?php echo breadcrumbs(); ?> to the very top of your page(s), below your top navigation area and add the below function to your PHP file or includes file.

Obviously if you are using bootstrap, you do not need to change the separator argument, leave as is, as the bootstrap css automatically adds them.

<?php

function breadcrumbs($sep = '', $home = 'Home') {
$bc     =   '<ul class="breadcrumb">';
//Get the server http address
$site   =   'http://'.$_SERVER['HTTP_HOST'];
//Get all vars en skip the empty ones
$crumbs =   array_filter( explode("/",$_SERVER["REQUEST_URI"]) );
//Create the homepage breadcrumb
$bc    .=   '<li><a href="'.$site.'">'.$home.'</a>'.$sep.'</li>';
//Count all not empty breadcrumbs
$nm     =   count($crumbs);
$i      =   1;
//Loop through the crumbs
foreach($crumbs as $crumb){
//grab the last crumb
$last_piece = end($crumbs);

    //Make the link look nice
    $link    =  ucfirst( str_replace( array(".php","-","_"), array(""," "," ") ,$crumb) );
       
    //Loose the last seperator
    $sep     =  $i==$nm?'':$sep;
    //Add crumbs to the root
    $site   .=  '/'.$crumb;
    //Check if last crumb
    if ($last_piece!==$crumb){
    //Make the next crumb
    $bc     .= '<li><a href="'.$site.'">'.$link.'</a>'.$sep.'</li>';
    } else {
    //Last crumb, do not make it a link
    $bc     .= '<li class="active">'.ucfirst( str_replace( array(".php","-","_"), array(""," "," ") ,$last_piece)).'</li>';
    }
    $i++;
}
$bc .=  '</ul>';
//Return the result
return $bc;
}
?>

]]>
Protect a script with a required parameter in PHP Have you ever needed to protect a specific file with a required GET parameter, such as a script that runs via a scheduled task/cron job that checks for any database changes, updating prices and quantity of stock etc. The usage is ideal for any cronjob task.

It's easy, just add this code at the very top of your PHP file.

<?php

$param = $_GET['secret'];
if(empty($param) || !isset($param) || $param != "secretkey") {
  header("HTTP/1.0 404 Not Found"); //if not set trigger 404 error page
}

?>

Usage: hxxp://www.yourdomain.com/yourscript.php?secret=secretkey

Of course, make sure you change the secret key and/or the actual parameter.

]]>
http://www.adesignguy.co.uk/blog/code/protect-a-script-with-a-required-parameter-in-php http://www.adesignguy.co.uk/blog/code/protect-a-script-with-a-required-parameter-in-php Mon, 01 Feb 2016 20:40:07 +0000 Have you ever needed to protect a specific file with a required GET parameter, such as a script that runs via a scheduled task/cron job that checks for any database changes, updating prices and quantity of stock etc. The usage is ideal for any cronjob task.

It's easy, just add this code at the very top of your PHP file.

<?php

$param = $_GET['secret'];
if(empty($param) || !isset($param) || $param != "secretkey") {
  header("HTTP/1.0 404 Not Found"); //if not set trigger 404 error page
}

?>

Usage: hxxp://www.yourdomain.com/yourscript.php?secret=secretkey

Of course, make sure you change the secret key and/or the actual parameter.

]]>
PHP Image resizing function (PHP/GD2) I found this code somewhere online and I am currently using it on this website, but quickly found a problem with transparency when generating GIF or PNG images, it was creating a black background when the images were meant to be transparent, so I have added transparency, after adding the transparency I then discovered another problem on specific images with non standard width/heights showing a black line, so I created a workaround and added a choice of either resizing an image which exists on the server or the ability to handle post data, IE: where you have uploaded a file via a form, and then copying it to a directory, so I added two more arguments to the function to accomplish these caveats.

<?php

// Image resize function with php + gd2 lib
// Usage: image_resize($_FILES['image1'], $img_1thumb,320,240,false,80,false, true);
// or:   image_resize($image, $image,320,240,false,80,false, false);
function image_resize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 83, $transparency = true, $postdata = true) {
    $quality = $quality ? $quality : 83;
    if ($postdata=true){
    //array type img
    $imgString = file_get_contents($source['tmp_name']); // for use with $_FILES/Post data
    $image = imagecreatefromstring($imgString); 
    } else {
    //disk image file
    $image = imagecreatefromstring($source); //normal type
    }
    if ($image) {
        // Get dimensions
        $w = imagesx($image);
        $h = imagesy($image);
        if (($width && $w > $width) || ($height && $h > $height)) {
            $ratio = $w / $h;
            if (($ratio >= 1 || $height == 0) && $width && !$crop) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } elseif ($crop && $ratio <= ($width / $height)) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } else {
                $new_width = $height * $ratio;
                $new_height = $height;
            }
        } else {
            $new_width = $w;
            $new_height = $h;
        }
        $x_mid = $new_width * 0.5;  //horizontal middle    //orig values were .5
        $y_mid = $new_height * 0.5; //vertical middle      //orig values were .5
        // Resample
        error_log('height: ' . $new_height . ' - width: ' . $new_width);
        $new = imagecreatetruecolor(round($new_width), round($new_height));
       
   //workaround for 1px black line, change it to white rather than black which is better - remove it later
  imagefilledrectangle($new, 0, 0, $new_width, $new_height, imagecolorallocate($new, 255, 255, 255));
 // added to preserve transparency
 
 if ($transparency == true){
  imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
  imagealphablending($new, false);
  imagesavealpha($new, true);
  }
 // added to preserve transparency
 //workaround for 1px line on either bottom or the side of images was to add +2 to the new destination width + height  
        imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width+2, $new_height+2, $w, $h);
        // Crop
        if ($crop) {
            $crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
            imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
            //($y_mid - ($height * .5))
        }
        // Output
        // Enable interlancing [for progressive JPEG]
        imageinterlace($crop ? $crop : $new, true);

        $dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
        if ($dext == '') {
            $dext = $ext;
            $destination .= '.' . $ext;
        }
        switch ($dext) {
            case 'jpeg':
            case 'jpg':
                imagejpeg($crop ? $crop : $new, $destination, $quality);
                break;
            case 'png':
                $pngQuality = ($quality - 100) / 11.111111;
                $pngQuality = round(abs($pngQuality));
                imagepng($crop ? $crop : $new, $destination, $pngQuality);
                break;
            case 'gif':
                imagegif($crop ? $crop : $new, $destination);
                break;
        }
        @imagedestroy($image);
        @imagedestroy($new);
        @imagedestroy($crop);
    }
}

?>

]]>
http://www.adesignguy.co.uk/blog/code/php-image-resizing-function-php-gd2 http://www.adesignguy.co.uk/blog/code/php-image-resizing-function-php-gd2 Mon, 01 Feb 2016 19:27:59 +0000 I found this code somewhere online and I am currently using it on this website, but quickly found a problem with transparency when generating GIF or PNG images, it was creating a black background when the images were meant to be transparent, so I have added transparency, after adding the transparency I then discovered another problem on specific images with non standard width/heights showing a black line, so I created a workaround and added a choice of either resizing an image which exists on the server or the ability to handle post data, IE: where you have uploaded a file via a form, and then copying it to a directory, so I added two more arguments to the function to accomplish these caveats.

<?php

// Image resize function with php + gd2 lib
// Usage: image_resize($_FILES['image1'], $img_1thumb,320,240,false,80,false, true);
// or:   image_resize($image, $image,320,240,false,80,false, false);
function image_resize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 83, $transparency = true, $postdata = true) {
    $quality = $quality ? $quality : 83;
    if ($postdata=true){
    //array type img
    $imgString = file_get_contents($source['tmp_name']); // for use with $_FILES/Post data
    $image = imagecreatefromstring($imgString); 
    } else {
    //disk image file
    $image = imagecreatefromstring($source); //normal type
    }
    if ($image) {
        // Get dimensions
        $w = imagesx($image);
        $h = imagesy($image);
        if (($width && $w > $width) || ($height && $h > $height)) {
            $ratio = $w / $h;
            if (($ratio >= 1 || $height == 0) && $width && !$crop) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } elseif ($crop && $ratio <= ($width / $height)) {
                $new_height = $width / $ratio;
                $new_width = $width;
            } else {
                $new_width = $height * $ratio;
                $new_height = $height;
            }
        } else {
            $new_width = $w;
            $new_height = $h;
        }
        $x_mid = $new_width * 0.5;  //horizontal middle    //orig values were .5
        $y_mid = $new_height * 0.5; //vertical middle      //orig values were .5
        // Resample
        error_log('height: ' . $new_height . ' - width: ' . $new_width);
        $new = imagecreatetruecolor(round($new_width), round($new_height));
       
   //workaround for 1px black line, change it to white rather than black which is better - remove it later
  imagefilledrectangle($new, 0, 0, $new_width, $new_height, imagecolorallocate($new, 255, 255, 255));
 // added to preserve transparency
 
 if ($transparency == true){
  imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
  imagealphablending($new, false);
  imagesavealpha($new, true);
  }
 // added to preserve transparency
 //workaround for 1px line on either bottom or the side of images was to add +2 to the new destination width + height  
        imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width+2, $new_height+2, $w, $h);
        // Crop
        if ($crop) {
            $crop = imagecreatetruecolor($width ? $width : $new_width, $height ? $height : $new_height);
            imagecopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $height, $width, $height);
            //($y_mid - ($height * .5))
        }
        // Output
        // Enable interlancing [for progressive JPEG]
        imageinterlace($crop ? $crop : $new, true);

        $dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
        if ($dext == '') {
            $dext = $ext;
            $destination .= '.' . $ext;
        }
        switch ($dext) {
            case 'jpeg':
            case 'jpg':
                imagejpeg($crop ? $crop : $new, $destination, $quality);
                break;
            case 'png':
                $pngQuality = ($quality - 100) / 11.111111;
                $pngQuality = round(abs($pngQuality));
                imagepng($crop ? $crop : $new, $destination, $pngQuality);
                break;
            case 'gif':
                imagegif($crop ? $crop : $new, $destination);
                break;
        }
        @imagedestroy($image);
        @imagedestroy($new);
        @imagedestroy($crop);
    }
}

?>

]]>
JPG or PNG for website images? As a rule of thumb I use JPG for photos and PNG-8 or PNG-24 for logos etc. Photoshop has an "export for web" function, where you can modify the settings to minimise the file size comprimising image quality.

PNG-24 produces better transparancy at image file size cost, where a JPG will produce a smaller filesize when compressing a photo.

]]>
http://www.adesignguy.co.uk/blog/website-design/jpg-or-png-for-website-images http://www.adesignguy.co.uk/blog/website-design/jpg-or-png-for-website-images Thu, 28 Jan 2016 17:31:19 +0000 As a rule of thumb I use JPG for photos and PNG-8 or PNG-24 for logos etc. Photoshop has an "export for web" function, where you can modify the settings to minimise the file size comprimising image quality.

PNG-24 produces better transparancy at image file size cost, where a JPG will produce a smaller filesize when compressing a photo.

]]>
How to fix "Headers already sent" error in PHP This generally happens because there is something being sent before the output. Functions that modify/send HTTP headers must be invoked before any output is made.

First check the offending file for excess whitespace before any PHP opening tags. This is usually at the beginning of the file.

If all else fails, a workaround is to put

<?php ob_start(); ?>

at the very top of your header.php file and

<?php ob_end_flush(); ?>

at the bottom of your footer.php file. This might fix your problem, although it is a workaround and not a cure.

]]>
http://www.adesignguy.co.uk/blog/code/how-to-fix-headers-already-sent-error-in-php http://www.adesignguy.co.uk/blog/code/how-to-fix-headers-already-sent-error-in-php Tue, 26 Jan 2016 14:11:11 +0000 This generally happens because there is something being sent before the output. Functions that modify/send HTTP headers must be invoked before any output is made.

First check the offending file for excess whitespace before any PHP opening tags. This is usually at the beginning of the file.

If all else fails, a workaround is to put

<?php ob_start(); ?>

at the very top of your header.php file and

<?php ob_end_flush(); ?>

at the bottom of your footer.php file. This might fix your problem, although it is a workaround and not a cure.

]]>
How to rotate/spin an image on hover using CSS3 Ever wondered how to spin an image on hover? It's easy! First add the CSS below to your stylesheet CSS and then add the class "spin" to an image you want to spin, for instance, a social media logo. Job done! Remember this effect only works on browsers supporting CSS3 effects

CSS:

.spin {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.spin:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

]]>
http://www.adesignguy.co.uk/blog/code/how-to-rotate-spin-an-image-on-hover-using-css3 http://www.adesignguy.co.uk/blog/code/how-to-rotate-spin-an-image-on-hover-using-css3 Mon, 25 Jan 2016 22:10:50 +0000 Ever wondered how to spin an image on hover? It's easy! First add the CSS below to your stylesheet CSS and then add the class "spin" to an image you want to spin, for instance, a social media logo. Job done! Remember this effect only works on browsers supporting CSS3 effects

CSS:

.spin {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.spin:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

]]>
To use Wordpress or not to use Wordpress? Wordpress is a great content management system and an excellent platform overall to quickly set up a website, however the influx of updates to either the core wordpress software or plugins can render user and bought themes unuseable. This makes it a bit confusing for people that don't know much about computers and cannot program their own website. I find the code itself overly bloated, at least for what I generally need to do.

Another note is that user themes and plugins may contain unsafe code, in either that it is programmed incorrectly, for example it may not sanitise user data properly thus creating various security exploits, or that it is already programmed maliciously.

This is the reason why I programmed my own content management system to do exactly what I need to do as originally I have dabbled with wordpress with my own various websites and sites for others but got tired of updating it and figuring out errors for incompatible plugins and themes used. I have had many headaches with themes created by others where I've created a child theme and it is rendered useless when the latest parent theme is released with bugfixes and new features which creates many more bugs and stress to the end user!

Plus's:

  1. Excellent SEO out of the box
  2. Great responsive features
  3. Loads of additional features
  4. Lots of free themes and plugins
  5. Easy to use
  6. Massive user base
  7. Loads of support on forums

Cons:

  1. Frequent updates causing problems with themes and plugins, as stated above everytime an update is rolled out, you can gaurantee some plugins and themes will not function correctly.
  2. Some plugins and themes created by the public may not be safe or programmed correctly.
  3. As a website designer / developer this can be a pain to maintain.

 

]]>
http://www.adesignguy.co.uk/blog/website-design/to-use-wordpress-or-not-to-use-wordpress http://www.adesignguy.co.uk/blog/website-design/to-use-wordpress-or-not-to-use-wordpress Sat, 22 Nov 2014 23:20:19 +0000 Wordpress is a great content management system and an excellent platform overall to quickly set up a website, however the influx of updates to either the core wordpress software or plugins can render user and bought themes unuseable. This makes it a bit confusing for people that don't know much about computers and cannot program their own website. I find the code itself overly bloated, at least for what I generally need to do.

Another note is that user themes and plugins may contain unsafe code, in either that it is programmed incorrectly, for example it may not sanitise user data properly thus creating various security exploits, or that it is already programmed maliciously.

This is the reason why I programmed my own content management system to do exactly what I need to do as originally I have dabbled with wordpress with my own various websites and sites for others but got tired of updating it and figuring out errors for incompatible plugins and themes used. I have had many headaches with themes created by others where I've created a child theme and it is rendered useless when the latest parent theme is released with bugfixes and new features which creates many more bugs and stress to the end user!

Plus's:

  1. Excellent SEO out of the box
  2. Great responsive features
  3. Loads of additional features
  4. Lots of free themes and plugins
  5. Easy to use
  6. Massive user base
  7. Loads of support on forums

Cons:

  1. Frequent updates causing problems with themes and plugins, as stated above everytime an update is rolled out, you can gaurantee some plugins and themes will not function correctly.
  2. Some plugins and themes created by the public may not be safe or programmed correctly.
  3. As a website designer / developer this can be a pain to maintain.

 

]]>
chris http://www.adesignguy.co.uk/blog/website-design/to-use-wordpress-or-not-to-use-wordpress <![CDATA[To use Wordpress or not to use Wordpress?]]> http://www.adesignguy.co.uk/images/blog_images/to-use-wordpress-or-not-to-use-wordpress.jpg To use Wordpress or not to use Wordpress?166 718
To use sliders or not to use them? Although sliders look appealing, they unfortunately use lots of bandwidth which can adversely affect page load speed, which is a ranking factor on major search engines. Imagine having 4 or 5 images containing offer information at 90kb per image, thats a whopping 400-450kb to add already to the text and other images, javascript and css files to load.

I have opted for now to use a slider on this website with captions for highlighting offers and web design services as they do look attactive and are great to show off different services you do. People love them as they look aesthetically pleasing to the eye, however my thoughts are that on some websites it may look better to have a grid of 4 different small images with header text explaining the different services and offers instead, which would drastically increase page load speed, thus being more SEO friendly as the page would be smaller in file size.

]]>
http://www.adesignguy.co.uk/blog/website-design/to-use-sliders-or-not-to-use-them http://www.adesignguy.co.uk/blog/website-design/to-use-sliders-or-not-to-use-them Wed, 19 Nov 2014 12:37:29 +0000 Although sliders look appealing, they unfortunately use lots of bandwidth which can adversely affect page load speed, which is a ranking factor on major search engines. Imagine having 4 or 5 images containing offer information at 90kb per image, thats a whopping 400-450kb to add already to the text and other images, javascript and css files to load.

I have opted for now to use a slider on this website with captions for highlighting offers and web design services as they do look attactive and are great to show off different services you do. People love them as they look aesthetically pleasing to the eye, however my thoughts are that on some websites it may look better to have a grid of 4 different small images with header text explaining the different services and offers instead, which would drastically increase page load speed, thus being more SEO friendly as the page would be smaller in file size.

]]>
chris http://www.adesignguy.co.uk/blog/website-design/to-use-sliders-or-not-to-use-them <![CDATA[To use sliders or not to use them?]]> http://www.adesignguy.co.uk/images/blog_images/adesignguy-w-img.jpg To use sliders or not to use them?404 718