Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
-
Upload
netlive-it-ag -
Category
Technology
-
view
1.058 -
download
0
description
Transcript of Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft
![Page 1: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/1.jpg)
Daniel NiklausNetlive IT AG
![Page 2: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/2.jpg)
![Page 3: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/3.jpg)
![Page 4: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/4.jpg)
![Page 5: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/5.jpg)
![Page 6: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/6.jpg)
239 Mio. 112 63 487
![Page 7: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/7.jpg)
![Page 8: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/8.jpg)
![Page 9: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/9.jpg)
![Page 10: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/10.jpg)
Vorher
![Page 11: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/11.jpg)
![Page 12: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/12.jpg)
Vorher Nachher
![Page 13: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/13.jpg)
![Page 14: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/14.jpg)
?
![Page 15: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/15.jpg)
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
![Page 16: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/16.jpg)
![Page 17: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/17.jpg)
![Page 18: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/18.jpg)
![Page 19: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/19.jpg)
Entdecken Sie die Möglichkeiten
![Page 20: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/20.jpg)
![Page 21: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/21.jpg)
![Page 22: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/22.jpg)
![Page 23: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/23.jpg)
![Page 24: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/24.jpg)
![Page 25: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/25.jpg)
![Page 26: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/26.jpg)
![Page 27: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/27.jpg)
![Page 28: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/28.jpg)
![Page 29: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/29.jpg)
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%
![Page 30: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/30.jpg)
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
![Page 31: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/31.jpg)
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)” />
![Page 32: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/32.jpg)
Gschafft ;-)
![Page 33: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/33.jpg)
Was gehört auf eine mobile Website
![Page 34: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/34.jpg)
LogoNavigation
Ihr Inhalt
Footer
![Page 35: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/35.jpg)
LogoNavigation
Ihr Inhalt
Footer
Attraktiv mit guter WiedererkennungAchten Sie auf die Bildgrösse
![Page 36: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/36.jpg)
LogoNavigation
Ihr Inhalt
Footer
Konkret; für Google OptimierungLink auf die erste SeiteWeniger ist mehr
![Page 37: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/37.jpg)
LogoNavigation
Ihr Inhalt
Footer
Lesefreundlichkeit!Kontrast und grosse Schriften Weniger Bilder, schnellere Ladezeiten
![Page 38: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/38.jpg)
LogoNavigation
Ihr Inhalt
Footer AdresseNicht überladenSocial Media
![Page 39: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/39.jpg)
Wie erstellen Sie eine mobile Website
![Page 40: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/40.jpg)
![Page 41: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/41.jpg)
![Page 42: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/42.jpg)
Framework & Templates Tools & CMS
![Page 43: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/43.jpg)
![Page 44: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/44.jpg)
![Page 45: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/45.jpg)
![Page 46: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/46.jpg)
![Page 47: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/47.jpg)
![Page 48: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/48.jpg)
![Page 49: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/49.jpg)
![Page 50: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/50.jpg)
![Page 51: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/51.jpg)
![Page 52: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/52.jpg)
![Page 53: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/53.jpg)
![Page 54: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/54.jpg)
2 bis 4 Stunden
![Page 55: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/55.jpg)
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
![Page 56: Mobile Internetseite: So wird auch Ihre Website fit für die Zukunft](https://reader038.fdokument.com/reader038/viewer/2022110119/5568ba66d8b42a7c7d8b4993/html5/thumbnails/56.jpg)
Netlive IT AGDaniel NiklausHauptstr. 179053 Teufen
www.netlive.chtwitter.com/netliveIT