Why can’t an OS be more like a browser?

Mac, Windows, Linux and all the programs that run on you, why can’t you be more like a browser?

You see, monitors are just going to get better and better, and squeeze more pixels in. But our eyes are just going to get older and older, squeezing fewer, well, whatever the eye equivalent of pixels are. But computer programs are mostly going to continue to be designed by folks with sharp vision.

This month’s MacWorld came in the mail and there was this article Mac 911 that was talking about something that was bugging me, Operating System (OS) and software designers’ love of tiny type as exacerbated by high-res monitors. And just a few pages after that was another article, Apple’s Other Operating System, about the need for Apple to keep innovating the MacOS, and not ignore it in favor of the iPhone and iPad. And then there’s Apple’s announcement of the high-res iPhone 4 display, Retina.

So here’s the opportunity for computer operating system designers and program designers to innovate by…copying the browser. Specifically, size and position everything using Cascading Style Sheets (CSS) and Scalable Vector Graphics (SVG), and allow for user style sheets.

Look, here’s some figures. My 22″ monitor is 1680 pixels wide by 1050 pixels high. It works out to 89 pixels per inch (1680 pixels divided by 18-13/16″). A 32 pixel by 32 pixel image will be about a third of an inch high. 9-point type will be a tenth of an inch high.

An iPhone 4 Retina display is 326 pixels per inch; a 32 pixel by 32 pixel image will be one-tenth of an inch high. 9-point type will be one-fortieth of an inch high.

You see where this is going? The pixel as a measurement is dead. Once they start making monitors at 326 pixels per inch, everything measured in pixels is going to be a lot tinier.

And a lot of application fonts are already too small for me to read comfortably.

So this gets us back to CSS and SVG.

1. OS and application designers design the user interface (UI) using CSS.

2. Use relative measurements, not absolute positions, and design for liquid/flexible layout, not fixed window size. Create graphics using SVG.

3. Allow every interface, including dialog boxes, to add scroll bars — preferably one scroll bar, the vertical one — if the working space is larger than the viewport.

4. Allow the end user to override the position, size and color of every element using a personal style sheet.

5. Allow the end user to set a minimum font size and graphic size for all UI elements.

6. Rewrap the UI, including dialog boxes, so the end-user only has to scroll vertically. Horizontal scrolling is annoying.

7. Allow the end user to override border widths in order to make drag edges wider. This will help folks with motor impairments, as well as people with big fingers and a touch pad or touch screen.

That way, the designers can design for their eyes/hands/screen/input method/preferred working habits, the users can redesign for their eyes/hands/screen/input method/preferred working habits and everyone can be happy. Open-source-minded individuals can share their style sheets with others.

Firefox already does the UI-in-CSS thing, so it’s not as if I’m suggesting anything radical. It’s time for all other applications and OSes to get on board.

I’ll note the high-res monitor advice in MacWorld advocates getting computer glasses. I have that. But magnification introduces a certain amount of distortion. That’s not nice when working with graphics.

And why not use the computer’s zoom feature? I do that too when I have to. But zooming makes for jaggedy text.

And both of the above have the annoying feature that they not only enlarge things that are too small, they also enlarge things that were large enough to begin with, making them too big. It would be great to let the end-user set both a minimum font size and a maximum font size.

And zooming pushes things off the screen in multiple directions. I’d rather everything reflow as needed, which requires some OS and application intellegence. Like a browser does when you resize a window of a site created with a liquid or flexible layout.

There’s a lot of baby boomers out here. Let’s use the power of the computer to let folks customize UIs to their needs.

It’s time to make applications and OSes more like Firefox.