Is it still necessary to use em's and avoid javascript for Accessibility?

[itmitică]

Using em as baseline won't give an accessibility free pass nor will it make you a better developer. Testing will make you a better developer.

Another test.

We all know Jason ranted more than once about SPF's platform.

Stevie talks about how he's behind SPF, when in fact he's supporting Jason.

Let's see how SPF's platform weights against Jason's.

SitePoint: this thread
http://www.blaze.io/mobile/result/?t...067b8f042c2b36

Average Load Time 	Average Pagesize
8.59s 	                324.37kb

versus

Jason: home page
http://www.blaze.io/mobile/result/?t...8bfeecd87ea03c

Average Load Time 	Average Pagesize
8.18s 	                44.75kb

Jason's doing worse with only 1/8 the content. Accessibility is comparable. Even more, Jason's UX is worse because of its own version of an elastic layout, as I pointed out before. Which is the one that seems to hold him back.

Which is better?

[matthijsA]

@itmitică: the reason I don't want to look at two specific different websites in the context of this discussion is that there are many factors differing between those websites. So you can't compare them. You are talking about how the websites look, at pagesize now, etc. Those are all relevant things IF you want to discuss the general question: which website is more accessible/usable, website A or B?

But that is not the point of this discussion thread. The question is: how does setting the base font size in px or em compare accessibility wise? When everything else is the same. That last thing is important.

If you start getting all kinds of other things involved, it's impossible to conclude anything about the main question. I am sure there are many websites using px as base that are more usable and more accessible then other websites using em as the base. I fully agree with you on that! But what we need to know is, when everything else is the same, and everything else is being dealt with, what are the consequences of this one thing (px vs em)?

[itmitică]

But what we need to know is, when everything else is the same, and everything else is being dealt with, what are the consequences of this one thing (px vs em)?

You make it sound like the developer has no say in it. When this is my main point since the beginning: it's not about em, it's not about px, it's not about the user. It's about the developer, his testings, his approach, his set of beliefs, his methods.

Show me that universally canonical site, that template of the average user, that immaculate point of reference you're referring to: where everything else is the same. It simply just doesn't exists. So being "pig-headed obstreperous arrogant" about one em-narrow minded view and dismissing pretty much anything else makes for a hard fall from that theoretical position right into the real world. (I'm just quoting there, at the beginning, I'm not saying you are that.)

Or do you think that if Jason is working now overtime to fix his site for mobile, this will eventually mean em is the right choice? Think again. Once again, there is more than one way to skin a cat (sorry Mallory ). We should get over following and start being developers. We should get over mob-like attitude in SPF against all different things and see if maybe there is something there to learn, a valid point that won't invalidate yours, that won't invalidate each other. You can learn from a rock. Unless you're the rock it self.

[matthijsA]

Sorry, I really don't understand what you are trying to say. Of course the developer has a say in it. Of course there are many, many things important to build an accessible website. And yes, there are things more important then just the issue px-vs-em. I am NOT denying that.

It seems we are discussing different things here. I don't care about Jasons' website. This thread started with the question whether using em for base font size is needed or not. This thread is NOT about the question "Is Jasons' website accessible?" Or "Which site is better, the one from Jason or the one from itmiica?"
Or I might have missed something.

Again. I don't know how I can this make any more clear then I already do.
1) Yes, there are many things important to build an accessible site
2) But in this case we are focusing on the question em-vs-px base font-size. What are each pro's and cons?

Is this clear to you? Do you understand where I'm going? It's like we are discussing the tires of cars. Which tire has which pro and con. Then it doesn't make sense either to say things like "Well, still my Audi is better then his BMW"

[itmitică]

It's simple: the developer is all the pros and all the cons for either em or px. I can't make it simpler than that.

Also, I can't get that from you. You want pros and cons. You don't want examples. How do you reach valid judgments without testing? Theoretical facts are known to be realistically false and incorrect.

And it's not two sites. It's two sites to answer your question: one using px and one using em. From the two different point of views this thread wants. Testing them gives you answers. You find weak spots in one, you fix them. You find weak spots in another, you also fix them. That's your answer.

For example, on Mar 21st when I added media queries for responsive design for my site, I've put this in there:

@media screen and (min-width: 1700px) {
  body {
    font-size: 1em; }
}

To be noted that I start with a 15px font size on body.

Does this answer your question? It's not about a choice between em and px, it's about developer's technique.

