My First real website

Discussion in 'Website Reviews' started by X_Gary_X, Mar 17, 2011.

to remove all ads.
  1. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    Hi everyone,

    Any feedback would be great. I'm a beginner with a month of CSS in me. This is all hand-coded.

    Thanks in advance http://www.rightfitcareers.org
     
  2. DHDdirect

    DHDdirect New Member

    Messages:
    383
    Background loads much quicker than before :). IE seems to have issues with the green navigation swap, as in it's not displaying the green. (correction: it did show up eventually. not sure why but it took ages) And when you hover over affiliations the submenu is being overlapped by the "request your free newsletter" text.

    You are certainly getting there though. Keep up the good work.
     
  3. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    thanks!

    I fixed the z-index so it doesn't overlap anymore. I didn't see that, ty.
     
  4. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    Thanks, yeah I hear ya. I wanted to keep the briefcase at a minimal size for smaller monitors, and my idea was to just have the data scroll (some of the other pages have this).
     
    Last edited: Mar 18, 2011
  5. notarypublic

    notarypublic New Member

    Messages:
    235
    The coding is very well done, but as a designer there are lots of things I would recommend changing. I'll keep this constructive, and as always take my advice with a grain of salt - it's your design, so you do what you feel is best.

    Top Navigation Bar:
    At first I didn't notice what this was - The two small links are both redundant, and you can probably remove this section entirely. It is a usability issue to give your audience more links than they need to access at any given time.

    Animated GIFS:
    This is probably my biggest concern. As a design rule, animated .GIFs haven't been considered part of a professional design since the 2001-2003 era of websites. Putting them on your site these days will cause your audience to assume the website is that old, and is less likely to trust your content to be accurate and relevant.

    The other issue is that your client base will probably consist of a larger number of disabled users. If they are unable to view the images (blind, poor eyesight, etc.) then they will be frustrated at not being able to view all of your content - and unfortunately may move onto a different site.

    The image also stretches based on the size of the page, which is another concern. Users like consistency from one page to the next.

    "# of visitors" counter:
    This is another design rule that has been unofficially enforced for a number of years, now. Look on popular sites today - google, reddit, this forum, etc. - visitor counters are a thing of the past. If you want to track visitors to your website, your web host should have tools to do this; generally speaking you don't want your audience to know how popular (or unpopular) your service is.

    Embedded Audio:
    Don't do this.

    Using images for text:
    This page is a good example. Again going back to the fact that your audience is more likely to have issues viewing images, these scanned-in images of newspaper articles are going to cause problems. If the newspaper they came from has a website, put a link directly to the story. If that's not an option, save the image as a document and allow the user to download it so that they can print it if they need to.

    The other issue is that this increases page load times. Google now uses the time it takes to load a web page as an indicator of whether it is a "good" website or not - if it takes a long time to load, it will have a lower page ranking and people will be less likely to visit your site when they search for similar sites on google.

    Pre-rendered graphics:
    Gradients are another design element that have been phased out in the last few years. If you remember in microsoft word 2003, most of the options for word art were different textures and gradients - If you look at word 2007, and now 2010, most of those have been replaced with simpler color patterns. The truth is, design trends will shift between making things look more complex and more simple. Right now, we're progressing towards simpler designs (look at apple, IKEA, google, etc.) and overuse of gradients, textures, and color will appear distracting to most users.

    I really like the background image that you're using, but I would only use one gradient at the most on your page. Think "less is more."

    Inconsistent Fonts:
    Your contact information below the webpage is a serif font, probably times new roman; your font for everything else is sans-serif. I like the sans-serif, so changing your contact information to the same font as the rest of the page should be an easy thing to fix.

    You use white text on a blue background for various titles through the different pages - I would recommend using the same color blue for all of these "titles." You could also put them in consistent places on your page.

    --------------------------------

    I'm currently working on a project where the last designer was an average designer but a horrendously awful coder. Design is much easier to change and fix than bad code, so you're in pretty good shape. There are more things I would recommend changing as you go, but for the sake of not overwhelming you, make some of these changes and we will be more than happy to continue giving you feedback. I remember my first website, and it was much worse than this :D

    Best of luck,
     
  6. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    Thanks for the tips!

    Yeah, the music player is something my father "insisted." He wanted it to play on a splash screen when you go to the site lol. I compromised with him to have it not auto play and no splash screen.

    I don't have any web-design programs besides an old frontpage program, and photoshop 7, so I used animated gifs, because I don't have flash, but I love simple animations.

    I haven't done web-design since 2005(graduated college-CIS degree), so that's probably why some of these tips you gave me, I had no clue about. I've pretty much been learning to code from w3schools for about a month now, and designing based on my opinion, (not trends or considering certain other aspects, which you're right, I should. Like I said, I'm still learning, so I appreciate the feedback. It'll be hard for be to phase out my gradients though, but I completely understand what you're saying and will consider this.

    I'll make some adjustments when I have some extra time. Thanks again.
     
  7. notarypublic

    notarypublic New Member

    Messages:
    235
    It's hard to design for family.. I've been through that myself ;)

    A lot of clients want to view their website as their "art." Unfortunately... most art doesn't sell. For every Picasso, there are thousands of painters air-brushing pictures of eagles and wolves at the mall.
     
  8. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Speaking of both of these points, I'm redesigning my mom's husband's website. The previous designer was the airbrushed eagle at the mall "designer". Take a look at http://www.pjweber.com and cry with me. Tables, images in place of text. They didn't even add meta tags. They can't even figure out why they aren't showing up in search results...
     
  9. notarypublic

    notarypublic New Member

    Messages:
    235
    see if you can make the site "disappear" :D
     
  10. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Hilarious!:D
     
  11. omglookitsagoat

    omglookitsagoat New Member

    Messages:
    68
    The colors of the rollover effect don't coordinate well with the colors on the rest of the site. Try to have a well developed color scheme in mind. If I were you, I might try to find a different font for the header.

    Also, I don't think it's a good idea to make the header an animated image that changes to the subheading back and forth. I think it would look better and be less distracting to look at if it just had a header and subheading below it, but without having it animated.

    notarypublic has some good suggestions.

    I'm not sure it's a good idea to have a scrolling box for the content of your website. To me, it makes it harder to read all of it when all the content seems squished into a tiny box.

    You should really focus more on improving the design/look aspect of your website. Your technical skills are impressive enough, but you don't necessarily need a complicated site to work well. Add complicated coding techniques when necessary, but leave them out when they're not. The look and feel of your website has a strong influence on the appeal of it and its content you're trying to sell.

    Here's a website I recently made. Not to say that I'm the perfect website designer either or anything like that, but I think this is a good example of a website you could look at for an example. It has a clear, well developed color scheme, but it's not more complicated than necessary, so the content is easy to read. There is a time and place for your impressive coding ability, but don't add features that are unnecessary.
    http://www.firedrakeconsultancy.com/index.html
     
    Last edited: Mar 21, 2011
  12. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    http://www.rightfitcareers.org

    -fixed submenu overlap
    -made submenu smaller to show more content
    -navagation bar gone
    -counter gone
    -music gone
    -fixed footer font
    -fixed title font
    -fixed rollover color and overall color theme
    -added scroll down links to make more user friendly

    Now, as for the rest...

    can I get some more opinions on why the animated header is bad? It's one of my favorite parts, and everyone I've showed it to loves it...so why is this such a bad idea?

    I really like the idea of the briefcase, and don't want to kill that theme by
    lengthening it. I could widen it slightly though, but I was thinking of keeping the space on the right and left for possible future adsense.
    Any other tips?
     
    Last edited: Mar 26, 2011
  13. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    the header animation is bad. the orange-yellow-orange gradient screams "word art", the font I would suggest needs to change to something else, and sitting on the "handle" of the briefcase, only confuses the issue even more, i'd move it to the left. As mentioned previously, Animated gifs have had their day, and no matter how well constructed you may make it, it subconsciously makes people think that the site is old, and they always feel tacky.

    I dont like how with the rollover the words become capitalised, nor do I like how the font starts black, but then goes white when you are on the words. choose one or the other but not both. actually the menu looks quite "old" too with the way you've done it. perhaps a css menu without images would be better, and far easier to change.

    keep the briefcase if thats your intention, but make the scroll the whole size of the briefcase rather than (less than) half. you really need that extra bit of space to work with. although on first glance it looks more like a photo frame.

    and the big one. keep your font styles consistent from page to page. when each "paragraph" is a different size, when "strong" text is larger, when your justification is left, right, and centred, when you overuse italics, when your header styles vary indefinitely and when there is a lot of colour used that doesn't fit/work it all just doesn't work. consistent font, justification and a logical step-down with font-sizes from h1-h6, italics,bold only when needed. and NO CAPITALS PLEASE!!! I DONT PARTICULARLY LIKE TO BE YELLED AT.

    also maybe consider floating your images, so that you gain the extra bit of space from below them. and your briefcase needs some work to come across as a briefcase.
     
  14. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    oh and viewed on 1440 x 900 i still have to scroll down to view your footer. maybe try and fit it all in, and maybe on the right of the handle, put the social media badges...
    just a thought...
     
  15. X_Gary_X

    X_Gary_X New Member

    Messages:
    40
    ok...anything good about it? lol

    Nah, ty man...appreciate you taking the time. I have a lot to work on. Thanks
     
  16. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    like mentioned before its coded fine, so thats a big step in the right direction.

    layout and design takes time, but it is a lot easier if its coded right.

    just look around the web and keep note of good websites that really stick out to you - design wise - and try and take on board some of their concepts.

    over time you'll learn what it is that 'you' see as good design and you can then apply that to your designs...
     
  17. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    I feel for you, that truly is a disaster!
     
  18. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    LOL. I found out it was built in 1998. So, they get a partial pass on that, but holy crap it's bad.
     
  19. rickidoo

    rickidoo New Member

    Messages:
    15
    Hi Gary,

    1. One question that pops in my head when I look over your site is whether your Dad does long distance coaching. That is, out of the Keene area; over the internet/phone.

    Depending on how much work he wants to do out of the immediate area, you may want to get this message across prominently (not just buried in some text line in the body text.)

    I would not leave this question to "silence on this subject means he'll coach anyone anywhere". It's important to let a web visitor know, in less than a few seconds, whether this person can help me, or not.

    2. If you do want to keep his business close to the Keene area, then the site needs to be tagged better for the search engines to recognize that. If you post what your desires are in this regard I can give you some tips.

    3. If it is within your technical expertise to do so, have the left menu item currently selected remain in the "on" state. For example, if you are on the testimonials page, keep the testimonials menu item "blue". This does two things. First, for the user that is navigating around the site, this will help them keep track of their location. Second, for a new user coming in to (any page) from the search engines, it will help them know both where they are at and that they are NOT on the home page.

    Remember, people are in a huge rush when checking out websites, and they need this nudges to keep them on track.

    4. On one hand I like the compactness of the pages, on the other hand, there is a reason why every site doesn't have the small microwindows of text that allow you to keep a constant body area size as you have. The reason is, the user being in a mad rush when they are on the site, it is very easy to miss that there is a scroll bar on the right. I know I did at first. Those scroll bars look quite a bit different depending on the users browser, and may not stand out equally well. I haven't tried the site on my hand held device but the microboxes on a tiny screen have to add an extra layer of complication.

    I guess what i am saying for item #4, is that if it were my site, I'd take them off.
     
  20. tomibraiste

    tomibraiste New Member

    Messages:
    7
    :)) you can better than that try to change it
     

Share This Page