Sam Brown

The new Massive Blue

#379 12th May 2009 at 1am Article 21 Comments

Massive Blue

Today I launched my new portfolio site, Massive Blue. This has long been my online business site that drastically needed an overhaul and I finally managed to find the time to do it. Not that it was a particularly easy process, countless versions later this one emerged, I am clearly my own worst critic. Read on to find out more about why and just how big it really is; 1080!

The reasons

I’ve had two main sites for the longest time now, my portfolio / business site and this my personal blog. I felt early on it was important to separate the two, my business site for showing off work and receiving requests for new work and a personal site to write about whatever I want, work related or personal.

I originally didn’t want visitors to my business site reading my personal tirades but that has changed a lot over the last year, my personal brand is very important to me and I needed to consolidate everything under the one umbrella. If people don’t like what I write here, or a swear word or two, it’s likely that we are not going to get on in a business relationship either.

The redesign

My main goal behind the redesign was to better show off my work, quickly and easily, previous versions had too much bullshit about “we” do this and “we” do that. I want to show off my work foremost, if I can keep producing quality work that people like then quality clients will keep coming. That’s the theory anyway!

A super simple interface with obvious and clear links to projects and methods to get in touch was a primary need, I wanted to experiment a little with sizes but keep the colours to a minimum, the name really dictates the key colour in the palette.

Now I just need to get several of my clients to complete their side of the project so I can add a bunch of new stuff to my portfolio!

Massive Blue Wireframes

Why 1080

Why? Why not! Of all the people I had shown early versions of this design to, only a couple mentioned the width and one person flat out berated it (no names!), but my reasons for using a wider-than-normal design are very not as exciting as one would think. I wanted to have big images, and big text, I wanted to show large previews of sites I have created as we all know what can happen to them when clients get their hands on them!

It is a barrier for entry also, I currently get a lot of requests for work and I’d hazard a guess that I am not the right person for about 90% of them. I don’t design sites for $200 and I don’t design sites for antiquated systems or browsers.

This number wasn’t plucked out of thin air either, there has been a lot of discussion lately and Cameron Moll’s article Is it time to move beyond 960? really reinforces what I am trying to achieve. I don’t think a 1080px width is unjustified either, on both my business site and personal blog more than 80% of visitors have a browser width greater than 1096px. 1 in 5 people potentially seeing a scrollbar doesn’t phase me, 1 in 10 people to my sites still use IE and god knows what that must be like!

Do I believe 1080 is the optimal width for a site? Absolutely not! I think 960 is fast becoming the industry norm and for all the right reasons, I don’t think many sites could justify a big width and I absolutely believe you need to take your visitor statistics into account. Is this right for everybody, no. Will it be one day? Probably yes.

Massive Blue is my portfolio site with a few images, links to work and a contact form. If we can’t push the envolope on those sites, what sites can we do it on?

iPhone

iPhone version

As MobileSafari popualarity grows I felt the need, and enjoy the experience of designing a site for the iPhone & iPod Touch. I didn’t feel the need to completely recreate a mobile version of the site, it’s a simple little design that links to my latest projects and has a link to my email address. You can of course visit the entire site on your mobile device if you so wish, through some (boo, hiss) browser sniffing and cookie setting you can easily access the full version.

Be sure to have a look at massiveblue.com on your device.

I expect there to be a lot of discussion regarding the 1080 width, yes it is slightly controversial but I genuinely believe it is worth experimenting with new options, the number of sites built at 960 is vast and we need to continue to push the envelope (perhaps negatively) and explore different things. Design is subjective and it’s never going to please everyone. I hope you do like my new portfolio though!

Post a link to this on Twitter ↩

Comments

Paul Randall 12 May 2009, 02:40 #1

I have to admit, I did not see the original site, but I really like the look of this one.

I’m interested to know why you chose your portfolio page as the first page people go to, as opposed to the about page?

Elliot Jay Stocks 12 May 2009, 02:46 #2

Congrats on the launch, mate! I love it! And you’re totally right about pushing forward a progressive width like that, since that’s indicative of the way you work and the sites that you produce. Good for you, I say! Oh, and the mobile version looks beautiful, too.

Now I really need to get on with my redesign! :p

Erwin heiser 12 May 2009, 02:51 #3

I really like it, it’s simple, clean and gets to the point of showing of your work straightaway.
Too wide? Perhaps, but only if you’re still surfing with a 1024X768 res, on my MacbookPro it looked just fab.
Besides, as you point out, if you can’t push the envelope a bit on your own portfolio site… then when?

Todd Austin 12 May 2009, 03:01 #4

