Responsive Design

This article originally appeared on the Public-i Blog and is reproduced here in full.

At the last Public-i user group meeting I mentioned, as part of the discussion around future releases, that we were re-thinking our approach to the design and delivery of our clients’ Connect sites; that we would be adopting a responsive design to our user interface (UI). This blog post is by way of a brief explanation of responsive design and our motivations for adopting it.

Next week’s reading list

I’m off to mainland Europe for 4 days next week (work related), and have decided that my commuting and ‘bored in the hotel’ time will be spent reading the following books, that I’ve not yet had a chance to get around to:

I doubt very much that I’ll manage all 4 over the 4 nights, but I will give it a try(!)

Have you read any of these?

If you’ve read any of these books please let me know what you thought of them. I’ll share my feedback in due course.

Ady

Initializr – Responsive CSS/HTML template

Just a quick note to all you web designers out there that @verekia‘s ‘Initializr’ – a CSS/HTML template for responsive design is now available for use. Here’s what he had to say in his blog post, Initializr: With Great Templates Comes Great Responsivity! :

Today I’m proud to announce that a “Responsive template” is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors…

I’m going to grab a copy for myself and have a play.

Ady

Excellent customer support: Alfred

Just wanted to run off a quick post to sing the praises of the people behind Alfred. I’ve been using the OS X add-in for quite a while now (can’t remember how long – years?) as a way to speed up my interface with the computer and the web. I won’t go into all the stuff it does, as that’s more than adequately covered by their website, and suffice it to say that I think it’s fantastic; I’ve got a custom search set up for greplin and others and find myself using the calculator far more than I ought to. I bought the ‘Power Pack’ upgrade more because I thought the guys deserved the money than to make use of the extra features (although I do use them now I have them, of course); the free version is powerful enough to suit most people’s needs.

Not only is the application good, but I’ve just had some of the best customer support that I’ve ever received. I rolled off a tweet, and within a couple of minutes was in a conversation with them trying out some stuff to see where the problem lay. It looks like the problem may be with Apple’s APIs but I’m more than happy with the response and outcome from the team at Alfred.

If you are a Mac user and have not had the opportunity to try Alfred, I heartily recommend that you do – it certainly fits in the ‘excellence in the everyday’ theme of my blog.

Ady

(I am not affiliated in any way to Alfred or the people behind it.)

RockMelt browser – initial thoughts

I’m not sure where I heard of the RockMelt browser (almost certainly on Twitter), but I signed up for early access and, today, got around to grabbing the ZIP file and installing it (Mac version).

I’m not going to repeat all the features here, which are readily viewable in their blog post.

So far I’ve found it to be fast and bug free, which is good. Here’s a quick list of (very personal) pros and cons so far:

Pros:

  • Personalised, cloud-based browser – history is universal and accessible from any RockMelt browser I log into. (Not tried this yet, though.)
  • ‘Click-through’ search results – use keyboard to traverse the search results in a side bar whilst the main page changes to show the result you are on.
  • Facebook & twitter share in-browser.

Cons:

  • It uses it’s own “me.lt” URL shortener. I want to use my own, please. (If you want to know why, see my post earlier this year.)
  • The help page shows a number of twitter accounts in the right-hand side panel, but I can’t see how to add more than one. Probably me, but I’ve already spent too long searching. (Sorry, can’t link you to their help, as it’s built into the browser.)
  • And whilst we’re on the subject, what about twitter searches / lists?
  • It’s build on the Chrome browser. It is, indeed, fast, but I really don’t like the UI.

There’s more experimentation to be done: obviously it doesn’t replace other Social Media desktop applications, like TweetDeck and Seismic, and I don’t think it’s built to compete with them; nor is it a simple ‘share this website’-based browser – it’s got more functionality and complexity. Rather, it’s somewhere in between the two, and I personally think that this is to its disadvantage.

Thanks for reading this far,
Ady

Losing control (of my links)

The announcement that Twitter is rolling out a URL shortening service integral to the tweet messaging system is probably good news to most – the upsides are:

  • Simplicity (don’t need to do it oneself),
  • Usability (‘intelligent’ naming of links in tweet)

But on the downside, we may be losing control of our links.

Now, I’m not privy to the full details of the upcoming feature and so it would be wrong of me to make assumptions, but here are a few of my concerns:

Can I get at the data?
I use bit.ly to shorten my links by hand, and have set up my SM client applications to use it, too, with my account details. I can see how (un)popular my links are in the outside world and have a single place (the bit.ly management page) where I can maintain and review things I’ve found useful and worth repeating. I also have the ability to customise the bit.ly url to be something that makes sense to me when I review link click-throughs.
Will I get the same features from the twitter shortening service? Or, indeed, do I need the same features? I still want to know how many click-throughs there have been; I’m particularly loath to lose the ability to see click-throughs on my link as compared to all people who have shared the URL.
What if I can’t get at the data?
Then I’m stuck. I can still use bit.ly to shorted my links, paste them into the tweet and then (presumably) twitter may or may not re-shorten them, but what about the easy to read naming? Or will Twitter ‘look through’ the bit.ly link I provide to the original URL and just shorten that, bypassing my short version and leaving me with no metrics?
If it ain’t broke
To a certain extent, I feel for company’s that believe the only way they can better themselves is by doing everything themselves (either by building it or acquiring it). However, there are many, many perfectly good, useful and useable URL shorteners out there. Why can’t the twitter ‘intelligent naming’ and shortening of URLs make use of one (or any) of these services, rather than lock us in to a specific one. (If it transpires that the service does provide this facility, then fantastic! I take it all back. Watch this space.)

