nuisol ux webdesign for tablets
DESCRIPTION
Christian Kuhn von http://nuisol.com erklärt in seinem Vortrag auf der Mobile Tech Conference in München die Besonderheiten für UX Design für Tablet optimierte Websites.TRANSCRIPT
![Page 1: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/1.jpg)
UX-Webdesign für Tablets
Christian Kuhn @NUISOL | nuisol.com
![Page 2: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/2.jpg)
UX DESIGN für TabletsChristian Kuhn
Eine Anleitung für Usability, Screendesign und Webentwicklung
DAS
ZEN FUR
TABLETS
![Page 3: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/3.jpg)
Was ist UX-Design?
How-To
Yeah!, OK, Error
Digital Publishing
![Page 4: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/4.jpg)
![Page 5: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/5.jpg)
Das Nutzungsverhalten der nächsten
Anwender-/Kundengenerationen verlangt
das Kommunikation Digital ist.
Sie wird im Web stattfinden.
Sie wird Mobile und Social sein.
![Page 6: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/6.jpg)
![Page 7: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/7.jpg)
http://www.universalmccann.de/wave6/
![Page 8: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/8.jpg)
Engaging the Tablet User: What They Expect From Web Sites
http://www.gomez.com/engaging-the-tablet-user/
![Page 9: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/9.jpg)
Engaging the Tablet User: What They Expect From Web Sites
http://www.gomez.com/engaging-the-tablet-user/
![Page 10: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/10.jpg)
Was ist UX-Design?
![Page 11: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/11.jpg)
“Design is aboutcommunication, and ittakes more than pixelsto communicate.”
Derek PowazekContent & Community Genius
![Page 12: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/12.jpg)
USEREXPERIENCE
Joy of use
Gla
ubw
ürdi
gkeit
Interaktion
V
ertr
auen Reaktion
H
arm
onie
Berechenbarkeit
Funktionalität
Intuitivtät
NU
TZW
ERT
/ LOOK
NUTZERLEBN
IS / FEEL
USABILITY
Vereinfache mein LebenVereinfache mein Leben
Vereinfache mein Leben
![Page 13: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/13.jpg)
Verstärkung
Konversion
Kenntnisse
Menschen
Inhalt
Technologie
Business
![Page 14: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/14.jpg)
Verstehe den User
![Page 15: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/15.jpg)
![Page 16: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/16.jpg)
IBM 370, 1 MIPS Rechenleistung, 36 Teile
![Page 17: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/17.jpg)
electricpig.co.uk
![Page 18: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/18.jpg)
![Page 19: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/19.jpg)
2.000 MIPS
![Page 20: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/20.jpg)
http://www.youtube.com/watch?v=XpeNk3E36YU
Official Nokia "4th Screen" video, 2007
![Page 21: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/21.jpg)
![Page 22: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/22.jpg)
![Page 23: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/23.jpg)
![Page 24: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/24.jpg)
PERIODISCH
TIME KILLER
ECHTZEIT
![Page 25: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/25.jpg)
http://www.youtube.com/watch?v=aXV-yaFmQNk
Technology codes our minds, changes our OS. Apple products have done this extensively.
![Page 26: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/26.jpg)
![Page 27: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/27.jpg)
![Page 28: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/28.jpg)
![Page 29: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/29.jpg)
![Page 30: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/30.jpg)
![Page 31: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/31.jpg)
![Page 32: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/32.jpg)
![Page 33: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/33.jpg)
http://venturebeat.files.wordpress.com/
![Page 34: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/34.jpg)
Quelle: Google Studie 2011, Apfelnews.de am 06.12.2011
![Page 35: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/35.jpg)
http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
![Page 36: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/36.jpg)
http://youtu.be/6EXJZ8J-pdsThis was a blast to shoot a commercial for AirTran Airways with Peter Graves from Airplane!! It is a spot for their GoGo In Flight WiFi internet which is killer!
![Page 37: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/37.jpg)
![Page 38: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/38.jpg)
Kenne die Hardware
![Page 39: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/39.jpg)
![Page 40: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/40.jpg)
![Page 41: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/41.jpg)
![Page 42: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/42.jpg)
![Page 43: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/43.jpg)
![Page 44: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/44.jpg)
1024x600
1024x768 1280x800
iOS, Web OS 3
Android ab 2.2, Windows 7/8,BlackBerry Tablet OS,Amazon Kindle Fire
Android 3/4, Windows 7/8
![Page 45: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/45.jpg)
TABLET-SCREENDESIGN.INFO
![Page 46: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/46.jpg)
![Page 47: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/47.jpg)
Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Rotate 2 Finger Drag Down 2 Finger Drag UpiOS
![Page 48: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/48.jpg)
Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
RotateWebOS
![Page 49: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/49.jpg)
Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Android und Windows Phone7
![Page 51: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/51.jpg)
Plane bevor Du
Kreierst
![Page 52: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/52.jpg)
Größerer Bildschirm
Mehr Funktionalität
Mehr Portabel
Einfacheres Interface
![Page 53: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/53.jpg)
einfache Lösung
= +Projekt Dna
Projekt Dna
Projekt Dna
Auf Einfachheit fokusieren
WErtE hinzufügEn
vorAngigE funktionEn
fragen was nutzer wollen und
brauchen
Dann: Welche Werte werden hinzugefügt?
![Page 54: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/54.jpg)
STORM
![Page 55: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/55.jpg)
![Page 56: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/56.jpg)
![Page 57: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/57.jpg)
![Page 58: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/58.jpg)
![Page 59: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/59.jpg)
iOS App: AirDisplay
![Page 60: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/60.jpg)
Adobe Proto für Android
![Page 61: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/61.jpg)
iMockups für iOS
![Page 62: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/62.jpg)
![Page 63: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/63.jpg)
http://www.teehanlax.com/blog/ipad-gui-psd-version-2/
![Page 64: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/64.jpg)
![Page 65: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/65.jpg)
![Page 66: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/66.jpg)
![Page 67: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/67.jpg)
![Page 68: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/68.jpg)
![Page 69: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/69.jpg)
<style type="text/css">
div, p, a, li, td {
-webkit-text-size-adjust:none;
}
</style>
<meta name="viewport" content="width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
![Page 70: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/70.jpg)
![Page 71: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/71.jpg)
The App, built using HTML5 technology, features continual and automatic content downloads and improvements.It ensures that FT customers can access FT content anytime, anywhere, on a PC and multiple devices, with one login and one subscription payment.
http://www.youtube.com/watch?v=jhbljqKisig&feature=relmfu
![Page 72: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/72.jpg)
![Page 73: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/73.jpg)
![Page 74: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/74.jpg)
![Page 75: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/75.jpg)
Kein FlashJA, SIE HABEN ES GESCHAFFT
![Page 76: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/76.jpg)
![Page 77: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/77.jpg)
Watch this space, Flash Banner, wertvoller Platz, alternates?
![Page 78: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/78.jpg)
![Page 79: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/79.jpg)
![Page 80: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/80.jpg)
Einfachheit ist die höchste Stufe
der Vollendung. Leonardo Da Vinci
![Page 81: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/81.jpg)
http://designspiration.net/image/3866/
![Page 82: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/82.jpg)
![Page 83: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/83.jpg)
![Page 84: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/84.jpg)
![Page 85: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/85.jpg)
![Page 87: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/87.jpg)
![Page 89: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/89.jpg)
Überdenke die Navigation
![Page 90: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/90.jpg)
![Page 91: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/91.jpg)
![Page 92: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/92.jpg)
![Page 93: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/93.jpg)
![Page 94: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/94.jpg)
![Page 95: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/95.jpg)
![Page 96: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/96.jpg)
![Page 97: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/97.jpg)
![Page 98: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/98.jpg)
![Page 99: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/99.jpg)
![Page 100: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/100.jpg)
![Page 101: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/101.jpg)
"There's nothing on the iPhone or iPad that you can do that I can't do."
Stevie Wonder, September 2011
![Page 102: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/102.jpg)
http://youtu.be/c_4XTiE5PEE
The Economist on iPhone & iPad
![Page 103: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/103.jpg)
Neustart:
Responsive
![Page 104: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/104.jpg)
Responsive Web Design (RWD)
fluid grid + fluid images + media queries
![Page 105: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/105.jpg)
![Page 106: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/106.jpg)
![Page 107: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/107.jpg)
@media all and (orientation:portrait) { /* Hier der allgemeine CSS-Code für Geräte im Portrait Modus */}
@media all and (orientation:landscape) { /* Hier der allgemeine CSS-Code für Geräte im Landscape Modus */}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */}
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { /* iPhone mit Retina Display */ }
/* Computer und Tablet CSS */@media only screen and (min-device-width: 800px) { /* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */
}
![Page 108: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/108.jpg)
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) { /* Hier der CSS-Code speziell für das iPad */ body {background:none;}}
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* Hier der CSS-Code speziell für das „neue iPad“(3)*/ body {background:none;}}
@media only screen and (max-device-height: 800px) and (max-device-width: 1280px) and (orientation : landscape) { /* Hier der CSS-Code speziell für das Android Tablets mit 1280x800 */ body {background:#fff;} #wrap { width:940px; padding:0 40px; margin:0 auto; background-color:#fff; -moz-box-shadow:0 -10px 10px 0 #fff; -webkit-box-shadow:0 -10px 10px 0 #fff; box-shadow:0 -10px 10px 0 #fff;}
![Page 109: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/109.jpg)
http://resizemybrowser.com/
http://seesparkbox.com/foundry/media_query_bookmarklet
![Page 110: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/110.jpg)
![Page 111: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/111.jpg)
http://quirktools.com/screen!y/
![Page 112: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/112.jpg)
http://www.opera.com/developer/tools/
![Page 114: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/114.jpg)
http://loadtimer.orghttp://adaptive-images.com/
![Page 115: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/115.jpg)
![Page 116: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/116.jpg)
![Page 117: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/117.jpg)
Yeah!
OK
Error
![Page 118: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/118.jpg)
![Page 119: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/119.jpg)
![Page 120: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/120.jpg)
![Page 121: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/121.jpg)
![Page 122: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/122.jpg)
![Page 123: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/123.jpg)
![Page 124: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/124.jpg)
![Page 125: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/125.jpg)
![Page 126: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/126.jpg)
![Page 127: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/127.jpg)
![Page 128: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/128.jpg)
![Page 129: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/129.jpg)
mobile-zeitgeist.com
![Page 130: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/130.jpg)
Tablet UX-Design:
• Portrait und Landscape Modus
• Stark reduzierte Touch-Navigation
• swipen - sliden - zoom - kein scrollen
• Minimal, hell
• GUI Design Integration
• Größere Schriften
• Device optimierte Inhalte
![Page 131: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/131.jpg)
Content + Context = King
![Page 132: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/132.jpg)
Digital Publishingmit Adobe Publishing Suite
![Page 133: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/133.jpg)
![Page 134: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/134.jpg)
http://tv.adobe.com/watch/digital-publishing/transforming-the-magazine-experience-with-wired/
![Page 135: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/135.jpg)
The New Yorker
![Page 136: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/136.jpg)
http://tv.adobe.com/watch/digital-publishing-customer-showcase/app-of-the-week-fast-company/
![Page 137: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/137.jpg)
Digital Publishingmit QuarkXpress Publishing System
![Page 138: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/138.jpg)
http://www.quark.com/de/Solutions/Applications/Digital_Publishing_Solutions.aspx
![Page 139: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/139.jpg)
http://itunes.apple.com/DE/app/discovery-channel-extreme/id490082236?mt=8
![Page 140: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/140.jpg)
http://www.youtube.com/embed/0DBmCMh7MSc?wmode=opaque
![Page 141: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/141.jpg)
http://code.google.com/p/sixthsense/
![Page 142: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/142.jpg)
http://code.google.com/p/sixthsense/
![Page 143: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/143.jpg)
![Page 144: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/144.jpg)
![Page 145: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/145.jpg)
![Page 146: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/146.jpg)
NUISOL entwickelt digitale Lösungen für Marketing und Kommunikation. Der neuste Stand der Technologie ist
dabei Maßstab.
Das Wissen über Entwicklungen und Trends macht NUISOL so praktisch nutzbar und bietet Orientierung in der rasanten
digitalen Evolution.
NUISOL. Agentur für digitale Aha-Erlebnisse.
![Page 147: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/147.jpg)
Artikel, Buch, Vorträge, Workshops, Trainings
UX Design
Webentwicklung
Mobile
Tablet
E-Commerce
Digital Publishing
Live Streaming (HLS)
Social Media
![Page 148: NUISOL UX WEBDESIGN for Tablets](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54e688454a795943458b4b8c/html5/thumbnails/148.jpg)
Tel. 0151 15 77 66 99
Besuchen Sie auch:http://www.nuisol.com/xingprofilhttp://www.twitter.com/nuisolhttp://www.facebook.com/NUISOL.communication
Vielen Dank für Ihre Aufmerksamkeit