Examples of websites that display pairs of items side-by-side?
August 31, 2013 6:12 AM Subscribe
I am designing a website for a set of museum exhibits. The curator designed the museum panels so two items are displayed on each panel and the viewer experiences them in each other's context. If we were making a book instead of a website, we would place these items on facing pages. What is the equivalent of facing pages in web layout? Can you think of websites that pair items so they are experienced together (i.e. without scrolling down)?
Each half of the pairs would have:
Any examples of other people solving this type of problem would be really helpful.
Each half of the pairs would have:
- An image, with a link to a higher-res image
- Artifact data (e.g. call number, year, artist, etc)
- 1–3 paragraphs of text
Any examples of other people solving this type of problem would be really helpful.
Are you looking for a comparable site so you can see how it's done technically? The modern way to achieve this is with divs and the "float" and "clear" CSS properties. It's actually pretty simple if you have a handle on HTML + CSS.
posted by wemayfreeze at 9:20 AM on August 31, 2013
posted by wemayfreeze at 9:20 AM on August 31, 2013
I know you said no scrolling, but I like this art site: http://whoworeitbetter.info/
posted by xammerboy at 9:37 AM on August 31, 2013
posted by xammerboy at 9:37 AM on August 31, 2013
this may or may not be applicable based on how linear the accompanying text is, but rolling stone and espn have been doing a cool sidebar thing where a fixed-position image changes based on the viewer's position in the text. this article about Aaron Hernandez has it (view on non-mobile)
posted by kelseyq at 10:14 AM on August 31, 2013
posted by kelseyq at 10:14 AM on August 31, 2013
Response by poster: moonmilk: Thank you! This reminded me of KittenWar which is similar.
wemayfreeze: Ideally I'd like to find a way to do it that doesn't require my client to learn any HTML (and allows them to add/edit content without hand-holding). But if I can't find anything, then yes, divs with floats or even tables may be the way to do it and I'll have to do all the content inputting.
posted by heatherann at 12:48 PM on August 31, 2013
wemayfreeze: Ideally I'd like to find a way to do it that doesn't require my client to learn any HTML (and allows them to add/edit content without hand-holding). But if I can't find anything, then yes, divs with floats or even tables may be the way to do it and I'll have to do all the content inputting.
posted by heatherann at 12:48 PM on August 31, 2013
Cute Fight is another that comes to mind.
Technologically, if your layout is going to stay consistent, it should be relatively easy to do using a CMS with a flexible data structure.
posted by thebestsophist at 2:32 PM on August 31, 2013
Technologically, if your layout is going to stay consistent, it should be relatively easy to do using a CMS with a flexible data structure.
posted by thebestsophist at 2:32 PM on August 31, 2013
Pick a book, any book, in this version of the Bible, and you'll see a parallel layout. But one must scroll down for more....
http://www.skepticsannotatedbible.com/
posted by Ralph at 4:34 PM on August 31, 2013
http://www.skepticsannotatedbible.com/
posted by Ralph at 4:34 PM on August 31, 2013
Response by poster: Ralph: That is a wonderful example that I wouldn't have thought of! Thank you. :)
thebestsophist: Can you tell me a little more about what you're thinking about flexible data structures? I can think of ways to do it with Drupal and custom content types (maybe? each exhibit will have a different number of pairs, and this might get cumbersome) but I was hoping to stick to more technophobe-friendly CMSes like Wordpress.
Yes, Drupal has vastly improved on the usability front. But my client is in his 70s and my other technophobe clients have been intimidated even by a pared-down Drupal 7.
posted by heatherann at 4:45 PM on August 31, 2013
thebestsophist: Can you tell me a little more about what you're thinking about flexible data structures? I can think of ways to do it with Drupal and custom content types (maybe? each exhibit will have a different number of pairs, and this might get cumbersome) but I was hoping to stick to more technophobe-friendly CMSes like Wordpress.
Yes, Drupal has vastly improved on the usability front. But my client is in his 70s and my other technophobe clients have been intimidated even by a pared-down Drupal 7.
posted by heatherann at 4:45 PM on August 31, 2013
Yeah, I still rather dislike Drupal’s admin UI.
I was thinking using something more like Symphony CMS (that may be intimidating for you as the developer if you haven’t used XSLT before, but it’s relatively easy). For Wordpress, take a look at the Pods Framework (though, I’ve found that Wordpress can be rather confusing, too).
(Feel free to MeMail me I can give you a quick example of what the admin UI with Symphony would look like.)
posted by thebestsophist at 5:48 PM on August 31, 2013
I was thinking using something more like Symphony CMS (that may be intimidating for you as the developer if you haven’t used XSLT before, but it’s relatively easy). For Wordpress, take a look at the Pods Framework (though, I’ve found that Wordpress can be rather confusing, too).
(Feel free to MeMail me I can give you a quick example of what the admin UI with Symphony would look like.)
posted by thebestsophist at 5:48 PM on August 31, 2013
In terms of layout, I'd suggest using CSS
It's important to note that this approach doesn't change the semantic context of what is being displayed. That is, the two "pages" could be
Alternatively, there's continuous columns and flexbox layout, although they require more up-to-date browsers.
I hope this helps!
posted by Bora Horza Gobuchul at 12:20 PM on September 1, 2013
display: table (link to my own site, since it provides a series of articles on using the technique). Unless you expect to deal with very old browsers, that would be the way I'd go.It's important to note that this approach doesn't change the semantic context of what is being displayed. That is, the two "pages" could be
<div> elements, or almost anything else. Actual <table> markup notoriously difficult to control, together with being inaccessible. The CSS approach also makes it easier to flip things around on mobile devices, where the presentation of "facing pages" doesn't make sense. On an iPhone, you can present the content as one continuous page using a simple @media breakpoint.Alternatively, there's continuous columns and flexbox layout, although they require more up-to-date browsers.
I hope this helps!
posted by Bora Horza Gobuchul at 12:20 PM on September 1, 2013
On another note, you might consider doing a bit crazier - laying it out like you would a magazine / book, uploading to issuu.com or another magazine displaying site, and let them sort out the fancy tech stuff. I haven't uploaded anything myself, but they do make flipping through 'pages' a lot easier.
Bonus points since you can easily reuse old print-layout books or booklets, provided someone has the electronic file that can be used on their site :)
posted by chrisinseoul at 7:11 AM on September 2, 2013
Bonus points since you can easily reuse old print-layout books or booklets, provided someone has the electronic file that can be used on their site :)
posted by chrisinseoul at 7:11 AM on September 2, 2013
« Older Tense but catchy '80s-esque synth-pop | How can I make my mother see she needs to see a... Newer »
This thread is closed to new comments.
posted by moonmilk at 9:18 AM on August 31, 2013