Is WAP making a return?

Facebook is launching a zero version of its site. It intends to be data light and charge free!

What this immediately reminded me of were the olden days of WAP - text after text after text.

Indeed, although this version allows you to update your status and communicate with friends, as soon as you click on a link to view a photograph the free status stops.

----------

I can see a benefit with providing the most stripped down version of the site - accessible to more people on more phones. However, this contrasts with what I have been pursuing in my testing - promoting design on touch phones.

Whether WAPs legacy is to face a resurgence, as this 0 version could help set itself as another form of communication, like text, or email remains to be seen. It really does open up that possibility. But I thought that Facebook worked because people could nosey and comment on everybody's photos?! A desktop/laptop priviledge, or is it in fact contextually unsuitable for photos on mobile devices? - Not quite what my results said for art #3, 5, 6.

@

Final artefacts produced

To round up all that I have made, mobile site/app wise, for my research into touch screen devices, the artefacts can be viewed on the links below:

Wedding Photography - available at: http://www.ashleyelton.co.uk/josefsamuel

Delicious Miss Dahl - available at: http://www.ashleyelton.co.uk/artifact5d

Chinese Horoscope - availablet at: http://www.ashleyelton.co.uk/artifact6

Obviously it goes without saying that these are best viewed on a mobile device! Preferably iPhone or Android.

@

Flash to Javascript/JQuery to CSS3

Found this article and think it proves really promising for interface design.

http://webdesignledger.com/tutorials/13-pure-css-techniques-for-creating-javascript-like-interactions

CSS is a really simple coding language and so with the main forward-thinking browsers having adopted CSS3 (albeit with certain ones holding mass-consumer-progression back) I think in the very near future you shan't need plug-in libraries and sites should be lighter and leaner (code wise) - just what Google wants.

Exciting times ahead... oh how geeky.

@

Still waiting for 70% of the internet to catch up...

This image above shows HTML5 comparability by the end of 2010. It almost encourages you to think that people still using IE6/7/(perhaps 8) deserve to be served less styled, less standards compliant content.

Still, I'm hopeful for IE9. HTML5 and CSS3 are welcome additions there, only problem remains is that people don't update their browsers!! Microsoft should perhaps send out ballot boxes more regularly.

Original article at: http://gizmodo.com/5542661/html5-going-to-be-on-most-modern-browsers-by-end-of-2010

PRP - artifact #6 - evaluation

This is my final writeup that ties up the last artifact created.

Those with touch screen devices, particularly Android and iPhone should point their browser to tinyurl.com/chinesehoroscope

"The final artifact sought to build on everything learnt in the previous test periods, whilst also contesting claims made in the literary sources.

CSS3’s opacity (RGBA) and rounded-corners were used, aware that degradation to lesser-equipped phones would equate to lesser-finessed visuals. Equally, typeface replacement plug-in Cufon was used, believed to offer the same assurance.

JQTouch’s anchored sections fuels a sense of speedy page loads, requiring only one index page for the entire site. Despite working for iPhone and Android, this plug-in unfortunately blocked less-equipped handsets from navigating the site. Consequently, plain anchors should be considered.

Pseudo-hover states were achieved through two means. Javascript image swaps were utilised on the homepage, but required pre-loading of the images. Windows/Mac OS exit buttons were implemented in the top-left of content boxes which when tapped expand beyond the finger to acknowledge the touch, achieved through image sprites. Sprites proved the more successful choice, functioning on more devices.

Graphically-led approaches raised caution in the literary sources but proved understandable to users. Comments were complimentary, “I liked the ‘x’ button” presumably due to its cohesion with desktop interface design. Additional symbols were used to depict positive (♥) and negative (✘)values. All test subjects interpreted these symbols correctly.

Fluid sizing was a successful consideration with both portrait and landscape wrapping content correctly. Despite some use of text-size:small, a 100% consensus ratified legible text.

Overall this artifact demonstrated that with the correct technology, relatively quick page are achievable alongside graphics permitting design. However, it also displayed the failure commonplace in alternate devices, mimicking desktop browser inadequacies experienced not long ago. If required to provide for all handsets, designs need to be limited, focusing more on page size. Alternatively, aesthetically pleasing design backed with component optimisation will require a per handset focus, almost app-like, for now."

