Site review - opinions please

Discussion in 'Websites' started by IONWeb, Apr 17, 2004.

  1. #1
    Hello all,

    After a hiatus from webdesign - I am jumping back into the ring. Many things have changed over the past few years and it's taken a few months to get back up to speed but I think my knowledge base pretty decent - but then again, a 2nd opinion and another set of eyes never hurts ;)
    That being said - I would like to have some opinions on layout, navigation, and SEO optimization. The site is about a month old, PR is 4 (although lately there are fluctuations back to PR1 - I assume it is a datacenter issue)
    Looking forward to your thoughts.

    Regards,
    IONWeb
    http://www.ionwebdesign.com
     
    IONWeb, Apr 17, 2004 IP
  2. rosanda

    rosanda Guest

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    site looks okay to me, i couldn't find any serious problems.. Keep it up
     
    rosanda, Apr 17, 2004 IP
  3. iShopHQ

    iShopHQ Peon

    Messages:
    644
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Nice and clean - I like it.

    About only suggestion I have is maybe to add title tags to you text links. Not a biggie, but some spiders will give you a little extra for them.

    Maybe a contact page with a form to fill out that you then submit through a server side mailer instead of a mailto: link. My understanding is that the mailto doesn't always work depending on user configuration (though it works MOST of the time).

    Nice job!
     
    iShopHQ, Apr 19, 2004 IP
  4. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    rosanda - thanks for the kind words :)
    p.s. - with regards to your site - I assumed you had just added paypal and had not gotten around to cleaning up the code - most aps are still not valid for XHTML but one day they will be - I have to remember myself to fix the little buggers when I add something like that.

    iShopHQ - A contact form is already in the works - I have mainly been developing content, graphics, and layout but will be adding the form soon. Some people still like to use mailto: so that they can retain a copy of what they sent for their records so I will leave that in place as well and hope that the unicode is enough to keep the email spoofers away. Thanks for the suggestion on the link title text - Im working on my density and want to make sure I do not overdo it but in the end, I may add them. ;)

    Thanks guys
    ION Website Design
     
    IONWeb, Apr 19, 2004 IP
  5. Old Welsh Guy

    Old Welsh Guy Notable Member

    Messages:
    2,699
    Likes Received:
    291
    Best Answers:
    0
    Trophy Points:
    205
    #5
    Hi There,

    just a quicky, as I am pushed for time today.

    Your main phrase 'website design houston' does not appear as a phrase in your copy, it must do this if you are in a competitive arena. Also the word 'houston' only appears once on the page.

    I have found that a footer with your address and main service on every page will help tremandously for the algo to figure out the theme and link importance of your site.

    I use :-

    'address, town, county/state country telephone etc' then below it in the copyright notice
    Copyright 2004, Umbrella Consultancy Search Engine Optimisation services for Wales and the uk all rights reserved.

    I have found this works fine.

    OWG
     
    Old Welsh Guy, Apr 21, 2004 IP
  6. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    OWG,

    Thanks for the input - and a good idea you have about the address. I am still trying to tweak things, play will positioning, density, etc. Sometimes in doing this one misses the obvious (or else I just need to remember to blink once in a while I'm working) ;) But, that is what these forums are for - a second set of eyes never hurts anything so thanks for the input - it is greatly appreciated!

    ~MC
    ION Website Design
     
    IONWeb, Apr 21, 2004 IP
  7. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #7
    the small
    <b>Services Menu</b>
    on far right with its submenu runs out of my page/screen-size and i have to scroll ..
    may be you have a problem with your external css style sheet
    http://www.ionwebdesign.com/master.css

    look at ( approx line 31 )

    ...
    html>body #content {
    margin-left: 182px;
    width: 450px;
    }
    ...

    the "html>body" appears to be syntax error ( even if w3c sees none ) -- all THIS quoted PART may be obsolete and the result of an
    erroneous copy and paste ??!
    and it may be possible that ALL style sheet is misinterpreted as a result of THIS ONE syntax error as your a.m.
    part is NOT OUT-commented as you may have planned to do as with all else below on your master.css

    CORRECT OPTIONS are:

    #content {margin-left: 182px; width: 450px}

    OR

    body {
    margin-left: 182px;
    width: 450px;
    }

    anyway
    your positioning is too far right .. for THAT "services menu" - most likely your absolute positioning is too far right ..

    may be you have an indepth look at your master.css ?


    in external stylesheets it is possible to
    1. have ONE full configuration on ONE line
    example:
    body {margin-left: 182px;width: 450px}

    OR

    2. like you have correctly with linefeed
    example:
    body {
    margin-left: 182px;
    width: 450px;
    }
    BUT

    with option 2 - as YOU use it - MAY BE you have to out-comment EACH line if you want to deactivate part of css ?? -
    i am NOT sure if about !! and I could NOT find quick official reference-documentation about it at w3.org
    if YOU want to OUT-comment your sections with option 2 above - then ONE # at the beginning of EACH line MAY be needed for clarity
    example:
    -----------
    #body {
    # margin-left: 182px;
    # width: 450px;
    # }

    with option 2 above only 1 # at the beginning of a line is correct
    example:
    -----------
    #body {margin-left: 182px;width: 450px}

    i am NOT sure about that !!
    and the css validator at w3c gets easily confused and says OK even if part appears to be wrong.
     
    hans, Apr 21, 2004 IP
  8. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hello Hans,

    Thanks for the detailed reply !
    I did not realize what is was doing in mozilla - I had checked the text flow in Lynx but not mozilla. I have since modified the CSS and hopefully it fixes what you mentioned. Take a peek if you get a moment to see if the coding I did fixed those issues. I am downloading Mozilla 1.6 as we speak so I will check it out too.

    By the way - I only changed the home page and website services. I need to get some sleep so will change the HTML in the other pages tomorrow - but you can see on the others pages how the changes I made to the CSS screwed up the layout on the others :D

    Also, the html>body# is a workaround for Opera that goes with the voice-family which is in turn to correct a bug in IE5 Win - Yes - I know it does not validate which I do not like but not sure what else to do. What would be nice to know is how many users still have IE5 in use? Anyone have any clue about this?? Perhaps I may take it out if the number is small enough. Guess that is one of the little trials to overcome when using pure CSS for layout.

    Thanks again Hans!
    ~MC
    ION Website Design
     
    IONWeb, Apr 21, 2004 IP
  9. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #9
    every site may have much diference in browser used
    but here some data form past 3 days to give you an idea of different IE used:

    1: 51420: 10514: MSIE
    : 40163: 8279: MSIE/6
    : 11084: 2204: MSIE/5
    : 55: 14: MSIE/4
    : 110: 10: MSIE/3
    : 8: 7: MSIE/7


    YOU get exact details about YOUR visitors form yoru access_log

    since you appear to run linux
    a quick look:

    grep "MSIE 5.0" /gott/logs/currentlogs/2004
    (replace the path to YOUR offline access_log )
    will give no number but the output of all IE5

    but use of a good access_log analyzer tool such as discussed elsewhere in this forum may give you clear details in many aspects.

    re css screwing up ..

    first of all
    YOU sleep ?? why ?
    may be yu tired
    ME TOO yu know why ?
    i look at this CSS ..
    too complex and confusing ..

    my confused
    my browser confused
    my editor confused

    but it boils down to even less than basic web design
    it is basic MATHEMATICS:
    briefly:
    #sidebarright {
    width: 140px;
    padding: 10px
    border: 2px solid #000099;
    your CSS is highly complex
    i hope you NEED all that and KNOW all that !!
    because for me its like chineese ..
    i use simple css
    mobiles and smartphones can handle css but as far as i know only css 1 - bt that may depend on model AND OS used ...

    once a few years ago i had a very large index-page
    one day there was a www-guru talking about efficiency and page-loading time
    HIS advice was VERY clear ...
    and about as follows:

    take a laptop ( wireless )
    go in a SMALL airplane to about 10'000 feet ( 3300 mtr )
    equipped with a parachute and your laptop
    jump out of tghe plane
    open your site
    wait
    when FINISHED loading your page
    pull the parachute

    if you pass
    your site OK
    else ..
    you made one mistake too much n life.

    i changed ALL !

    NOW even on a 28 KB dialup line i pass the parachute test
    hopefully our panty girl as well !? :) with her many pics
    else you may still pray for a cool deep ocean being down there ..
     
    hans, Apr 22, 2004 IP
  10. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #10
    every site may have much diference in browser used
    but here some data form past 3 days to give you an idea of different IE used:

    1: 51420: 10514: MSIE
    : 40163: 8279: MSIE/6
    : 11084: 2204: MSIE/5
    : 55: 14: MSIE/4
    : 110: 10: MSIE/3
    : 8: 7: MSIE/7


    YOU get exact details about YOUR visitors form yoru access_log

    since you appear to run linux
    a quick look:

    grep "MSIE 5.0" /gott/logs/currentlogs/2004
    (replace the path to YOUR offline access_log )
    will give no number but the output of all IE5

    but use of a good access_log analyzer tool such as discussed elsewhere in this forum may give you clear details in many aspects.

    re css screwing up ..

    first of all
    YOU sleep ?? why ?
    may be yu tired
    ME TOO yu know why ?
    i look at this CSS ..
    too complex and confusing ..

    my confused
    my browser confused
    my editor confused

    but it boils down to even less than basic web design
    it is basic MATHEMATICS:
    briefly:
    #sidebarright {
    width: 140px;
    padding: 10px
    border: 2px solid #000099;
    #sidebarright a {
    background-color: #CCCCFF;
    display: block;
    border: 1px solid #666666;
    padding: 2px;
    width: 131px;
    roughly ( YOU do ALL - because YOU are the creator of confusion and hence the savior of yourself :) )

    (sidebar width OUTSIDE 140) - (2x10 + 2x2) = (116 width INSIDE)
    next step math:
    (2x1 + 2x2 + 131) = 137 for your navigation <li> !!

    hence ROUGHLY the navigation links in
    Services Menu ( and same on your far LEFT menue box )

    YOU want to FIT a 137 px link into a 116 px box ..

    PLUS in addition
    LI is by default indented ! as far as i see everywhere ..
    by HOW MUCH ? i have no idea but it looks several px

    hence YOU create math confusion everywhere and yoru navigation link break out into freedom

    thus

    recommendation

    auto !
    use auto

    here a precise short complete example i use for the Google Adsense to be far right

    div.google {
    float : right;
    margin-left: 2em;
    width : auto;
    }
    this causes the box to be wherever i insert THAT <div> tag just equal height of the TAG ABOVE
    and
    it adjusts to space USED within for links ( auto ) ...

    OR drop LI there and make it regular text (p) to avoid the indent of LI
    OR shorten your anchor text to be FAR shorter and match YOUR math of 131 minus all borders,margins,paddings, etc.
    OR make ALL css simple math and simple for all
    then LATER when YOU have full overview ... play with compelxity.

    why ?

    confusion makes tired ( YOU )
    simple keeps things flowing and working

    your CSS is highly complex
    i hope you NEED all that and KNOW all that !!
    because for me its like chineese .. tiring and confusing
    i use simple css
    thus less tired for the important things of life.

    above math sample is only PART of the math as you have many css configs with different
    borders, margins, paddings ... YOU know exactly which apply when where .. hopefully

    but if you try in your master.css to shorten the 131 to 100
    then you see instant math correction and WHERE the problem IS !

    and IF for whatever reason you want to make precise math to the single PIXEL - THEN
    pls keep in mind the SIZE oif all fonts
    just in case you change one day your font face from your present
    Arial, Helvetica,
    to whatever else
    ALL your text may change in size and all pix math is done and screwed up again !

    have fun
     
    hans, Apr 22, 2004 IP
  11. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Good morning Hans (or good afternoon where you are??) :)

    I took a peek this morning using Mozilla 1.6 and Firexox and saw what you are referring to with the navigation popping outside of the layer. In IE - it looks fine - no problems at all. Thanks for the heads up!

    With regards to complexity - I suppose it can be at times. I guess I can equate it to programming - if I were to look at some of the stuff Shawn does, for instance, my head would swim! :D When I look at the CSS coding - it makes sense to me (thank goodness)

    Achieving a pure CSS 3-column layout with sub-menus that is cross-browser compatible takes some tweaking - but in the end - it is quite useful and clean.
    A lot of what is in there right now is just ME playing around with design aspects. It will be trimmed down for the final release - i promise ;) ... Even as it is now - the page still loads complete in 10-11 seconds @ 56K

    Thanks again Hans - your input is helpful
    ~MC
    ION Website Design
     
    IONWeb, Apr 22, 2004 IP
  12. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    OK.... it appears as if the CSS issue with the navigation shift is fixed I checked IE, NS, Mozilla 1.6, and Firefox and they all look good.

    Thanks for the eyes Hans!
    ~MC
    ION Website Design
     
    IONWeb, Apr 22, 2004 IP
  13. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #13
    yes it looks perfect now even from this exotic and sunny side of the planet !
    i did NOT recheck the mathematics of pixels
    i am sure you did that correctly now :)
     
    hans, Apr 23, 2004 IP
  14. tsptom

    tsptom Well-Known Member

    Messages:
    257
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    138
    #14
    I really like the look of your site IONWeb. Very clean look as others have said. Now I hate mine. It looks so drab compared to yours. :eek: I need more color.
     
    tsptom, Apr 26, 2004 IP
  15. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #15
    tsptom

    may be you would LOVE your site if it would be VALID html code ...
    did you ever try the luxury of FREE site validation @

    http://validator.w3.org/

    and

    if you would love you to pass the "parachute test" and thus get your site FASTER
    all like below
    text-decoration: none; font-family: verdana, helvetica; font-weight: bold; color: white

    canb VERY easily be put into an external CSS and spped up the page load.

    and

    your site looks VERY much like IONWeb's site and has a nice appearance
    but if YOU dont like it ...
    may be you play around with your CSS ( the one you dont have yet )

    an external CSS has the advantage that you play with a few dozen characters of code and all pages using THAT CSS style sheet change in appearance to your liking.

    may be a little COLOR in the back ground or whatever ...
    or may be the title bars change their color

    its with a wet site like with your shirt or other dresses
    if you wear the very same too often it may get boring to YOU
    a site must be pleasant to visitors BUT above all to YOU .. because it's YOUR HOME-page

    so go with the fasshion and change a little here and there
    w/o really chaning content
    just font, sizes, colors ...
     
    hans, Apr 26, 2004 IP
  16. tsptom

    tsptom Well-Known Member

    Messages:
    257
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    138
    #16
    Thanks for the tips.
     
    tsptom, Apr 26, 2004 IP
  17. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    HI Tom,

    Thanks for the kind words - and by all means you are not supposed to feel bad (grins)... Believe me - I went through a lot of color combination changes before I settled on what is shown now. Fortunately for me, I can change up colors on the fly with my graphics software and like Hans said, CSS makes changing font sizes, colors, etc much easier, especially when changing across a series of pages. Personally I like your layout - it's clean and the logo is fantastic :D - nicely done! Hans mentioned CSS and that is a great tip - it cuts down on code and allows for better control over fonts and colors. To take it a step further you can use CSS for positioning but that is a whole 'nother ball 'o wax.

    With regards to what Hans said about validation, the first thing you need to do is add a doctype declaration.

    Try this one and place it above your html tag. You will not be able to even start validation unless you add this.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    There are many doctypes (DTD) based on what version of HTML you are using. I code in XHTML so my DTD is different. I think the one listed above is the closest to your code so it is probably a good place to start. You will find though that some of your attributes (bgcolor, topmargin, etc.) are depricated in favor of newer elements. But at least you can get an idea on what you need to tweak - it is a handy tool.

    Hope this helps a little - thanks again for voicing your opinion. Now I just need more people to ask for work :D LOL

    ~MC
    ION Web Design
     
    IONWeb, Apr 26, 2004 IP
  18. tsptom

    tsptom Well-Known Member

    Messages:
    257
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    138
    #18
    Thanks a lot. Great info. Sorry to take up your thread.

    Maybe I'll have some work for if I can't handle the CSS programming or if I need a new design. :)
     
    tsptom, Apr 26, 2004 IP
  19. IONWeb

    IONWeb Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    LOL.... no worries Tom, this in not MY thread - I just posted it - if someone can learn from is besides me - then all the better - that is what forums are supposed to be. If what I or others offer helps you then it all good to me and I'd be happy to help in the future if you get stuck ;)

    ~Michael
    ION Web Design
     
    IONWeb, Apr 26, 2004 IP
  20. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #20
    the principle of CSS is very simple and EASY

    you remove all style on the pages from EACH tag and put ONE times the style for EACH tag in the CSS file.

    a person who can make such nice pges can understand best from looking at a sample CSS
    look around.
    surf
    if you see a NICE page design - Ctrl +U ( view source of page )
    look at the path to CSS in meta tag
    then open and see ..

    MAY BE thats illegal+so another LEGAL option
    one of MY CSS
    http://www.kriyayoga.com/style/jesus.css

    and may be OTHER offer THEIRS as well
    in the first tests you may simply copy and paste entire sections and adapt the values as you please. all is self explaining somehow because lits all logic and obvious to you

    in the TOP section of my CSS you see a few very simple style tags defined
    and you will easily understand the "physiology" of CSS.

    in lower section you find a few simple samples to control positioning ...

    i started EASY a few years back - and increased the volume of CSS control step by step ..
    absolute positioning requires you to CALCULATE what is possible - else you get a math conflict :)
     
    hans, Apr 26, 2004 IP