So you Want to Build a Virtual Gallery (Frontpage)  (Thumbnail Index)  (What's New)  (Refer This Site)

   

Introduction

So, you want to start a website on your favorite artist.

Are you nuts?

Don't answer that, but let's assume you can't be stopped. Let's further say you’ve been through the JSS Virtual Gallery and like what you see. And you are really seriously thinking about putting together something like this on your own favorite artist and want to pick my brain. OR (better yet for me) you know a bit about website building and computer coding (had the benefit of some classes or a degree in the field) but want to know where I am on the huge continuum of universal understanding. <grin>

Let me put the latter question to rest – I know next to nothing about web design. The operative words here, I suppose, are “next to” as obviously I know "something" about web design. The problem is I know just enough to be dangerous. To hold myself out as a model of new virtual galleries might not be a good idea, although I’m very supportive of the idea but more to that point later.

Having given my caveat of ignorance, I’m convinced there is a great deal of merit to opening some form of dialogue between interested parties. I realize that even with my limited ability, and with the input of others, that possibly there might be some insight which could be helpful.

Understanding the scope
How many hours did this take? A letter from Jacques L'Heureux (Wed, 03 Nov 2004):
 

I am working on a similar project but with much fewer items and not a so well  know artist. We are just getting started. Our website is at jeantabaud.com.

Could you give me an estimate as to how many hours have gone into your Sargent website (coding, figure preparation but not including the research).

Thanks,
Jacques

It was impossible to really answer Jacques' question in any meaningful way, as the scope of work I have invested here spans over six intense years, and is into the thousands (plural!!!) of hours. Since both the coding, learning to code, and the research happened all together -- for me it is hard to split them out.

But take a look at what Jacques’ been able to do just since November of 2004. It’s quite a nice looking website and I suspect he’s using Dreamweaver (which is a package program) that let’s you automate a lot of the web loading and design.

David Hyde, in his essay says: “To prepare [one webplate for a gallery] where some image manipulation is required, takes about three hours – even though I use a basic template.”  That seems excessive, even to me. Maybe I just don’t want to face the ugly truth. My natural inclination is to downplay the amount of time involved – half out of embarrassment that I can’t do it any faster.

Given the consideration of the inevitable snafu, coding problems, program problems David's estimate might be a pretty fair appraisal of the time you'll be investing.


Virtual Galleries – what works and what doesn’t

To be honest, I haven’t done a lot of web surfing recently and so there are probably a lot of neat ways of doing things now that I haven’t even seen. I guess I can only speak for myself, but I have given this some significant thought on what I wanted to accomplish. So in understanding my evolutionary thought, I want to take you briefly across the spectrum of art websites that I greatly admire and point out the things I think are outstanding and the things I find limiting. In this way I hope to show you why I have done what I’ve done.

Computer Database Designs

Computer programming and databases have made some significant progress in getting huge amounts of information and images of paintings online. I should quickly point out that I know very little about them (I’m trying to learn more), so I can only speak from a user’s point of view. Individual coding of individual pages, and/or using an HTML editor (like I’ve done) is clearly a thing of the past. More and more of the big museums are moving to the Database Systems of presenting their collections -- how wonderful is that? Clearly this is the future. If I were starting over from scratch, this is the way I would be thinking. Let’s take a look at some:

As wonderful as database designs are, the restrictive nature of standardization is very limiting in what you can do when a database spits out the images to be married with any kind of narrative text  -- or at least it's been limited thus far. To try and explain the problem, as I see it, let me try and define the two main components of an art website as I understand it. They are 1) Thumbnail Pages and 2) Webplates.

Thumbnail Pages

Thumbnail Pages are kind of an index from which the visitor branches to individual works of art. Once you get past the front page, the problem is how are you going to present the art. Most choose to do it with small thumbnail images which give the viewer, in an instant, an idea of whether he/she wants to learn more about that piece of work.

Here is one of my  Thumbnail Pages

Here are some examples of other sites I GREATLY ADMIRE:

  • The Museum of Fine Arts, Boston   Thumbnail, Name, Date and Serial Number. Maybe not the prettiest thing, but it works VERY well. All database driven
  • The Vincent van Gogh Gallery  David Brooks has done some amazing stuff here. He won’t answer my inquires as to how he’s put this together, but I’m guessing he is using “Access” which is a Microsoft database that can spit out “Data Sheet” pages that look like spreadsheets like this. It is a very clear way of organizing information. Most people understand spreadsheets.
  • Web Gallery or Art Again, another “spreadsheet” type – it has a bit more “style” though – both I like.
  • Art Renewal Center I never tried to write them, it is such a huge website and I just assumed any kind of personal contact between webmasters is out of reach. Early on I think they were building these pages by hand but I assume this kind of thumbnail page has been moved to a Database design. It’s very straight forward. My website was underway before I found them, but what I like about this kind of design is that you get the documentation along with the thumbnail. To my tastes it’s a bit more appealing than the spreadsheet.
  • Online Pablo Picasso Project Though I was never able to get Enrique Mallen, Ph.D, Professor at A&M University, and creator of this site, to ever answer any of my e-mails, I’m guessing he is using programs such as DreamWeaver or Adobe Photoshop which will automate the thumbnail process in a click of a button and dump a full page of thumbnails with links already done onto one page such as this.

    What you do is put all your images in one file folder and the point the program to the file-folder. Within seconds it will spit out a thumbnail page along with Webplate pages that takes me weeks if not months to build. It’s really quite amazing and I’m a little bummed that I can’t get him to share how he’s done it. Obviously it’s some kind of database behind it that populates both the thumbnail pages and the Webplate pages.

    I know Dreamweaver and Adobe takes the file name and use it as the title with a link -- it's a bit cryptic -- as you can see. It would be easy to tweak or refine to what you want.

    Although you can upload huge amounts of paintings which automatically create thumbnails (I make all my thumbnails by hand), I never liked the way Adobe and Dreamweaver uses the file name as the caption. Still, in Enrique’s case, he has done so much with this design that I really admire -- especially given the amount of works of art he has to deal with. 

  • Frank Hyde Virtual Gallery David Hyde is the creator here and I know him well from conversing through e-mail over the years. He is a Friend of the JSS Gallery and has modeled his design, in part, off of what I have done with the Boston Public Library pages. It’s all hand coded – based on the style of web-frames. What I really like about this design is it give you BOTH the Webplate AND the Thumbnail Pages right in front of you. This “Frames” idea is nothing new, but you know what – it works well as a design element for art websites because it is so intuitive. David’s site is not Database powered.
  • Charles S. Hopkinson Virtual Gallery: built by Arthur Saltzman, again another friend of the JSS Gallery. He gives us a kind of “contact sheet” thumbnail page that you can view art by different types. This happens to be of Self-Portraits. If you look at the top of the page, you will see links to other Contact Sheets. Arthur tells me he's done all this using Photoshop -- here.

There are probably endless variations of showing thumbnail pages but this gives you some of the basic types I sort of enjoy and why i enjoy them. My Thumbnail Pages are not database powered either and this is a huge drawback, but unlike what databases can give you,  I’ve worked really hard to show somewhat of a narrative to the thumbnails which suites my objectives perfectly. I don’t know how to marry a database to this kind of thumbnail presentation, nor have I seen anyone else do it.

Webplates

This might be only my terminology (I don’t know) but what I mean is the referred page on which the features Artwork is shown. It is here (Webplates) where you are taken from the Thumbnail Pages to the full image of the work of art. Some sites choose to disregard “Webplates” all together and just give you a link to the image source – like this (link). I believe this is a mistake. Sure, it’s a fast way of presenting the art and it will save you a ton of time, but I believe it’s very important to keep the documentation with the large image as much as you can.

Let’s take a look at one of my basic Webplates.

There are 4 elements to one of my Webplates.

Right now this is set up as a single template on one page from which I add paintings. What I hope to do (using databases which I'm learning) is to split these 4 elements and automate some of it. Here are the four elements

  1. Webpage title with menu bar
  2. Painting plate
  3. Text which includes documentation, narrative, notes and thumbnails to other places.
  4. Footer giving JSS Gallery monogram, creation date, update, and copyright
Right now, only part of the footer is automated using javascript. I think there is a way to automate the Webpage Title and Menu Bar with javascript but I haven’t figured it out yet. The Painting plate and Text portions I’m hoping I can link with a database. Building the pages would then be all about plopping in the images, name, date, source, size etc in some sort of spreadsheet type form and the database would populate the page; but this is all dreaming right now – Man would I love some art loving professor of computer programming to assign a class to help me out – hint -- hint.  

Let’s take a look at how other sites treat Webplates.

  • The Museum of Fine Art, Boston This is a pretty straight forward Webplate that has all the basic 4 elements that my Webplate has: 1) Title-links, 2) Painting-image, 3) Text-Documentation, and 4) Footer. It's a bit jumbled around but they are all there.  I’m guessing here, as I can’t read minds, but I think the design idea was to show all the four elements on one screen without the viewer having to scroll down – this is something they pound in your head on good webpage design; and they’re always telling you if you don’t do it this way  it’s not professional. Harvard, The Metropolitan Museum of Art, the Fine Art Museums of San Francisco, they all do this – it’s classic textbook stuff. Personally, I think this design thinking is all upside-down.

    Think about it. What is the NUMBER ONE desire of an art lover viewer or reader (Given that they have already taken the time to click through a thumbnail) Isn’t their desire to see the largest/best image of the painting -- to fill their screen without being cropped? Primarily isn’t that what they/we all want first and foremost? Why make people click yet again at some intermediate size image to reach what everyone wanted in the first place? And what’s wrong with scrolling down for some  documentation – especially if you have the documentation at the Thumbnail page? This is just my opinion, of course, but trying to show how I arrived at my design.

