Site Ratings & Reviews - Critique and suggestions please

Author

Critique and suggestions please

firsttube76@gmail.com

2006-03-23, 6:17 pm

Hi everyone!

I'm starting up my web design and consulting business, and I would like
some suggestions on the web site I designed for my company.

http://www.penguindesigns.ca/

Thanks

ft
p.s. please be nice!

Beauregard T. Shagnasty

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:

> I'm starting up my web design and consulting business, and I would
> like some suggestions on the web site I designed for my company.
>
> http://www.penguindesigns.ca/

1. New documents should be Strict instead of Transitional.
2. Your font sizes (8pt, 7pt) are half of my default size. Use 100%
instead of points (which are for print media) or pixels, which IE can't
resize, to the dismay of those users.
2a. When I *do* resize your text, in Firefox, all of your content falls
out of your crafty fixed-sizes boxes. Press Control-Plus a couple of
times to see this.
2b. If you prefer small text, adjust your own browser settings, but
leave mine alone.
3. Dim grey text on a white background (or any background) is extremely
difficult to read, no matter what size it is.
4. You haven't assigned any fallback generic font families.
5. You have a lot of unnecessary fixed positioning. The WWW is a fluid
environment. http://allmyfaqs.net/faq.pl?AnySizeDesign
6. The top logo is way too tall, taking up half of the "above the fold"
area.
7. You've removed underlining of links, and underline is what visitors
look for.
8. The link to shepherdboats opens a new window, without warning.
9. Didn't we go over these same problems when you posted the
shepherdboats site for comment recently?

--
-bts
-Warning: I brake for lawn deer

firsttube76@gmail.com

2006-03-23, 6:17 pm

Thanks for your suggestions. I did not post anything for the
Shepherdboats site so I'm not sure what you're talking about.

How can I fix the problem of resizing text in FireFox? I would like to
keep the text at a fixed size. If there is no way to do this, how can
I make the boxes expand with larger text? Maybe not define a height?

thanks
ft

Jim Moe

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:
>
> How can I fix the problem of resizing text in FireFox? I would like to
> keep the text at a fixed size. If there is no way to do this, how can
> I make the boxes expand with larger text? Maybe not define a height?
>
You do not control text size. Period. You can only suggest it.
Define the height in ems.
Stop thinking in fixed size units. Almost all text sizing, padding,
margins and other spacing can be specified either in % or em, depending on
the context.

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

Beauregard T. Shagnasty

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:

> Thanks for your suggestions. I did not post anything for the
> Shepherdboats site so I'm not sure what you're talking about.

Are you Dave? This thread from 2002 ... knew I saw that URL and site
before. There are also a number of other posts with shepherdboats in the
messages.
<http://groups.google.com/group/alt....1bb8af437d99319>
<http://groups.google.com/groups/sea...ats&qt_s=Search>

> How can I fix the problem of resizing text in FireFox? I would like
> to keep the text at a fixed size.

You can't keep visitors from resizing your text. Design sites for the
visitors, not for yourself. This problem of micro text sizes is
addressed in these groups nearly every day.

> If there is no way to do this, how can I make the boxes expand with
> larger text? Maybe not define a height?

Use em units instead of pixels to lay out your design.

I've also just looked at the page with JavaScript now on. Seems the
primary content block fades in when the page is loaded. Kind of
annoying.

--
-bts
-Warning: I brake for lawn deer

Ben Measures

2006-03-23, 6:17 pm

On Thu, 23 Mar 2006 08:24:54 -0800, firsttube76 wrote:

> Hi everyone!
>
> I'm starting up my web design and consulting business, and I would like
> some suggestions on the web site I designed for my company.
>
> http://www.penguindesigns.ca/
>
> Thanks
>
> ft
> p.s. please be nice!

I'll try and be pleasantly honest. I may, however, ask direct questions.

Initial impressions are that the site is visually cluttered. There are
too many lines and boxes that don't particularly sit well together.
Further, there is no apparent company logo, just the name in a texture
indistinct from the background.

The next most apparent is the small, low contrast text. Why oh why must
you make it 8pt (sometimes 7pt)? Do you know that it's not the same as in
print design where 8pt is exactly 2.82mm (2 d.p.)? On a computer 8pt is
rarely ever displayed as 8pt - it's sometimes as small as 1.7mm. This is
unacceptably small, especially if it's grey text on an off-white
background such as yours.

Upon increasing the text size in the browser, the site breaks as the
text overflows their boxes. This compounds the previous problem somewhat.

Next, I looked at the source-code. Well done for avoiding table-layout. As
a result, the code is clean and well laid-out. Unfortunately, the doctype
is a transitional doctype and presentational aspects still remain such as
  inline styles and link targets. Further, semantic markup seems to
have been thrown out of the window, with headers marked up as span
elements, paragraphs not marked-up as such and too generous a sprinkling
of br elements.

The most shocking problem (if you can bring yourself to be shocked) is the
abuse of the anchor elements in your navigation menu. Why the gratuitous
use of JavaScript? Why do you unnecessarily make navigation unusable for
those without JavaScript (enabled)?

Continuing onto the CSS it quickly becomes apparent the reason for the
text-overflow problem: you've tried to control too much, turning it rigid
and brittle. Don't try to explicitly position everything - as much as
possible leave it up to the client's browser to decide where to place the
flow of elements. And now I see the excessive font-size definitions
<shudder/>.

--
Ben Measures
$email =~ s/is@silly/@/

firsttube76@gmail.com

2006-03-23, 6:17 pm

I created that site shepherd boats but I did not post anything....must
have been the owner. But looks like I'll have to fix that site too :-)

Ok. I'm going to have to revamp this design so it's more fluid. I'm
glad I checked here.

It seems as though if I don't define a height for the div's then they
seem to change nicely with the text size. I have one question:
if I have three div's, one above the other, and I don't define a
position, how can I make them stay one above the other separated by say
10 pixels all the time, regardless of the text size. On my site there
are three boxes on the right that now expand with the text size, but
they don't move like they should when the text size is too big.

thanks
ft

Jim Moe

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:
>
> I'm starting up my web design and consulting business, and I would like
> some suggestions on the web site I designed for my company.
>
> http://www.penguindesigns.ca/
>
Besides what bts has mentioned...

The graphics design is quite good. The page layout, well...

Your links do not work when Javascript is disabled.
No indication of the character set. Use something like
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
The logo at the top, besides being quite large, also has "penguin
designs" placed where it is hardest to read. Move the text higher where
snow and ice are the background. Much easier to read.
The same applies to the section headings. The light gray text on an
uneven background is hard to read.
You have chosen to use <div>s and <span>s only for layout. What happened
to all the rest of the markup available in HTML? You are unnecessarily
recreating elements like <h1>, <p>, <ul>, <li>.
Lots of inline "style"s. It just replaces tag soup. Although it does
make it easier to move the styles into a stylesheet later.
Use of multiple   for spacing. <sigh>

Why on earth have you fixed the container height to 740px? (!)
And all that absolute positioning is unnecessary.

Shepherdboats.com: why no link here? The image has one but not the link
name?
"[...] The site utilizes Cascading Style Sheets and dynamic HTML to
create a seamless, fluid look." Bzzt! Wrong. No fluidity at all.
Hey! I remember that site. You mostly ignored all the criticism you
requested for that one.
>
> p.s. please be nice!
>
I'm sure you meant polite.

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

firsttube76@gmail.com

2006-03-23, 6:17 pm

I actually didn't request crticism, someone else did (as I explained
above). The original layout was done all with tables, so it's actually
come a long way since then. But, as I am still learning CSS, I
appreciate the helpful comments. After this, I will be looking at the
shepherd site again to fix the same problems you have brought forth.

The javascript turned off would be a problem, since I am using one page
as a form to change the content dynamically. Is this not a good idea?

