Responsive design

Responsive Design

Wir machen unsere Seite einfach mit Responsive Design
und erschließen den mobilen Markt!

Ist es wirklich so einfach?

Thomas Bähr

Warum mobiles Design?

Hat Ihre Firma schon spezielle Seiten für mobile Geräte?

● Anteil an Seitenaufrufen mit mobilen Geräten 5-15%
● Anzahl mobiler Endgeräte nimmt zu
● Surfverhalten verändert sich Richtung Mobile
● 2011 – Marktanteile mobile Betriebssysteme ca. 60%
Siehe auch Onlinemarketing.de
Jahrelang galt für Marketer: Zuerst kommt der Desktop, Mobile spielt nur
eine kleine Rolle. Doch das wird sich ändern.

18. Dez 2012 Responsive Design - Thomas Bähr 2

Marktanteile - Betriebssysteme

Quelle: http://venturebeat.com/2012/12/03/mary-meeker-releases-stunning-data-on-the-state-of-the-internet/


Mobile Nutzer erreichen!

Normale Mobile Responsive Applikation Native
Webseite Webseite Design Generator Applikation
● Kein Aufwand ● Separate Lösung ● Einheitliches Look & Feel ● Wenig IOS/Android ● Alle Features
● Keine Kosten ● speziell anpassbar ● 1 Seite für alle Devices Know-How notwendig des Gerätes
für mobile Geräte ● Entwicklung 1 nutzbar
● Kein IOS/Android
● Unterschiedliche Wissen notwendig Sourcecodes für ● Interaktion mit
Release Zyklen mehrere Systeme Nutzer möglich
möglich ● Viele Systemfeatures ● Push
nutzbar Nachrichten
● Push Nachrichten
● Darstellung auf ● Doppelter Aufwand ● Hoher Planungs ● Kompatibilitäts- ● Kostenintensive
mobilen für Pflege und QA aufwand probleme Entwicklung für
Geräten ● unterschiedliches ● Hoher QA Aufwand ● Einarbeitung in IOS und Android
mangelhaft Layout (Look & Generator ● Langsame
● Entwicklung neuer
● für mobile User Feel) Feature verlangsamt Entwicklung
unfreundlich


Was ist Responsive Design?

● Praxis in der Web Entwicklung
● reaktionsfähiges Webdesign
● 1 Webseite für alle Geräte ( Desktop & Mobile )
● Strukturierung einzelner Elemente dynamisch
● Berücksichtigt das betrachtende Gerät
● Basis sind neueste Webstandards wie HTML5 und CSS3.


Beispiel - Smartphone


Beispiel - Tablet


Beispiel – Desktop


Beispiel – Checkout


Beispiel – Responsive Elemente ?

● Anzahl der Produkte in einer Reihe
● Anordnung der Elemente im Header
● Symbole und Links der Hauptnavigation
● Anordnung der Navigation
● Kategorien und Filter
● Breadcrumb Navigation


Die Phasen

Wichtige Schritte in den einzelnen Phasen der Umsetzung
Planung
Entwurf / Design
Entwicklung
QA / Testing

Und was zu beachten ist.


Planung

● Browserunterstützung (< IE9 nur mit JS)
● Festlegung der Auflösungen (Desktop, Pads, Phone - s.a. Anhang)
● Content Planung - Anordnung in den Auflösungen
● Erstellung eines Fluid-Grids. (Raster für Umbrüche)
● Image Größen / Resizing ( z.B. Produktbilder )
● Javascript Frameworks ( JQuery (mobile) )
● Welche Social Plugins (Facebook, Twitter, Google) – Layout!


Entwurf & Design

● Erstellung eines Styleguides / CI Manual (Font, Buttons, Farben)
● Aufbau des Basisgrids als Ausgangsvorlage
● Designen von Screens für alle wichtigen Seiten der Webpräsenz
für alle Auflösungen (Grid Beachten!)
● Erstellung von Mockups von wichtigen UI-Elementen
● Flussdiagramme für primäre Abläufe unter Berücksichtigung der
verschiedenen Auflösungen
● Usability beachten – besonders auch für mobile Geräte


Entwicklung

● Aufsetzen des gewünschten Grid mit dem Bootstrap
● Aufbau Header & Footer inkl. ersten Tests mit allen Auflösungen
● Erstellung des Content entsprechend Screen und Mockups
● Image Loader in Abhängigkeit von Viewport (z.b. Produktbilder)
● Unterschiedliche Zoom-/Blätterfunktionen ( Swipe, Click)
● Permanentes Testing in allen Auflösungen
● Ladeverhalten Bilder, Scripte auf mobilen Geräten (ohne WLAN!)


Quality Assurance

● Abnahme der Seite wie bisher in allen Browsern (IE-Chrome)
● Abnahme auf IOS Geräten ( IPad, IPhone)
● Abnahme auf Android Geräten ( HTC, Samsung, Nexus 7)
● Ladeverhalten auf mobilen Geräten ohne WLAN
● Overlays, JS auf mobilen Geräten


Resume

Für wen ist Responsive Design interessant?

