Griffin Interactive tag:www.griffininteractive.net,2012://1 2012-03-05T23:03:56Z The all new Griffin Interactive weblog Movable Type 3.35 Mobile Browser JavaScript Performance tag:www.griffininteractive.net,2012://1.159 2012-01-03T21:34:16Z 2012-03-05T23:03:56Z When creating mobile web sites we must consider the use of JavaScript when manipulating the DOM. This is because the speed at which the mobile browser can perform DOM transforms varies considerably from browser-to-browser, the memory and processor speed... James Griffin

When creating mobile web sites we must consider the use of JavaScript when manipulating the DOM. This is because the speed at which the mobile browser can perform DOM transforms varies considerably from browser-to-browser, the memory and processor speed of the specific device.

]]> This table identifies the difference in performance between various Smartphone devices and browser.

These results have been extended from Peter-Paul Koch of www.quirksmode.org. His DOM speed test dynamically creates 250 unordered lists with 20 items each and appends them to the document using innerHTML.

Device OS Version Browser DOM Speed (S)
iPad 2 iOS 5.0 Safari Webkit 0.7
iPhone 4S iOS 5.0 Safari Webkit 1.678
Samsung Galaxy Nexus Android 4.0 Android Webkit 1.772
Nexus One Android 2.2 Android Webkit 1.9
HTC Desire Android 2.2 Android Webkit 1.916
Samsung Wave S8500 Bada - Webkit Dolfin 2.0 2.1
HTC Desire-Z Android 2.3.3 Android Webkit/5.331 2.33
Samsung H1 (Vodafone) LiMo R2 Opera 2.5
HTC Desire-Z Android 2.3.3 Dolphin HD 4.5.0 2.55
iPhone 4 iOS 5 Safari Webkit 2.561
Blackberry Torch 9800 OS6 6 Blackberry Webkit 3.411
Nokia N97 Symbian OS v9.4, S60v5 Opera Mobile 10 3.6
LG Optimus One P500 Android 2.2 Safari Webkit 4.223
Nokia N97 Symbian OS v9.4, S60v5 Nokia Webkit 5
LG Optimus Chat C550 Android 2.2.1 Android Webkit 5.3
Nokia E71 Symbian OS v9.4, S60v3 Nokia Webkit Ozone 5.4
HTC Desire-Z Android 2.3.3 Opera Mobile 11 5.8
Nokia N900 Maemo 5 Fennec b5 6.2
Palm Pre Palm webOS 1.1.2 Palm Webkit 6.7
Nokia 5800 Symbian OS v9.4, S60v5 Nokia Webkit 7.1
Nokia N900 Maemo 5 MicroB(Mozila Geko) 7.4
Nokia Lumia 800 Windows Phone 7.5 IE 9 10.101
iPhone 3G iOS 3.1 Safari Webkit 11.1
HTC Touch Diamond Windows Phone 6.1 Opera Mobile 9.5 12.3
iPhone iOS 2.2 Safari Webkit 14.3
Nokia E71 Symbian OS v9.2, S60v3 Jataayu 5 45
]]> Great Mobile Web Performance resources of 2011 tag:www.griffininteractive.net,2011://1.158 2011-12-30T15:46:08Z 2011-12-30T21:10:30Z 2011 has truly been a great year for Mobile Web, we’ve finally seen the adoption of Mobile First thinking within the web design community (originally coined by Luke Wroblewski way back in 2009). Retail sites have seen a huge... James Griffin 2011 has truly been a great year for Mobile Web, we’ve finally seen the adoption of Mobile First thinking within the web design community (originally coined by Luke Wroblewski way back in 2009). Retail sites have seen a huge influx of visitors from Mobile devices, forcing them to rethink their web strategy to include mobile. The increase in mobile web traffic has almost certainly put a strain on the Mobile Network Operators abilities to deliver data at speeds necessary for the end user. 2011 has seen some great articles, resources and recommendations for mobile web site performance. ]]>

1. Mobile Web & HTML5 performance optimization

Maximiliano Firtman’s talk at Velocity 2011 highlighting the difference of mobile browsers and key techniques in optimizing for mobile performance.
html5rocks

2. HTML5 Techniques for Optimizing Mobile Performance

Wesley Hales details exactly how to improve mobile performance though a number of HTML5 techniques
Web Performance Today

3. Web Performance Today

A selection of articles focused on Mobile Web Performance
Google Code

4. Optimize for Mobile

Google outline key areas for optimizing for Mobile Web
Performance Calendar

5. Performance Calendar

A selection or articles relating to mobile performance
Steve Souders

6. stevesouders.com site on Optimization

Some really great research and tools to help understand Mobile Web Optimization and Performance.
Blaze

7. Unraveling the Mobile in Mobile Web Performance

A look at how hardware, software and the mobile network influence mobile performance. Other note worth articles from 2011: ]]> Windows phone 7 - VISIO Template tag:www.griffininteractive.net,2010://1.157 2010-12-01T21:37:44Z 2010-12-01T22:10:06Z Created this WP7 Visio template a while ago, I've added it here so someone can save some time if needed. The plan was to add all the tiles, will have to add those at a later date. Includes generic... James Griffin Created this WP7 Visio template a while ago, I've added it here so someone can save some time if needed. The plan was to add all the tiles, will have to add those at a later date. Includes generic phone template and a Panoramic template. You will need the correct WP7 font Segoe WP. ]]> Create with HTML 5 today tag:www.griffininteractive.net,2010://1.156 2010-06-14T21:29:14Z 2010-07-05T21:39:37Z HTML 5 is still in draft (Editor's Draft 5 June 2010), however if you are looking to create sites that implement some of the new proposed features then why not use some of these APIs today. Examples of CSS 3... James Griffin HTML 5 is still in draft (Editor's Draft 5 June 2010), however if you are looking to create sites that implement some of the new proposed features then why not use some of these APIs today.

Examples of CSS 3

]]> Video/Audio API W3C Specification

What is html 5 video? (wikipedia quote...)

HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies


Canvas W3C Specification

What is Canvas? (wikipedia quote...)

The ability to draw, render graphs, create graphics, or other visual images on the fly.

  • Raphaël, JavaScript Library - raphaeljs.com

Storage

What is Storage? (wikipedia quote...)

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity (5MB per domain in Mozilla Firefox[3], Google Chrome, and Opera, 10MB per storage area in Internet Explorer[4]) and better programmatic interfaces. However, it differs from cookies in some key ways.

  • Local storage

Geolocation

What is Geolocation? (wikipedia quote...)

Geolocation is the identification of the real-world geographic location of an object, such as a cell phone or an Internet-connected computer terminal. Geolocation may refer to the practice of assessing the location, or to the actual assessed location.


]]> Smartphones' with Resistive and Capacitive touchscreens tag:www.griffininteractive.net,2010://1.155 2010-05-31T10:31:48Z 2010-05-31T12:16:53Z If you are thinking of buying a Smartphone here is a useful list of popular devices that sport either Capacitive or Resistive touch-screens. So what does this mean? Well, Capacitive allows for light touch navigation and Resistive is as it... James Griffin If you are thinking of buying a Smartphone here is a useful list of popular devices that sport either Capacitive or Resistive touch-screens.

So what does this mean? Well, Capacitive allows for light touch navigation and Resistive is as it would suggest, needs more pressure (more likely to use a stylus).

Capacitive Touchscreen (Common device - iPhone)

Pros
- Smooth and responsive interaction (Apple’s slick multi-touch gestures, such as pinching and spreading two fingers to zoom and reduce on-screen objects, are only possible on a capacitive screen).
Cons
- A bare finger is required for operation since the body’s electricity is blocked by gloves.
- Require glass screens that can shatter when dropped.

Resistive Touchscreen (Common device - Nokia N97)

Pros
Use of fingers, both bare and gloved, and non-specialised stylus
Cons
Poor responsiveness, Scratch-prone surfaces, components that wear out and break over time, less-than-perfect transparency
]]> table.content {width: 470px}; table tr.head {background-color: #ECECEC} table tr.even {background-color: #FFF;} table tr.odd {background-color: #E9F2FD}

Apple phones

Make Phone Touchscreen
Apple iPhone Capacitive
Apple iPhone 3G Capacitive
Apple iPhone 3GS Capacitive

Symbian phones

Make Phone Touchscreen
Samsung Omnia HD Capacitive
Sony Ericsson Satio Resistive
Nokia N97 Resistive
Nokia N97 Mini Resistive
Nokia 5800 XpressMusic Resistive

Android phones

Make Phone Touchscreen
HTC Tattoo Resistive
HTC Hero Capacitive
HTC Magic Capacitive
Huawei/T-Mobile Pulse Capacitive
Motola Milestone Capacitive
Samsung Galaxy Capacitive

Windows Mobile phones

Make Phone Touchscreen
Samsung Omnia Pro Resistive
Samsung i8000 Resistive
HTC HD2 Capacitive
Sony Ericsson Xperia X2 Resistive
Sony Ericsson Xperia X1 Resistive

Budget/Proprietary OS phones

Make Phone Touchscreen
LG KS360 Resistive
LG Renoir KC910 Resistive
LG Cookie Resistive
LG Arena Capacitive
LG Crystal Capacitive
LG Viewty Smart Capacitive
LG BL40 Chocolate Capacitive
Samsung Jet Resistive
Samsung Tocco Lite Resistive
Samsung Genio Touch Capacitive
Samsung Tocco F480 Resistive
Samsung Tocco Ultra Capacitive
]]> Mobile Design UK - April forum tag:www.griffininteractive.net,2010://1.154 2010-04-06T21:07:26Z 2010-04-06T21:14:36Z This months Mobile Design UK forum is entitled Mobile Apps vs Mobile Web, so if you're interested in Mobile Design then why not sign-up to mobiledesign-uk and register. You'll need to get your skates on as places for this free... James Griffin Mobile Apps vs Mobile Web, so if you're interested in Mobile Design then why not sign-up to mobiledesign-uk and register. You'll need to get your skates on as places for this free event are going quickly. mobiledesign.org.uk Sign-up and then register at Mobile Design UK April forum 2010]]> OmniGraffle Wireframe Stencils tag:www.griffininteractive.net,2009://1.153 2009-09-15T20:20:03Z 2009-09-15T20:38:17Z Massive thanks to KONIGI for releasing version 3 of their free OmniGraffle Stencil set. Large array of stencils featuring the following:- Buttons, Colour picker, Form elements, Calendars, Error and Confirmations, Video players, Ad units, Browser chrome iPhone, Safari and more.... James Griffin version 3 of their free OmniGraffle Stencil set. omni-promo.png Large array of stencils featuring the following:- Buttons, Colour picker, Form elements, Calendars, Error and Confirmations, Video players, Ad units, Browser chrome iPhone, Safari and more.]]> MobileHCI 2008 Presentations tag:www.griffininteractive.net,2008://1.152 2008-09-08T19:46:37Z 2008-09-08T19:58:59Z This years MobileHCI 2008 conference was held in Holland, Amsterdam. For those like me who couldn't attend six presentation decks have been made available: Text input for mobile devices by Scott MacKenzie Mobile GUIs and Mobile Visualization by Patrick Baudisch... James Griffin
  • Text input for mobile devices by Scott MacKenzie
  • Mobile GUIs and Mobile Visualization by Patrick Baudisch
  • Understanding Mobile User Experience by Mirjana Spasojevic
  • Context-Aware Communication and Interaction by Albrecht Schmidt
  • Haptics, audio output and sensor input in mobile HCI by Stephen Brewster
  • Camera-based interaction and interaction with public displays by Michael Rohs ]]> Vista you start me up! tag:www.griffininteractive.net,2008://1.150 2008-02-16T23:32:32Z 2008-02-16T23:57:04Z So some of us have moved to Windows Vista, a few teething problems but are please with some usability improvements. For instance the most obvious to note is that you no longer have to start in order to 'shut down'.... James Griffin Windows XP - Start it up then Shut it down xp-shutdown.png
    Windows Vista - Shut down vista-shoutdown1.png Although I still found myself hunting the 'shut down' option and inadvertently selecting the globally recognised symbol for stand-by. vista-standby.png]]>     Tag cloud filter tag:www.griffininteractive.net,2007://1.148 2007-07-16T18:14:09Z 2008-01-11T17:28:08Z Tag clouds are great to visually indicate the popularity or frequency of a word. But as tag clouds increase in size so it takes more time to find the content tag you're looking for. The efficiency of the tag cloud... James Griffin Tag clouds are great to visually indicate the popularity or frequency of a word. But as tag clouds increase in size so it takes more time to find the content tag you're looking for. The efficiency of the tag cloud can be improved by applying colour ranges to match word frequency, as well as better use of text size. The article ("In search of the perfect Tag Cloud" looks at a number of sites with varying techniques. Another way to quickly view tags by popularity is to filter them by a selected weight. Using the slider interface we can let the user quickly adjust the displayed tags. Using a number of popular scripting libraries here is an example of our Tag Cloud filter. Look at the fancy tag cloud sliderDownload the fancy tag cloud slider]]>
  • Prototype
  • Scriptaculous - Slider Demo
  • Slider example - aldenta.com
  • CSS event selectors
    • Download Tag Cloud filter (zip archive) ]]>     Managing multiple onLoad events with Prototype tag:www.griffininteractive.net,2007://1.147 2007-06-16T12:11:58Z 2008-03-27T10:55:11Z This is an update to a previous article written way back in 2003 "Managing multiple onLoad events in JavaScript". The article describes how to create an array of onload (window.onload) events in order to queue each event and enable the... James Griffin This is an update to a previous article written way back in 2003 "Managing multiple onLoad events in JavaScript".

    The article describes how to create an array of onload (window.onload) events in order to queue each event and enable the browser to perform onload sequentially. However this can all be forgotten in preference to the Prototype Javascript Framework and the useful Event Observe method.

    Use Event.observe instead of using <body onload="return myFunction()"> or DOM Level-0 event property window.onload = myFunction;

    ]]> Example
    1. Event.observe(window, 'load', function() { myFunction.init() });
    2. Event.observe(window, 'load', function() { myFunction2.init() });
    ]]>     Alien Attack tag:www.griffininteractive.net,2007://1.146 2007-05-28T19:43:16Z 2007-05-28T23:38:57Z Whilst looking through some dated archives I found some old animations, before condemning them to the waste bin I decided to upload a few to youtube for future reference. ISS-7 Alien Attack was a university animation project (1998), and created... James Griffin

    ]]> Back in '98 graphic rendering took days not hours, you would often have to produce an animation only to redo the whole thing and see the first results a day later. It would be great to do this project again using a Core Duo.     Introducing the Slider control tag:www.griffininteractive.net,2007://1.145 2007-05-17T19:01:14Z 2007-05-25T08:20:15Z The slider as a control interface can be found on a number of appliances within the home. Maybe more so within older analogue interfaces such as a television volume control or Hi-fi graphic equaliser. All in all the sliders prime... James Griffin The slider as a control interface can be found on a number of appliances within the home. Maybe more so within older analogue interfaces such as a television volume control or Hi-fi graphic equaliser. All in all the sliders prime use is to control a range, where the position of the slider defines the control. In this article we look at common uses of the 'Slider' within the home, the computer interface, web and Mobile UI.]]> Slider controls around the home The most common use that spring-to-mind are from older appliances, these have mainly been replaced by digital alternatives.
    Old fashioned TV (pre 1990's)
    Used to control volume, contrast and brightness levels
    Toaster
    Select toasting time for the appropriate bread thickness
    Retro Hi-fi graphic equalizer
    Used to control frequency levels
    Light dimmer switch
    Adjust the brightness

    Slider controls within computer operating systems

    Here we compare slider controls used on Windows XP, Vista, Apple Mac OSX, and the native Java user interface

    Audio Mixer - Windows XP
    Audio Mixer - Windows Vista
    Audio controls - Mac OSX
    Audio controls - Native Java UI

    Slider controls within web design

    It has really only been since the introduction of Web 2.0 and AJAX that the Slider control has been successfully implemented within web design.

    Not only is it technically possible to create such an interface but the use of implementation enriches the user experience. Just as with the other slider controls shown above, when the user adjusts the control an immediate response is expected, and it is this response that can now be achieved through AJAX.

    Popular and successful implementations of the slider are largely based around filtering search results.

    Kayak - Find cheaper flights
    Used to filter airline departure\return times
    Amazon.com - Search for the right diamond
    Used to search for diamonds on a whole range of criteria

    Other popular uses include controlling the scale of a map and selecting the time line of a video.

    Google maps
    Used to Zoom in and out of a map
    YouTube
    Controlling the time line of a video

    Mobile & handset UI

    Lastly we can see the slider control in use within both mobile UI and handset design.

    Sony Ericsson UIQ
    Graphical equalizer and volume control
    T-mobile MDA2
    Volume control slider on the side of the handset

    The mobile UI is designed using UIQ, a stylus allows the user to control the slider directly from the handset screen.

    ]]>     Google's User Experience for Mobile Applications tag:www.griffininteractive.net,2007://1.142 2007-05-06T13:06:37Z 2007-05-15T13:48:51Z Google have unveiled their Mobile User Experience Strategy for the delivery of Mobile Applications. To read more on the overall strategy check out the article "Google’s Mobile User Experience Strategy" over at Information Week. Google state that the application design... James Griffin Google have unveiled their Mobile User Experience Strategy for the delivery of Mobile Applications. To read more on the overall strategy check out the article "Google’s Mobile User Experience Strategy" over at Information Week.

    Google state that the application design can be segmented into 6 layers:

    1. Understanding users, anywhere, anytime
    2. Fits in your pocket
    3. More personal than the PC
    4. Consistency across modes
    5. Localization is intensified
    6. Integrated devices, modes, products
    ]]> Understanding users, anywhere, anytime

    Mobile users can be divided into three behavior groups:

    Repetitive now

    A mobile user who checks for the same information over and over again.

    Bored now

    A user with time on their hands.

    Urgent now

    User with a need to fulfill an immediate task.

    Consistency

    Maintain a consistent look-n-feel across all Google applications.

    Localization is intensified

    Drive mobile content through localisation - This is a key advantage for Mobile applications, especially with the recent introduction of readily available Location Enabled Devices (Nokia N95 - with GPS Mapping).

    In the mobile world developers have to be prepared to optimize for different devices, browsers, languages, carriers, countries and cultures.

    ]]>     BBC Explain Web Accessibility tag:www.griffininteractive.net,2007://1.141 2007-05-04T22:20:55Z 2007-05-05T07:44:30Z When a national TV network air a story on Web Accessibility you know, finally knowledge is spreading and soon enough people will take notice. Explaining Accessibility to clients back in 2003 was difficult, So it is great to see topics... James Griffin Effective Use of Style Sheets, dated 1997).

    ]]> This year could really mark a milestone in website redesign geared to Web Accessibility.