Commercial in Confidence. © 2013 Saasu Pty Ltd. All Rights Reserved.

PRESENTED BYGrant YoungChief Design O!cer, Saasugrant@saasu.com @saasu @grantyoung

DESIGNING FOR MOBILITY 2013

Beyond Content with Responsive Design

BUSINESS SIZE (EMPLOYEES)

Micro88%

10,932NUMBER OF GLOBAL SMALL BUSINESS CUSTOMERS

$34,940,758,146VALUE OF AUD TRANSACTIONS MANAGED USING SAASU

2xWINNER CEBIT

INNOVATION AWARD

50+NUMBER OF COUNTRIES WITH SAASU CUSTOMERS

INVOICES/MTH1mio+

INVENTORY ITEMS

SAASU USERS SINCE 2000

44.7k

Small 9%

Medium 2%

Large <1%

📦

REGISTERED PARTNERS

320👥

227K+

BACKGROUND

Why responsive?

In-app HTML/CSS

Native

! "

# $ %

& '

!" #

SAVE

Web

Hybrid

SAVE

Image: Brandon Christopher Warren @ Flickr http://www.flickr.com/photos/brandoncwarren/4164759025/

Device Proliferation

Image: adactio @ Flickr http://www.flickr.com/photos/adactio/6153558098/

TE•TO•TOAYTM

TE•TO•TOAYTM

TE•TO•TOAYTMTest Early

TE•TO•TOAYTMTest Often

TE•TO•TOAYTMTest On All Your Target Machines

CHOOSE YOUR SCOPE

Contextual vs. Fully Featured

Cut features

Cut content, defer secondary information

Enlarge interface elements

API

The notion that you should create a separate, stripped-down version for ‘the mobile use case’ might be appropriate if such a clean mobile use case existed, but it doesn’t.

Imag

e: h

ello

geri

@ F

lickr

http

://w

ww

.flic

kr.c

om/p

hoto

s/he

lloge

ri/72

9056

0120

/ 90

25/

What is “mobile”?

IN PRACTICE

7 things we’ve learnt along the way

1 Web apps are different to content sites

Image: Leeks @ Flickr http://www.flickr.com/photos/observatoryleak/3187926964/

Mobile first

Non-touchSmartphone

Touch-basedSmartphone

7” Tablet 9” Tablet Desktop/Laptop

Spreadsheets Paper (Print) POS

Non-touchSmartphone

Touch-basedSmartphone

7” Tablet 9” Tablet Desktop/Laptop

Spreadsheets Paper (Print) POS

Non-touchSmartphone

Touch-basedSmartphone

7” Tablet 9” Tablet Desktop/Laptop

Spreadsheets Paper (Print) POS

Primary design target

BENEFITS OF A ‘TABLET FIRST’ APPROACH

Design for the primary use case

Defer secondary content

Touch-friendly design

Impetus to minimise data entry

Consider the mobile-device context

Simplified translation

Progressiveenhancement

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

320x480(Touch)

1024x768(Touch/Non-touch)

1024+(Landscape, Non-touch)

Small (Touch)

Medium (Touch/Non-touch)

Large(Landscape,

Touch/Non-touch)

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

UIWindow1024 x 768

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

4 Work processes need to evolve

Image: Thomas Hawk @ Flickr http://www.flickr.com/photos/thomashawk/33364362/

Patterns

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<div class="form-field auto-complete span1">

<label for="date">Date</label>

<input type="text" name="date" placeholder="" />

<a href="#" class="icon">date</a>

</div>

<style>

input[type=text] {

-webkit-appearance: none;

border-radius: 0;

float: left;

border: 1px solid #4b4b4b;

width: 82%;

padding: 0 15% 0 3%;

height: 32px;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<div class="form-field auto-complete span1">

<label for="date">Date</label>

<input type="text" name="date" placeholder="" />

<a href="#" class="icon">date</a>

</div>

<style>

input[type=text] {

-webkit-appearance: none;

border-radius: 0;

float: left;

border: 1px solid #4b4b4b;

width: 82%;

padding: 0 15% 0 3%;

height: 32px;

}

</style>

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

4 Work processes need to evolve

5 Don’t think in pixels

Image: Alex Dram @ Flickr http://www.flickr.com/photos/alexdram/3707617908/

Pixels are evil...

49

Page

Saasu

Brand guidelines

4 Grid System

Section

4.2 Screen grid example

Subsection

grid System:screen example

This is an example of the grid system in place for the web

application mock up for the iPad at 1024px wide.

(please note that this example application is not !nalised artwork)

MENU BAR80x80px5 grid boxes

PADDING24x24px1.5 grid boxes

CONTENT BOX880px wide27.5 grid boxes

%

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

4 Work processes need to evolve

5 Don’t think in pixels

6 Grid frameworks only part of the solution

Layout Grid

Layout Grid

Module Grid

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

4 Work processes need to evolve

5 Don’t think in pixels

6 Grid frameworks only part of the solution

7 QA is hard

2x

3x

4x

?x

1 Web apps are different to content sites

2 Breakpoints shouldn’t match devices

3 Web apps are not native apps

4 Work processes need to evolve

5 Don’t think in pixels

6 Grid frameworks only part of the solution

7 QA is hard

FIND OUT MOREwww.saasu.com

CONTACTGrant YoungChief Design O!cer, Saasugrant@saasu.com@saasu @grantyoung