And you could go on on how this fails for resized browser windows on huge screens. And I'm going to tell you that that is not there for this kind of users, it's for those less savvy.

Those savvy ones know how to zoom or stuff if they play with multiple side-by-side windows on one huge screen. And I don't see less savvy users going for this huge resolution. At work, many of my colleagues ask for 800x600 from 1024x764.

And so on and so forth. Which makes it anybody's guess. It's not automatically one single party right. And I believe I gave you more than rants in order to sustain my point of view.

[deathshadow60]

Here is how my site (itmitica.com/en) looks like on iPhone (480px on 320px) and Jason's (deathshadow.com) looks like on the same device, at the same resolution, both sites without any other zoom or special settings in the browser:

Funny since the one you used in your example has no media queries yet... and honestly works better on the iphone than yours since at least it fits more than five words on a page.

Also, you do know how to navigate a site on a iphone, right? like say, clicking on the content column, un-pinch to go back to overview... Yours is useless because there's nothing on most of your pages and most of your elements look broken or thrown in any old way; meaning mine works better without media queries than yours does WITH.

Though gimme a few, let me update that site to actually use media queries -- since I wrote the markup and most of the CSS two years ago and the most recent change was just FAC and some CSS3 instead of images.

"fix for mobile" has jack **** to do with EM... Also, notice that due to the image interaction the menu is... in PX. 14px with 20px line-height.

[itmitică]

Funny since the one you used in your example has no media queries yet... and honestly works better on the iphone than yours since at least it fits more than five words on a page.

The one I used in my example? I used deathshadow.com. Do you have a twin for it, and this one is the evil twin nobody's suppose to see?

You actually believe yours works better? Try reading the menu. Try reading the side bars.

Also, you do know how to navigate a site on a iphone, right? like say, clicking on the content column, un-pinch to go back to overview... Yours is useless because there's nothing on most of your pages and most of your elements look broken or thrown in any old way; meaning mine works better without media queries than yours does WITH.

Mine is not useless, it gracefully degrading at the top. I don't care if part of the top image is not fully displayed on smaller resolutions. That's why is degradation. And it's graceful. The rest of the elements are display right and fine.

Do you even own an iPhone to really look at your site? Or are you

border[s] on a pathetic grasping at straws.

You're running your bad mouth and you'd say anything, as usual, though you waited for me and others with real developer attitude, instead of some lame followers, to open your eyes on how your site is really looking and behaving. Where's the Jason we know, that'll rip you a new one when it hears: "clicking on the content column", "since I wrote the markup and most of the CSS two years ago". Try this on your self some times, ripping new ones. Your iPhone has a mouse that I didn't get? It's called tapping. Get real.

[matthijsA]

@itmitică: I'm afraid we still don't understand each other. I am NOT denying that what a developer does with a website is not important. Of course it is. A developer can make an em-based site inaccessible, he can make a px based site inaccessible. We agree on that!

But that's not the important question.

The question is, still: what cons and pros does the specific technique of em-vs-px base font size have. And so far, there is still an accessibility problem with using px for some users in certain situations. As has been explained by me and others a couple of times now. And you have still failed to explain me what big advantage px has over em as base font size. I have asked a couple of times what that advantage is, and have unfortunately not gotten an answer. Even though I'm really interested.
(the discussion here has been a bit heated, but really my intentions are to learn something here, not to win a fight. You have to believe me)

[itmitică]

I don't believe you.

First off, you choose to ignore the proven fact that using em also leads to accessibility problem with using em for some users in certain situation. I've given you also a fact (and code) about how I use em for baseline too, only I'm more reserved with that. So it's not a matter of em versus px, it's a matter of blindly following without fully understanding on some parties. This thread was actually good in revealing that. I'm done with this one.

Also, I've explained you the advantages here: http://www.sitepoint.com/forums/show...=1#post5093511.

I'm going to sign off and let everybody have a good soothing week-end.

[matthijsA]

The reason you gave was, and I quote "Because of the control that I have."

That's it? You don't explain what kind of control, over what exactly, etc. I can only guess that you mean, when you get a photoshop comp from a designer, it's easier to make that an exact px-by-px website when you use px for font sizes everywhere. But to me that's a very weak argument. Designing and building for the web is different then for print. On the web a lot of control is in the hands of the users. And that's a good thing. A user can decide which computer to use, which browser, which font to install, which font-size to set as default, etc etc