It’s the LOVE OF THE ART -- first and foremost. All that librarian / scholar mumbo-jumbo (though very important and fun detail) all that textbook hoopla of what’s proper and correct web-design is a sad second cousin to the image of the art. – FILL THAT SCREEN, MAN with the best image of the art possible within file-size limitations.
  • The Vincent van Gogh Gallery Again, all the four elements present. The “Next Painting,” “Previous Painting” links are a neat feature. If I do something like that I have to manually copy the link on each page – but with a database it’s done automatically.
  • Web Gallery or Art If you click on one of the thumbnails, it takes you to a zoomable image -- which is kind of neat – Personally I prefer it my way.
  • Art Renewal Center Tremendously wonderful site. They have very large thumbnails so I guess they think they’re covered on the documentation. For me, same answer as Web Gallery.
  • Online Pablo Picasso Project As far as I’m concerned this is near perfect. It has three of the four elements of a Webplate that I think needs to be there. I just think he has really missed an opportunity to also include a more lengthy text along with the image, the text and narrative in this site is off buried by itself, and looses me.
  • Frank Hyde Virtual Gallery David has the title at the top of the page, with his links at the bottom, and there is such richness in narrative that accompanies the image. He has taken everything that I think is best about a Webplate -- it’s Perfect, perfect in every way (LOL).  Just top rate stuff. He’s even managed to get some music online to go with the lyrics of the song from which the panting is based! Bravo! That’s EXACTLY what I’ve wanted to do with my El Jaleo, but I never got around to it – and then there’s the problem of getting permission. He’s gone with a copyright free version, I'm hoping to get permission from an artist for one great Flamenco piece.
