In general, I find that website designs can be divided into three broad categories:

Designed websites

Nothing much to talk here. We all know designed websites. There’s a banner, a good stylesheet, possibly a menu with a roll-out animation which doesn’t work anywhere except in IE6, and so on… you get the idea. The craze nowadays is to use glassy effects and some reflection to show “we’re so web 2.0″, not realizing that Web 2.0 was never associated with images. Not just on major icons but everywhere including menu buttons, command buttons, external links. Even favicons are not spared.

But let me rant about “Web 2.0 images” some other time. Coming back to the point, designed websites form the major chunk of what we see on the web. Corporate Information sites, dotcoms for companies highlighting their activities, all social networking sites, most portals, microsoft.com, even this blog: All fit in this category.

Non-designed websites

Any personal website created without a stylesheet, good coloring or imagery falls into this category. But its not just personal pages. Sites like Craigslist and some dev mailing list pages fall in this range as well. The default font in the browser (mostly the very inappropriate “Times New Roman”, if on Windows), white background, the occasional spurt of color (full saturation red or blue) to highlight an important point, it is all very ugly, but still it “works”. The information can be read, and it ends at that. These sites mostly operate on two norms:

1. Content is King
2. I am individual, attempting to post this page in spite of not being very good at this stuff

At the first glance, it seems the beauty of the site (or lack thereof) will most probably lead to the content being treated as junk. After all, looks matter a lot more than these guys think. But this thought doesn’t last long.

I don’t know whether it was Linux mailing lists or TLDP Howtos, but after a while, non-designed pages started to look a lot more sincere than pages in designed websites. The trust factor is possibly explained by the fact that these pages are mostly by “community” and non-profit orgs, as against designed websites which are owned by someone who had the money to pay for a good design (with 3D bulky images, it cost a lot back then), and are mostly planning to earn that back some way. Mostly, the words “evil money-making megacorps” come to mind.

Undesigned websites

I’d love to write a few pages on this, but Alex Bainbridge wrote about it perfectly way back in 2007. I’ll just quote him.

There has been some chatter about the concept of “undesign”. I struggled to find a definition of it that I could publish so I am going to come up with my own:

I now define undesign as a web design that has the following characteristics:

• Copy / text is the user interface – The words, the size of text, the length of the sentence, the paragraph breaks – all of this forms the user interface (rather than creating containers with graphics – and placing text / copy inside those containers)
• Links are text based – not images
• There are no gratuitous user interface elements - I define gratuitous as those that either don’t provide information (for example stars on a star rating) nor assist with usability (for example lines between sections – acting as dividers).
• Usability is prioritised over visual branding - the design is engineered to be used – not admired like a piece of static art.

So what you end up with is a mainly text website. It sounds dull but it isn’t.

Some examples of undesign

• 37signals – Homepage and corporate website. Very clearly the text copy is the user interface
• Google – search and search results
• Amazon – product page – there are very few visual elements on the page except for product images. Apart from that it is mainly text. Some graphics are used to divide sections – but these are kept to a minimum.
• ClearTrip- A travel website example. ClearTrip offer flight bookings for flights within India. The hint towards their design mindset comes from their name!

The cleartrip homepage. See how there is very little imagery. This is travel undesign. Go and take a look at one of their flight results pages as well. Very clean. (While you are there – go one step further – the accordian checkout is interesting)

The idea of undesigned sites has gained a lot of strength recently and portals like cleartrip and 37signals are sure helping the process. I hope this theme catches on as we move forward.

Windows 7 is here

Short Answer

I am not as impressed as much as the rest of the community is.

Long Answer

I suppose most of the folks who have written about Win7 are using Windows Vista : The OS associated with most rants since Windows ME. And this time, the online community strength has developed quite a bit. All-in-all, hearing that Vista was a bit of PITA, it seems reasonable to applaud Windows 7, since it uses marginally less resources, has a clearer interface and probably has a better UI than Vista. I wouldn’t happen to know, as my net duration on Vista has been just two minutes (at the Acer store).

In short, the bar set for declaring “good OS” is quite low when the comparison is against Vista. I certainly had mixed feelings, jumping into Win 7 from WinXP. Lets look at what’s good first

