Retro gaming symphony

Love this. Only really works for gaming geeks though!

@

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.

@

Client - Footworks - user testing

Footworks is 98% complete and so before signing off the product you can check out the final site here:

footworksbysue.co.uk

Whilst you're at it, fill in this quick questionnaire and let me know what modifications you would like implementing.

@

PRP - artifact #6 - chinese horoscope development

Original:

Feedback suggested that people liked the intricate background but that the content above wasn't easy to look at - jarring occurred. So, I tried altering the background to see if anything else would prove less distracting.

It appears not!

To help combat this I have altered the button text to white, added more shadow to the boxes and reapplied the white layer with opacity on it, whilst sourcing a really nice picture.

It has an ornate wallpapery feel about it, and usability wise, people have desktop background with app links atop them so it is feasible after some modification. JUST TOO CLASHING!!

@

PRP - artifact #6 - another design

I gained inspiration for this design after finding an iPhone app called Flickit.

Within the app itself it continues the rounded corner buttons look. Slightly different from what we use in desktop websites, the film reel slides left to right. It acts as an input required slideshow.

I decided to consider this design also for artifact 6.

This first mock up incorporates quite a few of the lessons I have learnt about mobile design.

1. Buttons should all be large

2. List menus work

3. Button menus work

Henceforth, I decided to put all these into one package. As an addition, I tried the status bar field at the top as well. I think similar pieces of information, such as twitter, would be sensibly placed up here where people see other data should as the phone's signal, time, battery life etc.

I proceeded to add colour and experimented with green. Originally bamboo was contained as a texture but soon replace in mindful of requiring even more data to download.

Personally it just didn't feel right. Green is for nature, and therefore didn't feel as appropriate as could be for horoscopes.

In its place I implemented the colourings of a client site I have designed and implemented: The Energy Specialist. Indeed, this content focuses around feng shui, Chinese Horoscope etc and gave me the inspiration for this app's topic.

I much prefer this styling. It is less garish, more sophisticated. The cappuccino beiges and pale greys blend nicely and are more in keeping with the idea of chinese horoscopes - metallics holding something of the mystical quality associated with astrological predictions aka horoscopes.

One change I will work on though is getting the text to stand out a little more and contrast. Gold upon darker beige, or white upon beige isn't providing contrast enough as is necessary for devices that are used and viewed in variable light conditions. Increased drop shadows should help in this instance.

Notably the images used are square and not rounded corners, which is something more often associated with iPhone. I wanted to try and create a neutral device design.

@

Artifact #6 - Chinese horoscope web app - design ideas

Having worked with a client before on Chinese Astrology, I thought I could develop something similar along those lines for the mobile web too.

Incorporating earlier designs which were a bit more unique in their presentation, I have mocked up the following two ideas in Photoshop.

One is quite modern in its styling - blacks, shiny metals and gold.

This design wouldn't look out of place on the iPhone due to the colours it uses. I think it may be a little too cliche and tacky though. I prefer sophistication.

Button wise, these should stand out due to the shiny edge that has been applied. However, the glossy effect is not present and so they don't instantly impart touchable button.

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

Meanwhile, the other design is a bit more traditional in that the idea was inspired by a Chinese watercolour.

Red and white are not typical colours you would assocate with Chinese for a theme but I like this diversity.

It still needs developing a bit more, the red buttons seem a bit overpowering and non distinguished from the heading. However, the glossy shade applied to the buttons makes them seem more touchable and this is good for usability.

I learnt last time that by applying a design that is specific to one device, ie using the iPhone app design on an Android, it felt odd. Psychologically people would think it off kilter. This design is custom and unique so is not associable with any OS.

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

Notably the buttons on the homescreen are all quite large. This is intentional. Also learnt previously was that the size of buttons could decrease as you progress inside the site.

@

client - Footworks user feedback suggestions

One important lesson learnt through user feedback has been that they couldn't find their way back to the homepage once they had clicked into the site.

More familiar users of the web would typically identify the logo as housing this link, and indeed, this was how I initially coded it for Footworks by Sue.

However, taking the comments on board, I decided to better illustrate the capabilities of the logo.

However the first person to use this modified version believed 'home' to be part of the company branding/naming. In short, it wasn't an effective solution.

Fortunately the follow up solution was very easy to implement. The navigation options in the site work because they are all laid out in an easy to follow format. With a spare place under the information column I added a 'homepage' link.

Now when people want to get back to the site's first landing page, they will typically search around the other existing options that they know to work and find this additional one.

And such to say, the homepage link issue hasn't been mentioned again.

@

Some useful jQuery plugins...

Want a sliding photo gallery? Growing and shrinking icons? Tabbed divs? Image-free buttons?



http://webdesignledger.com/tools/14-fresh-and-useful-jquery-plugins

More and more I'm starting to think its goodbye time for Flash. Apple certainly think so.

@

PRP - artifact #5 - Opera Mini 5 render

Unfortunately the Opera Mini render on their site uses a smaller than usual resolution device. Touch screen nowadays sport a resolution of at least 320px (thanks in part to requiring a suitably sized screen to accommodate finger pushes).

Like Nokia, the results were patchy and conflicted with the JQTouch plugin.

Watch the Opera Mini 5 run through.

CSS3 was missed completely. The acknowledgement of button touch was overruled by the browser's own styling, it didn't render at all the red overlay specified by :active in the CSS.

More importantly, it didn't allow the user to navigate to any of the sections. This was no doubt again a conflict between JQTouch and the browser regarding anchored sections.

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

In all, poor and not very hopeful when thinking about coding an aesthetically pleasing, quick loading, cross-browser site.

@

Puny PNG

Found this little tool after watching BBC Click.

Similar to a compression tool I blogged about previously, Puny PNG shrinks image size and accepts a few of the common web image formats, JPG, PNG, GIF.

The claim is it swallows up to 40% of the memory size without hindering the quality. Useful as Photoshop sometimes only goes so far.

PUNYPNG

@

PRP - artifact #5 - Delicious Dahl on Nokia S60 platform

On this occasion it appeared that the screen reader was interfering a little with the S60 platform. After visiting so many pages the user input thereafter just wasn't actioned. When thinking about it, this could be due to limitations with the SDK or the OS, perhaps implementing the limit of how much data can be stored locally/cached on the handset.

View the Nokia S60 platform run through here.

As can be seen, the styling extends off from the original design as I created it for 320px wide. The Nokia is actually 360px wide!

Rounded corners worked somewhat on the homepage, but were quite patchy in their rendering. The background gradients on the main menu list also didn't execute. After clicking from the home screen, the rounded corners on inner pages simply didn't show at all, clear cut rectangles instead.

Again, this goes to show that cross-compatability (if that is what you're after) needs to have a few back ups available.

@