JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div class="padding">
<p>The "featured content slider" is a content implementation strategy you will see all over the web. If you don't know what it is, check out <a target="blank" href="http://panic.com/coda/">Panic</a>'s website (the folks who built the code editor Coda). Also known as the "Coda slider", the content slider allows designers to put more content <a target="blank" href="http://en.wikipedia.org/wiki/Above_the_fold">above the fold</a>, presumably allowing users to see more content without having to invest a scrolling action.</p>

<p>I propose that the common content slider needs a major overhaul, badly.</p>

<p>Now, while we are talking about the content slider, very similar arguments can be made for other design techniques. Consider how the principles apply across the board.</p>

<h3>Sliders are everywhere.</h3>
<p>Ok, so the first reason is a difficult one, because a lot of people might consider this to be a non-issue. A common response might be, "they're everywhere for a reason!", and that's a fair response. But the web is more complicated than that.</p>

<p>Let's take a domain where that argument <i>does</i> hold up. When a person drives a car, they very much expect a steering wheel to be in the car. In this case, steering wheels are <i>everywhere</i>. But the reason they are everywhere has less to do with aesthetics, and everything to do with commonly accepted conventions, safety, and functionality.</p>

<p>Back to our slider example, the only reason sliders are everywhere is because we haven't harnessed the fact that the web is capable of more than one type of "steering wheel"; the functionality of content display is an open field, and the convention of the slider is still young enough to be propelled forward.</p>

<p><i>So why is it bad that sliders are everywhere?</i></p>

<p>Web content is largely amalgamous; more and more people are using aggregation and social sharing sites to deliver their content. This means that the unique qualities of...

CSS

body {font-family: sans-serif; font-size: 13px; }
p { font-size: 1.2em; margin: 12px 0; }
h3 { font-size: 2.1em; padding: 0.8em 0; }
.padding { padding: 1em; }