● Webseite soll erneuert werden
● Einheitliches Look & Feel (CI) wichtig
● Keine Kapazitäten für App Entwickler vorhanden
● Website unterliegt keinen ständigen, größeren Änderungen


Q&A

Frage & Antworten

Ihre Fragen zum Thema ?
Ihre Anmerkungen ?

Danke für Ihre Aufmerksamkeit !


Nützliche Links
Tools:
Balsamiq Mockup Tool http://www.balsamiq.com/
Twitter CSS Framework http://de.wikipedia.org/wiki/Bootstrap_(Framework)
Compass CSS Framework http://compass-style.org/
Respond.js https://github.com/scottjehl/Respond

Addons Firefox:
Responsinator http://www.responsinator.com/
Web-Developer Toolbar https://addons.mozilla.org/de/firefox/addon/web-developer/developers

Application SDK:
PhoneGap http://en.wikipedia.org/wiki/PhoneGap
Titanium http://www.appcelerator.com/platform/titanium-sdk


Anhang: Responsive mit dem CMS?

● WordPress: Reveal Responsive Theme
● Drupal: Omega Responsive Theme
● Joomla: Anleitung Responsive für Joomla
● Typo3: Anleitung Responsive mit Typo3
● Magento: Responsive Design Tutorial


Anhang: Auflösungen
Resolution Devices Resolution Devices Resolution Devices Resolution Devices

320 x 240 Blackberry Curve 854 x 480 Sony Ericsson Xperia Arc, Arc S, X10, J & 1280 x 768 Samsung Galaxy Tab 10.1 1680 x 1050 20-inch Apple iMac 4,1 / 5,1 / 7,1 / 8,1 /
Samsung Tocco U Nexus 4 9,1 (Early 2006 - Early 2009)
HTC Wildfire Nokia N9 Nokia Lumia 920
Nokia E71 Motorola Milestone and Milestone 2 LG Optimus G & LG Optimus 4X HD
Very common low res Sony Xperia J

400 x 240 Many generic feature phones including: 960 x 540 HTC Sensation HTC Evo 3D 1280 x 800 Samsung Galaxy Tab 7.1 & 8.9 1920 x 1080 Large 16:9 desktop screen resolution
Samsung Star & Star II Motorola Bionic, Atrix & Droid RAZR Samsung Galaxy 21.5-inch Apple iMac 10,1 / 11,2 / 12,1
Motorola RAZR i & Photon Q Nexus 7 (Late 2009 - Mid 2011)
HTC One S Kindle Fire HD Microsoft Surface with Windows 8 Pro

480 x 320 Apple iPhone 3G & 3GS 960 x 640 Apple iPhone 4 & 4S 1280 x 1024 Standard 4:3 desktop screen 1920 x 1200 24-inch Apple iMac 6,1 / 7,1 / 8,1 / 9,1(Late
Apple iPod touch (1st, 2nd & 3rd Apple iPod Touch (4th generation) resolution 2006 - Early 2009)
generation) Asus Transformer Pad Infinity
Samsung Galaxy Ace
HTC Desire C

480 x 360 BlackBerry Curve, Storm, Torch 9800 & 1136 x 640 Apple iPhone 5 1366 x 768 11.6 inch Apple Macbook Air 2048 x 1536 Apple iPad 3
Bold incl. 9700 Apple iPod Touch (5th generation) Small 16:9 resolution
Sony Ericsson Vivaz Microsoft Surface
Samsung Series 3 Chromebook

640 x 360 Nokia N8, N97, E7 and X6 amongst others 1024 x 600 Standard netbook/tablet resolution 1440 x 900 13.3 inch Apple Macbook Air 2560 x 1440 27-inch Apple iMac 10,2 / 11,1 / 11,3 / 12,2
includes: (Late 2009 - 2012)
Amazon Kindle Fire
Viewsonic Viewpad 10
Samsung Galaxy Tab

640 x 480 Blackberry Bold 9900 & Torch 9810 1024 x 768 Apple iPad 1& 2 1600 x 900 13 inch Apple Macbook Air 2560 x 1600 13-inch Apple MacBook Pro with Retina
HP TouchPad display
Apple iPad Mini Nexus 10

800 x 480 Samsung Galaxy I, II and S Samsung 1280 x 720 Samsung Galaxy Nexus 1600 x 1200 Large 4:3 desktop screen resolution 2880 x 1800 15-inch Apple MacBook Pro with Retina
Nexus S Sony Xperia S display
HTC Desire, Desire HD, Desire S & Desire Samsung Galaxy S III
X Samsung Galaxy Note II
HTC Evo HTC Sensation XL HTC Windows Phone 8X/S
HTC One V HTC One X & X+ & XL
Nokia Lumia 800 & 900
Quelle: http://spirelightmedia.com/responsive-design-device-resolution-reference

Quellen

Responsive Design

http://de.wikipedia.org/wiki/Responsive_Design

http://gabesumner.com/how-many-web-browsers-support-responsive-design

Buchtipp:

http://www.hanser-fachbuch.de/buch/Responsive+Webdesign/9783446430150


Responsive design

Weitere ähnliche Inhalte

Was ist angesagt? (9)

Andere mochten auch (20)

Ähnlich wie Responsive design (20)

Responsive design