I hate designing landing pages. However, here's a bash at one for a service we offer.

 

The page is part of an existing website so obviously things like the header, footer, colour scheme, typography.....can't really change, and I'm not looking for feedback on those bits.

 

However I would like to know if you like the page itself. It is responsive, of course.

 

I have switched the main font of the site from Arial/Helvetica to Open Sans. Open Sans handles headings so much better, the problem with Arial and Helvetica is when you make them big, they also look bold, even though you don't want that. Controlling the font weights is so much easier with Open Sans and it's such a nice font.

 

Anyway. Hope you like, and if you've got £100k in the bank, maybe it will convince you to give it to us.

 

P.S If you talk about our site, please leave out any words that mention the nature of our business, I don't want rivals with Google alerts picking up this thread. Thanks!

 

P.P.S I'm aware the CTA button is mis-aligned in IE8. Also, the form won't actually send yet as I haven't written the script for it. Those should be the only real issues. Only 1% of our visitors browse using IE6 or IE7 so I do not build the site to work with these.

 

P.P.P.S Oh and here is the current, old page

 

Linky

Edited June 29, 201214 yr by brightonmike

The bottom of the g in booking is being cut off? In iPad.

On the logo? Yes, a little bit, I trimmed it a pixel too much.

Yes and on both versions of the site.

Form labels and placeholders feel too small compared to the input fields themselves. Also not enough padding on the inputs.

Really? I'm sure there's plenty of padding on the inputs, I don't want them too big...

 

But I agree regarding the labels.*

 

I'm wondering though if you're getting the right CSS for the inputs, because they definitely look fine to me. I've attached a screenie just in case.

 

I'm wondering if it's the screen size you're viewing on too, as I'm using % padding. Mainly because pixel padding I suspect is going to produce unreliable results now.

 

 

*They were 13px, now 14px, better?

 

 

P.S I'm aware also the icons look really crap on mobile devices. Gonna try and find better ones.

Edited June 29, 201214 yr by brightonmike

Really? I'm sure there's plenty of padding on the inputs, I don't want them too big...

He uses Firefox...

Why isn't Firefox applying left and right padding? The code is "padding:1.5%" and it's only applying it vertically.

Yeah, that's definitely not what I'm seeing:

 

Yeah I can see that now in FireFox. I just don't understand why. The code is fine. It's just "Padding:1.5%". I've tried seeing if FF is being an arse about display or positioning, but nope.

 

Even IE gets it right.

Seems to be an open bug from years ago.

 

If inspect it in Firebug, the padding's being calculated (19.3px) but not actually being applied. Suggested fix: change the padding to .8em.

Cheers for the fix! Applied.

Looks pretty good, I've had issues with firefox's padding too.

 

Just out of interest, what responsive grid system did you use, or did you write your own?

The site wasn't originally responsive so I re-built it a couple of months back to be so, but I didn't use a grid as I'd have had to re-write the HTML too much.

 

So to be honest, it's just one or two fluid width columns!

 

It's fairly easy to make a site responsive to be honest.

very nice and classy. good font choices. favicon doesnt match logo

 

why is this underlined if it it's not a link?

"It's time you became a true VIP." use bold oh and the same lower down

 

good job overall though

very nice and classy. good font choices. favicon doesnt match logo

 

why is this underlined if it it's not a link?

"It's time you became a true VIP." use bold oh and the same lower down

 

good job overall though

 

 

It's contentious, I'll give you that, but as most websites have moved away from underlining links, I think the whole usability issue will become less so.

 

Also, the cursor doesn't change, which is the main way you tell that something is a link, so I think in this case I just about get away with using the underlines for emphasis.

 

It's just a real shame hyperlinks were ever underlined in the first place.

I like it, but the only thing i didn't like was the thick border on the menu buttons (the grey)

Not sure where you mean? It's only a 1px border.

 

Anyway the navigation is site wide.

 

Thanks!

Sorry , should have been more specific. Its the hover state of the nav buttons (at the top of the page - about us, contact us etc)

Good stuff, so far!

 

Not sure if it's a huge deal or not, but a lot of your subtle shades of gray are being lost on my crappy TN panel testing monitor, so I'm just seeing a white page. It might serve to tighten up some of the shadows and make them a smidge darker, but that's just an aesthetic thing. There's a strong possibility that the people who can afford your service will have a better panel anyways.

 

The active/hover state on the top nav is really strong considering how subtle everything else is. It feels far less polished than the rest of the page.

 

The typography needs a little love, something about it feels unrefined.

 

In the "What our customers say" bit the meter is really long, and it's hard to see where the quote ends and the citation begins. Maybe you can come up with a more engaging type treatment here (preferably one with a larger quote font size to make the meter a little more comfortable)

 

In the four blurbs beneath the first big CTA, the centered text looks a little weird. Granted, I'm not a fan of centered text to begin with, but it might look a little more refined to find an icon for each point, left align the text, and stick the icon in front of it. You might need to tweak the spacing to make the columns feel centered, but I think that would be better than what's there now.

 

Error messages on the form should stand out, I'd say red but if you can find a color that fits your brand better and doesn't look like a link, that would be okay too.

 

The stuff next to your logo in the footer looks like it should have been formatted differently, not sure if that's a bug or as intended.

 

 

Barring the above, this is some really strong work!

(snippy snip snip)

 

Cracking points Pork! Which I shall now respond to.

 

