Critique Welcomed

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Any info on how it displays on mac would be great. I realize that the code
won't completely validate- I'm using Adobe GoLive and WC3 doesn't like the
gridx, gridy. What are your suggestions on this- especially on how important
validation /really/ is.

Thanks much!

~JL

Jess wrote:

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Any info on how it displays on mac would be great. I realize that the code
won't completely validate- I'm using Adobe GoLive and WC3 doesn't like the
gridx, gridy. What are your suggestions on this- especially on how important
validation /really/ is.

Thanks much!

~JL


Jess,

Validation is important because it evaluates your site against a fixed
standard. Unlike print media, where the paper does not alter the
designer's intent, web browsers 'interpret' what you provide. Their
interpretation starts with those same standards, and varies (or should)
only where the standards are ambiguous or have explicitly granted them
freedom. The browser is like a robot; it has been trained to do one
thing, display web pages, and it has been trained to do that reliably
only for web pages that meet the standard. Every time you deviate from
the standard, you risk confusing the robot. Moreover, you will confuse
each robot (browser) in a different way, so your results will be
inconsistent from one browser to another. A valid site increases the
probability that each browser will be working within its scope of
training and will not be forced to improvise. Robots do not improvise well.

The overall appearance of your site (I looked only at the home page) is
excellent. Good use of color, attractive mix of text and images.

BUT...

In addition to the variations that result from the use of different
browsers, the web creates an environment that varies in many other ways.
A user may have a large window or a small one. They may have
instructed their browser to display text larger or smaller than
'normal'. They may have specified colors for links that differ from the
browser defaults. They may have switched off the processing of
JavaScript and other 'enhancement' options. The challenge to the web
site designer is to accommodate all possible permutations of these
variables.

And this is where your site breaks down. That's particularly
distressing because the site advertises technical expertise in design.
True perhaps for the printed page, your present site shouts to the user
with any knowledge of web site design, "We don't know what we're doing
here!"

I'm viewing the page on a CRT monitor set to a display resolution of 600
X 800 pixels. I've used both IE 6, a popular but seriously obsolescent
browser, and Netscape 7.1, derived from the same Gecko rendering engine
as Firefox (though a bit earlier version). IE and Firefox are the two
most popular browsers, though there are several others you need to
consider, including Opera and the MacIntosh Safari browser.

On my system, the first thing I notice is a horizontal scroll bar at the
bottom of the page. That means the page does not 'fit' within my
window, even with the browser window maximized. In this case, you have
a horizontal navigation menu across the top of the page and the last
entry, "Video" is partially out of view.

In general, horizontal scrolling is Bad. One exception is a large
horizontal image. Another is a table with too many columns to fit
within a typical screen width. Neither applies here.

IE displays error messages, one of which is:
Line: 51
Char: 1
Error: Object expected
Code: 0
(my browser in configured to display these; yours, like most, probably
isn't). Annoyingly, two of these message repeat (as popups which I must
respond to) each time I move the mouse over the navigation bar.

Netscape shows (in the JavaScript console, which you have to explicitly
look at) 3 errors, one of which is repeated 4 times.

The DOCTYPE at the top of your page is Transitional, which is intended
for transitioning old web pages from obsolete to more current markup.
Since this is a new page, you should be using Strict, which will get you
more fussy, hence more useful, validation.

You are using tables to lay out the items on the page. This is a direct
mapping of the grid layout technique used in print media and was popular
several years ago. It is now, however, generally frowned upon, in part
because it misleads you into thinking in rigid terms about where things
will appear, rather than in the 'liquid' or 'fluid' terms that are
more suitable for the elastic environment of the web. Lines like <td
width="107" height="1"><spacer type="block" width="107" height="1"></td>
are indicative of the rigid design of days past.

There are some strange things in your HTML. You referred to 'gridx' and
'gridy'. I don't know what these are, but it isn't HTML and browsers
will not understand it. The good news is that browsers are supposed to
ignore things they don't understand.

You have a two-column layout. If I increase the text size, the gutter
between the two columns gets smaller and smaller. Though they never
overlap, the gutter quickly comes close to a word space in width, making
the text difficult to read. In IE, when I change the text size, only
the left column changes.

In both browsers, the navigation text never changes sizes no matter what
I do.

There seems to be a bit of JavaScript, but switching it off has no
effect (except to eliminate the error messages) so I deduce that it
isn't working.

Other tips, of a general nature, can be found at
http://pages.prodigy.net/chris_beall.../How%20to.html

Chris Beall

Validation is important because it evaluates your site against a fixed
standard. Unlike print media, where the paper does not alter the
designer's intent, web browsers 'interpret' what you provide. <...trimmed
for lenght> A valid site increases the probability that each browser will
be working within its scope of training and will not be forced to
improvise. Robots do not improvise well.

Thank you for the explaination. I've been very confused as to what it all
meant. I've been trying to work with some CSS, but so far haven't been able
to create anything very original. (Mostly I'm getting designs that look like
a basic blog page) I'm doing some reading on HTML and CSS to see if I can
recreate the look without the non-complience issue.

The overall appearance of your site (I looked only at the home page) is
excellent. Good use of color, attractive mix of text and images.

Thank you! I'm primarily just a graphics person, not a web developer, but
the main web person is on a tight schedule right now, and so somehow this is
falling into my to-do list.

I'm viewing the page on a CRT monitor set to a display resolution of 600 X
800 pixels. I've used both IE 6, a popular but seriously obsolescent
browser, and Netscape 7.1, derived from the same Gecko rendering engine as
Firefox (though a bit earlier version). IE and Firefox are the two most
popular browsers, though there are several others you need to consider,
including Opera and the MacIntosh Safari browser.

Testing from here showed it to display well in the latest IE and Firefox
regardless of window size. Netscape is showing a few pixel diviations in the
spacing. I don't have access to a Mac.

On my system, the first thing I notice is a horizontal scroll bar at the
bottom of the page. That means the page does not 'fit' within my window,
even with the browser window maximized. In this case, you have a
horizontal navigation menu across the top of the page and the last entry,
"Video" is partially out of view.

Something I will try to address!

IE displays error messages, one of which is:
Line: 51
Char: 1
Error: Object expected
Code: 0

I know the cause of these errors. It's GoLive's built-in Mouse-over script,
which I didn't upload with the layout to the server.

The DOCTYPE at the top of your page is Transitional, which is intended for
transitioning old web pages from obsolete to more current markup. Since
this is a new page, you should be using Strict, which will get you more
fussy, hence more useful, validation.

You are using tables to lay out the items on the page. This is a direct
mapping of the grid layout technique used in print media and was popular
several years ago. It is now, however, generally frowned upon, in part
because it misleads you into thinking in rigid terms about where things
will appear, rather than in the 'liquid' or 'fluid' terms that are more
suitable for the elastic environment of the web. Lines like <td
width="107" height="1"><spacer type="block" width="107" height="1"></td
are indicative of the rigid design of days past.

There are some strange things in your HTML. You referred to 'gridx' and
'gridy'. I don't know what these are, but it isn't HTML and browsers will
not understand it. The good news is that browsers are supposed to ignore
things they don't understand.

I vaguely understand what this means- I'm using GoLive CS which uses "Layout
grids", which create a bunch of table tags in the code. I'm not sure how to
place text over-lapping images without using the layout grids- will be
investigating it to see if I can figure out how to do it. I've read that
GoLive CS2 codes layout grids as CSS rather then tables, which may mean I
have a work around option if I upgrade.

You have a two-column layout. If I increase the text size, the gutter
between the two columns gets smaller and smaller. Though they never
overlap, the gutter quickly comes close to a word space in width, making
the text difficult to read. In IE, when I change the text size, only the
left column changes.

I /think/ I did that. I set div styles for the text and told it to display
12 pt. serif fonts. I did this because in Firefox and Netscape, the text was
showing up as huge (over 100pt)

In both browsers, the navigation text never changes sizes no matter what I
do.

The navigation text is made up of image slices.

Other tips, of a general nature, can be found at
http://pages.prodigy.net/chris_beall.../How%20to.html

Chris Beall

Thank you again for the informative and concise critique- I'll try working
with it some more!

~JL

"Jess" wrote:

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Nice design. The glowing green eye looks a bit spooky to me, but I suppose
Halloween is coming soon... :-)

The green text ("expert answers", etc.) is a little bit too pale to be
easily legible.

The English needs checking. For example, "together" has two "e"s.

Any info on how it displays on mac would be great. I realize that the code
won't completely validate- I'm using Adobe GoLive and WC3 doesn't like the
gridx, gridy. What are your suggestions on this- especially on how important
validation /really/ is.

Bits of your design go missing in Netscape 7 and IE 5 on a Macintosh:
<http://vzone.virgin.net/phil.ronan/junk/sage-ie5-mac.jpg>
<http://vzone.virgin.net/phil.ronan/junk/sage-ns7-mac.jpg>

Getting your HTML to validate would certainly help the situation. Adobe seem
to think that HTML syntax can be invented at will. Microsoft made the same
mistake, and it didn't help them either.

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/

In message <BNh5f.69204$K91.44278 (AT) twister (DOT) nyroc.rr.com>, Jess
<jess (AT) ria (DOT) com> writes

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Any info on how it displays on mac would be great. I realize that the code
won't completely validate- I'm using Adobe GoLive and WC3 doesn't like the
gridx, gridy. What are your suggestions on this- especially on how important
validation /really/ is.

Thanks much!

~JL


(a) When the images are disabled, there's no menu (lack of alternative

text). Also with images disabled, the lack of suitable 'alternative
text' means that some of the text is not seen/heard.

(b) Only the left-hand column of text can be enlarged (IE and Opera).
Firefox enlarges the text OK -- but this soon becomes unreadable as the
two columns effectively 'merge'.

(c) When I'm looking at your site, the tendency is to read the left-hand
column first, but when I listen to your site I hear the right-hand
column first. Which should it be?

If the listener should hear the left-hand column first, then you have a
linearization error.

Anyway, looks nice -- but you need to check your punctuation, spelling,
and capitalization.

E.g.

togather --> together

ala carte --> a la carte (plus accent over the initial 'a')

Wiseman --> wise man (two words or maybe hyphenated)

Regards.

--
Jake (jake (AT) gododdin (DOT) demon.co.uk -- just a 'spam trap' mail address)

Jess wrote:

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Hi there,

Others have covered the majority of problems, I have a few more to add...

Try to optimise images for the web, due to extensive use of image files
your page is about 90KB in size, that is way too large, especially
because there's so little textual content. Filesize can also be reduced
by using standards compliant markup...but others have already addressed
that issue. Try to stick to an absolute maximum of 50KB.

Horizontal scrollbar in 800x600 resolution. There is no way it was
different for you when testing, the main table has a width of 801
pixels. Try reducing that to about 775 pixels or something, to also
take into account the browser chrome. Much better though, read some
tutorials about flexible web page design, it is very easy to achieve for
the layout you have used, and will look just as good.

I thought the company was called "Inspired Design" - the real name "Sage
Media" is very hard to see and is secondary to the "Inspired..." phrase.

Don't justify text on the web, it makes text harder to read. This could
also be my personal experience, others may have a different opinion.


Good luck,

Ed


http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----

Thank you everyone for the advice and crit. I am working on trying to revise
the design. So far, I have changed the width of the overall design, with the
primary content set to a width of 770 px and am adding in the proper alt
tags for images.

I'm not sure how to address the problem with the reader choosing the text on
the right over the text on the left, but I've been doing some reading on
valid HTML and CSS.

~JL

Jess wrote:

Hello everyone- This is my first post here. I'd appreciate any feedback on
http://www.riasthaerte.com/sage.html The design is still a bit of a work in
progress, but any suggestions on the overall look and layout would be great.

Very pleasing color theme.

I am not clear how frogs, lizards and young women with weird contacts
convey wisdom and creativity. Very pretty, though.

The site is completely useless if images are disabled. )Think Lynx
browser, search engines, handheld devices.)
No useful "alt" values for the nav bar images.
The change in appearance for the nav bar mouseover is so subtle it will
be lost on many monitors. And it does not work at all if Javascript is
disabled.
Do not use "justify" for text alignment, especially for narrow columns.
It is done poorly by browsers and looks choppy, uneven except for the edges.
I thought the green text were links. Surprise! If you want to emphasize
some text, use <em>.
The two columns are a different font size, different leading, different
paragraph spacing.
You could use a decent copy editor.

My impression of the site is that you know your graphics business quite
well. You appear to be migrating from a print environment and are applying
the fixed, rigidly controlled layout methods to the WWW. Not a good plan.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

In message <OcD5f.69658$K91.8273 (AT) twister (DOT) nyroc.rr.com>, Jess
<jess (AT) ria (DOT) com> writes
[snip]

I'm not sure how to address the problem with the reader choosing the text on
the right over the text on the left, but I've been doing some reading on
valid HTML and CSS.

~JL

The problem ('linearization' error) occurs because of the way in which
browsers render tables. Fortunately, this is not a common problem with
table-based layouts.

If you want to see the sequence in which browsers render your HTML you
might want to download a (free) copy of the Opera browser. Opera has a
useful facility allowing you to see the page with tables 'disabled'.

As it is, it reads quite well with the right-hand column first -- so you
may not regard this as important ;-)

regards.

--
Jake (jake (AT) gododdin (DOT) demon.co.uk -- just a 'spam trap' mail address)

On Wed, 19 Oct 2005 02:01:05 +0000, Jess wrote:

I'd appreciate any feedback

Other issues were addressed, here are the ones I see:

* background image is 1024x768. IMO, a large, untiled background image
usually does not work wellin a web page -- content which flows beyond the
lower boundaries of the background has no background applied.

A better solution IMO is to use a minimun-height, tiled background image
and then position additional elements (such as the tree on the left) where
you want them.

* No default color for background. Should be set to white (#fff)

See this screenshot of how your page looks in my browser (FF on Linux):
http://newtnotes.com/screenshots/sage-design-ss1.jpg

* I think that having different fonts for the two columns -- sans-serif
on the left and serif on the right -- looks funny. Unless the "What is
Sage" column is separated more, somehow, like maybe put into a separate
box that is outlined and inset into the main flow of text, something lke
that.

later...

--
JDS | jeffrey (AT) example (DOT) invalid

http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/