Really liking the simplicity of the new design and I like that your site opens with the portfolio.

Nice to seem someone going with a wider site, though I wonder what made you come to the decision to go wide. I only ask because I rarely have my browser window maximized to more than 1080 in width.

Ryan Berg 12 May 2009, 03:10 #5

While it doesn’t seem massiveblue.com needed the extra width, you’re at least taking advantage of it to make your content bigger, rather than cramming more content in at once. Overall it looks pretty good.

Do you find it’s a lot of extra work to maintain two brands (personal and massiveblue) instead of just operating under one?

Craig 12 May 2009, 03:10 #6

Is there a way for us scrollbar viewers to view the site in mobile mode only so we don’t have to see scrollbars? I’m at 1680×1050 but I always keep my browser window at 1024×768 for productivity’s sake. Thank God for Mercury Mover(mac) and Sizer(win).

Mark Otto 12 May 2009, 04:08 #7

Awesome work, Sam! Love what you’ve done with the site. That iPhone version looks hot, too. The 1080px feels great, too; great to hear that it was justified by some analytics.

Sam Brown 12 May 2009, 04:12 #8

@Paul I chose the portfolio page as the entry page as that is what I want people to see first, my work. If they like my work they will come find out more about me, that’s the order I want it to happen in anyway!

@Ryan I hadn’t in the past found it difficult, but lately I get a lot of requests for work from both massiveblue.com & sam.brown.tc – I wanted to emphasise my work while still having a seperate blog.

@Craig I purposely forward requests from the mobile site to the main site as it really is only 1 page of links to work and a link to my email. That said, I do have a couple of ideas up my sleeve that I hope to roll out in the near future to alleviate that problem for you. :)

Moitah 12 May 2009, 06:02 #9

Really ince and nifty redesign… Although I really don’t et why you don’t center it horizontally ? Could you explain, if you’d like to ?

And the iPhone version is a delight :)

Sam Brown 12 May 2009, 06:10 #10

@Moitah To be different, I don’t see any advantages or disadvantages of center aligning the site horizontally. I prefer it left aligned in this instance.

Moitah 12 May 2009, 07:13 #11

Ho okay thanks, fair enough.

Being in 1920*1200 here, having the site taking only the left half of the screen seems a bit weird… Then again, I know I shouldn’t procrastinate surf with Safari in 1920*1200 (according to Apple and the way the “Zoom” button works in Mac OS anyway). Maybe.

BTW, the commenting system on this blog is perfect. I’ve never seen anything quite like this.

Matt 12 May 2009, 12:39 #12

Seems we get the full version and not the mobile version on Android. Is it iPhone only?

christoph 12 May 2009, 17:09 #13

I really like the site!
It’s clear and reduced to what it stands for: your portfolio. I’m a fan of those sites and I think it’s the right approach to get in contact with new clients.
According to the width:
Nowadays, 1080px is no big problem and it’s suitable here.
But have you ever thought about making a fluid layout with floats? I think it would have been no problem to do so without braking your layout. Then you have not only a progressive width for most of your users, but also a user friendly alternative for the rest.

Mary 12 May 2009, 17:52 #14

Nice work, Sam! Love it, very purty. :)

kevadamson 12 May 2009, 22:36 #15

Great to see a designer right on top of their game. Awesome stuff.

Pete 14 May 2009, 05:15 #16

Two words Sam. ‘Love it’

Dan 14 May 2009, 23:37 #17

Dude, the site is fantastic! Choosing that width is a clever idea on your part. It suits the nature of the site perfectly.

Congrats!

Alex Blundell 18 May 2009, 04:48 #18

I love the simplicity of it, the same as this site, quite elegant really.

Not too sure about the width though, on my 22” monitor with 1680×1050 resolution I seem to be left with a rather large amount on blank space down the right had side of my screen.. ;)

Matt 22 May 2009, 20:53 #19

Awesome! Very nice work Sam.

How do you make an iPhone version, ie. what code do you use to do this?

Keep up the good work :)

Loz 1 June 2009, 06:39 #21

Just had a look at the mobile version on my Nokia N95, and it gives me the full version of the site. Is it one of those fixed-width iPhone/iPod exclusive ‘mobile’ sites? Don’t see the point of making a mobile site then restricting it to only a small portion of devices!

Your portfolio site is a beauty, though. Lovely work!

Commenting has closed for this article. Feel free to me.

Hi, I'm a UI designer developer based in Edinburgh Scotland working as lead web designer at foursquare in NY.

• Dribbble • Endorse • Facebook • Flickr • foursquare • Twitter