mental monologue

Retro gaming symphony

2010-06-19T09:17:00.002+01:00

Love this. Only really works for gaming geeks though!

Is WAP making a return?

2010-05-22T07:45:00.002+01:00

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

2010-05-21T09:53:00.000+01:00

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

2010-05-20T11:14:00.003+01:00

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...

2010-05-20T09:55:00.002+01:00

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

2010-05-14T15:45:00.007+01:00

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?

2010-05-11T11:20:00.002+01:00

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

2010-05-08T15:25:00.002+01:00

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

2010-05-07T12:13:00.002+01:00

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

find out your animal if you were born in 1957
now read that animal's specific horoscope
tell me who you should avoid
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

2010-05-07T11:22:00.011+01:00

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

2010-05-05T23:17:00.002+01:00

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

2010-05-03T17:46:00.007+01:00

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

2010-05-02T21:29:00.002+01:00

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

2010-05-02T21:07:00.006+01:00

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

2010-05-02T12:07:00.003+01:00

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

2010-04-25T18:03:00.003+01:00

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

2010-04-25T17:45:00.008+01:00

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

2010-04-25T14:54:00.005+01:00

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

2010-04-23T11:45:00.004+01:00

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

2010-04-21T19:40:00.004+01:00

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...

2010-04-20T11:29:00.004+01:00

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

2010-04-18T12:37:00.003+01:00

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

2010-04-18T11:58:00.003+01:00

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

2010-04-18T11:44:00.003+01:00

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.

PRP - bemoko - cross-compatability on mobile platforms

2010-04-15T20:43:00.004+01:00

I found this in webdesigner mag. The premise looks good - adding the bemoko library, you code in XHTML and CSS the design you want. What it then does is allow graceful degradation when accessed on lesser equipped devices.

Great in respect to my last artifact which demonstrated the need for cross-compatability in devices.

Shall put it to test and see how it goes.

PRP - artifact #5 - Delicious Dahl on Android

2010-04-15T20:14:00.002+01:00

Although JQTouch and Delicious Dahl were created primarily with the iPhone in mind, I thought it would be worthwhile to just check the web app on other devices.

Enter Android.

For some reason the emulator on Mac doesn't display all of the animations. On my HTC Hero they indeed work, albeit a bit stuttery - the processor speed is not as capable as iPhone's.

I was pleasantly surprised that the layout and CSS3 functioned on Android - rounded boxes, gradients all get a tick. Nonetheless I am aware of what doesn't.

However, touch events did not trigger - specifically the active states for the buttons. On iPhone when the button is tapped an :active class is activated displaying a red background colour to show the button has been pushed. Here on Android, nothing.

The consequence of this active styling failing is that the user isn't aware their input has been recognised, the web app appears to be unresponsive and so they push the button again restarting the process from scratch meaning extra waiting time overall. Frustration and agitation is not wanted.

This all occurs due to the way JQTouch targets iPhone specific touch states in the coding. The workaround would be to simply write some extra fall back code in the CSS for other handsets. Lesson learnt.

Another element that differs from the iPhone is that the browser menu bar isn't pushed up off the screen. Again it is a case of JQTouch targeting the specific code in Mobile Safari. It'd be good if this plugin library could be extended in the future to work with the other smartphone OSs.

PRP - artifact #5 - The Delicious Miss Dahl iPhone app

2010-04-14T18:06:00.008+01:00

Artifact 5 is done and I'm pleased with the progress I've made with JQTouch. Watch a video run through of the app here.

Alternatively, If you have an iPhone or iPod Touch you can point it at tinyurl.com/deliciousdahl too see it for real. For the optimum experience, add it to the homescreen and load it like an app. Full screen is available then.

Lessons learnt:

Use % for widths and heights means that it'll scale in landscape. As I opted in some places for px it meant the screen messed up a little in horizontal. Nevertheless, to counter this problem I learnt about .landscape class that JQTouch provides. (This is what people see if they look at the site on a laptop/desktop browser - their screen is landscape so they get the warning message).

Use CSS3 to lighten the load... gradients and drop shadows being notable techniques now achievable. BUT, remember that some phones don't work with this so provide a fallback i.e. a prerendered graphic.

Try to be original - although the iPhone is reknowned for good design, after making it to be emulate an iPhone's native styling (colour schemes etc are different) I want to push the boat out and do different design... perfect opportunity for artifact 6.

Designing for the iPad

2010-04-12T13:40:00.002+01:00

Although my research has involved looking at mobile devices, I meant this to be ones that go in your pocket, and you call people on.

However, with the introduction of the snazzy iPad, it seems that web design may have a new resurgence. Although apps are hugely popular on the iPhone, surfing the net is one of the iPad's key selling points. Fortunately, it isn't going to be too difficult a job to achieve. For one, Mobile Safari is pro HTML5 and CSS3. For two, it isn't Internet Explorer!!

http://www.8164.org/designing-for-the-ipad/

This article is good for introducing the key concepts for designing on the new touch screen slate.

For one, we have gotten increasingly used to people's screen resolutions increasing. Although a lot larger than the iPhone's 320x460, the iPad has a portrait aspect of 768x1024 (not including browser chrome).

The device is meant to be workable in any orientation though so it would be wise to consider using more fluid layouts, or limiting the master div to 768px. Again, compared to the 1000 pixels we're able to work with nowadays, it is a step down, but its still workable.

CSS missing a tag? image-align?

2010-04-09T14:52:00.002+01:00

In the middle of making my portfolio I needed to justify a row of images that will make up the gallery.

Three images in a row. The left aligning to the left boundary, the right image aligning to the right and then the middle image to be centered with equal spacing in between.

For text, you simply use text-align: justify in the CSS, however applying this to images obviously doesn't work.

I thought I could try and trick it by placing the imgs in a p tag. Fail again.

