Update your bookmarks

23 July 2004

23 comments

A Blue Perspective: Update your bookmarks

OK, so I lied.

When I told you at that WSG meeting that my new site would be up in a couple of days? A fib.

But now, it's live.

Personal sites always have the habit of running 500% over time because there's no budget – only sleep hours – and there's no feature limit – just your overactive imagination. And so it was with my portfolio site. I set out to make something different. Something that didn't have two columns, a header, and a footer. I feel like I've achieved that, but I'll only know once I open it to the world.

Portfolio sites in general are strange creatures. They sit outside the Internet, looking down at other sites and saying "I created you". Therefore, I felt I could take a little licence in the design of mine. As with all design portfolios it relies on its graphic content, so I let the pictures do the talking, relegating words to a small section. This also meant I could use strictly defined areas where the fluidity of text would normally predicate amorphous zones of elastic information. And I just love the compact sleekness of horizontal layouts, so here was my chance to have one.

It still, however, retains its usability and accessibility – strict Standards-compliant code, semantic mark-up, page zoomability – but that's not what it's about. I took my own advice.

I'll do a full technical write-up of the ins and outs in the next few days, but for the meantime, take a look around and change your bookmarks. (The weblog will now be accessible from http://www.themaninblue.com/writing/ and will be undergoing some changes in the next couple of weeks)

The portfolio site has been tested in Windows IE 5+, Firefox 0.8, Opera 7.5 and Safari. Support for Mac IE 5 is planned but not terribly urgent.

Categories

