Topic: WIP - Artist's Website Pages that link to <a href="https://ozoneasylum.com/backlink?for=10331" title="Pages that link to Topic: WIP - Artist&amp;#039;s Website" rel="nofollow" >Topic: WIP - Artist&#039;s Website\
 
Author Thread
Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

 IP logged posted posted 03-18-2003 22:34 Edit Quote

Hi

I've been working on this site for a friend of a friend (who is a a neo classical artist working in oils) and thought it would be prudent to seek opinions/advice at this early stage, rather than a week from the deadline.

Your critique is, as ever, sought and welcomed.

(p.s. the main graphic is still a little heavy, but I'm working on it)

[EDIT Old link removed due to domain transfer]

[This message has been edited by Dufty (edited 07-28-2003).]
quisja
Paranoid (IV) Inmate

From: everywhere
Insane since: Jun 2002

 IP logged posted posted 03-18-2003 23:37 Edit Quote

I really like that. first impressions were that it just worked. It would be nice to see a page demonstrating scrolling though, I can see it falling apart a little when you start adding longer pages. I'm also not sure if it will work outside of the popup, which is a shame. It should be possible to get it stretching vertically, if not horizontally, in a normal borwser window, which would be preferable, and would make it more user friendly.

As another little suggestion, use a more toned down colour, e.g. the page background colour, for your right hand side title, this should draw more attention to the artists name, which would be good. Also the "navigation menu" text seems unneccessary and out of place. Otherwise, the general concept is good and works. Let's hope the client likes it now...



[This message has been edited by quisja (edited 03-18-2003).]
NoJive
Maniac (V) Inmate

From: The Land of one Headlight on.
Insane since: May 2001

 IP logged posted posted 03-18-2003 23:41 Edit Quote

How about just a hint/teaser of his/her work? I like the basic layout but I do not like the 'exit page' business.
When I hit x out of a site I want out now... don't need a 'thanks for dropping by.' and then have to x out again. Sort of the reverse of a splash page... if you know what I mean? =)

Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

 IP logged posted posted 03-18-2003 23:49 Edit Quote

quisja thanks for the comments.
Horizontal scrolling will be addressed in phase 2. At the moment, I'm playing with a concept.

NoJive heh, I wondered who'd comment on that first.
It's just there for the development phase (for launching predefined window size and features) .
When it's live, there'll be no splash screen.
Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

 IP logged posted posted 07-28-2003 10:47 Edit Quote

***BUMP!***

*Phew* With work comitments and family and stuff, it's taken (seemingly) forever to get to this stage.
I've amalgamated some ideas and I think I'm almost ready to release the site.

I would be most appreciative if you would share your thoughts: rpickett

Thanks again
Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

 IP logged posted posted 07-28-2003 11:41 Edit Quote

On the front page there is a slight hue difference between the 'text area background color' and the indexpic.jpg background color.

All pages except the 'about' page have the same layout, you should change it so they look alike to create a consitant feel to the site. On the 'contact' and the 'out there' pages there is also a little bit more margin between the menu and the top graphics.

You should add a little padding at the bottom of the page, at the moment the copyright text is only a px or so above the bottom of the browser. It would look better if this margin/padding was bigger.

The menu design is ok, but there is a little thing there that I miss. The link leading to the page that your currently on should not be a link (since it won't take the user anywhere). It should also be a little bit different from the other links so that the user easily can see which page he is on.

In the 'gallery' you should add a little notice telling the user that the images will be launched into a pop-up window.

From a more technical aspect, the page lacks both a Doctype and a specified encoding. Both of these are important to ensure that the page is rendered properly by most browsers.

It would also have been better if you had used a table-less layout. Tables should only be used to display tabular data. The other way to do the layou is to use CSS. Among the reasons for choosing CSS over tables is that it would need less code, the code would have been easier to read and changing the layout in the future would also be easier.

Excpt from that I like the page. Nice neutral colors that are easy on the eyes and a simple, yet effective layout

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

[This message has been edited by Veneficuz (edited 07-28-2003).]
Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

 IP logged posted posted 07-28-2003 13:04 Edit Quote

Thanks for being frank Veneficuz

Re. Your comments:

you should add a little notice ... Pop-Up warning added to the gallery page.

the copyright text is only a px or so above the bottom I'm unsure about this point. Yes I can see that raising it would increase the visibility, but I'm not 100% convinced that it needs raising...

On the 'contact' and the 'out there' pages there is also a little bit more margin between the menu and the top graphics. I am so aware of this fact you wouldn't believe, but I can't seem to see why it should be the case. If you can shed any light, I would be most grateful!

Doctype and a specified encoding Working on this...

menu design Again I see your point... having a specific page title graphic kinda covers some of this one, but I'll consider changing the links as you suggested.

Table-less layout Again, I see your point, and I shall take it on board for my next project!

THANK YOU!

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

 IP logged posted posted 07-28-2003 16:55 Edit Quote

I strongly agree with everything Veneficuz said but I do have one major concern...

This was taken from the "about" page and all of this code is just for 1 image!

code:
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#996666">

  <tr bgcolor="#C6C2BC"> 

          <td> <img src="../img/slices/mini/baseSplit_01.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_02.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_03.gif" width=30 height=30 alt=""></td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td> <img src="../img/slices/mini/baseSplit_23.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_24.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_25.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_26.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_27.gif" width=19 height=30 alt=""></td>

        </tr>

        <tr bgcolor="#C6C2BC"> 

          <td> <img src="../img/slices/mini/baseSplit_28.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_29.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_30.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_31.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_32.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_33.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_34.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_35.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_36.gif" width=30 height=30 alt=""></td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td>  </td>

          <td> <img src="../img/slices/mini/baseSplit_44.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_45.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_46.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_47.gif" width=32 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_48.gif" width=30 height=30 alt=""></td>

          <td>  </td>

          <td> <img src="../img/slices/mini/baseSplit_50.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_51.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_52.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_53.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_54.gif" width=19 height=30 alt=""></td>

        </tr>

        <tr bgcolor="#C6C2BC"> 

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_55.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_56.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_57.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_58.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_59.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_60.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_61.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_62.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_63.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_64.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_65.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_66.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_67.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_68.gif" width=29 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_69.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_70.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_71.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_72.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_73.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_74.gif" width=32 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_75.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_76.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_77.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_78.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_79.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_80.gif" width=30 height=30 alt=""></td>

          

    <td height="2"> <img src="../img/slices/mini/baseSplit_81.gif" width=19 height=30 alt=""></td>

        </tr>

        <tr bgcolor="#C6C2BC"> 

          <td> <img src="../img/slices/mini/baseSplit_82.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_83.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_84.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_85.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_86.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_87.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_88.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_89.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_90.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_91.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_92.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_93.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_94.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_95.gif" width=29 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_96.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_97.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_98.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_99.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_100.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_101.gif" width=32 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_102.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_103.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_104.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_105.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_106.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_107.gif" width=30 height=30 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_108.gif" width=19 height=30 alt=""></td>

        </tr>

        <tr bgcolor="#C6C2BC"> 

          <td> <img src="../img/slices/mini/baseSplit_109.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_110.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_111.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_112.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_113.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_114.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_115.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_116.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_117.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_118.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_119.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_120.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_121.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_122.gif" width=29 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_123.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_124.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_125.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_126.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_127.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_128.gif" width=32 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_129.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_130.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_131.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_132.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_133.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_134.gif" width=30 height=25 alt=""></td>

          <td> <img src="../img/slices/mini/baseSplit_135.gif" width=19 height=25 alt=""></td>

        </tr>

      

    

  

</table>




What the?

Or more to the point, why?

This absolutly killed my dialup connetion and caused an image that should have loaded in 3 seconds take a bout a minuite because of all the connection requests for each image slice. This is bad, not to mention the dead bandwidth in the HTML code required to make the tables and the absolutly un-needed strain placed on web browsers to render images like this. Lastly, browsers for handheld devices often resize images that don't fit on screen so I'd lothe to think what this would do to one of those browsers.

[This message has been edited by Dracusis (edited 07-28-2003).]
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 07-28-2003 18:16 Edit Quote



That is extremely bizzarre. Even here at work on a T1, it took significantly longer to load that "image" than it should have.

I can't grasp the reasoning behind it, and even less can I grasp the actual table code used to generate it...

It would work far better to simply have one large image. By breaking it up, and adding the code in between each 'bit' of the image, you actually increase file size and load time (and of course, the time for the browser to render that table.
ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

 IP logged posted posted 07-28-2003 21:43 Edit Quote

Hmm... my point seems to have been addressed. I was wondering about that image too, and why it was sliced into a million tiny pieces
In certain situations, slicing images and compressing them seperately can speed up pages, but only if you know what you're doing. Here it actually slows down the page. Keep them as one big image, I say.

As to why your top row seems to expand on certain pages (pushing the menu down), well, I can't quite figure it out. The code for that part of the page is identical across all pages.

However, if you take out the valign="top" and replace it with valign="middle", it will leave margins to the top and bottom, and this way it doesn't look half bad, actually. I would suggest doing this across all the pages. That is, making the top column maybe 30px or so taller than the image itself, and aligning it in the middle, so that you get a decent amount of whitespace. Right now, without the whitespace, the top area seems a bit cramped.

Other than that, the page looks nice. It's simple, but easy on the eyes. And add a doctype if you can, ok?


Dufty
Paranoid (IV) Inmate

From: Where I'm from isn't where I'm at!
Insane since: Jun 2002

 IP logged posted posted 08-01-2003 22:01 Edit Quote

It' been a frustrating couple of days cuz I haven't been able to see if there were more replies... Jalen discovered that Coffee and Keyboards just don't make for a happening combination and I've only just managed to buy a new one! hey-ho, anyways... on to your comments.

I guess you're all right about the 'About' image... I thought it would be fun, watching the image 'paint' itself, but I guess I'm too used to a fast connection and didn't consider potential narrowband users. it's now changed to a single image.

Almost there...


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu