Michael's Web Blog

This is my Web Blog, which is a weblog about the web. I talk about XHTML, CSS, scripting, web technologies, and a host of other topics. If you use the options panel, you can visit pages about my writing or programming.

Browsing

December 3rd, 2010

I use Explorer to browse.

No, I’m not talking about the internet. Explorer.exe is the file browser that comes with Windows, and which manages your taskbar and other windows. If you’re a Windows user, you use it every day whenever you open a folder. Mac and Linux have their own file browsers, as do different operating systems on different CPU architectures.

Anyway, I’ve recently noticed that I browse differently than other people do. I open My Computer (or whichever folder on my desktop), then click through the folders leading to my destination. I know the file structure intimately, and can tell you where certain files are. When I get to the files I want (executables, text, web pages, program code, whatever), I execute them, view them, zip them, or open them in a program. Any time I’m working with files, I’ll be in that directory. Any time I want to move or copy files, I’ll have both directories open.

Lately, I’ve been helping students who focus on the programs themselves and use the ‘Open…’ dialogue to open files. It’s a completely different way of thinking that drives me silly, especially when they eventually need to browse through folders. Especially in crappier (i.e. Java-based) programs with a miserly Open dialogue that doesn’t let you copy or move files, or select more than one file,or right-click on files.

It’s just one of those differences that you never notice until you meet it.

Windows 7

November 3rd, 2010

Windows 7 is fantastic! Colourful glass interfaces slide into position with a sublime beauty that you could not match if you were to pin fresh bacon to a kitten!

But then there’s the actual operating system, and how it runs. I’ve been using Windows 7 over the course of the last half-year, and I’ve been keeping notes of everything that has irked me.

I present to you the following list of Windows 7 Problems:

  • Still too many clicks – To view or change anything, such as current wi-fi connection strength, screen brightness, or to re-scan for hardware (I’ve had to do all three regularly), you have to visit the specific window that handles that stuff. Mind you, XP isn’t exactly better.
  • Too slow – Opening the windows, including the multitude of Control Panel windows that now contain every option, takes several seconds.
  • Pointless clutter – There are multiple options in some menus that all lead to the exact same spot. That makes things very confusing. The only purpose they fill is to describe multiple uses of the same window, which is a huge warning that you’re making it way too complicated.
  • Bugs – These might be ironed out, but there are problems with battery settings and screen mix-ups and stuff like that. In other words, the systems still aren’t reliable, even after all these years of development. On the plus side, the Blue Screen of Death seems to be rather rare since Windows XP.
  • Aggressive alphabetization – Nothing in the entire OS is in its default listed order. Instead, even lists such as {1, 2, 5, 10, 20, 54} are sorted to {1, 10, 2, 20, 5, 54}. The taskbar options are disgustingly confusing because they are in alphabetical order instead of in contextual order.
    In folders, it is impossible to move folders or items around. If you don’t like how Windows has arranged the items (shortcuts mixed with your files), you’re out of luck.
  • No ‘up’ button – Technically not as needed, because the Back button usually does the same thing. Both approaches have their own uses when using shortcuts, though. Work-around: Alt+up
  • All Programs in the Start Menu – It is now no longer possible to surf through all your programs. You need to click on each folder, and opening a large folder might push half your items off the screen. The whole process is slow and painful.
  • Context Menu removals – Across the entire OS, right-clicking sometimes does nothing at all. I know there’s been a big push to support touch computing, but that doesn’t mean you have to neuter keyboard- or mouse-based browsing; only that you have to add more touchable links.
  • Wireless Adapter properties – It isn’t possible to view the properties of your wireless adapter (MAC address, for example) unless you’re connected to a network. The options in that area are woefully bare. It seems the whole networking panel was made expressly for one-touch connection to a wireless internet connection, and nothing more, but they make you use that panel as much as possible.
  • Non-Dynamism – Almost everything is a link to some big, confusing, slow-loading panel full of redundant information. It would be sensible to make some of those links (“Adjust Screen Brightness” for example) transform into sliders or option panes when clicked, so that you can easily change things once Windows knows you want to change them.
    It could slowly learn what actions you perform often, so that those can automatically open.
  • Too much “Help” – Half of all the menu options are links to help. Help is nearly useless, because the topics are too confusing for the computer-illiterate, and contain nothing but “Ask your admin,” for the things the admin needs help with. They usually also require a web connection to work.
    A ‘help’ symbol in the corner of these panes should be enough. There’s no need for a high cognitive load.
  • Status Bar neutered – The status bar in the file explorer doesn’t contain anything, now (except a simple count of selected items). It’s been replaced by a far bigger status pane at the bottom which you can’t get rid of or reduce in size, and which still sometimes doesn’t tell me all I want to know.
  • File-size surfing – Across Windows 7, it’s difficult to work on small drives by deleting big items.
    1. The status bar no longer holds the size of all items in the folder. If you want to find that, you have to manually select all files in the folder and view properties.
    2. Properties in the Recycle Bin don’t show multiple items, so it’s impossible to see how much space those are taking up.
    3. The hover tooltip is slow to appear and sometimes just doesn’t work, but I find myself relying on it.
  • Taskbar item right-click menus – Right-clicking on a taskbar item just gives you a generic list where there’s jumplist stuff, pinning options, and ‘close’. Right-clicking on the application option gives you a couple other options, such as pinning, relaunching, or ‘close’. No more options, such as Chrome’s task manager, or Windows Live Mail’s ‘hide when minimized’. Or even ‘move’, which I’d made use of in the past, when working with multiple monitors.

