Iheff Web Design and Miscellany

Arrgh, too much to do not enough time to chill and soak it all in… I am sure you know the feeling. – Oh well time for a blab.

The Professional Heff
Anyway lets just take a quick run-through what I’ve been up to in the last year or so since I left the mighty wiggle. Moving to Net Natives has been a big deal, and I have really been enjoying it. It has certainly taken some time to carve my exact role in place at the marketing agency

As “Head of Mobile and Emerging Technologies”. my first big aim at Natives was to be the implementer of mobile versions (I say versions, I mean more integration and adaptation) of their current sites, opening them to the wider and more social mobile web market. This however just doesn’t work in the agency environment or not for our market at least. With a high percentage of our work in the education sector many clients want to implement a mobile strategy however do not wish to touch their current code bases.
(more…)

I’ve spent the last work converting my joomla install to a WP, you can check out the progress at http://soundphiles.com/wp/ I should do the big switch by friday.

Mobilification will take place this week, and I have already intergrated he social networking side using good ol’ buddypresss. I think this time i will use a mixture of mobile ‘code’ and some plain CSS in an effort to stick t the “one web” way of doing things but also offering me some flexibility in layout.

I’ll update this article when I’m ready for the switchover.

Working on UI can be fun, and long gone is the time where you would have to rely on native browser UI elements.

I plan on having some fun with this soon, and I want to really contextualise what the user is actually doing (In fact I think this is something deeply overlooked in our industry). In this frame of mind a mutualy exclusive radio selection or filter could be considered a switch, so I’ve made a nice little switch which I can CSS/jQuery up to the natural control – to hopefully contextualise the “switch” or filter a little more for the user, and simplify their process. I beleive its the little things like this that can really help the user along.

This switch could be related to the on off slide switch we have seen in the iOS, but I wanted a clearly visible unfiltered selection.

So at work I have been working with mobile to produce our new wiggle mobile website.

We are finally getting there with a suite of test phones, currently we have:

• Motorola Milestone 2
• Motorla ATRIX
• HTC WIldfire S
• IPad
• Iphone 3gs

our fleet is increasing and soon we should have a HTC HD7

When we are happy with our Android and iOS web sites, we can get more handstes and work on those. the next big hits go to BlackBerry and of course Windows Phones.

I have been working with mobile a lot recently and it really brings me back to the good ole days of web design, sure the browsers are a little more predictable now, although that must comes with practice I guess. But the process of testing is exactly like in 1998 when you would make your change then quickly check the browser/browsers, never trusting any form of the dreaded design view of any editor. I would go so far to say as that it’s a much more engaging experience… Although not to healthy on your work flow!

Now much more of the design to markup process is directly taken place in the browsers with their advance and extremely useful debugging and fiddling features. It simply makes our job a tonne easier.

Anyway mobile is fun and if your not already taking care of mobile it really is time to engage. Thus is an easy process with many routes you can take to suit your own experience, from simply writing a more responsive style sheet to delivering new layouts and includes that are device specific you can find a method that suits your style and skill set.

I think I’ll go into more detail in my next post and deliver some live examples put to practice on this site itself.

So we rolled out the wiggle mobile site yesterday, pretty cool. For such a release it went pretty well, with the usual surprises along the way. The deployment team did really well And it was kind of cool to be part of it.

Give it a week or two and we can truley start shouting. No one reads this so it doesnt matter!

Now we are manically tying up all the loosends that a project like this brings to light. With such a massive site we have never reaaly had a chance to go through and build it from scratch again there are hundreds of pages to the wiggle framework, being a pretty cool custom build front to back a projekt like this gives us a lot of time to review the site as a whole.

It can be very easy to get caught up in the “money” pages, where you know you can help impact the business on a financial level, you can often loose sight of some of the backend complexities – these though should never be ignored as they are in fact the finer pints of the customer journey and these pages are what will leave a lasting impression with the customer. How they feel through the experience of returning or exchanging an item for example may have a great impact on the decision of wether they’ll shop there again. Where the money pages can provide changes to the initial customer conversion we also need to convert them on the other side of the shopping experience. and leaving a god impression aftersale is as good (I think) as the conversion on the money pages and probably worth alot more as that customer is much more likely to shop again and again.

If you have a great company with great customer care and a focus on satisfaction like I do of course it helps alot.

So tonight’s website question was from another web designer I know, they had been contacted by the client of a new website they had just knocked up and had a problem that had stumped them.

This was it: The client did not feel they could copy and paste text in the document. She was trying and it was driving her mad as she couldn’t select anything in the web page.

My initial thought was there was some kind of faux div above the text in question I firebugged and firebugged – alas, to no avail. Then I though that the problem may be simpler than we thought, and I remembered tinkering with the pseudo CSS selector ::selection and immediatley clicked dragged over a section then pasted into PlusPlus it had copied and pasted the desired portion of the text…. so it was definitely something to do with the selection pseudo class, I looked through the stack of applied CSS on the given elements and found the answer.
Surprisingly there was no background to the selection, but it was set to be the colour white. The selection must default to black when the text is white, her site had a black background with white text…. when highlighting the text it had no affect.

.className::selection {
color:#424242; background:#fca3ea;
}
.className::-moz-selection {
color:#424242; background:#fca3ea;
}
.className::-webkit-selection {
color:#424242; background:#fca3ea;
}

My new motto.

“Simplify”….

Design, Code.

Take soundophiles.com for instance…. this is my favourite web throw up to date… but to get it online nice and quickly and so we could start collecting content, I’ve traped myself in joomla hell. What I need to do is make a template from scratch.

Joomla is such an over complicated system it is unbelievable, or it might just be the fact we have quite a complicated site going on here. However soundophiles is getting nice hits and its climbing. So to do it justice it needs a re-write from scratch really… where I can then SIMPLIFY a lot of faff.

I may see what I can do by just simplifying the current templates, but it could result in me having to rewrite it anyway and then I have wasted more time.

iphone awesomeness

The new wiggle mobile website is nearly ready for launching, I’m excited, and a little scared…. nothing wrong with healthy fear.

the site will use server side UA sniff to serve up a different template for wiggle pages specifically for mobile, Using the jQueryMobile project as backbone I look forward to hearing some customer feedback.