Archive for January, 2008

Plaxo Pulse

Plaxo PulseA few days earlier I talked about Foxmarks to have your bookmarks synchronized across all the computers you use. Well for the same reason I was looking for a similar solution for the contacts in my addressbook. Same story as with the bookmarks: there were already some nice online solutions for this, and with applications like Plaxo or LinkedIn your data was always kept up to date by the contacts themselves, but I like to have that same data offline, preferably integrated in my application of choice.

Now the good thing was that I didn’t have to search for such service. I received an e-mail from the Plaxo team notifying me about their new Plaxo Pulse application that was able to do all the stuff I wanted. Great!
And I must admit, the guys at Plaxo did an amazing job. The most interesting features for me were the fact that I can import your contacts from my LinkedIn profile, and that I can synchronize in a bi-directional way with my mac’s Address Book. Now I have my contact data in my mac updated by the contacts themselves.

Besides the address book, you also get a handy online calendar, and even that you can synchronize with client calendar software like iCal. Just like in iCal or Outlook you can create multiple calendars, and for each calendar you can decide if you want to make it publicly accessible or not.

Another nice feature of the Plaxe Pulse service is that it allows you to have a sort of online business card. It’s always up to date as it is synchronized with my mac’s Address Book and by registering a username you get a short and easy url to link to it. I’ve always hated the printed businesscards as you need to buy like a thousand at once (of which 900 end up as post-it) and every year you have to buy new ones because some phone number or job title has changed.
Now I just print my name and the MyPlaxo url on my business cards so I can use them forever. ;-)

One remark: you might not want to use your openID for registering your Plaxo Pulse account as with your openID you can not use the synchronization plugins in your client software. The Plaxo team was aware of that so that could have been resolved by now.

Hope you enjoy it as much as I do.

Designing for web: some rules to consider

As a web developer I get delivered website designs by many different graphic designers. Some of them are experienced with designing for web, but many have a strong background in print and apply the same rules for web.
Needless to say that print and web are two totally different media, each with its own rules.
From my experience, I can point out some commonly made “mistakes”:

  1. Size matters
    Designs for print are often vector graphics that can be scaled to whatever size/resolution is needed. Designs for web are almost always created in Photoshop and can not be scaled afterwards. So to start with the correct size from the beginning is important.
    When the website will have a considerable amount of (dynamic) content, it is best practice not to work with a fixed height (f.i. to have it vertically centered). The browser window of Firefox (perhaps with some extra toolbars installed) on a widescreen notebook for example is very limited in height and nobody likes to end up with a double vertical scroll, one for the browser window and one for the content.
    As for the width, you just have to prevent a horizontal scrollbar. The big majority of computer screens these days have a horizontal resolution of 1024px or more. Substract the witdh of the browser borders and the horizontal scrollbar and you end up with a safe width of about 980px. Since many people don’t use the maximize button of the browser but instead drag the corners of the browser to enlarge it (and likely not using the full resolution that way), 960px is even a safer width. Besides that, 960 is easily divisible by 3, 4, 5, 6, 8, … making it easy to create a grid layout. Also does it facilitate the IAB widths (for bannering) pretty good.
    Be aware that if you add shadows to the sides of the site, that possibly those shadows might add up to the total width of the site.
  2. Transparency
    At the moment of writing, the majority of still many people are browsing the web using IE6, despite the available upgrade to IE7. IE6 does not support transparent png images, however there are some well functioning javascript workarounds to resolve this issue. Although this workaround can slow down the rendering of the web page, in my experience it stays within an acceptable range. So this issue is not as big as it has been in the past. Do watch out though for transparent and colorful png’s (png-24) as their file size could be pretty big.
  3. Fonts
    For websites or components to be built in Flash, there is not really a restriction in terms of fonts that can be used. Just know that special fonts have to be embedded into the Flash file which can increase the file size significantly.
    As for html websites, unfortunately there aren’t many fonts available. Arial, Verdana, Georgia, Helvetica are probably the most popular and readable ones. Be aware of that. Also there is no way to anti-alias html text, so you might want to disable anti-aliasing in your design to see a more realistic representation. UPDATE: Some of the latest browsers do render text in much smoother way than before.
    The use of a special font can be allowed in some cases (f.i. a limited amount of page titles or menu items) but then either special but limited techniques (like sIFR) need to be used or the text will have be converted into images, which is less interesting towards search engine crawling and maintainability.
    Oh, and don’t rasterize your text layers. Developers must be able to change the text (f.i. to reproduce other titles).
  4. Background gradients
    Not much to say about this one. Just don’t use vertical gradients as a background in places where the height is variable. In some cases simple linear gradients with a fixed height can be allowed though.
  5. No playing around with ads
    This one might sound obvious, but I’ve seen designs that didn’t respect this rule so just to be sure: ads like a leaderboard, skyscraper, banner, rectangle, … should stay untouched. Most of the time they are controlled by another party and comply with the IAB guidelines so for that that it is impossible to scale, rotate or crop them. In many cases the position of the ad is rather fixed as well. If you have to redesign an existing site and that site has a leaderboard in the top, chances are big that you won’t be allowed to change that position.

And to end with: it’s always nice to receive a well ordened psd file, with each component or section in a seperate folder, with properly named layers.

These tips should help you to reduce the conflicts with your web developer. ;-)

Foxmarks

FoxmarksSometimes you discover one of those nifty applications that offers a solution to a problem you’re coping with for a long time. In this case it wasn’t really a dramatic problem, rather an inconvenience.

If you’re using more than one computer frequently, I’m sure at some point you thought it would be really convenient to have your bookmarks available anywhere, no matter what computer you’re working on. There are already many applications that help you manage your bookmarks online, but I never liked the way it works. You had to browse to that website, login, add the url, … Same story if you wanted to look up a bookmark. Too sluggish for me so I have never actually used that.

But now there is some great Firefox plugin called Foxmarks which makes this whole process as simple as can be. You install the plugin in Firefox on every computer that you use and from then on your bookmarks get synchronized on each of those computers. Besides that, you have them available online as well, making them accessible and manageable no matter where you are or what browser you are using.

I’ve been using it for a couple of weeks now and it works great. This was just the thing I was looking for. Hope you’ll enjoy it too.

swfobject.js to active Flash-files in IE

Almost everyone that uses Flash-files in or as a website uses the swfobject.js to have the Flash file activated on page load in Internet Explorer, eliminating the need to have the component clicked first by the visitor. The use of it is even recommended by Adobe. I’ve been using that javascript for some time now and it works great.

Yet yesterday we noticed a very strange behaviour with one of our latest Flash websites in Internet Explorer only. When using the javascript like usual to activate the Flash component, somehow the Shift and Alt buttons got ignored by the swf and since many commonly used characters (especially on a Belgian azerty keyboard) can only be typed by using those buttons we had some serious issue. People had to fill in their e-mail address but they couldn’t type the “@” sign anymore.

So far I haven’t found anyone on the net with a similar problem, neither some information that could point me to a possible solution. Seems like a bug to me. In the meantime we’ll just have to disable the use of swfobject.
Anyhow, it seems that Mircosoft will release an IE update soon, changing the way ActiveX is handled like it was back in 2006. It’s about time and they should never have changed it in the first place.

Go to Top