Responsive Webdesign

ebusiness Praxistag Thüringen 2014 Responsive Webdesign BASISWISSEN UND MÖGLICHKEITEN DER UMSETZUNG Maik Grunitz Geschäftsführer Forward Marketing GbR

Inhalte 1. Warum Responsive Design? 2. Geschichte des Responsive Design 3. Wie funktioniert Responsive Design? 4. 5- Schritte zum Responsive Design 5. Beispiele 6. Trends 2014

Warum?

Warum? Quelle: Audi

Warum? Quellen: Mercedes Benz, BMW

Warum?

Geschichte Ethan Marcotte Mai 2010 Artikelveröffentlichung Responsive Web Design bei A List Apart... beschreibt die sich ändernde Web-Landschaft mit mehr Browsern (Geräten) und unterschiedlichen Eingabegeräten als je zuvor... Fluid grids, flexible images, and media queries are the three technical ingredients

Geschichte Fluid Grids Framesets Tabellen HTML CSS Media Queries Inhalte und Design Inhalte und Design Inhalte Design Flexible Images Auflösung 1024 x 768 Auflösung egal

Geschichte

Geschichte Quelle: Sergey Mavrody

Geschichte

Funktion Website-Typ Beschreibt das grundsätzliches Verhalten der Seite Responsive Website Adaptive Website Layout-Typ Beschreibt das grundsätzliches Verhalten des Designs Fixed Layout Fluid Layout Elastic Layout Quelle:DieProduktMacher

Funktion Fluid Grid (CSS3 Raster mit Media Queries) Mobil angepasste Einzelseiten auf Webserver 1 Programmierung für alle Endgeräte Kosten? Zeit? Zukunftsorientiert?

Funktion Quelle: boxyapp

Funktion Quelle: Adler ProMedia

Funktion

5 Schritte 1. Meta Viewport Definition von Meta Viewport im <header>- Tag. Code Beispiel: <meta name="viewport" content="width=device-width, initial-scale=1, userscalable=no">

5 Schritte 2. Stylesheet verfassen 2.1. Stylesheet erweitern (Media Queries am Ende) /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* ipads (portrait and landscape) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) { /* Styles */ /* ipads (landscape) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { /* Styles */ } /* ipads (portrait) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iphone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

5 Schritte 2. Stylesheet verfassen 2.2. Neue Stylesheets erstellen <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> <link rel="stylesheet" media="print" href="print.css" />

5 Schritte 3. Navigation anpassen Quelle:SpeckyBoy

5 Schritte 3. Navigation anpassen.menu { } position: fixed; left: -200px; width: 260px; height: 100%; top: 0; z-index: 10; text-align: left;.menu.menu-open { left: 0px; }.sm-wrap { } position: absolute; top: 0; right: 60px; background: #fff; width: 200px; height: 100%; border-right: solid 1px #eee;.menu h1.sm-logo{ font-family:"nexabold"; font-size: 24px; font-weight: 800; letter-spacing: 0.15em; line-height: 40px; text-transform: uppercase; color: #fff; margin: 20px 10px; }.menu img.sm-logo { margin: 20px 0; max-width: 160px; }.menu a { color: #666; display: block; padding: 1.2em 1em 1.2em 1.8em; outline: none; border-bottom:solid 1px #efefef; font-size: 0.8em; font-family:"opensansregular"; text-transform: uppercase; font-weight: normal; letter-spacing: 1px; -webkit-transition: all.4s ease-in-out; -moz-transition: all.4s ease-in-out; -ms-transition: all.4s ease-in-out; -o-transition: all.4s ease-in-out; transition: all.4s ease-in-out; }.menu a:hover { } color: #ffffff!important; -webkit-transition: all.4s ease-in-out; -moz-transition: all.4s ease-in-out; -ms-transition: all.4s ease-in-out; -o-transition: all.4s ease-in-out; transition: all.4s ease-in-out;

5 Schritte 4. Flexible oder Responsive Images 1 img {max-width: 100%; height: auto;}

5 Schritte 5. Inhalts- Organisation Quelle: thismanslife

5 Schritte 5. Inhalts- Organisation Flexbox Quelle: kulturbanause

5 Schritte 5. Inhalts- Organisation Grid Layout Quelle: kulturbanause

5 Schritte

Beispiele jena.de zeiss.de uni-jena.de

Beispiele

Beispiele theaterhaus-jena.de erfurt.de igs-erfurt.de

Beispiele

Trends 2014 Flat Design

Trends 2014 Google I/O Quelle: Google

Trends 2014 Parallax Quelle: Claas Paletta

Trends 2014 Polygon