--------------

Most of these points form to become a useful guide of what to include (and what not to include) in a touch screen mobile site design.

I am surprised in that some of the comments made in the literary sources have been disputed by my test results, a case in point being the use of images, or symbols. Admittedly though their use has been sparing compared to a desktop design, they still add worth to artifact #6. I think a good testament is that I would use them again in future builds of mobile sites, albeit aware of the risky repercussions and so paying suitable time to assess their success and effectiveness in the designs.

@

Proof the web has been and is being spammed?

Read this - http://news.bbc.co.uk/1/hi/technology/10105978.stm

To behold what is being said here, in the 70s, billions of web site domains were enough. Billions. 10,000,000,000 at least.

We now have only 300,000,000 left and its set to run out in April 2012.

Makes me think about all that is actually taking up all the space. Blogs, forums, feed sites, redirecting portals, torrent seeds, mySpaces, Facebooks. Surely we're spamming the internet?

Worry not though, trillions, (1,000,000,000,000s) more web domains will be available once more companies start adopting IPv6. Wonder what else we can fill the web with then?

@

PRP - artifact #6 - 2G/3G download speeds

I thought it worthwhile to double check the time it takes for the site to load initially.

Due to setup of the site, loads will not be a problem thereafter as everything is obtained during the one load at the start.

2G - 47 seconds ish (ouch) - http://www.youtube.com/watch?v=HzY3YKMWZvU

3G - 13 seconds ish - http://www.youtube.com/watch?v=Fh5gQE0MbTw

Still goes to show how painful a 2G experience can be. As I've mentioned before there are two categories into which a mobile site can fit - fast and lean, but not pretty, or slower but attractive.

All touch screen phones tend to have a 3G radio chip so it isn't too bad. The problem comes when there is no 3G reception! The site itself though is nippy, so perhaps a loading bar would keep a user waiting for the site to initially load?

@

PRP - artifact #6 - user testing videos

Here are two of the user observation videos that I took whilst getting users to complete certain tasks:

1. find out your animal if you were born in 1957
2. now read that animal's specific horoscope
3. tell me who you should avoid
4. what is the current chinese year and tell me a bit about it

--------------

-------------

Results:

• Users were able to read the text at the CSS size of :small;
• The red button placed in the top left corner of the page's content was recognised as the means to exit a page, no doubt in keeping with user's knowledge of Windows and Macs to close a window
• The heart and cross symbols were recognised and interpreted correctly
• People were able to find what they sought after eventually (sometimes people went round in a circle)
• The buttons were adequately sized, with only one users struggling to activate the link due to tapping the screen too quickly (a hardware limitation not the interface/design)

@

PRP - artifact #6 - iPhone & Android run through

After quite a bit of effort trying to resolve tricky CSS tags, particularly for Android renders that concern :active states, the site is now more or less complete.

The iPhone run through can be found here.

The Android run through can be found here.

The Nokia S60 and Opera Mini 5 runthroughs are also available but don't expect to see much of the site.

Unfortuntely they proved to not be competent enough to handle the site. This is a shame as in reality it would mean that the technologies currently in use would have to be reigned back, or certain hacks made to permit functionality. Doesn't sound too dissimilar to the IE browser fixes does it!!

-------------------

Notably, I am really pleased that I managed to get the site to wrap in portrait and landscape. This was achieved through fluid size formats for the main div in which the content is held.

Furthermore, although the iPhone with JQTouch enabled has a landscape specific CSS tag, this doesn't translate to the other devices. The problem I encountered concerned the background image remaining its original width: 320px.

Eventually I overcame this struggle by tiling the background image and rubbing out any part of the image that went off the left and right sides. This means it blends now.

LEFT: Original / RIGHT: Modified version with no content exiting side of image

LANDSCAPE: tiled background that blends

@

Effective TV ad - and fast

When this gets aired I think a lot of people will be willing to give it a go. IE can bid a bit more of its market share goodbye.

Shame that it isn't always quite so fast as demonstrated. Nonetheless, still the fastest out there and hence, my favourite.

@