Verdict: Windows is heading in a direction where the most basic of users can use it more easily, but where power users are all but cut out. There are multiple things you could do in Windows XP that have been stripped out of Windows 7, such as bridging connections or configuring a network other than the default MSHOME.

Overall, I can’t blame them: They’re going where the money is, and their customers don’t use the control panel. I’m still raging against it, though, because ugh.

New Twitter

November 1st, 2010

It turns out more is wrong with the new version of Twitter than I can fit into a tweet or two, so I figured I’ll write a post about my difficulties.

First and most importantly, I expect Twitter to be fast. Due to the nature of tweets, I need to be able to load the page, type in my reply, and then send it off, all within about twenty or thirty seconds. I don’t have time to wait for multiple JS files to load and parse, or all these images to make their way to my screen.

The old Twitter was a single page that was served up almost instantly. The JS was small, and would load very shortly after, and I can work as the images load. The new Twitter seems to hang until after the images are loaded.

The interface also wasn’t doing it for me, because it was cluttered and huge. I work with small screens most of the time, and their enlargening of the site’s format made it even more useless for my purposes. An option or two suddenly wasn’t available (even in the menus), and a tweeter’s face will be multiplied down the page a hundredfold if you visit their stream.

All in all, the new Twitter caters to a very specific user base while cutting out others who don’t use it the same way. It’s not flexible or well-thought-out.

Edit Style

October 5th, 2010

I just created a bookmarklet! Try dragging Edit Styles to your bookmark bar.

This only seems to work in Chrome, Safari, and IE9. If anyone can tell me why appending an element to the DOM in Firefox or Opera creates a blank document, I’d love to know.

You can type any sort of CSS in the box. If there was already some CSS in a <style> element in the head, you can edit that.
Try something like the following:

EA Schedule

September 3rd, 2010

Just in case any Red River College students are reading this, I figured I’ll post my schedule here.

My email is similar to the other instructors’.

Accessibility of Dingbat Webfonts

August 17th, 2010

Inspired by Jason Santa Maria’s Tweet:

I love the idea of dingbat webfonts, though I want someone to write an article on the accessibility of using them. http://j.mp/ccD34r

The idea is fairly simple: Draw up some beautiful flat-colour vector icons, wrap the whole set into a font, and then load it as a webfont to display the icons on your page. Simple and clean, right?

There are problems.

In effect, you will be littering your page with a list of ‘j’ and a ‘h m n p’ near the title, with some ‘s u f’ in some other places. What does it mean? It’s completely indecipherable unless you successfully load the font and have the required experience/cognizance to recognize the meaning of the shape. A lot of people just aren’t good with icons.

There are some standard solutions. Wrap everything up with plain-text mark-up, then add the symbol and negative-indent the semantic text away.
In browsers that don’t support web-fonts, and in screen-readers that read out text on the screen (which would be all of them), the code would still contain a bunch of odd letters or numbers everywhere.

Someone mentioned a page from Opentype in his post, where they make a characterset which has most of the letters blank, with the ‘W’ mapping to their logo.

So how’s this:
Make an icon set with most everything blank, and then put twenty-six icons in the capital spaces. Put the shopping cart in ‘C’, because ‘cart’ starts with ‘C’. In your shopping cart example, it could say “Purchase, go to shopping Cart” but the “, go to shopping art” would be blank, the “C” would be the shopping cart symbol, and you’d see “Purchase []” where [] is the symbol.

