FOLLOW US

Blog

SlideDeck 2 is Now Responsive!

By 65 Comments
790 Flares 790 Flares ×

SlideDeck 2 is now responsive!

We’ve talked before about how we believe that the responsive movement is the way forward for the Web, and now it’s time for us to stand by our words - starting with SlideDeck 2. Thanks to a lot of engineering trickery that we discussed a little while ago, today, we’ve updated SlideDeck 2 to be responsive! Now your sliders can automatically resize themselves to fit neatly on the page, regardless of the size of your screen or device – skip to the bottom to see how.

Try it for yourself

Check out how SlideDeck 2 reconfigures itself to accommodate for different screen resolutions. Note that this behavior can now be enabled for all of your existing SlideDecks , and all of the existing Lenses! Super cool, is it not?

The three stages of a responsive SlideDeck

The three stages of a responsive SlideDeck | Click to enlarge

Want to try it out for yourself? Subscribe for updates from the SlideDeck blog, and you can download SlideDeck 2 Lite for free to see it in action on your own site!

Get SlideDeck

We’ve also updated our free SlideDeck 2 Live Demo, so you can play with the responsive features right this minute.

 

How to make your SlideDecks responsive

As always, we’ve sought to make this changeover as simple as possible for you all:

  1. First, either purchase SlideDeck 2, or update your copy of SlideDeck 2 to the latest version, via the “Plugins” menu in the WordPress admin
  2. All of your current SlideDecks can be made responsive by simply adding the parameter “ress=1″ to the shortcode used to embed it in the page/post. Here’s an example:
    [SlideDeck2 id=XXXX ress=1]
  3. Actually, there is no step 3 – uh, that’s it!

But wait, there’s more! Simply using the “ress=1″ attribute will enable your SlideDecks to scale proportionally, based on the width of the screen that’s viewing it – but what happens if you need it to stay the same height ? Well, we’ve got another little trick baked into the latest update for you. Just add the parameter “proportional=false” to your ress-enabled SlideDeck shortcode to maintain its specified height:

[SlideDeck2 id=XXXX ress=1 proportional=false]

Don’t have SlideDeck yet? Now’s the perfect time.

Get SlideDeck

So are you going to start creating SlideDecks with content optimized for your mobile visitors? Is this a useful feature to you? Let us know your ideas in the comments!

Leave a Reply