Anyway, I'm getting distracted. The problem is he, like me, does this all by hand (he more so than me) and it takes a lot of time. Actually I use some HTML programs that helps speed things up -- but more on that later.


Working with Images - understanding the problem

The Full Painting

The most imortant thing in a virtual gallery is it's images of the art. You can have the most fancy looking website with flashy graphics and cool designs but if the images of the art are small or poor -- what's the use?

Now the textbook argument for doing it by the book, besides having all the info on one screen, is that you don’t want the viewer to have to wait on some large image to load. An intermediate size image gives the viewer a chance to progressively decide to move forward. That’s all well and good for some business application, but it doesn’t work for an art website – not any that I like going to. If you give the viewer a large enough thumbnail to begin with (currently I’m sizing mine around 200 pix at the largest dimension) you can pretty much tell what the painting is by its thumbnail. At that size it comes down to this:

Do they want to see the painting, or don’t they?

If they want to see it – then give it to them!!! In the days when I was surfing at 56K from a dial-up modem I was fully willing to wait on a large image to load if and when I trusted the webmaster to give me what I was wanted. That progressive stuff – you spend all your time loading pages.

How large should the image file-size be for a painting? With the sophistication of compression programs there isn’t any reason that MOST full screen images can’t be held to around  100k level or under.

I call (this) a full screen image -- there is no set size -- it's just "big". Picked at randum I see that its file size is 56kb.


Here is my general thinking: Anything under 100k, you are doing just fine. When I start getting over 125k, I start asking myself -- just how important is this image and should I offer an intermediate size to get that load time down. At 150k red flags are waving and anything over that, you better have a good reason!

Thumbnails