Comments

  1. 1/23

    Alex Taylor commented on 23 July 2004 @ 08:46

    Beautiful. I like the "module" concept, and nice colours. You've managed to break the mould indeed, and make it look good at the same time.

  2. 2/23

    Lachlan Hardy commented on 23 July 2004 @ 10:10

    You mean it hasn't only been a couple of days? I don't know, everything is a blur.

    As Alex said, it looks great, Cam. But it is insanely slow, even when loading previously loaded pages. Even with the JS turned off

    And turning the JS off does funky things to the layout on the right - sometimes, but not always

    I love that you're pushing the boundaries, but with the sort of download speeds I'm seeing I think the usability sacrifice is too great

    Hope you can work out a way to fix that. I'd offer to help but I'm hardly a JS guru

    See you at the next meet!

  3. 3/23

    Jim Amos commented on 23 July 2004 @ 10:26

    Excellent work man, Especially the in-line pop-ups. The load-speed could be improved, that's the only quirk as far as I can tell. Looking forward to the write-up.

  4. 4/23

    Jim Amos commented on 23 July 2004 @ 10:33

    BTW that header image for the climex site is awesome.

  5. 5/23

    The Man in Blue commented on 23 July 2004 @ 10:39

    Lachlan: that slow? At home (on dial-up) it takes about 30 seconds for a full initial load, but most images are used on subsequent pages, so they load pretty quickly (unless you have caching turned totally off). 'Course, here at work on 1.5Mbps it's pretty zippy.

  6. 6/23

    Andrew Phillipo commented on 23 July 2004 @ 10:40

    I'm loving your work! One question though - you designer guys always have a reason for doing everything so I thought I would ask - why did you decide to go for making most of the site components that you can hide? Don't get me wrong - its uber funky - just er... not really very useful!

    However I have thought for a long time that there are a hell of a lot of (ex-)print designers working with webstandards - it would be great to start seeing less static designs/more functional user interaction. Congratulations!

    The way I see it, all of the technology is there to be able to have richer web interfaces - just the encapsulation of many of these functions into usable controls is not. Perhaps a 'javascript control garden' would be something someone like yourself would be willing to contemplate.

  7. 7/23

    The Man in Blue commented on 23 July 2004 @ 11:12

    Andrew: As I said, portfolio sites are special. The collapsing is slightly functional, and would probably be more so on a more text intensive site -- it lets the user cater the interface to how they like it: line length, visual distraction, whatever. You can use it or you don't have to, your choice.

    It also brings some element of fun to the site -- it lets you see more of the header image at 1,064 x 768, which would hopefully get some people to play and explore and stay on the site a bit longer.

    The site isn't just about showing what I've done, it's also about what I can do. So if people play with it and find it interesting, the better for me!

  8. 8/23

    Rob Mientjes commented on 23 July 2004 @ 14:47

    Way to go Cameron! It's beautiful! The composition is special, very nice.

  9. 9/23

    Lachlan Hardy commented on 23 July 2004 @ 15:17

    Alright, I've done some testing. As I think I heard my old man tell you, we're on 1.5mbps here as well. Although perhaps the rural factor is making that more of a potential figure than actual

    Okay, from a cleared cache, initial load took 15.64 seconds. It then took 8.17 to load the Web Design page, 3.26 to load Identity Design and approximately 3.5 - 4.0 for each of the other pages

    I did a few more tests and the initial results are pretty much average. I did once get the initial load in only 11.34, but that's the lowest I got

    Compare that to the Weblog where my maximum time for an initial load is 11.16 seconds. And every page after that is an average of 3.0

    I checked the local stats and our peak access today was at 1.46mbps, so that's not too slow. And while I was running the tests, only 20 others users were online and their downloads didn't look too significant

    I guess the figures (after initial load) aren't too different. Perhaps it is just more obvious because on the Weblog you can start reading before the page has finished loading whereas on the Portfolio you have to wait for the thumbnails to move back across to the right and and for the borders etc to come back in the main text window

    Although, once each page is cached the movement is gone - usually, but not always (WTF?) - and the page load speed drops under 3 seconds

    I hope my totally unscientific testing helps!

  10. 10/23

    The Man in Blue commented on 23 July 2004 @ 15:29

    That's very helpful, thanks Lach.

    It's not a weblog and you're not going to visit it every day, so the load time reflects the greater emphasis on graphical information. Your figures are pretty much inline with that assumption.

  11. 11/23

    Lachlan Hardy commented on 23 July 2004 @ 16:32

    No worries, Cam.

    I see your point on the likely usage, and as I told you at the meet, I just love the design. I'm glad you finally managed to get it up. I'm a bit of a sucker for the delayed personal deadlines myself

  12. 12/23

    Richard Rutter commented on 23 July 2004 @ 20:57

    Cameron, nice job on the new portfolio. Like others, I'm particularly impressed with the screenshot overlays; the way you knock back the background and make sure to load the screenshot fresh from the server (as opposed to pre-downloading everything).

    However where you have more than one screenshot for a given creation, it would be nice to be able to move directly from one screenshot to the next. At the moment, one has to close the current screenshot and then open a new one. Would be nice to do this in one click rather than two.

  13. 13/23

    David Bell commented on 23 July 2004 @ 21:18

    I'm on a 512kbps adsl line and the portfolio site loaded quickly enough for me not to notice any speed problems. Initial loading time: 9 seconds.

    Very nice portfolio site. I wonder if the navigation could confuse the non-internet savvy, and there is a flickering effect in Win IE6 when the browser is resized... but I'm certainly not complaining. It's there to impress.

    Nice work.

  14. 14/23

    Unearthed Ruminator commented on 23 July 2004 @ 21:31

    Boy, you trust an aggregator service like kinja to tell you a site is updated, and yours never came up. I stopped in to see what was going on and found your portfolio. Very well done (although I did have to reload to get it to come up properly in Firefox).

  15. 15/23

    Steven commented on 25 July 2004 @ 00:08

    I love the design for the new protfolio site, love the collapsing menus and i've always loved reading your blog entries. & your hear the message' writting is second to none

    The thing that gets to me Cameron is your personal work seems to outshine your cliental projects, are there just to many restrictions with the people you've worked with, are you just following orders (so to speak) or something is it some othe limitation because i really cant see the man in blue is those pieces featured here, and on the new site.

    Your personal site is a great example, as designers we can express oursleves any which way we want when it comes to our own stuff, your surely do that with the new site, and dont be shocked to see a hundred dozen people using your collapsing menus thing once the site hits the cssvault. ( i wont even get started on why i hate that site :p)

    I just really wonder why those same touches and expression cant be somehow worked through your cliental work? well, to each his own.
    Overall Cameron your work is outstading.

    Nice job :)

  16. 16/23

    The Man in Blue commented on 25 July 2004 @ 00:15

    Yes, creating without restriction is something that a commercial designer can only dream of, unless they have their own site :o]

    Something always gets in the way -- opinion, money, time. You just have to do the best you can with what you get.

  17. 17/23

    mattymcg commented on 25 July 2004 @ 07:04

    Glad you got it out there at last Cam. Lookin' good.

  18. 18/23

    The Man in Blue commented on 26 July 2004 @ 00:34

    Re: 12

    Richard, your wish is my command: previous and next screenshot navigation :o]

  19. 19/23

    Taylor commented on 27 July 2004 @ 06:11

    Amazingly, Stunningly Beautiful work. I love it.

    Of course what fun would it be if I didn't have something to complain about? When I collapse the green one in the middle in Safari (osx), I see a floating man in blue logo on the left edge of the text content (the grey box). Or did you already know that :X

  20. 20/23

    Chris Fenison commented on 29 July 2004 @ 16:06

    Love it. Absolutely love it. Linked to it on my blog. I also experience the same problem that Taylor mentioned above with the blue man. Screen shot here (PDF) http://www.iinet.com/~cfenison/images/error.pdf

  21. 21/23

    The Man in Blue commented on 5 August 2004 @ 18:29

    Thanks for the bug reports. That problem in Safari and collapsing the sub-menu should now be fixed.

    Safari does weird stuff with roll-over background images.

  22. 22/23

    J commented on 22 September 2004 @ 05:54

    Incredible! Why don't you think about writing some tutorials.

  23. 23/23

    dezhen commented on 17 January 2005 @ 10:39

    great site -good to see some brit talent taking over the Web! Maybe once ive finished this blasted degree i can start to learn some of this stuff ( A multimedia degree based on flash with little to no css/xhtml stuff at all! :X).

    I for one concur with the last comment - tutorials on some of this stuff would be well recieved i am sure.

  24. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed