Pestbarn

As we all perfectly know, designers are narcissists.

Archive for the tag “html5”

HTML5 Canvas vs Raphaël, what should I use?

During October last year, I had the opportunity to test out and experiment with a lot of HTML5 Canvas stuff. I were to design a super simple play/pause button for a voicemail player that had to work in as many browsers as possible, including mobile browsers. I was kind of new to the entire Canvas element, having never done anything with it before, so this was a great learning experience, and also a lot of fun! Here is a quick summary of the comparison between the native HTML Canvas object, and the javascript lib Raphaël.

See the code at jsFiddle

<canvas>

Advantages: No extra lib needed, PNG exports possible, wider version support in desktop FF, Chrome and Opera, and wider version support in native Android Browser.

Disadvantages: Isn’t supported in IE8, more complex than Raphaël.

Desktop support: Firefox 2.0+, Safari 3.1+, Chrome 4.0+, Opera 9.0+ and Internet Explorer 9.0+

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G, and up), Android Browser 2.1+ (Éclair and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

canvas

Raphaël

Advantages: Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach javascript event handlers or modify them later.

Disadvantages: The lib is quite big (89 Kb, 31 Kb if Gzipped), no native Android Browser support for SVG in versions 2.1 (Éclair) to 2.3 (Gingerbread) – (needs a shim)

Desktop support: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G and up), Android Browser 3.0+ (Honeycomb and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

raphael

Annonser

HTML 5 Cheat Sheet

Jag hittade precis ett alldeles utmärkt cheat sheet för HTML5. Första kommentaren på bilden på Flickr lyder ”Seems kinda counterproductive to post it as an image”, då fick jag idén att göra ett eget cheat sheet fast i HTML5 istället för i en bild. Frågan är bara hur jag ska finna tid till det.

Via Flickr:
HTML 5 Visual Cheat Sheet is a useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Post Navigation

%d bloggare gillar detta: