You are here: Home / Dog Blog / Archives

Ooo! Shiny!

Thursday 7 July, 2005 (12:35PM GMT)

It's a Moll/Griffiths production! It's liquid! It's curvy! It's elastic! It's hack free! It's a design / accessibility orgy!

The new Vivabit design's finally live, and there's even a little colophon thingy called "Pixels, My Ass" (remember the heading... it's going to come up again in the future).


Comment 1

Really nice, outstanding work among all those fixed CSS layouts with similar design. Just a small glitch - in Opera 8 text of some headings like Welcome etc. is above background image.

So said Lubos Kmetko on Thursday 7 July, 2005 at 1:29PM GMT.

Comment 2

Damn, that IS shiny!

Really pretty,very usable and I love the way you've implemented 3-column elastics :)

So said Faruk Ates on Thursday 7 July, 2005 at 3:36PM GMT.

Comment 3

It looks great except for that small glitch in Opera 8 that has already been noted. It even looks great in Opera's small screen rendering view.

It does take some ugly HTML to get the curvy corners. I tried something similar only I added a thin black border around the edge. That took double the nested div/span tags to accomplish for the particular look I am trying for. I'm still experimenting and learning with this page for the truck I'm restoring:

So said Ahren Niles on Thursday 7 July, 2005 at 4:23PM GMT.

Comment 4

Wow, I wish you had told me to wear my sunnies... That looks freakin awsome, love the 3 col layout and I must say the colours look great. Top job!

So said Nathan on Sunday 10 July, 2005 at 7:20AM GMT.

Comment 5

I don't know if you are concerned about this but I have my text size set to +1 and am using Firefox1.0.3 and if I make the window really small the text in the middle column bleeds off the background.

The layout is really beautiful, though. It brought tears to my eyes. I hope one day to make websites like that.

So said tyrsia on Sunday 10 July, 2005 at 7:43AM GMT.

Comment 6

This is fantastic work, Patrick. The few extra (and unintrusive) elements are a small price to pay for such an outstanding design. Hats off to both you and Cameron.

So said Lauren on Tuesday 12 July, 2005 at 2:20AM GMT.

Comment 7

great! So how DOES one get PSD to valid xhtml/css?

So said erik on Wednesday 13 July, 2005 at 11:21PM GMT.

Comment 8

Shine on you crazy diamond!

So said Charles on Tuesday 26 July, 2005 at 11:03PM GMT.

Comment 9

It will appear more good if you use Flash in place of header picture.

So said toni on Wednesday 27 July, 2005 at 6:24PM GMT.

Comment 10

To #7 - You build the site from a PSD design - that's *all* you do. It isn't a magic plugin, it's site building without the design process :)

To #9 - Flash is inaccessible. End of!

Site looks grand in all; nice one.

So said Fen on Thursday 28 July, 2005 at 12:02PM GMT.

Comment 11

Saw this at @media. Good work.

"New Media User Information Architect Interface Designer for Emerging Technologies" .. God thats a mouthfull.

So said Zach Inglis on Tuesday 2 August, 2005 at 3:17PM GMT.

Comment 12

To PTG: I very much like the design & features. Perhaps a "cursor: help" on the elements with titles, to accompany the dotted line and give a visual clue to the tooltip? It feels a little odd that the cursor doesn't respond to a "live" area of content.

To #10: Flash is only inaccessible when it interferes with content or is employed as a user interface - embedded for strictly presentational purposes it's no worse than, for example, a stray presentational image in the HTML. The following markup can be used to insert a pretty little animated header for those capable of displaying it (and substitute the same static image for those who can't, as per the principle of graceful degradation):

<!-- This needs to overlay the existing tiled header background to maintain elasticity -->
<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="c.swf?path=movie.swf" />
<!-- This is the original empty div from the header; if the browser chokes on "application/x-shockwave-flash" it will attempt to display the next child of the object -->

Not strictly adhering to the separation of content from presentation, I confess - but as unobtrusive as humanly possible, and a damn sight better than most uses of Flash I've seen.

So said Chris Cox on Thursday 22 September, 2005 at 11:03AM GMT.

Comment 13

stylemaster css editor basic tutorial uses the same background image as the header image...hmmm

So said sinick on Tuesday 11 October, 2005 at 8:23PM GMT.

Comment 14

So said sinick on Tuesday 11 October, 2005 at 8:26PM GMT.

Comment 15

So liquid :) I have tried in all resolutions - it's fantastic, as commented before. Looks incredibly professional. I like it.

So said Roman on Friday 18 November, 2005 at 10:08AM GMT.

Comment 16

Man, people are becomming 'picky' in the world of web design. Which, in my mind if fantastic - it shows people are noticing small 'problems' in Opera etc. I have nothing but praise for this website, it is trully stunning. The one thing that I noticed was the contact form at the bottom of the home page. Too many designers style for stylings' sake (of which I'm sure at one point or another, we are all guilty) but that form is beautiful. Perhaps 'beautiful' isn't perhaps the greatest choice of word to describe a form, but it's a step above the rest. It is still clearly a form for users to fill in, it is (of course) semantically correct and it is accessible.

Great job. Now, I'm off to realign my forms ;)


So said Richard 'Sticky' Tape on Friday 25 November, 2005 at 3:40AM GMT.

Comment 17

Very nice design, the header looks very good - especially the colors are fine. They're friendly and lovely, I like these blue tones.

So said A. Schroth on Saturday 3 December, 2005 at 3:44PM GMT.

Comment 18

Looks great to me very well done CSS sheets!

So said Britney on Monday 19 December, 2005 at 10:08AM GMT.

Comment 19

Great design should be alot of fun for the surfers!

So said Stephanie on Wednesday 28 December, 2005 at 3:21PM GMT.

Comment 20

Nice design! =)

So said Nataly on Monday 9 January, 2006 at 12:37PM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.