20 Mobile UI Tips for Developers

51
by Amber Weinberg @amberweinberg Tuesday, 20 November 12

Transcript of 20 Mobile UI Tips for Developers

Page 1: 20 Mobile UI Tips for Developers

by Amber Weinberg@amberweinberg

Tuesday, 20 November 12

Page 2: 20 Mobile UI Tips for Developers

20 MOBILE UI TIPS FOR DEVELOPERS by Amber Weinberg@amberweinberg

Tuesday, 20 November 12

Page 3: 20 Mobile UI Tips for Developers

FRONT-END DEVELOPER

WORDPRESS LOVER

MOBILE WEB ENTHUSIAST

KNITTER

ANGLIOPHILE

LOVER OF BOOKS

APPLE FAN

BAD CODE HATER

FREELANCER

LOVER OF MY BICHON FRISE AND DACHSHUND

Tuesday, 20 November 12

Page 4: 20 Mobile UI Tips for Developers

FRONT-END DEVELOPER

WORDPRESS LOVER

MOBILE WEB ENTHUSIAST

KNITTER

ANGLIOPHILE

LOVER OF BOOKS

APPLE FAN

BAD CODE HATER

WHO AM I?

FREELANCER

LOVER OF MY BICHON FRISE AND DACHSHUND

Tuesday, 20 November 12

Page 5: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 6: 20 Mobile UI Tips for Developers

BOSS: I WANT A SITETHAT WORKS ON ALL DEVICES

Tuesday, 20 November 12

Page 7: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 8: 20 Mobile UI Tips for Developers

WHAT DO WE DOWHEN THERE’S NOMOBILE DESIGN?

Tuesday, 20 November 12

Page 9: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 10: 20 Mobile UI Tips for Developers

HMM...TO DESIGN OR NOT TO DESIGN?

Tuesday, 20 November 12

Page 11: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 12: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 13: 20 Mobile UI Tips for Developers

WHAT IS INTERFACE DESIGN?

Tuesday, 20 November 12

Page 14: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 15: 20 Mobile UI Tips for Developers

WATCH OUT FOR THE PIT OF DEVELOPER DOOM!

Tuesday, 20 November 12

Page 16: 20 Mobile UI Tips for Developers

1FORGET MOCKUPS

Tuesday, 20 November 12

Page 17: 20 Mobile UI Tips for Developers

1FORGET MOCKUPS

Tuesday, 20 November 12

Page 18: 20 Mobile UI Tips for Developers

2MOCKUPS VSBREAKPOINTS

Tuesday, 20 November 12

Page 19: 20 Mobile UI Tips for Developers

3DON’T FAKE IT

Tuesday, 20 November 12

Page 20: 20 Mobile UI Tips for Developers

4SHOW WHAT’SIMPORTANT

Tuesday, 20 November 12

Page 21: 20 Mobile UI Tips for Developers

4SHOW WHAT’SIMPORTANT

Tuesday, 20 November 12

Page 22: 20 Mobile UI Tips for Developers

5USE COLUMNS

Tuesday, 20 November 12

Page 23: 20 Mobile UI Tips for Developers

6GIVE EXTRASPACING

Tuesday, 20 November 12

Page 24: 20 Mobile UI Tips for Developers

7MENUS ARECRUCIAL

Tuesday, 20 November 12

Page 25: 20 Mobile UI Tips for Developers

7MENUS ARECRUCIAL

Tuesday, 20 November 12

Page 26: 20 Mobile UI Tips for Developers

7MENUS ARECRUCIAL

Tuesday, 20 November 12

Page 27: 20 Mobile UI Tips for Developers

7MENUS ARECRUCIAL

Tuesday, 20 November 12

Page 28: 20 Mobile UI Tips for Developers

7MENUS ARECRUCIAL

Tuesday, 20 November 12

Page 29: 20 Mobile UI Tips for Developers

8CHOOSE WORDSOR ICONS

Tuesday, 20 November 12

Page 30: 20 Mobile UI Tips for Developers

9REDUCE IMAGES

Tuesday, 20 November 12

Page 31: 20 Mobile UI Tips for Developers

10RETINA-SMETINA

Tuesday, 20 November 12

Page 32: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

http://bit.ly/saqmvo

Tuesday, 20 November 12

Page 33: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

Tuesday, 20 November 12

Page 34: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

Tuesday, 20 November 12

Page 35: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

Tuesday, 20 November 12

Page 36: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

Tuesday, 20 November 12

Page 37: 20 Mobile UI Tips for Developers

11 I LIKE BIG BUTT-ONS,AND I CAN NOT LIE

Tuesday, 20 November 12

Page 38: 20 Mobile UI Tips for Developers

12HOVER EFFECTS

Tuesday, 20 November 12

Page 39: 20 Mobile UI Tips for Developers

13DON’T ASSUMEYOU KNOW WHATYOUR USERSARE DOING

Tuesday, 20 November 12

Page 40: 20 Mobile UI Tips for Developers

14CHANGE FONT SIZES

Tuesday, 20 November 12

Page 41: 20 Mobile UI Tips for Developers

15ZOOM ZOOM

Tuesday, 20 November 12

Page 42: 20 Mobile UI Tips for Developers

16ENABLESWIPE GESTURES

Tuesday, 20 November 12

Page 43: 20 Mobile UI Tips for Developers

16ENABLESWIPE GESTURES

http://www.woothemes.com/flexslider/Tuesday, 20 November 12

Page 44: 20 Mobile UI Tips for Developers

17DON’T FORGETYOUR FORMS

Tuesday, 20 November 12

Page 45: 20 Mobile UI Tips for Developers

18PUT SEARCHAT THE VERY TOP

Tuesday, 20 November 12

Page 46: 20 Mobile UI Tips for Developers

19KISS - KEEP IT SIMPLE, STUPID

Tuesday, 20 November 12

Page 47: 20 Mobile UI Tips for Developers

20FINISHINGTOUCHES

Tuesday, 20 November 12

Page 48: 20 Mobile UI Tips for Developers

Tuesday, 20 November 12

Page 49: 20 Mobile UI Tips for Developers

UI ISN’TROCKET SCIENCE

Tuesday, 20 November 12

Page 51: 20 Mobile UI Tips for Developers

I LOVE YOU!

www.amberweinberg.com@amberweinberg

Tuesday, 20 November 12