61
Mobile Web Design @hlb, designer & cofounder of Handlino Inc.

Mobile Web Design (HPx)

Embed Size (px)

DESCRIPTION

Some random ideas about mobile web design. For HP8 event: http://userxper.com/courses/events/hp8, 25mins.

Citation preview

Page 1: Mobile Web Design (HPx)

Mobile Web Design@hlb, designer & cofounder of Handlino Inc.

Page 2: Mobile Web Design (HPx)

hlb aka 布丁@hlb, http://iamhlb.com

Page 3: Mobile Web Design (HPx)

Handlino和多 – 和而不同,少就是多

Page 4: Mobile Web Design (HPx)

HappyDesigner

Page 5: Mobile Web Design (HPx)

Mobile

Page 6: Mobile Web Design (HPx)

Mobile手機

Page 7: Mobile Web Design (HPx)

Mobile手機

Page 8: Mobile Web Design (HPx)

Mobile行動裝置

Page 9: Mobile Web Design (HPx)

MobileWeb Design

Page 10: Mobile Web Design (HPx)

優勢

Page 11: Mobile Web Design (HPx)

GOALbased design

Page 12: Mobile Web Design (HPx)

min. input

max. output

http://informationarchitects.jp/designing-for-ipad-reality-check/

入不敷出 (!)

Page 13: Mobile Web Design (HPx)

min. input

max. output

http://informationarchitects.jp/designing-for-ipad-reality-check/

少入多出

Page 14: Mobile Web Design (HPx)

Don’t wastescreen estate and user attention

on processing

secondary functions

http://informationarchitects.jp/designing-for-ipad-reality-check/

Page 15: Mobile Web Design (HPx)

If it works on the iPad,with a few tweaks, it will

work on a laptop

http://informationarchitects.jp/designing-for-ipad-reality-check/

Page 16: Mobile Web Design (HPx)

If it works on the *****,with a few tweaks, it will

work on a laptop

Page 17: Mobile Web Design (HPx)

每日生活

Page 18: Mobile Web Design (HPx)

台灣高鐵

Page 19: Mobile Web Design (HPx)

台灣高鐵

Page 20: Mobile Web Design (HPx)

線上購物

Page 21: Mobile Web Design (HPx)

Social Network

Page 22: Mobile Web Design (HPx)

案例

Page 23: Mobile Web Design (HPx)

和多繽紛樂http://bingo.handlino.com/machines/3586

Page 24: Mobile Web Design (HPx)
Page 25: Mobile Web Design (HPx)
Page 26: Mobile Web Design (HPx)

Shit happens<audio> plays in external player

in iPhone OS <= 3.1.3

Page 27: Mobile Web Design (HPx)
Page 28: Mobile Web Design (HPx)
Page 29: Mobile Web Design (HPx)

Registranohttp://registrano.com/

Page 30: Mobile Web Design (HPx)
Page 31: Mobile Web Design (HPx)
Page 32: Mobile Web Design (HPx)
Page 33: Mobile Web Design (HPx)
Page 34: Mobile Web Design (HPx)
Page 35: Mobile Web Design (HPx)
Page 36: Mobile Web Design (HPx)

opera

Page 37: Mobile Web Design (HPx)
Page 38: Mobile Web Design (HPx)
Page 39: Mobile Web Design (HPx)
Page 40: Mobile Web Design (HPx)
Page 41: Mobile Web Design (HPx)
Page 42: Mobile Web Design (HPx)

Redminehttp://github.com/hlb/redmine_iphone_plugin

Page 43: Mobile Web Design (HPx)
Page 44: Mobile Web Design (HPx)
Page 45: Mobile Web Design (HPx)
Page 46: Mobile Web Design (HPx)
Page 47: Mobile Web Design (HPx)
Page 48: Mobile Web Design (HPx)
Page 49: Mobile Web Design (HPx)
Page 50: Mobile Web Design (HPx)
Page 51: Mobile Web Design (HPx)

Dotch?website webapp

Page 52: Mobile Web Design (HPx)

making web UI *is* easy

Page 53: Mobile Web Design (HPx)

沒有做不到,只有想不到!沒有做不到,只有想不到!

Page 54: Mobile Web Design (HPx)

Pros:More than one way to do it.CPU/memory usage and response time are the only limits

Page 55: Mobile Web Design (HPx)

Cons:More than one way to do it wrong.

Page 56: Mobile Web Design (HPx)

內建UI != 最佳解

http://www.lukew.com/ff/entry.asp?1014

Page 57: Mobile Web Design (HPx)

手touch

Page 58: Mobile Web Design (HPx)

掱multi-touch

Page 59: Mobile Web Design (HPx)

Page 60: Mobile Web Design (HPx)

Image borrowed from Tim Lucas http://www.slideshare.net/toolmantim/developing-for-iphone-presentation

50x50

Page 61: Mobile Web Design (HPx)

創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣

這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://iamhlb.com」。