site design blown up by computers set on large fonts

[bobh1941]

So you finish your masterpiece and then see it in someone's screen your carefully positioned DHTML blown all out of porportion and you have to madly side scroll to find your content because their screen is set to large fonts.Their must be a cure so your size stays true to your design.
Cheers. bobh1941

[Markll]

Design in Flash and publish as a percentage. Your site will look the same in any size browser window or screen resolution.

[wenwilder]

Design in Flash and publish as a percentage. Your site will look the same in any size browser window or screen resolution.

That is a great idea to make sure your site is viewed the way it is meant to be viewed, but I have a question -

What about people with visual problems who can't view smaller fonts, etc. without changes?

Teenagers were the largest part of the online community, but that is changing rather rapidly. Most of the teenagers that were online when the internet was new, aren't teenagers any more. The older generation is starting to take more interest in computers. Those with visual and physical disabilities are all online now.

My site may not be seen the way I mean it to be seen by everyone, but everyone will have the chance to see it without exception.

[jonny]

As a marketer, website design is crucial to your business. It's your personal stamp on your business or organization.

I've heard so many different things regarding font sizes and stuff. From a knowledgeable web-person, which font and web browser sizes do you prefer and why?

Thanks,
Jonny

[wenwilder]

As a marketer, website design is crucial to your business. It's your personal stamp on your business or organization.

I've heard so many different things regarding font sizes and stuff. From a knowledgeable web-person, which font and web browser sizes do you prefer and why?

Thanks,
Jonny

The importance of the site depends on what type of site it is, whether it's a sales and service site or a billboard site. The marketability and design of a sales and service site is highly important, a billboard site on the other hand - it just has to look good, be credible and informative.

Every designer has their own preference as to font size, resolution and browser. That would be a great question to ask in site design though, and I'm sure you would get a varied response. :)

[zeroflux]

I can't stand Flash. In fact, I back out of most sites with Flash.

My suggestion is use css so the text can't be resized, but set the font to a decent pixel size like 11 or 13, and ensure the line spacing isn't too tight (16 px+) so that it is readable to people who have bad eyesight. I use non-serif fonts like Arial and Verdana almost exclusively... Verdana for smaller type like links, text ads and column "feature" tables, and Arial for main content (article text) and so forth.

[freddieb]

Sounds like someone is still deigning using HTML formatting. I suggest learning CSS so you can fix the font size.

Even so, Netscape 7 allows users to enlarge font size, so you won't win there!

I don't worry TOO much about those with poor eyesight. If their eyes are too bad for glasses they usually have a text reader, anyway.

[Jurgen]

Even so, Netscape 7 allows users to enlarge font size, so you won't win there!

Every time I am reading something in here I am getting scared. I optimized my site with tables only. I don't like flash and I didn't get a handle on CSS yet. I tried to optimize for NS, IE, and Opera. I tried to optimize for a res of 600x800 and higher. So far so good.

And now I was checking with bigger font size settings, which I never bothered before. Well, I have to say it still works out pretty good. I am getting a "mile" long page but it is readable. I have to admit so, above 300% the page moves sidewise. Oh well.....

So.... It does work without fancy flash and CSS.

I belive "bad eyesight" should be accomodated regardless. Who knows, I might be one of them needing it sometime (hope not).

Jurgen
www.absolutelyfabulousflowers.com

[redcircle]

Every time I am reading something in here I am getting scared. I optimized my site with tables only. I don't like flash and I didn't get a handle on CSS yet. I tried to optimize for NS, IE, and Opera. I tried to optimize for a res of 600x800 and higher. So far so good.


I would suggest you take the time to learn CSS. This will make your sites much more acessable by more people.

now my reply to the original post.



So you finish your masterpiece and then see it in someone's screen your carefully positioned DHTML blown all out of porportion and you have to madly side scroll to find your content because their screen is set to large fonts.Their must be a cure so your size stays true to your design.
Cheers.

So what you are saying is that all the handicapped parking spaces should be removed because you want that spot. The brail lettering on elevators should be taken off. Blind people can take the stairs. Closed captioning should be taken off the TV. You don't want to read while watching tv.

Basically that's what you are saying you want when you don't want the font size to change. And it has been an ongoing debate that no one can agree on. The fact is that there is no answer to it. You can't please everyone. There is an article that give a good attempt to give you an idea on what you can do.

http://www.alistapart.com/articles/elastic/

also mentioned in the article.

http://www.csszengarden.com/?cssfile=/063/063.css&page=0

[tenntrips]

Even so, Netscape 7 allows users to enlarge font size, so you won't win there!

