Signature-Block.com

[Brian W]

Hi, need some critique on form and function of my site Signature-Block.com.

An example of it's functionality can be seen in my signature here on PHP Freaks. User only functionality is incomplete, I will go to the beta testing board for that.

Question for you:

*Does it look 2.0 and/or look good?

*Do you see any bugs?

*Did the step 1-2-3 thing work well for you? Do you think an idiot could figure it out too?

*and of course how could I improve.

*Also open to suggestions of further expansion of features.

 

Thanks guys

[Yesideez]

Nice and clear, nothing in your face or garist.

 

My only niggle was the color selector - Must have 3 digits? I'm sure that can be changed!

 

Nice to see someone sensibly using HTML 4 and not XHTML for a change.

[Yesideez]

Forgot to mention - the code to generate the images.

 

How about adding support for a dummy filename on the end? I wrote a similar thing for personal use (my own styled Chuck Norris quote type thing replacing my name but some forums/sites didn't like the URL as they couldn't see a picture being accessed when it came to the BBCode.

 

Javascript color picker - that's what you need!

[Brian W]

Could be changed, that was a working concept for color... I have to have the string a consistent length so I can parse it from "RGB" to "R G B" (broken into chunks of 3 digits) so that I can handle it for GD.

 

.png is supported, mod rewrite rules allowed for it.

 

Have a recommended Javascript color picker in mind?

 

Thanks for your time Yesideez

[Axeia]

Font on the image is REALLY small, feels like taking an eyetest. Think a lot of people over the of 50-60 would have problems reading that.. then again they're probably not your target audience.

 

Site looks..  empty.

There's a sea of space and everything is white. At 1024*768 it isn't too bad, but at 1920*1200 there really is a noticable lack of content.. perhaps display 5 random examples on the right or something.

At the very same 1920*1200 resolution the username/password fields start drifting apart quite a bit as well.

The elements used are mostly good, I see you use a sensible <h1> and it's at least partially div based.. see some tables being used for design purposes still though, do go the extra mile and get rid of the hybrid bit.

Your quoteblocks also lack alt tags, although impossible for bb code it would be a nice touch to use it for the HTML link, as per default anyone pasting that code on his page now has an invalid page. (due to it's randomness and being called remotely I know you can't put anything useful in it.. but ending it with /> instead of > and adding alt="" would be good.

 

On http://signature-block.com/QueryQuotes.php you oughta use labels for the form instead of or in combination with <strong>.

Layout of that page is a bit strange, wouldn't it be easier to use a single table for the tabular data? There's like 5 million of them now.

[Brian W]

If I raise the font size, wouldn't you agree the image would likely need to have a larger width to compensate? What do you think the max width should be to be comfortable on most forum signatures?

 

On a previous version I had some examples, there was an overwhelming response that it was not web 2.0, too cluttered. I do agree, when I have it pulled up on my coding system at home (about 29 inch LCD monitor), things get a little spread out...

 

Why not hybrid? Sorry, I'm not really on top of current industry standard per se.

 

Added label tag, not sure what they do besides allow for users to select fields by clicking on the adjacent text.

 

wouldn't it be easier to use a single table for the tabular data?

Are you talking about the results from the query?

[Axeia]

I'd say the image could be about 175px wider. (Based on the Firefox MeasureIt plugin and resizing the window to 800x600).

I'd leave the quote number out as well, if you don't want to do that then consider adding a total number as. like Quote #: 3864/7000.

But I'd just leave it out to free up space.

 

With hybrid I was refering to your choice to do most of the design in divs/normal tags, but for example for the the menu you used a table. (menu's are normally best placed in an <ul></ul>).

 

Labels give whatever the visitor is using to load your page a chance to associate the text with the input field belonging to it. Important for screen readers and such, though I doubt users of those would be using your service, google however no knows it's part of a form as well and has a better idea of what you site is about.

And as you mentioned some browsers do some extra like making a click on the label give focus to the input field, big clickable area's are always good.

 

As for http://signature-block.com/QueryQuotes.php

I was thinking something along the lines of the testcase below (just copy/paste save as html and you'll have an example)

<html>
  <head>
    <title></title>
    <meta content="">
    <style>
      .odd { background-color: orange; }
      .even { background-color: yellow; }
      .odd, .even { text-align: right; }
      .seperatorLine td, .seperatorLine th { border-top: 6px solid white; }
    </style>
  </head>
  <body>
  
  <table cellspacing='0' cellpadding='0'>
    <tr class='even seperatorLine'>
      <td rowspan="2"><img src='' alt='' width='300' height='50' /></td>
      <th>HTML Code: </th>
      <td><input type='text' value='HTML link' /></td>
    </tr>
    <tr class='even'>
      <th>BB Code:</th>
      <td><input value='BB code link' /></td>
    </tr>

    <tr class='odd seperatorLine'>
      <td rowspan="2"><img src='' alt='' width='300' height='50' /></td>
      <th>HTML Code: </th>
      <td><input type='text' value='HTML link' /></td>
    </tr>
    <tr class='odd'>
      <th>BB Code:</th>
      <td><input value='BB code link' /></td>
    </tr>
  </table>

  </body>
</html>

If you're after this 'mystical' web 2.0 look, use gradients and reflections.