Web design advice?

Discussion in 'HTML & Website Design' started by Mikleran, Feb 18, 2008.

  1. #1
    Hey,

    I'm slowly building up a website for somebody, and I'm in need of advice. It's my first website at all (although I've used C# for ages so PHP hasn't been too much of a problem), so I'm still rather new to what makes a site decent and all that.

    The temporary host is at this address: http://kinross3142.dyndns.org/ (no, seriously, there isn't anything wrong with it...). There are some obvious corrections to make, such as adding some padding to cells etc but that'll be done in time.

    What I'm wondering is should I make the page scalable, so that its height is always equal to the browser's height upon load? The website's designed around a 1024x768 screen, so will probably look poor on a 1280x1024 one...

    Also, do you have any tips for how to improve the site as a whole? It would be much appreciated!

    Thank You!

    Mikleran
     
    Mikleran, Feb 18, 2008 IP
  2. JeffHood

    JeffHood Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I use the following to get 100% height:
    I've test this and it works.
     
    JeffHood, Feb 18, 2008 IP
  3. Mikleran

    Mikleran Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That's CSS, right? I haven't used that at all in the website! :(
     
    Mikleran, Feb 18, 2008 IP
  4. redspace

    redspace Peon

    Messages:
    619
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    well you better learn CSS if you want to save a lot of your time.
     
    redspace, Feb 18, 2008 IP
  5. CaffinePhil

    CaffinePhil Banned

    Messages:
    945
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    How have you created the hover over buttons on the left navigation without CSS. I also noticed that some the contact us one does not change blue like the others and only on a couple does the cursor change.

    I also noticed that the images took a little while to load and I'm currently at work in a Digital Media Centre so that is with good bandwidth available. You could have a look to see if you can shave off a few k on each of those - especially the banner.
     
    CaffinePhil, Feb 18, 2008 IP
  6. Salsa_Boy

    Salsa_Boy Peon

    Messages:
    85
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Don not ever use .PNG files on your website. First export them to JPEG and use those; they weight less than PNGs.
     
    Salsa_Boy, Feb 18, 2008 IP
  7. Mikleran

    Mikleran Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Erm, I guess I've used CSS to the extent of writing "style="cursor: pointer"" in the img tags but it's not in a CSS file or anything. Unless you're meaning my onmouseover="document.image.src='whatever';" stuff to change the image when you move the mouse over?

    The images took a while to load because they're being uploaded over my crappy internet connection: the whole site's just stored on my PC at home atm. <250kb/s upload speed for the loss. :(

    Inkspace's only non-vector graphical output is PNG.. so I was kinda limited. APart from the banner, I think all pics bigger than a few KBs are JPGs anyway, aren't they? :s

    Thanks for your help so far, and sorry if you've seen the site with some horrible stuff such as the wine-red background gradient etc- I'm just playing around with stuff like that atm. Any more advice would be greatly appreciated!
     
    Mikleran, Feb 18, 2008 IP
  8. lock

    lock Banned

    Messages:
    205
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It looks as if you have gone the hard way around creating a menu with the hover option. It is a very simple thing to do in CSS. If you place the list in a div tag with the id lets say left_nav you can use the a - anchor and a: hover attributes of css to style the whole list of links at the same time.

    I found this site really useful when learning css and html for that matter - www.htmldog.com
     
    lock, Feb 18, 2008 IP
  9. TechnoGeek

    TechnoGeek Peon

    Messages:
    258
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I think your site is fine. I wouldn't worry about making the page scalable. I would rather redesign it so to avoid that frame with the company's history. Make the page without frames. People (me) just don't like pages with frames.
    Good luck.
     
    TechnoGeek, Feb 18, 2008 IP
  10. Mikleran

    Mikleran Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Again, thanks for the replies!

    Do you mean frames entirely or just scrollable frames? I think I accidentally left the history page slightly too large last time I edited meaning it had to have scroll bars... my aim was to rid the site completely of scrollbars, which is why it's so compact!

    If you're meaning rid it entirely of frames, originally it didn't have any! However, it did mean that the contents/banner were reloaded every time you clicked a link so I scrapped it... do you think I should reverse my decision?

    Ah, thanks very much. That's something to bare in mind in the future... I don't think it's worth changing how it's done now.

    PS.. Thanks for the link... helpful site!

    PPS... Did anybody peek into the projects section by any chance? That's probably had the most work done in it and probably needs the most refinement... :p
     
    Mikleran, Feb 18, 2008 IP
  11. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #11
    Not entirely true. JPEG images were intended for digital photography, PNG's were designed for use on the web. while it's true that because JPG's are compressed they will take up less space, they are also a lower quality.

    Also, PNG's can have variable transparency, never lose quality, and will show up on the other screens exactly as they appear on your own screen (gamma correction) - making it a better format for web.
     
    innovati, Feb 18, 2008 IP
  12. Mikleran

    Mikleran Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sorry if double posting isn't allowed, but it wouldn't let me edit my previous post.

    Anyway, this is what the site should look like... hopefully after some testing it will look like this in IE... img147.imageshack.us/img147/8834/websitetu9.png [That's in Ubuntu Firefox at 1024x768]
     
    Mikleran, Feb 18, 2008 IP
  13. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #13
    hmm, something funky happening there with your pattern behind the text. I'd actually remove that pattern or else make the stripes bigger, anti-aliased and WAY less contrast. Don't want it competeting with the type for legibility!

    I'd also think props are in order for using ubuntu *hi-5* I'm a big kubuntu lover myself, but it doesn't run correctly on my iMac yet :(
     
    innovati, Feb 18, 2008 IP
  14. johnwill

    johnwill Peon

    Messages:
    54
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    sorry to be mean but you designing in the 90's. needs a web2.0 feel. loads very slow for me. may be just me.
     
    johnwill, Feb 18, 2008 IP
  15. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #15
    Well, I disagree, web2.0 is easily overdone and leaves a REALLY bad taste in most designer's mouths. his design isn't stellar, but it's certainly a good one.

    I didn't see anything outdated on his site, and I didn't see anything 'trendy either' so I imagine it'd be a good site that would sit well with most viewers and last for more than 2 months in the web trends world.

    Keep doing what you're doing :)
     
    innovati, Feb 18, 2008 IP
  16. Erna

    Erna Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    you may check this site: http://dreamvib.com
     
    Erna, Feb 18, 2008 IP
  17. Mikleran

    Mikleran Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I'm not wanting to seem like somebody who dislikes all criticisms, but web2.0 was certainly something that I was not aiming for. It's one of these things that I truly dislike because it's so overused despite not actually meaning anything special. Like 'Amy Winehouse'.

    Anyway, what what would you reccommend I do then if I were to try to make it more flashy/modern?

    And yes, it loads slowly... I explained that earlier! :p

    How odd. Is that in Safari? Bah, even if not... I'd totally forgotten about having to test it on that because a fair few of the people looking at the site are likely to be in Safari.

    *hi-5s back*
     
    Mikleran, Feb 19, 2008 IP
  18. camp185

    camp185 Well-Known Member

    Messages:
    1,653
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    180
    #18
    Use the same type of font for starters. Sending you pm
     
    camp185, Feb 19, 2008 IP
  19. The Summoner

    The Summoner Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    pngs have transparency though
     
    The Summoner, Feb 19, 2008 IP
  20. Salsa_Boy

    Salsa_Boy Peon

    Messages:
    85
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Yep, PNGs have advantages but my comment was referring towards the size(it took a while for me to load), so maybe he could optimize some of that.
     
    Salsa_Boy, Feb 25, 2008 IP