Wie Sie Ihre Website fit für iPhone & Co. machen.

1. Daniel Niklaus
Netlive IT AG

6. 239 Mio. 112 63 487

10. Vorher

12. Vorher Nachher

15. Der Plan
• Überprüfen Sie Ihre eigene Website
• Entdecken Sie die Möglichkeiten
• Die konkrete Umsetzung
– Was gehört auf eine mobile Website
– Wie erstellen Sie eine mobile Website

19. Entdecken Sie die Möglichkeiten

29. Vorgehen bei Responsive
Webdesign
• 3 Layouts definieren (bis 500px, bis 930, bis 2000)
• Auf Maximalgrösse begrenzen und dann auf relative
Werte hinunterrechnen.
• Beispiel mit 960Grid statt 300 Pixelbreit 31,25%

30. Explorer und andere Bildprobleme
• Für Bilder, Videos und andere Objekte immer:
max-width:100%
• Für Internet Explorer gibt es Scripte
• Mittels Javascript können verschieden grosse
Bilder nachgeladen werden

31. Media Queries
• <link rel=”stylesheet” type=”text/css”
href=“stylesheets/mobile.css” media=“screen,
handheld” />
• <link rel=”stylesheet” type=”text/css”
href=“stylesheets/mobile.css” media=“only screen
and (min-width:480px)” />
• <link rel=”stylesheet” type=”text/css”
href=“stylesheets/mobile.css” media=“only screen
and (min-width:900px)” />

32. Gschafft ;-)

33. Was gehört auf eine mobile
Website

34. Logo
Navigation
Ihr Inhalt
Footer

35. Attraktiv mit guter Wiedererkennung
Logo Achten Sie auf die Bildgrösse
Navigation
Ihr Inhalt
Footer

36. Logo
Navigation Konkret; für Google Optimierung
Link auf die erste Seite
Weniger ist mehr
Ihr Inhalt
Footer

37. Logo
Navigation
Lesefreundlichkeit!
Kontrast und grosse Schriften
Ihr Inhalt Weniger Bilder, schnellere
Ladezeiten
Footer

38. Logo
Navigation
Ihr Inhalt
Footer Adresse
Nicht überladen
Social Media

39. Wie erstellen Sie eine mobile
Website

42. Framework
& Templates Tools & CMS

54. 2 bis 4 Stunden

55. Der Plan
• Überprüfen Sie Ihre eigene Website
• Entdecken Sie die Möglichkeiten
• Die konkrete Umsetzung
– Was gehört auf eine mobile Website
– Wie erstellen Sie eine mobile Website

56. Netlive IT AG
Daniel Niklaus
Hauptstr. 17
9053 Teufen
www.netlive.ch
twitter.com/netliveIT