See the Code -
See it Full Page -
See Details
This pen shows a responsive list of front-end conferences. The design of the list depends on wether touch is enabled on your device; if you don't have touch enabled you'll get an animation on hover or focus. If you do have a touch enabled device, the information that is revealed via animation on non touch devices is shown to you by default.
## Techniques
This pen is built with separation of concerns in mind; this list should make sense without the CSS enabled. In this case I find a list to best describe the content within. [Hidde](https://twitter.com/hdv) [commented in a tweet](https://twitter.com/hdv/status/528197175952834560) one could argue that `article` elements could be used; [the HTML specification](http://www.w3.org/TR/html5/sections.html#the-article-element) states the following:
> The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The information that resides within—what are now list items—an independent event element, is independently distributable and reusable. So I agree `article` elements could be used—I actually did follow up on that in a project I work on. Although I'm still not sure what would be more usable; accessibility wise. I'd greatly appreciate it if you would share your thoughts on this issue.
## Issues
I would be remiss if I didn't point out the issues. Because we overlay text on images; we cannot guarantee a acceptable text to background colour ratio. In this pen `text-shadow` and gradients are used to create more contrast, _but_ it can be improved with a few more tweaks. This is also were "[Training the CMS](http://alistapart.com/article/training-the-cms)"—an article by Eileen Webb—comes into play; you could have a piece of text near an input for image upload, that asks people to please check the contrast. You could provide them a link to a tool—like WebAIM's [Colour Contrast Checker](http://webaim.org/resources/contrastchecker/)—which makes the process easier.
This also brings up accessibility and usability. First of all, I would appreciate feedback on the markup; I've used what I thought was right. But I'm not sure about some of it like mentioned earlier. Maybe a variant with `article` elements and `h1` titles would be better. Or maybe information hidden by an animation is better off not hidden.
Also, there is quite a lot of code. More than 250 lines of CSS are used to display this list. This will need to be improved.
## Tests
This pen is primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite. It has also been tested with [Tenon.io](http://tenon.io); a service that strives to test WCAG and WAI-ARIA guideline compliance. No errors were found.
### Also tested in these browsers
* Chrome 38 on OS X 10.10 Yosemite;
* Internet Explorer 11 on Windows 8.1;
* Internet Explorer 10 on Windows 8;
* Safari 7 on OS X 10.9 Mavericks;
* Safari 6 on OS X 10.7 Lion;
* Safari 5.1 on OS X 10.6 Snow Leopard;
* Safari on iOS 8 on iPhone 5, iPhone 6, iPhone 6 Plus;
* Safari on iOS 6 on iPhone 4S, iPhone 5;
* Android 4.4 Browser on Galaxy S5;
* Android 4 Browser on Nexus;
### Usable in the these browsers
* Firefox 33 on Windows 7—background dot pattern displays incorrectly;
* Firefox 16 on Windows 7—background dot pattern displays incorrectly;
* Internet Explorer 9 on Windows 7—no animations;
* Internet Explorer 8 on Windows 7—displays a simple list;
* Internet Explorer 7 on Windows XP—displays a simple list;
* Opera 10.6 on Windows XP—displays half images;
* Firefox 3.6 on Windows XP—displays half images;
### Broken in these browsers
* Firefox 33 on OS X 10.10 Yosemite—background dot pattern displays incorrectly. Also, **focus styles are not applied**;
* Firefox 16 on OS X 10.6 Snow Leopard—background dot pattern displays incorrectly. Also, **focus styles are not applied**;
* Safari 4 on OS X 10.6 Snow Leopard—list is hidden;
* Safari 5 on OS X 10.6 Snow Leopard—list is hidden;
* Internet Explorer 6 on Windows XP—content flows under the image;
* Safari on iOS 5.1 on iPhone 4S—unable to scroll;
* Safari on iOS 4 on iPhone 4—list gets cut off;
* Safari on iOS 3 on iPhone 3GS—list gets cut off;
* Android 2.3 Browser on Galaxy S2—unable to scroll;
* Android 2.2 Browser on Galaxy S—unable to scroll;
This Pen uses: HAML, SCSS, JavaScript, ,, and