Category Archives: design

Solving iPhone rendering issues: stopping scaling, restoring inertial scrolling

There’s nothing like wasting a Sunday morning searching the Internet for solutions to web page rendering issues on mobile devices. ūüôĀ

Stopping an iPhone from resizing web page text

Nothing is more frustrating as a designer/developer to see a neatly laid out web page resize its font size when you don’t expect it. I thought this line of HTML would have solved the problem:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

No. Apparently you have to also add this CSS in:

body { -webkit-text-size-adjust: 100%; }

Adding inertial scrolling back to overflow:auto or overflow:scroll DIVs

It is a weird feeling to have a graceful UI somehow feel “stuck” when inertial scrolling gets disabled. Apparently setting the CSS property overflow to¬†auto, scroll, scroll-x,¬†or¬†scroll-y will turn it off. This is how you put it back:

-webkit-overflow-scrolling: touch;

Ugh.

 

Adventures in @font-face

TIL how to work with the CSS @font-face rule. The short of it is this syntax inside your CSS file:

@font-face {
  font-family: <a-remote-font-name>;
  font-weight: <weight>;
  font-style: <style>;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

For example, trying to get the Magallanes font to work on this site seemed easy at first because I just copied the CSS that MyFonts.com had given me. But the problem is that the font-family attribute was the only thing that was set. As a result by setting the main font to “Magallanes” it wasn’t understanding what to do with the bold and italicized fonts.

The solution was to set:

@font-face {
  font-family: "Magallanes";
  font-weight: normal;
  font-style: normal;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

Then the italics one was:

@font-face {
  font-family: "Magallanes";
  font-weight: normal;
  font-style: italic;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

Then the bold-italic:

@font-face {
  font-family: "Magallanes";
  font-weight: bold;
  font-style: italic;
  src: <source 1> format("<format 1>");
  src: <source 2> format("<format 2>");
  ...
}

And so on.

Another problem of not including the font-weight or font-style was Mobile Safari (iOS/iPhone/iPad) was not using the fonts at all.

Turning off the responsive CSS

There are some websites that work brilliantly with a responsive layout and some that don’t. I’ve been playing with this layout for a few weeks now and the responsive mode just mashes everything up. I’ve decided that for the time being to turn it off until I can get it all in working order rather than have the text walk all over itself—it just looks worse that way.

The thing about responsive design in my opinion is that it is yet another dimension of complexity to understand. It’s probably the case that a few gentle tweaks would suddenly make the whole layout work out, but it requires time I don’t have at the moment.

Web pages with small fonts, 12px/0.9em at the very least please

So an interesting thing happened the other day. I was reading a popular site that deals with creating web content and I caught myself doing one of the tell-tale things that users do when the fonts on a web page are too small: they lean inward. Now, I know that I’m not exactly in my early 20s anymore and it is true that I do wear glasses almost all of the time now, but my eyesight really isn’t that bad. And I’ve read this site off and on for a while and I don’t remember having to have this lean-in problem before. Then I remembered one thing: I have a new laptop.

Yes, if you’ve read previous posts you know how I used to rave about my old 2008-edition MacBook Air. So light, so powerful, so fast, yada yada. And then I switched up to a 2010 edition at the end of last year. Bigger SSD, higher resolution, dual USB ports, yada yad—wait. Higher resolution? Yes, in fact I now have a 13″ display that has almost 128 dots per inch compared to the old 113 dots per inch. So how much of a difference does that make? Apparently a lot.

For comparison, let me put up this image:

Previously I had a 1280px-wide display that has about 11.26″ horizontal length. Now I have a 1440px display. That means those web sites with tiny fonts just got a heckuva lot tinier. I mean, you would think that 12% smaller might not be a great big deal, but I really do think it does.

I went around the web this morning looking at other examples of font sizing. It seems the smallest comfortable font size for me now is 12px high. The website which has the tiny fonts above works out to about 11px high. But if they just increased it a smidge …

We’re clearly into a time where LCD display technology has gotten so good that we now have displays *AT* (not “approaching”) print resolution. Case in point: Apple’s Retina Display technology gives us 300 ppi. A couple of years ago I had been looking at a Sony ultraportable that was at 220 ppi. We’ve reached the point where small definitely means small.

I don’t exactly know what the solution is here. We could ask browser manufacturers to set their default browser font sizes at a certain ppi. There are some web pages that depend on fonts being only a certain height. Maybe the new tablet era of computing with it’s pinch-zoom mitigates all of this because users just expand the text content until it looks comfortable.

In the meanwhile I’m recommending that anyone making web UIs not use a font smaller than 12px high or 0.90em high.