Twenty Fourteen: implement an alternate "slider" view for home page featured content

[lancewillett]

When displaying featured content on the home page, allow authors to choose an alternative slider-style layout. As discussed in ​October 8, 2013 office hours and discussions with @photomatt.

@iamtakashi to work on the layout and styles.

Implementation: the alternative slider layout is off by default; the default view is the current Twenty Fourteen featured "blocks". Authors can turn it on in the same UI where they set the tag for choosing which posts become featured content. See #25549.

[lancewillett]

I've been listening to all the warning voices saying "ZOMG, SLIDERS ARE EVIL."

Two replies for you. :D

First: ​http://halfelf.org/wp-content/uploads/sites/2/2012/05/jorbin_gonna_hate.jpg :)

It's fashionable to hate on sliders right now, including but not limited to:

• ​http://weedygarden.net/2013/01/carousel-stats/
• ​http://www.nngroup.com/articles/auto-forwarding/
• ​http://shouldiuseacarousel.com/

Second: Why is it important to include a slider in Twenty Fourteen? Here's a bit more background on this feature.

@photomatt, the lead for 3.8 release and Twenty Fourteen, set this feature in motion during WCSF 2013 in the State of the Word. Naturally he's read all the articles and understood the reasons.

Though many of us might feel it's a kitschy feature -- and despite what experts think of sliders in general -- the fact is lots of folks want them. There are cases where the content in a slider doesn't need to "convert" or "perform well." It can simply be a nicer way to show content, especially photos.

Because core WordPress development operates outside of commercial constraints, this is potentially one area where we have ignored what regular users are asking for. What they use now on their sites isn't always the best experience and often feels hacky. Just look at a typical premium magazine theme to see the difficulty for the average user to make it decent-looking; often a lot of image manipulation and content tweaking is required.

Building this feature into a default theme is a way for users to get something they're asking for, but with a much better experience -- and for theme designers to see a better way to build it.

On the Twenty Fourteen front page the slider won't be the default view since the grid layout of featured posts would generally be more effective for a magazine-style site. For the alternate slider layout we are targeting a more decorative use rather than being conversion focused. By having an option in the theme, the author is free to choose.

Equally important is educating our users on when it’s best to use slider. For example, if the site content is primarily text-driven and visitors should be able to quickly scan and read all the featured content -- we'll recommend using the default grid layout. If a more photo-driven and decorative layout is desired, the slider would be the more effective choice.

Additionally, the anti-slider trend seems to ignore ever-growing mobile usage ... a slider is a more intuitive and common interaction on touch devices.

I hope that helps explain why we're pursuing this feature. Feel free to chime in or sound off in a comment, on Twitter, IRC, or the communication channel of your choice.

[taupecat]

This ticket makes me very sad. :-(

In the Twenty Fourteen meeting on Oct 8, you indicated that it was to be a "clean" slider implementation, or something to that effect. Is the slider for Twenty Fourteen (le sigh) going to be written from the ground up? Can we really improve upon something countless jQuery plugins have been doing for years (the one I use when I must implement this sort of thing is Flexslider, now owned by WooThemes)?

[Frank Klein]

Concerning the "ZOMG, SLIDERS ARE EVIL." discussion, I can't think of anybody saying that sliders don't work at all. I think the main point behind these anti-slider arguments is that most are simply thrown into designs with little thought, because that's what the client wants. As a consequence, they don't achieve the desired goals.

As such, we can view this as a chance to design a slider that actually does what it's supposed to do: provide a visually appealing way to feature blog content. I agree that swiping through slides on a touch device is actually quite a nice experience if the slider is snappy and responsive.

As far as the slider itself is concerned, there are few of good GPL-compliant slider plugins out there, and Flexslider is certainly one of them. I don't feel like WordPress should be in the business of coding yet another one. Let's start with existing code, and improve it when necessary. This would not only be time efficient but it will also maybe provide a contribution to another open source project.

[grahamarmfield]

If WP is going to include a slider with the default 2014 theme, please can whoever is building it contact the Make WordPress Accessible team so that we can help to ensure that the slider is fully accessible. There are many sliders out there already, but all of the ones I've tried have some aspect that is inaccessible or break when used with keyboard operation.

Will the slider be implemented as a plugin? I hope so because if a good WP accessible slider is created, that would be a really useful feature to use within custom themes built for clients.

[iamtakashi]

Here is a set of mockups for the slider.

On larger screen: ​https://i.cloudup.com/SZWEEqBVrC.jpg
Note:

• The proportion ratio of the image is the same as the one used in the grid layout so user don't need to worry about cropping difference between those two.
• The arrows are close to each other so it's quick and easy to navigate slides in both ways.
• The small squares that indicates the current slide and the total number of slide are placed below the post title to help the visual flow of the page: see the title > see the squares so that readers become aware of more content.

On smaller laptop (1024x768) screen: ​https://i.cloudup.com/iO9YE52JbZ.jpg
Notice the bottom of the slider is above the fold so that the arrows and indicators are visible instantly.

On iPad: ​https://i.cloudup.com/I1DQ6vBjMA.jpg
Notice each of the small square in the indicator is placed farther apart for easier tapping with a finger. The arrows are easy to tap with one thumb when holding iPad with both hands.

On iPhone: ​https://i.cloudup.com/IMyhrRB7uA.jpg
Notice the larger arrows for easier tap.

[lancewillett]

These mockups looks great, Takashi. For implementation, I don't have specific JS or CSS to recommend: we can simplify something like FlexSlider or similar GPL-compatible slider and adapt for our needs. I'm fine with using anything open source, as we'll probably re-write it anyway (we won't just use the full library).

[lancewillett]

Discussing in today's office hours (​log) about where to put the UI controls for both the tag selection and the slider / normal layout options.

Everyone agreed it'd be better UX to have both options in the Customizer instead of one in Settings > Reading and the other in the Customizer.

Also briefly discussed auto-scrolling -- I personally don't think we need it, and it could present accessibility issues. Let's loop back to that after we have a working prototype.

[lancewillett]

Replying to lancewillett:

Also briefly discussed auto-scrolling -- I personally don't think we need it, and it could present accessibility issues. Let's loop back to that after we have a working prototype.

@jorbin chimed in in IRC:

Auto-advance can provide loss of focus for keyboard navigators and screen readers. It also can make the page harder to use for people with cognitive disabilities.

[lancewillett]

Implement slider as optional layout

[lancewillett]

Patch implements iamtakashi's design + behavior with the theme, using a trimmed-down version of FlexSlider JavaScript slideshow engine as the basis for the behavior.

Big props to ​Tyler Smith, ​Matty Cohen, and ​many other contributors. Thank you! See also ​http://www.woothemes.com/flexslider/.

Note for the forked script, see my changes at ​https://github.com/lancewillett/FlexSlider/commits/twentyfourteen for all the options and functionality that was removed since it's not needed in Twenty Fourteen.

[lancewillett]

In 25979:

Twenty Fourteen: implement an alternate "slider" view for home page featured content. Props iamtakashi for the design and implementation. Slider JavaScript code adapted from FlexSlider v2.2.0 props WooThemes and mbmufffin. See #25550.

[lancewillett]

Let's open new tickets for new issues.