Mobile Firsrt for Rockpool

Mobile Offering

What we’re going to be doing

Overview of Mobile services

Traditional Web (85%)

• Optimisation of websites for Mobile– Develop mobile version of websites

e.g. http://m.rockpooldigital.com

• “Mobile First” Unified solutions for web sites– Designed specifically for mobile web from the

ground up (more on this later). One URL for all devices.

• Mobile Web Applications– E.g. Extranet for iPhone

Overview of Mobile services

Device Applications (15%)

• X-Device Mobile Applications (built with Web Technologies)

– One code base, multiple device targets

– Phonegap, Titanium, Corona

• Native Mobile Applications (e.g. iPhone App)

– iPhone, Android, Blackberry, Nokia

Mobile

Let’s get it straight...

Some words and what we meanWebsite• A public facing (B2C or B2B) website accessible to any device connected

to the internet. E.g. Babcock

Web Application• A website that provides the user controlled access to information and

functionality, typically tailored or personalised to the logged in user. E.g. Sky Homes Extranet

Mobile Web Application• A web application that has been optimised for mobile devices. E.g.

Facebook Mobile web page (not the app!)

Native Mobile App• An “installable” application developed specifically for a target mobile

platform or operating system. Note: Only us “App” here in this context, nowhere else. E.g. Angry Birds

Some words and what we meanMobile OptimisedMeans that the interface is optimised for users that are accessing the website or web

application from a mobile. For example:

• Content

– Strip everything back to minimum

– Speed is paramount

– Only include what is immediate and necessary

• Layout

– Touch zones

– Spacing

– Screen size

• Navigation

– No hover for inappropriate devices

– Tailored to mobile device

• Functionality

– Gestures (swipe, tap, pinch, zoon, drag)

– Location, orientation, audio and video

Mobile First

What is it?

Some words and what we meanMobile First• Our build approach to the creation of web solutions.

Indicates a mindset that considers the content, layout, navigation and functionality first from a mobile perspective (lowest common denominator for performance and screen size and greatest area of innovation due to more advanced browsers). We start by designing and building for the mobile platform, and then add progressive layers for tablets and desktop browsers, ensuring the user gets the best experience regardless of the device they are using.

Web products should be designed for mobile first.

(Even if no mobile version is planned.)

-Luke Wroblewski

www.LukeW.com @lukew

This is a big idea with big support

“Google programmers

are doing work on mobile

applications first,

because they are better

apps & that's what top

programmers want to

develop.”

-Eric Schmidt, Google CEO

“We're just now starting to think about mobile first and desktop second for a lot of our products.”

-Kate Aronowitz, Design Director Facebook

Mobile First ideas

Opportunity through Growth

Useful Constraints provide Focus

Capabilities afford Innovation

Opportunity through Growth

• Growth of smart phones is extremely rapid

• 5000% increase in US mobile web traffic 2007-2010

• Mobile web trends 8x speed of desktop trend

Also...

“Don’t just re-imagine, create something new”

Constraints give Focus• 1024x768 vs 320x480

• You lose 80% of screen

• Include only what is immediate and obvious

Constraints give Focus

• Speed is paramount (CPU, Signal, Battery, Bandwidth, translates to sales etc on desktop)

• Context – very short bursts of use, throughout the day(used all the time)

Capabilities afford Innovation

• Touch zones, spacing etc (Fitts’ Law)

• Gestures (Swipe, Tap, Pinch, Zoom – Drag?)

• No hover (this is good – hover is often not intentional & an easy way out for too much info)

• Location, Orientation, Audio & Video...

• You innovate with these as we’re building sites for the future

And the list goes on…• Application cache for local storage

• CSS3 & Canvas for performance optimization

• Multi-touch sensors

• Location detection

• Device positioning & motion: from an accelerometer

• Orientation: direction from a digital compass

• Audio: input from a microphone; output to speaker

• Video & image: capture/input from a camera

• Push: real-time notifications “instant” to user

• Device connections: through Bluetooth between devices

• Proximity: device closeness to physical objects

• Ambient Light: light/dark environment awareness

• RFID reader: identify & track objects with broadcasted identifiers

• Haptic feedback: “feel” different surfaces on a screen

• Biometrics: retinal, fingerprint, etc.

How does this impact Rockpool

What we’re going to need to do

“Mobile First” Unified solutions

• Designed & Built for Mobile First

• Mobile is optimised, focused & fast!

• Build flexible designs for progressive device layers

– Mobile (small screen)

– Tablet (medium screen)

– Desktop (large screen)

• Web Technologies (HTML 5, CSS, JS etc)

Our Philosophy with Clients

All new websites will be mobile optimised

• We believe mobile is so important, we won’t develop websites without it

• Web applications can be optionally mobile optimised due to the higher proportional cost

This is important...

Mobile is not more important than desktop!

However, this methodology promotes the benefits of using mobile as a reference point

Day to day differences

• Mobile Design & UX Considerations

• Multiple screen sizes & densities

• More focus on performance optimization

• New inputs to us - touch targets, gestures, and actions

• Location systems

• Other device capabilities

Use Scalable Design

• Define your device groups (by project)

– Mobile, Tablet, Desktop

• Consider UX for the mobile experience

• Create a default reference design

– Use mobile as the start point

• Define rules for content and design adaptation

• Opt for web standards and a flexible layout

We’re already doing it…

Sky Atlantic was effectively a mobile first project

Lots to learn… but we’ll get there

What does it mean for our Clients?

“Why should they care?”

User benefits translate to client benefits

• Good User Experience gives Increased sales, performance etc

• Greater customer/employee engagement can be found in web sites/applications which are easy/fast/fun to use

Direct client benefits

• Get a jump start on competitors in massively growing mobile market

• Mobile web users either spend more time doing their task – more opportunities to sell

• ...or they do it more frequently throughout the day

• Streamlined User Journey can speed up experience and sales process

• We can use personal and local information to promote offers etc