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