ft

Beauregard T. Shagnasty

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:

[This page will be of interest:
http://safalra.com/special/googlegroupsreply/
Also consider signing up for your News (Usenet) service, getting a
newsreader, and joining us in the proper manner. This is not a web site.
<g> ]

> I created that site shepherd boats but I did not post anything....must
> have been the owner. But looks like I'll have to fix that site too
> :-)

Ok. Once you get this penguin site worked out and have the methodology
fixed in your mind, the boat site will follow easily. Don't start
working on them both at the same time.

> Ok. I'm going to have to revamp this design so it's more fluid. I'm
> glad I checked here.

The problems with your design are asked and answered daily here.

> It seems as though if I don't define a height for the div's then they
> seem to change nicely with the text size.

Probably so, but you still may run into problems with some browsers.

> I have one question: if I have three div's, one above the other, and I
> don't define a position, how can I make them stay one above the other
> separated by say 10 pixels all the time, regardless of the text size.

Put each of those three divs in a container div set to float: right.

> On my site there are three boxes on the right that now expand with the
> text size, but they don't move like they should when the text size is
> too big.

Once you've shifted to em units, it shouldn't be a problem.

Just found your Contact Us page (couldn't navigate until I enabled
JavaScript) and the fields are rather short/small for entering
meaningful text. I'd make the input fields 50% longer, and the textarea
about twice that size.

--
-bts
-Warning: I brake for lawn deer

saz

2006-03-23, 6:17 pm

In article <1143142716.745608.61940@i40g2000cwc.googlegroups.com>,
firsttube76@XXXXXXXXXX says...
> I actually didn't request crticism, someone else did (as I explained
> above). The original layout was done all with tables, so it's actually
> come a long way since then. But, as I am still learning CSS, I
> appreciate the helpful comments. After this, I will be looking at the
> shepherd site again to fix the same problems you have brought forth.
>
> The javascript turned off would be a problem, since I am using one page
> as a form to change the content dynamically. Is this not a good idea?
>
> ft
>
>
There is nothing on this site that truly requires asp. Why not make it
a static site and help avoid the issues? It may also help search engine
indexing.

firsttube76@gmail.com

2006-03-23, 6:17 pm

That is a good suggestion too. I think I will pull all the asp and
unnessary javascript out of it, including the fading text.

thanks!

firsttube76@gmail.com

2006-03-23, 6:17 pm

unfortunatel, float: right for those three div's did not work. They
all appear on top of eachother.

Beauregard T. Shagnasty

2006-03-23, 6:17 pm

firsttube76@XXXXXXXXXX wrote:

> unfortunatel, float: right for those three div's did not work.

Unless you are working offsite, your three right boxes
<div class="sideBox" style="">
do not have a container <div> as I suggested. It would be with this
containing <div> that you set the float.

BTW, instead of specifically positioning those three
<div class="sideBox" style="">
<div class="sideBox" style="top:422px;">
<div class="sideBox" style="top:584px;">
set a bottom margin of 1 or 2em to class sideBox, and dump the top:NNpx
styles.

> They all appear on top of eachother.

Aren't they supposed to be in a vertical column?

You have way too many <div>'s and not enough other semantic markup. Look
into using a list [ <ul> <li> ] for the menu, as an example.
http://www.alistapart.com/articles/taminglists/

Someone already mentioned the "Welcome to the official web site of
Penguin Designs. ..." which should be:
<h1>Penguin Designs</h1> [ <-- new ]
<h2>Welcome</h2> [ <-- actually, better keywords needed ]
<p>Welcome to the official web site of Penguin Designs. .. </p>

See the menu on this site of mine; it's a styled ul/li list.
http://countryrode.com/

--
-bts
-Warning: I brake for lawn deer

Nije Nego

2006-03-24, 4:02 am

On 23 Mar 2006 08:24:54 -0800, firsttube76@XXXXXXXXXX wrote:

