My first website..

Morgan C

Morgan C

MAX LOUD PRESETS¯\(°_o)/¯
Apr 23, 2008
3,672
1
36
Sydney, Australia
www.myspace.com
Doing a couple of web design courses @ uni this semester.. first assignment due next week is to design a website for a bar near our Uni (real place). Have to redesign the home page + bookings page. The one and only time I touched HTML was to 'design' my Neopets page back when I was like 10, so I'm completely new to this, but it's not TOO hard..

Experienced dudes, what do you think of it so far? This link should work..
http://dl.dropbox.com/u/324723/HTML/PageLayout.html

Two problems I'm having at the moment are:
-background moves around when you scale the browser really short horizontally
-I want to fill in the 'home' button with red or something (this will be whatever page you're on atm), and possibly make it light up when you hover over.. for some reason this is really fucking hard to do? The menu up the top is an unorganised list, so I put 'home' in it's own <div> and tried filling in that but it doesn't work.

Pics are placeholders.. if anything seems really stupid please tell me :D Also I've just noticed that the line down the bottom is really extended on the right hand side.. fuck. Lining all those things up is so ridiculously hard. My pic dimensions are retarded.
edit: it's also got a scrollbar despite there being nothing to scroll to. WTf?
 
Not bad for your first job, but suffers from a few of the typical "noob" things that always some into play. I was guilty of it and so was everyone else that did it when they first designed sites....

1. Buttons to big on top - You are losing a shit ton of real estate on the page due to the menus being so large. Only make your buttons as big as the text they need to contain, or just use text.

2. No SEO - This website wont do very well with SEO. Reason being it has very little content, its just photos on a page really. one of the major factors in SEO is TEXT TEXT TEXT on your main page. You should have a shit ton of keywords and the name of the site on that front page as many times as possible without over doing it.

3. Tag line bigger then the logo / name - The eye immediately gets drawn to the tag line and not the name of the bar in this design

4. Photo Gallery and Sign Up Here boxes should be shorter from top to bottom to allow more room for the promo box on the bottom of the right side. Its barely readable.

5. One other thing I just noticed - the image in the "sign up now" box doesn't line up with the background, and doesn't fit the entire box so you get a staggering effect in the design when its "full screen". I say don't put a background that's so similar in that box, or make it transparent and let them regular site background carry it. In fact all of your images dont fit the boxes they are in perfectly. Check your margins and your cellpaddings, they should all be set to "0" for example ..

< table border="0" cellpadding="0" cellspacing ="0">
< tr >
< td >Your content ... bla bla bla < /td >
< /tr >
< / table >

Also just looked at your code, where are your tables? Are you making a call to a CSS file? If so just put your tables in the code on the main page, will help you SEE it all better when looking at the code. Making calls to external sources for something as simple as page layout for a site like this is kinda pointless. :)


Sorry for tearing it apart, but you asked for an opinion. Its not bad at all. I like it quite a bit, but with the tweaks mentioned above it would be more "professional" in my opinion.
 
Ok now onto your issues :)

-background moves around when you scale the browser really short horizontally -
Click to expand...
This can be fixed by making the background "FIXED" Take your pick from the below sippets if you are not using and CSS

< background="fixed" > or

< bg properites="fixed" > or

< body background="xxx.jpg" behavior="fixed" >


