Posted by Vincent Woo
Take a look at the Firefox extension Pixel Perfect if you implement webpages based off Photoshop mockups. It overlays a transparent image of your choice over the webpage so that out of place elements are easy to spot.
It’s currently at version 0.6.1 but it has plenty of potential. I could see how it could be integral to the workflow but at the moment it’s great for quick checks.
Posted by Vincent Woo
Recently, our team spent a great amount of time tutoring a remote client. In this case, the client needed help understanding the basics for an off the shelf e-commerce package. Our usual channels of communication were not adequate since the client was not web-savvy and was easily confused with our instructions. We had to adapt, re-evaluate our assumptions, and find ways to get the client up to speed. How could we teach the essentials without face to face conferences and without a shared lingua franca? We rejected our usual suspects, tried a few new strategies, and found another one that, in hindsight, could have been very useful in tutoring remote clients.
The best solution is to use realtime chat involving a shared desktop. This is as close to a face to face conference as possible.
My preference is iChat screen sharing but not everybody uses Apple computers. a VNC derivative or Windows remote desktop would have been fine too.
Screen sharing is very close to a face to face conference but it does have its problems. The biggest is that the setup could be difficult for non web-savvy clients. Troubleshooting remotely is falling back to square one. Only recommended for clients with a reasonable chance of setting it up or who have lots of patience.
Usually, there is documentation for users to study. Have a look around the software website and you’ll probably find official manuals and screencasts. Chances are good that a web search will find some great user created tutorials as well. This is a good first step and many times it’ll work well to point clients to these resources instead of creating the content yourself.
In our case example, there are plenty of documentation for the software chosen by our client. Sadly, in response to some of the client’s questions, references to selected manual pages and 7 minute video tutorials from the original developers were too confusing so we had to look at other solutions.
Phone calls, email, and instant messenging are lousy for demoing or tutoring purposes. It’s not meant for walking through a website or explaining multi-step tasks. However, they’re great for answering questions that don’t require great detail and if the team and remote client have a shared jargon.
Services such as Skype and Vonage could help keep long distance call costs down while still acting like a regular phone line.
Campfire is a web based instant messaging tool. No worries about setup and it retains chat histories accessible by all members of the team.
Our aft-mentioned client was paralyzed and frustrated with the complexity of the website admin panel. The interface was too cluttered and the client was unable to navigate the menu to even begin performing administration tasks. Clarity is the key goal to strive for.
Try highlighting certain page elements to clarify what exactly the client should be concerned with. Another way of looking at it is the opposite: to de-emphasize as much of the non-essentials of a busy screen as much as possible.
Any additional text has immediate context. Consequently, text stays concise by only explaining the significance of the highlight elements. No need to describe page elements beforehand.
I tried a couple of highlighting techniques and the one I like best involves darkening, and thus lowering the contrast, of the entire screenshot. The background still preserves enough prominence such that the client can still figure out detail if desired. Since the page is dark, it is then easy to accentuate the important elements: make it bright and full of contrast.
Here is a screenshot to illustrate how easy it is to recreate the effect in Photoshop. Of course, many variations are possible so experiment until you find something to your liking.
While these screenshots can be made fairly quickly, a whole series of them sucks up precious time. Still, they are effective in getting the message across and can be worth the effort. Because I took into account what the client knowledge level was and customized it to answer questions directly and concisely, the client was able to learn at an accelerated rate.
The other day I came across this software called Jing that captures the video of the computer screen while recording from the computer’s sound input. It isn’t realtime like screen sharing, but is valuable for constructing quick and dirty tutorials that require little or no post processing.
The premise of a streamlined workflow is what sold me on the idea. First, record a demonstration as you would normally present it. Jing will then automatically upload the movie so that it is accessible through the web.
Jing can be configured to automatically upload the movie through FTP to a web accessible directory. If you don’t have a web host, they do offer complimentary 2GB webspace accounts at screencasts.com. You can signup for this account during the Jing program installation.
So far, I’ve created a few test movies and the quality is great. movies are about a megabyte for every 20 seconds but your mileage will vary.
I can’t say Jing is perfect though. It doesn’t integrate well with the OSX environment with its custom yellow and black theme. Worse, switching to and from some of Jing’s dialog boxes is a hassle since they’ll disappear and are unrecoverable through the dock or expose. Sometimes application windows are unmovable and are set to appear above all others. Jing needs an interface overhaul.
Another downer is that files are encoded in only .swf format. That’s fine for quick throw away movies but is not post processing friendly. Finally, the greatest sin is that Jing crashed too many times to ignore. I wasn’t keeping track but it felt like there was a 50% chance it’ll crash every time I record. I will need to find a more robust desktop recording software for more involved work.
Despite the negatives, Jing has a clear and productive purpose. I’ll keep Jing installed.
Posted by Vincent Woo
Even though I switched a few of my projects from Subversion to Git a couple of months ago, I still had lots to learn. So I dedicated last weekend to use submodules for Rails plugins. Unfortunately, it wasn’t the quick conversion I thought it would be but it turned out for the best.
git submodule add git://github.com/rails/acts_as_list.git vendor/plugins/acts_as_list
git submodule init
git submodule updateAnd you’re golden. But there is still much to do. In order to deploy efficiently with Capistrano, I’d needed to do a “set :deploy_via, :remote_cache”. Onwards in search of a Internet accessible Git repository that I can call my own.
Enter Railsplayground.com Ruby on Rails Hosting. They have been hosting this blog for several years and have always been great for shared hosting. Bonus points for free Subversion and Trac hosting, up to 1GB disk space, with any hosting account.
Little did I know that they have been doing Git repository hosting for the past several months. Their homepage doesn’t mention it although their forum as well as their sister site do.
If you’re thinking about their git repository hosting solution, there are a couple of things to keep in mind.
PRO: Custom control panel: easy to create/delete git repositories and manage user accounts that has access to them
PRO: Trac integration is underway
CON: The only protocols they support are HTTP and HTTPS. Update: Railsplayground will support the Git protocol very soon. See comments below.
CON: It requires creating a ~/.netrc with my login and password. I don’t want to store any passwords in plain text on my laptop so I symlinked the file to an encrypted vault where my project files are anyways. Update: Railsplayground will support the Git protocol over ssh very soon. See comments below.
$ git push upload master
fatal: git-push is not available for http/https repository when not compiled with USE_CURL_MULTI
error: failed to push some refs to 'https://secure2.svnrepository.com/g_username/repository_name/' #/opt/local/var/macports/sources/rsync.macports.org/release/ports/devel/git-core/Portfile
patchfiles patch-Makefile.diff patch-http.h.diff # Before
patchfiles patch-Makefile.diff # After sudo port deactivate git-core @1.6.0_1+doc+svn
sudo port install git-core +doc +svn +bash_completion $ git push upload master
error: Cannot access URL https://secure2.svnrepository.com/username/repository_name/, return code 1
error: failed to push some refs to 'https://secure2.svnrepository.com/username/repository_name/' $ sudo port install curl +ssl
---> Fetching curl-ca-bundle
---> Attempting to fetch certdata-1.48.txt from http://lxr.mozilla.org/seamonkey/source/security/nss/lib/ckfw/builtins/certdata.txt?raw=1
---> Verifying checksum(s) for curl-ca-bundle
Error: Checksum (md5) mismatch for certdata-1.48.txt
Error: Checksum (sha1) mismatch for certdata-1.48.txt
Error: Checksum (rmd160) mismatch for certdata-1.48.txt
Error: Target org.macports.checksum returned: Unable to verify file checksums
Error: The following dependencies failed to build: curl-ca-bundle
Error: Status 1 encountered during processing. sudo port install curl +ssl checksum.skip=yes set :repository, "https://secure2.svnrepository.com/g_username/project_name"
set :scm, 'git'
set :deploy_via, :remote_cache
set :branch, "master"
set :git_shallow_clone, 1
set :git_enable_submodules, 1
default_environment['GIT_SSL_NO_VERIFY'] = 'true' $ cap staging deploy
Initialized empty Git repository in /home/username/project_name/shared/cached-copy/vendor/plugins/acts_as_list/.git/
github.com[0: 65.74.177.129]: errno=Connection timed out
** fatal: unable to connect a socket (Connection timed out)
** Clone of 'git://github.com/rails/acts_as_list.git' into submodule path 'vendor/plugins/acts_as_list' failed iptables -I OUTPUT -p tcp --dport 9418 -j ACCEPTPosted by Vincent Woo
Firefox 3 has been out for almost 2 weeks now and I wanted to know how its adoption was going and if it had any effect against IE. A quick look at some Google Analytics data showed that it isn’t as good as I had hoped. I present to you a quickie browser market share comparison between last month and the time period that FF3 was available as of this writing.
My604.com
Thanks goes out to My604.com for letting me post this info. My604 is a Chinese language forum specific to the Vancouver / Lower Mainland region. I don’t have any particular demographics information but I’m seeing a sizable percentage of university students there.
Interestingly enough, there is no change in browser usage except that a quarter of Firefox users are now using the newest version.
| Market Share Scope |
Browser | May 2008 15,098 visits |
June 17 – 28, 2008 6,279 visits |
|---|---|---|---|
| All | IE | 74% | 74% |
| All | Firefox | 22% | 22% |
| % of IE | IE 7 | 54% | 55% |
| % of IE | IE 6 | 46% | 45% |
| % of FF | FF 3 | 4% | 26% |
| % of FF | FF 2.0.0.14 | 85% | 65% |
| All | Safari | 3% | 3% |
| All | Opera | 0.5% | 0.5% |
vt-online.vsb.bc.ca
A website for a local high school where staff members can post messages to each other, students, and parents. Note that there is a significant drop in visits since the school year ended at the same time that FF3 was released. Thus the numbers between months are not directly comparable but it should still give you an idea about their web browser usage.
Some good news on the Firefox front. Again, Firefox 3 captured at least a quarter of all Firefox users. Perhaps more importantly, Firefox is taking over at the expense of IE! Hopefully, this trend will continue when school starts up again.
Loving the IE6 numbers. I’m going to take a wild guess and assume that with high schoolers in the mix, there would be more new computers that are pre-installed with IE7. In any case, IE6 browser share has been dropping steadily over the past year and if it continues on like this, I might be able to drop IE6 support this time next year.
| Market Share Scope |
Browser | May 2008 4,267 visits |
June 17 – 28, 2008 528 visits |
|---|---|---|---|
| All | IE | 78% | 66% |
| All | Firefox | 18% | 29% |
| % of IE | IE 7 | 80% | 83% |
| % of IE | IE 6 | 20% | 17% |
| % of FF | FF 3 | 1% | 30% |
| % of FF | FF 2.0.0.14 | 88% | 66% |
| All | Safari | 4% | 3.5% |
| All | Opera | 0% | 1% |
Undefined Range
This blog which is more web developer / techie oriented. As expected, not many visitors, percentage-wise, use IE. You guys rock! Still, a third of IE users and rising are on version 6. In absolute numbers it isn’t that much but I’d thought that web developers have universally shunned IE6. I’m trying to justify this discrepancy but I can’t. In the past month, there was about 1% of windows users on Windows 2000, NT, or lower so upgrade options are available. Also, web developers would need to verify their work on a myriad of browsers so they should already have browser options.
Safari is doing very well here. Since my blog posts generally are about Rails, this is not a surprise. Sadly, no such love from Opera fans.
| Market Share Scope |
Browser | May 2008 441 visits |
June 17 – 28, 2008 204 visits |
|---|---|---|---|
| All | IE | 15% | 10% |
| All | Firefox | 71% | 70% |
| % of IE | IE 7 | 66% | 62% |
| % of IE | IE 6 | 34% | 38% |
| % of FF | FF 3 | 19% | 59% |
| % of FF | FF 2.0.0.14 | 71% | 33% |
| All | Safari | 12% | 18% |
| All | Opera | 1% | 0.5% |
Overall, I’m a little disappointed with Firefox 3’s adoption rate. I’ve always assumed that people using Firefox are more passionate about their choice of browsers and would upgrade more readily. But perhaps this is normal for Firefox since I don’t know how fast FF2 was adopted.
A bigger disappointment is how IE6 is holding steady. What would it take to sink it?
Posted by Vincent Woo
I highly recommend listening to the MP3 and following along with the slides of The why and how: UI case studies presentation given at Web Directions North 2008 by Daniel Burka. On the surface, it is an hour presentation fussing over insignificant details but that is what’s so great about it. Much of it isn’t about aesthetics or graphic design. Instead, the spotlight is on the process of tweaking placement, wording, and prominence. It is about rearranging for clarity and directing user actions processes. It is about intuitiveness; the end users should understand why things are in chronological order or in a threading model. The kind of design, as illustrated in the presentation with Digg and Pownce examples, that exhibits Getting Real.
Daniel Burka’s examples are fascinating because he starts off with something entirely acceptable but they are then iterated into something that is clearly better. Better not so that end users bask in awe over it’s majesty, but through transparency and clarity in its form. Yet, it is the journey that can provide the direction, incentive, and inspiration that guides design, not just some divine inspiration or foresight.
One of the things that Daniel Burka talks about is his success with using HTML mockups. I whole heartily agree as I found sketching with pen and paper and mockups in photoshop have their place in defining the general form but I’m hard pressed to properly define function in this manner. I don’t feel like I’m the only one since I’ve converted photoshop mockups to webapps, but sometimes would run into issues and ambiguity that the photoshop artist didn’t expect. It’s not their fault but unless you’re working in a webapp or through HTML, you won’t be thinking about webapp related issues. So it is refreshing to hear a designer say (loose transcript starting around 35min):
“This is actually a mockup of about eight connected HTML pages a little bit of javascript and CSS files. And so this is something I didn’t do with the previous comment system. I went immediately into implementation. So implemented in real code. Which took a lot longer and wasn’t as easy to play with because it was half broken most of the time while the code was being written. And so what is happening here is I can play around with if I digg this comment what happens. If I bury it, I can actually change your vote now and if I bury it OK that’s what happens. I want to see the comment again after I bury it OK that’s what happens. You can hide it. I can report the user. I was playing around with these things and now these interactions I can actually kind of – it’s so awkward having a bunch of HTML files interlinked but being able to play around with these interactions means I’m significantly more confident this time that when we release this thing. The flow of when you’re playing around and writing comments and editing comments, I got it setup for what happens when you write a comment we open it and save it, you edit it, you save those changes, so all those things I feel much more confident that each of those little processes all fit together alot better, they’re alot tighter.”
Design is an organic, ongoing and collaborative process and one in which all team members should have a hand in. Here, we have an example of a designer crossing the boundaries and working partly in the realm of the web developer. In the same manner, I would love to cross the boundary in the other direction more often. But too often client project work necessitates design up front for signing off and limiting cost/time resources that prevents creativity and experimentation in the latter stages of the project. In such cases, the webapp’s growth is stunted before it has a chance to mature.
Continuous refinements occur alongside continuous inspiration. Daniel Burka shows example after example where he focused and improved on design elements post release despite how sufficient they were already. The lesson: please don’t discount the inspiration generated through production use. If given the freedom of multiple iterations, projects will flourish.
I leave you with one last presentation reference about finding design inspiration from within the webpage itself. Remember, form follows function.
(~40min into the presentation): “Like I was saying before with the yellow dig button, is take that idea then take it further. Let it design language breath through the rest of the site. And so the story format has it on the left, I took it to the homepage, so you take this really basic horizontal line, you add one little off center hatch to the page and it adds a sense of brand, a sense of identity to the page. Adds a little drama to the page.”
Posted by Vincent Woo
Yesterday has seen the release of Firefox 3 and it has spread far and wide. As of this writing, some 14 hours after release, there were 5,099,057 downloads. That’s a spectacular achievement and a clear message to all that quality and standards matter.
I’ve been running the release candidates and the difference between it and FF2 is dramatic. As much as I love Firefox and use it as my primary browser, it would noticeably slow down over time until it required a restart every 2-4 days. Inconvenient, but now only a memory.
With Firefox 3.0, Opera 9.5, and Safari 3.1 all succeeding, us web developers can now realistically dream of working without legacy constraints in the near future. While generally we’re still stuck devoting half our time and sanity to necromantic and arcane arts for the purpose of persisting the one undead browser, there is still hope. It is an ongoing battle but one that we will eventually win – inching closer to the promised land with every switch to one of the above browsers or upgrade to Internet Explorer 7.
Final note: For the web developers out there, get Firebug 1.2.0b3. It works great with Firefox 3.