> Hi everyone!
>
> I'm starting up my web design and consulting business, and I would like
> some suggestions on the web site I designed for my company.
>
> http://www.penguindesigns.ca/
>
> Thanks
>
> ft
> p.s. please be nice!

"Innovation.
Functionality.
Design."

For the first two - I found no trace of it whatsoever.

For the third - in general it is near to looking nice, iz seems unpolished,
penguin header is too crowdy.

Look where your page ends.

--
o'tom po'tom

firsttube76@gmail.com

2006-03-24, 4:02 am

Nije Nego: When I asked for critique, I did not mean I wanted to be
insulted. I'm sorry you don't like my words, but why do you need to
insult? Especially because I have stated that I am learning CSS and am
open to any advice and I am very appreciative.

For the rest who have posted, I am very very grateful. I think I have
solved my biggest issue, which was the text size problem in FireFox.
The page now stretches as the text is increased. I am starting to see
the logic everyone was speaking of.

The javascript is still there and it still uses asp, but I am going to
break everything out into separate pages, use includes, and remove the
asp code where possible. I still have the px sizes for text for now,
but will investigate other size units soon. I wanted to get the
"fluidity" a bit better first. I still seem to be using a lot of div's
though.

if you're interested, you can see the changes here:
http://www.penguindesigns.ca/default2.asp

Thank you again to everyone who provided advice....I am really
grateful.

ft

kchayka

2006-03-24, 4:02 am

Jim Moe wrote:
> firsttube76@XXXXXXXXXX wrote:
> Define the height in ems.

Be careful with this. Setting a fixed height, even in ems, can end up
with overflowing content. Depends on things like the actual font used,
and where line wrapping occurs. The larger the quantity of text
involved, the less reliably you can predict the outcome.

With text elements, it's almost always best to let height auto size as
needed. Sometimes you can fix the height in ems and let width auto
adjust, but that usually only works for small bits of text, like a short
heading.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Carolyn Marenger

2006-03-25, 3:56 am

firsttube76@XXXXXXXXXX wrote:

> Hi everyone!
>
> I'm starting up my web design and consulting business, and I would like
> some suggestions on the web site I designed for my company.
>
> http://www.penguindesigns.ca/
>
> Thanks
>
> ft
> p.s. please be nice!

There are a few things I see right off the bat. First of all, The page
heading is very hard to read on the background. Especially with the weird
graphical 'abnormality'.

Secondly, the font is really small, and without enough contrast, I can't
read the content easily. When I enlarge the font, it runs into the borders
of the boxes.

Here is what I see:

http://www.marenger.com/provinggrou...indesigns01.png
http://www.marenger.com/provinggrou...indesigns02.png

Carolyn
--
Carolyn Marenger

firsttube76@gmail.com

2006-03-25, 3:56 am

I'm not sure what you are referring to about the heading "graphical
'abnormality'. ". I've had lots of compliments on this graphic from
lots of other people I've shown it too. Is there something technically
wrong with it?

I am going to increase the padding on those boxes so they don't run
into the text.

thanks fot the suggestions
ft

Carolyn Marenger

2006-03-25, 10:46 pm

firsttube76@XXXXXXXXXX wrote:

> I'm not sure what you are referring to about the heading "graphical
> 'abnormality'. ". I've had lots of compliments on this graphic from
> lots of other people I've shown it too. Is there something technically
> wrong with it?

The graphic abnormality, seems to have been cleared up now. The horizontal
bars below the heading, were all chunked up when I saw them yesterday. I
couldn't see what you were trying to do with them, and they made it hard to
read the heading itself. Now, it is nice and clear. If you didn't change
the graphic, then something must have been garbled in transmission or in
displaying at this end, because it was indistinguishable.

> I am going to increase the padding on those boxes so they don't run
> into the text.

It does look better, than it did. I can handle the manual font size
increase, since the padding helps around the edges.

> thanks fot the suggestions
> ft

Glad I could assist,

Carolyn
--
Carolyn Marenger