Every time I am reading something in here I am getting scared. I optimized my site with tables only. I don't like flash and I didn't get a handle on CSS yet. I tried to optimize for NS, IE, and Opera. I tried to optimize for a res of 600x800 and higher. So far so good.

And now I was checking with bigger font size settings, which I never bothered before. Well, I have to say it still works out pretty good. I am getting a "mile" long page but it is readable. I have to admit so, above 300% the page moves sidewise. Oh well.....

So.... It does work without fancy flash and CSS.

I belive "bad eyesight" should be accomodated regardless. Who knows, I might be one of them needing it sometime (hope not).

Jurgen
www.absolutelyfabulousflowers.com

I'm not only one of those with bad eyesight, I'm also one of the ones who until recently made it hard to resize the text. I was so worried about what it looked like, I forgot WHY the site existed!

I'm still doing the re-design but I've decided the best solution is to let the viewer decide what looks best for them.

Simple tables, and default fonts!!
Everybody will be able to read it. Some of the wraps might not look like -I- want them to, but the person on the ohter end is more important than my ego.

If I want them to put up money for my services than I think I should SERVE them!

http://www.tenntrips.com

[Craftix]

I personally believe that anything done to rob a website's visitor of any functionality thier browser offers is a bad idea because it makes the site un-userfriendly. (For example: Websites that trap you there by trying to prevent you from hitting the back button is an especially annoying one!) So trying to prevent them from increasing the size of their text is just as bad, obviously they need/want it that way for a reason. A good designer should understand and accommodate that!

Beyond that point, there are some still very valid reasons not to use CSS in different circumstances.

The best advice is to think about testing your site designs in more than one circumstance and not to view things so narrowly. There is more than one type of browser, more than one type of operating system, and more than one type of font/font size.

You wouldn't try to optimize your website for only one search engine right? So the best thing to do is set up a test bed and test your site! Test it against Netscape and IE and Opera, and Lynx and whatever else you feel is important and do it in different operating systems if at all possible. Try to change the font size and figure out how to make your design adjust for it!

Just my 2 cents! ;)

[Electronic Perceptions]

I'm probably a bit "old fashioned" in my designs, but I don't use CSS and Flash. (I should say though, I don't offer website design for a living.) I hate flash and almost never put up with it on other sites. I tolerate it from some sites, if they have a "skip" option available.

CSS technically I do use in a limited fashion on a couple of sites. I like to highlight links on my search engine for instance.

I'm a writer, so for the most part I concentrate on the words my sites have. Colors need to be pleasing and relevant to the site, and the layout must be organized and easy to use as well. Other than that though, there's not much in the way of "graphic design" on any of my sites.

Most of them are completely flexible to screen size, monitor size, resolution, etc. Which is what the reader/end-user needs.

And I agree with the previous comment about sites that force the user to view them their way. My biggest irritation is pages that open full screen. UGH! I run 1200x1600 resolution but my monitor only views about 1028x800 at a time. So something that jumps wide open on my system is immediately cussed at, closed and mentally blacklisted for all time.

[Kingsley]

Quote "So what you are saying is that all the handicapped parking spaces should be removed because you want that spot. The brail lettering on elevators should be taken off. Blind people can take the stairs. Closed captioning should be taken off the TV. You don't want to read while watching tv. "

I think this is a bit unfair as an answer to the question. It's a learning curve designing websites and when you find out that what you have designed may not be what appears on somone's screen it's a bit of a shock.
If we lived in a perfect world everyone would be able to do what anyone else can do, but we don't unfortunately.

Surely the idea is to design the site so that those that want to view it can, and help new designers and point them in the right direction so that they know how to develop /produce sites that are accessible to all.

Don't know how to do it myself yet, but willing to learn.

Cheers

[Nargule]

I was going to reply to this thread back in December when it originally was posted, but forgot.

Since it is back, I will view this as an oppertunity to respond.

Hasn't anyone noticed the "adjust font size" buttons in the upper left-hand corner of this site?

http://www2.interpipe.net/web_images/font.gif

The way this seems to work is there are three different .css files. The smallest one is used by default. Clicking the medium or large "a" executes some JavaScript that changes which .css file is used.

This way, the designer can not only make the fonts bigger, but can modify the page layout and font styles for people with vision problems (and the like).

I think this is a win-win method of meeting the user's needs and if you look at the source code of this page, it really isn't that hard to implement.

[pint4rh]

Hi all, just wanted to add my opinion on accessibility.

In answer to the first question, yes you can use work arounds etc to get your site to look similar in every site and degrade gracefully. I would recommend using css because when you or a client accesses the site using a mobile or PDA the css script will disappear and the site will still be usable. This is essentially how visually impaired users 'view' the site, with the design bit switched off.

There are three business benefits to doing this, 1) the 50 million or so visually impaired users in the USA and UK can view your site and then you've increased your target market segment. I.e. more 'eyes' on your products and services = more sales and 2) make your site more usable for visually impaired users and it becomes easier to use for everyone, including Search Engine Spiders. 3)The UK Disability Discrimination Act 1995 and the American Section 508 are now being used by users who feel discriminated against, i.e. don't have the same level of access to your goods and services as everybody else - so you could be treading a thin legal line.

