PRP - bemoko - cross-compatability on mobile platforms

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

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

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

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?

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

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

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!

@