Review my site please

[jamesg1234]

Hey Guys

Any thoughts and opinions on the website I designed for some of my family, would be welcome:

Modern British Art Collective-The Best Modern British Art delivered to your door

This is the first website I have put together so it was very much a learning process and is a very simple website. I used "Build your website the right way" by Ian Lloyd to do so.

jamesg

[RichKorea]

It’s a good start for your first site. There are a few things I can suggest:

General Layout – The site is kind of plain, especially for a modern art site. Maybe pulling the text closer together (it currently has a line-height of 240%) and moving it away from the edge would help. Just about everything appears to be positioned using absolute. You might want to do more relative positioning. My favorite website about positioning is: Learn CSS Positioning in Ten Steps: position static relative absolute float.

Logo – Just green text in a Palatino font (or Verdana if the user doesn’t have Palatino available) isn’t very exciting, especially for an art collective. Something more artistic would seem to be more appropriate. Also, why do you need the .com in the name? Seems reminiscent of the 90’s.

Slogan – It may be nice that I can get modern British art delivered to my door (so long as I live in the UK or EU), but do you believe that people really will pay out £900 for a painting over the Internet? It might be better to leave off the “to your door” part.

Menu – Each menu item is its own division, which is unusual. Most people just use an unordered list with no bullets (list-style-type: none and float the <li> elements so they line up horizontally.

Sample image (reddressmediumlarge.jpg) – Could use some framing and/or shadowing to make it more interesting. The white background is pretty similar to the page’s beige background. Also, since your site’s about art, maybe the sample image should start near the top of the browser window and just vertically fill a typical browser window (instead of the allthatglittersheader.jpg, which doesn’t add much to the site).

Footer – I’d recommend a more formal footer than just a link to Twitter and Facebook. At a minimum, you should have a copyright notice, and probably some general information about who you are on every page (not everyone visiting your site will arrive through the home page).

Gallery Page – “Eye of the beholder” is 1024 pixels tall, which won’t fit on most browsers, so most visitors won’t be able to appreciate the full image (plus the file’s almost one meg in size, so it takes a while to download). It might be more effective to go with a smaller image that will viewable in most browsers. Long term, you might want to learn about image sliders using jQuery for the gallery.

CSS – In at least a couple of CSS files (style4.css, line 183, and style5.css, line 121), you’ve mixed up font-family with font-style (style is used for normal, italic, and oblique). It would be better to have just one CSS file and put styles for all of your pages into that file. While it will take slightly longer for a visitor to download the file the first time they visit your site, they won’t have to download it again, since it will be in their browser cache. By having different CSS files for each page, a visitor has to download a whole new file each time.

Favicon – Think about designing a favicon.ico to place in your root director. A favicon makes the site look better next to other tabs in a browser (at I think it does).

Validation – I ran the home page through the W3C validator (The W3C Markup Validation Service), and there were a few errors reported. I recommend learning how to use the site.

Suggested reading – since you’re just getting started, here are two sites that I found helpful (besides Sitepoint)
Web Style Guide – Contents | Web Style Guide 3
A List Apart - A List Apart

Good luck with the site.

[brandontw]

I think you have a lot of work to go on this site.

I think especially considering the fact that it is a site to buy and sell art. I think it should have a certain amount of artistic style and classyness of its own.

Rich Korea already touched on most of the main issues with the site, but ill add a few of my own.

The background, and text styles seem dated and boring. This site reminds me of many from the 90's and early 2000's, just plain text and pictures thrown all over a neutral background. use some borders, and maybe some more divs to break up the layout a little.

I would maybe consider having a two column setup where the pictures are in one, and the description is in another or something.

And i personally like to make the content a set width and center the whole thing in the page... i think it makes it look more professional.

Another thing to consider, especially for your gallery page is some sort of thumbnail gallery for the art, so they can browse through them quickly and easily without having to scroll down the page forever and look at a bunch of tiny thumbnails.

This is a really nifty option thats pretty easy to implement with just HTML/CSS
Dynamic Drive CSS Library- CSS Image Gallery

Anyway, i would just keep learning and revising and trying new things. How did you build the site? did you use a program or code it by hand?

[gene438]

Have to agree with the posters above. Site seems a little boring especially for an art site..... I would recommend utilizing some high tech photo slide shows, etc. Also pay attention to type registration....I notice some floating type.

It terms of showing the actual art, I would suggest more use of borders and also some sort of animation like page turning or fading in and out.....

Keep at it.....you will be glad you did.

[eruna]

Simple can work well, but it needs to be bolder.

E

[k89mmk]

Keep at it - practice makes perfect.

When I made my browser window smaller, the text on the main page overlapped the image. You can use tables to keep this from happening.

Terms and Conditions would be better suited in smaller text at the bottom of the page.

Your navigation links have bullets, underline, different color, and surrounded by a box .... no need of all these! I'd definately remove the bullets and probably the underline as well.

Good luck with it!

[jamesg1234]

Thanks to everyone that took the time to look over my site, which is much appreciated.

I used menu items in their own divisions as I wasn't sure how to use relative positioning, which I've now read up on and will try to use.

Thanks for the article on that and also the link to the CSS image gallery. I used the .com in the name as most of the websites I use in my free time like mlb.com and nba.com have the .com in the name, but from what you all have said I'll probably remove it if its a bit dated!

I admit the site is basic and quite plain, my aim was to keep it simple. I'm not an artist myself so that's probably why it is not too bold and a little dated! I'll try in my spare time to jazz it up a bit and come back when I have.

I have three questions:

How do I set the content width and centre the content as brandonw suggested?

Can anyone point me in the direction of an article/webpage about using columns?

And what color schemes for the logo and background would you guys say would look more modern and bold than the beige and green I'm currently using?

Thank you all.

jamesg1234

[RichKorea]

How do I set the content width and centre the content as brandonw suggested?

The most common way to set the width and center the material is to use the CSS width property (for example, width: 960px) and then set the CSS left and right margin property to auto (margin: 0px auto 0px auto; ), which will center the division within the parent division (float and position can affect this, so you’ll need to read up on those CSS properties).

Can anyone point me in the direction of an article/webpage about using columns?

Best suggestion would be to do a Google search for HTML CSS Columns. A List Apart has a reasonable article at A List Apart: Articles: Multi-Column Layouts Climb Out of the Box, although it’s not really written for someone just starting with HTML.

And what color schemes for the logo and background would you guys say would look more modern and bold than the beige and green I'm currently using?

There’s nothing wrong with the green and beige, but if you want to think about different colors, there are plenty of articles on the Internet (e.g. Top 10 Resources To The Perfect Color Scheme for Web Designers). One possibility would be to base your color scheme on the intro image, such as the red dress image. The darker red color (#BA1C10) looks good on my monitor, and it might go nicely with a lighter green then you’re currently using (e.g. #58BA10), if you like green. The dark red on an almost pure white background (maybe a #fffaf7) might look good (you would need to modify the image using Photoshop or GIMP so its background matched the rest of the page).

[racoder]

1. http://www.modernbritishartcollective.com - OMG it'sA30CharactersDomainName... some poets wrote haiku or poems in that many characters
2. If you have sales and make a small profit, please consider buying a ready made design... it's like 30$ (search google) OR
3. go with wordpress or better yet a ecommerce solution

For a first site it's very nice.

[mjzombie44]

It's an okay site, you seem to rely heavily on tables have you looked into utilizing any open source software for your site, that is if you are unfamiliar with html css etc?