You’d be limited to twenty-six symbols, and each must be applied to the letter you’ll use to start its name (unless you don’t mind the text “caRt” or such).

Email Design

August 13th, 2010

Everyone knows how important email is. You probably check yours several times a day for new updates.

Let’s take a look at something I just got:

*Please do not reply to this message*
————————————————————
You asked that we send you a summary of Meetup message board
activity. The following is a list of discussions with new
messages posted since July 14, 2010 12:17 PM.
————————————————————

============================================================
SECRET HANDSHAKE – THE WINNIPEG CREATIVE SOCIETY
Forum: The Winnipeg Creative Freelance Society Discussion Forum
============================================================

90 second quickie at portage and main
http://www.meetup.com/secrethandshake/boards/view/viewthread?thread=9571812
Latest message by Paul Clerkin on August 13, 2010 at 11:01 AM


Add info@meetup.com to your address book to receive all Meetup
emails

To manage your email settings, go to:
http://www.meetup.com/account/comm/
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Meetup HQ in NYC is hiring!
http://www.meetup.com/jobs/

If you’re in Winnipeg, I encourage you to come to our monthly meetup. It’s a great little gathering of local creative/tech people.

Now, I signed up for email notifications because I’m just not going to check the site (which I never visit) every time I want to know if something new has been posted. In fact, the less I have to visit the site, the better.

When I sign up for email alerts on a forum or message board, I want to see something like this:

New discussion messages since July 14:

=================================
SECRET HANDSHAKE – THE WINNIPEG CREATIVE SOCIETY
Forum: The Winnipeg Creative Freelance Society Discussion Forum

90 second quickie at portage and main
Paul Clerkin on August 13, 2010 at 11:01 AM:
The Winnipeg Film Group is proud to announce an open call to our second annual 90 SECOND QUICKIE film contest. The 90 Second Quickie was created in 2009 by the Winnipeg Film Group to encourage the creation of new, micro films. Blown away by the shorts in our first year we are doing it again – this time bigger, brighter and bolder!

To visit the thread, visit http://www.meetup.com/secrethandshake/boards/view/viewthread?thread=9571812

To manage your email settings, go to:
http://www.meetup.com/account/comm/
Meetup, PO Box 4668 #37895 New York, New York 10163-4668

Even that could be shuffled around a bit, but there are some good practices:

  • Keep cruft to a minimum
  • Display the main information as soon as possible
  • Give links to things
  • Also provide fall-backs for plain-text email clients
  • Give them (at least some of) the content from the site, so they don’t have to click and load additional pages

Net (and a bit about Neutrality)

August 11th, 2010

The latest internet storm is the hubbub about Google’s and Verizon’s Joint Policy Proposal for an Open Internet. Essentially, wired networks aren’t allowed to prioritize traffic, wireless is interesting and unique and should be decided later, and the FCC should watch over things.

There are little points here and there. I encourage you to spend an hour reading it over, word for word, to discover for yourself what it means, because most of the internet has it wrong (quite like the iPhone 4 antenna issue, which has turned into ‘antennagate’, which is better described as ‘antennapaloosa’).
So what does that Google document mean? It’s a lot of high-level language with broad generalization and sets a framework for future law-makers.
To clarify, read Brian Fling’s Google, Verizon and an “Open Internet” from a Mobile perspective. He tells us all how wireless networks are different from wired networks (and believe me, they are).

So!
When you get right down to it, what can we really do?

  • Cap bandwidth
  • Charge per-gigabyte
  • Create a tiered system of separate internets
  • Charge more all round
  • Destroy Hollywood
  • Create a foundation for peer-to-peer networking
  • Others

You can’t cap the bandwidth. Throttling might be fine, but most people get so little, anyway, and they can still download hundreds of gigabytes a month. Frankly, fast bandwidth is necessary, or you’ll spend hours a day waiting for your pages and things to load.

I’d be all for charging per-gigabyte, except that providers invariably would charge too much. I would love to believe they could do some research to find out how much people need, and then create a simple stepping chart of prices, but they are either incredibly stupid or are greedy liars—they say you can visit so many webpages and get so many emails with whatever bandwidth, when really you can’t.
See the Rogers Data Calculator. It looks like they’ve made some improvements, lately, but they still say a webpage is 289 KB. I wish that were true, but it seems a lot of pages I visit are several megabytes in size. (Still, it seems fair, right now.)
A good per-gigabyte system should start off small, because basic internet access is very important. If people really want to torrent a bunch of videos, games, and music, they can pay for all that. Imagine if you could get a basic internet connection for $5 or $10 per month.

