September 3rd, 2010, 10:25 AM
Website: Bella Stairs
Please, detailed critiques only.
September 3rd, 2010, 02:47 PM
- The font sizes are generally too small. You should make the majority of the text 12px or larger. It's okay to use smaller sizes in some areas of the site, but the footer and top links shouldn't be that small.
- The page does not pass HTML validation as there are around 40 errors per page. For example, don't use deprecated tags like font.
- CSS should not be defined inline; the site currently makes excessive use of inline styles. It should be located in a separate stylesheet and included in the head.
- You're using tables for design and layout; they should only be used to describe tabular data.
- The page could make better use of semantics. Essentially, that means use HTML tags to describe the content properly. An example is to use header tags where appropriate; the footer headlines like "Corporate News," "Featured," and "Contact" are good candidates for, say, an h3 or h4 tag, depending on how you've used them higher up. Use lists for menu items. Do not use tables to position content as they're meant to describe data like statistics. Disable CSS on your page and try to think how a spider would read the content. They only understand text. How much sense would it make? Test your site with the Semantic data extractor. As you can tell, no outline could be extracted because there are no descriptive tags being used in the body.
- Optimize the images on the site. Many of them are naturally larger than the area they're positioned into. For example, the Facebook icon in the footer is actually 69.3 kB and the dimensions of it are 295x295, but you've scaled it to 40x40; that could easily be optimized to less than 8 kB and it will look better because the image is not being stressed to an unnatural dimension. If you have photoshop you can use the "Optimize for the Web" feature.
- Consider dimming the four main panel image links on the home page, and then brightening them completely on hover. This can be easily done with CSS. I suggest this because I was not initially under the impression that I could click on them. It's always good to provide a sense of feedback when moving the mouse and clicking it.
- For those panels, I would moreover recommend they become CSS background images, so that you can hide textual links behind them; that will make it easier for search engines to understand your content, and will go a long way towards a more semantic design.
- Again with the panels, I think they would look better without the rounded corners.
- I love talking about them panels, but you should consider making the text on them more apparent. I think making the text a solid black would really tie the panels into the site. This and the last point are, of course, simply a design opinion.
- You should make the email in the footer an image. Match the image's font closely to the text in the markup. This is to prevent spam bots from harvesting your email. Within weeks you will begin receiving a lot of spam if you leave it as plain text. Even the mailto link can be read. I personally just leave an empty mailto link on the site, so a mail client will at least be run, but the user will need to type in the address themselves. However, if you're not too concerned about spam, regard this only as a consideration.
- Consider adding more space between the text and the left-aligned image on the pages like faq and contact. I would place at least 20 to 25 pixels of space. The middle box of the footer should also have more padding between the text and the side borders.
- I like the color scheme, the typography, and the overall layout. You can tell the site is relatively modern, which is a compliment to the cool stairs being sold. Using the same hover color for links is a good way for users to understand the content. The sitemap is a plus.
- Generally I'd say you have a good eye for design. You just really have to weed out the bad habits, like using tables for non-tabular data, and incorporate some design concepts, like writing semantically correct markup, which will go a long way in helping your search engine rankings (SEO) and developing accessible Web sites.
Last edited by f_nietzsche; September 3rd, 2010 at 03:05 PM.
Soldiers, from the height of these pyramids forty centuries look down upon you.
▪ Napoleon, on the eve of the Battle of the Pyramids
September 8th, 2010, 03:01 PM
- The font size is hard to read in the menu in top right and in the logo.
- in the bottom section 'Featured' need more padding do text does not rub against the edges
- navigation is fairly straight forward but one can get lost after clicking a few links in categories, archives, recent posts.
- nice layout, site looks elegant
September 23rd, 2010, 02:28 PM
I agree with all of f_nietzsche's comments. Here are a couple to add.
Originally Posted by kickingback
Add descriptive Alt and Title attributes to all images and links on your site.
Definitely boost the font size up. I had to get closer to my monitor to read some of the text.
Move your title up in the head section so it's right below the first <head> tag.
On your contact page, you don't specify where you are located. You might want to at least give a city/state. I have no idea where
Otherwise, nice site and stairs.