Not All jQuery Sliders are Created Equal

Since I am a web developer I am always looking for new subtle page designs that make a site unique.  This inevitably leads me to think about sliders.  Sliders are a real easy way to give the user a reason to stay on the page.  After all no one wants to think they are missing something important.  Sliders also allow you to accomplish multiple communication announcements without creating additional pages.

In today’s environment there seems to be sliders everywhere.  In fact there is a site that provides over 100 sliders that you can use. (Maybe that should be a slider itself).  If you don’t believe me here it is.  After reviewing several of them you start to think that all sliders are pretty much the same.  They aren’t.  Let me explain.

For several years I have always used Nivo slider.  I think it is very easy to use and provides a lot of visual animation and is great for the price -FREE.  Every once in a while I will look around for something more but always come back to Nivo.  However; I was developing a site for a local private school and to be honest there is not a lot of main page content but nice photos and graphics.  Obviously this is a problem for search engines.  I tried to follow best SEO standards and the page rankings were still not to my liking.  I went to look for other solutions and realized that I had created images for each slide.  Inside those images is text.  I realized that I could use the image as a background and then use HTML to write the text on top of the images.  Seemed like a simple idea at first.  I removed the text in the image, created the background and then set out to add text on the slide themselves.  This is where I read the following from Nivo regarding the plugin.

You also need to add some body HTML. This is usually just a <div> with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.
-http://dev7studios.com/nivo-slider/#/documentation (as of 05/28/2013)

This meant that you are only limited to HTML text on the captions.  I decided that with over 99 more options I was going to add this to my requirements.  I found FlexSlider and it allows me to add text on top.  With a few changes to the style sheet and changing the jquery library script to this new plugin I had completed this migration.  I decided to wait and run my SEO tool sets and sure enough it counted the search words in my slide as content and appears to have bumped my Google ranking a few points.

I am not suggesting that Nivo caused harm, just that content is still king and images are eye candy.  So if you have text in your eye candy then you might want to make it content again.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


2 + = 6

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>