That was what I meant when I said that using px everywhere can be easier for the developer. But that still leaves the accessibility problem with px we have been discussing here. So it seems to me we can conclude, so far:

A) using px as base font size is (a bit) easier for the developer

B) using em as base font size is more accessible

[itmitică]

Also, you do know how to navigate a site on a iphone, right? like say, clicking on the content column, un-pinch to go back to overview...

One last thing: the main argument you had against me and my px solution was that I didn't care for users. I told you that they can easily zoom if needed. You ranted about it and dismissed it.

Now, you're trying to teach me how to... zoom on iPhone to see your site better. That's reach comming from you, and is no little irony, as somebody else already said.

You are a man of standards, Jason. Double standards, that is.

[itmitică]

The reason you gave was, and I quote "Because of the control that I have."

Some other big and small companies choose to do this, since some font faces only look good at particular sizes. Zooming keeps that feel, em doesn't.

[itmitică]

But that still leaves the accessibility problem with px we have been discussing here. So it seems to me we can conclude, so far:

A) using px as base font size is (a bit) easier for the developer

B) using em as base font size is more accessible

You can conclude that. Not me.

I gave you resons why em fails. You didn't gave me but wild assumptions on why px should fail.

I gave you reasons why and how it isn't a em versus px thing. You didn't care and ignored it.

You choose to turn a blind eye and keep to your own beliefs. It's OK. Let's leave it at that. Just don't pretend you're really looking for answers. It bothers me to put technical prof before you while you can't even acknowledge their worth.

[Stomme poes]

and honestly works better on the iphone than yours since at least it fits more than five words on a page.

Also, you do know how to navigate a site on a iphone, right? like say, clicking on the content column, un-pinch to go back to overview...

Who the hell wants to constantly zoom in to make the text large enough to read, then "un-pinch" to see where you are on teh website??? It's like surfing with a screen magnifier. I dunno about you but for me that's not fun.

I'm not an internet-phone user so my opinion may be worthless here, but I'd rather read fewer words per line at a size that requires no "pinch" to read, than get longer sentences with words the size of mouse-turds.

The "mobile" or "mouse-turd-screen" solution for a page like Crusty's is, get rid of side-by-side columns. Let the user scroll to infinity, because this is still easier than constantly zooming/pinching in and out. Then so long as each column adjusts itself to the width of the phone screen, chances are you're good.

But that said, on Mitică's screenshots it does at least fit on the phone. I've seen plenty of sites who still don't. Mostly ones who have stuff like carousels on the page etc.

Some other big and small companies choose to do this, since some font faces only look good at particular sizes. Zooming keeps that feel, em doesn't.

I'll choose readability over "feel" any day. Of course, this would explain why I'll never, ever, ever have big-brand clients. But they are trapped in the mindset of the print world and print advertising it seems.
Anyway, another reason I block @ font-face. Saves me HTTP requests, and saves me some designer's cute idea of some sh*tty unreadable font. If I'm curious, I can always whip out Chrome and take a look.

[RyanKing1809]

Some other big and small companies choose to do this, since some font faces only look good at particular sizes. Zooming keeps that feel, em doesn't.

I'll choose readability over "feel" any day..

I would say the 'feel' (for lack of a better term) affects readability.

I've been avoid using ems solely on the point that I have no control over the typography. But that's with a fluid layout. I've been reading a lot into this and have come across the term 'elastic' layouts. Where the entire layout is based on the font size (ems) - giving complete control over 'typographical aesthetics' whilst allowing users to adjust the font to whatever suits them. With this method of layout I see no reason not to use ems - it gives both the designer and the user complete control and maximizes accessibility.

Smashing Magazine wrote a great article on the subject: http://coding.smashingmagazine.com/2...t-one-for-you/
Elastic Layout Example/Tutorial: http://pageaffairs.com/web/css/fluid-elastic-fantastic/

[deathshadow60]

Here's how an iPhone in portrait should handle the page:
http://www.deathshadow.com/images/portrait320.jpg

Actually, not true, I've tweaked the menu buttons slightly since I built it... admittedly that's 320 portrait instead of 480 landscape -- at 480 the sidebar is placed below the content as two columns... Which I think you'll find vastly superior since we have legible font sizes, mobile layout, and actual content showing instead of massive amounts of whitespace with one or two words like yours.

