Hamish Beattie

Render your text without flash/images | Cufon

Hamish — Mon, 19 Apr 2010 00:23:13 +0000

Finally an accessible way to render text within your designs with out having to use flash/images with alt tags or JS with descriptors.

Cufon is a way to “render” your text on screen giving you cleaner looking fonts – i have put together a working example here

I wouldn’t use this with p tags or anything below a H2 as it isn’t selectable.

Broswer resolutions – according to Google

Hamish — Mon, 12 Apr 2010 00:50:24 +0000

Google has just released our something similar to my browser chrome entry although it is live working version of browser resolutions.

Through this tool you can view your site live with guides on where screen resolutions start and finish

http://browsersize.googlelabs.com/

It isn’t too bad although this would mean that your site would have to be live before you’d get a chance to test it.

w3 just published stuff on mobiles…

Hamish — Tue, 09 Mar 2010 03:55:48 +0000

The Mobile Web Best Practices Working Group invites implementation of the Candidate Recommendation of Mobile Web Application Best Practices. The goal of this document is to aid the development of rich and dynamic mobile Web applications. It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful. W3C invites implementers to complete an implementation report template. The group also published today a Last Call Working Draft of Guidelines for Web Content Transformation Proxies 1.0, which provides guidance to Content Transformation proxies as to whether and how to transform Web content. Comments on the latter document are welcome through 11 March. Learn more about the Mobile Web Initiative.

Designing a background for Twitter

Hamish — Tue, 09 Mar 2010 03:54:28 +0000

So you want to tell the world everything you do? Seems that people are tweeting about all sort of stuff… i am not a massive fan but have had some clients who want there own look and feel.

I have put together a multilayer photoshop document so you can see what i belive is best practice within the twitter environment.
NB – this is for screen res of 1280 X 1024 and above.

Download the PSD document here | 1.14Mb

Need to send large files?

Hamish — Tue, 16 Feb 2010 22:33:42 +0000

Just found a web service that allows you to send large files up to 2Gb

http://www.mailbigfile.com/pro/

Firefox Add-Ons

Hamish — Tue, 16 Feb 2010 03:52:19 +0000

Sick of Alt Print screen? not a fan of paying for Viso? Just stumbled on these awesome Firefox add-ons which can replace Viso and print screening…

Screen capture – Aviary
https://addons.mozilla.org/en-US/firefox/addon/11587

Viso replacement – Pencil
https://addons.mozilla.org/en-US/firefox/addon/8487

Google now has Buzz?

Hamish — Wed, 10 Feb 2010 22:45:59 +0000

It might not be a facebook killer as it has some limitations at this stage although any new products out there do cause the current main stream apps to rethink what they do… Hopefully this doesn’t lead to facebook having another interface change.

(this is first product i have notice from google with out the word “beta” in the logo- http://www.google.com/buzz )

Some general stuff (from Googie’s mouth)

No setup needed
Automatically follow the people you email and chat with the most in Gmail.
Share publicly or privately
Publish your ideas to the world or just to your closest friends.
Inbox integration
Comments get sent right to your inbox so it’s easy to keep the conversation going.
Photo friendly
See thumbnails with each post, and browse full-screen photos from popular sites.
Connect sites you already use
Import your stuff from Twitter, Picasa, Flickr, and Google Reader.
See updates in real time
New posts and comments pop in as they happen. No refresh required.
Just the good stuff
Buzz recommends interesting posts and weeds out ones you’re likely to skip.

My thoughts - (correct me if i am wrong)

No setup needed
Only if your with gmail already….
Share publicly or privately
Nothing new here
Inbox integration
This is a plus! i hate face books email system – if you put more than a few links you have to do a human test
Photo friendly
This is a plus although only if you have been already used other things like flickr, google photos and so on…
Connect sites you already use
facebook does this…. snore
See updates in real time
I dont like this – wave has a similar feature – i like to have about 30 seconds to realised i spelled annual leave wrong (true story)
Just the good stuff
Sounds like another awesome spot for adverts

Summary – well do we really need it? probably not… the plus side is that it might make facebook rethink a few things like the email, photo limitations.

I think some people might like keeping facebook seperate to there email.

Any who – lets see this develop.

Check accessibility via Firefox

Hamish — Wed, 10 Feb 2010 22:12:33 +0000

Just found this lovely little toolbar add on for Firefox to test accessibility.

http://wave.webaim.org/toolbar

Using Twitter as an alert

Hamish — Mon, 08 Feb 2010 05:05:39 +0000

For the development Sydney New Year’s Eve web site they wanted the abiliity to be able to add alearts to the site via multiple entry points (web, sms, web phone).

With limited time and no budget also i really didn’t want to build something from scratch (more so why would you?) i took twitter and turned it into an alert system which any one with a mobile phone and acocunt passwords could update.

All i did was repurpose a Twitter widget so that it would do exactly that – see screen shots to the right. The only catch is that the twitter account must be clear unless the alert will appear. So if an alert was needed to be sent out you would have to log in and delete the alert afterwards.

See the code working here

Dowload the code here

PSD Browser chrome

Hamish — Sat, 06 Feb 2010 07:03:54 +0000

Another consideration when designing a web site is what size do you design for? The type of site and who it is for will determine most of this although in general you should have ready made up standards.

My rule of thumb is to design for screen resolutions of 1024 x 768 although make sure you that have certain elements display correctly in 800 x 600.

The “certain elements” include Navigation, H1, first line of copy within the page fold and branding.

I have put together a chrome which has a few of my rule of thumb positionally as a guidance.

Download PSD chrome | 721 KB psd
Download PSD chrome Zip file | 84 KB Zip