Today we will be discussing Responsive Layers with Slider Pro, a WordPress plugin by bqworks. There are many good WordPress sliders out there but few come with great performance, options and ease of use. Even fewer come with the option for responsive layers.

Preface:

For those that aren’t familiar with WordPress sliders plugins these are typically seen at the landing page of many popular websites. WireFlare uses a slider plugin on a couple pages within our site, including the front landing page. This is the carousel type, or sliding image that is usually used as a focal point in web design. Some think that they are “cheesy” but the fact of the matter is that most large companies including Amazon, Toyota and more use these to grab our attention and focus our eyes on whatever they are promoting.

As a company we have used many sliders, have developer licenses for about 5 of them and extensive knowledge of their use. This blog post will describe why we use Slider PRO and getting what we want from a plugin that’s not necessarily designed for responsive layers.

When we redesigned our site in 2013 we wanted the following from a slider in order from most important to least:

1- Performance
2- HTML5/CSS3 Compliance
3- Lazy Load
4- Responsiveness
5- Extensive Layer Support

We were able to find MANY plugins that followed this order in reverse. They provided a slew of options, ease of use and superior layer support. The problem was that they loaded all of the images on initial load, had no to limited support for dequeing extra (or duplicate) scripts and overall poor performance due to the coding bloat. Some of them integrated their own caching measures in an attempt to minimize load times. Since we use WordPress optimization techniques along with a CDN we didn’t want any of that. To top it all off we could only find 2 that were HTML5 compliant.

Eventually we decided on Layer PRO. Performance wise is was neck-to-neck with Soliloquy and comparable feature wise. The deciding factor was not price (although there’s about a $275 price difference), it was the fact that Soliloquy didn’t have the layer support. Both of the plugins had requirements 1 through 4 in our list.

How to get Responsive Layers with Slider PRO

We installed Slider PRO and immediately got to work. We started our project by doing all of the standard measures, setting the dimensions, responsiveness, style and alignment along with lazy loading. We added a background image, which by the way we love the support for URL’s instead of being forced to use the media manager, and set it’s appropriate alt tags for HTML5 compliance. After hours of playing with it we almost gave up, we couldn’t get our layers to become responsive with the background image. Whenever our screen size would change we would see that the background image would scale but the layers would stay in a fixed location and not scale. So not only did we have an issue with the layers not scaling but we also had an issue with the layers remaining fixed in their original location. To top it all off the text wouldn’t re-size either. Upon searching the authors website we found this article.

By this time we already figured that we would have to set the left/top (or horizontal/vertical as the plugin calls them) to percentages. This solved the issue of them being in static positions, but the text and images still didn’t scale. In the authors article he says to use media queries to adjust text size and set percentage values for the containers. Setting a percentage for the container is nice and dandy, but it still doesn’t cause the image to scale. Setting media queries is something that we wanted to avoid like the plague. Although media queries would work, it would cause things to look funky on manual screen re-sizes and if we missed an odd dimension in the ever changing world of PC’s, Tablets and Smart Phones, it wouldn’t look like we wanted.

So in kicked our creative juices. We decided that we would use CSS to create background images and put to use some of the lesser know CSS tricks. So lets dive into the CSS shall we:

.your-text {color: #fff;font-size: 1.5vw;text-transform: uppercase}
.your-image { background:url(../../../yourimage.png); width:100%; height:100%; background-size:contain}

Obviously you’ll want to change things to fit your design strategy and use the correct url. Everything looks normal at first glance, but it’s not! For the text we are using a font size of 1.5vw. “vw” is a rather new CSS style that means “viewport width”. It scales the text according to the size of the viewport. Pretty nifty eh?

Before people rip my head off, as of this writing “vw” is only supported by approximately 50% of the browsers used in the world and still not supported in native andriod browsers. IE has supported it since 9.0, Firefox 19.0, Chrome 20.0, Safari 6.0, and Opera 15.0. We look at this 2 fold, for starters we are mainly focused on North American businesses, which bumps that percentage up MUCH higher, and second if we don’t do it this way there’s not another option that we like. Additionally, we do have 1 media query in place which removes the slider completely when being used by a mobile device. We are mostly focused on different screen sizes for desktop users and we discourage the use of sliders for mobile devices because of bandwidth and lack of readability.

The next thing that we’ll notice is that the image is set to 100% height and width but we are setting the background-size to “contain”. If we set the image to 100% without the background-size property the image will be far too large. The contain element in the background-size sets the image to 100% of the container that it’s in. In this case the container is the layer and we set the layer height and width to a percentage proportional to the entire slider. Background-size is supported by all major modern browsers. It isn’t supported by really old browsers, IE6 etc.

Then we changed all of our layers to contain the following HTML snippets:

For Text

<div class="your text div">Your text</div>

For Images

<div class="your image div"></div>

The unfortunate side of this is that you can no longer see the image and the text isn’t formatted the way you’d like it, which means LOTS of testing and adjusting. Thanks to the ultimate lifesaver Firebug we could just adjust it on screen and then make the changes in the plugin.

Although all of this can also be done using JS, we always try to lean away from scripting whenever possible.

We hope that you found this post helpful. If you did please consider commenting below.