Web Designers… Let me Zoom!!! Remove “Text-Size-Adjust: none;” AND “maximum-scale:1”

Two bits of nefarious code I’ve come across lately fall directly in the pet peeve category of WHAT ARE YOU THINKING (along with, say, auto-loading audio!):
DON’T (CSS):
{
-webkit-text-size-adjust: none;
}

And, DON’T (html head metatag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

What these piece of code do is stop people from being able to zoom in on website text.

I learned that iPad Safari is by default set to display “none” while desktop browsers are set to “auto.” If you need to even use this attibute at all then,

DO (CSS – set to ‘auto’):
{
-webkit-text-size-adjust: auto;
}

And, DO (html head metatag – remove ‘maximun-scale=1’ attribute, or set it to something like 10):
<meta name="viewport" content="width=device-width, initial-scale=1">

This code seems to fall along the “vanity” of the web design team who is afraid of their layout ‘breaking’ at different levels of zoom and on smaller devices. Get over it. It’s never going to look 100% good on 100% of devices unless you create separate style sheets for each instance. Most clients won’t pay for that. While it may be optimal for portable devices when you use 8 point text, on a 22" screen, most regular people can’t read it. The first thing I counsel people to do is to zoom in using keyboard commands (“Command +”{windows: “Logo Key +” }, but with sites that use the code, it is completely ineffectual.

In these cases, the only workaround I know of (for viewers of websites you did not create) is isolating the CSS code in FireBug and disabling the attribute. It’s a temporary fix, (and one beyond most people’s reach) for sure, but can make an unreadable website accessible to the rest of us!

For you designers, you need to create multiple sets of style sheets for the classes of devices (most often based on screen size), and offer them as options for your website visitors. Also, ALWAYS, ALWAYS offer your visitors the option to choose between mobile and traditional site. Do not force mobile devices to use the mobile site only!!!

OK rant over.

This entry was posted in Development Process, Mac / Internet and tagged . Bookmark the permalink.