With a lack of CSS to make up for the problem, I have had to result to a round about hack, the solution being mentioned here.

PRP - artifact#5 - a good cooking app

2010-04-07T11:00:00.007+01:00

I've decided to make a cooking app (although it will be quite basic as I don't really have the cooking resources to make one!)

This decision was made after the great success of Jamie Oliver's effort.

Firstly, I praise this app for being different in it's design. It doesn't follow the iPhone way of thinking (well for the main body anyway).

The background throughout it this fixed rustic wooden floor. Elsewhere, modern web design has been employed - the jagged edge of the paper, along with heading tags which loop behind the background. These headings work well - the contrast in colour allows you to easily section off the content in your head and also easy reading of the text.

Furthermore, the custom font really makes a difference. The logo stands out well on the brown wooden planks and is a little atypical for an app, altogether. This difference is good.

The use of non-linear alignment also is interesting. Most things nowadays tend to be uniform, perhaps grid-like. The menus here are blocky and left aligned, meanwhile, the content on a paper graphic is positioned to the right of the screen.

It is really on here in the app that you'd be able to get away with so many rich images, graphical components and videos. Alternatively, to download this on the fly for example, in the mobile browser, would prove quite a wait and so indicates a wise choice for my upcoming artifact - preload graphical components in an iPhone inspired app.

The images really make a good impression and have been put to good use. They stand out and of course help illustrate the meals beautifully, being highly persuasive. The use of semantic visuals, such as the shopping list on notepad paper and in a cartoony font works well. Notably though, the app buttons a top this (in the black bar) could go unnoticed to some users. If you are to go all out with a unique visual design, then it would probably be wise to do this consistently... just as they do in the third image, with menu tabs pointing down. Again, this unique design is nice, and you notice this.

Looking at this app from a standpoint, the amount of buttons to push does feel a little daunting. You have the top menu bar, then the pointed tabs, there could sometimes be a menu list, in addition to the regular iPhone app-like buttons at the bottom to, which allow you to visit different sections in the app. This is something that is important to remember. Don't scare the user by providing too much at the same time. Perhaps try to be inventive - provide links behind reveal tabs, or pop down menus activated by one button.

The use of videos is a great idea. It makes use of the iPhone's great screen and also proves another benefit to aiding the user in cooking. I like how the video is slotted in without any special design, it simply flows with the rest of the content. Importantly, the use of the play icon, is noticeable and a universally recognisable symbol.

The same goes for using triangles at the end of the menu list - it enables the user to recognise this button will take them somewhere. Furthermore, the use of an image in the menu list allows you to see what is behind the link. Ultimately this just builds up a greater sense of an understandable design.

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

Overall, the uniqueness of this design makes it an enticing and effective piece. The realistic rustic visuals work well, surprising really on what is a shiny, snazzy gadget. Whereas some sites/apps use a couple of realistic graphics, this one makes them more of a feature piece. Again, different, and so noticeable and commendable.

Important lessons have been learnt for artifact 5 (content-wise) and also artifact 6 (design wise) - the ensemble result of all this research.

Inspiration for my portfolio re-design

2010-04-06T18:41:00.006+01:00

Fuel Brand

Although not the best for immediate UI, this site draws attention through its initial sparsity. The way it spans the entire screen gives it quite a strong presence and I like the use of quite basic hues.

The site could be criticised for not being formed in a more typical website way - a positive or a negative?

-----------

Rareview

I really like this site for a number of reasons.

#1 being the glossy box that holds the key text. This in itself is quite straight forward and to the point. This glossy box look has been made popular, and familiar to the public by Sky's use of similar graphics.

#2 The flowing rainbow colouring also has a nice soothing effect on the eye and limits any chance of the site feeling dead.

#3 I like the chunky but simple navigation bar at the top. It holds its own without being too distracting on the rest of the design.

In fact I had a look at the inside pages and particular liked the impact this purpley (turning to pink) hue had. It really stood out on the page and felt different - thinking about it, how many purple sites can you recall?

-----------

Tick Tock

This one is very graphic design oriented, but the large text has impact. That page upon which it sits is the actual wrapper div and holds all content within, scrolling above the fixed background. The colour palette would be a little limiting for a portfolio that needs to impress, but big type works for me....

-----------

FOUR24

Of all the sites, this one I liked the most. The colours is warm and welcoming, being quite uplifting at the same time. The gradient people probably wouldn't identify but as with the las recommendation, I think the gradient helps define the positive characteristic of this site. It draws your eye to the center and lights up the important content.

Furthermore, the type is large and draws the eye, being flanked by additional contemporary typefaces. Subtle illustrations add more character to this visual piece, such as the flame within the O. More importantly, if you care to look at what the site is about you would never associate the two.

---------

Jon Wallace Design

Again, I like this site for being 100% width and having clearly defined sections, that have lovely gradient and drop shadow effects to subtly please the eye.

---------

Adworks

Lastly, in comparison with the other finds, this one could feel a little uninteresting, no doubt due to the heavy greys in use. However I think it holds good ideas for demonstrating work. The five icons, once clicked (although hovering and slideshow could achieve the same effect) allow you to quickly demonstrate your capabilities, with the important visual proof then displaying center of the screen. At the same time, it allows you to neatly present your homepage whilst also categorizing for efficiency.

A person visiting a portfolio site will probably be encouraged to spend some time there if they see a range of the work, not instead of hiding it behind a "portfolio" link.

----------

These sites all offer useful pointers for my redesign. Importance lies in drawing attention through colour and type and sizing, but then also the work needs to maintain this. Expect follow up designs soon!

PRP - artifact #5 - first attempt at JQTouch

2010-04-04T19:21:00.004+01:00

After a lot of playing around and reading up on the subject, I have made good progress in getting started with JQTouch.