• The sidebar seems somewhat useful; I probably need to figure out what I need to constantly see, even while working. But I’m sure many will benefit from gadgets, especially on a wide-screen.
• Aero looks elegant (better than XP anyway), but as a user of beryl/compiz on Ubuntu, aero seems to be a far crippled version of its open source alternative.
• I right-clicked a folder in Windows Explorer and kept looking for “Search in this Folder” menu item for like five minutes! I just wasn’t able to comprehend how Microsoft could omit such an important functionality, only to realize later that it was always present at the top-right corner. Important features placed at good spots.
• And boy was that search fast! Automatic indexing of files. I love it!
• Inbuilt Voice Recognition is good. It took me quite a bit of time to coax the computer into writing a three-line document for me, but that’s mostly because of the Indian accent. I did manage a somewhat American accent and was thankful that I was alone while doing that, else it would have been a joke told for generations.
• Media center has got loads of features, but I don’t use most of them. I’m the sort of guy who prefers XMMS or Winamp 2.0, so yes, the tag “technologically obsolete” will not be wrong as far as music is concerned.
• Increased Security. But that’s not always good. What’s good is configurable security levels: in line with many appeals to leave the security to end-users. Let users control Windows rather than the other way round.

And now for the sad parts

• Memory consumption: Too high for any OS, however modern. At a time when most activities of the common man are online (and the activities on the computer involve little more than word processors or spreadsheets), I do not see a reason why people should invest in a state-of-the-art processor and memory only to support OS bloat. No wonder people are still saying “no, thanks”. Its because XP already is so good at delivering what they need. (I do admit that I had exactly the same feelings about Windows XP when it was released. One can easily see how I cannot be the father of technology in any way whatsoever)
• This also means that having Vista as a guest OS in a virtual machine is next to impossible unless you are on a very high-end machine. Win XP, in contrast, fits the bill here perfectly.
• Placement of components on most windows and dialogs is new. I already talked about the “Search” feature before. Now take a look at the personalization dialog for example. Actions available on the left as well as at the bottom. Actions on the left are easily visible because of the XP experience. In addition, they are shaded with a different color (blue in this case). I could not notice the icons at the bottom right away.

Windows 7 Personalization

That’s about it. The rest of my problems lie in the fact that I installed the 64 bit version, which works perfectly by itself, but a bunch of software has problems working with it. I’ll write a post about that some other time.

The rants above on memory hog are quite lame in the long run, actually, as is the point of learning curve. Memory and processing power is always going to increase. And we did have to spend a few days in Windows XP to get used to the “new interface” after running Windows 98 for a long time, didn’t we? So overall, the issues I have listed are pretty trivial with the sole exception being virtualization: that running the Windows 7 OS as guest on most “home” machines is not very likely, atleast for a couple of years.

Its a good upgrade, but not a must-upgrade for now. Windows XP is good. Ubuntu Linux is better than XP. It is not as polished as Windows 7, but hey, it’s free! I’ll stick with Ubuntu for now, and keep trying newer stuff with the Win 7 RC for a few more days.

The integration offered by Django and RoR really makes one feel that not using these frameworks is just the thing why software developers are in demand today. Hire fifteen to do a job in php which two could do using Django.

Some may say these facilities are just keystroke-savers. Agreed. The important question is why do you not want to save those keystrokes . A common application development (without the right kind of framework) spends a significant amount of time (I’d hazard a guess of more than 25%) doing plumbing work. Lets take a Java example for an “edit” screen, which shows the user already stored data, and allows him to make changes:

• Take data from repository, probably as a generic List
  • Oh yeah, connect to the DB first, and run a DB Statement in a try-catch block, right within your business logic
• Populate a data bean with all the data. All manually. If the DB cursor contains 25 columns, have a object with 25 attributes, 25 getters, 25 setters and populate all attributes one by one.
• Send the data bean to the view
• In the view, have hard-coded UI components for each attribute of the data bean to be displayed. For any related queries to be executed, hard code page links which will fetch those.
• On event of user clicking OK, program a set of validations to ensure user has not entered bad values. Most of these are not business validations, but checks to ensure no bad characters are present in the input.
• Populate user entered values obtained through form into a data bean
• Code a SQL Update script which will take each value from the data bean and update the backend
• commit (don’t forget that!)
• Rinse-and-repeat for all related queries

Any framework support (struts, spring, hibernate) is a keystroke saver in addition to being responsible for formalizing (a subset of) the programming for the application. Django and RoR simply take the integration between MVC to the next level. I had mailed a friend a few months ago about what Rails has:

