New Website

[paulr]

I've been complaining and bugging everyone with questions for long enough. It's finally up, my first redesign since 1996:

http://www.paulraphaelson.com/

If anyone cares to give me feedback on problems (especially if you're using windows, linux, or some interesting browser) I'd be grateful.

Thanks!

[darr]

Paul,

Your link images are not showing up on IE.
For example: http://www.paulraphaelson.com/image/paul_raphaelson_logo54.gif

[cyrus]

If anyone cares to give me feedback on problems (especially if you're using windows, linux, or some interesting browser) I'd be grateful.

Thanks!

Hey Paul here's some constructive criticism I hope


First item:
If the browser window is resized (squeezed smaller) I can see portions of the words "chicago, providence, wilderness " etc under your top logo. I thought this was a trick way to raise your Google index rank but on closer inspections it appears that your meta tags are showing because you are missing a "<"

in this line:

META NAME="Keywords"...>


SECOND:
I would change the tool tips (the little boxes that pop up when you place a cursor over an image on your site, using IE) Tooltips are meant to help users know what they're clicking on when they turn off images but they can be used to help users navigate sites (and help improve your search engine rankings). Web designers often use the alt attribute in the img tag to define them (but there are cross-browser compatibility issues).

For example if you place the cursor over "Portfolios" on the left margin, the tool tip pops up and reads "portfolio_gray.gif" - that's the name of the image file, but that really should not be the text for the tooltip since "Portfolio_gray.gif" doesn't mean anything to your website visitors. Instead it should be something useful like "See my portfolio". You can fix this by altering the ALT= attribute

THIRD
On my browser settings, there is a horizontal scrollbar on the bottom - this shouldn't be. Your site's width should be set to automatically match the size of the browser, and the user should not have to scroll horizontally.

FOURTH
You have a website that has a lot more images than text, which is normal for a photography site. Problem is that search engines don't "see" images - they rank sites based on the text. So, it would make sense to maximize the amount of text on your site (and don't bother with keyword meta tags). But instead, you've taken some important text items and have turned them into images! For example, why have your name "Paul Rafaelson" presented as an image called paul_raphaelson_logo.gif? Google isn't able to read that image and pick out your name. This would make some sense if you want to use some really exotic font to show your logo/name -- a font that isn't supported by browsers -- but you've chosen what looks like just plain white Arial font to display your name as an image, when any browser can present that image as plain text anyway.

As a general matter if a logo or links etc. can be presented as text rather than image forms then they should all be presented in text form rather than images. This will not only improve your site rankings, but in some cases it will cut down on your bandwidth usage a bit and speed up the site loading times.

[paulr]

hmmm. i wonder why those images wouldn't show up. they show up on tho old IE for mac (maybe the worst browser ever), safari, and firefox.

the linked image you posted has 27 characters in the file name. could that be a problem?

other links also don't load?

[paulr]

Hey Paul

Your meta tags are showing!


You need a "<"

in this line:

META NAME="Keywords"...>

good grief! none of this is showing up on my system. where does the '<' go?

[Frank Petronio]

http://validator.w3.org/check?uri=http%3A//www.paulraphaelson.com/

helps to locate coding errors

i like the look of it tho

[paulr]

http://validator.w3.org/check?uri=http%3A//www.paulraphaelson.com/

helps to locate coding errors

i like the look of it tho


Thanks, Frank.

do you find the suggested fixes from that site to be reliable? i don't understand the results, so i'd be following them blindly.

did you have trouble with art not loading? that's the issue i'm most worried about.

[Walter Calahan]

Works on Safari.

Cheers

[cyrus]

where does the '<' go?

It should be <meta name= etc etc.....>

But as a general matter, meta-tags have become irrelevant. They used to be important for search engines, not anywmore. Normally you could delete that whole line - but in your case you have so little text on your site that I guess it won't hurt to keep it - as long as you have an opening "<" to go with a closing ">"

[Ron Marshall]

None of the tags on the left border or along the top are visible.

[Keith Laban]

None of the tags on the left border or along the top are visible.

Same for me using XP and IE6.

[paulr]

Ok, i got on my neighbor's windows machine. everything looks fine in firefox, but as everyone's saying, in explorer the gif images don't show up.

does explorer have some kind of weird requirement for gif format or naming?

i wouldn't have expected this problem, since all the art was created using photoshop's 'save for web' feature.

EDIT:
ok, i just opened one of the gif files. it's in 8-bit rgb. i thought gifs were always saved as indexed color. could this be the issue?

[Marko]

Paul,

First off, I like the general looks and the concept. I especially like your Chicago series. :)

Now, on to the technical issues. What Cyrus and Frank said, plus my $0.02:

--IMAGES:

You seem to be using an older version of Dreamweaver with default settings. This may be causing some of your problems. Specifically, the images may not be showing becasue of the JavaScript issue. They are showing fine in Safari and Firefox.

