Tag Archives: Web page

Marko Samastur – Easy deployment of site-extensions with a browser plugin [firefox3 launch party notes]


Description unavailable

Image by ccmerino via Flickr

Marko Samastur – Easy deployment of site-extensions with a browser plugin.

Starting with Zemanta presentation, since it’s relevant for the presentation. Zemanta is a tool for contextual matching for blogging platforms and has to support a wide variety of platforms.

The limitations of XHR was a problem because of limitations of security-model that doesn’t allow cross-domain POST requests. In case of Zemanta, we can use custom-build JavaScript function.

When to use extension?

When web-site as such, doesn’t provide integration points (e.g., Blogger.com platform), the other reason is if you want to use functionality that is not available within the normal browser window.

Process

First thing that you need to do, is that you need to find a place for widget. In case of Zemanta, we used right side widget. In this case, we used CSS and made it a bit narrow.

Blog better using Zemanta
Creative Commons License photo credit: chucks

But wherever you go, CSS selectors that you use, will most probably match styles of the platform. So if you use a widget on different platforms.

You can conquer this within CSS by writing selectors that are more binding than the default way. The one that we did (and is not the best way), we use a platfora of id’s and classes and then we use these names and classes that get injected into web-page and are more binding than the platform ones. This one works great if you use two files: general one and platform specific one.

Second way is to use nesting and “id envelops” – encapsulation and while it’s ugly, it’s the best way:

#zem1 #zem2 #zem3 h3 {

}

the second thing that you should try to use is microformats. After you put your widget into the page, you usually want that widget to do something, and for that we normally use Javascript.

Javascript problems

The variety of problems is large, but a short selection:

Extending Object and Array – it sounds a good idea in a start, but it’s a major problem down the road. It’s usually a bad idea that many JavaScript libraries (like JQuery), use Objects as configuration buckets and if you extend it, it means that all objects will have this and bad things will happen.

The second thing is, that if you have a web-site and you want to have it “extendable”, it’s a good idea not to step all over their feet and potential code.

Private name-spaces – either through anonymous functions or through object hierarchy. The problem is that sometimes you want to change behaviour of methods that are hidden behind namespaces (e.g., changing how dragging boxes works in 2.3 WordPress).

One thread implication: what comes later can rely on what came before. It’s not always true, because JavaScript API’s like DOM functions doesn’t always run in the same thread.

While you can do is to test your JavaScript on slow browser and computers, and on different connections. But this is often not enough, so you should actively protect from this and check to make sure the code and functions are there before you call them.

Useful tools for extension creation

Firefox extension Wizard – http://ted.mielczarek.org/code/mozilla/extensionwiz/

FUEL – http://developer.mozilla.org/en/docs/FUEL

Besttoolbars – http://www.besttoolbars.net/

Zemanta Pixie

Usability reflections: How Google failed to keep their BlackBerry experience simple

Getting a CrackBerry was my latest step in showing total devotion to my employers big ideas about changing they way people blog. Since we use Google Apps for part of our intranet solution I thought it would be nice to integrate this gadget with their servers. Sadly this made my already bad initial experience with the whole BlackBerry platform just worse. Even though they made a number of steps to confuse their users, I’m just going to concentrate on just their web page on Mobile offerings for Google Apps.

Snapshot of the Google Apps mobile description page with non-linked URL’s highlighted

The basic idea of the page is to communicate that their suite offers a wide variety of mobile options of accessing the content. Yet It does this as it was designed as each section was its own page in some mobile providers glossy section.

No hyperlinks

They make hyperlinks to their mobile addresses part of normal text, making it really hard to notice and read. It also makes it impossible for someone to open the page up in their mobile browser and actually click on the links.

Lots of diffrent hyperlinks

The links they want to promote (in between links for non-blackberry users) are:

Even though m.google.com tries to keep it simpe the blackberry address in the middle destroys the message from Google to go to m.google.com with some sort of appendix for the addresses.

Failure to actually include crucial information

One such example is at the bottom where they promote their docs service, yet fail to include address for mobile access. My understanding after playing around a while is that I have to (or at least am able to) download an extra app to have great experience, yet they do not tell me that.

It also seems that their idea of mobile is BlackBerry and then everything else. While I appreciate their thought that they support everything with BlackBerry badge, a developer in me has its doubts. There are also some other very powerful smart-phones and it would be nice to address that issue a bit more clearly. They also do not make clear if they target at everything mobile or just the smart-phones.

Not speaking users language

The last section casually mentions “or other phones supporting WebKit browser”. My iPhone has Safari inside, that you very much as other mobile phones had a “Browser”, “Mobile Internet Explorer” and such. It is a bit a stretch to expect users to know what rendering engine their mobile device uses.
The same section goes on to mention “xls” format which is probably known to users but naming it Excel spreadsheet (with .xls ending) would make it more clear for the wide variety of users who actually don’t see the endings of their files in Windows.

Not providing simple mobile accessible URL and total failure of consistency

While Google actually offers mobile search at http://m.google.com, the page there actually doesn’t tell you anything about their mobile offerings. In order to get that you have to Google around to find http://mobile.google.com which promotes a downloader for “all” Google products in one go. Which is a nice idea for the fact that the installer actually doesn’t offer GTalk client.
But all of this is besides the point as this information is not on the page which actually forces users to go back at browsing the inter-webs to stumble on this information somewhere.

What could they do to improve the page?

  • Provide a clear, nice URL on top with all the links or even better – make their installer at that page actually able to install all of their offerings.
  • Separate the BlackBerry page from other mobile offerings. It seems sensible to have different pitches for Blackberry, iPhone and other mobile users.
  • Make the URL’s stand out and normal hyperlinks so it is not that hard to notice them.
  • Make some line breaks so the text on the page is actually readable.

Conclusion

The page itself feels like it was written in some marketing department, without any actual purpose to be helpful for any existing users that located it through search in hopes that it will tell them how to actually mobile stuff. This is also the message of this blog post:

People will find your marketing materials while searching for help on the topic. Design it in a way that it will at least point them into right direction for real help, if not actually help them in using it.