1. Integration with AJAX: You see whether the type of request from the client (browser) is ajax or plain HTTP. You use those conditions to provide a specific response. In case it is an ajax request, you can play directly with elements rendered in the browser (e.g. Put text “Saved Successfully” in the information bar and blink it once). This integration, and resulting 5 lines of code is far faster than anything we would do by ourselves. (client side use ajax-specific library functions to send request, then check XML returned and perform activities in browser using javascript again). This integration is thanks to use of inbuilt prototype and scriptaculous libraries

2. Test Integration: I know that if a nice high-level test framework didn’t exist already, we would never get serious about writing real automated tests. It would always be like “lets develop this cool feature now that we have time… we’ll check out tests later”. Fortunately, tests are easy to write, and we can start small. (full page tests and all can be written later). We can also write Model level tests for ensuring relationships etc. N e a t.

3. MVC Integration: Neat MVC code, easy to write. Controllers and views nicely integrated. All variables declared in controller are directly available to views. Which should have always been the case, but in other barebones J2EE/php, you need to pass a data object explicitly, because MVC is not mandated.

4. Fixtures: Stuff to fill your “Test” database with data. Easy to write YAML (byebye XML). This will auto-run when you run tests, so your test database is ready with required data. If you don’t know yet, Rails will auto-create dev, test, prod databases for easy demarcation. Rails will also auto-clone the dev database schema to test database prior to loading fixtures.

The learning curve is a bit high, and I am spending a lot more time understanding the components in comparison to J2EE. Yet, given the benefits, I think it is well worth the effort.

I just found by chance that Google Chrome indeed handles this elegantly: On the second popup for any page, it displays this neat checkbox right below the message:

This is something that Mozilla folks decided “could wait” for the past eight years?

Actually the beauty of the post lies in the author not trying to be in preach-mode. It’s just a “screw it all I’m goin’ home” treatment handed out to display:block; float:left; layout, which has irked some gentlemen of the CSS church. For these kind-hearted people, the author takes some time out to coin a term CSS-Trolls. And could you believe it, the very same association of people replied on this post with complete disgust, on how terrible the advice is, and how the author ought to die of shame. Well, some comments were actually written by well-mannered folks, who put their point and signed off with a bow.

But let’s not talk on people. Let’s talk on the point in question. Tables or CSS?

Well it really doesn’t have to be an exclusive decision. CSS does provide a lot in terms of

• Flexibility in presentation
• Easy alterations in future
• Accessibility for visually impaired
• Pixel-level control of all objects

and other goodies. I’m a CSS fan ever since I built my first CSS-enabled website 3 years ago and realized how much I sucked in web design before.

Yet, CSS, with all its control on page components, remains a browser-based implementation. Wait, even tables are in the same league! Yes, but tables give you one assurance: If you want “Y” in the left cell and “Z” in the right, that’s how you are going to get it. No side effects with anything: pages resized, font sizes increased, browsers changed, you try it. It may look ugly, sucky design, but “Z” remains to the right of “Y”.

This one single feature of consistent placement gets screwed up when you try to use CSS. I sat with my friend once to get a layout with 3 columns, with a horizontal bar at the bottom of all three columns. Quite a number of times, the bar appeared on the right of the columns, sometimes behind the columns. It took us a good one hour to get things sorted out, after adding a multitude of attributes for the last column and for the horizontal bar. I can surmise that whatever attributes we used would produce at least some side effects in one of the browsers.

You can well say that I am not as good of a CSS coder as I think. Well, that’s the whole problem. The layout worked perfectly in one browser and it wouldn’t on others. Why does my knowledge on markup have to involve inconsistencies rendered by design specs of different browsers?

Lets take another example. A friend working in a UI framework team discussed an issue with me one day: The div appeared two pixels to the right of the desired location on FireFox, while it rendered at the perfect spot for IE. Now that’s an amazing problem, where the (heavy) component is derived from 5 other smaller units. Turned out to be a difference of rendering a border between FF and IE.

Coming out of bedtime stories, we have situations where “the boss wants the code complete by evening”. It is useless to sit and gaze at the beauty of CSS at times like these. Just get yourself some nice tables where necessary, use CSS where easy and roll it out, as many have preferred.

At first, a little introduction to the havoc wreaked by WebAccelerator: It sits with your browser, and “clicks” links intelligently on the page you have visited. This ensures that your next click opens the new page instantly. However, “intelligent” behavior started to trouble web applications where links happened to update/delete records in Admin Consoles.

Although the bigger question raised was regarding privacy concerns (Google indexes pages prefetched by WebAccelerator, which includes pages unreachable by its crawlers), lets keep that out for a moment and revisit the issues faced by web developers. As Web Accelerator is no longer active, you may wonder why we need to recap history. The reason is, you never know what plugin the users of your app have installed on their browsers. Yesterday, it was Google. Tomorrow, it may be something smaller, having auto-installed with another package, and no one will have an idea that your pages are being prefetched.

As always, information websites with links sprinkled around do not need to bother about prefetch. Its the websites with user authentication required that mostly fell prey to this activity.

I’ve not tried GWA, and there are comments stating that GWA doesn’t do a lot of things which have been alleged. However, our work here is not to discuss merits of Web Accelerators and their conformance to standards. All we want to do is strengthen our own website. So lets take a look at some problems faced, and graceful solutions or workarounds opined.

1. “Logout” link prefetched once the user logged in: This threw the user out before he did any other activity. Quite irritating. The “Best Practices” supporters came out in strong defense of Google here. Why would developers keep Logout as a link (GET) and not a POST, they asked. Except that Logout is really an idempotent operation! A user can logout once or ten times, and it is always the same result, in almost all cases. Our little tweak to the Best Practices helps in deciding that POST is better for Logout.

A safer deal is to have form method as GET when the application state does not change at all

2. “Delete” links prefetched in Admin consoles: Well, this is pretty straightforward. You cannot have “Delete” as a GET operation. But here’s where we get out of utopia. In the real world, navigation and look and feel of the application is largely decided by the UI team, and the developer has little say in the matter. If the designers feel that links alongside 10 items feel “cool” and buttons don’t, well, you need to keep a link. The workaround here is to have a href = "#" and code a form submit on the onclick event of the link.

3. Links which involved heavy database operations: …and thus increased server load were prefetched. A way out here is to limit the number of “heavy” operations performed by a user per minute. This seems like a fair balance between a hack to redirect to 403 and a puritan approach of removing links altogether, making pages accessible only through Javascript or POST operations.

4. Links which retrieved data but also imposed exclusive locks on the data: The first user to come along could end up locking quite a bit of system data, thanks to prefetch operation. However, isn’t a lock on data change of application state? The change needn’t be in a database operation. Any change of state should require (scream) POST.

Well, that’s quite an interesting list of 4 points with repeated gyaan which has, no doubt, also been written  before by others. But, as long as reading this post helps at least one developer, I’m happy. Benefited developer, please post a comment so that I stay vindicated

Today this very pop-up is a major hassle for users, just because in multi-tabbed interfaces, the user cannot switch between tabs when an alert is displayed to him. So you have an irritated user who wants to urgently book a flight in the next page, but is stuck on your tab because you have provided some text for him to understand and press OK.

This is still ok when the alert is shown on the press of a button. There is a higher probability of the user being still focussed on your page. But alerts on page load, notifying “Successfully performed operation” are nothing but rot.

To grab user attention while user is on your page, a far more elegant way is the use of div based message boxes. This keeps the user interface consistent with the remaining website and also grants user space for some other (possibly precious) activity. The new CSS opacity attributes also let you gray-out the page background whilst displaying your error — pretty neat.

While you are proceeding towards unobtrusive interfaces like a good kid, why not also give a thought to what ought to be the messages warranting a pop-up? Oracle ADF, which we use for development, has 3 levels of messages:

• Info, Warning: Display at the top of the page with appropriate icon
• Error: Display as a div based pop-up to the user, gray out the remaining page, ensuring the user cannot perform any activity till he selects an option to handle or acknowledge the error.

The good part is that the behavior of messages is built into the framework. So if tomorrow a usability test suggests that warning messages better be shown as a popup so the user doesn’t miss them, there’s a 3 line change in the framework to enable this. Clean, easy, cool. That’s the way we want it.

Long story short, after having spent a few minutes on his PC, I found out that IE was hanging the moment it started. His PC maintenance guy had come and tried to reconfigure the Internet connection (heh), which didn’t help much. (The fact that a browser ought to hang on the OS from the same company should have seemed absurd, but somehow we are all used to it, mostly due to virus attacks and corruption.)

But why would a perfectly working IE hang all of a sudden? I got another bit of info from the user: “It asked me to upgrade to version 7. It is not working ever since I upgraded”. Sad. MS doesn’t test its upgrades enough! Useless! Thankfulle, before I could post my rant online, I googled and found a quick solution: Uninstall Yahoo! Companion and all shall be fine. And indeed it worked! Perfect answer… and boy did I get showered with praises for starting up good old IE with fewer toolbars!

