OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

21
from good to great! spicing up your mobile app

description

This session will start with a mobile application built with Intelliwarp and demonstrate how to transform it incrementally by applying mobile usability patterns and a bit of css magic. The goal is to show how you can make your mobile applications much more user friendly with just a bit of effort and without loosing the power and speed of the Agile Platform.

Transcript of OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

Page 1: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

from good to great!spicing up your mobile app

Page 2: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

TWC - The Wine Club

Page 3: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

0. intelliwarp

Page 4: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

let’s add

some style!

Page 5: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

This was built for iphone!(tested on 1 android only)

I’m an engineer!

Page 6: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

½. background image

Page 7: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

.MainContent { background: url(img/background.png) fixed center;}

Page 8: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

Fixed

Page 9: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

Fixed

Page 10: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

Page 11: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

1. navigation bar

Page 12: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

Page 13: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

http://glyphish.com/

Page 14: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

2. show product

3. recent items

4. add to home

Page 15: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

5. image carousel

Page 16: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

6. charts

Pie charts resembling pacmanPie charts NOT resembling pacman

Page 17: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

Page 18: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

7. mobile controls

Page 19: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

https://www.outsystems.com/Network/

Page 20: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

© outsystems 2012

7 ways to spice up your app1. navigation bar

2. show product

3. recent items

4. add to home

5. image carousel

6. charts

7. mobile controls

Page 21: OutSystems - From Good to Great: Spicing Up Your Mobile Web App UI - NextStep 2012

Thank [email protected]

@rodrigo_sc_