Skip to Content


Gallery / Team Viget« previous | next »

Team Viget image

Team Viget

Current rating: 4.5 (464 votes)

Votes are closed for All Stars entries

Review:

A new school of design is emerging, one that involves heavy CSS, javascript, and (x-d)html web standard skills. A new school of cutting-edge designers is emerging as well, one who is not afraid to dabble in javascripting to do some wonderful and amazing things, leveraging javascript libraries such as jquery, prototype and others to lighten the load. To be successful many things must be considered:

• The target audience and their browser of choice.

• Screen width and height available in pixels, with some of the best designs extending well beyond the 800 pixel width range.

• Processing power –also figuring into the overall scheme of the design for optimal performance when pushing the envelope of what is possible.

• Finally optimization and load order considerations for taking full advantage of the bandwidth available and smooth loading of all web site pages.

Does it sound overwhelming? Sometimes it is!

A team of players in all of these skills and disciplines is sometimes the best answer. Take for example the site at hand teamViget.com.

This site was specifically designed to cater to high-end designers and developers, for recruitment purposes, as well as showing off the vigetLabs.com portfolio of recent work.

The sliding navigation, when you have the processing power to view it as smoothly as possible, rivals any flash site out there, and without the inconvenience of sitting and waiting-watching the oh so nifty & annoying flash movie loading sequences, only to have to sit through another such delay after subsequent clicks –arghhh.

What to look for on the teamViget site, if you are in a hurry?

It is loaded chock full of sliding navigation mastery, showing and hiding divs mimicking pages, and easing transition calculations (provided by jQuery if you are keeping score).

Click any of the list of "Top 5 Reasons" items on the piece of paper, and a div slides from the right into view, without any of the other divs before or after, just one smooth slide. How smooth depends on your processor power trust me, if it's not smooth check it on something with more power.

Next once you've begun to marvel at the flash-like smooth horizontal sliding, click the "See Our Positions" green post-it sticky at the top of any of the inside pages, and presto-change-o the navigation on the page is now a vertical one. Go ahead click an available position.

Now the really sweet part with a job opportunity open, say Web Designer for example, scroll down if necessary and click the << Back button next to the green sticky. The vertical and horizontal div movement simultaneously slides back towards the homepage.

This dual hierarchy of navigation is what blew me away!

There's more see for yourself.

Reviewed by Tyler Gossman

The Zen of CSS DesignThe Zen of CSS Design
Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to create beautiful, progressive CSS-based Web sites.
Buy at amazon for only $26.39

There are 18 guest comments so far.

commentat 17:33 on 17 June 2007, Ty wrote:

Guarded enthusiasm is usually the order of the day around here, but what the heck... Who will be the next kid in the candy store, lol!

commentat 19:32 on 17 June 2007, Ben wrote:

One problem with the sliding-page navigation is that it breaks the back button on the browser. (Even web geeks use the back arrow - at least I know one that does).

Also, I would consider putting some explanation on the homepage about the site's relationship to the mother site vignet.com. It's not immediately clear whether this site is the main shop-front or not (it isn't) and that could be a little confusing?

commentat 10:38 on 18 June 2007, Derek A wrote:

How hard would it have been to make it work without Javascript?

I'm not a fan of sliding navigation, so I usually disable Javascript on sites that use it.

Hey presto, none of the navigation works.

Also, no offense, but what the hell is "(x-d)html".

commentat 14:51 on 18 June 2007, Derek A wrote:

@ Ryan

I know what he meant, it was just a rather poncy way of saying it.

commentat 15:15 on 18 June 2007, T wrote:

@Derek what the hell is poncy ;)

commentat 15:54 on 18 June 2007, runningwithscissors wrote:

what the hell is an @derek?

commentat 15:56 on 18 June 2007, Derek A wrote:

Touché.

commentat 18:16 on 18 June 2007, Sam S wrote:

"navigation is that it breaks the back button" - perhaps the history plugin would avoid this issue.

"How hard would it have been to make it work without Javascript?" - not impossible I would say though perhaps some parts would have to be reworked.

I myself am working on a personal project that will be similar to this site (in its use of jquery) I hope to be able to use the above to make everything sweet. I find jQuery is perfect for make JS enhanced site that are unobtrusive.

commentat 21:22 on 18 June 2007, 01010 wrote:

Using Opera 8.5 here. Click Sweet staff or Killer designs and move across. But click back and it doesn't go back. And the browser back button also is not available.