Internet Explorer does tend to be finicky and usually require additional cajoling to display things the way it should. I could go on about this, but there's no sense in beating a dead horse, it's just Microsoft and it wouldn't help you much in this situation.

For this very reason, I prefer to NOT rely on client-side scripting for functionality and use it only for effects. That way, my pages remain functional even in non-complying browsers and all that suffers is just eye candy.

-- CODING

I also notice that you have your stylesheet embedded into every page and that you attach styles through span tags. While there is nothing wrong with this per se, it would be far more effcient if you

a) assigned a class to, say, links instead of wrapping the content of links into span tags with the same class assigned

b) pulled your stylesheet into a single external .css file and linked to it from every page in the head section

-- STYLE

The background gray is not dark enough and there is certain lack of contrast needed for comfortable reading, especially for users with less than perfect vision.

Same with the choice of font - you seem to be using Arial, which tends to come accross a little squished, so to speak. I would suggest Verdana, which was made with the web in mind. I know this is all a matter of taste, but the usability of your site would IMHO be greatly improved with these two simple changes.

Finally, your portfolio pages look very different than the rest because of the white background. Since those are made in frames anyway, I would suggest adding a third frame on top, as a quick fix, which should contain the same header as the rest of the site and possibly changing the background to gray as well.

[Darin Boville]

Hi Paul,

Nice site--much easier to view than the pdfs.

I'm on a Mac so I'm seeing what you are seeing. Here are a few details:

The page is coming up several inches too wide--a scroll bar at the bottom and lots of empty space to the right when I scroll to have a look.

The new windows in which portfolios are viewed in have bright white backgrounds--is that really waht you want? To my eyes it makes the photos look washed out a bit...maybe match the grey background of your main page instead?

Clicking on "Paul Raphaelson" at the top left does nothing--normally you'd expect a click there to take you to the home view.

Clicking on the other word in the banner (which changes depending on where you are) always leads to the "Lost Spaces" portfolio.

You've got two images on the main page linked to porfolios and then four linked images in the portfolios section (two of which are the same portfolios as the first two, just with different images). I find that confusing. Why not pick a "signature" image for each portfolio and use it for all linked images? Why not pick a signature (or random?) image from all of your work and use that as a linked image to your portfolio page--or put links to all four portfolios on the main page?

Finally, the pdf linked image made me thibk it was a fifth portfolio and I was momentarily confused when it started loading a pdf. maybe make its nature clearer in some way?

All of which are minor details--nice redesign.

I'll stop back again later to look at the images more carefully (rather than racing around clicking on everything...)

--Darin

[Marko]

http://validator.w3.org/check?uri=http%3A//www.paulraphaelson.com/

helps to locate coding errors

I like the look of it tho

Frank, I love the validator, but I'm afraid all it does for non-tehcnical people is confuse them further. Also, if Paul is using a WYSYWIG package, an older version of Dreamweaver it seems, the validator will help him even less, because some of the problems may just be part of the generated code which could be hard to change.

It's like giving a spotmeter to someone with a happy-snappy for correcting exposures. Web design in general is a lot like photography - everybody can use a happy-snappy to produce a recognizable picture, but only professionals can produce high quality images.

No offense meant to either amateur photographers or amateur web designers :)

[paulr]

It's like giving a spotmeter to someone with a happy-snappy for correcting exposures ...

or in this case like giving a spot meter to someone with a seeing eye dog :)

So no ideas on why the GIFs aren't displaying on windows IE?

It can't just be a rollover image issue, because the gifs at the top don't have any attached behaviors.

Do the gifs need to be in indexed color? I just noticed mine were RGB.

[robc]

the most used screen res on the web is 1024x768. Yes thats a PC resolution but since 80 to 90% of web users are PC users and approx 40% of those are using 1024x768, then its not to be sniffed at. Your design is a little too wide for that screen resolution and should be narrowed by approx 20 or 30 pixels to fit without side ways scrolling.

The design/layout is fine except I don't like the fact that galleries open in new window which shouldn't be necessary.

You have problems with styles causing sideways scroll bars for no reason on screen res higher than 1024x768. I'm on a W2K with IE6 and everything seems to work(18:00GMT). i.e. no missing tags or links not displaying.

Your menu links realy don't need to be images. A font such as Verdana set in bold and a suitable point size would work better and be clearer.

[Frank Petronio]

You know, it would be a nice print design. But there are a lot of issues with the whole thing and you might want to back up and rethink it rather than patching it and having a site that will really suck down the road, as well as being a bitch to update.

Tough love, sorry.

You've got the hard part down - the content creation - writing and photos are great. But do yourself and favor and trade with some decent coder to do things right.

http://programmermeetdesigner.com/ is a new site created by a 13 year old (!) that might hook you up with a good geek.