PRP - artifact #6 - HTML character codes compatibility

Part of the condensing process required to mobilize information and make it easier to consume entails cutting out unnecessary content.

One way in which I have tried to do so is through symbols. Rather than words, you can put across information through image.

Importantly however, the literary sources all emphasised the risk this poses, when realistically, sites can be viewed anywhere in the world.

-------------------

I wished to convey the information is a less space-demanding manner, but also, easier to understand format, on the match-maker page. Users here can find out who their horoscope says they should get on well with, and also who not.

I first considered using an image:

(obviously not as large!)

The problem with this is obviously it would be another component to download. Admittedly it could then be cached and repeated by the browser but still, this was something to bear in mind.
Also, the image would need shrinking, compressing and means the above picture might not be as good a choice as it might become unclear and thereby fail to deliver the message as well as possible.

Secondly I remembered that the ASCII code has smileys ☺, which would work. Happy for like, unhappy for dislike. Problem is, the graphic might not translate well and provide enough detail when being viewed on a mobile device held at arms length etc.

Fortunately, after looking through the following site, I found one also for a heart ♥.
http://www.mistywindow.com/reference/html-characters.htm

----------------------

This seemed a better choice - it wouldn't add to the page load and the clarity/contrast could be achieved by using a black symbol on the white background.

Equally there are numerous options for a negative symbol. I opted for a cross ✖.

On iPhone this worked, on Android it did not.

Eventually, after trying different ones, I found the ballot box like cross to work.

I am happy with this and hope to prove that symbols can be used, if done so in a cognitively sensible manner. Obviously my assertions over hearts and crosses are Western ideas, people in the East might well not, and translating software would not be able to commute the symbols either.

@

PRP - artifact #6 - non-CSS view

The iPhone above demonstrates the site without CSS styling. This goes to show that bare basics still offer some sort of accessibility to the much lesser equipped devices.

Cufon styles the title - this being a decision I made in light of Android being non-compatible (so far) with font-face. I am still considering the use of the logo as an image. This means it will definitely work on Nokia, Blackberry too, but will add to the page load. Admittedly 3k might not be so bad, but the less the better.

-------------

This is the main bug I'm having with this artifact. To make a fully accessible, but rich mobile site means using tricks and tips, in turn meaning increasing data. On the other hand, you can make it really lean, utilising the latest CSS3 to dynamically generate content but at the cost of alienating the older devices.

So far, I'm leaning towards accessibility, but I still have a few ideas to help relieve the growing data packet.

@

PRP - artifact #6 - button hover states on touch screens

I encountered this problem previously and had to implement a quick work around that utilised the phone's :active/:hover states.

This time around I have taken the problem more to hand and tried a number of options to achieve fake hover effects.

-----------

The first one used image sprites as made popular by AListApart.

This however failed due to the CSS. Active states were recognised by iPhone and held, whilst Android needed hover but then found that the hover effect was still activated when you returned to that page.

-----------

Another option I tried was to use CSS directly and apply a large, noticeable area which would appear when the user had touched the button.

Again, this was doable on the iPhone but failed on Android.

----------

The last option I considered after reading advice directly from Apple was to use Javascript. A good heads up was actually Jacqui's portfolio site.

I experienced initial problems when trying to get text masked.

This technique is used so that the site will degrade if viewed by browsers that are text only etc and they will see Back rather than the symbol.

At first the image was sitting alongside the text. Eventually I altered the image's css to include text-align = -4000px.

This has proved the most effective method so far. I'm still trying to fine tune the CSS so that the hover problem in Android is curtailed. So far I am having to double up the :active and :hover tag together in the CSS.

@

PRP - artifact #6 - orientation of device

I'm currently building the site and this time focusing on using fluid sizing so that the page can wrap correctly when the device is positioned in landscape.

JQTouch already provides a .landscape CSS tag to style it any way you wish, but I now learn that the iPad (sans JQTouch) is getting in on the game.

http://www.cloudfour.com/ipad-orientation-css/

Simply use different stylesheets per orientation.

Alternatively, there's this option.

The only downside I can see if that if this is over 3G, it will mean that extra loading is required and therefore a delay is possible.

@