I’ve been working on a single page site for a small client and wanted to get some more eyes on it for feedback/suggestions. I still have some tweaking and fine-tuning to do, but it’s getting close I think. I’m going to rework the “tablet” and “mobile” versions to lay things out a little better, but you should get the basic idea.
Thanks for any feedback!
Hey, nice looking page! I’ve got a few little tips for you:
I notice that you’re using CSS for the borders around the square images, which is great! However, you’re using an image for the borders around the circular images, which is not so great. I would suggest that you use CSS for all of those, and the round images you simply give a `border-radius: 50%`.
The form needs a couple of things too: I like that you have nice labels for each input, but you ought to give those labels a ‘for’ attribute:
And you should give the required fields the ‘required’ attribute:
And you might want to think about some visual cue that says ‘required’ better than a placeholder. Something like this: http://codepen.io/howlermiller/pen/wAiae
Yup, so there’s a couple of things. Other than that though, nice site!
Great tips, thanks!
@howlermiller, adding the “for” attributes makes total sense, so I did, as well as “required”. I’ll have to go into Photoshop later to remove the border from the images, but that makes sense too, for consistency. I was going to redo all the images anyway and re-compress them with a new tool I found from a .net magazine article. I like the visual cue idea too, but I’ll have to look into it further as well. Thanks for the suggestions!
@dfogge, I made the text a little darker, but for some reason, I don’t like it completely black. I also wanted the white background to be slightly transparent to see the pattern in the background. Let me know if it’s better, otherwise, I’ll darken the text more, or whiten the background more. Thanks!
I think the main content area looks really good, and it degrades well on smaller screen devices. However, the header and the footer look unfinished and a bit out of place. It could just be one of those things you tweak and it looks great – I think (minor) changes in the typography would be good. It’s the first thing I noticed when I opened the page, but it may just be that I’m a stickler for mastheads!
@rightok32, I kind of agree with you on the header/footer. The header has a lot of blank space and I wasn’t sure what to fill it with. I went through several menu ideas, but decided to try to keep it simple since it was a simple one page site. I’m open to suggestions, otherwise, I’ll have to stare at it some more and see if any ideas come to mind…
Not sure what you think of this:
Changing the font to Oswald to match the rest of the site lends consistency, and, IMO, looks better.
The full extent of changes in addition to the font:
-the padding of the navigation anchor links to 6px
-added text-transform:uppercase to the anchor links
-the font size of the address to .85em
-the font-weight of the address to 100
I’m not sure myself if it’s a great improvement…
I don’t think there’s anything drastically wrong with what you have now, it just needs some tweaking!
@rightok32, When I get back to my laptop, I’ll look at some of this stuff more closely, but I really like the “less padding” look of the navigation (it makes it much sleeker). I’ve looked at it for so long, that everything starts looking weird, so it helps tremendously to get other peoples eyes on it and their input. Thanks!
There’s something about the combination of heading-typeface and overall look and feel that got me intrigued, and thinking. First I thought the headline-font ‘Oswald’ was out of place in this context and/or subject matter, but then it slowly began to grow on me, and now I specially like the quirkiness of it (like the double gg’s in “Maggie Stevens”). Because you already use ‘Open Sans’ for body text, I do feel however there’s something to say for using “Open Sans Condensed” for the #About h4, to break it up, and/or mediate between those two very different types. I also can imagine some “feminine” feedback on you’re design, in line with the target audience of the site, could be of help to see through different eyes, but maybe you already have this arranged.
@msguerra74, I like the responsiveness, layout and color schema but only from 1024px width and less. Maybe it is just me but, on a wide 24″ monitor like mine there’s something visually so destructing about that background that it is actually hard for me to concentrate on content because of that.
@Atelierbram, I actually did consult a female designer on this, who selected the Oswald font. I know the typography could be better, but we pretty quickly picked a “heading” font and a “body” font just to break things up a bit. I’ll probably experiment with this more, but I’ve found myself at that stage where I’ve looked at it so long that I just want to scrap the whole thing and start over! (which I can’t… haha)
@jurotek, I agree with the background. I actually had a much more subtle background/color before, but the client was very adamant about the background being very “pink”. She actually wanted it much more bold and bright, but I was able to compromise with her and tone it down to this! (if you can call that toned down). I also considered making a higher break-point for larger screens, but never got around to it. I’m thinking that for future projects, I’ll probably consider doing that, but I can only see up to 1600px wide on my 17″ laptop.
I’m going to go over the site again today and tomorrow, then probably send it off for final review on Monday, so thanks again, for all the feedback!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".