Admittedly it was frustrating at first, yet thats the case for most new bits of technology that you try out.

Despite the package coming with a few pre-made CSS stylesheet, I decided it worthwhile to learn how to put a design myself and so made one from scratch myself. I can potentially now use this stylesheet in the future, for client work or commercial work.

It's got some nice new CSS in there:

Gradients - TICK

DROP SHADOWS - TICK

FIRST-CHILD and LAST-CHILD - TICK

ROUNDED CORNERS - TICK

These last two in particular proved a revelation. It means that through CSS I can do this:

And any menu options in between will ignore the rounded corners that I have applied to the first and last child in the menu list. It's geeky, but stuff like this I love!!

-----------

The dummy version that I have been playing around at uses the slide to the left animation that occurs frequently on the iPhone. And all thanks to JQTouch it works in any decent mobile browser!!

So those of you with iPhones or ipod Touch's, check out my first dummy run of using jQTouch. It'll not show you much but it works at least:

ashleyelton.co.uk/artifact5

Onwards and upwards... Now to making my own design.

Photoshop CS5 - yes please, it does magic

2010-04-03T18:13:00.002+01:00

The desert road scene and panaramic cloud in the second half of the video in particular caught my attention.

How does the computer know how to do that? And so well?

Any dodgy crops now can be a thing of the past. This thing can make content from more or less nothing!!

Recommended Wordpress plugins

2010-03-30T19:40:00.003+01:00

After utilising Wordpress for a couple of web design projects now, I found this post useful. There are thousands of Wordpress plugins to use, and so sifting through the various good and bad offerings is made a little easier with this article.

10 good plugins for Wordpress. Examples include SEO, database backup, and super cache for quicker page loads.

PRP - more mobile websites

2010-03-30T19:06:00.006+01:00

Another good round up of iPhone compatible site, provided by Webdesignerwall.

What I find interesting is that personal preference lies with the ones that tend to imitate iPhone apps styling. They don't necessarily have to be the same colour, but curved edged boxes that hold the main content or links is styling that I seem to like more so. Or alternatively, big chunky links - both of which are illustrated above.

Nonetheless, there are a few things that I've picked up from this roundup and have proved encouraging/inspirng. Take this one below which shirks traditional navigation options layouts:

The navigation options are tucked behind a drop down list. This makes the styling cleaner - a benefit. However, by positioning the navigation drop down close to another button, it could prove more difficult by pushing the wrong one, due to their close proximity on an already small screen.

Also, listed in the Webdesignerwall round-up is an example of an already existing gossip site, so that means that Gossip Blox will now probably be shelved. I like the designs created so far, so I shall just have to repurpose for artifact 5 instead.

Pipes by Yahoo - RSS mashup

2010-03-29T17:55:00.007+01:00

One of the designs I suggested for my app was a female gossip centre.

Rather than just making a dummy app I hoped instead to get something that functioned and updated regularly.

Enter Pipes by Yahoo an RSS mashup aggregator type thing. This has been available for a while now yet it still offers great value. What's really cool is the user interface. It's all drag and drop and done through on screen graphics.

At first it's a little daunting to know what you are expected to do, or to even get it to function. But after following the video tutorials made available (RECOMMENDED) I have managed to amalgamate a suitable feed for the app, Gossip Blox.

Specifically this 'Pipe' takes the RSS feed from heatworld and digitalspy and strips them of surplus news entries older than a day. It then removes through a keyword search any duplicate content. Lastly, the content is trimmed to a mere three posts and ordered with the newest first.

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

This is all well and good. I had high hopes for implementing the designs that I had set out for the app. However, Yahoo have made presenting your pipe sort of accessible and sort of not. You can grab the script which they provide as a 'badge' and embed it, which I tried. Thereafter I tried styling and positioning the content through CSS however it didn't work as I expected. A lot of the formatting is overridden (no doubt purposefully) through the scripting. Certain properties are passable in the head of the HTML but not enough to enable the design I wanted. :(

Sooooo, although I've found a great tool, which I would recommend to anybody in need of one, this testing will have to go down as research and experimentation.

Sticky footer

2010-03-26T17:11:00.004Z

A recent freelance update I did required the footer to stick at the bottom of the page, but should the content expand down below it, it will push the footer down too.

After several trials, I have found this link to offer the solution: http://www.cssstickyfooter.com/using-sticky-footer-code.html.

It works in all the browsers, requires no Javascript or CSS clear fix hacks.

PRP - artifact #5 - iPhone GUI resource

2010-03-25T21:51:00.004Z