-I want to fill in the 'home' button with red or something (this will be whatever page you're on atm), and possibly make it light up when you hover over.. for some reason this is really fucking hard to do? The menu up the top is an unorganised list, so I put 'home' in it's own <div> and tried filling in that but it doesn't work.
Click to expand...
This is JavaScript it would be whats called a "Rollover" some examples can be found at http://www.htmlgoodies.com/beyond/c...ers-Whats-Good-and-What-is-Just-Plain-Bad.htm

a scrollbar despite there being nothing to scroll to. WTf?
Click to expand...
- Check that none of your images are stretching your tables, check that all your cellpaddings and cellspacings are set to "0", make sure your top margin on the body is also set to "0" and triple check your tables to make sure it all either ads up to "100%" if using percentages (you should never do this by the way ..lol) or the height and width of the pixels defined adds up to your total site dimensions.
 
guitarguru777 said:
Not bad for your first job, but suffers from a few of the typical "noob" things that always some into play. I was guilty of it and so was everyone else that did it when they first designed sites....

1. Buttons to big on top - You are losing a shit ton of real estate on the page due to the menus being so large. Only make your buttons as big as the text they need to contain, or just use text.

2. No SEO - This website wont do very well with SEO. Reason being it has very little content, its just photos on a page really. one of the major factors in SEO is TEXT TEXT TEXT on your main page. You should have a shit ton of keywords and the name of the site on that front page as many times as possible without over doing it.

3. Tag line bigger then the logo / name - The eye immediately gets drawn to the tag line and not the name of the bar in this design

4. Photo Gallery and Sign Up Here boxes should be shorter from top to bottom to allow more room for the promo box on the bottom of the right side. Its barely readable.


Sorry for tearing it apart, but you asked for an opinion. Its not bad at all. I like it quite a bit, but with the tweaks mentioned above it would be more "professional" in my opinion.
Click to expand...

No, I really appreciate all that man.

1. I'd disagree with this one, as the page is very small horizontally (there's not much actual info at all). I also get really annoyed when I can't find menus on pages.
2. I don't know a THING about SEO yet, and I don't think that's a major concern for this assignment (maybe later ones), its more of a lesson in learning HTML/CSS. The original site (http://cargobar.com.au/), doesn't have ANY text on its front page, yet it's the first result on Google? Anyway I don't think I'll worry about this too much for this assignment.
3. I agree, thanks I'll change this.
4. Yeah I agree with this.. the design brief was to draw a lot of attention to the 'new booking process', so that's why that one is so big. Also, the promo graphics always look so cheesy.. if you look at the original website, they're strewn all over the place and it just looks like advertisements for something else, very distracting. I'll have to have a think about this.. it will be a button, so you just click and you get a whole bunch of bigger images, but it would be better to be able to get all the info at first glance.

The big pic on the left is going to be one of those pic slideshows (I'll probably just take the one from the original website and stretch it to fit, as I don't know Flash [yet] and it's not really required for this assignment.


edit: you added a fifth.
guitarguru777 said:
5. One other thing I just noticed - the image in the "sign up now" box doesn't line up with the background, and doesn't fit the entire box so you get a staggering effect in the design when its "full screen". I say don't put a background that's so similar in that box, or make it transparent and let them regular site background carry it. In fact all of your images dont fit the boxes they are in perfectly. Check your margins and your cellpaddings, they should all be set to "0" for example ..
Click to expand...

Ignore that.. I made a mockup in Photoshop and I just screenshotted that for the image, so its using the background from Photoshop, at a slightly different size.

We were also taught tables = bad as one of the very first things in our first lessons.. although I forget why now. I've done everything in divs inside divs inside divs.
 
guitarguru777 said:
Ok now onto your issues :)

This can be fixed by making the background "FIXED" Take your pick from the below sippets if you are not using and CSS

< background="fixed" > or

< bg properites="fixed" > or

< body background="xxx.jpg" behavior="fixed" >


This is JavaScript it would be whats called a "Rollover" some examples can be found at http://www.htmlgoodies.com/beyond/c...ers-Whats-Good-and-What-is-Just-Plain-Bad.htm

- Check that none of your images are stretching your tables, check that all your cellpaddings and cellspacings are set to "0", make sure your top margin on the body is also set to "0" and triple check your tables to make sure it all either ads up to "100%" if using percentages (you should never do this by the way ..lol) or the height and width of the pixels defined adds up to your total site dimensions.
Click to expand...

Will fix the background tomorrow, its midnight already here.

JavaScript is beyond the scope of this assignment/my abilities at the moment, I'll have to find a workaround or just leave it for now.

I think my 'body' or container may just be too long, will look into it. Thanks again.
 
OMG .. really? Tables = Bad = Bullshit ....lol

But if thats what they are teaching you then you have to do it their way ....lol I would link to some of my work but 90% of it is fat girl porn .... HAHAHHAHAHAHA

no problem dude, overall layout is nice though, definitely better then the all vertical feel of the original site :)
 
Honestly, I'd remove the background. It's clashing with everything on it, making the website look very cluttered.
 
guitarguru777 said:
OMG .. really? Tables = Bad = Bullshit ....lol

But if thats what they are teaching you then you have to do it their way ....lol I would link to some of my work but 90% of it is fat girl porn .... HAHAHHAHAHAHA

no problem dude, overall layout is nice though, definitely better then the all vertical feel of the original site :)
Click to expand...

dude... you and your fat chicks hahahahahaha
 
Hey dude! For a first effort not too bad at all. I know there's issues here and there, but again, it's your first one not bad at all :)

To address some of your issues. If you want to fill the chosen button/ page with color etc, you're going to need to know some CSS. You can edit links with CSS so that you can change some options on it when you are A. Hovering over the link. B. If the link is clicked and is currently 'focussed' on etc. It's not hard, but its a learning curve too and will require some more images :).

