Category Archives: UI

So whats new…

Posted on by
4

For this round of redesign, I focused on two things.. simplicity and external content. With the last site, I had enough of all the spliced images, excessive shadows, and hacky html and CSS to pull it off. So this time I’ve stuck with a subtle color scheme, plenty of whitespace, and (practically) no images. I didn’t only to go for the simple look, but to also make the usage of the site more simple. Those efforts include sensible minimum and maximum withs, different sidebars for the home page and individual pages, and improve readability with vertical rhythm. I still think that I need to make many adjustments (boy is text rhythm hard with variable sized content) but things are good enough for now.

A few times in the past I’ve tried different efforts to update my blog more frequently, but here I go again trying something else. Even though I have not been blogging much at all the past year(s), I still have been creating and contributing content such as my pictures on flickr, bookmarks on del.icio.us, and interesting sites I’ve dugg. When I started to get into twitter, I considered replacing my blog completely with twitter updates. That started the thought process and even though I’m not replacing the blog, I am keeping things more “fresh” with other content. I really like the idea that I can put things on many different places on the web and yet still use it in one place. For those of you would really like to stalk me, you can keep tabs by looking at my tumblelog (same content, just organized into one feed of info).

I have it admit it was hard for the engineer in me to accept the fact that I’m not being very orthogonal. The “issue” here is that I’m putting similar content in different places. Some may say that del.icio.us, digg, and the shares from google reader all serve the same function so whats the point of using them all? The point is two fold… first in the case of del.icio.us and digg I really am using the two sites for different purposes. For me del.icio.us is my personal internet reference. Whenever I stumble upon a site that is useful (or could be useful in the future) I’ll put it in del.icio.us so I can find it later (google search is good, but searching your own bookmarked references is much better). On the other hand, I’ll digg sites that I find fun, interesting, or insightful. It is more of a way to share than to use.

That argument doesn’t work so well for gReader shares and digg. I pretty much am using them for the same thing. So that means I need to consolidate, right?¹ … No, convenience is a feature. And simply creating a share in google reader is just one keystroke/button click. Maybe someday I’ll try out the greasemonkey script that will insert a digg link inside the gReader interface, but for now I’m good. Don’t worry… embrace the entropy :)

So please give me some suggestions or criticisms, hopefully this will make those (few) of you that look at my site less bored :).

¹ For those of you confused why someone would think this way, you don’t work with engineers. We always (I mean always) put way too much effort in to solving problems that really have no need to be solved. It is the case of TMT (to much thinking) and even more so ITIKMTIRD (I think I know more than I really do)… and yes I totally just made those acronyms up

Another way to hack CSS for IE (nicely?)

Posted on by
Reply

After some #IEroot inspiration at positioniseverything.net and some help from here, I’ve come up with yet another approach to paritioning CSS rules based on the browser. Using this technique you can get rid of the * html hack and the need for a separate IE 7 CSS file.

I liked how positioniseverything suggested using conditional comments to make different IDed wrapper divs (eg <div id=ie6>..page..</div>) but I didn’t like all those extra divs around. So why not just put the id on the body?

With this technique, there will be no extra elements in the dom since I’ve placed the conditional comments so that there always will only be one body element. Some may argue that all those extra comments are ugly, but hey it validates and does not incur any extra semantics or accessibility headaches of extra elements.

Here is what I came up with:

    1 <html>
    2   <head>
    3     <title>IE conditional comments test</title>
    4     <style type="text/css" media="screen">
    5       #ie7 p { color: red; }
    6       #ie6 p { color: green; }
    7       #ieOther p { color: blue; }
    8       #nonIE p { color: black; }
    9     </style>
   10   </head>
   11
   12   <!--[if gte IE 7]><body id="ie7"><![endif]-->
   13
   14   <!--[if IE 6]><body id="ie6"><![endif]-->
   15
   16   <!--[if lt IE 6]><body id="ieOther"><![endif]-->
   17
   18
   19   <!--[if !IE]><!--><body id="nonIE"><!--<![endif]-->
   20
   21     <div>
   22       Testing which version of IE (or non-IE) you have.
   23     </div>
   24
   25     <div>
   26       <script type="text/javascript" charset="utf-8">
   27         var body = document.body;
   28         document.write( 'body.id = ' + body.id );
   29       </script>
   30     </div>
   31
   32     <p>
   33       Colored text. Red = IE 7, Green = IE 6,
   34       Blue &lt; IE6, Black = not IE
   35     </p>
   36
   37   </body>
   38 </html>

Try it out here

You are not a true web developer until…

Posted on by
3

You have used firebug. I’ve been an avid firebug user the minute I first heard about it — starting with the initial appeal of CSS inspection, then integrated error reporting, and then getting hooked on the interactive javascript console. Firebug .3 was a big step up from the built in DOM inspector, but still it had its problems with generated content, a quirky debugger, and the inability to see inherited styles.

Then firebug 1.0 came along obliterating these problems and brought a ton (no a metric *#$! ton) of great new functionality. Its sad enough that I’m extolling a piece of software publicly… its even sadder that I was jumping up and down (literally) in my apartment when I first tried out firebug 1.0 beta. Yeesh…

But I do have a good excuse. I do a lot of web development, I practically live and breathe it (though I have not been doing it much on the side lately). If a tool came along that made you twice as productive for your job/hobby, you’d be happy too — right?! And it is not just about productivity, its also about joy of use. I used to dread debugging nasty CSS issues. It sometimes took hours to figure out that that 3px gap was caused by a measly missing space between two selectors. Now I feel like I’m in control and am confident that bug will be easy to find (and fix)! So please, before you label me as too big of a dork remember that you’d be pretty happy too to find something that made your life so much easier :).

So for the doubtful, what can firebug do?

  • Click to inspect any part of the page to see its styles (and all the styles that have been inherited and/or overwritten), box model, dom properties, or html source
  • Dynamic editing of the page. HTML, CSS, and javascript. Just click to edit a field. The page will update to your changes in real time. As a bonus the edit fields have auto-complete (just like every other place you can type)
  • Solid javascript debugging with really quick and easy watch expressions. I knew that I should have been debugging instead of logging messages for a long time, but now I can finally use a debugger that isn’t painful (sorry Venkman… and firebug .3).
  • Profiling!!
  • Graphic visualization of all the http requests made on a page, including everything you need to know for page optimization!!!
  • Easily navigate between contexts since nearly everything in firebug is a link. Want to look into the properties of a javascript object? Click it. Want to see the http headers of a request? Click it. Want to inspect an element in the source view? Click it. This UI paradigm easily leads to feature discovery since you’ll always try to click on something to find out more about it — and you will quickly realize that it just feels right.
  • And many things are easily discoverable without a click. Just hover over any image string and a popup will appear. Same with variables while debugging and with hex colors (no more memorizing hex codes)!

And after watching a video of Joe Hewitt demoing his creation, I still learned more features:

  • When editing a numeric field such as padding just press up or down with the arrow keys to change the padding amount, slick!
  • Extremely simple conditional breakpoints. I used to think that you couldn’t do that in firebug, but all you have to do is right click a breakpoint and type in an arbitrary javascript expression.
  • Automatic bookmarklet “scrunching” when copying from the multi-line console
  • Keyboard shortcuts.. I can’t live without ctrl-shift-t and ctrl-shift-r in eclipse, and now I know I can do ctrl-shift-space in firebug. Oh and I finally found out that I can get rid of the Wed Developer Extension’s shift-ctrl-c shortcut so I can use it for firebug :)

If you still are not satiated, watch this screen cast.

Firebug - Web Development Evolved

Go and try it, and if you love it please donate to the guy. He deserves it.
I’m very surprised Joe hasn’t been picked up by one of the big web companies yet… He single-handedly has saved them potentially millions of dollars in man-hours. Maybe he has just turned them all down :)

Lotus Connections

Posted on by
5

Whew, Lotusphere is pretty big, bigger than I expected. Seeing 6000+ people in one room makes you realize that 6000 is a lot of people. I’m having a great time here so far and we are getting pretty good feedback from customers.

… wait, let me step back a second. I have been working on Activities for Lotus the past year and a half. That started with Activities Explorer, then moved on to having an Activities web interface, and now we’re in Lotus Connections (formerly Ventura). It has been very exciting to work on Social Software, I can finally tell my friends that I’m hip and work on cool social networking software (instead of just some longer description about enterprise collaboration).

After a few small snafus on our part, it seems like Lotusphere attendees are starting to log in and try out our free test of Lotus Connections. Hopefully the word will spread and will get more exposure — we’re really hoping to get feedback that we can work into our product!

Some related links:

The little things…

Posted on by
Reply

I’ve come to realize that in user interfaces (whether digital or physical) its often the subtleties that make most of the difference. The best of these are details which you use without realizing or without prior knowledge. Simple examples are right clicking on an object to see what you can “do” with it or using page up/down in some application (like a photo app) without taking the time to think “I wonder if page up will move to the previous picture” — it’s when you try something and then realize (afterward) that you did it by native reflex, without thought at all.

Unfortunately, there is a problem with getting excited about stumbling on seamlessly intuitive UI features. You are prone to get frustrated when those things “that should just work” don’t work. :)

Today’s example of that is clicking a link while visiting a web page. Its not every time you click a link, but those times when you realize “oh crap, I didn’t want to click on that… now I have to rush really quickly to try and hit the stop button before the next page loads (and man is that stop button small)”. What I tried today is clicking on the link again after realizing I didn’t want to go to that page. I think my mind tried this since there are many hide/open ui patterns in many of the new AJAX websites. My mind must have jumped and tried out that same pattern in this (different) situation, but alas — it doesn’t work.

So this is where I say “Why not?”

And now this is the point where I realize my intention of just mentioning a tiny ui feature is blown out of proportion by me doing all of this extraneous explanation.

So yea, its a small thing but at least I think it would be useful.

So while I’m on this topic another small ui gesture I’d love to have is feed readers (news aggregators/whatever name is in vogue now) that display the length of a post alongside the title. Maybe it’s a number of paragraphs, maybe it’s a small icon to represent the long posts, maybe it’s some representative color gradient. All it has to do is give me some blurry impression whether the post is “more longish” or “more shortish”. That could makes broswing/flipping though feeds much, much easier. If its a feed that I’m only semi interested in then I can just skip over the long ones. (I guess I’m the kind of person that feels guilty stopping reading something halfway through). Ever since my feed reader has gone out of control (I spent much of today trying to work on this) I’ve had to start breezing though all the “possibly less interesting” entries instead of reading everything (in addition to dropping the blogs I just never got around to).

The reason I’m making such a deal about these simple touches is that I really do think they make quite a large difference when amortized over the long term. (oh yea, and also if enough people hear about it and become interested they might get the motivation to write feature requests for me) :)

Oh.. just one more thing. Will rememberthemilk please show the number of tasks along/inside each tab? Pretty please?