Comments (65) Responses

  1.  

    John R. Webster

    I just gotta say that you people rock! God bless you.

    The new responsive features you added to SlideDeck 2 are right on the money. Just what the doctor ordered.

    I’ve been searching deep and working hard looking for a solution for one of my clients websites. Eureka! I have found it with SlideDeck 2 and the new responsive features.

    My client’s upgraded site is still in development, so I can’t provide a link to it here… yet. Perhaps, once it’s all done and live, I can add another post with the link?

    Let’s just say for now, I am one happy camper. Everything with SlideDeck 2 is working beautifully on computers and mobile devices.

    Your support has also been exemplary. Great support is a rare commodity these days, but yours is one of the best I’ve experienced.

    I am truly grateful for your great work and support. Keep it up!

  2.  

    Guy

    Hi I’m new to this but I found SlideDeck super easy to use. One thing I’ve noticed though is that the image switch method is different if viewed on a mobile device compared to my laptop. I’d like it work the Sam if possible is there something I need to setup. It’s so cool though!!

  3.  

    meg

    This is great, but with the proportional – what if it needs to be the same width on the computer screen? When I add this, it is great on the iphone but on the imac, it makes it much wider. How can I make it stay the same width (the width specified) on the mac?

  4.  

    Shrinivas

    Great job sliderdeck team.. Gonna try it now..

  5.  

    Steph Calvert

    Never mind, fixed it myself – added this line to the image callout in the html:

    style=”max-width:100% !important”

    Thanks for a great slider!

  6.  

    Steph Calvert

    Hey there! I’m working on a dev site right now at http://heartsandlaserbeams.com/3girlsTest/ and I’m having some trouble getting it to resize without cutting off the images. They’re set up as html slides so you can click the image to go to a specific page, any ideas?

    Thanks!

  7.  

    Nick

    Hello!

    Is there a version of Slidedeck for non cms sites?

    Thanks,
    Nick

  8.  

    Nur Ahmad Furlong

    I was really excited to see the responsive feature and started using slidedeck after being uncertain whether to invest in it previously. I really love the way this product has been put together, the wide array of options and lovely UI to make it easier to manage.

    I am very disappointed in the responsiveness though a,d find the iFrame approach really horrible to customise. Also having major problems getting responsive versions of the slidedecks I’m building to display their contents correctly without being cut off.

    I guess it’s a new feature that needs a ton of work.

    •  

      Jason

      Hey Nur

      Thanks for the feedback. Yes, the responsive mode for SlideDeck is very much a first pass for us. It was a significant engineering challenge to get it to work with all our own lenses, so it’d be very difficult to account fully for custom Lenses where we have very little insight into what you would be building on top of the plugin. I’d recommend you chat with our support team, and they’ll be able to point you in the right direction.

  9.  

    Thomas Ryan

    Hey there good people of SlideDeck.

    I was using the flickr portion of slidedeck and noticed a blank image in the slide. Turns out, this was a video on my flickr timeline. However, there isn’t an option NOT to display these in the slidedeck!

    I guess what I’m trying to say is: is there any way for you to add an option so that flickr won’t display the video in the deck? If this isn’t possible, would it be possible for the slidedeck to grab the thumbnail to use as the image? Right now it just shows up black!

    Thanks.

    Everything else is working great.

  10.  

    Greg Roth

    Thank you Jason, At this point, I am unable to access SD2 without a bunch of errors showing up on my page and individual posts where the Slidedecks are supposed to be. Also, I am unable to create slide shows for my stories. So all of my slideshows for articles that I have written over the course of the last 6 months are not showing up. I am going to deactivate the plugin until someone can help me. 24-48 hours seems like a very long time to get this issue resolved. I run an music news site and I cannot have my photos not showing up. Where can I escalate this issue? Or is there someone on these forums that can help? Thank you!

    •  

      Jason

      You’re welcome Greg! Our support forum is the best way to get help, since this is just our blog comments section.

  11.  

    Greg Roth

    Hello, I have been using SD2 with great success but now I cannot access any of my photo slideshows and if I leave the SD2 Plugin installed. I get these messages at the top of my website and also where the Slideshow should be.. Bottom line SD@ is not longer functional. I would try uninstalling and then reinstalling but I am then afraid that I will lose all os my slideshows. I currently have the Plugin disabled on my site. I have submitted a help ticket as well. Can anyone help?

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 484

    Warning: Invalid argument supplied for foreach() in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 541

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 484

    Warning: Invalid argument supplied for foreach() in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 54

    •  

      Jason

      Hi Greg

      All your created SlideDecks are stored as custom posts in the WP database, so you shouldn’t lose them if you uninstall & reinstall the plugin. If you’ve submitted a ticket, one of our friendly developer ninjas will be in touch within 24-48 hours. Sit tight, we’ll be in touch!

  12.  

    jason

    I was demoing the slider and noticed two things that would be ideal. If I use the forward/back arrows to skip around, I want to the option for the auto-play to start again. From what I see, as soon as you skip forward/back then the auto-play stops and you can’t turn it back on, forcing you to manually move through the slides from then on until you reload the page.

    The 2nd thing is related, which is if you added pause/play button option then you could turn the auto-play back on once you’ve skipped around the slides.

  13.  

    mick

    Hi guys, I just purchased the full Dev license and this feature doesnt seem to work.

    Once I set i to Responsive it cuts the width down to 300px from 962???

  14.  

    selva

    Am using this

    But the slider is not responsive. please guide me for make it responsive. Am using free lens plugin.

  15.  

    Jason Diller

    Ugh…this is so awesome. Great job guys. We love using slidedeck!

    Cheers!

    •  

      Jason

      Haha, yep, sometimes you just gotta throw your hands up and admit defeat in the face of awesomeness =) Thanks Jason!

  16.  

    Matt

    The right side of my slidedeck is being cut off a little on PC but a good amount on mobile which means that with certain lenses, the text is being cut off as well. Using proportional=false fixes it but then makes the slider a bit too big for mobile. I’ll find a fix for now. Using Esplanade theme for WP.

  17.  

    Shelley Gammon

    I’m looking for a wordpress widget that will pop up a random image (from a directory or other method) from a select group of images that will link to another page. I don’t want animation or an option to thumb through the other images – I just want a random image of a group of selected images to show in a spot when the page loads. Can slidedeck do this for me?

    •  

      Jason

      Actually, for the most part, yes it can! =)

      You would want to create a SlideDeck that has the navigation and next/previous arrows hidden, as well as auto-play turned off, and the slide order randomized. This way, when people land on the page, the SlideDeck will randomly show one of the images in the set, and not advance. Give it a shot for yourself in the free live demo – http://demo.slidedeck.com/wp-admin

      Hope that helps!

  18.  

    wilbert

    disregard my comment it is already fix.

  19.  

    wilbert

    hello i tried putting the ress= 1 so it will be responsive but the slideshow is not showing up

    if i remove the ress=1 the slider show’s up.

  20.  

    Mark Downing

    Jason,

    Is the promo closed? I just found out about your product. Tight budget. As a patriot I am working feversihly to inform my family, loved ones and friends that we are in a fight for our lives and our constitution. I’d like to be able top afford your slidedecks fully featured liscence, but just can’t find 200.00 laying aroind as a disabled veteran on a fiexed income.

    •  

      Dave

      Hey Mark, we actually just dropped the price to $49, $99 and $149 for the Personal, Professional or Developer license respectively.

  21.  

    Chad

    This is a great solution to cover all the bases, and I couldn’t imagine a better way to achieve this. However, for some of my clients, the iframe just loads too slowly, with a visible blip of the SD “loading” screen on every load of the page. This does not happen with a slidedeck placed directly on the page.

    I’d like to be able to make just the background image responsive, for example, and to integrate its responsiveness into my existing responsive themes. I’m a pretty capable developer, very handy with CSS, but diving into the tangled complexity of a slidedeck and trying to customize specific pieces is shockingly difficult. It seems that some elements are styled with the main lens stylesheet, some with the stylesheet in one of the three SD plugins, some with the styles of another of those three, etc. I can analyze a static beast with Firebug, but this moving target evades easy analysis.

    I would be very happy with some clear, concise documentation that outlines exactly what in a slidedeck gets styled from where, and in which order of the cascade. I’d like to know the most efficient way to override the huge pile of styles coming in from different places without having to resort to !important declarations that really are too big a hammer for precision work (and which totally break my media queries).

    I still haven’t seen a comprehensive guide on how lenses are put together and how to customize them, and that might be the answer I’m seeking. Any idea when you might put something like that together?

    •  

      Jason

      Hey Chad

      Thanks for the kind words! At this point, the RESS implementation for the responsive feature is just a first step – we know that we want to continue refining the feature to get better performance out of it. Expect more from us on this.

      As for the documentation, yes, SlideDecks are tricksy beasts, and far more complex than they appear, simply due to the high degree of different configurations we have to account for. It’s something we’re balancing between writing, and continuing to improve the product itself. Once we get a few more updates out to cover some popularly-requested features, we’ll likely turn our attention to opening things up for everyone to dive in and customize to their hearts’ content.

      In the meantime, we definitely encourage any intrepid souls who feel like exploring to share their work!

  22.  

    Rachel

    Got it Jason – can’t wait to use it. Thanks so much!

  23.  

    Rachel

    Hi Jason,

    I didn’t receive that DM to https://twitter.com/Rachael_be

    Many thanks,
    Rachel

  24.  

    Jason

    Hi folks – just a heads-up that our Twitter promo is now CLOSED. Make sure to subscribe for updates, so you don’t miss any more offers and announcements! =)

    Oh, and thanks so much to everyone who tweeted on our behalf!

    Jason

  25.  

    Zach

    I’ve RT’d and Followed from two different accounts and still no DM. Any chance I could get that?

  26.  

    Web Design Kipo

    Wow it is great i love responsive web design. Many people can not understand the necessity of this site you can visualize equally well on phones tablets and smartphones, but this is the future in web environment

  27.  

    Michael

    Good morning. Very excited that you’re now ‘responsive’ and hoping you’ll have time to DM my discount. https://twitter.com/MichaelKosmala.

  28.  

    Rachel

    Hi Jason,

    I retweeted and DM’d a copy to slidedeck (from @rachael_be). Apologies but don’t know how to find the tweet URL to DM to SlideDeck(!).. new to using Twitter. SlideDeck looks absolutely stunning and I cannot wait to use it! Congratulations.

    Thanks,
    Rachel

  29.  

    Mr.Hoisington

    I tweeted about the responce. May I have the DM please?
    https://twitter.com/tcamh#

  30.  

    corfian

    https://twitter.com/CorfianCreation
    can i have my dm please so can i order the Developer Edition / Thanks

  31.  

    Lauren

    Awesome! I’m not sure how to DM people who aren’t following me, but I followed and tweeted. Here’s the URL: https://twitter.com/ProctorHall/status/243153929825820672

    SD2 looks awesome by the way. This is going to blow my existing slider out of the water!

  32.  

    Nicole Cairns

    Thanks!! I just tweeted the url of my RT to you…I couldn’t get my DM to send for some reason. Please let me know what to do next in order to place my order with the applied discount.

  33.  

    Nicole Cairns

    Any chance you could give me this -25% off with my retweet today?? I’m a new customer…

  34.  

    Jeff Walberg

    Are you planning to also make slidedeck.js responsive? We’re moving towards a responsive design on a large site that uses WordPress for some purposes but another CMS for the bulk of the site. It would be terrific to use the same slider across the site.

    •  

      Jason

      Hey Jeff

      It’s in the cards, yes. This update to SlideDeck 2 is just a start – we see ourselves working to improve the responsiveness of not just SlideDeck, but all our products moving forward.

  35.  

    Sandro

    Is the discount also for SlideDeck js ?

  36.  

    Kevin Gilbert

    Ok. Scratch that. I see the settings in the widget. My apologies. I had two sites open, thought I had updated both, but hadn’t, and was looking at the widget in the non-updated site. Although, once I did get it right, updating the widget to be responsive completely altered the output. I’ll open a ticket, but just wanted to clarify the comment here.

  37.  

    Kevin Gilbert

    Way cool. I’m excited. I’ve converted over a few decks so far and overall it’s working well, though, I’m seeing some inconsistencies, but I’ll open a ticket for that if I can’t get them working well.

    I was curious as to whether the SD widget supports the new responsive features by default, or if there’s a way to enable responsive there, too. I have a theme, with a wide, widgetized home screen on which I have a slide deck placed, but being that it’s done using the widget, I’m unclear as to what I should be seeing?

  38.  

    Bryan Sayler

    Thank you! Holy cow you just made my whole entire week!!

790 Flares Twitter 235 Facebook 13 Google+ 12 790 Flares ×