As I said, just my 2 penny'th worth.

[HillsCap]

It's very easy, actually, to create a site that dynamically scales with the size of the window (so you don't have to design for one resolution), and allows your font size to be changed, without appreciably affecting the layout of your site (most especially, it won't cause users to have to scroll sideways to see your content).

Use DIV containers (rather than frames or tables) to lay out your site. Make these DIV containers a percentage of screen width. Thus, as the window size or resolution changes, they automatically adjust.

Use CSS to denote your fonts:
font: bold small Verdana;

This allows the font size to be changed from either the browser's menu, or using the CTRL-Mouse Wheel shortcut. Thus, those with visual deficiencies can crank up the font size and read it. Because your DIV containers are constrained to a percentage of browser width, even with huge font sizes, they won't expand beyond their set width, so no sideways scrolling.

Go check out http://www.hillscapital.com/ to see an example. It's using external CSS to set the DIV container sizes and font sizes. I tried to make the site look and function as closely as possible to a frames-based layout. The dynacode.js file (used to inject external HTML files into the Content DIV, to give a DHTML effect) only works right now on IE, but I'm learning XML, and will soon convert the whole site over to XML/XSLT, and use XML transclusion to inject external content into the Content DIV, thus making it cross-browser compatible.

[cooper]

Wow, this thread really got some people riled up it seems.
I believe the original issue was about font sizes and user modifications therein breaking a design.
The only way to fix a font size is to make it into a graphic or in Flash. period.
Browsers are made to serve the user not the site designers, so they will always allow the users to resize text. Some browsers do this better than others. MS Internet Explorer is one of the worst browsers for changing font sizes. If I recall correctly, it will only allow you to resize fonts that are set with FONT tags and CSS values set in percentage and ems. Pixel values for font sizes will not change with IE's font size controller and this is a bad thing for users of that browser.

You have to find a way to make a design that best serves your users and still looks and behaves the way you want/need it. The best way to do this is to use valid markup (HTML tags) and CSS for design and layout.

My suggestion for everyone is to learn the standards and follow them. It will only help you and your users in the long run.

I preach about Jeffrey Zeldman all the time in these forums and it's for good reason. He has written an excellent book with awesome resources. I also praise Eric Meyer's book and web site about CSS design. So, check out these two sites and read their books. It will be time well spent.

http://www.meyerweb.com/
http://www.zeldman.com/

</nuff said>

[mikmik]

Did people know that you can also adjust text size (on 'resizeable' text sites) by holding down the 'Ctrl' key and scrolling your mouse wheel? In IE, you get 5 size variations, in CSS parlance, they are xsmall. small, med., large, and xlarge.
In mozilla, it looks like it scrolls all the way from -7 up to +7!

Here is a great site about what viewers with 'accessability' issues go through, and some very good instruction and tutorials. I have never made my text non-resizeable since.
http://www.fixingyourwebsite.com/DiveIntoAccessibility/table_of_contents.html

In fact, you can have it both ways! CSS is damn handy. Check out 'day 26' http://www.fixingyourwebsite.com/DiveIntoAccessibility/day_26.html

I am more and more impressed with what is possible with CSS styling every day. I am redoing my site right now, and on the 'Home" page, I have some buttons that allow you to select different colouring schemes. I am just going through the learning process myself, but all the menu's on my site are pure text links in the code, and any browser or text reader can 'see' them. And those menu's are just some of the simpler ones that I've tried so far.

[siterender1]

We have had problems on several sites where the design drastically changes when the font changes.

We went back to basics. Design the site from the ground up with out any CSS, or Text mark up. Yes it will look ugly as heck. Then once you see what you have, then look at how the site should be with div tags implemented. Once your layout is correct and your divs are flowing correctly, then use CSS to correct your fonts. Do not mark up your fonts before you get a layout you are willing to live with. Mark them up afterwards. Now once your fonts scale the div's will accomodate for there new size.

There is little bit more to this, but this method has worked. Also, there are ways to allow the user to increase font size using javascript, as mentioned before.
http://www.plone.org as a A A A buttons on top.

Peace and a wonderful forum