Design: best one-page site on the web?

By Laurence Veale | 4 Comments

Screenshot of the Tanya Merone website

Via the newly designed Simplebits, comes a link to the one-page portfolio of Tanya Merone, a New York based Graphic Designer.

Novel use of inpage navigation

Apart from the obvious highly attractive visual design of the site (or is it a page?), the fact is that Tanya Merone’s entire site is on just one page is quite novel, at least in this day and age.

Top navigation showing eleven links

Looking at the top navigation, you’d be forgiven for thinking that’s they are at least twelve pages on the site. But not so!

Elegant simplicity

Screenshot of contact section of Tanya Merone's website

I really love the elegant simplicity of Tanya’s use of the inpage or “within” page links to navigate around the page, but don’t worry, I don’t think that it spells the end of information architecture just yet.

However, it does force us to give a little more thought into what exactly we need in terms of design and how we should present content on your page (known as information design). We need to ask if we’re designing in more complexity than we need and, if so, for what purpose? Perhaps, like in Tanya’s case, all we need is a one page site. It certainly makes for easier maintenance and need not limit our content or our creativity.

Beautiful branding versus web standards: no compromise

Under the hood: screenshot of underlying XHTML

For someone who dabbles in a bit of XHTML and CSS from time to time, the most gratifying thing for me is to see is that Tanya’s design is underpinned by web standards (i.e. XHTML for document structure and CSS for presentation and layout). It clearly demonstrates that strong visual design need not be compromised by web standards or accessibility.

Plays nice with printers

Screenshot of print preview of TanyaMerone.com

Unlike many sites that look great on screen but print terribly, Tanya’s site prints really well too. Again, this is possible through good coding with web standards and a separate print CSS file. In short, she’s thought of everything. Kudos too to what I think is probably the best printer friendly icon ever! Printer friendly icon, copyright Tanya Merone, tanyamerone.com

Responsible use of JavaScript

Screenshot of Lightbox in action

In addition to the web standards underpinning the design, there’s also some nifty bits of JavaScript on the page. For example, on clicking on an image on the photography or websites section overlays a portfolio over the page. Tanya, like a great Irish web designer we know, uses Lightbox, some free JavaScript code, which, as described on the Lightbox project page,

is a simple, unobtrusive script used to overlay images on a page

Referred to as unobtrusive JavaScript, graceful degradation or progressive enhancement, this means that in the absence of JavaScript, the site won’t break or lose too much in the way of functionality. Again, another example of good coding!

Although Jakob Nielsen clearly frowns on the use of inpage links, I say “poppycock!”, go visit tanyamerone.com for some design inspiration.

 

4 responses to “Design: best one-page site on the web?

  1. I agree her site is nice but this isn’t the revolutionary site you make it out to be. There’s been a few one page sites out there and a few one page portfolios. Inman did a nice one called More LLC…there are others but cannot recall their names or urls at the moment. I’m working on a nice one pager site at the moment as well…take care.

Comments are closed.