Said geek can also input good advice as to the architecture, blogging, etc.

Remember the keywords - accessibility, clean, simple, standards-compliant, hand code, no frickin Dreamweaver BS ;-) don't let them do some hacky Javascript Flash monster.

[Marko]

OK, having had a second look, this time in IE6 sp2 (XP):

1. Since you are already using tables, why not use tables for everything instead of a bunch of absolutely positioned boxes?

IE/PC is known to have an issue with rendering absolutely positioned blocks and their backgrounds, as well as having problems with the stacking order.

Those images that do not show up in IE/PC are all in absolutely positioned boxes. I still don't have an explanation for the images not loading at all, though. I'd need far more time to figure that out than what I have spent so far.

2. Horizontal scroll bar - again, looks like positioning/sizing issue connected with the box model.

3. Images vs. text for menus - Again, it'd be much easier if you used styled text links instead of images for your menu. More efficient and more accessible too.

4. GIF images ARE indexed by default. Indexing colors is the nature of the format.

5. Resolution is not a problem. Good desing should accomodate it automatically. Your design seems to have a sizing issue somewhere, either a single width or a cumulative one, that is too wide even for 1280 x 1024. 1680 x 1050 was finally enough, but not everybody has a wide aspect screen.

[paulr]

But do yourself and favor and trade with some decent coder to do things right.

that's actually been my plan for a long time. i have a friend who codes for google who got started on the project a year ago, but he's in no hurry (he's working for prints, and can't pay the rent with those). so i had to get something done in the mean time.

i really think if i can solve the problem of the gifs not loading, the other stuff will be mostly academic. getting rid of the scroll bar a the bottom would be nice, but it's not urgent. i do need the art to show up. and i don't want to use text for buttons ... i'm pretty picky about typography and don't want to introduce myself to the world with display type set in arial or verdana!

[paulr]

4. GIF images ARE indexed by default. Indexing colors is the nature of the format.

that's what i assumed too, so i didn't think about it when i made them. but when i open these in photoshop it tells me they're rgb.

i wonder if that's the trouble.

[Marko]

i really think if i can solve the problem of the gifs not loading, the other stuff will be mostly academic. getting rid of the scroll bar a the bottom would be nice, but it's not urgent. i do need the art to show up. and i don't want to use text for buttons ... i'm pretty picky about typography and don't want to introduce myself to the world with display type set in arial or verdana!

It's the web we're talking about here, not print. Those are different media with different rules and possibilities. Most print designers I know keep insisting on typography control, but you simply can't have it on the web and still keep the site both searchable AND efficient AND low budget.

Besides, nothing wrong with verdana! :) I guarantee you that the world, at least the part of it that looks things up on the web, will not even notice your font. Chances are that those who do will also be aware of why are you using it and wont' mind.

As long as the text shows up, that is... :)

[Marko]

that's what i assumed too, so i didn't think about it when i made them. but when i open these in photoshop it tells me they're rgb.

i wonder if that's the trouble.

Well, that's funny - I just tried with your logo and it does show up as RGB!

How did you save them in the first place?

[Doug Dolde]

Don't see your mug shot anywhere on it. This is important for sales.

[paulr]

Well, that's funny - I just tried with your logo and it does show up as RGB!

How did you save them in the first place?

using photoshop's 'save for web'!

i thought that might take care of the details for me.

[Marko]

using photoshop's 'save for web'!

i thought that might take care of the details for me.


OK, now, we're getting somewhere :)

When you go to Save for Web, you are supposed to pick a file format and parameters, then save your file (and name it along the way).

It sounds, and this is just an assumption based on what I see, as if you picked one of the jpg presets and then named the file xxx.gif. That would still make it a jpg, but with the .gif extension.

Easy to find out - open the original photoshop file again (you have the original, right?) and go to Save for Web.

Be careful to pick GIF 32 No Dither as a preset option, then go to Save.

In the dialog that comes up, name the file, but do not touch the extension.

Once done, open the new file in Photoshop and look again.

[Frank Petronio]

That is really strange to have a .gif as an RGB. Maybe it is a transgender website?

[cyrus]

that's actually been my plan for a long time. i have a friend who codes for google who got started on the project a year ago, ... i'm pretty picky about typography and don't want to introduce myself to the world with display type set in arial or verdana!

But isn't it already using arial or some very similar font?

Anyway your site layout isn't terribly complicated. Its a pretty standard header/left margin menu layout (which is perfectly fine & good) I'm sure if you wanted to, you could redo it yourself properly without much difficulty.

