Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site Review - You can be mean!

    Just don't make me cry.

    Just kidding...

    http://www.prowebsitedesigns.net

    Please review it - what do you like/dislike.

    There is quite a bit undone - some of it is still in re-design mode.

    The main page and about us are working...

    Thanks,
    Rich


    I forgot to mention - it hasn't made the tables to CSS change yet. I have the beta on my test box and it isn't complete. So - I KNOW that I'm using tables - won't be for very long.
    Last edited by rswyatt; 10-20-2004 at 08:03 PM.
    Rich S. Wyatt
    D3 Web Creations

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image slicing

    Visually, it's pretty nice, but using ImageReady to slice-n-dice a comp and then scattering it into either a table or a bunch of absolutely positioned divs is not a very professional technique.
    This way of laying out a page is extremely inflexible; you're bound to run into troubles once the texts in the various boxes grows in size, or is scaled to a bigger size, which probably is why you used a pixel format to prevent visitors with less then 20/20 vision from braking your page - and reading it, for that matter.
    I feel the top logo and nav bar could be integrated more into the rest; some rollover effects would be nice. And legibility, too; those links are rather hard to read, especially since they're "fuzzied" by the neon effect.

    Oh, wait:
    We specialize in Christian and medical sites
    Riiiight... so that's what the dark, grungy, techie/hardcore style is for! I'd reconcider either your target audience, or the look-n-feel of this site.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That said, Firefox (and likely the other Gecko browsers) chew it up and spit it out.

    You ought to consider flexible table cells, or take the whole design in the Flash direction (as bad as that is, it's not really suicide for a design site)

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So - once I get it positioned using CSS - Firefox and others should view it fine, right?
    Rich S. Wyatt
    D3 Web Creations

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text sizing

    Just to do me a favour, set the text sizes in em, % or a combination thereof, so I can resize it in IE; I'd like to see what happens.

    There are a number of techniques to apply background images to elements in such a way that visual design elements like your metallic panels can be made to stretch to accommodate the content; keep a close look at A List Apart and by all means browse through a bunch of recent articles on design and CSS. Also, check out the "HTML & CSS Documentation" sticky in the HTML & CSS forum.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ronald - thanks for the help..

    Now - I haven't updated prowebsitedesigns.net but I am started on a hosting site http://hosting.prowebsitedesigns.net/test.html ...

    Check out the CSS and the html - is this more like what is accepted?

    I put the font size at 80% and then used em for fonts.

    I tested it in Firefox, Opera and IE6. They all look good so far.

    Sorry for the questions... My designer quit and I'm more of a backend coder - but I'm being forced to get into the design work.

    I still don't think that I'm doing it right. After all - the images make up the site and if I have "too much" text - it just goes on past - does not stretch the image.

    I've read some tutorials - maybe I'm slow - any changes or suggestions to the code/layout would be excellent.
    Rich S. Wyatt
    D3 Web Creations

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Commenting on http://www.prowebsitedesigns.net/

    It does have a nice look. The flash animation is nice, the sound effect not so nice in my opinion. If visitors don't have a way to disable the sound, many are likely to hit their back button and not return.

    The code doesn't validate: http://validator.w3.org/check?verbos...tedesigns.net/, mainly beacuse of the flash, but also because of multiple instances of the same id on different elements.

    A DOCTYPE would be a great place to start. Also, with images disabled the white text disappears since there is no background color set.

    Visually the look and feel has some impact. But the download time for a 56K modem is close to two minutes... mainly due to the flash and images, which in the end don't add to the information.
    Last edited by mcdougals4all; 10-22-2004 at 03:47 PM. Reason: Clarification
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Commenting on http://hosting.prowebsitedesigns.net/test.html

    The visual interface is good and the flash is very smooth.

    However, beyond the visual, without images there is no button to submit the login form, and without javascript the button will not do anything.

    Tying up relevant text in flash and images makes it invisible to search engines and much less accessible overall. It benefits users and search engines to use text as much as possible.

    The flash makes a nice center piece. But a good trade-off might be to keep the central image/movie but make your navaigation text based as well.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.. I will remove text from images and make them part of the content.

    So - to make it accessible for all - I need to have a div beneath all of the images that just has text for logging in and so on and so forth.

    The bottom piece of the site is missing as of now, haven't got that far.

    As far as layout - is the css I'm using a valid way to do it?

    Quote Originally Posted by mcdougals4all
    Commenting on http://hosting.prowebsitedesigns.net/test.html

    The visual interface is good and the flash is very smooth.

    However, beyond the visual, without images there is no button to submit the login form, and without javascript the button will not do anything.

    Tying up relevant text in flash and images makes it invisible to search engines and much less accessible overall. It benefits users and search engines to use text as much as possible.

    The flash makes a nice center piece. But a good trade-off might be to keep the central image/movie but make your navaigation text based as well.
    Rich S. Wyatt
    D3 Web Creations

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A great resource for accessiblity is http://www.diveintoaccessibility.org/. Don't let the title fool you, it's not a 30 day read and the information is invaluable.

    It sounds like you already have Firefox, but if you don't have the developer's extension it's a great tool for testing your pages and editing your CSS on the fly.

    As for the login form specifically, here is a quick edit that makes things more user friendly regardless of javascript, images, or css support. The main difference is labels on the inputs and a regular submit button with some styling applied. The font size is set in px's to replicate the look of your image, but as you know, to be resizable in IE px won't work. Also changed the input name's to id's for the labels to work correctly.

    Code:
    <style type="text/css">
    
    p { margin:0; padding:0; }
    .button { background:#ccc; border:solid 1px #666; border-right:solid 1px #000; border-bottom:solid 1px #000; font-size:9px; color:#666; cursor:pointer; font-family:arial; padding:2px; margin-top:20px; }
    
    </style>
    
    ................
    
    <form name="login" method="post" action="functions/login.php">
      <p>
        <input type="text" id="username" size="20"> 
        <label for="username">Username</label>
      </p>
      <p>
        <input type="password" id="password" size="20">
        <label for="password">Password</label> 
      </p>
      <p>
        <input type="submit" value="PROCEED" class="button">
      </p>
    </form>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #11
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So - images for submit buttons are out? Or is there a way I can combine both?

    Am I looking at having to do a CSS for text only browsers and one for text-enabled?

    If so - I suppose I'm going to be using JavaScript to get the browser and then insert the correct CSS... ?
    Rich S. Wyatt
    D3 Web Creations

  • #12
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe there are generally accepted techniques that can make buttons as images accessible. Though I've never used them the html/css forum should turn up something.

    Am I looking at having to do a CSS for text only browsers and one for text-enabled?
    I'm not sure exactly what you're asking. It's possible to create a single layout that has all the bells and whistles (flash, scripting, and complex CSS) for those who can view/access them -- but also retains its basic structure and content for users who may not have/want the latest browsers and plugins.

    The approach is to create a basic html page with no colors, pictures, etc., just the actual content. Then from there add in styles, positioning, and everything else. There are lots of threads about semantics and related ideas in the html/css forum that may help.

    Regarding different styles with javascript, writing to current standards and using the appropriate DOCTYPE go a long way toward ironing out browser differences and can make this unnecessary.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •