Troubleshoot & Critique my 1st Website Please.

Discussion in 'Web Design and Development' started by Dal123, Oct 12, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    Finally we're getting their chaps :). My 1st website is available to view/ critique and help troubleshoot and try to make as cross-browser friendly as possible.
    A massive thanks to angelwatt (couldn't have done it).
    Check it out http://www.preciseformwork.co.uk

    I haven't loaded an external css print sheet so far, more importantly a mobile phone sheet. Can some phones be too cocky and class themselves as pc's thus overriding the handheld sheet (so my stylesheet could be a waste of time). A lot of the time my site is viewed from a mobile phone and I think it's quite important that it looks professional. So far I have tested it on my phone and I notice that:

    • my text only goes around the width of the header above. I would like it to spread the width of the page.
      My top navigation bar does not spread evenly (and i think it would be better if I format it as a seperate list on each link and put it as 20% each one). I thnk this would sort that problem hopefully.

    On internet explorer I have only tested it quickly as I've just uploaded the site (about 5 mins ago) and on 2 different pcs Internet explorer I've noticed:


    • Same thing with navigation bar (only on one pc other one was ok)
      sidebar has no white lines between the seperate links.
    Any input appreciated :).
     
  2. techfreak85 macrumors 68040

    techfreak85

    Joined:
    Jan 13, 2008
    Location:
    Places
    #2
    My honest first opinion:"Seems 90s dot-com-ish".:eek:
    I think from its all just basic solid color backgrounds, text, and boxes. First thing IMO that should go is the yellow background.
     
  3. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #3
    I agree with what you're saying :eek:. It is bland and very plain, I was so stuck with mock-ups in photoshop, really struggling to find a layout.
    Being my first one and trying to get some experience I had to keep it basic. I think in time I will do another with customised stuff in photoshop and I would stick to measurements and plan it properly next time.
    Got some great ideas but it's hard to get the time to do it all where I know very little I wasted days just trying to place something on the left :eek:.
     
  4. yoyo5280 macrumors 68000

    yoyo5280

    Joined:
    Feb 24, 2007
    Location:
    Melbourne, Australia & Bay Area
    #4
    Not bad for a first, but you need to look at colors and fonts more. Think minimalist.
     
  5. iOrlando macrumors 68000

    Joined:
    Jul 20, 2008
    #5
    since your site seems to be purely informational (you dont have e-commerce, or an interactive sign-in etc)...why not just use a template? no need to reinvent the wheel here...
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    A template would look better I know but I wanted to do it all myself learned so much from it and would like to continue and possibly do some web design on the side.
    I think that laying it all out is the hardest thing (as we always see posts here about unexpected things happening).
    Thanks for input people.:)
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Just taking a quick look for the moment.
    1. The code looks pretty clean and validates
    2. Did notice an empty p tag right before the h2 tag that says "Precise Formwork Limited"
    3. You haven't given the page a title (home page)
    4. On your #masterhead, it has no content. I know you added a logo banner with CSS, but from a SEO standpoint you'll potentially be missing a chance to put the name of the company out there. You can either add hidden text that can't be seen visually or there's techniques like image replacement that you can use. I recommend turning off your CSS and JavaScript to see what your site looks like as this will tell you how search engines see it.
    5. For a professional site, I think it's better to capitalize navigation links.
    6. As others are noting, you'll want to continue working the color scheme.
    As for mobiles. Here's a list of links I have concerning design for mobile devices in general.
    http://validator.w3.org/mobile/
    http://ready.mobi/
    http://mtld.mobi/emulator.php?emulator=nokiaN70&webaddress=mtld.mobi (Nokia emulator)
    http://www.opera.com/mini/demo/
    http://www.marketcircle.com/iphoney/
    http://na.blackberry.com/eng/developers/resources/simulators.jsp
    http://www.browsercam.com/Default2.aspx
     
  8. Consultant macrumors G5

    Consultant

    Joined:
    Jun 27, 2007
    #8
    Basic usability problem:

    Underline text are typically used for links
     
  9. kate-willbury macrumors 6502a

    Joined:
    Feb 14, 2009
    #9
    why javascript in the middle of your html? thumbs down. and no title? and lol a 'div spacer' ? "mailto:" links are always a bad idea.
     
  10. CrazyIllini macrumors member

    Joined:
    Oct 8, 2009
    #10
    Great first website. However you have a REALLY ugly color scheme. Good luck with any future sites.
     
  11. omgitskevin macrumors member

    Joined:
    Jun 12, 2009
    #11
    A great start you have the code down just need the design which at times doesn't come too easy. Check out this website to get some inspiration for future sites. http://www.thebestdesigns.com/
     
  12. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #12
    If you're going to continue using mailto, you should consider encoding the email address. Your email address is clear for all spam bots to see in your source.
     
  13. maflynn Moderator

    maflynn

    Staff Member

    Joined:
    May 3, 2009
    Location:
    Boston
    #13
    The color selection and organization of the page, makes it look very dated.
     
  14. Angelo95210 macrumors 6502a

    Angelo95210

    Joined:
    Jan 7, 2009
    Location:
    Paris, France
    #14
    I agree as well. Avoid the pale yellow. Get a more readable font for the main title (though I like the rule idea). Work on your menu it's easy to tune it with tutorials.

    But you are on the good way. Keep it simple would be my main advice. I did to many complicated and under-used websites.
     
  15. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #15
    Thanks for all advice so far people, angelwatt great links, cheers bud. I see what you're saying about SEO, much appreciated. I might have the ruler plain and text as xhtml ontop of it. I think I might try to put the list of the nav in the masterhead too. What about when people create fancy buttons themselves in photoshop, they are wasting their SEO then, so how is the advanced styling done? Shiny text things like that.
    nuxx great link, thanks. I'm going to encode my link very soon thank you very much for that.
    Thanks for your encouragement people. Very kind. Trying to figure out some colour scheme.
    Kev thanks for the inspiration link, much appreciated.
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    Some use techniques like the image replacement I linked to before. Others use the alt attribute on images. The rest rely on the rest of their content's SEO strengths. Missing SEO points like this are not devastating, but they also make the content a little less accessible for blind visitors who can't read the images.
     
  17. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #17
    Cheers buddy, them links were great and I have managed to hide my text inside my masterhead, much appreciated.:)
     
  18. dmmcintyre3 macrumors 68020

    Joined:
    Mar 4, 2007
    #18
    PS: Here is the site without javascript but with css. There is a "Loading" that never finishes without javascript.
     

    Attached Files:

  19. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #19
    Of course there is; it is the alt text whilst the slideshow loads. The slideshow cannot load without javascript, so it's inevitable it will stay there.
    You could argue that my wording should be different and 'loading' should not be used instead 'Slideshow of Basement' but the guide to installing the slideshow does recommend having 'loading'.
    What do you suggest?:)
     
  20. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #20
    A common approach is to use the noscript tag and provide a message letting the visitor know they are missing out on a JavaScript powered slide show. If you can manage it, that empty space should not be there if JavaScript is disabled. This can sometimes get involved though, but at least a message for visitors to let them know what they're missing is nice.
     
  21. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #21
    Wow I had no idea there was a specific no script tag. Thanks for that, was completely unaware. :) :)
     
  22. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #22
    I second this, especially since your navigation (on the right) uses underlining on hover to show that a piece of text is a link.
     

Share This Page