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
43
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
920
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
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
#Dubois Challenge 2025: Economics
ajstarks
1
170
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
590
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
340
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
200
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualization
eitanlees
148
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Scaling GitHub
holman
463
140k
Statistics for Hackers
jakevdp
799
220k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing for Performance
lara
610
69k
Done Done
chrislema
185
16k
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