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.

@

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.

@

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.

@

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

@

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!

@

Recommended Wordpress plugins

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

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.

@

Sticky footer

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.

@

Client - Footworks XHTML validation

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.

@

How the web has changed (for the better)

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.

@

CSS drop down menus

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

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

@

Opacity in IE7/8

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

@

PRP - Mobile web design gallery - good, bad, ugly

It's not that surprising the direction that mobile web design has gone in. Namely, most designers have tried to provide for a platform that requires efficiency. Consequently, you get a lot of lists, some styled, some not even that, for menus and links.

LISTS

Notably, the colour scheme that goes alongside this list can have a highly influential effect on how you initially view the site. The three second judgement that people make on a desktop site will work equally the same for mobile, if not faster.

The top right site, mind[medium] works well because the large text would be easy to read whilst using your device mobile and also the contrast of black on white proves to be helpful in such circumstances too. Furthermore, of the four examples, it offers the biggest buttons, another good thing to sport in mobile interfaces.

-----

LISTS with ICONS/GRAPHICS/IMAGES

Again, this tries to take the list format efficiency one further by providing an icon that should hopefully help inform users of what to expect from the link. The only problem with this comes when the graphic is too broad in its meaning and so confuses more than helps.

These offer much visual interest and where colour is used, it really brightens what could otherwise be a very uninspiring page. For instance, which one would you rather be interested in reading? AZTEK or ARCHIMOBILE? Obviously it's a different story when it comes to which is the easiest to read.

-----------

ICONS BASED MENUS

Inspired by the iPhone, or even going back to Nokias that adopted tile based main menus, the following are another viable option for navigation. Importantly however, it does take time to search through each of the icons to find what you are looking for. This wouldn't be the case with a big text link.

As can be seen, the icons make for a much slicker, more stylised interface. The only concern would be about how much extra data this would add to the page'a download, however I'm sure with thorough optimization, it could be remedied somewhat.

-----------

ALL OUT IMAGES

Having never really seeing anything like this on the mobile web, its difference attracted me. In particular, the WATCHMEN site looks really good on a mobile device and indicates that design can play a part of mobile design. They look almost magazine like. It is this sort of design that the iPad will probably lend itself well to for e-magazine subscriptions. Its worth a try on the smaller screens too though I think, see what lessons can be learned.

Leading on from here, a number of sites seem to have managed a nice inbetween, utilising images and text for a layout that is more in keeping with .com designs.

It is this mixture of image and text that I think needs developing for mobile web. Too many text heavy sites (although having their place) need counterbalancing with a design scheme that can benefit.

These sites have certainly given me inspiration for wireframes/mock ups for my next artiface - users choosing a designed site over a hyper-efficient one.

@