I'm not a champion coder myself but I learned everything I know from a "teach yourself html in 24 hours" book a while ago (took me a week). I tried Dreamweaver but it seemed to get in the way so I prefer hand-coding with plain old notepad. Seems to me that 90% of the "fancy" stuff like javascript etc. are not only useless, they're downright BAD for a site. Who remembers the old Flash intro pages? animated gifs? These are fads that come and go. I'm not even the sort who insists on using only CSS layout - one large table can be great for a general layout scheme, and use CSS for tweaking the details.

[paulr]

But isn't it already using arial or some very similar font?

no, it's myriad, which has nothing in common with the arial/helvetica/akzidenz grotesk lineage besides lack of serifs.


Anyway your site layout isn't terribly complicated. Its a pretty standard header/left margin menu layout (which is perfectly fine & good) I'm sure if you wanted to, you could redo it yourself properly without much difficulty.

i'm sure you're right. i just don't want to invest any more time into learning this stuff. i have to draw the line somewhere. almost everyone i know with a beautiful site had some division of labor between designing and coding. i don't want to try to wear too many hats and wear them all well ... my official job is supposed to be 'the guy who took the pictures!"

so i'll be content to patch up this version for now, and then wait for my friend make it slick on the inside.

for what it's worth, i converted those rgb gifs to indexed color. i'm curious to see if that fixed the problem.

a few people with IE6 had no trouble to begin with ... is that the current version?

[Frank Petronio]

http://www.browsercam.com/

Allows you to get screenshots from different OSs and browser combinations. They have a free trial you can use.

Easier than keeping all those nasty browsers on your boxes...

Lucidia Grande is a very popular online font. What you need is something widely used on both Macs and PCs of course.

You can't kern html text but you can use proper punctuation marks, smart quotes, fractions, and symbols. This is the correct way to do it (not the way GoLive/Dreamweaver does it):

http://mkaz.com/ref/htmlchars.html

[robc]

I took the liberty of recoding your index page (I was bored). You can find it at

http://www.visualperception.net/pr/

it won't be there for long so if you want the files just open the page and save them.
You need to make sure you get the javascript file and the css file as well as the html.

you will note that it should be cross browser compatible and that it doesn't use images for your logo or menu items and surprise surprise the menu item text has better clarity.
It also works down to and including 800x600 res screen without horizontal scroll bars and for the anally retentive it is valid XHTML STRICT!.

you should easily be able to copy it to put your other pages into the frame work I have given you. Just take care with the portfolio page to be sure you use the same div classes as on the index page. That way for smaller screen res users, everything will neatly flow down the page.

Oh, and its partially "Accesibility" enabled. i.e. you can paly with browser font size to make it more easily readable.

It'll be gone tomorrow or sooner if you want me to remove it now.

[robc]

one other thing. At 1024x768 the image sizes on the page are such that two won't fit across the page. However, because they will auto flow down the page this is not a major problem, especially if your target audience are people with bigger screens such as picture editors etc.

If you want two across the page, then either make the images a bit smaller or make the menu column narrower. But doing that would mean making your logo smaller as well.

[Brian Ellis]

Not understanding hardly anything anyone is talking about (I paid someone $200 to save me the grief of what you're going through) I had to take a look. Everything seemed to work fine to me using IE with Windows XP except that when I opened a portfolio and looked at the images (which, btw, are excellent and very interesting images) the home page remained in the background and portions of it could be seen behind the portfolio images. The horizontal scroll bar wasn't a problem with the portfolio images since the window in which they're displayed is so much smaller than my screen but it was a very minor problem on the home page, there I lost about 1/8 of the right hand side of the image unless I used the scroll bar. Maybe these are the same points Cyrus, robc, and others who seem to really know what they're talking about are making in more technical terms so if this is repetitive my apologies.

[cyrus]

My last suggestion: you can really improve your site's search engine rankings by adding a bit more text - and outbound links can help. Encourage quality in-bound links too. Add a list of your favorite photography-related sites, and describe them. Or something like that. Doesn't have to be obtrusive as long as the search engine indexing spiders can find it.

[Rory_5244]

Well, gee, the site looks fine on Safari! BTW, I love the cloud-enshrouded WTC towers (viewed from under the bridge) in your "Wilderness" portfolio. As an aside, a lot of us down here in Trinidad were hoping that the WTC towers would have been rebuilt exactly as before. Such a shame.

[paulr]

My last suggestion: you can really improve your site's search engine rankings by adding a bit more text - and outbound links can help.

do you mean on the home page? because there are many pages of text ... cv, statements, reviews, print information, and links. i assumed this would help with the rankings, but perhaps not.

the brief text blurbs on the home page (listings of the projects, news items) are there mostly for search engine purposes. that's about as much as i'm willing to put there.

anyway, thanks for all the feedback everyone. it's been extremely helpful. i think i have the worst of the problems taken care of; the others can wait til i learn what to do about them.

eventually i'll have it rebuilt and tweaked and lean and sleak ... til then i'll just keep plenty of duct tape and bailing wire handy.