iPad Experience – part 2

In a previous post, I recounted my initial thoughts on the iPad and said that I’d be trying it out on my little boy as a time waster / amusement.

I’m back from holiday and the iPad was a godsend, I have to say. I pre-loaded “Monsters, Inc.” and “A Bug’s Life” for Finn to watch on the plane journeys and, although he didn’t watch much on the journey out , he made full use of it whilst in the hotel room and on the journey home. He very quickly mastered the UI for the video player app – he’s had a lot of iPhone experience – and was jumping around between films and selecting his favourite chapters to repeat from the get-go. He also quickly found how to switch to the TV programme tab and spent a lot of time watching “Rex the Runt” cartoons (until his mum heard one of the characters say “bastard” and put paid to that – I guess it’s slightly inappropriate for a 3-year-old).

I, myself, did very little with it while on holiday. Didn’t get much of a look-in, TBH, plus wary of data roaming costs in a land where ‘free wi-fi’ is virtually unheard of.

Ady

Linkage

I’ve been sitting on these links for some time – I thought I should share them with you all. They’re in no particular order.

Metrics-Driven Design (slideshare)
Excellent presentation by Joshua Porter (@bokardo) from his UX London talk.
Cool website background (Big Butterfly Count)
Love the way the background to this site appears to be 3D. Website by @edmeritt, HT @boadworld.
User Experience Job Titles (Slingthought)
A categorised collection of the job titles around UX / UI.

iPad Experience

So, a couple of weeks ago I finally bit the bullet and bought an iPad. I was feeling flush and so went for the top-of-the-range 64G 3G one.

Trepidation

I was cautious about buying an iPad – unusual for me, as I am a complete Apple fanboi. I really couldn’t see the point or need for one in my life. I manage to come up with a couple of possibilities:

  1. It would make a good coffee table browser. OK, but if the family are going to share it I want multiple user facilities so we can all get at our own email accounts without the embarrassment of having to read each others’.
  2. I could use it for work. Here there’s a better fit, as most of my work is around documents and numbers, resourcing and scheduling. (In fact, Pages and Numbers, if we’re talking applications.) However, it doesn’t meet all requirements, as I sometimes code (PHP, SASS) and a lot of our core work involves video – so iPad’s lock down on video formats excludes a lot of things it would be nice to have the iPad do for me.

So, like Natalie Inbruglia, I was torn. My Apple lust made me want one and my practical side couldn’t justify it.

This finally resolved itself when I said to myself, “We could really do with an iPad for work. You know, for testing and that.”, which was the excuse I was waiting to come up with, and so I went out and bought one.

Two weeks later

After the (well attended) official unpacking ceremony at work, the iPad spend the first few days if its new life in  a bag doing nothing. I was still finding it hard to see what to do with it. Having spent the money, though, I did some research, got some apps and now it’s become a staple of my day.

I use it almost exclusively for work related activities; it’s great to take to meetings and I will be trying it out at a conference for the first time this week. (“Building Perfect Council websites ’10” – see you there!)

Although not exhaustive, here’s the list of applications I’m currently using:

Things
I use Things on all my Macs. The iPad experience is great, making good use of the larger screen that makes using it on the iPhone a bit frustrating. (That’s not Things’ fault, mind.)
Evernote
Again, Evernote is a staple application in my environment. I use it for knowledge management, mainly. Again, it’s been re-purposed for the iPad and is a really good experience.
Dropbox
I do all my work off Dropbox. Available on all my computers, and also viewable on iPhone and iPad. This makes my life so much easier, as I synchronise my iDevices with my personal laptop, so having my files available in this way means I can sync them across from my Personal iTunes, into the iWork apps on the iPad (see next).
Pages & Numbers
The user experience of having to synchronise via iTunes is not good, but tolerable. The iPad versions of these applications are lovely. Although not feature-full (which causes problems when you want to edit files) they are well worth using for document creation.
iThoughtsHD
On my Macs, I use Mindjet’s Mindmanager, but on the iPad I’ve discovered iThoughtsHD. It’s compatible with most mind map file formats and has the added advantage of being able to load and save maps to and from DropBox directly. I’ve used it a little and so far, so good.

The future

I’m off on holiday very soon, so I’ll be grabbing some childrens’ books and videos and putting them on the iPad; I think it’s going to be an excellent way to keep my 3-year-old occupied on the plane journey.

After that, who knows? If you have any great apps, I’d love to hear about them.

Ady