responsive-web giordano.ch Oktober 31,

Transkript

1 responsive-web giordano.ch Oktober 31,

2 perspektiven bruno giordano. // giordano.ch online.ch Oktober 31,

3 giordano.ch Oktober 31,

4 giordano.ch Oktober 31,

5 der Trend immer mehr mobile Geräte am Markt bereits Ende 2013 bis zu 50% Benutzer mit mobilen Geräten giordano.ch Oktober 31,

6 die Folgen der Bildschirm wir immer kleiner Websites, welche für den normalen PC- Bildschirm konzipiert wurden, eignen sich nicht mehr das Informationsverhalten ändert sich: wer nicht gleich findet, was er sucht, klickt weiter giordano.ch Oktober 31,

7 die Konsequenzen neue Websites ohne responsive-web sind bereits nach einem Jahr veraltet spezifische Skins für spezifische Anwendungen (z.b. Katalog für ipad) neue Navigationskonzepte und Suchabfrage- Methoden giordano.ch Oktober 31,

8 die Konsequenzen traditionelle Strukturen und Navigationskonzepte sind veraltet Teaser-Kommunikation: kleine Informationsbausteine in Form von Bild und Kurztext selektive und semantische Informationsaufbereitung und Navigation giordano.ch Oktober 31,

9 was bedeutet dies für cms / pim / shop? responsive-web verlangt eine konzeptionelle Neuausrichtung für die Erarbeitung, Aufbereitung und Erfassung der Inhalte nicht jede bestehende Website eignet sich inhaltlich für responsive-web giordano.ch Oktober 31,

10 was bedeutet dies für cms / pim / shop? bestehende Designs können mittels Anpassung des css gut auf responsive-web umgebaut werden neue Projekte: neue Navigationskonzepte Verwendung fertiger HTML-Templates neue Module für selektive Information giordano.ch Oktober 31,

11 responsiv-web grid. // giordano.ch Oktober 31,

12 pc bildschirm traditionelles grid. // Navigation giordano.ch Oktober 31,

13 i-pad bildschirm traditionelles grid. // Navigation giordano.ch Oktober 31,

14 smartphone bildschirm traditionelles grid. // Navigation giordano.ch Oktober 31,

15 pc bildschirm responsive-web grid. // Informations-Teaser giordano.ch Oktober 31,

16 i-pad bildschirm responsive-web grid. // Informations- Teaser giordano.ch Oktober 31,

17 smartphone bildschirm responsive-web grid. // 1 Informations-Teaser 2 3 giordano.ch Oktober 31,

18 smartphone bildschirm responsive-web grid. // Navigation 1 Navigation 2 Navigation 3 Navigation 4 Navigation 5 Navigation 6 Ebene 2 Ebene 3 Ebene 4 Navigation 7 Navigation 8 Menü giordano.ch Oktober 31,

19 demo und technische information andré glanzmann. // giordano.ch online.ch Oktober 31,

20 Design weg von festen Schriftgrößen weg von festen Layout-Grids Media Queries zur Identifizierung Identifizierung giordano.ch Oktober 31,

21 Grundlagen CSS3 / HTML5 im wesentlichen css3 mit Media Queries giordano.ch Oktober 31,

22 Crossbrowser-Kompatibililtät älteren Browsern css3 beibringen älteren Browsern html5 beibringen Plugin s Modernizr und html5shim giordano.ch Oktober 31,

23 Mediaqueries width / height device-width / device-height aspect-ratio / device-aspect-ratio color-index / color orientation resolution scan grid giordano.ch Oktober 31,

24 DNN Beispiel screen and (max-width: 480px){.dnnpem-header{margin-bottom:5%;} screen and (min-width:768px) and (max-width:2560px){.dnnpem-header{margin-bottom:0} } giordano.ch Oktober 31,

25 DNN Beispiel Oder <link rel="stylesheet" type="text/css" media="all and (maxdevice-width: 480px)" href="css/smartphones.css" /> giordano.ch Oktober 31,

26 DNN Beispiel Projekt 1 (in Arbeit) Projekt 2 (in Arbeit) marketingch.contento.ch marketingch.contento.ch giordano.ch Oktober 31,

27 vielen dank für ihre aufmerksamkeit. // giordano.ch ag sonnengartenstrasse st.gallen giordano.ch online.ch Oktober 31,