All Thumbs and No Fingers

Book Review: Mobile First by Luke Wroblewski

Paul — Sun, 18 Dec 2011 09:09:57 +0000

If you’ve not heard of A book Apart they are brilliant at providing short to the moment guides aimed at people without the time to spend digging around through reams of pages. Just perfect for the train!

Luke Wroblewski doesn’t disappoint in this short guide on Mobile First for designers. Reading through this guide offers a wealth of advice, every second sentence it felt like another simple statement resonating within me. Here are just a few highlights (really) I particularly enjoyed, but for a few quid go and get the whole book:

Growth

Websites and applications should be designed and built for mobile first.
Smartphones were boldly predicted to out-ship the combined global market of laptop, desktop, and notebook computers in 2012. They did so in the last quarter of 2010 – two years earlier than predicted.
… even if you can create native applications for each platform, the cost of maintaining them can quickly make it prohibitive.
The combination of mobile and desktop experiences results in more engaged users across both sets of devices.

Constraints

Screens are small, networks are unreliable, and people can find themselves in all kinds of situations when they pull out their mobile device.
… design is the process of gradually applying constraints until an elegant solution remains.
… 80% of the screen space from the desktop was missing.
… Thinking “one eyeball, one thumb” forces you to simplify mobile designs …

Capabilities

… mobile capabilities allow you to do: reinvent ways to meet people’s needs using exciting new tools …

Organisation

