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
38
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
820
DIVA - Conversational Commerce
tamimat
0
390
Mobile Strategy Framework (Beta)
tamimat
0
100
The UX of Bitcoin
tamimat
0
84
Other Decks in Design
See All in Design
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
500
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
230
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
270
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Jeremy's First Day
myates3
1
130
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Featured
See All Featured
It's Worth the Effort
3n
180
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
259
12k
A designer walks into a library…
pauljervisheath
199
23k
The Mythical Team-Month
searls
215
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
The Language of Interfaces
destraynor
151
23k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Typedesign – Prime Four
hannesfritz
36
2.1k
Ruby is Unlike a Banana
tanoku
96
10k
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