FOLLOW US

Blog

Behind the scenes: how we’re making SlideDeck 2 responsive (Part 1)

By On August 15, 201222 Comments
UPDATE: SlideDeck 2 is now officially responsive. Check out the announcement post.

 

It’s no secret that the responsive movement is driving the Web forward, as hundreds of different internet-enabled devices enter the market – bringing with them an innumerable variety of screen resolutions. Where before, web designers contended with a handful of different screen resolutions, the very phrase “standard resolution” is almost a punchline nowadays. We know that any design that hopes to stand the test of time needs to be responsive, and we’re in it for the long haul with SlideDeck, so we decided that the time had come – we’re making SlideDeck responsive, and we wanted to share our current progress with you guys.

Going for a stroll – into Mordor…

We’ve known for a long time that SlideDeck needed to be a responsive web slider, so in July, we put our senior uber-developer Jamie on the case to research it. His verdict? Well, Boromir would probably say it best:

Turns out, one does not simply "make SlideDeck responsive"...

SlideDecks are incredibly complicated structures, which makes dynamically resizing them to fit any screen size is somewhat of a significant engineering and design challenge. And by “significant”, we actually mean “chest-tighteningly massive”. First, we’d need to figure out how to calculate the size of the frame containing all the SlideDeck elements – not so bad, right? Then we’d need to dynamically determine the positioning of each interaction element, including:

  • Nav arrows – All 10 variations, in both the horizontal AND vertical configurations
  • Overlays – Left AND right-aligned
  • Content areas – positioned at the top, bottom, left & right
  • Nav thumbnails/dots/titles – positioned top, bottom, left & right
  • Font sizes – for each font
  • Video play buttons

…should I go on?

Anatomy of a SlideDeck

Anatomy of a SlideDeck – now multiply this by 9 different Lenses & 13 Content Sources! (Click to enlarge)

In order to make SlideDeck responsive, we’d need to be dynamically repositioning all of these items. In realtime. For each Lens. At any given size & configuration/combination…

Our heads (almost) asplodeBasically, if our development team’s brains somehow didn’t explode simply writing the code, we’re pretty sure your browser would, while trying to process such a beast. Generally, we try to improve the internet, not break it.

Once we’d managed to get Jamie sedated and speaking coherently again, we took a step back. This was going to take some rethinking…

Making SlideDeck responsive (or, how do you eat an elephant?)

Answer: one bite at a time. We started asking samples of our users what they wanted out of a responsive SlideDeck. For instance:

  • Does it have to look exactly the same?
  • Do all Lenses need to be responsive, or should we make new responsive-compatible Lenses?
  • What do you mean when you say “responsive”? What’s your understanding of the term?

We also considered how other popular slider plugins offer responsive capabilities. We found the answer is they keep it simple. The majority are primarily image sliders only, and those that are responsive and support custom HTML are only truly responsive if you code them that way. After sifting through the, ahem, responses (sorry, couldn’t resist), we determined that the best way forward was to make all SlideDecks responsive. This way, it’d apply retroactively to all your current SlideDecks. Also, we love our Lenses, and couldn’t let them go quietly into the night…

Server-side calculations to the RESS-cue!

After much tinkering and late-night experimentation, Jamie & the dev team hit upon a method that was so crazy it just might work – RESS. RESS stands for REsponsive with Server-Side Components. It’s pretty technical, but here’s what I understood when Jamie patiently explained it to me for the 6th time:

  • When your page is loaded, SlideDeck outputs some markup to the page (for SEO purposes), but then instantaneously replaces it with an iframe that’s sized to fit the screen on which it’s being viewed.
  • This iframe clears an appropriate amount of space on the page, then requests an appropriately-sized version of your SlideDeck from your web server
  • The server then dutifully assembles, sizes, and then fires back the SlideDeck that the page ordered, into the cleared space on the page. This can potentially be repeated if the page’s column size changes.

Picture the 4th down of the last offensive play in the Superbowl – the defending team represents the target page, with all of its associated content elements clamoring to dogpile on top of SlideDeck, our clutch quarterback. The iframe is our hero’s offensive line – it clears out a neat little pocket of space among all the other HTML elements around it, giving SlideDeck the room it needs to throw out a game-winning pass (i.e. your slider) – before it gets pounded into the ground. Touchdown!

Seeing it in action

Perhaps it’s a little easier to understand when you see in action. We’ve set up a prototype of a RESS responsive SlideDeck here:

http://bit.ly/ressponsive

