Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
U can touch it
Search
Tamim Swaid
June 11, 2011
Design
1
42
U can touch it
What to consider when you make touchable websites (2011)
Tamim Swaid
June 11, 2011
Tweet
Share
More Decks by Tamim Swaid
See All by Tamim Swaid
Introducing voice into the world of eCommerce
tamimat
0
910
DIVA - Conversational Commerce
tamimat
0
440
Mobile Strategy Framework (Beta)
tamimat
0
140
The UX of Bitcoin
tamimat
0
120
Other Decks in Design
See All in Design
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
500
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
320
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
280
Cards | Storyboards
giofortuna_story
0
280
Bulletproof Design System with TypeScript
takanorip
6
3.4k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
940
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Adopting Sorbet at Scale
ufuk
77
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Being A Developer After 40
akosma
90
590k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Practical Orchestrator
shlominoach
188
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Transcript
uxcamp europe Berlin, 11.06.2011 – 12.06.2011 The nexum AG is
a consultancy and agency for digital media. Tamim Swaid, Consultant, nexum AG U can touch it What to consider when you make touchable websites
2 Global Unit Shipments of Non-Touch vs. Touch-Devices
3 The website on different devices
4 An appropriate fallback for Flash
5 No flash video player – use .mp4 – and
encode right Mp4 Flash
6 Website not wider than 980 px. Otherwise it shrinks
or scrolls.
7 Typography on the iPad www.zeit.de
8 The touch target size should be… The width of
a finger limits the density of items on screen. If the items are too close, the user will not be able to choose a single one. Recommended touch target size is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px
9 Touch target size in reality
10 Interaction feedback -webkit-tap-highlight-color: <css-color>
11 Mouse Over Menu…
12 … gets a close icon
13 Complicated hover menus are outdated
14 Keep your websites fast – No Animation overload
15 Contrasting colours for better readability http://www.flickr.com/photos/matthewcooper/4749603193/
16 Lightboxes and layers are problematic
17 Scrollable div-boxes don‘t have scrollbars on touch Desktop iPhone
iPhone „Problem“ fixed in iOS 5
18 Keep data input as short as possible
19 HTML5 Input Types Telephone URL E-Mail datetime-local search tel
url email datetime date month week time number range color
20 Input, saving and printing PDFs won‘t work on touch
devices
Tamim Swaid, Concept & Consultant
[email protected]
Tel. +49 221 56939
- 4149 nexum AG Maarweg 149 – 161, 50825 Köln Thanks Bild 21