That was funny if you think about it -- your page full of nothing on every screenshot leaving you going "where's the beef" vs. My site which didn't even HAVE media queries yet... and you thought yours was BETTER?!? That's a laugh and a half.

Off Topic:


I'd have had this up in two minutes if I wasn't having headaches from hell with my 'new' host in terms of FTP... to the point I'm already thinking on moving ... AGAIN. Can't even upload a 3.5k CSS file without 40+ retries. Took me about fifteen minutes to create, five minutes to pull a screencap and paste it together, and two hours to upload the 3.5k new file... ARGH.

I need to go back to running my own server, this whole hosting with other people thing just doesn't cut it.

[deathshadow60]

Who the hell wants to constantly zoom in to make the text large enough to read, then "un-pinch" to see where you are on teh website??? It's like surfing with a screen magnifier. I dunno about you but for me that's not fun.

I'm not an internet-phone user so my opinion may be worthless here, but I'd rather read fewer words per line at a size that requires no "pinch" to read, than get longer sentences with words the size of mouse-turds.

I wouldn't EITHER, I'm just saying by comparison, at least my page had CONTENT on it... most of the screencaps for his site look like have no content or look like rendering errors.

[matthijsA]

You can conclude that. Not me.

I gave you resons why em fails. You didn't gave me but wild assumptions on why px should fail.

I gave you reasons why and how it isn't a em versus px thing. You didn't care and ignored it.

You choose to turn a blind eye and keep to your own beliefs. It's OK. Let's leave it at that. Just don't pretend you're really looking for answers. It bothers me to put technical prof before you while you can't even acknowledge their worth.

No reason to respond like that. I'm focusing on the actual arguments here. Not sure why you're being so aggressive.

I'm only interested in the core of the discussion. At last you gave an argument:

Some other big and small companies choose to do this, since some font faces only look good at particular sizes. Zooming keeps that feel, em doesn't.

OK. So in some cases a company wants to dictate which font is used and at which size. Well, fine, that is indeed a valid reason in favor of using px. It's the same reason Flash is still used/has been used a lot. Controlling exactly how something looks, to the pixel. So that's one argument pro px.

Of course that still leaves the argument against. Each developer will have to decide for each project which argument is more important.

Personally I wouldn't be sure if it weighs heavier then the accessibility issue though. Again, it's about control on the web. I can make a website with nice 16px/1em Helvetica. If someone has his default font setting set to 300% because of bad eyes, and that nice 16px/1em Helvetica (or whatever) doesn't look "good" to me (or the company I build the website for), so what? If it helps the person read the website, what's the problem? For the person with bad eyesight, that 16px Helvetica is completely unreadable, in other words doesn't look good anyway

[deathshadow60]

Oh, here it is in 480 for comparison.

http://www.deathshadow.com/images/landscape480.jpg

Thanks for pointing out I hadn't even WRITTEN mobile for that site yet, so it was auto-sizing for the 752 min-width of the desktop layout

