Jump to content
robber2

Web site critique requested

Recommended Posts

Nice and simple layout. That's certainly a good job right now, and I must say, it's actually the best site I've seen a photographer make. I've seen a few others, and... well... let's just say I looked at them and their source saying to myself "OMG!" in the most negative sence possible.It will be nice if the pictures don't use the blue border. Either remove it, or use something else that may provide a good constrast (the yellow you use for the letters maybe?). For visited links you might use the orange from the navigation or something similar.Your navigation is a little inconsistent. Yes, it's a good practice not to include a link to the current page, but it's also a good practice (I'd say even more important) to let the user know where they are currently with a visible indication of that.On each page, add the current page in the navigation, but not as a link, but just bolded text, or a different color. Anything that would stood out from the rest of the links there. What's important in the end is to keep the navigation the same across all pages.Your Contact/Order page misses the navigation. I feel a bit lost there. You should add the navigation back.Why add the "E-mail Anne" link when there's a contact form? The former is only an invitation to spammers to not only send you a single message via the form (each), but to preserve your email for other spammers to send you a message too. Leave only the contact form.Why not split the contact and order pages? It will make the two forms shorter (and thus less scary), and will ensure that users are aware exactly what they must fill in. I for one thought the submit link is going to take me to paypal or something, and it turned out I need to fill in my name and email that I thought I'd need only if I contact you.If the two pages share common code (the mail() function and the validation parts obviously), you can create a third file and include it in both places.On the gallery pages, why not use the name of the photograph as the alt text and tooltip? At least when the photo is bigger I mean.Since the big photo is an HTML page anyways, why not add a back to gallery link or something like that? True, it's duplicating browser functionality, which is not that good, but if the page was linked from another site, it would mean users would know where the rest of the gallery is situated.

Share this post


Link to post
Share on other sites

That's what I'm talkin' 'bout!That's the CONSTRUCTIVE stuff I'm looking for! I agree with you on a number of points: I'd like to lose the border around the thumbnails w/ a simple border:none in the CSS, as long as people know it's a link to an enlargement (without having to tell them that, you know how some viewers are...)"add the current page in the navigation, but not as a link, but just bolded text, or a different color..."I like that! It just irritates me to click a link and see the same page load that I've been looking at.I like your suggestions about the Order/Contact page and the email thing. I consider that page a work in progress still, and I'll take your suggestions into consideration."why not use the name of the photograph as the alt text and tooltip?.."'cause I was wicked lazy that day and my copy and paste finger was hurting. But good advice, I'll take it."...why not add a back to gallery link or something like that?.." An excellent idea there. I thought of making the enlargement a link back to the gallery, but that's, again, something you have to clue people into. The image is a bigger target than the Back buton. That's my motto."True, it's duplicating browser functionality, which is not that good..."That's the only thing I don't understand. Clarify? BTW, tx for all the good input, it's sincerely appreciated! Any idea how much a site like this would cost someone to have built?

Share this post


Link to post
Share on other sites
True, it's duplicating browser functionality, which is not that good..."That's the only thing I don't understand. Clarify?
Well, you're already following good usability guidelines, so I supposed you're aware of that one.Duplicating browser functionality is considered confusing for a user, unless it copies it perfectly. The case of "Back to..." pages is not it, as your "back" link is considered "next" in the browser's history, so when the user clicks the "Back" button, they get on a page that's "forward" in their understanding.When you don't have a navigation or anything else though, having any link on the page is a good thing, as it shows people they're not in a dead end. In the case of this photo, you could either add the whole navigation, or just a back button. Adding the whole navigation is pointless (as when the user clicks a photo, they'll be expecting the photo to take as much space as possible), so you're left with adding only a back button.
Any idea how much a site like this would cost someone to have built?
Depends a lot on how much experience you have, who is the client, and what is the average person in the country willing to pay. I'd charge somewhere around 73-100 dollars. Converted to BGN (our currency at Bulgaria - commonly known as "lev"), this is a decent sum for someone with my experience. But this is nothing in the United States, and people that have made more sites than I have may charge more, even the ones living here. A long time expert living here may charge something around 1030-1100 dollars for that. Never more. In the US, experts may charge even more.

Share this post


Link to post
Share on other sites

Again, thank you for your input. Any other comments are certainly welcome. I consider myself "new" at this web dev stuff, even though I wrote my first site in 2001 with Notepad 'cause the WYSIWYG stuff I used before was crap! I'm currently cutting my teeth on some basic PHP, which seems to me to be the GOOD STUFF for a lot of what people are asking me to do for them, shopping carts, slide shows, etc. I deal with a lot of artist types, lots of images and color! It's fun stuff, and way good for the brain, even though I've almost broken it once or twice. I'm glad to know that the work I'm doing so far is not totally rejected as amatuer tag soup junk! :)

Share this post


Link to post
Share on other sites

Some non-textual structure, such as borders, background variations, graphical boxes, image buttons, etc. might look nice. Welcome to Web 2.0 :)