For no fault of its own, IE was screwed and broken due to the upgrade. Oh, but there is a fault in it… the upgrade itself!

The sad thing here is that IE either doesn’t have any idea about what applications are plugged-in (or coaxed in) to it, or that it doesn’t care about them during the upgrade. Either ways, it is the user who suffers.

FF covers addons a lot more by checking their versions and the compatibility after each upgrade. That said, a foolproof “Go back to the previous version” ought to be present for all major upgrades which are not critical, simply because there may be a functionality dear to the user (and a don’t care for the dev) which might stop working in the new version. Edit: Even if the update is critical or security related, why not let the user choose whether he needs a secure app or a working one?

The other way out is to have a package manager like Debian’s ‘apt’ tool to handle all upgrades and report clashes to the user. But that’s a distant dream on Windows with everyone having their own installers.

I hate automatic updates & installs. (I have also written earlier about Acrobat Reader’s need to download and install “Critical Security” updates every few weeks from the Internet. There ought not to be those many security vulnerabilities in a document reader.) But all kinds of applications today are coming up with internet updates. While this does allow you to provide your latest and greatest piece of code to the user, you might just end up breaking something because of incompatibilities with other software.

Adhering to the policy of oldversion.com: “Because Newer Is Not Always Better”, I try to keep my software tuned for manual updates. Reduces the trouble, as well as the bandwidth consumption (required specially for limited-download connections). Yet, it does no harm to remember that software one develops will not be the only process running on any machine. Let’s have some consideration for others.

Upto Version 2.x

Version 3.x

It was indeed very irritating to decide whether I want to remember the password or not for some xyz website where I had just one minute of quick work to be done. Good UI always deserves applause. After all, for most users, the UI is the Application. Thanks FF!

The focus on usability has increased considerably in the past decade. Firefox, Ubuntu, WordPress are all great examples of powerful software or systems which strive for ease of use. There is little surprise that they emerge as clear winners or strong contenders for pole position in their respective domains.

Some of the lesser known apps which provide awesome features are the Portable Apps Suite and my favourite virtualizer, Sun VirtualBox. I’ll yak a bit on the benefits of Portable Apps in this post, and cover VirtualBox later.

In one way, Portable Apps is a platform that should never have been required, let alone developed. But here we stand, with all our major desktop software for Windows machines – depending somehow, somewhere, on the Windows registry.

<off-topic> <!-- Warning: Geeky matter -->

Dependency on the registry isn’t required for all apps. Most should be able to manage configurations using a simple flat file akin to what *nix apps use. Efficient read of config property is not an issue at all; one can just load the config file and  store the contents in a map. But some developers anyway proceed to use the registry in order to hide the configuration from the user. Included in these are all those great apps which require a registration key or something of that nature to function. This key or identification, unique to the user, is stored in some obscure corner of the registry, so that the (regular) user cannot tamper with those.

</off-topic> <!-- -->

So back on line. To many of the users who were content with the Windows-IE-Office-Y!Messenger installations and need no more than that, the scenario above made little difference. But as increasing number of people found themselves using more than one (sometimes-malfunctioning, virus-infected) Windows PC, it became necessary to install and maintain all required software on multiple machines.

Enter Portable Apps. While this suite doesn’t provide any sort of portability between OSes (Windows, *nix, mac), it does give a very neat and clean platform for those who would like to develop applications running directly from a flash drive or external disk. Basically this means that the apps ought not to refer to Windows registry for state information or configuration. Many subsequently altered their code and came up with portable versions of their apps. The Open Source Software devs were some of the first to cover this ground, since none had any intention of locking the user with registration keys or the sort. Thanks to them, we have a humongous list of free portable software (some free as in freedom ). Better still, we have the most-used software already included with the portable apps suite. All this, with a very neat menu providing a list of all apps “installed” (basically just copied to a proper directory) in the external drive, and all documents stored.

For anyone with a flash drive of more than 256MB, this is a must-have. Not just for people regularly working on multiple machines, but also for those who visit relatives and would like to show them the new video on their flash drive, but can’t, because the Windows Media Player on their PC simply doesn’t work

My list of awesome portable apps:

• ClamWin antivirus
• Mozilla Firefox (always )
• Mozilla Thunderbird
• OpenOffice suite
• Pidgin
• DOSBox (good emulator those old DOS games)
• Sumatra PDF
• TrueCrypt
• GIMP
• VLC Media Player
• Notepad++
• uTorrent
• Skype
• IrfanView
• 7zip
• ImgBurn
• Winamp
• Filezilla