Not sure if it's a huge deal or not, but a lot of your subtle shades of gray are being lost on my crappy TN panel testing monitor, so I'm just seeing a white page. It might serve to tighten up some of the shadows and make them a smidge darker, but that's just an aesthetic thing. There's a strong possibility that the people who can afford your service will have a better panel anyways.

 

The active/hover state on the top nav is really strong considering how subtle everything else is. It feels far less polished than the rest of the page.

 

This is an issue I've been plagued with, ever since I decided to have a white site in this style. I didn't want it 100% pure white, I wanted some subtle shadows and extremely subtle gradients to give the design a bit of "lift".

 

Problem is as you observe though, on some screens everything just looks white, but on others you get quite pronounced shadows.

 

I've generally gone with the notion that most of our clients, the ones that are actually coming on our site to do business are multi-millionaires, so they're likely to be using very up to date tech.

 

Considering two people have said the shadows on the menu are too dark (though for me they look not too bad) I will have to drop those down a notch I feel.

 

The typography needs a little love, something about it feels unrefined.

 

When I originally made this theme, I stuck to Arial body with headings in Museo-Sans. Something about those two fonts together really doesn't work, and also when you use Arial for headings, it looks very bold. Sometimes you want large headings, but still slender, so this is why I've now switched to Open Sans. Because there's been a change of font some of the text looks odd, granted, so I shall try and refine it better. For example, I hate how it looks in the footer links. Just doesn't look right.

 

In the "What our customers say" bit the meter is really long, and it's hard to see where the quote ends and the citation begins. Maybe you can come up with a more engaging type treatment here (preferably one with a larger quote font size to make the meter a little more comfortable)

 

Agreed, I didn't spend too much time of this. I may change this by making the second quote smaller, and citations italic and/or bold, so they stand out a bit better.

 

In the four blurbs beneath the first big CTA, the centered text looks a little weird. Granted, I'm not a fan of centered text to begin with, but it might look a little more refined to find an icon for each point, left align the text, and stick the icon in front of it. You might need to tweak the spacing to make the columns feel centered, but I think that would be better than what's there now.

 

Are you not seeing the icons above the text? My problem here was the copy, getting it to say what it needs to whilst having the four lines look nice and balanced. I may fiddle about with the font size, but I'm not sure what else I can do. I'm not sure having the icons to the left would work either, it might upset the whole balance of the page (everything else is centred).

 

Error messages on the form should stand out, I'd say red but if you can find a color that fits your brand better and doesn't look like a link, that would be okay too.

 

They are red at the moment, but I could maybe make it a duller red, just so it's not quite such a jump from the colour scheme.

 

All in all some excellent points I can work from - thanks a lot! +1

I've generally gone with the notion that most of our clients, the ones that are actually coming on our site to do business are multi-millionaires, so they're likely to be using very up to date tech.

 

Aye, I think that makes it worthwhile leaving it as is.

 

Are you not seeing the icons above the text? My problem here was the copy, getting it to say what it needs to whilst having the four lines look nice and balanced. I may fiddle about with the font size, but I'm not sure what else I can do. I'm not sure having the icons to the left would work either, it might upset the whole balance of the page (everything else is centred).

 

Alrighty, it definitely feels a bit weird (though not by much), so maybe some tweaks will make it feel 'right'.

 

They are red at the moment, but I could maybe make it a duller red, just so it's not quite such a jump from the colour scheme.

 

See attached. On Firefox 13.0.1 on Windows 7 I'm seeing dark gray (#222) error messages. Might be a quirk in the code.

 

 

I'm really digging that treatment of the big image at the top of the page... the expanding / more detail thing is slick.

It's contentious, I'll give you that, but as most websites have moved away from underlining links, I think the whole usability issue will become less so.

 

Also, the cursor doesn't change, which is the main way you tell that something is a link, so I think in this case I just about get away with using the underlines for emphasis.

 

It's just a real shame hyperlinks were ever underlined in the first place.

 

I thought they were links. It's also even more confusing that 'request more information' is underlined and is a link.

 

I don't think there is enough contrast between certain elements either. Like on the 'what our customers say', there isn't any distinction between the quote and who said it, and no emphasis on any keywords like 'outstanding' for example.

 

I think the section that begins with 'no hidden charges' could do with some small headers, as opposed to the bolding & underlining.

See attached. On Firefox 13.0.1 on Windows 7 I'm seeing dark gray (#222) error messages. Might be a quirk in the code.

 

 

Fixed. FireFox ignores span classes unless they're prefixed with "span". That's of course good practise anyway, but I find it strange that without prefixing with span FF ignores the class altogether. Very odd.

I thought they were links. It's also even more confusing that 'request more information' is underlined and is a link.

 

I don't think there is enough contrast between certain elements either. Like on the 'what our customers say', there isn't any distinction between the quote and who said it, and no emphasis on any keywords like 'outstanding' for example.

 

I think the section that begins with 'no hidden charges' could do with some small headers, as opposed to the bolding & underlining.

 

 

Good point, even if I am to use underlines for non-links it should be consistent, so I probably will remove them now.

 

Also both you and Pork have picked up on the testimonials so I will adjust them too - thanks a lot

Ok, pretty sure I have adjusted everything people picked up on, so hopefully it's a little more refined looking!

 

Edit, fixed some CSS specificity issues too.

Edited July 6, 201214 yr by brightonmike