Daniel NiklausNetlive IT AG
239 Mio.   112   63   487
Vorher
Vorher   Nachher
Der Plan• Überprüfen Sie Ihre eigene Website• Entdecken Sie die Möglichkeiten• Die konkrete Umsetzung  – Was gehört auf ei...
Entdecken Sie die Möglichkeiten
Vorgehen bei Responsive             Webdesign• 3 Layouts definieren (bis 500px, bis 930, bis 2000)• Auf Maximalgrösse begr...
Explorer und andere Bildprobleme• Für Bilder, Videos und andere Objekte immer:  max-width:100%• Für Internet Explorer gibt...
Media Queries• <link rel=”stylesheet” type=”text/css”  href=“stylesheets/mobile.css” media=“screen,  handheld” />• <link r...
Gschafft ;-)
Was gehört auf eine mobile        Website
Logo  NavigationIhr Inhalt   Footer
Attraktiv mit guter Wiedererkennung Logo          Achten Sie auf die Bildgrösse  NavigationIhr Inhalt   Footer
Logo  Navigation   Konkret; für Google Optimierung               Link auf die erste Seite               Weniger ist mehrIh...
Logo  Navigation               Lesefreundlichkeit!               Kontrast und grosse SchriftenIhr Inhalt     Weniger Bilde...
Logo  NavigationIhr Inhalt   Footer      Adresse               Nicht überladen               Social Media
Wie erstellen Sie eine mobile           Website
Framework& Templates   Tools & CMS
2 bis 4 Stunden
Der Plan• Überprüfen Sie Ihre eigene Website• Entdecken Sie die Möglichkeiten• Die konkrete Umsetzung  – Was gehört auf ei...
Netlive IT AGDaniel NiklausHauptstr. 179053 Teufenwww.netlive.chtwitter.com/netliveIT
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
Nächste SlideShare
Wird geladen in …5
×

Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft

1.422 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
1 Kommentar
0 Gefällt mir
Statistik
Notizen
  • Das gestrige Seminar 'Mobile Internetseite' von Daniel Niklaus war Klasse!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.422
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
126
Aktionen
Geteilt
0
Downloads
20
Kommentare
1
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft

  1. 1. Daniel NiklausNetlive IT AG
  2. 2. 239 Mio. 112 63 487
  3. 3. Vorher
  4. 4. Vorher Nachher
  5. 5. 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
  6. 6. Entdecken Sie die Möglichkeiten
  7. 7. 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%
  8. 8. 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
  9. 9. 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)” />
  10. 10. Gschafft ;-)
  11. 11. Was gehört auf eine mobile Website
  12. 12. Logo NavigationIhr Inhalt Footer
  13. 13. Attraktiv mit guter Wiedererkennung Logo Achten Sie auf die Bildgrösse NavigationIhr Inhalt Footer
  14. 14. Logo Navigation Konkret; für Google Optimierung Link auf die erste Seite Weniger ist mehrIhr Inhalt Footer
  15. 15. Logo Navigation Lesefreundlichkeit! Kontrast und grosse SchriftenIhr Inhalt Weniger Bilder, schnellere Ladezeiten Footer
  16. 16. Logo NavigationIhr Inhalt Footer Adresse Nicht überladen Social Media
  17. 17. Wie erstellen Sie eine mobile Website
  18. 18. Framework& Templates Tools & CMS
  19. 19. 2 bis 4 Stunden
  20. 20. 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
  21. 21. Netlive IT AGDaniel NiklausHauptstr. 179053 Teufenwww.netlive.chtwitter.com/netliveIT

×