Result: yes again another unnavigable site, just like some other recent stylegala sites. Methinks, designers are very clever but not quite got it mastered yet.

commentat 22:15 on 18 June 2007, Michael wrote:

The back button issue is minor, imo. They still have named anchors that'll allow users without JavaScript enabled to easily make their way around the page.

My problem: the paper PNG is enormous. There's no reason for transparency if you're going to slide the entire background behind the element when you transition between sections, or if you're not going to make the element scalable (try adjusting font sizes). It could just as well have been an optimized JPEG, which would've loaded faster and not required PNG transparency hacks (css/ie.css).

But at the same time...who cares? Their target audience is going to have JavaScript and PNG support. I don't think they're looking to hire any visually-impaired IE users on dial-up...

commentat 22:46 on 18 June 2007, Tor Løvskogen wrote:

"The target audience and their browser of choice."

So we're back to browser specific sites?

commentat 03:12 on 20 June 2007, Nathaniel wrote:

Only took me three clicks on the individual jobs before the white panel failed to properly resize, thus hiding the "close" button at the bottom. I had to click on other jobs just to get the page sized properly again so I could return to the main menu.

This is a nice design student site. This is not a good professional site. I would be very wary of submitting my resume to a company that clearly puts style above usability, functionality, and testing.

I think professional, successful design is about communication, not using every crayon in the box.

commentat 14:00 on 20 June 2007, Erwin Heiser wrote:

There's an obvious wow factor at work here but disable Javascript and watch the site fall flat on its feet.

commentat 11:30 on 23 June 2007, Steve Tucker wrote:

Gorgeous website; most refreshingly original design Ive seen in quite a while. I particularly like the real life features such as the book shelf; looks a little bit like mine at home ;)

The JS sliding effect is awesomely smooth (at least on my machine, anyway) and well executed, though I have to agree that it does begin to tire and slow down the user experience after a short period of browsing. However for their target audience (other designers/appreciators of technical excellence) I reckon it's pretty near perfect :)

commentat 22:45 on 25 June 2007, Rob wrote:

First off thanks to Tyler for the great write-up. We appreciate the time you took to explore the site and understand our goals for this project. And thanks to everyone for your comments, questions, and concerns. We’re glad to see it sparked some great discussion.

commentat 22:47 on 25 June 2007, Rob wrote:

Like Tyler mentioned the purpose of the site is to create an awareness of our hiring needs as well as a ‘buzz’ around the CSS community in ways that our main corporate site (www.viget.com) couldn’t. We’ve received a considerable amount of traffic and good feedback, even being linked to from Cameron Moll, since the launch three weeks ago and feel that we accomplished our goals. Due to the tight internal timeframes we were forced to make some hard decisions regarding accessibility. We decided to focus on the design and functionality foremost assuming our core target audience would be using FireFox 1.5 or greater, IE6 or 7, Safari, JavaScript, and have a broadband connection. It’s becomes difficult to justify a significant amount of extra development time for a quick recruiting site when you have a lot of client work to focus on.

commentat 22:48 on 25 June 2007, Rob wrote:

Accessibility is an extremely important part of our business and theology here at Viget. Although this site becomes hard to navigate with JavaScript disabled it was a tough call we had to make with a limited time table. We decided to take a risk and in the end I think it was worth it.

@Michael – The reason for the large PNGs is due to the top sliding functionality. Without the opacity the background pattern becomes mismatched when the top jobs section scrolls down. If we could achieve the same functionality and look with optimized JPGs we surely would.

Thanks again to everyone for checking out the site and sharing your thoughts.

commentat 21:40 on 28 June 2007, Jolly good wrote:

Well, a typical SG site!

Not that I don't like it ;)

Looks great.


Gallery by month:

Gallery by rating:

Gallery All Stars:

Comments / recent

About digimurai: Very nice design. Give me more.... [more]

About digimurai: Hmmm...Design is ok but nothing gallery worthy. I ... [more]

About from scratch design studio: [...] hampered the execution of this design.... [more]

About from scratch design studio: I've no issues at all against featuring flash site... [more]

About from scratch design studio: I think posting a flash site on the (formerly?) pr... [more]


Search

Features

Stylegala BookStore
The Stylegala BookStore has a massive archive of great books for you as a professional..
Bullet madness
Bullet madness is a list of 200 bullets, arrows and icons uploaded by our users.
CSS Reference
An alphabetical list over the most common CSS1 and CSS2 syntax and properties.

Sponsors

Logo design for $149

Advertise here