beyond content with responsive design
Post on 07-Sep-2014
4.644 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related