I have a problem with information overload. My brain shuts down after seeing too much data coming at me in some kind of disorganized way. Sometimes I don’t mind it, like when I’m waiting for lunch to be prepared. Flicking through Twitter feels somewhat like peoplewatching.

It’s a mindless activity. But when I really want to read the newsfeeds and personal commentary pumped into Twitter I find it feels more like WHARRGARBL.

So I started using the Facebook Like a little bit more in recent times to follow artists, organization, and other things I’m interested in. Facebook does a much better job of controlling the spam in my stream so I get a general smattering of everything. As a result it feels more like I can see the mass of activity in some sort of organized manner instead of being overwhelmed.

I had just finished reading an article about Firefox and I got all nostalgic. I seem to remember when Firefox was awesome. I remember when it wasn’t some scary memory-munching lummox. It was my companion that had the latest in HTML and CSS, had the amazing Firebug plugin, and had decent multiple profile support.

These days I dread using it. Some web pages don’t load, it constantly crashes, and Webkit’s web inspectors are starting to become pretty decent. The are really only 3 reasons I still use it: 1) multiple profile management separates sets of cookies, 2) I like Firebug’s JavaScript inspector better, and 3) I have been using an awesome plugin to take a screen shot of the entire web page.

Which browser do I use the most then? Safari. Chrome is nice but since I’m a pretty heavy user of the Apple ecosystem (e.g. synced bookmarks and Reading List) Safari does exactly what I want and Chrome doesn’t add any noticeable benefit. I don’t see the point in using Opera or RockMelt. And of course I rarely fire up the Windows virtual machines to use IE 9.

What I want from my browser is: 1) smallest memory footprint (or at least perceptively small resource usage), 2) no-hassle bookmarks syncing, 3) the latest HTML, CSS, and Javascript support, 4) a decent debugger, and 5) fast, responsive UI that gets out of my way. It’s merely the window to my web world. What I don’t care or like includes: 1) themes, 2) a small URL bar (because I want to know exactly what I’m looking at), 3) fullscreen (since there’s so little difference between that and just maximizing the window), 4) hidden bookmarks, and 5) corners I can’t grab to resize the window.

I probably ought to do up some comps of my dream browser and why it would work better.

I was curious about all this buzz about Path but I didn’t want to sign up for another social network. After all, Facebook pretty much has everything about me up on their site since I use it almost every day. I tried playing with Path but it really wanted me to create a profile. So what’s a girl to do? Make a test account and just try it out. Little did I know what had been going on…

I usually make test accounts with some bogus Gmail email. So I thought I was safe. I was so very wrong. I repeated the same steps and came up with this:

ZOMG. Seriously?! Wow. That is my entire address book and that was just after getting past the account creation screen. I’m going off now to write an angry letter to them.

I’m a computer engineer so I know how hard it’s going to be to delete those backups. And they’ll want the email I used as the test too probably. Uh. I don’t remember which ones. So now somewhere lost in all their servers is my entire cache of personal data and there’s probably no way to get it back. I’m sure other people have used their address books to store passwords and other very sensitive data.

This is truly the cost of living in the current world of technology. I’m sure Path isn’t the only one that has siphoned off my address book. It’s one thing when you choose to let Apple sync your Address Book via the cloud, but this is quite horrible because I did not allow Path to transmit and store this information.

I’ve had this one app on my iPhone installed for quite a while but I never really got to using it. Why? Because its account creation process is quite frankly onerous. I still have no idea what it really is supposed to do other than some life streaming stuff, and up front it asks me for a lot of personal information without explaining why.

This evening I sat down to actually count the number of screens that were between me and successfully completing my first actual post. I decided to use a fictitious name and email address. Let’s begin the fun!

1. Intro screen.

OK, not too bad. Good examples. OK, let me in! I’ll press Continue.

2. Choice for newbies.

I guess I’m making a new path. I can’t sign in because I’ve never signed in.

3. Type my name. Where?

Seriously, where? There are no keyboards that have popped up. There is no obvious text box. The camera button looks clickable but I’m being asked to enter my name. I’ll tap on the name.

4. Name prompts.

OK, I’ll enter my fictitious first and last name. I was thinking of Mary Poppins, but nah.

5. Tapping “Choose…”

After entering my name the screen just sat there. So I tapped “Choose…”. I don’t know what a cover is, but I’ll guess it’s my profile photo.

6. I take a picture.

I was at dinner. So a glass of water it is.

7. I don’t have a profile picture yet.

Oh. The “cover” was my background image. OK, so what do I do next? I’ll tap the Next button at the top right. I almost missed that by the way.

