Behind the scenes: how we’re making SlideDeck 2 responsive (Part 1)22 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:
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 – 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…
Basically, 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:
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.
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.