Another High School Site

[waynew]

Looks brilliant.

 

On hi def monitor, navigation buttons look lower in quality.

[BoltZ]

I was just helping.. In my opinion you should move the school symbol of a shiled up about 100 pixels so its like halfway inbetween the bottom line so theres not much white space there.

[Maq]

Nah, I say you leave it in the footer.  I assume it's going to be on every page so I would keep it in the footer in case the right container is used all the way down to the bottom.

[BoltZ]

If he wants to fine but then I suggest putting  some content on the leftside of the footer.

[Maq]

Best highschool site I've ever seen.  No kidding.  Can't find anything I don't like.  (There will be stuff to the left of the insignia on the bottom, right?  Looks kinda... empty.)

 

Yes, there will be some text there, just haven't worked out that part yet.

 

 

Please read previous posts, this has already been mentioned...

[BoltZ]

Yea I know I read that part right after I posted this but by that time the time limit I had for editing this post was expired. Thanks anyway

[Maq]

Yea I know I read that part right after I posted this but by that time the time limit I had for editing this post was expired. Thanks anyway

 

That is exactly my point.  It's a better idea to read the previous posts before posting yours.  You're welcome.

[nrg_alpha]

Overall, quite nice. Good job. Just one point;

 

Just bumping up the text size up one notch (Ctrl plus +) breaks the layout immensely (in Google Chrome and Safari). Works fine in FF. Something might be quirky with the structure perhaps?

[Daniel0]

That's because Chrome and Safari don't support full-page zooming. They only support text-zooming which is an inferior type of zooming. I.e. it's the browsers' fault.

[jcombs_31]

That's because Chrome and Safari don't support full-page zooming. They only support text-zooming which is an inferior type of zooming. I.e. it's the browsers' fault.

 

Right, he brought up the same point with the Coral Glades design.  Overall I'm not concerned about it because I really don't think many people are increasing text size.

[nrg_alpha]

That's because Chrome and Safari don't support full-page zooming.

 

Um, no. That's not the reason. Sites that are structured properly will not break in those (or any other major) browser that support text only scaling. Firefox does not break jcombs's site the way it does in Chrome / Safari.

 

They only support text-zooming which is an inferior type of zooming. I.e. it's the browsers' fault.

 

Well, this is highly subjective. I personally see nothing 'superior' with browsers that force everything to scale uniformly. Performance takes a hit.. some browsers (like Opera) can't scale graphics nicely at all.. not to mention some sites scaled up uniformly might lead to the need to scroll horizontally. Some people might want only the text to resize, as the graphics is not an issue.

 

I personally would like to see all major up-to-date browsers handle both methods of scaling (text only as well as text and graphics... to satisfy ALL users). But if I had to choose one method over the other, I could care less about crappy scaled / soft-looking interpolated graphics along with slower performances).

[Daniel0]

Are you telling me that you don't think the type of zooming in the first attachment is not inferior to the type of zooming in the second attachment? Both of them has 3x zoom.

 

Full-page zooming is obviously superior to text only zooming seeing as all the other elements will scale along with the text. If you only zoom the text then eventually it'll not be able to fit inside their containers.

 

[attachment deleted by admin]

[nrg_alpha]

a) I like how you exaggerated the text size to deliberately break the site (common sense would dictate that a font size THAT big is absolute overkill). I'm talking about bumping the text size a notch or two.. not 5 or 7 or whatever.. Did I mention in my original post in this thread that the OP's site breaks when I bump up the text 7 nocthes? I was merely saying that even bumping it up ONCE breaks things (in chrome and safari.. not FF).

 

b) Of course a site will look strange if the graphics stay the same while the text grows in size.. again.. common sense. What I am trying to say is that when it comes to people who are more interested in reading the content (and may have a variety of reasons for bumping up the text a little) as opposed to looking at pretty graphics, who cares about how strange the site looks? Some people might.. and for browsers that support it, great. For those that offer a choice, great.. Let's put it this way.. I work on a small laptop. When I'm reading a site late at night, and I get a little tired, my eyes have to strain a little harder to keep reading. Bumping up the text once (not as you have done) is more than enough to make reading easier.

 

