RKNet Blog... Thing

Day one was fraught with challenges, up to and including having trouble finding the venue. It took a lot of wandering around, a phone call, and I think two concierge desk stops to finally figure out that the Copley Plaza Marriott was in fact through the Copley Plaza Westin and the attached mall. That said, on with the notes.

Session 1: Understanding Web Design - Jeffrey Zeldman

• Missed this session entirely. :(

Session 2: Lessons of CSS Frameworks - Eric Meyer

• Missed over half of this session. :( I blame Mass traffic.
• Hits on server vs. File size. The more hits to the server, the slower the load times. File size isn’t nearly as much of an issue.
• IE(6) does not cache 2nd tier stylesheets. (stylesheets linked from within other stylesheets)
• IE6 wants nothing to do with your fancy link styling. Don’t rely on it to convey critical information if you think you’ll have a significant amount of IE6 visitors. (Know your audience!)
• Mobile phones probably can’t handle your stylesheet (iPhone notably excepted from this guideline).
• create a grid or layout background to use for debugging.
• Create a debugging stylesheet that replaces more subtle elements with large, bold colors to see exactly how your major elements line up.
• Set default colors in the body of the document to override any CSS weirdness or absence.
• Try to avoid measurements in pixels. Percentage or EM will provide better usability and cross-browser support.
• Create a framework file. This is a totally empty stylesheet, containing only elements, classes and ids, as well as comments explaining the general purpose of each. This provides the framework for others to understand your work, and gives you a blank to start from in future work.
• Maintain clean, logical naming conventions. Don’t use .RedBigText use .Header or .CallToAction. This way if you have to make this class perform a function other than red, big text you can make those changes while maintaining your markup.

Session 3: Good Design Ain’t Easy - Jason Santa Maria (turned 30! Happy Birthday!)

• Look to be different. Be familiar with popular box models & learn what you can do to separate yourself from them.
• Print != the web. (!= is does not equal for those who aren’t familiar) Therefore, instead of innovating based on standards of print, we must look to usability standards and concepts to build a better (mousetrap) website.
• Design reinforces your message.
• Design fills in where content leaves off to create impressions.
• Referenced the storytelling power of a mostly visual chart of Napoleon’s progress.
• Pacing must be capable of including all pertinent info. Editor’s Note: I don’t remember what I meant by this note.
• Design must account for flexibility, changes, functions
• Design must be able to demonstrate depth, or give the visitor confidence that they can navigate comfortably.
• Design for your audience, not just to fit your box model.
• Take advantage of the medium, learn to apply the tech to its fullest.
• Plan before you do, and make stylesheets accordingly flexible
• Level of design intricacy hinges largely on the type of content it is meant to showcase and support.
• “Design can’t not communicate.” - David Carson, Helvetica
• The Golden Rule or other ratio is a handy reference for balancing a box model.
• Links:
• A Brief Message
• Fray
• Principles of Beautiful Web Design
• No One Belongs Here More Than You
• We Tell Stories
• “You can have it in any color you want, as long as it’s black.” - Henry Ford regarding the Model T
• Art direction should apply to the web also.
• Evaluate the saclability of unique content art direction (i.e. serious differences between pages, breaking from one standard template between pages).
• Marry your design to your code.

Session 4: Web Application Hierarchy - Luke Wroblewski

• You have approximately 1.6 seconds to make an impression on a first time visitor.
• References Steve Krug’s excellent book Don’t Make Me Think in regards to illustrating how we use the web. We don’t read. We track around the web looking for the next thing to get us to our intended informational goal.
• Great presentation on the web is comprised of a balance between information and emotion, or Visual Organization and Personality.
• Organize things in ways people can relate to. For example, organizing information in a customer lookup system like a rolodex.
• What’s front and center is critical
• Presentation should follow desired function
• Downplay non-critical information
• Create context by applying contrast, placement and seperation
• Consider the color scheme. Contrasting colors attract attention.
• Make uniquely important items distinct from the remainder of the page.
• Focus on your use of labels, whitespace, and the scanability of your page.
• Proximity of items, similarity of items, and pattern of items dictate how noticable they are.
• The more differences between neighboring items, the higher the contrast and the more likely a visitor is to focus on it.
• Orchestrate the distribution of visual weight (what’s most noticable to what’s least noticable) to influence user experience.
• Avoid too many “look at me!” items as it creates confusion.
• Avoid too few “look at me!” items as it leads to disinterest
• Information should not be distributed via firehose
• Be aware of how people access and use your site. Or how it is intended to be used at least. These factors inform how the hierarchy of information should be structured.
• Consider how people find you and what you want them to do when they get there.
• People come to your site for some kind of content. Don’t let the overhead (structural elements of your website, other navigation, etc) overwhelm that content. Give the people what they want.
• Visually prioritize the actions you want or need people to take
• Strive for a clear, logical flow of information using visual cues and standardization of content. (Hint: Centering text is very unhelpful when trying to achieve this logical flow.
• Consider your overall signal to noise ratio when displaying lots of information. Too much contrast and the data gets overwhelmed. Too little and the data itself is overwhelming.
• Luke’s site: Lukew.com

And then it was lunchtime! Will talk more about that when I get around to my travel log post. I’ll have the rest of day one in a seperate post, so keep your eyes open, and if you aren’t already subscribed to the RSS feed, by all means hit the GIANT PURPLE BOX at the top of the site to do so. :)

As an Opera desktop edition user, I am part of a browsing minority.

I started using Opera years ago, back when they still had banner ads to support their desktop offering. Some friends recommended it to me as a browsing alternative, if I recall correctly. I was getting sick of IE, and all the Netscape users I knew were either holier-than-thou about their quirky browser or said it wasn’t really all that great. Don’t recall anybody mentioning Firefox at that time. I tried Opera out, but I didn’t quite “get” it back then, so I stopped using it. IE was just going to have to be good enough, and I didn’t feel like configuring something just to surf the web.

Time went by and I got sick of Internet Explorer and its unwelcome antics, so I went and got Opera again, thinking it was worth another try. It had improved massively, and as I figured out the features I got really comfortable using it. Everything worked, everything displayed right, I had tabs, I had mail, I had RSS, I had IRC. Life was good.

Well, the tech being used on the web has accelerated rather quickly, particularly where java, flash, and creative CSS are concerned. As these cutting and/or bleeding edge techniques were adopted, I started having trouble. Flickr was basically unusable. A few others had some really agitating quirks, too. My enjoyable IE alternative was becoming a liability.

Also, Pet Peeve time: If you run a website, do not tell me I am using the wrong browser, do not refuse me your content because you assume my browser will not display it. That is the absolute fastest way to send a visitor packing. That would be like going to the grocery store and getting yelled at by the produce guy for bringing your own shopping bags. Usability testing means making sure YOUR site works. Complicated sites may not work in all browsers. If your functionality demands things be done a certain way, and it won’t work in all browsers, then do the testing and find a non-insulting way to inform your clients of how to get the most out of your site. It’s very bad business to decide who gets to view your site and how. I’d rather surf a site that displays a little funky in Opera then show up and be told that I’m not allowed to view the site until I change browsers.

As new releases of Opera come out, the challenges do lessen. Yet with the latest update to WordPress, I am faced with a rather irritating challenge. The “Add Media” tool is now a (very slow) AJAX-type pop up window, rather than the on page form used in previous versions. It absolutely will not work in the most current version of Opera. I have to use Opera 9.5b (aka Kestrel) or Firefox to make it work. (Haven’t bothered testing in IE 6, and IE 7 is out of the question because I won’t upgrade.) I have yet to find a simplified plugin or fix for this issue, so for the time being if I wish to use images or embed any other kind of files, I’ll just have to use another browser. I prefer not to, it’s just a simple matter of convenience.

So I feel inclined to ask, what are your browsing habits? Do you use more than one browser on a regular basis? (Note: Usability testing in multiple browsers doesn’t necessarily count, unless you do it all day.) Do you run across sites that tell you that you’re doing it wrong, and don’t come back until you get one of the browsers we bothered to test? Do you ever run across sites that just plain don’t work?

Possibly most importantly, What is the responsibility split between content developers and browser developers for making sure that web technologies work for internet users?

I personally feel like it’s 70/30. The browser developers have a responsibility to build a platform which will support the latest approved standards. The content developers have a responsibility to utilize those standards to develop what gets displayed in that browser. It stands to reason that if something is coded correctly, it will display correctly. (I realize that’s not always the case, but generally, it is true.) If someone wants to employ bleeding edge code, hacks for cross-browser compatibility, or just generally be sloppy, they shouldn’t expect people to conform to the browser in which it happens to work best. At this time I know this site needs many improvements in this regard, something which irks me every time I go to post, because I know what I should be doing is a code audit. (Incidentally, I am still seeking willing contributors, if you’d like to help me keep the good times rolling while I take care of such matters.)

Weigh in, web denizens! Your voices shape the tomorrow of our future, or the future of our tomorrow, or the flatulence of our tomatoes or something like that!

• @bloggersblog hear hear, viva la literature! #
• Gah. I wake up to an internet fight over twitter. that’s like waking up & walking into a bar argument #
• pro baseball? overpaid children. for most people, the local bar owner is more personally important. #
• @chrisgarrett huh. we were just talking about ALICE yesterday. I heard she was a bitch. looks like it fits your theory #
• @chrisgarrett it goes back to at least the 19th http://tinyurl.com/3b2s96 #
• When I read about the internet being an instrument for social destruction I think "good, there’s a lot of cleaning up to do" #
• @chrisgarrett omg, no wonder you’re so up in arms, these strumpette people can kiss my ass. paranoids. #
• Riddle me this: how can you espouse your negative opinions about the internet on the internet, and expect any respect? #
• I’m not so sure that a luddite, pro-expert, pro-professional should be arguing on twitter. it screams hypocrite #
• @chrisgarrett you have to be published on dead trees or harass someone who’s been on tv to be pro, duh #

Editor’s note: man I was a twitter whore today. cut for length.
Read the rest of this entry »

Perusing my feeds I saw a link to an article that Opera does in fact pass the Acid 3 test. I was pretty stoked to hear that, since I was pretty sure when I ran my copy of 9.26 and 9.5 through the test, neither one passed or even approached passing. (9.5 was closer at around 60-64%.)

I went to try out the Acid 3 test again to see if I’d missed something, or not checked on the latest version of the browser, and Opera out-and-out crashed on me. Which is a very rare thing, Opera’s always been pretty stable for me, but it’s never fun to have to kill all your tabs and start over.

Upon re-reading the article I realized that the version of Opera which currently passes the newest standards testing is their internal development version. Translation: I was decieved by my excitement, and for my laziness was punished by crashing Opera upon the merciless rocks of the Web 2.0 usability test. From now on I’m just going to get my Opera-related news straight from Opera Labs and bypass the PR maneuvers from the My Opera side of things, and the various fans.

I’m still patiently awaiting Kestral’s release from beta to full, because I think at that point Opera might stand a fighting chance of gaining a “real” marketshare. (i.e. Above 1%)

Today I put a click mapping app on RandomKitty.net. It will give me “heat maps” of where people click when they are on the main page of the blog. I may add it elsewhere, but the home page needs an overhaul before I do that. If you’d like to view the current heat map of RKNet, go to http://www.randomkitty.net/clickheat and log in with the username and password of “checkit” (no quotes obviously). You’ll have to look at the whole week or the whole month to really get any data, and most of that was me clicking random areas to generate data that I could view to test my installation. I look forward to getting a little eye-tracking information for the site. I’ve been doing a lot of usability reading lately and I know that observing the patterns of people who visit your site is a great way to learn how to cater to them in a more educated fashion. (Or I could just ask: how do you like the site? Is it easy to use? Entertaining? I love feedback, good or bad.)

I also signed up for a Twitter app that will now auto-feed the new posts to the RKNet twitter account. I’m hoping that it will spread the news a little more effectively, maybe get a couple more people on the proper RSS, so they can tell me the Twitter update is annoying and can I please turn that off? I’ve also collected a lot of unique and bizzare followers on Twitter here lately, although I did end up following zefrank, and I even participated in a project to tell really short bedtime stories. (There are some really sweet ones in there.) I’m contemplating signing up for a reverse item, that will post my tweets to the blog, but that could be pretty blah if it’s just me. It would be way more fun if the other writers also posted their tweets.

I just got turned down for displaying Project Wonderful ads, but I’m not down about it. It’s just inspiration to really clean up the home page, get some content squeezed out of the fascinatingly weird group I hang out with, and resubmit. Besides, setting up a PW account was an important step for me. Not so I can subject you the viewer to ads here, but so I can eventually promote RKNet and monetarily support sites that I visit and enjoy at the same time! Win win. Besides, I am in the process of setting up another app that will hopefully drive some more traffic, maybe provide you the gentle readers with some links to other fun internet items (as if you need anything else but RKNet! PFFT!), and perhaps even drag in a little cash for yours truly. Mmm… delicious petty cash.

Speaking of del.icio.us, I finally figured out how to get a feed of links put up by people in my network. It’s like a whole world opened up. I suddenly understand the social value of the site with stunning clarity, and I have to say I’m networked with some folks that have great taste in linking.

The more I experiment with the various services, apps, and information sources that are out there, the more fun I have. It may not all be terribly productive, but most of it does provide me with opportunities to meet new people and learn new things, and I think that’s pretty valuable, don’t you?

Jeremy Pettis has a virtually unusable, but intriguing, site. There is almost nothing of value I can tell you about it except for the following facts:

• It features type designed around an animal for each letter of the alphabet.
• Each one spells out the name of the animal in the type design.
• Each panel links to its mirror on Flickr, but the description is still illegible.
• There is what I assume is a very stirring introduction to this project, but it is too small to read.
• Some of the type faces are brilliant. Some are just plain illegible, but still visually appealing as forms.
• The site scrolls horizontally.
• Another peek at the Flickr account reveals the following: “My Senior Thesis at the Milwaukee Institute of Art & Design in 2007.”
• The Flickr account also reveals sketches generated during the early stages of the project.

Other than that, the only thing I can recommend is to visit the site and view for yourself. It’s a great artistic diversion, and the linked Flickr profile definitely has a lot more goodies and insight into the creator, but if you’re looking to find a legible copy of the introduction or the descriptions of each typeface, I’m all out of leads.

My comments in [] and italics. ~G

Subject: I will die bravely, like a smug bridegroom.
[how romantic is that?!]

It is open to any interested individual. [death? love? What is?]
Das Ende der Parteien 1933.
F1, F2, F3, -. F-Prot for Windows 8. [Word association game? I'm down]
To build a single sample, run the build.
But in a few minutes there were so many dolls that they filled up the yard, their little street, two big avenues and half the square. [The "Boil, little pot, boil" story, doll style?]
In some instances, these files will perform functions that necessarily require the program file to change. [Sounds like the kind of tech dialogue I read every day.]
Frequently agents go as far as deliberately damaging secret arms and equipment so that they can be written off and then sold.[National arms smuggling secrets revealed in junk mail!]
Remember that the description should explain the effect of clicking on the button. [Usability is very important, afterall.]
They turn around and head for Grand Central Station. Those who hold that this growth is essential to gain full employment are fully entitled to their opinion. [Those two sentences don't pair together at all!!]
Remember that the monsters don't like water (that goes for Ice too). [So they're fire-type, then?] Not for prophecy or. [...or what? How about: Not for prophecy or pontificiation, this product may not apply to all philosophies. Consult your local theologist before applying Rando-mail Brand Email. Side effects may include confusion, dysphoria, and mild irritation.]