Share this post


Link to post
Share on other sites

@Synook:1 at a time. Welcome to web 2.0? what's that?background variations, example?graphical boxes? what's that?image buttons? where?I think I might have seen a border somewhere, so you don't need to explain that, unless you want to tell me where to put one (ha ha, where to PUT one, indeed!)I wouldn't ask if I didn't value your input. Thanx.

Share this post


Link to post
Share on other sites

Web 2.0 - http://en.wikipedia.org/wiki/Web_2.0Background variations, perhaps a different bg colour for the menu and for the content?Graphical boxes as in containers for content that consist of images. Err... for example, the box around the content in http://tutorialsys.roundeddesign.com/ is graphical.Image buttons for the links - don't forget alt text though.Borders around content, seperating paragraphs, areas (e.g. main content from footer).

Share this post


Link to post
Share on other sites

if you want border that isn't that nasty blue one you could add a little more style to it likeimg {padding: 2px; border: 1px solid #edd2ab;}It's a real simple little change but it'll add some style.As far as ensuring that the thumbs are clickable. The cursor changing to a hand when you mouseover should be enough. That has become such a widely used practice it is practically a defacto standard. No one uses the border to denote a img link (it's just to nasty and ugly).

Share this post


Link to post
Share on other sites
it's just to nasty and ugly...
I hear that. Thanks for the cool solution, too! I tried it, and liked it. I like the Safari look, no blue border, no purple visited.

Share this post


Link to post
Share on other sites

@Coolguy:One thing I wanted to do is indicate a visited link, in this case the thumbnails. With just the border you suggested above, there was no way to tell if you'd seen that enlargement (I'm taking into account accessibility for people w/ no short term memory :) )So I colored the link, visited and hover like the other links on the page. The sweet 2px padding no longer works, but this solution may be the best of both worlds. Although, I may only have replaced one flavor of ugly with another! Your Take?http://perfectionconstruction.com/LuthaZar...ARP/gallery.php

Share this post


Link to post
Share on other sites

Another thing I just noticed is that IE6 still displays the stupid blue/purple border action. Is it ignorant, or what? Safari doesn't display the colored border at all, no matter how specific you are about it, but then it never did...

Share this post


Link to post
Share on other sites

If you want to you could still apply the same border style to the added hover and visited pseudo-class additions like this.The main difference is I broke down the border attributes individually. The way I had it coded before was shorthand.