8. Warning! (Error message count: 1)

I’ve made my first mistake? Oh, fine, I’ll take a picture.

9. Choose picture-taking method again.

I’ll take a picture, again.

10. Take a picture.

Another water glass.

11. Still waiting for a Next.

Back to where I was. OK, let’s try hitting Next again.

12. Personal info.

So I have to enter a lot of personal info. I see a bunch of optional stuff, so I won’t enter that stuff.

13. Email required.

I probably guessed this error, so I’m not going to count it as an error. I’m in the process of creating an account it seems so email address, sure.

14. Basic info entered.

OK, email and password in there. Let’s tap Next.

15. Basic info entered. (Error message count: 2)

Yikes, I have to say what my gender is? Seriously, why. Marketing purposes?

16. Gender selected.

Fine, I’ll do it. It’s a throwaway account anyways. Poor person at Gmail.

16 1/2. Waiting…

… tick tock …

17. We’re in! Now what?

Yay! We’re all registered. Now what? There are no instructions on screen as to what I should do next. (This might be a bug.) I want to write my first post. Let me start tapping on stuff.

18. Setting a smiley.

I can do this. Neato.

18 1/2. Still confused.

I’ve made a smiley comment, but still no indication what to do next.

18 3/4. Left a comment.

I tapped around and apparently found a way to leave a note.

18 7/8. Still stuck. (App bugs: 1)

Still no indication what to do. I’m thinking I’ve really run into a bug.

19. Killed the app from the main iPhone menu.

I know about the double-tap to bring up the App Switcher and killing the app process trick. So I kill it. Then I relaunch the app.

20. Restarted the app.

Now I get a dialog box. I think I did hit a bug.

21. On the right path!

I think I’m now back on the right path (pun intended) to making my first post. I see all those little icons and they look tappable, so I’ll tap the photo one.

22. Camera app, but who is Diana?

Most of the camera controls look familiar, but who is that Diana in the bottom right. My name is Elmer Fudd.

23. Oh, it’s a filter.

No explanation that it’s photo filters, but I’ve used Instagram enough to know what each of those thumbnails does. Perhaps if Path is targeting the app-savvy users then it’s obvious these are photo filters. I get it.

24. Am I sure?

Yea yea, yes. I’ll tap the checkmark. Which is kinda weird because this is the first time I’ve really hit a symbol button that isn’t outlined like a button.

25. More info?

Wow, I guess I still have to enter more info. I’m going to guess I don’t have to enter something, but I will. There’s a ton of other options below. I did tap around to see what’s going on.

26. VICTORY!!!

Finally! FINALLY! 26 steps to post my first post. At least one bug was found, several error messages popped up, and I was assaulted with a lot of options, not obvious which ones were optional! I know making apps is hard but this workflow just feels so heavy it didn’t fill me with ease of use or fun. I felt like I had to do a careful dance to get out the simplest of things.

Bonus round: I can post as (null)

Oh, remember how I had to enter my name in the beginning? I found the menu to change my name. Apparently if you set it to nothing it turns into “(null)”.

If you’re like me you want to use nested directories to organize all of your files, especially when it comes to internationalization (I18N). I just found out about the nifty views trick that uses your current controller and action as the first part of your translation key. For example, let’s say you are looking at a list of all uploads you might be viewing the action:

http://www.yoursite.com/uploads/

Inside the template you probably have:

<h1><%= t('.title') %></h1>

Because of the leading dot Rails will be looking for the key defined as (assuming :en locale):

en:
  uploads:
    index:
      title: Your title

Since you’re going to have a lot of locale files, you might think of placing the English locale file in:

config/locales/views/uploads/index/en.yml

Which is all well and good until you realize the I18N load path doesn’t include subdirectories. A quick fix to application.rb is all it takes though. Add:

config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**/*.{rb,yml}').to_s]

The ** is the magic there.

I used to think that it was Flash’s fault that ads would load slowly. Now I’m beginning to think it’s also all of these ads + social-sharing with their iframe-within-iframe loading that is really the culprit. How bad is it? Let me literally recount the ways:

This is an ad on a site I happened to be looking at today:

Looks innocent, right? I inspected the source code just because I was curious how the Google Plus overlay was working. That’s when I discovered it was an ad inserted by way of an iframe:

But it gets better. That iframe includes another iframe.

What’s that you say? Can we go deeper? Absolutely! That iframe includes yet another iframe:

And since you’re so patient and want to see the Google Plus button code, let me show you the iframe that’s in that iframe!

4 levels deep. Ridiculous. I can understand why each of those frames is there, however it seems to me that this tends to negate the optimization we do around trying to load scripts and content more efficiently.

An interesting read: http://grahamjenkin.com/blog/2011/10/getting-good-design-done-in-an-engineering-driven-company-google-wallet.html

“On Wallet, I rarely talked to an engineering manager without expressing my anxiety/excitement/desire to get the product shipped. ‘Look, I don’t care about blablabla, I just want to get the best product shipped as soon as possible.’ “

Also:

“By prototyping and presenting the user experience vision, and getting engineers excited about the prospect of building such a vision, we create the conditions for our vision to become reality. On the flip side, if a user experience is less than adequate, we can use our story-telling powers to raise anxiety about – and action on – the inadequacies.”

This is a totally informal poll of friends via Facebook, but I did open it up as a general poll as well

I was curious where people use their laptop computers. I figured the might be used in a more relaxed setting, but it turns out many people use laptops as their primary computers and also on their desks. More people have external monitors than I would have guessed—but that might be because they use their laptops at work. (When I’m at work I’m always using an external one. At home I use one about 1/3rd of the time.)

I’m guessing this computer usage isn’t exactly representative of the general population, but maybe it is representative of Facebook users. Most of my friends on Facebook are in some way involved in the tech industry (which includes artsy people or other non-engineering types), which might further skew the numbers.

• 40 (26%): At your desk, but WITH an external monitor
• 36 (24%): At your desk, but no external monitor
• 26 (17%): On your couch, slouched
• 14 (9%): On your couch, sitting upright
• 11 (7%): On your bed, sitting upright

The other answers included some bogus ones.

In my daily browsing I thought this was rather interesting:

http://notaniche.com/creative-fun-ads/694/

I’ve been wondering what’s the best content width for web pages that leads to:

1. a pleasing font size,
2. a little whitespace outside the main content area,
3. easy to design

I have been using 960.gs for quite a while now in its default state of 960 pixels wide with a 940-pixel content area. (That translates to 12 columns at 60px wide with a 20px gutter between them, 10px margin on the outer two columns.) I like this because it feels comfortable and in Photoshop (which I use the most for web design) holding down SHIFT plus a keyboard arrow moves in increments of 10. Also, math is fairly easy to calculate.

960 is so passé

Then, not to long ago, a friend said I should be using 980 because it was more modern and even Facebook was using 980. I remember the argument for 960 being that it gave enough room for the scroll bar, but I guess 980 + 30 = 1010, which is still under the 1024px width that a lot of devices have. And especially now with Macs not having visible scroll bars it seems to figure you could go for almost 1024 wide and be OK, right?

A Real Experiment

I decided to do a little experiment. I used the custom grid system generator to generate 3 stylesheets: 960px wide, 984px, and 1008px. The usable content area in each is 20px less than the width since I kept the gutters the same at 20px. Here are the actual pages:

http://www.seqmedia.com/experiments/page_width/

I looked at the test pages on an iPhone and an iPad, and sampled both portrait mode and landscape modes. In any case the websites were all mostly viewable, though the 1008px width one seemed to cause a little bleeding off the right edge of the screen. I’d actually say that while the 984px version is very readable, I think I still prefer the 960—especially on the tiny iPhone. I’m a fan of whitespace and 960px seems to continue to afford that.

Now, I totally realize that with the iPhone you can use the page hint to control things, but even still I think I’m preferring the 960px grid with the 940px viewable area. It feels comfortable and it still means it’s easy to make comps in Photoshop due to everything being an increment of 10.

Conclusion

So, what’s right? I don’t have a scientific answer, but 960px still does the job. Computer browser resolutions are all over the place. And for smartphones you might as well use some responsive web design techniques because even at 960px the text is too small to read.

Just for fun, I walked around the web and sampled content sizes for desktop/laptop browsers:

• Facebook: 980px
• Twitter: 920px (though the landing page’s master container is 1000px)
• Groupon: 950px
• StackOverflow: 960px
• CNN: 980px
• BBC: 976px
• ESPN: 924px
• Apple: 980px
• Google Chrome Web Store: 1200px (ultrawide mode), 960px (normal mode)
• Rotten Tomatoes: 1010px
• YouTube: 970px
• Mozilla.org: 940px

Update: Nov 15

This morning I put in the meta viewport tag on the three pages and went through the exercise again. Result: the page is displayed with the exact width being 960, 984, or 1008, with no background peeking out and no content being cut off. All text in all three widths was very readable on the iPad—iPhone just needs a different stylesheet.

My conclusion still stands: all three widths seem about equal in terms of legibility, so it is easier to pick the grid system that works best with my design tools.