Examples of Great Content - cdig/docs GitHub Wiki

Let's capture some other content from elsewhere on the web that does a "module"-like thing better than we do.

Stable Attribution

https://www.stableattribution.com

Some electronics textbooks

Doing-centric explanatory mediums

https://andymatuschak.org/doing-centric/

This article isn't a great example itself, but it's a discussion of (including links to) some great examples.

Not necessarily great content, but some interesting UI work for the teacher, for the views of student's scores and projected progress and such.

Microsoft: Project Spark

http://news.microsoft.com/stories/project-spark/?location=adventurer

Pro: The implementation is admirable. Good layout and graphic design that integrates nicely with the content (eg: hex-grid image / video button), the responsiveness works well, the sidebar navigation is effective, etc.

Con: The writing and concept are pretty bad. The site is janky on Safari. It probably works great in IE.

NY Times: What China Has Been Building In The South China Sea

http://www.nytimes.com/interactive/2015/07/30/world/asia/what-china-has-been-building-in-the-south-china-sea.html

Pro: The article works every bit as well on iPhone as it does on a Mac. Nice use of interactivity (using it only where necessary, not just for pointless flashiness). The many "cd-map"-like graphics are excellently done, especially considering the need to be highly responsive.

Con: About halfway down the article, they have a graphic showing how a dredger sucks up sediment from the seabed and pipes it to the reef. The graphic is greatly wider than it is tall, so getting it to work on iPhone in portrait would be a hard challenge. So on iPhone, it just doesn't even show the graphic at all. Which.. is one solution, I guess.

Chart: Failing Black Students

http://www.tampabay.com/projects/2015/investigations/pinellas-failure-factories/chart-failing-black-students/

Pro: A great combination of a stationary animated graphic, and short bits of explanatory text.

Con: Scroll-jacking is a bit janky.

What's Really Warming The World?

http://www.bloomberg.com/graphics/2015-whats-warming-the-world/

Pro: Neat use of animation with short captions.

Con: Scrolling is a weird way to navigate.

Bosch: The Garden Of Earthly Delights

https://tuinderlusten-jheronimusbosch.ntr.nl/en

This is masterfully executed. Our Live Schematics are a few steps short of this, but they're very important steps, and we should push hard to achieve this level of immersion and utility in our work. Example: zoom in to parts of the image, and you hear sounds based on the details at that point in the scene. _We can do this, easily!_ Another critical detail: The (excellent) voice over narration has a control on the left side, with a "show text" button underneath it. The text is available, but they do a wonderful job of keeping it out of the way until you want it. For "stage nav", the little navigator control in the lower left is incredibly helpful. The scrolling and click-to-drag panning is just fine, but the keyboard also works (shift +/- to zoom). I suspect that the lack of a panning animation when using the arrow keys was to avoid motion sickness — people using the keyboard will likely be less savvy (or less able) users. Giving people an excellent mouse-first experience is a no-brainer! Why didn't we do that before?(edited)