As for your examples, take another screenshot with the text size bumped up ONE level above standard.. will it look as bad as you contorted it to be? Of course not!! Your samples are supposed to be the common sense representation of how users bump up text sizes? I think a website's text size would have to be pretty small for an user to need to bump things up to the outrageous (and completely impractical) settings you have shown.

 

EDIT - I tested the home page as in your screen shot with bumping the text size up only one notch... looked bad actually.. not because of the fact that the text is a notch larger in ratio to the graphics.. but because the page's construction doesn't gracefully expand and allow text to grow without it overlapping other elements... so this site's homepage is admittedly not a good example.

[jcombs_31]

Your argument will fail on almost all fixed width sites.  Really only those designed to expand from the get go will meet your requirements.  I do agree that it is bad when the entire site shifts, but I don't see anything particularly wrong with my markup. It is pretty much all semantic and to spec.  The problem is clearly that the text bump is increasing the margins or padding and breaking my pixel perfect fit.  So as Daniel has pointed out, full page scaling works out much better and keeps the site looking exactly as it should.  Text resizing can change too many factors in a fixed pixel design.

[jcombs_31]

It appears to be the menu that breaks the site when text resizes. I imagine I can probably address that.

[Daniel0]

a) I like how you exaggerated the text size to deliberately break the site (common sense would dictate that a font size THAT big is absolute overkill). I'm talking about bumping the text size a notch or two.. not 5 or 7 or whatever.. Did I mention in my original post in this thread that the OP's site breaks when I bump up the text 7 nocthes? I was merely saying that even bumping it up ONCE breaks things (in chrome and safari.. not FF).

 

It was three times. Read my post. Besides, it's not excessive. Imagine you have really poor sight. Then you may have to zoom in three times.

 

b) Of course a site will look strange if the graphics stay the same while the text grows in size.. again.. common sense. What I am trying to say is that when it comes to people who are more interested in reading the content (and may have a variety of reasons for bumping up the text a little) as opposed to looking at pretty graphics, who cares about how strange the site looks? Some people might.. and for browsers that support it, great. For those that offer a choice, great.. Let's put it this way.. I work on a small laptop. When I'm reading a site late at night, and I get a little tired, my eyes have to strain a little harder to keep reading. Bumping up the text once (not as you have done) is more than enough to make reading easier.

 

[...]

 

EDIT - I tested the home page as in your screen shot with bumping the text size up only one notch... looked bad actually.. not because of the fact that the text is a notch larger in ratio to the graphics.. but because the page's construction doesn't gracefully expand and allow text to grow without it overlapping other elements... so this site's homepage is admittedly not a good example.

 

I don't think you understand how it works. Lets say you have one liter of milk. It's stored in a container designed to store one liter. So if you double the amount of milk but you still have the same container then it'll obviously overflow. It's the same with the text. Increase the text size but leave the container size and the text will overflow. That's why full-page zooming is superior. Full-page zooming increases the text size and the size of the containers and any graphic there may be. Therefore, the text will not overflow and the design will not break - it'll just be larger.

[nrg_alpha]

Your argument will fail on almost all fixed width sites.  Really only those designed to expand from the get go will meet your requirements. 

 

I agree completely. Any fixed width site, be it my own or anyone else's will fail when everything uniformly scales up (resulting in horizontal scrolling to see content on the right hand side). This is another reason why I prefer text only scaling.. I not care how pretty graphics look when scaled up..nor do I care to have to start horizontally scroll to read a site's contents... what's next? No fixed width designs? Do we as developers have to start designing in only one particular fashion just because some browsers have now started supporting full uniform scaling? Know what I mean?

 

The initial argument in all this is that the browser is being blamed for site break ups in text-only scaling, while I am trying to say that is has something to do with site design/construction and not the browser itself. Or put another way, if I was to post this forum's homepage URL in some other webdev community forum and ask its knowledgeable members if it is the fault of the browser for text overlapping graphic elements and such when bumped up, or is it the fact that the page is not built properly to expand gracefully (resulting in nothing overlapping anything else.. everything keeping in its own div, etc), I bet the people who know better would say it is the page code that is at fault, not the browser, be it Firefox (using text only scaling, Chrome or Safari). This is common sense..otherwise, my site would break after a notch or two [it's the browser's fault, remember?] (and it seems to hold well up to 5.. afterwards, yes, things start to look a little hairy.. but at that point, do any of us actually expect users to read sites with such enormous sizes? I would think not...)

 

