Critique and suggestions please

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!

firsttube76 (AT) gmail (DOT) com 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

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

firsttube76 (AT) gmail (DOT) com 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)

firsttube76 (AT) gmail (DOT) com 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.html.critique/browse_thread/thread/b9b4da4d5ed937d/b1bb8af437d99319?lnk=st&q=shepherdboats&rnum=1#b1b b8af437d99319>
<http://groups.google.com/groups/search?q=shepherdboats&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

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
&nbsp; 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/@/

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

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

firsttube76 (AT) gmail (DOT) com 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

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!