April 2013
2 posts
8 tags
User Styles: The Age
Alternate title: “The day I took Occam’s razor to The Age”
I really dislike visiting theage.com.au. It’s ridden with click-bait articles, annoying advertising and shameless cross promotion, but for some reason we can’t seem to shake it as a local news source. What else are we going to read, the Hun? I’m not alone in expressing these sentiments, and this is a...
6 tags
January 2013
4 posts
5 tags
4 tags
On "Page Weight Matters" →
tl;dr - page weight never stops mattering
It’s always a relief when you see your own personal opinions reinforced by industry heavy-weights. The linked article discusses the impact of page weight on the viewing experience of YouTube. There’s a prevalent developer ethos that HTTP requests are the devil, so combining and minifying (and ideally g-zipping) is the best way forward. I’ve worked on...
14 tags
iosOverlay.js — iOS Overlay/Notification Plugin
Here’s a plugin that allows you to place iOS-style notifications over your web app. It’s useful for showing short succinct messages, or notifying the user of what action is being performed. It’s great for the same reason that the native iOS overlays are too; it’s intrusive enough to grab your attention, but doesn’t steal focus entirely.
This plugin works equally...
7 tags
Styling File Inputs in iOS6 with jQuery Mobile
File this post under: “stuff that’s in obscure forum posts but not really documented well”. As per a previous post, iOS6 brought about access to the camera in Mobile Safari. While access is not real time (getUserMedia would be amazing), we are able to prompt the user to take a new photo or access the camera roll. Presumably for security reasons, styling file inputs in desktop...
November 2012
5 posts
8 tags
More Form Failures
In the post directly below I discussed the ramifications of bad form design on the overall customer experience. I compared Telstra’s woeful forms to those of The Commonwealth Bank of Australia, and how even a lethargic bank is beating them in the form stakes. Oh how I was wrong.
Unlike the Telstra forms, the Commbank forms do accept ‘space’ as a character. Transactions...
5 tags
An Autopsy of a Bad User Experience
I’d like to take a moment to share a bad user experience with you. Why? I believe it’s important to diagnose the how and the why whenever these issues occur. It’s one thing to feel empowered by social media and sound off your 140 characters of fury. But what does that achieve? How do others learn from these mistakes?
To try and explain what a user experience designer or...
7 tags
UX Lab 013: ThreeJS Battery
It’s been a bit quiet in the lab of late, and for that I apologise. To make up for it I thought I would have a dabble with something small in ThreeJS. I’ve played with it before, but never put out anything production-ready.
3D artwork has become pretty common place these days. But generally you’ll see it flattened, and in turn, unable to be interacted with. ThreeJS opens the...
10 tags
iOS Theme Update
I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.
The changes are:
Added support for jQuery Mobile 1.2.0
Support for, and styling of new popup elements
An example iOS style popup as per the image below (would be best if you set it up with a...
9 tags
Delta jQuery UI Theme
Hey guys, just a quick heads up that I released the “Delta” jQuery UI theme a while ago over on the blog of my employer, Kiandra IT. It’s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I’ve got to find some time to push up the fixes. All in all it’s pretty stable and cross browser compliant. It works...
September 2012
5 posts
11 tags
Wishlist: An integrated iPhone experience
I’ve always liked the way that the iPhone fades out and pauses your music whenever a phone call interrupts. It took a bit of getting used to, but now I can’t imagine it working any other way. So I think it’s understandable that it feels a bit disconnected that my phone, ringing in my pocket, can’t pause iTunes running on my Mac Book - or even music and video on the iPad and...
7 tags
3 tags
The Milwaukee PD Website
I first time I saw the Milwaukee PD website was on Awwwards. While the design treatment and technical execution was undoubtedly rich, I couldn’t quite put into words what was just so wrong about it all. It goes without saying that the American approach to policing is different to the rest of the world, but I still felt the agency was stressing the importance of the wrong information. Join...
5 tags
Introducing techevents.co
I’m pleased to announce the launch of a micro-site aimed at aggregating the multitude of tech events centered in and around Melbourne, Australia. It’s far from ready but with the sheer number of events in the next few days/weeks I thought it was important I get it out the door.
It’s buzz word compliant!
It’s responsive. It’s got some subtle parallax. It passes JS...
August 2012
1 post
4 tags
July 2012
4 posts
10 tags
UX Lab 10, 11 & 12
Here’s a bulk upload of three UX Lab experiments. I’ve been pretty busy, but these are ideas I’ve had for a long time and have been kicking around on my hard drive to some extent. I thought I’d better get them out and about.
UX Lab 010 - Blurred Modal Backgrounds
Modal dialogs are used in preference to regular popups because they generally disable interaction with the page...
6 tags
Beautiful Retina iPad Wallpapers
I’m not one for customising my iPhone or iPad to the nth degree, which is why I thought I would share this amazing retina iPad wallpaper collection with you all. A lot of wallpapers are suited only to lock screens, and contrast badly with the app icons of the home screen. But not these beauties! I really struggle to pick just one to use at a time, and I’m sure you will too.
Check...
5 tags
JavaScript Trends (Presentation Resource)
As long as I continue to participate in the in-house Kiandra IT Friday presentations, I’ll endeavor to open source and post my material online where it makes sense.
Friday just gone, I gave a quick talk on the advances made to JavaScript in the last 12-24 months, and what changes are on the horizon. It tied in nicely with the release of a high-level roadmap from jQuery regarding versions...
6 tags
June 2012
3 posts
10 tags
Repository Updates (iOS Theme + jQuery.Gantt +...
Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.
jQuery.Gantt
This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.
I received a fairly major (and...
14 tags
What iOS 6 Mobile Safari Offers Front End Devs
Update: Now that iOS 6 is out and the NDA is no more, Max Firtman has posted an excellent summary of new iPhone 5 and iOS 6 mobile Safari enhancements and regressions. It goes into further detail and mentions features that couldn’t be publicly announced while still under NDA (not that I was, I’m not a registered dev).
Corrections: Although I recommend checking out the above link, I...
7 tags
May 2012
3 posts
4 tags
Web Directions Code 2012 Wrap-up Slideshow
I was lucky enough to win tickets to the Web Directions Code 2012 conference in Melbourne this year. I had an hour to put together a quick little wrap up for our usual Friday in-house presentations just to show everyone else here at Kiandra just what they missed out on.
I spoke with John Allsop and he’s pretty keen to get the videos of the presentations up soon. They’ve collected all...
CSS3 Input Styling, A State of the Union - UX Lab...
David Calhoun’s iPhone slider built with an <input type=”range”> is a fantastic example of what’s possible with a single native input element, combined with pseudo and shadow elements. But, like most things these days, it’s Webkit only.
A recurring comment on HN goes something along the lines of:
Webkit only? Webkit is the new IE6.
But this is quite frankly...
1 tag
Installing PhantomJS on OSX for Designers
PhantomJS is a headless webkit-based browser with all kinds of nifty use cases. In it’s simplest form, it’s a javascript-driven web scraper. I’m writing this guide note for any novice users having problems installing it on OS X.
Ariya Hidayat wrote instructions on installing PhantomJS on OSX, but glosses over one of the most important steps that is assumed knowledge for...
April 2012
7 posts
11 tags
Repository Updates
iOS Theme for jQuery Mobile
Good news! I’ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.
A full list of changes and resolved bugs follows:
Supports jQuery Mobile...
1 tag
6 tags
9 tags
iOS 6, Mountain Lion and Beyond
Predicting development roadmaps is something best left to the professionals. Consider this list nothing more than a collection of rumours, leaks, patents and the musings of arm chair experts everywhere. Did I miss something? Think you know better? Sound off in the comments.
Siri, Siri, Everywhere
The question is not if Siri will make it on to the remaining devices, but when.
Server load and...
6 tags
jQuery Mobile 1.0.1 - iOS Theme Compatible
I haven’t touched the iOS inspired jQuery Mobile theme in quite a while, but a few of you have been messaging, mailing at tweeting at me asking if I’ll support the jQuery Mobile 1.0 build. And….. it’s done. Here’s the list of changes:
Updated to jQuery Mobile 1.0.1 build
Fixed graphical issues stemming from this: #23, #24 and #25
Page buttons now take on...
9 tags
bootstrap.footnotes.js - UX Lab 008
I love the Instapaper-style footnotes/endnotes that came about with the last major update. Here they are in web form, as a jQuery/Bootstrap plugin. Unfortunately there’s a dependency upon Bootstrap CSS/JS, but such is life. It’s retina ready too - as everything else should be these days.
Here it is in action:
Documentation and options are available on the demo page.
It also has...
March 2012
7 posts
10 tags
HTML iOS Notifications - UX Lab 007
I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.
It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions.
It has built in retina icon handling.
Doesn’t break middle mouse clicks when using a URL.
...
9 tags
3D Accordion Effect - UX Lab 006
I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.
Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is...
5 tags
5 tags
5 tags
4 tags
A Thin Veneer, Sitting on an API
The biggest benefit I get from iOS is difficult to quantify. It’s not a glorious, tangible feature that I can show off to friends and family. In fact it’s the absence of something that has changed the way I consume content. It’s advertising, and the lack there-of.
Websites take off unexpectedly. User numbers boom. Weekend projects demand major man-hours. Scalable systems never...
February 2012
3 posts
5 tags
jQuery-UI.toggleSwitch() - UX Lab 005
The last thing web devs need is another toggle plugin. But this was developed for sites that already run jQuery UI and don’t want the extra bloat of yet another library. It draws upon the theme .ui-slider for the look and feel, and can be applied to <select> elements with two child options.
Configuration options and examples are contained within the UX Lab page. I guess this warrants...
5 tags
Idle jGrowl Re-routing - UX Lab 004
Paul Irish wrote a pretty chill script back in 2009 for detecting when a user becomes inactive. It’s quite ingenious in its simplicity, as the best things usually are. What wasn’t explained fully is the ways in which this can be used to deliver a better user experience. It’s fantastic for preventing timed or asynchronous actions when users aren’t going to benefit from the...
7 tags
January 2012
2 posts
5 tags
December 2011
3 posts
3 tags
9 tags
6 tags
November 2011
5 posts
4 tags
