We're going to be launching our new site in the next couple of weeks, waiting on the copy writer to come back with the copy, so it's full of lorem at the moment.
Would love to get peeps feedback and see what you all think. Definitely not finished yet so still a few bugs laying around and have done cross browser fixes yet.
I'd like to get your feedback on the look and feel as well as the responsiveness.
Obviously if you spot any glaring problems or glitches please say!
@Paulie_D - Nope not twitter bootstrap, all from the ground up, built the grid and the buttons manually etc. Re: international phone number - we pretty much just cover the UK to be fair.
@alexmccabe - Yeah I'm not sure on the minimum width yet, going to dig into our analytics and make sure we haven't had too many hits from sub 320 devices.
The only thing I would suggest is to make the texture a bit more transparent. You also might want to rethink the <title> for the 'News' page. Everything else is pretty solid.
@andy_unleash I just think it's too much. I would open it in Photoshop and put the fill to 50%. It looks much cleaner. By the way, if you capitalize "Design" you should do the same for "development".
Hmm thanks for having a look, to me though it just looks too close to white which is something we wanted to avoid. Having a nice texture there really works for the inside pages where the content areas have a nice paper overlay feel to them.
Re capitalising development, it's just that way grammatically but I catch your drift, the copy writer is probably going to be redoing the wording anyway.
It's a really well designed site, I personally really like it.
I like the layout and the fonts etc.
Oh yeah in the contact area, you spelt "achieve" incorrectly.
Other than that it's really good.
I checked it on my desktop and my tablet, both look great.
Looks amazing, @andy_unleash. My screen tends to make colors look a tad lighter and that made the nav in the top right just a tiny bit hard to catch my eye at first. But the colors definitely match and it looks great.
If you don't mind, what technologies and packages did you use for this site? I'm always curious about that kind of stuff. (I mean, did you use jQuery, HTML5BoilerPlate, cakePHP, etc?). Will you have a humans.txt for the finished product?
Thanks all, @obscurecoder - nice spot on the typo, will get that fixed.
@pmac627 - Thanks for the feedback on the nav, it's slightly transparent right now so will tweak it a bit to make sure it's more visible.
Re: packages, JQuery is the only library we're using, as well as Modernizr, other than that it's all from scratch.
I'm using SASS/Compass as my preprocessor for the CSS to speed everything up and make life easier, but I really wanted it to have a custom grid and have everything geared to be perfect as we need it.
Re: humans.txt - maybe, I usually use them on customer sites just to say hi to fellow devs poking around but for our own site not sure it's worth it since all of our details are on the site itself.
Well done. Just a one thing. Your paragraph font color could be little sharper (darker) so it can can stand out and send that textured background further back instead being in my face and making me focus little harder to read as I would liked. Great job.
I like it! I think the texture is the right color also. On one of my monitors the side bar stuff (where the texture is the bkg) the text is kind of light.
I keep one light and one dark that way I can see how it works with both sides of the spectrum... knowing full well that there are many poorly/overly lit monitors out there.
Echoing what everyone's already said: I think it looks great :) I particularly like the colour scheme.
Just one thing, though. It might just be the internet connection I'm on, but the Portfolio page, the images took quite a while to load. Is it necessary to have them 678kb when they're only 440px square?
@kristinh I think 'enquire' is used in the UK, while 'inquire' is used in the US, so it's correct for its location :)
As mentioned by @pmac627, the contrast is a bit low in places (most notably the navigation, the contact form, and the near invisible footer).
As mentioned by @chrisburton, the background texture seems a bit intense. Also, as a general tip, try and use a solid background-color, and then a transparent texture. That would make decreasing the intensity much easier, and it wouldn't affect the colour at all.
The buttons don't fit in with the site that well. You aren't really using shadows or gradients anywhere else, so I would lose them on the buttons. I'd also drop the shadow on the content container; it also looks a bit odd.
@chriscoyier Can't wait for you to fix the markdown styling :)
@stillb4llin - A few people have noted that the texture does bleed a bid much and dull out the text, will definitely look at fixing that, either darkening the colours of the text (like the nav & sidebar stuff) probably by about 10%.
@david_leitch - Yeah the portfolio stuff is still under development, I want high quality images and am working out a fallback for @2x resolution for retina at the moment, so those images at the moment are non compressed and super chunky - will be switched out for a lightweight alternative soon.
@joshuanhibbert - Thanks dude, will look at the shadowing stuff. The main content shadow is mainly to make it appear like paper laid on top of the cardboard style background. Re: the buttons, any ideas on an alternative? I've mainly built them out just to be fun tactile nubbins and they're using the main colours.
@chriscoyier - Yes please do fix the code/pre issues! Pretty please with cherries on top!
@chriscoyier - For me (Chrome 23) I have quite a lot of problems getting pre & code to work, half the time it just is invisible, so I'll type out a bunch inside pre & code tags and then once submitted it just isn't there. When clicking edit it's all there, just being stripped out front end. Like below;
This is wrapped in a div
This is wrapped in a span
CSS & JS usually are fine, but HTML is unreliable in its output for me.
Good work! Few issues - it breaks in IE8 and less ( not sure of your target users tho). You might want to consider appending your Html 5 elements to the DOM for wider support. It might be personal preference, but I find your portfolio list a bit too 'in-your-face' kind of, you may want to consider reducing it and increasing the gutters.
@philben - Cheers, haven't done cross browser fixes (read, IE8+ support yet). To be honest, I'm not even going to bother firing up IE7, percentages are so low nationally and in our analytics.
When you say "appending your HTML5 elements to the DOM for wider support" - can you explain what you mean? I'm using HTML5 shiv and a block reset for HTML5 elements if that's what you're getting at?
@andy_unleash - Yes, Html5 shiv will do the same job, I should have clarified that. But currently it's showing un-identified element in IE8, so you might want to debug that.
I will say that the menu didn't 'pop' for me. The .7 opacity made it too dim in my opinion. Overall though...site looks great and well thought out and responsive. Also, really like the fixed menu when looking at it on phone.
1) Lovely design; I especially like the colors scheme. And a really nice touch with the two-color main nav items that become one color when hovered.
2) Very slow loading in Firefox (17.0.1)
3) In Safari (5.1.4), page initially displayed alternating horizontal black and white bands. And I've waited over 3 minutes and the page still hasn't fully loaded. [After nearly 5 minutes the "banding disappeared, but it's still trying to load the last of 33 items.] [This may have been an anomaly, because when I restarted Safari and cleared history/cache, it loaded very quickly.]
3) Loads properly (no alternating B&W bands) and faster in Chrome (17.0.something).
4) Loads properly (no alternating B&W bands) and faster in IE9.
Just noticed what might be a typo in the first paragraph of What We Do. It reads:
"What that means for you is that with one all encompassing website, provided by us, you can reach your customers "on" whether they're on a mobile, a tablet, their trusty desktop, fancy laptop or maybe even on a coconut phone if it has a screen!"
I would completely remove the text-shadow on hover for the buttons. One thing that really bugs me is that random content on the page seems slightly transparent. It throws me off a bit.
@snillor - thanks for the spot on the typo, fixed it.
Regarding that background black problem - I have noticed it previously when viewing on Safari iphone during the load - it's definitely a weird one. I've tried setting a background colour on HTML/Body so will see whether that cures it (background is just a repeating pattern image).
@chrisburton - Regarding the buttons? How come? It's kind of like when hovering they come out towards the mouse and then when clicking (active) they get depressed in and the text goes into the button (reverses the text shadow).
For the opacity, there's no opacity going on for the content, only things that are slightly transparent is the slide show imagery and the icons - everything else is non transparent. It's intentional for those as I want the content to be at the forefront and where the icons are concerned just be simple visual indicators that don't command much attention.
Can you point out which bits are "randomly" transparent for me if any aside from those?
@jurotek - Hmm, appreciate the input but the break up is intentional to state cleanly what the page is all about in large type, then stop, then follow up with the content. I tried without originally and it feels like it's missing something to me.
I wanted to more cleanly break between the title and the sub header and to fix the sidebar as it feels like it's floating otherwise.
@chrisburton - I see what you mean, those bits are meant to be a bit faded, though the top nav should be solid now, as I got rid of the opacity on the list items due to previous feedback.
Do you feel that the icons & slides should be opaque? The intention is to fade them out a bit so as not to attract much attention.
The anchor links are still using rgba with an opacity of .8. What slides are you speaking of? The large graphic on the right that resembles your logo? I think that needs to lose the opacity along with the icons. Of course, the texture still bothers me a little bit. I don't think it would look that bad if it had more opacity to it.
Hi all,
We're going to be launching our new site in the next couple of weeks, waiting on the copy writer to come back with the copy, so it's full of lorem at the moment.
Would love to get peeps feedback and see what you all think. Definitely not finished yet so still a few bugs laying around and have done cross browser fixes yet.
I'd like to get your feedback on the look and feel as well as the responsiveness.
Obviously if you spot any glaring problems or glitches please say!
http://v4.unleash-it.co.uk
EDIT (26/12/2012) - New link as it's live --> http://unleash-it.co.uk
Checked it out on my phone and I like it.
Will do desktop later.
@andy_unleash
Wow, great job, man!
I love the clean layout, the typography, the colours, the paper textured background, everything just works and I'm slightly envious.
Damn, I really need to start getting to grips with responsive web design.
Keep up the good work!
Just looked at it on desktop and still good.
Based on Twitter Bootstrap?
Oh...it's stupid but have you considered 'internationlising' your phone number for foreign visitors?
+44 (0)2380 xxx xxx
It's pretty damn nice to be honest. I would consider setting a min-width of 320px though. But that would just be me.
@watson90 - Thanks mate!
@Paulie_D - Nope not twitter bootstrap, all from the ground up, built the grid and the buttons manually etc. Re: international phone number - we pretty much just cover the UK to be fair.
@alexmccabe - Yeah I'm not sure on the minimum width yet, going to dig into our analytics and make sure we haven't had too many hits from sub 320 devices.
The only thing I would suggest is to make the texture a bit more transparent. You also might want to rethink the
<title>for the 'News' page. Everything else is pretty solid.@chrisburton - I take it you mean the background? Is it a bit overwhelming/dark?
Re: title on the news page, yeah it's a bit rubbish right now, going to change it to like Latest News or News Archive or something.
As a side note I'm thinking of creating a git for the grid i built in SASS. Would anyone actually be interested though?
@andy_unleash I just think it's too much. I would open it in Photoshop and put the fill to 50%. It looks much cleaner. By the way, if you capitalize "Design" you should do the same for "development".
Here is the edited image: http://f.cl.ly/items/3o0F3335163a2h1H0U2L/bg.png
Result: http://cloud.chrisburton.me/L7fb
Hmm thanks for having a look, to me though it just looks too close to white which is something we wanted to avoid. Having a nice texture there really works for the inside pages where the content areas have a nice paper overlay feel to them.
Re capitalising development, it's just that way grammatically but I catch your drift, the copy writer is probably going to be redoing the wording anyway.
It's a really well designed site, I personally really like it. I like the layout and the fonts etc. Oh yeah in the contact area, you spelt "achieve" incorrectly. Other than that it's really good. I checked it on my desktop and my tablet, both look great.
Looks amazing, @andy_unleash. My screen tends to make colors look a tad lighter and that made the nav in the top right just a tiny bit hard to catch my eye at first. But the colors definitely match and it looks great.
If you don't mind, what technologies and packages did you use for this site? I'm always curious about that kind of stuff. (I mean, did you use jQuery, HTML5BoilerPlate, cakePHP, etc?). Will you have a humans.txt for the finished product?
Thanks all, @obscurecoder - nice spot on the typo, will get that fixed.
@pmac627 - Thanks for the feedback on the nav, it's slightly transparent right now so will tweak it a bit to make sure it's more visible.
Re: packages, JQuery is the only library we're using, as well as Modernizr, other than that it's all from scratch.
I'm using SASS/Compass as my preprocessor for the CSS to speed everything up and make life easier, but I really wanted it to have a custom grid and have everything geared to be perfect as we need it.
Re: humans.txt - maybe, I usually use them on customer sites just to say hi to fellow devs poking around but for our own site not sure it's worth it since all of our details are on the site itself.
Really well designed. Fantastic use of screen space with non-arbitrary responsive design (hoorah!).
I'm nitpicking but, the main navigation links could be a bit less transparent, and a tad larger.
Really, really nice, though.
Well done. Just a one thing. Your paragraph font color could be little sharper (darker) so it can can stand out and send that textured background further back instead being in my face and making me focus little harder to read as I would liked. Great job.
I like it! I think the texture is the right color also. On one of my monitors the side bar stuff (where the texture is the bkg) the text is kind of light.
I keep one light and one dark that way I can see how it works with both sides of the spectrum... knowing full well that there are many poorly/overly lit monitors out there.
Nice site! Love the colors and layout. I think that "inquire" is spelled incorrectly on your button to the right.
Echoing what everyone's already said: I think it looks great :) I particularly like the colour scheme.
Just one thing, though. It might just be the internet connection I'm on, but the Portfolio page, the images took quite a while to load. Is it necessary to have them 678kb when they're only 440px square?
@kristinh I think 'enquire' is used in the UK, while 'inquire' is used in the US, so it's correct for its location :)
Nice work, @andy_unleash! This looks really good.
Here are a few of my immediate thoughts:
@chriscoyier Can't wait for you to fix the markdown styling :)
Thanks all.
@stillb4llin - A few people have noted that the texture does bleed a bid much and dull out the text, will definitely look at fixing that, either darkening the colours of the text (like the nav & sidebar stuff) probably by about 10%.
@kristinh - It's enquire over here in blighty!
@david_leitch - Yeah the portfolio stuff is still under development, I want high quality images and am working out a fallback for @2x resolution for retina at the moment, so those images at the moment are non compressed and super chunky - will be switched out for a lightweight alternative soon.
@joshuanhibbert - Thanks dude, will look at the shadowing stuff. The main content shadow is mainly to make it appear like paper laid on top of the cardboard style background. Re: the buttons, any ideas on an alternative? I've mainly built them out just to be fun tactile nubbins and they're using the main colours.
@chriscoyier - Yes please do fix the code/pre issues! Pretty please with cherries on top!
What's the problem with code/pre now?
@chriscoyier - For me (Chrome 23) I have quite a lot of problems getting pre & code to work, half the time it just is invisible, so I'll type out a bunch inside pre & code tags and then once submitted it just isn't there. When clicking edit it's all there, just being stripped out front end. Like below;
CSS & JS usually are fine, but HTML is unreliable in its output for me.
It does output okay if you use & gt ; & lt ;
Test
@andy_unleash are you inserting a space before the code begins and after the code ends as well as 4 spaces indenting the code? It works for me.
See here: http://cloud.chrisburton.me/LggH
@chrisburton - Just tried it - no dice for me.
Might it be worth splitting this into an alternative thread?
Good work! Few issues - it breaks in IE8 and less ( not sure of your target users tho). You might want to consider appending your Html 5 elements to the DOM for wider support. It might be personal preference, but I find your portfolio list a bit too 'in-your-face' kind of, you may want to consider reducing it and increasing the gutters.
@philben - Cheers, haven't done cross browser fixes (read, IE8+ support yet). To be honest, I'm not even going to bother firing up IE7, percentages are so low nationally and in our analytics.
When you say "appending your HTML5 elements to the DOM for wider support" - can you explain what you mean? I'm using HTML5 shiv and a block reset for HTML5 elements if that's what you're getting at?
@andy_unleash - Yes, Html5 shiv will do the same job, I should have clarified that. But currently it's showing un-identified element in IE8, so you might want to debug that.
Hmm cheers for the spot then. Which element is it in particular, or is it just all HTML5 elements?
@chriscoyier There is no styling of Markdown lists.
@andy_unleash Here's what I would do: http://cl.ly/3F1I1H0e3h08
@joshuanhibbert - I like it, cheers dude.
No worries!
I will say that the menu didn't 'pop' for me. The .7 opacity made it too dim in my opinion. Overall though...site looks great and well thought out and responsive. Also, really like the fixed menu when looking at it on phone.
Oh, I almost forgot, how gorgeous is Quatro Slab?! I recently used it on a personal project: http://dailylink.me
Another good one is Fovea. http://payload.cargocollective.com/1/0/3855/39455/Fovea_LG2_900.png
Quatro is one of my new favourites, I have a serious thing for Slab Serif fonts as a whole. Museo Slab is also pretty boss.
Hooray - and it's live - http://unleash-it.co.uk
I incorporated a lot of the feedback you guys offered, so let me know what you think.
@joshuanhibbert - I took the advice you gave on the buttons, definitely a good move.
Also do you feel certain pages need images too? I feel like the content on some pages could do with breaking up a bit.
For example: what we do vs how we do it
I tried it here on the responsive web design page but I'm not sure.
I'm late to the party, but want to say:
1) Lovely design; I especially like the colors scheme. And a really nice touch with the two-color main nav items that become one color when hovered.
2) Very slow loading in Firefox (17.0.1)
3) In Safari (5.1.4), page initially displayed alternating horizontal black and white bands. And I've waited over 3 minutes and the page still hasn't fully loaded. [After nearly 5 minutes the "banding disappeared, but it's still trying to load the last of 33 items.] [This may have been an anomaly, because when I restarted Safari and cleared history/cache, it loaded very quickly.]
3) Loads properly (no alternating B&W bands) and faster in Chrome (17.0.something).
4) Loads properly (no alternating B&W bands) and faster in IE9.
Just noticed what might be a typo in the first paragraph of What We Do. It reads:
"What that means for you is that with one all encompassing website, provided by us, you can reach your customers "on" whether they're on a mobile, a tablet, their trusty desktop, fancy laptop or maybe even on a coconut phone if it has a screen!"
Looks like an extraneous "on" to me.
I would completely remove the text-shadow on hover for the buttons. One thing that really bugs me is that random content on the page seems slightly transparent. It throws me off a bit.
@snillor - thanks for the spot on the typo, fixed it.
Regarding that background black problem - I have noticed it previously when viewing on Safari iphone during the load - it's definitely a weird one. I've tried setting a background colour on HTML/Body so will see whether that cures it (background is just a repeating pattern image).
@andy_unleash, I experimented with few things on your What We Do page. Here's what I've done:
Header: Removed border bottom and padding bottom H1: Removed both border bottoms and margin bottom Sidebar H3: Removed border bottom
And to my surprise I end up with a nice clean looking page with uninterrupted vertical flow by all those top and bottom borders.
@chrisburton - Regarding the buttons? How come? It's kind of like when hovering they come out towards the mouse and then when clicking (active) they get depressed in and the text goes into the button (reverses the text shadow).
For the opacity, there's no opacity going on for the content, only things that are slightly transparent is the slide show imagery and the icons - everything else is non transparent. It's intentional for those as I want the content to be at the forefront and where the icons are concerned just be simple visual indicators that don't command much attention.
Can you point out which bits are "randomly" transparent for me if any aside from those?
@jurotek - Hmm, appreciate the input but the break up is intentional to state cleanly what the page is all about in large type, then stop, then follow up with the content. I tried without originally and it feels like it's missing something to me.
I wanted to more cleanly break between the title and the sub header and to fix the sidebar as it feels like it's floating otherwise.
Screenshot
What do you guys feel about the internal pages? Images to break up the content or are they okay without?
@andy_unleash, I respect your opinion and after all it's your site, but to be honest, to me those lines are unnecessary visual distractions.
http://cloud.chrisburton.me/LoFZ http://cloud.chrisburton.me/Lnvy http://cloud.chrisburton.me/Lo9h http://cloud.chrisburton.me/LoL4
@chrisburton - I see what you mean, those bits are meant to be a bit faded, though the top nav should be solid now, as I got rid of the opacity on the list items due to previous feedback.
Do you feel that the icons & slides should be opaque? The intention is to fade them out a bit so as not to attract much attention.
The anchor links are still using rgba with an opacity of .8. What slides are you speaking of? The large graphic on the right that resembles your logo? I think that needs to lose the opacity along with the icons. Of course, the texture still bothers me a little bit. I don't think it would look that bad if it had more opacity to it.
I'm getting problems and its just showing a 404 error at the root.