The internet is a medium of tradeoffs. Even in the world of broadband we aren't in the world of perfection, or anything near it. The internet is the world of the-best-I-could-do.

When it comes to thumbnails there are three constraints to consider

1)    Clarity of the image
2)    Physical size of the image
3)    File size of the image

In a perfect world I want a large, crystal clear thumbnail, 200 to 250 pix at its widest or tallest and  no more than 3kb  in file size – that doesn’t happen very often so I have to settle for less, so does everybody else on the net.

Let’s take a look:

The Museum of Fine Arts, Boston

They have chosen to make their concessions on physical size, and clarity. If it’s physically small, the file size will be smaller and the page will load fast --
most of their thumbnails are around 1 to 2 k in size). Now it’s all a matter of personal preference, but I think these are too small. You want to be able to have a pretty good idea of the painting so a viewer can make the decision of whether to invest the time to click through to the webplate or move on – these aren’t that bad, but I’m trying to make a point. I don't like reading with my nose scraping against the screen.

Let’s take a look at the other extreme. At the Art Renewal Center --  and I know what you’re going to say. They have made NO concessions. They’re thumbnails and large, bold, crystal clear, clean and beautiful – God bless the ARC, I like their attitude but I’m afraid they have in fact made concessions. There are only 10 thumbnails on this page and it loads slow. Consider my Philip Alexius de Laszlo page with their file-size of thumbnails.

For me, here is my thinking – the physical size HAS to be at least 200 pix large on all new thumbnails I'm making – that’s the third rail I will never touch or go below. If I have to sacrifice clarity – so be it. To me a larger fuzzier image is more meaningful than microscopic clarity.

That’s not so hard until you bring in file size. There are a lot of programs out there that will create thumbnails for you -- scads of thumbnails and they will do it almost instantly with perfect clarity, but I’ve consistantly found the file size of these created thumbnails to be too large – my thumbnail pages load slow enough as it is – I’m looking for 3k perfect, 4k, 5k, 6k tops – there are always exceptions, but it gives you a yardstick or a rule of  . . . .
thumb-nails

Hey! You -- the one with your hand on the mouse! Stop rolling your eyes!

For me I want a lot of thumbnails on a page, I want them relatively large and I want the page to load fast -- now that's not asking too much, is it? -- I say with more than a little sarcasm. To get that, I have worked with each and every thumbnail personally -- sometimes they don't end up that clear -- here is one.   This is 4.62 KB.

I know, It makes Sargent look more like Monet than he is. I'm not totally convinced I've made the right concessions -- Of late -- (it's hard for me to admit this) but I've let my file size creep more towards the 6k level -- and I'm having a hard time sleeping with myself.

Programs I use to build the JSS Gallery

For the moment I offer this list of programs I’m using without much editorial as I need to get back to working on my site – but I will finish it

HTML point and click – What-you-see-is- what-you-get -– yeah right, more like What-you see-is-what-you-now-have- to-spend-hours-cleaning-up) programs I use

Mozilla 1.7 – Free,
The people at Mozilla INVENTED web browsers and they adhere to The World Wide Web Consortium. I use this extensively. I like it because if it works here, it'll almost work everywhere else -- notice the "Almost"

Microsoft FrontPage –  Cost? You pay through the nose. I hate Microsoft.

Macromedia Dreamweaver MX – Price? Your first born but supposedly it is the benchmark of programs – I’m trying to learn it -- even this needs a lot of cleaning up I've notice. Very little of my website is done with Dreamweaver thus far.


HTML Editors

EditPlus – share wear – reasonable price – A great program!

FTP

WS_FTP_LE 5.06  – the LE version is Freeware, works great

Image Manipulation

Adobe Photoshop 7.0 – Price? Ouch. But the benchmark. I use this for full size paintings and thumbnails. There are many other programs almost as good.
Structure of the Gallery (Site Index)

Section I plan to add


Notes:

   

  

Contributors

  • David Hyde  (Preparation of Virtual Galleries plus working with PDF files)
  • Arthur Saltzman (Making webpages with PhotoShop)

Natasha Wallace

This article is a work in progress. Not only do I not have all the answers, but I’m hoping other webmasters of art-websites will offer their tips as it deals with the particulars that face our niche in the WWW

 
Forum
Pop it 
 


John Sinegr Sargent Virtual Gallery
By:  Natasha Wallace
Copyright 1998-2005 all rights reserved
Created 1/12/2005