I do agree that it is bad when the entire site shifts, but I don't see anything particularly wrong with my markup. It is pretty much all semantic and to spec.  The problem is clearly that the text bump is increasing the margins or padding and breaking my pixel perfect fit.  So as Daniel has pointed out, full page scaling works out much better and keeps the site looking exactly as it should.  Text resizing can change too many factors in a fixed pixel design.

 

It may not be that your site has markup problems from the standpoint of default structure, validation, etc... Everything can seem to be in order. During the construction of my own site, I have seen perfectly valid markup work well on all browsers expect IE..(this admittedly drags CSS into the mix).. But point being that up to that point, my site was doing well structurally / semantically.. Yet I had to make changes to my otherwise perfectly fine markup to make it not only still validate, but work fine across all browsers (including IE). So I am not saying that your site is problematic in that fashion.. but what I am saying is that even with 'correct' markup, site behavior may not abide properly across browsers unless coded in an alternative manner that is still valid in all senses, yet works as intended across all up-to-date browsers. In my case I DO blame the browser (IE) for lack of proper CSS support.. not structural markup.

 

Now while text scaling is not an issue for most people.. I do feel that by designing a site to take those who do make use of text scaling into account eliminates that portion of problems.. those who prefer everything to scale up can continue to do so.. no harm, no foul.. but those who under whatever circumstances would like to increase the size a notch would be in for a nasty surprise. Perhaps for your intended target audience, this won't be an issue whatsoever.. but from a design philosophy, it doesn't hurt to design with the principal that your site will hold just fine even with text bumped a notch or two. Then people can't blame you, or even worse, the browser.

[jcombs_31]

My point wasn't that my code validates, but that is is semantic and properly coded based on the overall structure. I went ahead and fixed the problem that breaks the site, but if you scale up you lose the last menu item. Not only does it scale the text, but it also scales the container because it is not defined by a fixed width, but uses padding. I also scaled the background image in that container.  So, it would appear the engine that good and safari use is scaling two things, depending on if the background is defined on that text element, so I think that mozilla and even IE7 use a better method of scaling.

 

With all that said, I fixed the problem as much as I can.

[nrg_alpha]

I don't think you understand how it works. Lets say you have one liter of milk. It's stored in a container designed to store one liter. So if you double the amount of milk but you still have the same container then it'll obviously overflow. It's the same with the text. Increase the text size but leave the container size and the text will overflow.

 

