This is my first post on this blog, so bear with me.
I've been working on a few changes with Soni regarding how our website may function in the future. One of the main areas I focused my attention on is the way media is displayed on our site.
Our site has quite a few profile videos as well as some pictures scattered around. However, there really isn't a consistent way that media is displayed on our website, especially pictures.
The Sydney program has a good example of one of the ways pictures are presented to users: http://umabroad.umn.edu/PROGRAMS/ASIA/sydney/about.shtml
When one scrolls their mouse over a picture on this page, a pop-up of the image is immediately displayed on the right side of the page. In essence, this works, but has some fundamental flaws.
- It isn't persistent. If you move your mouse away from the thumbnail image, the larger image disappears.
- You can't copy the larger image, or save it, to your computer. The only image you can do this with is the small thumbnail...which isn't very useful as a standalone image.
- The process used to perform this action on these images isn't useful as a whole. It only works on images, as far as I can tell.
I found a bit of javascript that works very well with images, video, text, and more. I used the Cuernavaca webpage as a model (I didn't pick Cuernavaca for any reason other than I just needed some content). You can see how this text works with images here: http://dev-lac.umn.edu/it/cuernavacatest/index.html
It also works with text, essentially removing it from being placed directly on a webpage, but keeping it very accessible: http://dev-lac.umn.edu/it/cuernavacatest/about.html (click on Learning Abroad Center)
I think this looks pretty good. My two cents are that the border, text, and arrows look a little "cartoony." Hope that makes sense, I don't know what the technical design term for that is.