Is this website good?

Hi,
I just made this whole website by myself, i'm only thirteen just want some feedback and if you have any ideas and pointers to help me out that would be great.
www.smartbikecanada.com
Thanks
Brandon

Brandon,

In my opinion, you have nothing to be ashamed of with this site. It looks good, is well organized, and presents your products well. Having said that, and since you seem to be interested in "professional" results, I have a couple of comments that are meant to be only constructive:

1) You might want to rethink how you accomplish your layout goal. CSS could help you acheive your "Centered" much more efficiently and allow the site to "resize" and remain centered on 800x600 screens. It might seem lilke a big project, but the results will (IMHO) be worth it.

2) You can "kick it up a notch" if you will consider abandoning the image based rollovers in favor of CSS driven "list" menus (check out listomatic on google!), since your images are essentially "text" anyway. This should give you better search engine friendliness, looks cool, and is very easy to change should you need to add additional links as your site grows. The JS is well done, but there are, I think, better ways to do it.

3) I think you should be more careful about your use of centered text, rather than "left-"aligning it. For some things, it looks ok, but multiple centered paragraphs get hard to read, and don't have a polished look. Looking at your "installation guide", if you try left justifying, or using a "list" for the section links, I think you will be more pleased with the results.

Enough criticism (and I am only trying to give feedback)! The site is well done and I think the fact that you did this site at your age shows you learn well, care about quality, and have great potential. I have seen a lot of sites around the web that people have spent a lot of money on that are not as nice as yours and do not show their busines in as favorable a light as you have here.

Good Job!

rlparker

> Is this website good?
Yes it is. It's a complete website: all the needed parts are there (products, support, contact details, etc.) and it is presented nicely. I very much like the fact that you have not made a great fuzz about design. You're using the default fonts and colors, and you use the graphics at the top to convey your business image.

I think rlparker already gave you some very useful tips. Re-doing the whole thing with CSS may be too much work, but give it a try if you feel adventurous. Once you get the hang of CSS, it's good -- but it's not critical, so you can keep using HTML if you prefer.

Perhaps you should also think about making the home page more interesting. If you're selling flags, then an image of a flag is well used. When you're selling bikes and bike parts, show a bike photo instead. You don't need to put all your photos on the first page, but do put one that shows the visitors what your business is really about. Try to look at the website from the perspective of a customer, or ask a friend or parent to "think aloud" for you while seeing the website. That might give you some ideas about what to put where.

Electric motors for bikes is a really cool idea! When I was 19 I tried to market bikes with (Canadian!) automatic transmissions, but it didn't lift off because it required a lot of money. You're already in business and you have a great product. I wish you all the best of success!

In reply to:

---

I just made this whole website by myself, i'm only thirteen just want some feedback and if you have any ideas and pointers to help me out that would be great.

---

Dude, you don't need any ideas or pointers. If I had been able to do stuff like that when I was 13, I'd be a very rich man by now. Nice job.

That being said, consider learning to write valid code (according to the HTML 4 specifications). You will find it easier to make the transition to Cascading Style Sheets if your HTML is valid.

The site is very good. It is easy to navigate and isn't cluttered. Keep doing what you are doing.

http://www.pornladder.com

Actually I found a problem: If you click the top graphic, it tries to take you to http://www.smartbikecanada.com/Header Link which doesn't exist. It should probably take the person back to index.html or whatever index you have setup.

http://www.pornladder.com

Good site, Brandon. I wish my first site had looked this good.

Here's another recommendation: you might want to spend some time with your images.

You should use a graphics program (I'm guessing from your code that you might have Fireworks already) and optimize your photos for your page.

For example, on your "Products" page, you have image "Bike.jpg" that displays at 320x240 pixels. The actual image is 640x480 pixels. Even though you have the small picture on the screen, viewers' web browsers have to load the 113k image. If you resized the image and optimized it, you file size would be reduced to ~31k, reducing the time it takes to load considerably (especially for folks with dial-up internet)... this will help keep prospective customers from getting bored while they wait.

The other two pictures on the page have been distorted a little because the've been jammed into a space with different dimensions than they have (wider or taller).

You should usually figure out what size you want an image to display at on a page and then optimize for that specific output.

Also, as your site grows, good site management is key to keeping it well organized. It's usually a good idea to keep all your images in one folder (and subfolders of that folder)... it helps prevent mistakes where you link to the wrong folder by accident. Right now you have /images and /Pics. Not a big deal and completely acceptable... just my two cents.

Keep up the good work and good luck with your business endeavor!

your content area is 696 pixels wide, good enough to fit in the lowest common denominator of 800x600 resolution (still reporting at 20-25% useage) but it breaks (HSOD horizontal scrollbar of death) all the way up to 1024x768. Looks like you're designing for 1024x768 as your lowest common denominator as the width for the main layout table is set to 1024 but you've forgotten to accomodate the width of a scrollbar, and I just relaized you made this whole thing with Adobe Image Ready...

Use of a wysiwyg slicing tool like that stops the flood of info that was coming and causes me to ask, what exatly would you be interested in changing before I start to blow hard :) Some things that could or should be changed:

It's a very simple design that could be done without tables quite easily, and to much better effect.

Your main navigation is not complete and the remaining links are in the footer, probably below the fold on every page. A place where people would not normally expect to have to look for links to relevant pages.

Typography and color choices could be better, espeically the main header grahpic that just throbs, white and fully saturated red cause my head to hurt if I look at it too long, I'm serious!

Products pages should probably have thumbnailed images on the page that lists all three to keep them from taking up so much height and getting the up above the fold or therabouts. As it is is in 1024 it cuts off right after the first product, people will probably figure out that there's more below and scroll, but (it's been shown in older people esp) it may take them a sec to realize that, it's not a natural flowing process, which is what you should strive for when trying to sell something on a web page. And whene you reduce and image's size do it with photoshop or somesuch and not the height and width attributes in the img tag itself.

Anyway, great effort from a guy your age no doubt, but you'd be getting much better advice if you hadn't mentioned your age! If you're interested in any of the proposed changes and how to impolement them, post back, there's a bunch of people around that would be happy to help.

jason

Hi,
I made the site in Photshop and Edited using HTML Code in dreamweaver. Yes I already have Fireworks and Flash. I will change all of the pictures in the next hour or two and update the products page. user919 what colours would you suggest? I am going to try and play with the CSS after dinner and see what I can do.
Thanks
Brandon

I don't really understand CSS to much. Is there any good tutorials or helpful guides anyone knows about?

Quote from rlparker:

1) You might want to rethink how you accomplish your layout goal. CSS could help you acheive your "Centered" much more efficiently and allow the site to "resize" and remain centered on 800x600 screens. It might seem lilke a big project, but the results will (IMHO) be worth it.


How do I do that?
any ideas on what colours I should use?

Edited by smartbikecanada on 11/17/05 05:32 PM (server time).

I thought this site was a pretty good tutorial.

http://www.brainjar.com/

In addition to the tutorial that was recommended. you might check out the book "Eric Meyer On Css" by Eric Meyer, available at amazon. While it does assume a little knowledge of css (probably no more than you will find in the mentioned tutorial), it thake you through the process of converting a non-css site into a css site, which is a "fun" way to lean.

-rlparker

http://pmob.co.uk/ has some good layouts, simple enough to be explained by the markup/css alone in most cases, some have short descriptions of the problems overcome for each. Probably not the best for a beginner.

http://glish.com/css/ is what I used to reference when I was first learning to transition from tables to css-based layouts. I bet it's still good.

To me it sounds like you don't write any of your own code by hand so you may be best digging in to a book as suggested if you want to learn, then just worry about "design issues" with this site, fixing them with the tools you're comfortable with and have at your disposal (PS and DW).

As for colors, I can't really tell you what colors to use, I was just offering the information that fully saturated colors like ff0000 and ffffff are really hard on the eyes after extended viewing. Try less saturation for starters. If you're artistically impaired you might want to try an online color thingie that does all the mathematical splitting for you, lemme find a few...


http://www.colorschemer.com/online.html

http://wellstyled.com/tools/colorscheme2/index-en.html

http://www.siteprocentral.com/html_color_code.html

If you get the horizontal width problem fixed tho you'll be at least ready to show the world and work on other stuff as you go

jason

In addition, I'll throw in some of my CSS bookmarks:

http://www.csszengarden.com/ - One of my favorite sites

http://www.alistapart.com/topics/css/ - CSS articles and tutorials

http://www.ssi-developer.net/main/templates/ - Layout and design, various ways CSS can be used to create columns on web pages

http://www.htmlhelp.com/reference/css/ - Style sheets tutorial, structure and rules, properties, CSSCheck, references, more

http://www.webreference.com/authoring/style/sheets/layout/ - CSS layout resources and information

I'll also mention that I used the glish.com site that user919 mentioned to learn. Another fave. :)

Here's a color resource:

http://www.dezina.co.uk/colorchart.php - Test web colors

Another couple of links you might like to have:

http://www.strangebanana.com/ - This one's just fun; computer-generated webpage design, great for ideas

http://www.webpagesthatsuck.com/ - Learn usability and good Web design by looking at bad design

http://www.worstoftheweb.com/ - Sites that suck in the opinion of the people who run this site; of course, you should come to your own opinion, but it's always good to see what others don't like

Jen
http://www.SassyDevil.com/Edited by SassyDevil on 11/18/05 10:47 AM (server time).

That is a very nice list, SassyDevil! Thanks for posting it.

rlparker

Hi Guys,
I updated my website over the weekend with an all new CSS Design. I know a few pictures do not work right now and I will fix them when I get home from basketball tonight. Tell me what you think and if you have any more sugestions please pm me.
Thanks
Brandon

It looks really good. You're coming along quickly.

I don't know if you realize it, but you might want to reconsider the first link on your links page.

The home page for Goldenmotor is selling the product you sell for considerably less... that might undermine your business.

Also, they have you and your brother's photo on their homepage... I don't know if you guys gave them permission.