Aligning with mobile behaviors also naturally aligns your website with real-world needs.
… content takes precedence over navigation on mobile.
… allowing people to explore and pivot to relevant content doesn’t have to mean piles of navigation bars that bury content.
If you need a fixed menu, better to fix it to the top, as Twitter has done.
… fingers are imprecise pointing instruments… [ isn't that obvious?, many examples I see say not so ] bigger [not downsized] touch targets are essential.
Destructive actions like cancel or delete can be placed outside people’s comfort zone.
Consistency in interaction approaches and gestures more than diversity. See Luke’s detailed guide here: Common Gesture Reference.
We are in a transition phase from GUIs to NUIs (Natural User Interfaces).
Develop with progressive enhancement in mind

Refer to Apples guidelines for target sizes and much much more

Inputs

Take advantage of input types, attributes, and masks to make mobile input easier.
Select menus are pretty tap-intensive: tap the menu once to open it, swipe the list that shows up to find the answer you want to select, tap it, and then tap down or close to go back to the form.
HTML5 input types can help people accurately answer questions that require a specific format.
… take the height of virtual keyboards into account …
Actively encourage input and allow people to contribute and create using their mobile devices.

Layout

… the meta viewport tag is really useful for designing mobile web experiences.
Forget pixels and instead concentrate on points, for example on all iPhones this is consistent at 320×480, only the pixel density changes.
Render rounded borders & graduated backgrounds using CSS3 but not to many or performance will be compromised.
Flexible layouts which expand and adjust to the available width of the device are essential.
Use break points to provide differing layout rules at significantly different device criteria. See more in Responsive Web Design.
Consider the differences between connected TVs, desktops/laptops, tablets, smartphones, and feature phones.

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Internet Explorer to Start Automatic Upgrade

Paul — Fri, 16 Dec 2011 20:12:33 +0000

Fantastic decision by Microsoft (at last) to start automatic upgrades of Internet Explorer for everyone. As a developer we have all spent time griping about IE 6, its not good for users and its not good for developers. The web is a potentially dangerous place and IE 6 is no longer good enough to keep the user safe. The browser has been criticised repeatedly for its security flaws and the pace of patches being made available to address these. Similarly the advantages of moving to IE 9 are gladly welcomed by all developers I’m sure. IE 6 is now over 10 years old (first released in August 2001) and offers little of the features and capabilities of modern browsers.

Microsoft’s decision to change direction on this will entitle everyone to upgrade to the latest browser remaining safer than ever before and improving how 600 million people experience the web.

Official news from MS on the upgrade and roll out plan can be found on the Windows Team Blog

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How to write good user stories

Paul — Sun, 11 Dec 2011 21:48:21 +0000

The ideas of agile project management have taken hold in a strong way. I often find myself explaining what a good user story contains and although I’m no expert I base my approach on four simple items.

How do I write a good user story?

1. Consider the user

By practicing user centered design you face a greater chance of understanding the exact requirement implementing this feature will provide. So make sure that the user story is written from the perspective of the end user in their language to achieve exactly what it is they want to achieve.

Its worth considering the difference between:

Implement a secure access 4 pin unique code which is digitally encrypted and expires after 15 minutes.

and

I need to make sure that the content is secure but easy for people to use, they have a pin number for our other systems could we use that and make sure they have to re-enter it if they walk away from the tablet.

In the first example its not clear to anyone why and what the outcome will be of implementing this. However in the second description it is clear why this is necessary and what the outcome will be. This makes it clear for everyone involved.

2. Keep them short and simple

Just enough to make it clear to everyone, no one appreciates reading too much content which could be re-formatted and presented in a way which is clear, precise and accurate. KISS!

3. Quantify the effort involved into units of a day or week

Once we have a good user story you should be in a position to work with a developer (if you are not one) to provide a robust estimation of the work involved (beware of risks and unknowns). Approach this task with a view to identifying the days and hours involved. If the task is smaller than a day consider batching a few other short tasks together. Remember to consider what else might be involved and point out that this is the time to conduct the implementation of it only.

Once you have a collection of user stories you should expect to implement between 3 and 6 user stories per a week. Of course this varies if you have more developers buts its a reasonable way of monitoring the scope and complexity of each user story if this becomes wildly wrong in reality.

4. Ensure you can verify and prove it

Once its been implemented you should be able to revisit the user story and test it. A good user story is one which when revisited you can verify that its been achieved.

Its worth considering the difference between:

Make the web site usability easier for users to navigate.

and

Adjust the user interface so that a prominent start here, navigation bar and favourites menu can be easily and consistently located on every page through-out the website.

Defining the user story this makes it easy to test and therefore prove it has been achieved.

User stories are a great way of capturing understandable information in a format more than just the analyst can work with but as Scott Sehlhurst points out you must remember to iterate and communicate often with the client to iron out the details.

Resources:

A short and rough guide to user stories however if you want to see a more in-depth explanation check out this book (it really is the 101 of user stories):

User Stories Applied: For Agile Software Development by Mike Cohn

More about Mike Cohn who is the owner of Mountain Goat Software.

Andrew Fuqua also has some good things to say on SCRUM user stories

** Update ** And finally I found some good info comparing User Stories and Use Cases by Scott Sehlhurst

Tweet This Post

Rails3 oauth user user authentication with OmniAuth Once again over at railscasts.com Ryan Bates has done an...

Related posts brought to you by Yet Another Related Posts Plugin.

App of the week: TiltShift Generator

Paul — Sun, 27 Nov 2011 09:16:00 +0000

Tiltshifting has become quite a common effect, in this short article I’m highlighting the best app I’ve found for getting something similar with just your iPhone.

Tiltshift involves adjusting the plane of the camera to selectively focus specific areas of a photo. It is used to make minatures of normal looking scenes. Some amazing photos like this one form Flickr by ArnarBi

Or these over on smashing pumpkins but now you can have ago with something passable (well kind of) for just £0.69p using this little app. http://itunes.apple.com/gb/app/tiltshift-generator-fake-miniature/id327716311?mt=8.

The app has a nice interface and allows you to go back through your picture library and adjust the settings.

For the first couple I tried it turned out not bad but you do need to find shots with have a long depth of field (the photo should have something close which extends into the background) to get the best results.

Before:

After:

Tweet This Post

Downcast: Favourite App of the week Podcasting is still growing at an ever increasing rate and...

Related posts brought to you by Yet Another Related Posts Plugin.

Did you know?

Paul — Sat, 19 Nov 2011 08:00:32 +0000

Great video – are you one of these statistics?

Click here to view the video on YouTube.

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Downcast: Favourite App of the week

Paul — Fri, 18 Nov 2011 09:47:59 +0000

Podcasting is still growing at an ever increasing rate and the tools out to date have been slightly too cumbersome to work for me. Not so any more with the availability of Downcast.

Q: So what is downcast?

Downcast is an app for your iPad and iPhone which enables you to listen, find, download and watch podcasts on the go.

Q: So why is downcast good?

It solves the problem of having to go back to iTunes to sync and download the latests casts from your favourite people which is a great time save and really should of been this way from the start.

Q: Sounds good how have you got on with it?

Well I’ve found it very simple and the built in directory has opened up some new entries I hadn’t found previously not to mention my old favs. I’m off to Paris next month so its great to be able to sit in a coffee shop find, download and listen to a podcast like Coffee Break French.

Q: Is it easy to use?

Sure. The app feels like a nicely thought through design which offers a menu of tools to play back those that you’ve already downloaded as well as access more if you want to download others. In all its contained from one simple scrollable screen allowing you to easily use whilst traveling on the train, bus or hooked up to the stereo. Its definitely worth the £1.49.

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Switching a rails app from mySQL 5.1 to postgresql 8.4

Paul — Mon, 29 Aug 2011 18:13:17 +0000

Switching a rails app across to postgresql became a necessity recently due to the range of licencing and ownership considerations which have affected mySQL recently. Not wanting to be restricted in some way in how I utilise my app I decided to investigate using the popular opensource postgresql database.

Firstly you need to understand how being more standards conformant may affect your application. If you have been avoiding activerecord for perhaps performance reasons in some queries check to make sure they are going to still work the way you expect.

My checklist includes:

Text comparisons are now lowercase
Quotes follow the SQL standard and using single quotes not double as mysql accepts
tSearch2 as an alternative to solr and sphinx and its built in
Tests
The knowledge that my app doesn’t use anything non standard so should just work

How to install postgresql on Mac OS X Lion:

Installation is very simple and mostly covered elsewhere but as a quick reference I did the following:

Download and install macports from macports. Take the .dmg as this is bar far the easiest option.
From time to time you should run the following once installed to keep everything up to date.
```
sudo port -v selfupdate
```
Open terminal.app
The following commands will install postgresql and postgresql-server
```
sudo port install postgresql84 postgresql84-server
```
If like me you want to know where everything is installed use this command:
```
port contents postgresql84
```
If like me you fine the mySQL query browser and workbench useful then install the equivalent for postgresql
```
sudo port install pgAdmin3
```

Once installed you can get on with configuring and using the database.

sudo mkdir -p /opt/local/var/db/postgresql84/defaultdb
sudo chown postgres:postgres /opt/local/var/db/postgresql84/defaultdb
sudo su postgres -c '/opt/local/lib/postgresql84/bin/initdb -D /opt/local/var/db/postgresql84/defaultdb'

If you create the database folders as postgres and initialise the database with this user they must also own the server process.
Finally start the database
```
/opt/local/lib/postgresql84/bin/postgres -D /opt/local/var/db/postgresql84/defaultdb
```
You can now launch pgAdmin3 and connect to your localhost. Macport apps can be found in /Applications/Macports

How to get Rails talking to Postgresql

Once you’ve got a working postgresql server installed its time to setup rails. In my case I was converting an existing rails app which used mySQL. I did the following:

Install Xcode – this will be required so that you can compile libraries. You already have it installed right?
Install the rails-pg gem.
To accomplish this the gem will need to compile a library so it needs to know where to find the include folder and your architecture.
```
sudo env ARCHFLAGS="-arch x86_64" gem install pg -- --with-pg-lib=/opt/local/lib/postgresql84/ --with-pg-include=/opt/local/include/postgresql84/
```
Once installed you can now setup your rails application:

For a new application based on Rails 3
```
rails new #name_of_app# -d postgres
```

For an existing application edit the following files
Gemfile

gem 'pg'

config/database.yml

development:
adapter: postgresql
database: appname_development
username: postgres
password:
host: localhost
encoding: UTF8
pool: 5

You should now be able to connect to the postgresql server from Rails and work as you would expect to. Its worth looking through the section below for some advice on the differences you should expect between mySQL and Postgresql before you use the system in anger.

Resources worth looking at:

Postgresql and the docs
pgAdmin3 – UI for Postgresql. See a demo of what can be done in pgAdmin3 thanks to Gary Carter at EnterpriseDB

Click here to view the video on YouTube.
Railsonpostgresql.com and specifically recommendations on rails database adapters
Why you should care about postgresql slighlty old but good background
Converting from mySQL to postgresql – Wikibooks: things to know
Heroku support for Postgresql: Heroku Database Support
Lengthy article on stackoverflow on the thread of converting from mySQL to Postgresql: Gotchas

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Quick Tip: How to fix ‘rake/rdoctask’ is deprecated. use rdoc/task instead

Paul — Mon, 08 Aug 2011 19:00:43 +0000

If you’ve recently found rails complaining about the following:

rake/rdoctask is deprecated. Use rdoc/task instead (in RDoc 2.4.2+)

then open up your rakefile.rb and change

require 'rake/rdoctask'

to look like this:

require 'rdoc/task'

and remember to add the following to your Gemfile


group :development do
gem 'rdoc'

end

You may need to run the following on the command line to freshen your gems

sudo bundle install

Tweet This Post

Quick Tip: sudo: rake: command not found To resolve this issue which for me applies to Ubuntu...

Related posts brought to you by Yet Another Related Posts Plugin.

Facebook security has changed and they’ve said nothing

Paul — Tue, 31 May 2011 14:00:13 +0000

IMPORTANT NOTE : FB has changed and said nothing. Take a look at your URL (top box on your screen.) If you see “http” or just “www” instead of “https” you DO NOT have a secure session & can be hacked. Go to Account Settings – Account Security – click Change. Check box (secure browsing), click Save. FB has automatically set it on the non-secure setting! Do everyone a huge favour, copy & re-post

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Quick Tip: sudo: rake: command not found

Paul — Tue, 05 Apr 2011 06:58:10 +0000

To resolve this issue which for me applies to Ubuntu because rake is not in sudo’s secure paths do the following on the command line

sudo ln -s `which rake` /usr/local/bin/

Tweet This Post

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.