[Paul O'B]

Hey guys, I hope this thread has cooled down now and that you can carry on the discussion without getting personal.

We all have opinions so should be free to disagree. Just make your points clearly and then move on.

There are some good points made in this thread on all sides but they are now getting lost in the bickering and I think this topic has probably run its course by now. However, I will leave the thread open but if I see more of the same bickering then I will close it as ultimately it helps no one.

[itmitică]

Oh, here it is in 480 for comparison.

http://www.deathshadow.com/images/landscape480.jpg

Here's my test. The screenshots are taken with my iPhone, using Safari, where no special settings where made and no zoom level was applied whatsoever.

http://i1054.photobucket.com/albums/...vs-jason-2.png

It looks like the em technique you use on your site is still failing to provide better accessibility than my px technique that I use on my site. I could be wrong, maybe somebody else could corroborate either variants. But I suspect you're not using an iPhone, or you've applied special settings for your screenshot.

[itmitică]

At last you gave an argument:

OK. So in some cases a company wants to dictate which font is used and at which size. Well, fine, that is indeed a valid reason in favor of using px. It's the same reason Flash is still used/has been used a lot. Controlling exactly how something looks, to the pixel. So that's one argument pro px.

I gave you an argument when you asked, it's not my fault you missed it.

Personally I wouldn't be sure if it weighs heavier then the accessibility issue though. Again, it's about control on the web. I can make a website with nice 16px/1em Helvetica. If someone has his default font setting set to 300% because of bad eyes, and that nice 16px/1em Helvetica (or whatever) doesn't look "good" to me (or the company I build the website for), so what? If it helps the person read the website, what's the problem? For the person with bad eyesight, that 16px Helvetica is completely unreadable, in other words doesn't look good anyway

I suspect you don't posses the technical knowledge for this discussion. The default font setting can't be 300%. That's the default zoom level changed from 100%. Which makes it fine for my px solution. I state this again: "Zooming keeps that feel, em doesn't".

I've done extensive testing before taking my decision. I even showed you how em is going bad and px doesn't. I showed you that I too use em as baseline, following technical logic. It's my personal decision, but it's documented, like every tech thing I do. Doing otherwise will get me out of my job.

That's why I stand against "px goes against accessibility", because I'm serious about what I do. Proofs are needed, in the sense that "a good developer is helpless using px but saved using em". That's false. Because I've given you proof that a good developer is helpless with em. No random examples of px uses gone wrong. Nor general theoretical considerations.

And the thing that is making less sense is that a good developer knows that things are never black and white. Stating final conclusions like: "em always and forever" is never a good decision.

1. Is it still necessary to use em's?
That's a choice you make. It's not an axiom of web developing.

2. Is it necessary to use em for Accessibility?
No. It's fools gold. em doesn't grant accessibility by it self.
You want to provide accessibility through generally available means. Do it your self. See what browsers have to offer.

Make a good design, em or px, regardless.
Put options on your page for the user to set the font size, in a clear and accessible language: larger, smaller. Like the example I gave about Dolphin text overrides: tiny, small, normal, large, huge.

Put options for line height also, a huge font crammed all in is not better. It'll be good if browsers would offer this too.

Acknowledge that browsers are doing more good things: zooming. Maybe you're less aware, but people with special needs will appreciate those more, understand them better, access them easier without special help.

That's what a normal dialog looks like.

[deathshadow60]

Here's my test. The screenshots are taken with my iPhone, using Safari, where no special settings where made and no zoom level was applied whatsoever.

Hmmm... not at all consistent with the emulator that come's with Apple's xCode... which is officially the test; is that a iOS 4/newer? I've heard that they mangle sizes because of the whole "report 800 wide as max-width and 480 as device width" thing... since the display is actually bigger than the first gen 320x480, but they 'pretend' it's not higher resoluton... Unfortunately don't have (and cant afford) one to test on.

Pretty much the laugh that the browser in it is entirely designed to IGNORE what media queries are telling it to do... and fixing it screws over droid, opera mini, opera mobile...

Time for me to add that stupid "viewport" meta thing to tell iOS I'm actually telling it how to display it? How's that go again, something like:

<meta
  name="viewport"
  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"
/>

Because you can't possible go and use a media query, then expect the browser to actually obey sizes you set... brilliant there Apple.

-- edit -- added that... did that make iPhone on iOS4/newer actually display what the CSS is telling it to, or is it still auto-resizing it using the 'force a desktop layout to work' approach? (or did it force it back to the deskop layout since it would then be reporting actual device-width as min/max-width?)

Oh yeah, such an improvement these media queries are on Apple products.

[itmitică]

Unfortunately don't have (and cant afford) one to test on.

I got mine off of craigslist, because this reason alone: testing. A good value for 80$. But I'm using it as a phone too. I'm seeing how people appreciate iOS. It's pretty much built with the user in mind.


Anyway, you've done a good job. Here's how it looks like now:

http://i1054.photobucket.com/albums/...vs-jason-3.png

[itmitică]

It improved your loading time as well:
http://www.blaze.io/mobile/result/?t...3885f435617cba

Average Load Time 	Average Pagesize
3.54s 	                42.55kb

Welcome to "faster than 80% of tested websites" for iPhones.

It seems that the issue it had with the boxSir.css is now gone. Probably because of the meta viewport you added, it's processing that faster?

edit: It still has that noticeable lag when scrolling on the tablet. On Firefox Mobile, Dolphin, Android Browser. Your elastic layout is too demanding, perhaps. Also, going from landscape to portrait and viceversa, I believe that the same elastic layout makes for a few seconds delay until fully rendered, with visible jitters. The tablet is pretty new, model this winter, bought this spring.

(On iOS scrolling works just fine).

One reason more I chose a simpler elastic responsive design layout.