I discovered this resource whilst reading up on the iPad and how it will differ (or more likely won't) when compared with the iPhone.

As an example, the back arrow button has now become synonymous with iPhone apps and so I believe this package could come in handy as a valuable asset for my artifact's production.

http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

Obviously some of the components available here won't be possible for the html version of a mobile site - the 'label two', 'label three' scroller wouldn't work for example.

However, trying to maintain the visual appearance of an Apple iPhone app is important if you want to maintain the perception of quality.

Client - Footworks XHTML validation

2010-03-25T00:01:00.008Z

It was important to try and achieve validation for Footworks site as it better ensures correct rendering across browsers.

-----------

In my quest for validation, XHTML Strict, the most demanding validation testing - it took a bit of effort, the first problem regarding making a whole div a hyperlink.

The problem lies in the fact that divs aren't allowed to have a hyperlink wrapped around them, like this:

It breaks the rules set out for XHTML Strict.

It was eventually after reading this forum thread that I discovered why: http://www.webmasterworld.com/forum83/5857.html.

A quick change to the code, making the inline content have the hyperlink attached, and applying a 100% width/height, and making the targeted <> tag { display : block } means that this problem is eradicated and the homepage validates.

--------

Unfortunately, there is one page that does not get the green tick for validation on Footworks.

The Contact page uses a plugin called Contact Form 7. It's versatility makes it a great plugin - you can basically get the contact form to have the input fields you want, the correct input types you expect, error messages written exactly in the correct tone etc. Great...

However, the creator has made each of the input fields a list item. For some reason, he has failed to apply these list items in an unordered list tag wrapper. Hence, the fail.

I did try going into the plugin codings, looking at the php and javascript but failed to locate where this list was generated. I don't believe this to be that bad a fault though, minor really.

-------

In all the site validates all apart from this contact page. I am content with this, and will look into seeing if the plugin can be fixed.

Time to geek out - Nintendo 3DS

2010-03-24T10:15:00.005Z

Nintendo have announced that their next iteration of the DS will feature glasses-free 3D gaming. And that doesn't mean merely 3D graphics.

This following youtube video demonstrates what is already capable on the DSi, using the camera lens to measure depth and perspective.

If the new one turns out anything like this then I think Nintendo have got another winner on their hands. Damn new technology!! Depletes bank accounts!!

Share button widget

2010-03-23T22:53:00.003Z

The SHARE button is commonplace across the web nowadays, however here is a great customisable widget that encorporates all of the popular ones such as share by email, Facebook, Twitter, Windows Live, Delicious, Google Booksmarks, Digg, Stumbleupon to name but a few.

Whereas Facebook and Twitter offer their own independent APIs I like this for providing it in one package. Furthermore, the options to tweak it on the site, alongside the ease of implementation make it a great option.

Want to share on your site? Get it here.

PRP - artifact #5 - potential designs

2010-03-23T16:04:00.000Z

Having considered a gossip app for the iPhone app I am building, here are a few mock up designs I produced.

The first is more cohesive with app design in that it uses a bottom menu bar, that allows users to access other areas of the app. Typically it is coloured black, in keeping with app designs for iPhone.

One area where I have done something different is at the top. The status bar I can style and colour black. Alongside this then I have aligned another extra status-like component of my own -a Twitter feed. The way the bar curves up to the top of the page means that it will align seamlessly when viewed on the handset with the OS's status information.

All of the buttons in the app are purposefully high contrast for better legibility. In addition, they each have a glossy layer applied, something web2.0 but also a helpful indicator that it is a pushable button, being reflective of how physical buttons would have a shine from the light.

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

The other design came about as a result of playing with the various options within JQTouch. One animation is named cube and when activated, it 3Dimensionally rotates the screen around.

This got me thinking about the potential of incorporating this within a design. Enter Gossip Blox.

This then developed to imagining a homepage full of blox.

I like the unique and different design, as it will allow quite a bit of information to be displayed at one time but is still appealing and touchable.

The design progressed to something fashion magazine inspired. Such magazines all use black, greys and pink to appeal to their target market.

Admittedly the design is more edgy that the fashion magazines, but it would work well on the iPhone, being appropriate visually. Ideas from the first design have been incorporated here too - glossy buttons, big touchable areas.

What's different is that that bottom bar often found in apps is no longer present. When I conducted my research back in artifact 2, it took people a while to locate this bar. Instead, to speed up usability the more button has been incorporated into the main touchable area. Artifact 2 therefore has proved useful in identifying suitable design decisions for the touch screen.

How the web has changed (for the better)

2010-03-19T20:05:00.004Z

This article, found on gizmodo offers quite an interesting trip down memory lane - see Google, Apple, Toyota, Lego circa 199X using the Way Back website.

Type in a URL and it'll take you back as far as 1996!

What's scary is that some sites out there still look like this!! Cue us, the web designers 2.0, to modernise their image.

Proof that Apple hasn't always been the magical device making, design trend setters?

Read the article here.

Client - cross browser testing issues

2010-03-18T11:41:00.007Z

I've had to tackle a few minimal Internet Explorer bugs, but this time, Internet Explorer (no doubt through a fault) is rendering text correctly whilst the others (Firefox, Chrome, Opera) do not.

How I want it to look:

How it shouldn't look:

What is strange is that this unordered list works on other pages. I have checked and I believe that it is an issue to do with

not wrapping?

SOLVED:

I managed to overcome this problem by removing the float:left on the

and adding a big margin-left so that it clears the images that are a consistent feature on most pages.

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

Elsewhere, Internet Explorer 7 has been playing up, true to form.

The padding or height of the showreel was being ignored. This was easily fixed with a conditional styling statement at the top of the page.

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

The shadow effect that I have applied around the outside of the master div is not completing at the bottom of the page's content. Instead it runs off the bottom of the screen.

I managed to get it so the bottom shadow is displayed through informing IE7 to impose margin-bottom:0px on the sideshadows. The problem lies in the fact that I can't set a strict height for the side shadows as they expand with the content on the page. Overflow:hidden doesn't work.

Out of frustration, and with regret, I have had to turn off the shadows for IE7.

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

Lastly, IE7 is clipping longer sections of the custom font text found in the navigation bar.

If you look you can see it on foot health and foot health tips. I attempted to fix this by increasing the width of the line, increasing the padding and altering the word-spacing. The problem lies in the fact that SIFR reproduces text in the same size area that the default font, in this case Arial takes up.

After trying out a number of the Javascript options, I had not made any progress. Altering the styling in one place means it disrupts the rest of the browsers.

Fortunately the documentation page for sifr3 proved quite detailed in allowing slight adjustments. After trying tuneWidth, fitExactly and a few others, unsuccessfully, I tried letter-spacing, combined with tuneWidth and have managed to find an inbetween that fits both IE7 et al. Phew.

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

Ultimately this all signifies the benefits people can get from having the latest browser version.

PRP - looks like this app business is big money

2010-03-17T18:02:00.003Z

Despite only really knowing programming for Action Script, with the help of JQTouch I am getting along well with the styling of the pseudo-App.

It looks promising too if this report is anything to go by:

http://news.bbc.co.uk/1/hi/technology/8571210.stm

PRP - artifact #5 - pseudo-iPhone design

2010-03-16T23:25:00.004Z

As part of my experimentation into App creation, I have come across a great plugin called JQTouch. This basically packages Javascript/Jquery and allows the animations and also graphic based components of an Apple styled iPhone app.

After much fiddling with the CSS, (opting to make my own stylesheet rather than using the one provided) I've discovered that far more advanced tags can be used. This is due to the mobile Safari browser being compliant with CSS3. Having tested this previously, I realise I have missed a number of tags out. That, or they weren't around when I tested them? Probably the former.

For example, CSS3's border-image.

This tutorial provides a great way to become familiar with the technique. I needed it after having issues with the left pointing Back arrow.

PRP - artifact #5 - site ideas

2010-03-15T10:51:00.001Z

I decided for artifact 5 to make an app, so to eliminate some of the need of loading graphical site components.

First things first though, it's been hard to think up what content I should provide in the mobile app I'm making. After all, the content will influence the styling and so this is an important first decision.

Considerations so far have included:

Weather

This would offer the opportunity to make some nice weather graphics and depending on the feeds sourced, could offer some map associated or postcode results.

Flight status

I found a great site called FlightStats which offers RSS feeds for flight departure, arrival, delays etc. This one proved the most promising. They also provide XML data in an evaluation period membership, which students have been granted free access to if they were using the data into a new platform. GREAT SO FAR...

However, on going into the dedicated developer section of the site I find that there are already 3 iphone apps covering largely the same content and one for Android. What surprised me was that these apps are priced ones, and so people would have to spend to access this information that is already available for free on the main site or through various downloadable widgets. I figure it's the user interface and mobile capability that they believe justifies the charge.

Technology news

There are so many tech blogs/news sites out there. The good thing is that with this choice you can dip in and out of whatever story interests you, whilst also hopefully getting a more balanced opinion on news topics, as sites can be a little biased sometimes. OK, the news content could be repeated but to establish themselves as desktop sites, these sites have had to diverge slightly in their editorial content and so hopefully a mobile amalgamation of these sites wouldn't result in four news headlines all about the same thing.

Gossip

This last one I think has real potential. When I googled the apps existing they were all for American news. In Britain, Heat, Now, OK, Hello, Closer et al have big readerships and I wondered if this would translate in the digital market. Furthermore, iPhones has helped encourage females perceptions of a gadget product, and so I thought perhaps creating a gossip mobile app, with all the associative stylings would prove an interesting venture. This would likely contrast with the gadget news I suggested before which on the whole would likely incur a male following and thereby dictate the styling somewhat.

------

I based these ideas upon using RSS feeds to power the app. The purpose of using the app in the first place is that it will encourage more use if it is constantly updated. I myself won't be doing this, so in comes the useful really simple syndication.

SPP - catalogue images - presentation ideas #2

2010-03-14T13:03:00.007Z

Hi-res screenshot:

Graphics grid:

Zoom grid:

Span/spray:

Cover flow:

3D stack:

SPP3 - catalogue pictures - presentation ideas

2010-03-12T14:15:00.005Z

From the looks of this it would appear that I'm a bit of an Apple fanboy. Whats good though is that the mobile designs I've completed as part of PRP will be easily contextualised when displayed on a phone screen.

Likewise putting my work on the laptop screen, particularly the first one which is at an angle, makes it seem stylish and realisitc. The one that looks straight on feels a little dull and lifeless. Too clean cut.

Only problem is such an idea is that you wouldn't be able to get a close look at the work. Perhaps trying out a zoomed birds eye view of a desk will work?

Client - without SIFR styling

2010-03-12T11:11:00.009Z

As part of the design, I incorporated SIFR so to continue the content management approach. When my client changes the text in the Wordpress interface, the text on screen, in this custom font, will change also.

So far three components in the page design are powered with the custom font Nilland.

Navigation:

Introductory text:

Individual page headings:

The complication arises when a user doesn't have Flash , or have turned it off. Thankfully SIFR degrades, but it still requires checking what the site will look like, and style as necessary.

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

Navigation:

Fortunately it isn't that bad. Georgia isn't that far off width-wise to Nilland. The hyperlink underlines just need removing though to neaten up the navigation. Also, they need the grey shade used elsewhere so to aid consistency.

INTRODUCTORY TEXT:

Again, here it is perfectly reasonable replacement. However, not being a fan of Georgia bold, I tried altering it to font-weight:normal; and much prefer the results:

Notably the hyperlinks are in a darker colour that the rest of the site. This was simply addressed, whilst the underline is kept to indicate slightly better that it is a link.

Mobile platforms

2010-03-11T22:59:00.002Z

Courtesy of Gizmodo.

PRP - artifact #4 - button testing

2010-03-10T21:07:00.003Z

Here's a taster of the observations I took for the buttons user testing:

SPP3 - portfolio pictures presentation

2010-03-10T19:49:00.011Z

I've decided to put in a bit of research to see how professional companies out there display their web work.

It's harder to put together than you think. After all, a website is typically viewed in landscape parts, not in it's entirety (of course there are exceptions to this).

Here is the range of what I discovered:

Liquid light - slanted landscape zoom

Net dreams - hi res, straight forward

Addictivity -slanted portrait zoom

Bourn - browser screen capture

Soula - specific graphic zoom

Turbo Web - 3D stack

NClud - 2D stack spread out

Consider Creation - iPad & desktop

Un.titled - monitor

The Pixel - wooden picture frame

Skive - top left zoom

Tick Tock Design - laptop

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

Particular stand outs include the forward thinking, iPad design, alongside un.titled and ticktockdesign who using the screen or monitor on which the site would be typically viewed. It makes sense to put the context into the image too. Looking at it you know it to be a website. However, it does mean that the size of the actual website is smaller and doesn't have the same impact due to competing with the frame within it sits.

The others which zoom in give a more arty/graphics feel, which is good. But doesn't really indicate from the start that I am a web designer.

I shall give these monitor frames, along with altering the perspective of the image, to see which stand out as feasible for my images. One consideration is browser URL bar visible or not??

PRP - artifact #4 - 3G/2G speed test results

2010-03-09T22:06:00.010Z

HTC Hero, Orange, HDSPA (3G+) - 0:48 in total

HTC Hero, Orange, 3G - 1:52 in total

HTC Hero, Orange, 2G - 8:00+ the task was not completed

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

iPhone, 3G, o2 - 0:44 in total

iPhone, 2G, o2 - 4:11 in total

PRP - artifact #4 - 3G/2G speeds tests

2010-03-08T17:45:00.006Z

Part two of artifact #4 considers the download capacity/speed of 2G (EDGE), 3G and WiFi on iPhone and Android. Through my research I found a source that stated 3G was now around 1mbps.

I initally considered making a Flash piece with a loading bar and Action Script that dictates 1000k or whatever, has to be downloaded before proceeding. By filming this, I could then time how long it takes for the amount of data to be downloaded. However, straight away I realised this wasn't possible - Flash isn't allowed on iPhone.

Next up I considered using really graphics at set data sizes, i.e. 1mb, 800k, 600k, going in stages down to 10k. This proved slightly more difficult than I originally expected.

Here are some of the originals:

The problem lay in the fact that being a simple PNG they weren't 1mb or 800k in size. I considered duplicating the picture on the page when it loads, so effectively a 100k picture repeated 6 times would simulate a 600k download. However, once the picture cached once, the phone would just repeat it thereafter, meaning the test wouldn't be effective.

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

Consequently, I used bing as inspiration and used actual photography at set data sizes.

After a little tweeking I now have a set of images ranging from 1000k (the equivalent of 1mb) down to 10k. This should put the 3G and 2G networks to the test.

Testing results will be uploaded soon!

Client - SEO with HOBO

2010-03-08T11:06:00.006Z

After signing up, and downloading the HOBO Search Engine Optimisation e-book, it is detailed and informative, with a contents page that allows you to easily dip in and out on what you want.

Having some experience already in SEO, I was able to tick off some objectives before reading:

Submit site URL to Google, Bing
Produce, and upload a sitemap. This can be done via a generator, which makes the task simple. (Make sure to link the Webmasters to this sitemap)
Add the site to Google Analytics so I can track performance, where visitors are coming from, how long they stay on certain pages
Add the site to Google Webmaster Tools and Bing Webmaster Center to identify keywords, crawl errors, HTML suggestions
Include descriptive
Add
Use tags incrementally, to identify important sections in the site. These were the main page title, contact link, inner-page titles, useful links

I've still got the majority of the 150 page PDF to read through to hopefully scour more incite.

The first one that surprised me was the author's suggestion to not bother submitting your site's URL to Google. Fair enough, I hadn't and the search result still showed up. However, switch to Bing and it couldn't be found, so site submission was necessary here at least.

Astronomical time-lapse

2010-03-07T12:40:00.000Z

The White Mountain from charles on Vimeo.

PRP - artifact #4 - iPhone hover effect... sort of

2010-03-07T11:58:00.004Z

After a bit of scouring online, I learn that Apple has purposefully altered mouseover, mousedown to a more logical touchstart, touchend.

Through a great resource for general web design/app dev (which has covered work that I've done as part of my previous artifact testing) I've managed to find and insert a pseudo :hover class. In reality, it works like :active state.

Unfortunately it appears this is iPhone only. Android will require further coding.

PRP - artifact #4 - hover, active, visited states UPDATE

2010-03-05T11:59:00.006Z

Seems that luck isn't on my side today, as having just tried to implement onmousedown using Javascript, that doesn't work either! Android and iPhone being tested.

What it should have looked like

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

Mobile browser representation

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

To see the experimentation test as it should have performed, visit this link. The active link effects start on page9.html and will work in the desktop browser. Just not mobile!

I'll investigate and see if there a work around to solve this situation. Blogger use a similar sort of active link "halo". I'll start there.

PRP - artifact #4 - hover/active/visited hyperlink states

2010-03-05T10:44:00.008Z

It comes as no surprise that a:hover doesn't work on touch screen. Your finger hovers all the time!

However, after some pre-user testing, I'm now surprised to find that a:active, or a:visited doesn't work either on the mobile browsers!

What they should see - red for active link

What they see - greyed out area

This means my CSS styling fails to replicate a button being pushed down.

Another limitation to mobile browser renders.

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

Instead, then, I will have to head into a territory that isn't 100% guaranteed - Javascript onmousedown and onmouseup. I found before that Lightbox implementation wasn't always achieved, and so advised against any alternate coding languages/plugins.

However, in light of the active state predicament, I have no choice but to try!

mobile browser usage across the globe

2010-03-04T18:03:00.003Z

I'm surprised at how Nokia isn't top of all the lists. Their user base/sales are still massive. Then again, will the mass users of Nokia phones be net savvy surfers? Somehow I don't think so.

PRP - artifact #4 - button designs

2010-03-03T10:34:00.000Z

Highlighted in the last user testing, buttons proved difficult for users unaccustomed, or larger fingered to hit and activate.

In response, I have created a variety of buttons that will consider colour, shape, positioning, instruction and hover/active states to aid the users navigation.

-----------

The research document retrieved a source that recommended buttons that were finger tip size, i.e. 1x1cm. I have used this as the max size and worked down from here to see what size suffices, as large buttons can be a detraction in a nice design.

height=100, 80, 60, 40, 20

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

Now for some browser testing and checks...

That thing called the internet... its caught on

2010-03-03T09:51:00.002Z

JESS3 / The State of The Internet from Jesse Thomas on Vimeo.

The amount of photos on Facebook is alarming. What happens when the cloud gets too full? Oh thats right, Facebook will add some more servers!!

Design wise, the motion graphics flow on and off the screen fluidly, staving off any threat of dullness. The big type makes the content interesting and dominant on the page.

CSS drop down menus

2010-03-01T23:40:00.002Z

Just what the Doctor ordered. And from a site I trust.

http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

Client - clashing colours

2010-03-01T19:14:00.007Z

I've realised that through choosing orange contrasted with green I was limiting my colour options elsewhere on the site. On the top of the homepage I am trying to implement the phone number. After having used too much orange, I have tried to contrast with a green phone button but it looks awful.

I tried changing the banner than heads the slideshow. Here's what I mean:

None of these really go. For now, I've had to keep the all orange look.

Obviously the eventual pictures that go into the slideshow will affect the perception of the page.

Any suggestions?

Opacity in IE7/8

2010-03-01T12:23:00.006Z

Debugging proves to be what a web designer spends most of their time doing.

On the homepage, the slideshow which demonstrates what people can expect to find on the inner pages uses an alpha value to apply opacity.

Unsurprisingly, IE doesn't yet support the rgba tag yet.

UPDATE - just realised that rgba is a CSS3 tag and so older Firefox etc won't even support it. This means using the less useful opacity tag which unfortunately makes all children within have opacity too :( Help provided here. The opacity damages legibility so I'm going to just provide a PNG for as a background-image.

I found a developer online who has coded a quick app to translate the regular background-color: rgba(229,124,19,0.7); but for Internet Explorer 8,

into

{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2E57C13,endColorstr=#B2E57C13);zoom: 1;}

which you can stick in conditional comments for IE.

This works for IE8, but not IE7. Grrr

Goodbye IE6,7,8?

2010-03-01T11:31:00.005Z

Todays the day that Windows users, XP through to 7 will get a popup asking them to choose a browser.

It's an encouraging move but ultimately I don't think it will be as effective as hoped. If you picture the typical mindset of a non-techy web surfer, they will know that the existing blue 'e' on their desktop means internet. It even says internet in its name. Furthermore, they will know the user interface and have their favourite sites stored.

Enter a window asking them what browser they want to use and most will cross it off. Hopefully the pop-up will continue to appear and make people choose. Alternatively, the user will see the familiar blue 'e' and they'll get IE8 which is a marked improvement over its predecessors. This is the least we can hope for.

Encouraging news goes to show that the quick adoption rate of Windows 7 which comes prepacked with IE8 has meant that IE6 is now the underdog Internet Explorer. Good riddance if you ask me.

Fingers crossed for this.

Client - mid-build browser testing

2010-03-01T11:05:00.008Z

I haven't done it this way before, but I decided to look up the site midway through it's build and check it in the other browsers. It makes sense really, you can tackle problems as they occur. Development lesson learnt.

As can always be relied on, Firefox, Chrome, Safari all rendered as I wished the design to be laid out. Nothing really surprising there.

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

Opera seemed on the whole fine, but the line-height on the sIFR was off a little on random links. Nothing massive, but a little strange.

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

IE8 managed to tackle all the main site features well, which is encouraging, but struggled on the slideshow plugin. This may be a faux pas on my part. I used RGBA, a CSS3 feature I believe, and so this doesn't work in IE8. This can be easily remedied though by using opacity tag instead.

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

IE7 starts the typical run of IE errors. The divider line is incorrectly positioned, top right for some reason. Bizarrely this doesn't happen in IE6? Also, the shadow effect that I have built around the main div holding the content continues off the page. This needs to stop when the main div does.

Again, the orange alpha layer has been omitted. I expect this to work when I use a special IE stylesheet and select opacity instead. That is if opacity works for IE!!

Applying a GIF with transparency and background-repeat:repeat applied does not work either. I believe this is something to do with how the slideshow code works.

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

Internet Explorer 6 again has proved the bain in the build process.

The background image doesn't allow the content div to sit on top. Instead it was found at the bottom of the page. The shadow effects can be seen bunched together above, and obviously don't work as they are transparent PNGs.

I'm actually considering whether to ditch IE6 support. With today's browser choice, users will be encouraged to update to IE8. I will try to get the master div to sit atop the background, but other intricacies will require extra attention. Then again, considering the target market, it could well be that they are the type of people who don't update their browsers and ignore security updates... ??

Client - book now buttons

2010-03-01T10:50:00.004Z

The more I look at the word 'book' the more I feel like saying it like those up North.

In terms of suitability, I tried a range of suitable fonts:

Vag Rounded

Georgia

Nilland (the typeface used in the main design)

Steinem (popular free typeface doing the rounds at the minute)

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

These seemed a little too boxy, so I rounded the corners:

As can be seen I also tried using the contrasting green as I thought these buttons are important features on the page and so would suit being highly contrasted.

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

I think these may prove too contemporary and not formal enough for the site, but I'm pleased with the peeled sticker look. If not used here, always useful on a different project. They would certainly stand out on the page, helped by the big bold type.

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

Shall forward to the client as part of a mock up to see which she likes the look of.

SPP3 - employment - web designer #9

2010-02-28T15:16:00.005Z

Another good web design find, courtesy of the jobsite.

http://www.jobsite.co.uk/cgi-bin/vacdetails.pl?selection=934998433&src=search

HTML/CSS/Adobe CS4 Web Designer - Leicestershire - HTML/CSS/Adobe CS4. My industry leading client has a new requirement for a Web Designer. You will ideally be educated to Degree level and have proven experience in interface design, Adobe CS4, HTML, CSS, templating, with a solid understanding of front end troubleshooting/testing, fixing browsers. You will be joining a company that is experiencing a period of sustained high growth. Very exciting times ahead! You will be a key member of this team with the ability to communicate across the board with confidence.Salary is dependant on experience so apply with your CV now for immediate consideration!This role is commutable from Loughborough, Leicester, Coalville, Nuneaton, Hinckley, Coventry, Market Harborough, Nottingham, Melton Mobray and surrounding areas.

--------

This one seems another great opportunity at a location close to home. The skills required are all achievable for myself, being a Multimedia Graduate with a relevant degree and competency in Adobe Creative Suite.

The debugging required also is a fundamental component in a web designer's toolkit, that I have progressed in through my two years study in Online Environments. Working in a commercial environment should allow for an increased adeptness at achieving cross-browser functionality also.

The other details seem a little vague. Communication skills to inform and explain with the company's other departments and clientele can be provided through commercial experience in face-to-face and telephone customer service positions.

Hopefully these sort of company will be about in June/July time as I feel they offer a suitable junior entry position into the industry.

PRP - artifact #3 - user testing

2010-02-25T18:58:00.003Z

The user testing proved useful, a sample video available below.

The repeated navigation options were useful, accommodating the range of user inputs: some using the labeled back button, others the browser back button, in addition to the footer navigation links.

The main problem observed, and also acknowledged through user feedback was that buttons were difficult to activate, often requiring several repeat attempts.

Image compression helped alleviate lengthy download times somewhat. Performance on 3G and WiFi was acceptable, however 2G speeds suffered making loading times a frustrating experience.

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

From the results, buttons are highlighted as causing usability problems when not suitably presented. Designing and testing buttons in various shapes, sizes and colours will be a worthy experimentation area, also allowing consideration for graphics compression. This will be my next area of focus.

PRP - artifact #3 - iPhone scales down

2010-02-21T21:19:00.003Z

I spent a little while scratching my head as to why the iPhone was shrinking my design. Here's why:

Coding webpages for the iPhone

Worthwhile to know.

PRP - artifact #3 - mock up designs

2010-02-21T14:40:00.010Z

After a working on a few variants of designs, I think I'm getting somewhere in providing a nice alternative to the plain white design currently used.

1. Photo frame

This first one failed largely due to the frame I think. It's a nice idea trying to frame the photographers work within one, but I found it limited valuable screen space. If worked on a little, for instance, trying to get an ornate frame etc then this could go somewhere. However, the haphazard layout of the content didn't really help.

2. Big icon/buttons

Keeping the white theme used on the original, but adding subtle grey gradients, I thought that images were important, being quite an obvious design choice. Furthermore by doubling the way people can understand each link (you have text and the image) it makes for hopefully easier usability, in a sturdy grid structure, advancing on the last design's drawbacks.

Unfortunately though, it still felt a little lacking, a little flat. This partly is due to the nature of his job. Obviously you want professionalism, conservatism, not bright and brash colours for a quality wedding photographer.

3. Showcase the photographs taken

I instantly like the direction this goes in. It's not usual for mobile web, namely due to images like this not displaying correctly on the multitude of devices out there. However, what was established early on in my research was that touch screen phones all tend to have a reasonable sized screen to accommodate fingers. In turn, being touch screens they are modern with fairly reasonable resolutions - typically 480x320.

This one ended up looking a bit too theatrical, with the red curtains. But it put me on a good track. The contrast achieved with white on black will certainly lend itself to legibility, but at this stage the links didn't look too much like buttons.

I rotated the logo to increase space, and decided to try links in the top of the page - where the user will tend to me looking first, and most importantly, changed the picture. It again pulls the eye in and stands out through contrasting with the black menu. The transparency may need to be a bit increased though, as I want the picture to shine, not just the menu.

I included the arrows after each link, a popular convention, to demonstrate that they will take you somewhere when clicked on. This is a little technique picked up to aid cognitive understanding.

Having run out of space for the contact details, I decided to go with a message icon. Being aware of the detrimental effects ambiguous icons/images can have, I believe that the envelope should be pretty informative should the user be looking to write a message, or obtain the email address. Obviously, this will be proved/disproved in user testing.

For some variation I tried another photo and believe I have hit the right note. It incorporates beautifully the classiness one would expect of a wedding photographer, complemented by the non-standard typeface. How to implement this custom typeface will be an important lesson learnt.

This design links in well with the desktop site - a minimal white affair. Furthermore, the buttons are all well spaced, should be easily tappable and also easy to comprehend, having provided only the staple mobile content necessary. It may look a little too pasty in comparison with the previous iteration, but I believe that using gold as the third colour in my palette will work nicely, adding that touch of quality and class.

--------

So far so good. I have good hopes in accomplishing what I set out to do for this artifact - promote design as a valuable commodity in mobile websites.

Now to build it.

SPP3 - CVs

2010-02-20T11:24:00.002Z

Found this article online from Yahoo and it offers a few tips, most important one being to not talk about "responsbilities" but instead achievements on a job...

Looks like my CV might need updating again!! Obviously it's a case of what the employer wants, but I agree with what is said about concreting achievements, making you seem a more attractive candidate.

http://finance.yahoo.com/career-work/article/108853/10-resume-red-flags

PRP - artifact #3 - load times and images

2010-02-19T09:48:00.005Z

Bearing in mind that I want to take a designed route for the third artifact, I'm considering components that are typically no-no's on mobile devices - custom fonts, and images.

Unfortunately, these all add to the data download needed to get a page to render and don't all function on the browsers. Therefore, there has to be some work for this experiment: optimization. I will be taking note of download speeds over WIFI and 3G.

Got this tutorial which should sort out my problem. If images are turned off, the links will appear and work, whereas if they are on, the site will look lovely.