And this is an issue with site design.. having containers a fixed size (width is not a problem.. oh but the height... bad idea!) One can design a site properly with a div that can expand and contract to keep all it's contents within it (usually allowing variable height, but a fixed width.. but it can be variable for both if done carefully). Don't fall into the misleading trap that a properly designed site has to have its divs fixed in all dimensions..(especially height-wise) this is not the case. Keenly designed sites should allow for content to expand or contract without silly collapsing / overlapping of content. Sites that are restricted to dimensioned divs (height wise I'm talking about here) is a recipe for problems as this site's homepage exhibits. Design with div flexibility from the get go, and this won't be an issue if the end user happens to need a slight text resizing.

[nrg_alpha]

At least now the site doesn't snap off screen, jcombs Not sure why the last menu item vanishes..

 

Please don't get me wrong.. you make really nice sites. I do not intend any disrespect to you, Dan or anyone else. I do however stand my ground and defend better design / coding practices and not (with all due respect to anyone) blaming the browser for sites that do break otherwise.

[Daniel0]

By your logic we could also turn it around. Should we be forced to design a specific way just because some browsers do not support full-page zooming?

 

Besides, how are you in position to evaluate how much is "acceptable" for things to break on text-zoom? How can you tell that there won't be people who will still have problems reading the text at e.g. fifth zoom level? The point of full-page zoom is not keeping the graphic looking pretty. The point of it is to retain the structure of the design. I think it's astounding you don't get it. Enlarge the container's content without enlarging the container and things will break. It's obvious.

 

Furthermore, if text-only zooming is really the way to go, why do you think browser vendors are turning away from it? Safari is doing it too. It's in the nightlies.

 

Why even bother doing it all in ems? It'll just be a maintenance hell. See for instance: http://tomayko.com/writings/full-page-zoom

 

I still do think it's Chrome's and Safari's fault for not currently supporting proper zoom. Trying to fit larger text into smaller containers is like those girls purposely try to fit in too small jeans - it'll look really ugly.

 

 

PS: Sorry for hijacking your thread, Jeff.

[jcombs_31]

Not a problem Daniel, I just think the effort to handle all the text resizing is counterproductive. If someone changes their settings they can probably expect most sites to break to some degree.

[Daniel0]

Exactly. That's my point and that's the reason why browser vendors are implementing improved zooming so it'll not break when you try to enlarge it.

[nrg_alpha]

By your logic we could also turn it around. Should we be forced to design a specific way just because some browsers do not support full-page zooming?

 

Accessibility to satisfy all circumstances. Why build for only one way when you can build for both? Build for both sides, and both will be happy. The full page zoomers can use the browser that suites them perfectly.. those who wish text only would be suited as well.

 

Besides, how are you in position to evaluate how much is "acceptable" for things to break on text-zoom?

 

Ok, now we are becoming a little hostile here, aren't we Administrator? It's not ME who's evaluating what is acceptable. Look around the web dev communities at large. It is advocated to build sites with flexibility / accessibility to accommodate as much as possible. Sorry if you get the impression I am the one who calls the shots.. I certainly don't (and we all know this). Don't get angry at me.. get angry at the webdev community at large if anything. You seem to be taking this all a little too personally. I apologize for this.. had I known all this, I probably would not have said anything in the first place.

 

How can you tell that there won't be people who will still have problems reading the text at e.g. fifth zoom level?

 

I can't. There are people who are near legally blind for that matter. So in that sense, no matter the size, it won't matter. Obviously, there is a 'breaking point' which text size will disrupt a site's design.. but the question is.. how much? After one size increase? Is one or two unreasonable? Perhaps 5 is (and yes, I think it is).. but would it hurt to design with some kind of flexibility in mind? So what if your pretty design no longer lines up once the text is upped a notch.. if it doesn't start overlapping and cluttering elements around it, it will still be readable.

 

The point of full-page zoom is not keeping the graphic looking pretty. The point of it is to retain the structure of the design. I think it's astounding you don't get it. Enlarge the container's content without enlarging the container and things will break. It's obvious.

 

Oh don't worry.. no browser is keeping graphics pretty when enlarged (some do a better job than others). And ok, keep the structure intact at larger scales.. I agree with that.. but it still wouldn't hurt to have support built in for text only resizing. If you build a site properly, I don't think the users who care only about reading slightly larger text are going to give a care about everything staying nice and neatly aligned. Obviously, text scaling is not meant for this.. it's meant for increasing readabtility.. thus in your own words..." think it's astounding you don't get it".

 

Furthermore, if text-only zooming is really the way to go, why do you think browser vendors are turning away from it? Safari is doing it too. It's in the nightlies.

 

I'm not saying it should be the only way to go.. I have said I would like to personally see browsers support both functionality. As to why they are only supporting the scaling of everything.. I dunno.. poor judgement perhaps?

 

Why even bother doing it all in ems? It'll just be a maintenance hell.

 

Nonsense. CSS enables full maintenance capabilities if employed correctly. It doesn't have to be hard.. just that it seems many people either a) don't know how to.. or b) don't care...

 

I still do think it's Chrome's and Safari's fault for not currently supporting proper zoom. Trying to fit larger text into smaller containers is like those girls purposely try to fit in too small jeans - it'll look really ugly.

 

Touché... but I suppose one can counter argue and say that perhaps the design can be altered to better accommodate more space for content in the first place. Easier said than done? Perhaps. As you mentioned in the beginning of your last reply, we could turn it around. We can argue till we're black and blue in the face (which serves no one really). You clearly have your views... I have mine. Again, had I known all of this would turn out, I would not have bothered in the first place.

 

So again, sorry if I rubbed you the wrong way. You're on your own.. I'm on my own. Design things your way if it works best for you.. I'll design my way.. choose your browser that suits you.. I'll choose what suites me...

[Daniel0]

Oh, don't worry. I don't take it personally. I'm just as adamant in defending my views as you are with yours