Home page in stead–the art of the home page
Home page of vispo.com
I’ve been working on my ‘home page’ recently at vispo.com. This is something that anyone who has a site does and thinks about fairly regularly. At least once a year. Possibly more. I’d like to talk about some of the issues that arise to me in that process.
The ‘home page’ is or provides access to both the ‘cover’ and the ‘table of contents’, to make an analogy with books. But it can also provide a search box, which is a quick way to the index, as it were, if it was a book, which it isn’t. The bigger the site, the more necessary a search box becomes. Blog-providers such as WordPress provide blog authors with the ability to let readers search their blogs. No programming is required by the blog author. And Google provides site authors with the ability to let readers search their sites (http://www.google.com/cse/?v ). Again, no programming is required of the site author. And it’s free, in both cases. So there really is no excuse, these days, to not make your site or blog searchable. Everyone uses search engines so much now as a means of navigation that you should put one in your site for sure.
The ‘home page’ often provides the interface into the site. In other words, the viewer returns again and again to the home page to navigate the site. Some types of sites, such as blogs, display the site navigation controls on every page of the site. This is OK if the author does not have designs on the entire monitor space. In work where the author wants the whole monitor for the art–as tends to be the case in net art– or at least the whole browser space–there is often site branding which serves not only as branding but as a way to go back to the home page. Such is the case on vispo.com. The viewer/user/wreader can click the VIsPO logo anywhere on the site to return to the home page.
In an earlier version of vispo.com, I used what are called HTML frames. Frames provide a way to divide the page space into rectangles where each rectangle can hold a different file. Which is wonderful except when you want to get back to a particular file. Bookmarking does not work very well when the site uses frames. More generally, other people find it difficult to refer, by URL, to the pages of sites that use frames. And this is definitely a problem for art sites because art sites need other people to refer to them by URL to spread the word.
The frame architecture of vispo.com was sort of blog-like in that wherever you were on vispo.com, the navigational controls for the whole site were present. But the two factors already mentioned made me decide to go to the present format: I wanted the whole monitor space for some of the work, and I wanted to get rid of the addressing problem posed by frames. Each page of vispo.com has the VIsPO logo on it, now, and clicking this returns you to the home page. This serves not only as a navigational strategy for the site but also subtly states ownership. Also, visitors can start on any page of your site. You have no idea where they’re going to first lite. So every page has to provide either navigational controls or a link to navigational controls.
A problem I’ve had with my home page was highlighted by Millie Niss to me some time ago. She commented that although my site has interesting content, the home page didn’t provide much sense of that. Just textual links to it. No visual indicators or textual descriptions. You can see that at http://web.archive.org/web/*/vispo.com (which doesn’t go back, by the way, to the frame-based architecture). Millie made what I feel is an important point. On a site like mine, which isn’t solely textual but is also visual (and sonic and programmerly) the home page should give people a sense of the site’s visuals (and audio and code).
I’ve tried to address that problem in a couple of ways. The thumbnail graphics on vispo.com provide a little visual sense of each work. And when you mouseover a thumbnail, a short textual description appears. There are 16 thumbnails on a page and there are 4 pages of thumbnails. This doesn’t cover everything on vispo.com but it covers 64 of them and the system is expandable beyond 4 pages of thumbnails.
Home page of vispo.com at a different moment.
Also, this last week, I’ve written some Javascript for the home page that sets the background image. This code randomly selects one of over 200 images I’ve created, over the years, as the home page’s background image. Consequently, the page will look different quite often, unless you visit it a lot and have seen all 200+ of them. These images give a pretty good sense of the sort of visuals to be found on vispo.com. I’ve also included some old family photos. And some screenshots taken from works on vispo.com. You can view a bunch of these background images by repeatedly clicking the colorful VIsPO logo. Or, equivalently, by repeatedly clicking the little white triangle at the bottom right of the square of thumbnail images. Or, if you’re on a PC, by pressing Ctrl+r, which reloads the page.
I’m getting closer now to a home page that is interesting to horse around on. Hopefully it’s interesting to click the white triangle repeatedly to have a look at a bunch of the background images. And hopefully, at the same time, it’s interesting to mouseover the thumbnails and read the descriptions.
It’s not as much fun to have a look at the “FULL SITE MENU” dropdown or use the search box or click one of the highlighted categories, but those are three other ways to navigate the site. The home page provides basically four ways to navigate the site. I’m trying to make it both fun and useful/functional as a navigational tool. This is the ‘cover’ of my ‘book’.
Another thing that home pages have on them, typically, these days, is an RSS feed. RSS means ‘really simple syndication’ or ‘rich site summary’. People can ‘subscribe’ to an RSS feed. When they read their RSS reader, which they use to see what’s newly published on the sites they subscribe to, your newly published material is available to them, if your RSS feed contains a notice about it. RSS became popular with the rise of blogs because blog software typically supports RSS feeds. I did a little research into the file format for RSS feeds and so came up with my own RSS file for vispo.com, which you can subscribe to. It’s available on the vispo.com homepage by clicking the little orange RSS icon.
So the home page typically provides not only navigation/interface into the site but also interface into the distribution/dissemination mechanisms supported by the site.
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
8 Responses to “Home page in stead–the art of the home page”.
Thanks for this, Jim. I really like your new design and I find things a lot more discoverable now. Your homepage is very inviting and I think that’s also partly to do with the combination amongst your thumbnails of artwork/screenshots and human faces. The faces invite you in even if its one of the artwork thumbnails you may want to click on. Of course, in terms of ‘covers’, this is well known in magazine publishing. Faces on covers sell more issues. I wonder if faces on homepage designs such as yours result in more ‘click-throughs’?
I’ve been thinking a lot about homepage design myself as I’m in the process of redesigning my own for http://www.crissxross.net/ …very slowly, in fits and starts. And there’s the rub, every hour you spend redesigning your site is an hour not spent on creating new work or finishing work-in-progress. But then, if new work is too difficult to find or ‘packaged’ in an off-putting way…
As you say, a blog is, by design, easy to search and navigate, if it’s a conventional blog, that is. I’m not sure it’s always the case with a creative collaborative blog like http://remixworx.net, especially with its arcane post titles. I worry that there are a vast number of gems buried deep in the blog that visitors may never find. It’s something I hope to address (I’m crissxross, one of the collaborators at remixworx) – but more on that later, I intend to write a piece about it which I’ll post on netpoetic.
“I worry that there are a vast number of gems buried deep in the blog that visitors may never find.”
Yes. The form of the blog, at least most of those I’ve seen, de-emphasize whatever is not recent on the blog. Although it’s reachable via the ‘archive’ or the search function.
One could change that a bit by creating a page accessible from the main menu that highlighted some work from the archive. But the whole form of the blog is currently focussed temporally on the presentation of current work. Which is one of the reasons it can’t be anything but. At the moment, anyway. Or no?
I’m currently putting a blog together. WordPress. Using a tool called Artisteer. I find it hard to get real excited about blog creation though. Feelin like a factory f f f f where’s my godel yodel?
Had a look at http://www.crissxross.net . It’s lookin real good, Christina. Much more available than what I recall of the previous version. I don’t recall Tailspin, for instance, and am looking forward to checking it out, along with much more I see on your home page that I haven’t yet.
Since I wrote the post on the homepage, I’ve added a bit more functionality to the http://vispo.com homepage. The controls at top left. These are for getting rid of the nav altogether and turning the background into foreground.
Ah yes, the controls at the top left – I hadn’t played with them before. I like the combination of functionality and playfulness and the sheer variety of ways to access the content.
I agree, designing a blog feels like working in a factory. Collaborating and/or creating content for a blog feels quite different, one appreciates its usefulness – quite a helpful environment in fact… Although, why do comment input fields tend to be so cramped? To encourage brevity perhaps? In which case… I’ll just say thanks, Jim, for your comments.
I just spent some time at http://www.crissxross.net , Christina. I’d read Fitting the Pattern previously, as you know. But I hadn’t seen Tailspin, We Drank, or Glimpse before, and enjoyed them very much.
I also noted that the whole site is a WordPress blog. I hadn’t noticed that when I initially and superficially visited the site. The homepage is not overtly bloggy. Although I suppose the does indeed define the body of the homepage within a WordPress one column, fixed width, centered page (with a header) template. Menu up top. But, still, it is not overtly bloggy in the impression it gives.
It seems you have put a lot of effort into working within the WordPress theme but trying also to broaden it out into a more site-like range. Congrats.
What are you using to edit the theme? I have noted that using Dreamweaver to edit a WordPress theme is rather a lot less than WYSIWYG because of the PHP composition of the theme.
So I have been using Artisteer. But it has its limitations. For instance, the Whitepress theme of netpoetic.com is not within the purview of Artisteer. The tabbed nature of the Whitepress theme, I mean, is not within the purview of the Artisteer editor.
Thanks Jim. My site combines a WordPress blog with a ‘regular’ static site that I designed and built using Fireworks and Dreamweaver. The homepage and all the works you mention above are actually in the static part of the site and only the blog section is WordPress – although the blog contains all the pieces I’ve made for remixworx.net so there’s a lot of art/e-poetry content in there too.
I wanted to blend both parts of the site into one design so it’s probably resulted in a homepage that looks somewhat bloggish and a blog that doesn’t look conventionally bloggish. The key was finding a background image that would work in both cases and I reproduced the top navigation in both parts of the site too.
I designed the static site in Dreamweaver and edited the WordPress theme (which is based on the Sandbox theme) to match using a combination of TextWrangler (for Mac OS) and the Firebug extension for Firefox. I also use a MAMP (Mac – Apache – MySQL – PHP) local development environment to see how my WordPress theme works in action. (WAMP is the equivalent for Windows)
Books that I found helpful in this regard were ‘WordPress Theme Design’ by Tessa Blakely Silver (PACKT) and ‘WordPress for Dummies’ by Lisa Sabin-Wilson.
OK. Looking at the source code of your homepage, i see some things that made me think blog, such as body class=”oneColFixCtrHdr”, ie, ‘one fixed width column that is centered on the page and there is a header also’, which are the sort of layout choices typically supported by blogs. i wouldn’t have thought you’d name a class that yourself.
What is TextWrangler? And Firebug? Thanks for the tip on WAMP. I suppose I should install that on my windows system.
Yes, it’s a mix and match affair, body class=”oneColFixCtrHdr” probably comes from the Sandbox theme (or maybe I started out with a very basic Dreamweaver template?)
TextWrangler is a free text editor for the Mac. Firebug is an incredibly useful web development tool that you can add on to the Firefox browser – https://addons.mozilla.org/en-US/firefox/addon/1843
Thanks; I installed Firebug. There is a very similar tool for Internet Explorer for the PC.
Concerning literary home pages, I think http://nobodyhere.com is one of my faves. It has distinct character. But it’s hard to find stuff on the site. Should be searchable.
Andy Campbell’s homepage at http://www.dreamingmethods.com is enticing. Each piece is well-presented on the home page. And the page shows signs of graphical brain activity also.
http://cmart.design.ru is a very well-done Russian home page that is erm partly literary. Conclave Obscurum is the site’s name.
My home page is very slowly wending toward being a work of art. But I also want it to be really good as a tool to nav and find stuff on the site. I need that in the home page because the site is big and you nav the site by repeatedly returning to the home page.
Leave a comment.