Your help guide to the first real Content Slider app alive
Responsive Content Slider (RCS) is crazy cool. You can create highly sophisticated designs per slide, or build simple photo-based slide shows.
To create unique slide designs there’s variety of elements such as headings, buttons, icons, and (overlay) containers that can be dragged and dropped. The powerful, visual CSS tools give full style control over each and every element. Alternatively, you can simply start with one of the image-based themes, duplicate the slides and swap out the images. More elements can always be added later, the possibilities are endless as soon as you get a hang of this wonderful app!
Table of contents
If you’re looking for a specific topic to get your slide designs going, you can use the table of contents below to directly jump to the section, video or article of interest.
An exceptionally responsive and modern app
RCS is the only slideshow or gallery creator that features a viewport slider and designer defined breakpoints for creating custom responsive designs. Working with the viewport slider and breakpoints to create great user experiences on any screen is easy, as shown by this video for responsive site designer. With Content Slider, layout and design adjustments can be made in a similar way.
The app also supports the
<picture> element, allowing you to swap them out for smaller versions on smaller (mobile) screen. And as Suzanne explained, size does matter...especially when unnecessary large images negatively impacting the performance on mobile devices.
The slides rotate, using cool transition effects such as ‘fade’, ‘step’ and (of course) ‘slide’. We will be adding more, but don’t plan to go overboard with crazy effects. Player controls such as ‘play’, ‘next’ and so on are typically placed on the parts of the slideshow that do not rotate. Clearly the other elements can also be placed in these ‘outer’ parts. With granular design control over each of the content and slideshow elements, truly unique showcasing and storytelling experiences can be created. Right within the browser, without template restrictions, and embeddable anywhere.
Content Sliders are the new hipsters
Built with content blocks (HTML elements) and designed with styles (CSS), Content Sliders are very different from ‘Photo Sliders’. Most of us are mainly familiar with (old fashioned) photo sliders. Text, buttons and most other parts of the message are added to the image with a graphics editor. There is no control over the message for smaller screens; the images simply shrink and the image text, buttons or picture panoramas that looked great on a wide screen, becomes indecipherably small.
With a content slider on the other hand, all elements that make up the message are added on a canvas right within the app. And because RCS is responsive, every element, including any added pictures, can be controlled in granular detail for any screen size. There are other advantages too. The content is now accessible by screen readers and indexable by search engines. Also, you can make use of interactive CSS effects such as hover and (later) animations. After all, your website is not a big image (and for good reason), so why would your slides be?
Here’s a good example of transitional slides using content such as text and buttons mixed with images of different dimensions, background styles and more.
How to get started with RCS
The template chooser
The template chooser will give you various options to get started. If you have not worked with any of our other responsive apps, or if you have limited experience with CSS, we recommend starting with one of the default themes. They can be found under the Default folder on the left. We included two start templates with minimal content and design. To familiarize yourself with the app, we recommend replacing the existing pictures and editing the other elements before deleting or adding content. You’ll find that the styles are easy to update and mold into a unique custom design. More details on working with the
<picture> element and adding or changing images can be found here. Sometimes background images are used, more details on working with them is available here.
Alternatively you can work from with any of the fully designed themes. They feature a lot more content and showcase a number of design tricks such as (absolute) positioning player controls and moving slides over background images. These themes are a little more involved to work with, but showcase the tremendous powers this app has to offer. Pictures, colors, backgrounds — everything can be updated, replaced, removed, added or tweaked to arrive at a design that is totally yours.
You can also start off a design using any of the blank templates. RCS is the only gallery app offering a mobile first workflow; starting a design for small mobile screen and using breakpoints to improve the user experience for wider screen sizes. With the desktop down templates a design is first created for large screens. Adjustments in layout and design are then made to make the design ‘fit’ smaller screens as well.
We’ll look in a bit more detail to the two default themes to understand the different approaches in a bit. First let’s get to know this versatile app a little better.
Overview of the interface sections
The User Interface (UI) can be divided in five main sections, they are summarized below
1. The real-time preview and working area: The embedded browser displays the status of the slideshow design in real-time; any changes to the content or design are reflected in immediately. Elements can be selected by single clicking on them, or by selecting them from the drop down on the top-left of each element. Right-clicking on an element shows additional options such as duplicating or editing (text elements only). Double-clicking an element opens the heavily used Design pane.
2. The control panes. Most of the design and creation powers of Responsive Content Slider can be found under one of these panes. The Design Pane, the one in the middle indicated by the pencil icon, is probably the most frequently used. This pane is therefore activated when an element is double-clicked. The pane is subdivided in a number of sections, each featuring a plethora of design controls for styling the element. With the ability to use selectors and controls for typography, dimensions, and backgrounds, this pane works very similar to the design pane in Responsive Site Designer.
The Slide Pane is for managing the slides and their rotations. The controls found here are pretty self-explanatory, but we'll add a short overview soon. The Elements Pane contains the content blocks that can be added to the presentation. Just drag-n-drop. Then use the controls on the design pane to whip them in shape!
Oooh...the Animations Pane! You're absolutely right, we do have to write a full tutorial, including cool examples, about that. And we will. For now, please select Presentation Animated from the template chooser and go to Slide 3. Select each of the elements and compare the setting on the (animations) pane. That will probably teach you more than any tutorial could! (Also, convincing people to leave the Adobe clan and join the force will help us expand our team so we can get these types of thing out faster...)
The last pane is the Inspector Pane. It works in a similar way as the inspector tools in Chrome and Firefox. You can use it to select elements, move them around, and view the styles that are applied (at the various breakpoints).
3. The viewport slider. Grab and slide to view what the presentation looks like at various display widths. Remember, there is no magical desktop, tablet or phone width, there are way too many different devices with different dimensions. This means that the design has to look good at every width, at every pixel from ginormous to very small. Breakpoints are used to make the necessary adjustments.
4. Breakpoints. They are represented by the little dots above the width slider. Whenever a design does not look at its best, a breakpoint can be added. As of this point layout and design styles can be updated to accommodate for the smaller screen. Good examples would be reducing font sizes for headings or giving certain elements like paragraph more width so they don't become unreadably small.
Working with the start (default) templates
Using content images with the picture element in the picture theme
The two slides in the ‘picture theme’ are very similar, they both contain the exact same two elements: a picture element and a paragraph functioning as caption for the image. Only the actual picture used and caption text differ. This is a good example of a simple slideshow most people are familiar with. This simple show is both easy to extend and build out into different design.
To replace an image, click the Change button on the Design pane. This brings up a dialog where you can add images to the project and select them for use in a picture element or as background. Selecting any of the images will replace the current image with the selected one. For linking to an online image select Online Image from the drop down and add the URL in the box below.
You can use different (smaller) images for small screens.
You can follow the exact same process using the change button to swap out images at breakpoints for a smaller version. Although that is not done in this theme — I wanted to keep the styles and content at a minimum — this is generally good practice. Our article about the picture element explains this in more detail.
In the ‘Full Blown Light’‘ theme the background images are changed at the breakpoint for a smaller, cropped, version. This makes the image / slideshow load faster on mobile screens while showing specific details of the image.
The texts can be styled on the design pane. These changes will apply to the entire element. Text can be edited, and selections can be formatted in Text Edit Mode. Triple-clicking a text element will start editing mode. Now just type and format selections — add styles, colors etc. with the controls on the pane with the blue bar that appeared on the right — just like with any word or document program.
To extend the show, simply select a slide and click the Duplicate Slide button. The duplicated slide is automatically active as can be seen from the Slide Selection drop down. You can use the steps outlined above to update any text or images. The video below highlights the different steps.