Play with it! Resize the browser, visit it on your smartphone, or iPad, or Nexuses (Nexae?), for the Google-inclined among you, (sorry, they’ve been popping up in the office, and are super-sweet). FULL DISCLAIMER: this is just a prototype – we’re still feverishly working on the polished functionality, but you can at least see in theory what we’re going for here.

In summary

RESS-ponsive is coming…With a decent proof-of-concept in our pockets with this prototype, we’re now heavily into development of this critical feature, and expect to release it to much fanfare very soon. Stay tuned for more announcements!

In the meantime, tell us: Is the RESS technique close to what you’re looking for? Is it “close but no cigar?” Would you suggest a different approach? This feature is for you guys, our users, so we’d love to hear what you think.

 

Leave a Reply

Comments (22) Responses

  1.  

    forex signals software

    Highly energetic article, I loved that bit.

    Will there be a part 2?

  2.  

    George

    Hey great slider. looks beautiful! But i am having a problem with the responsive side of it. when I add [ress=1] to my implement code the width of the slider expands to take up the whole page. Is this a known issue or do you think it is my theme?

    Was thinking of buying the pro version but not sure if i cant get it to look properly on my site :-/

  3.  

    Micha

    This truly is great news. Thanks for publishing the update. I was waiting for this and this just made my day (and my website). Keep up the good work and happy coding!

  4.  

    Chuck

    Great news. SlideDeck 2 is now responsive! Thanks for all your support and patience during this process.

    Check out the announcement post for more details: http://www.slidedeck.com/blog/slidedeck2-is-responsive-celebrate-save/

  5.  

    Jorge Ihlenfeld

    Just a clear response for a growing need.

  6.  

    Micha

    Thanks, Jason.
    I am looking forward to the day when it’s ready.
    Happy coding and all the best (coffee)!

  7.  

    Terrell

    You guys should really consider the option of adding video URL’s instead of the latest from a certain channel

  8.  

    Josh Gray

    Looking forward to this guys! You’re awesome! Keep it up!!

  9.  

    Micha

    Hi guys,
    Thanks for making SlideDeck responsive. That is very much appreciated!
    I am currently building a new fully responsive WP site and included a Slidedeck (and want to build a few more). Hopefully I can launch the new site soon.
    Do you already know when you’ll publish the responsive SD version? Or at least a beta that I can use.
    Thanks a lot,
    Micha

    •  

      Jason

      Hey Micha

      I can’t say exactly when, but it’s very, very close. Keep your eyes open for the announcement!

  10.  

    Ian Lowell

    Hey Guys,
    This is looking pretty good. I’m on a fast connection and when re-sizing down the content is a bit ugly for a moment until you get the new size served. I considering purchasing and am still kicking tires but most definitely the nicest slider I have come across so far. I respect the idea to port everything! At the same time I may release them as they are complete it would make things easier for me to buy it if you had even one lens available for a responsive mode.

    •  

      Jason

      Yep, what we’re working on right now is getting the refresh snappier (although this largely depends on the machine doing the server-side processing), and making smart choices about which elements to hide/show at different screen resolutions. We’re real close with this one, but we don’t want to let it out of the stable until it’s a solid solution for you guys.

      Keep ’em peeled!

    •  

      Jamie

      Hey Ian,
      Thanks for the feedback. The Dev. team has a few tricks to make iFramed SlideDecks quicker in general (it’s all we’ve been talking about lately). Those will likely follow the responsive update. If you want to see a slightly snappier version of the RESSponsive SlideDeck, check out my site: http://jamie3d.com as I’m playing with a more polished version of the plugin there while testing it.

  11.  

    Albert

    Nice feature, but PLEASE, make SlideDeck to be full compatible with webkit browsers, as for example, you know FILEMAKER since latest version, let-s you run databases on your ipod, iphone and ipad, and also from WIndows PCs or Mac computers, and you can browse any site using the embedded webkit browser -it uses all features from SAFARI-, but the ONLY sites you can´t browse nice, are sites that have SlideDeck on its homepage or at another page.
    I really hope you could fix this before launching the responsive version.

    •  

      Jason

      Hi Alberto

      SlideDeck actually is fully compatible with Webkit. We have no control over how Filemaker implements the browser preview functionality in their application, and it’d be tough for us to accommodate for that, as it’s not a true web browsing experience (nor is it intended to be). There’s bound to be other sites that look fine in Safari, yet misbehave in this preview, no? =)

  12.  

    Ian Scroggins

    This is awesome, guys! I never expected the lenses to stay in tact, just possibly the color choices and the basic transitions. Looks pretty darn good though… Thanks!

    •  

      Jamie

      Thanks for the feedback Ian! We’re glad you approve of the approach, and that you appreciate what a challenge this is going to be.