.left a:link, .middle a:link, .right a:link {padding: 2px; border-style: solid;border-width: 1pxborder-color: #edd2ab;}.left a:visited, .middle a:visited, .right a:visited {border-color: #a0522d;}.left a:hover, .middle a:hover, .right a:hover {border-color: yellow;}

This is a very efficient way to code the color change because, with on-visited and on-hover only the color of the border changes while the border-padding and border-style stay the same. In the future if you are having problems with tweaking or inheritance with short-hand tags try breaking them down into their smaller respective parts.As far as the whole borders in IE6 go... IE6 sucks at CSS in general (developers hate M$ so much because their lack of following standards and adding custom crap that only works in IE). If you goto MSDN and look up their HTML reference you can see just how much bastardizing they have done to the language.http://msdn2.microsoft.com/en-us/library/ms533050.aspxOne fix to get rid of borders on image links is by adding a 'border' attribute to the <img> element.<img src="" alt="" border="0" />Or you could still try adding:img {border: none;}This shouldn't affect your image link borders because of the stacking order of inheritance in css.HTML tags -> Class tags -> Id tagsEx.

p {color: red;}.text {color:blue;}#writing {color:yellow}<p id="writing" class="text">foo bar</p>

In this case 'foo bar' would be yellow, if you removed the 'id' attribute it would be blue, and so on...If that doesn't work be sure to check this out:http://locusoptimus.com/css-trickery/ie-im...es-on-hover.php

Share this post


Link to post
Share on other sites

Coolguy,i tried the code above but it's got it's own brand of difficulties. i'll leave the page as is for tonight, if you wanna take a look, and i'll try the locusoptimus trick tomorrow. Feel free to check out the CSS, see if i missed anything.

Share this post


Link to post
Share on other sites

For the sake of follow up, the locusoptimus trick mentioned by Coolguy above seems to be the only workable solution I've tried. With slight modifications to fit my particular application, it seems to work in all browsers I tried. I'll leave the page up for a few days if you want to see it live.

.left a:hover, .middle a:hover, .right a:hover	{border-color:yellow;}.left a:link img, .middle a:link img, .right a:link img	{padding:2px;	border:solid 1px #edd2ab;}.left a:visited img, .middle a:visited img, .right a:visited img	{padding:2px;	border:solid 1px #a0522d;}.left a:hover img, .middle a:hover img, .right a:hover img	{border-color:yellow;}

Share this post


Link to post
Share on other sites

I think he made that himself.@robber2: Have you thought of making your form so that people can order multiple images? Something in JavaScript perhaps so that the person can click "Order Another Photo" and another line of drop-down boxes will appear.

Share this post


Link to post
Share on other sites

I'd like to say I built it, but I believe in giving credit where it's due, so I got alot of help with the php part on a couple different forums, Firefox and Computing.net primarily. The basic idea was mine, but it took alot of brain stretching to get all the elements of the php submit to work the way I wanted them to.

Share this post


Link to post
Share on other sites

@Synook: the order form, or as I like to refer to it, the "poor man's order form" (i.e., no little "add to cart" boxes or "view your cart" or credit card numbers, or SSL or MySql or cookies... you know), was by far the most challenging aspect of this site, as you might imagine. I wanted, for the sake of the photographer I built it for, to get it on the net as soon as possible, and the way I did the selects for the photos was adequately functional at the time, a serious improvement over what she had before, which didn't work at all. The best I could muster for multiple orders was the line in the paragraph about "After you submit the order for that photo, you will have the option to return here and continue with your next selection..." When you hit he submit button, you are displayed a page with a "Continue your order link", and you return to a blank form to refill and submit again. Obviously this could use some refinement, because if I wanted to submit an order for ten different photos, I'd get tired of filling in my name and email each time. You live, hopefully you learn.But I learned a little bit about building arrays with php, and I'm sure your suggestion is both do-able and would be a welcomed refinement to this page. Thanks for the suggestion. Gimme a few more months of studying/practicing php!

Share this post


Link to post
Share on other sites

Hi. I'm looking at this not as a Wow I'm a cool dude with CSS and HTML etc, but as 'visiter'. I like the horse but the back ground does not suit. You have used an indian red typr color for your headline font and the image is grey tone - I would use a very light gray tone as the background and highlight parts of your text in the same read tone. I've glanced at the the other posts and there seems a lot about the links.youv'e used: <div class="menleft"><p><a href="bio.php">About Anne</a></p><p><a href="gallery.php">Gallery 1</a></p><p><a href="gallery2.php">Gallery 2</a></p><p><a href="contact.php">Order/Contact</a></p></div>I personally would use a <ul><li> list. I would then creat a class for the current page - say class="active" and set formates for it slightly different to the links and hoover. and on each page set the class to the current <li> ie <li class ="active"> that will nicely sort out the 'current' page senario. Personally ditch the blue and experiment with your background colours. THe blue also makes the text 'less easy' to read. I had to stare. Good luck :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×