Post on 30-May-2015
description
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 eine mobile Website– Wie erstellen Sie eine mobile Website
Entdecken Sie die Möglichkeiten
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%
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
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)” />
Gschafft ;-)
Was gehört auf eine mobile Website
LogoNavigation
Ihr Inhalt
Footer
LogoNavigation
Ihr Inhalt
Footer
Attraktiv mit guter WiedererkennungAchten Sie auf die Bildgrösse
LogoNavigation
Ihr Inhalt
Footer
Konkret; für Google OptimierungLink auf die erste SeiteWeniger ist mehr
LogoNavigation
Ihr Inhalt
Footer
Lesefreundlichkeit!Kontrast und grosse Schriften Weniger Bilder, schnellere Ladezeiten
LogoNavigation
Ihr Inhalt
Footer AdresseNicht überladenSocial 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 eine mobile Website– Wie erstellen Sie eine mobile Website
Netlive IT AGDaniel NiklausHauptstr. 179053 Teufen
www.netlive.chtwitter.com/netliveIT