Feel free to check out my web site for my web design company. I think our buttons are what you're looking for, they are all CSS no Javascript :)

www.bluesevendesigns.com

Cheers and good luck with it. Web design can be fun, but it's a bitch haha!
Also, GuitarGuru, I was also taught tables are bad haha! I use them sparingly, I still think they are useful, but the reason they aren't used is simply customization. Div's are much much easier to handle through CSS and provide you with endless option for positioning etc. Tables are kind of limited and so on.
 
Melb_shredder said:
Hey dude! For a first effort not too bad at all. I know there's issues here and there, but again, it's your first one not bad at all :)

To address some of your issues. If you want to fill the chosen button/ page with color etc, you're going to need to know some CSS. You can edit links with CSS so that you can change some options on it when you are A. Hovering over the link. B. If the link is clicked and is currently 'focussed' on etc. It's not hard, but its a learning curve too and will require some more images :).

Feel free to check out my web site for my web design company. I think our buttons are what you're looking for, they are all CSS no Javascript :)

www.bluesevendesigns.com

Cheers and good luck with it. Web design can be fun, but it's a bitch haha!
Also, GuitarGuru, I was also taught tables are bad haha! I use them sparingly, I still think they are useful, but the reason they aren't used is simply customization. Div's are much much easier to handle through CSS and provide you with endless option for positioning etc. Tables are kind of limited and so on.
Click to expand...

CSS is fine and I've already got links working (customizing, etc.), as you can see down the bottom with Employment @ Cargo and the Facebook/etc buttons. You seem to have used pics for all your links though, as opposed to text?

Also noticed the footer totally screws up on my iPhone, overlapping text and the Facebook/etc. buttons go all wonky. Only judged on how it looks in Mozilla for this though.
 
http://dl.dropbox.com/u/324723/HTML/Index.html

Updated, fixed up all the pics [the Flash thing on the front page is just from the original site, stretched, looks bad but I don't know Flash so I can't do much about it], changed some minor stuff and added the first page of the booking page (the menus up the top are now links but only Bookings works, and Home on the Bookings page).

I'm not really digging the design yet.. too much red. Really struggling to get something that works >< Putting in a bit of blue seems to work, but i'm not sure where yet.
 
On Safari.

This:
Picture1-6.png
 
I really dont like the size of the website.. the menu buttons are way to big vertically, and the text needs to be moved up inside of the buttons as they're not centered as it is right now.

The background image has a sharp edge at the bottom, make sure it fades out in to complete black.

Get rid of that ms-paint spray on the images.

Fix it so that the red line goes all along the box in the booking section, its bugging the hell out of me that its gone in the bottom and the right.

Personally, i would put a light tint behind everything that has any actual content in it, so it pops out from the background a bit more.
As it is right now, the eye is equally focused to the background as it is to the actual content.

guitarguru777 said:
OMG .. really? Tables = Bad = Bullshit ....lol
Click to expand...

Erhm.. its basic knowledge that you shouldnt use tables for layout.

http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/
http://www.hotdesign.com/seybold/everything.html

Read up. ;)
 
Notuern said:
I really dont like the size of the website.. the menu buttons are way to big vertically, and the text needs to be moved up inside of the buttons as they're not centered as it is right now.

The background image has a sharp edge at the bottom, make sure it fades out in to complete black.

Get rid of that ms-paint spray on the images.

Fix it so that the red line goes all along the box in the booking section, its bugging the hell out of me that its gone in the bottom and the right.

Personally, i would put a light tint behind everything that has any actual content in it, so it pops out from the background a bit more.
As it is right now, the eye is equally focused to the background as it is to the actual content.
Click to expand...

Thanks for this. I don't really agree about the buttons, but I'll change it and see what fits better.
Didn't notice about the background, will change.
MSPaint Spray is easy to change, I just need something to take its place ><
 
You must log in or register to reply here.

Similar threads

AdamWathan
Anyone here REAAAAALLY clever with CSS?
Replies
20
Views
651
Bar
Torniojaws
T
Melb_shredder
My studio website mockup - Thoughts?
Replies
14
Views
575
Bar
Melb_shredder
M
lolzgreg
My new website is done. Please check it out!
Replies
21
Views
1K
Bar
lolzgreg
L
ahjteam
I was browsing the thomann website...
Replies
7
Views
641
Bar
LeSedna
L
STINNETT
My new website is up.
Replies
25
Views
1K
Bar
Loren Littlejohn
L
Top Bottom
Back