Obviously, creating a tiered system wouldn’t work, because everyone would have to pay a premium just to get basic bandwidth (although you already do). Worse, this would extend into the internet itself, and you’d subscribe to certain sites the way you subscribe to cable channels. Imagine only being allowed to go to the most famous and corporate sites.

Charging more all around won’t work, because they’re already charging us exorbitant amounts for relatively pitiful network connections.

Utterly destroying Hollywood and hunting down any famous musicians would reduce the amount of traffic downloading torrents. This obviously isn’t going to happen. (Though it would make a great movie!)

Most of the network traffic is duplicates: mailing lists, illegally downloaded movies, millions of upgraded FireFox installers, and the most popular YouTube videos.
If we could lay some protocols, programs, and infrastructure to allow local copies to be shared between local machines without hampering the network, it could really reduce the amount of bandwidth being used for large files.
CDNs already take care of the top-level branches, where the internet backbones would otherwise need to duplicate content, but that data still needs to be downloaded separately each time someone in that region requests the file. We need a way for this content to be managed AFTER the end-of-line provider downloads it.
It would basically be a Fractal Internet. The big pipes shuttle to the smaller pipes, which will share with the even smaller pipes. I don’t know if any research has been put into this, yet.

Drop-Caps

August 6th, 2010

WHAT DOES IT MEAN???

This is a Daily Drop Cap from Jessica Hische. I encourage you to take a look at her typographical wonders.

Pixels Per Inch

August 3rd, 2010

When dealing with screens, the density of the dots that make up your picture is referred to as ‘pixels per inch’. This measures how many pixels, lain end to end, fit along a one-inch line. A screen 10.24 inches wide and 6 inches tall, at 100 pixels per inch, would contain 600 rows of 1024 pixels each. (The diagonal measurement of such a screen would be 11.86 inches, by the way.)

Here’s an example:
Because it’s hard to show high-resolution samples on low-resolution screens, I’ll show you a low-resolution example. This illustrates the difference between two screens; but the size depends on your own screen’s density, so the numbers aren’t absolute.

Take Monitor #1 and Monitor #2. Both are about 11.8 inches; but Monitor #1 has a resolution of 1024×600 pixels (1186px diagonal) while Monitor #2 has a resolution of 341×200 pixels (395px diagonal).
Pixels per Inch. 1186 pixels per 11.8 inches is about 100 pixels per inch. 395 pixels per 11.8 inches is about 33.4 pixels per inch.

Having few pixels per inch means your computer has very little to work with, and the images will be blocky. Having a large number of pixels to work with means your computer can display hairline textures, possibly at the limits of human perception.

Monitor #2 has only 33 pixels per inch, or a little over 1000 pixels in an entire square inch. Monitor #1, meanwhile, has 100 pixels per inch, which is 10000 per square inch. Nine times as much detail!

If you want to see how a hypothetical screenshot would look, see Monitor #1 and Monitor #2.

Some other numbers: Most monitors today are around 100 ppi. Laptop screens might be a bit more high-detail, at 120 ppi or so. At 280 ppi, you’re nearing the edge of human sight. Some people can see more, and others less. The iPhone 4’s screen is about 320 ppi.

So, now that you’ve seen the difference of high vs. low, you’re probably wondering what it all means.
When you look at the example above, you see how the text went from nearly-illegible to crisp and neat. You can probably still see pixels, though, if you looked hard at those letters. In the near future, monitors and screens will all be nearing 300ppi, and those letters will look beautiful. We’ll also have more design options than ‘no line’, ‘thin line’, and ‘thick line’.

Here’s the thing: There is little support for high-density devices.
Windows, the most popular operating system, has only the barest functionality, and is only truly usable on screens with height of at least 720 pixels per hundred ppi (720 for 100 ppi; 1440 for 200 ppi). (Rough numbers, of course.)
Most web-pages automatically set your text to something like 12 or 16 pixels, which is too small to read on a 300ppi screen (think of reading 5px font on your current screen). They also usually set elements of the page to specific pixel widths, which means the proportions will be all wrong and the text will overflow from their boxes.

We need to call on web designers to design for the multitude of screens we have, and to put the power into the browser’s hands. Front-end developers need to work with designers to make their layouts flexible.