Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
U can touch it
Tamim Swaid
June 11, 2011
Design
1
25
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
720
DIVA - Conversational Commerce
tamimat
0
320
Mobile Strategy Framework (Beta)
tamimat
0
49
The UX of Bitcoin
tamimat
0
61
Other Decks in Design
See All in Design
Illustration journey @Yahoo
xuechunwu
0
610
Talent Show-Down (2022)
gyroidz
1
190
Demon Deals Cast
breadman
0
150
Sponge Bob Exercise Sequence
diablicos_
0
220
Mijii & Gnochi Go Swimming
ohtristanart
PRO
0
590
ユーザーに向き合うために 普段から意識していること
koichikato
0
160
hourly comics (2022)
gyroidz
0
270
採用担当デザイナーがみるポートフォリオのポイント
yonekura907
0
630
Demon Deals - Character List
breadman
0
3.2k
UI/UXデザイナーになるには 日常編
kimurakei
0
410
Nobel Finds a Staryu
innsamity
0
150
Bertha
yvonnehsuanho
PRO
1
320
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
296
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Code Reviewing Like a Champion
maltzj
506
37k
Design by the Numbers
sachag
271
17k
Building Your Own Lightsaber
phodgson
94
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Building Adaptive Systems
keathley
25
1.1k
Designing with Data
zakiwarfel
91
3.9k
Visualization
eitanlees
125
11k
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 tamim.swaid@nexum.de Tel. +49 221 56939
- 4149 nexum AG Maarweg 149 – 161, 50825 Köln Thanks Bild 21