[stevebrown]

Hey guys,

I haven't posted in here for a long long time, but my personal website has now been updated to have fluid, responsive layout and I would appreciate if anyone could break/crtique upon it.

link: http://stevebrown.co .

Thanks!

Edit: I wrote a little blog entry about my intentions with the responsive layout: http://www.stevebrow...le-optimisation . I would love it if anyone would take the time to read it.

This post has been edited by stevebrown: 05 February 2012 - 04:45 PM

[Renaissance-Design]

The one column/two column transition in the blog is a bit ropey - the main column gets wider, then narrower by the width of the sidebar then wider again. Gives off the impression that you've designed from the device in rather than from the content out.

Edit: on reflection, that impression stems from the fact that I was resizing it in a desktop browser. Nice job.

This post has been edited by Renaissance-Design: 05 February 2012 - 02:40 PM

[stevebrown]

Renaissance-Design, on 05 February 2012 - 02:39 PM, said:

The one column/two column transition in the blog is a bit ropey - the main column gets wider, then narrower by the width of the sidebar then wider again. Gives off the impression that you've designed from the device in rather than from the content out.

Edit: on reflection, that impression stems from the fact that I was resizing it in a desktop browser. Nice job.

Still an interesting insight though, thanks. The fact that it updates in the browser from resizing is intentional, though these intentions may cause confusion to the user.

[Renaissance-Design]

stevebrown, on 05 February 2012 - 02:51 PM, said:

Still an interesting insight though, thanks. The fact that it updates in the browser from resizing is intentional, though these intentions may cause confusion to the user.

Oh, I'm chock-full of interesting insights; I'm in the middle of a responsive redesign myself. Picture my joy...

[rallport]

Just had a quick nosey opn the iphone, looks good!

Only that seems a shame you've missed is the footer text whilst in portrait view - I need to scroll horizontally to view the text. Looks fine in landscape though.

The ajax loading icon for the lightboxes is amazing!

[stevebrown]

rallport, on 05 February 2012 - 04:40 PM, said:

Just had a quick nosey opn the iphone, looks good!

Only that seems a shame you've missed is the footer text whilst in portrait view - I need to scroll horizontally to view the text. Looks fine in landscape though.

Can you elaborate? For iOS I have only tested on iPad. Android for mobile. When a device is lower than 450px wide the footer should 'stack' on top of each other and take 100% width. iPhone portrait width might be above 450 though, but still footer should be side by side with text clipped and ellipsis.

rallport, on 05 February 2012 - 04:40 PM, said:

The ajax loading icon for the lightboxes is amazing!

Thank you, though all bespoke if you are referring to the famous plugin. By the way, if you have a chance to view on desktop, the experience is very different.

[rallport]

stevebrown, on 05 February 2012 - 04:49 PM, said:

Can you elaborate? For iOS I have only tested on iPad. Android for mobile. When a device is lower than 450px wide the footer should 'stack' on top of each other and take 100% width. iPhone portrait width might be above 450 though, but still footer should be side by side with text clipped and ellipsis.

Sure. In portrait mode, the text does stack, but because it aligned to the center I need to swipe horizontally to actually view it. Also, the footer text seems a couple of points larger in portrait mode, which isn't helping. Not sure if it makes any difference but I'm using Safari on an iPhone 4S, nothing zoomed in or anything either. If I could take a screenshot I'd show you

Seems a shame to leave it, as you;ve obviously gone to a lot of effort to make the design responsive.

[stevebrown]

Bump.

Thank you for the replies so far.

[mantis]

Looks good on a Macbook/Firefox and does well with resizing and zooming.
I wouldn't mind seeing some of your book theme reflected on the other pages or something that draws it together. The underlines under the links on the hover state look good in green but are so light and fine in the normal state that they come across as artifacts and I don't know if they would be visible at a lower screen resolution.

I'm working on something similar but am evidently not as far along as you. Good job on the responsive-layoutness. I've been picking it apart to see how you got the content to stay within your book background image and yet to remain proportionate.

[stevebrown]

mantis, on 10 February 2012 - 11:43 PM, said:

I've been picking it apart to see how you got the content to stay within your book background image and yet to remain proportionate.

It's a mixture of percent measurements for the background-position, container divs and padding. It was quite difficult to do, and I've never attempted a layout like it before.

[stevebrown]

mantis, on 10 February 2012 - 11:43 PM, said:

I wouldn't mind seeing some of your book theme reflected on the other pages or something that draws it together.

I want the Journal to be a separate area to the site so I won't be applying the design to other areas. I prefer a clean simple layout for the portfolio page because I want the work to be centre of attention and stand out.

[seedism]

Nice work mr. brown, slick looking site.

Although there is the issue with the copyright line at the bottom.

When shrinking the browser window the line only breaks after the last word:

© Copyright 2012 Steve Brown. Made with glue, binary, & (here is where it breaks) caffeine

I guess that you need to add some attributes to #copyrightInner in your @media to stay within the boundaries of the screen and breaks where needed.

Hope that made any sense, although I am not a good coder yet and dont know how to change without some research.

P.H.

[stevebrown]

seedism, on 11 February 2012 - 03:58 PM, said:

When shrinking the browser window the line only breaks after the last word:

© Copyright 2012 Steve Brown. Made with glue, binary, & (here is where it breaks) caffeine

Thanks for going into detail on this one, looks like I have a few issues with the footer! I'll see if I can fix it this weekend.

[kree8or]

Nice job, but you have done one of the things i really hate on websites: the contact page (or lack of). when I click your "contact" link, i'd expect to see a page with a contact form (or at least a email address in a mailto: link, or justa image of your email add to prevent bots) , and a phone number.
What if someone was looking at your page in a web cafe? or what if someone wants to call you to speak to you? Dont want to put your personal mobile number on there? Get a cheap PAYG phone for "work" only.
Just my 2 cents worth....

[mantis]

Quote

Nice job, but you have done one of the things i really hate on websites: the contact page (or lack of). when I click your "contact" link, i'd expect to see a page with a contact form (or at least a email address in a mailto: link, or justa image of your email add to prevent bots) , and a phone number.

Ditto, I use spaces on my macbook and always dislike being whisked over to mail without warning.

[RussellBrown]

fantastic, great work

[danieldue]

The site tried to save something to my computer, Im not a fan of that, other than that, its cool enough. But when I click the images, I get this annoying GIF animation, and for all i know its loading a new page (I know its not). You should consider making the black background more transparent, so people know its a shadowbox popup..

The grafix are nice

[historygirllfc]

Just a minor thing I noticed, when I scrolled down surprised no-one mentioned it your get in touch section the linkedin and gmail links are right the wrong way. Email image goes to linkedin and vice versa

Like the site a lot great clean and simple design.

[stevebrown]

OMG I never realised about the icons. Lazy on my part.

Thank you