Anzeige in einer mobilen Welt

Transkript

1 milch & zucker AG 1

2 Anzeige in einer mobilen Welt Die responsive Stellenanzeige milch & zucker AG 2

3 Ingolf Teetz (ich) milch & zucker AG Ausbildung: Dipl. Physiker (Justus Liebig Universität Giessen) Job: CEO milch & zucker AG milch & zucker AG gegründet 1998 Produkte: BeeSite Recruiting (ATS) BeeSite TRM BeeSite JobHub (multiposting) BeeSite Global JobBoard Mitglied bei HR-OpenStandard seit 2003 Mitglied des Boards seit 2006 milch & zucker AG 3

4 01_Vorstellung: milch & zucker Das Unternehmen Die Zutaten von milch & zucker Mitarbeiter Vorstände 3 Inhaber 5 Standorte 2 Jahre 17 Geschäftsbereiche 2 milch & zucker AG 4

5 Responsive Job Ad Inhaltsverzeichnis 1) Warum überhaupt? User, Devices 2) Was heißt das und was macht das? Eine Website viele Devices 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive 4) Content first? User Centered Concepts, devicekonforme Usability, angepaßte Inhalte 5) Mobile first Layout, Navigationskonzepte 6) Performance Bspw.: Sprites, Retina, Adaptive Media, Icons als Fonts 7) Frameworks Bootstrap und co. 8) Sonstiges und Beispiele milch & zucker AG 5

6 1) Warum überhaupt User, Devices, Ranking milch & zucker AG 6

7 1) Warum überhaupt User, Devices, Ranking milch & zucker AG 7

8 1) Warum überhaupt User, Devices, Ranking, Browser Browser Verteilung Quelle: Statista.com milch & zucker AG 8

9 1) Warum überhaupt User, Devices, Ranking Anzahl und Vielfalt der internetfähigen Mobilgeräte wächst! Umfang der Nutzung mit diesen Geräten wächst! Beispiel: Ebay verkauft über die mobile Applikation 1000 Autos im Monat Mobile Geräte ersetzen längst klassische Rechner in Haushalten! Das heißt gleichzeitig, dass sich das generelle Nutzerverhalten von unterwegs und in Eile bis hin zu Couch Surfing bewegt. Wer nicht mobil anbietet gerät ins Hintertreffen! Modernes Recruiting unterliegt somit denselben Regeln, wie der ecommerce: Bevor ich an den normalen Rechner wechsle, kaufe/bewerbe ich mich doch bei einem anderen, mobilen Anbieter. Nachwachsende Generationen sind mobile Generationen! Google ranked Websites ohne mobiles Pendant deutlich schlechter! milch & zucker AG 9

10 2) Was heißt das und was macht das? Eine Website, viele Devices Responsive heißt: Reaktionsfähig. milch & zucker AG 10

11 2) Was heißt das und was macht das? Eine Website, viele Devices EINE responsive Website/Job Ad reagiert also auf Größe und Displays von Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten. User Experience und Usability Wichtig ist, dass nicht nur das Layout angepasst/skaliert wird, sondern auf die Benutzung (wann, wo, wie) beachtet wird, somit auch auf angepasste Schriftgrößen (Lesbarkeit) und Mediaelemente (Bilder/Videos) geachtet wird. milch & zucker AG 11

12 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive milch & zucker AG 12

13 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive Grids oder Gestaltungsraster sind eigentlich ein alter Hut. Die meisten redaktionellen Websites beruhen auf Templates mit fixen Grids. Basis eines Responsive Web Designs ist ein flexibles Grid! Es gibt es keine fixen Breiten mehr. Es werden aber sog. Sprungmarken definiert, ab wann eine Seite bspw. von Desktop auf Tablet umstellen soll. Es empfiehlt sich meist bei extrabreiten Auflösungen das Mitskalieren des Grids zu Gunsten der Lesbarkeit zu begrenzen. milch & zucker AG 13

14 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive Sprungmarken definieren den Wechsel der Breiten/Aufteilung einer Seite von Desktop zu Tablet und von hier zum Smartphone. Das Grid-System des Frameworks Bootstrap zum Beispiel, setzt die Sprungmarken so: < 768 px Extra small devices (Smartphones) 768 px Small devices (Tablets) 992 px Small devices (Tablets) 1200px Large devices (Desktop) milch & zucker AG 14

15 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive Responsive vs. Adaptive Responsive Adaptive In der Fachliteratur wird unterschieden in Responsive (reaktionsfähig) und adaptive (anpassungsfähig). Das Adaptive hat KEINE flexiblen Grids sondern gibt, angepasst an bestimmte Bildschirmgrößen, ein fixes Layout aus. milch & zucker AG 15

16 3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive Responsive vs. Adaptive Wenn man, gerade auch bei den Smartphones, immer den User im Zentrum der Überlegungen hält, kann es nützlich sein, Mischformen einzusetzen. Beispiel: Eine einfache Skalierung vom Tablet zum Smartphone hin würden für den User wichtige Inhalte zu weit nach unten drücken. Hier benutzt man dann die Sprungmarke, um das Layout neu auszugeben. DANN allerdings bitte wieder mit flexiblen Maßangaben. milch & zucker AG 16

17 4) Content first User Centered Concepts, devicekonforme Usability, angepaßte Inhalte User Centered Concepts Mobile First heißt eigentlich Content First oder: Immer den User im Zentrum der Überlegungen setzen Immer das Device in der normalen Benutzungsumgebung bedenken (Smartphone im Gehen, oder in der wackeligen Bahn, Tablet auf dem Sofa, im Cafe oder im Zug) Die Inhaltstiefe dem Device anpassen (Beispiel Smartphones): - Suchergebnis (Desktop) auf Stellentitel das Datum begrenzen - Info- und Teaserboxen auf dem Smartphone ggf. als geschlossenes Collapse Element vorsehen - Imagebilder der Website und/oder von Artikeln ggf. weglassen - Bewerbungsformulare verkürzen, späteres Ausfüllen ermöglichen - etc. milch & zucker AG 17

18 5) Mobile first Layout, Navigationskonzepte Layout Mobile first - starten Sie mit immer mit mobilem Layout. So sind die mobil relevanten Aspekte der Navigation und Inetraktion (Wischen u.ä,) stets im Blick Der Schritt zum Desktop über die Tablet Landscape Ansicht ist leichter vollzogen, als umgekehrt ein Layout mit nur Desktop typischen Interaktionsoptionen (Klick und Mouse-Over) umzudenken. Vom Tablet zum Smartphone ist ein deutlicher Schritt, vor allem im Bereich der User Experience. Hier ist Ausblenden und Weglassen gefordert. Und User Centered Design: Was kann ein User auch im Gehen bedienen? Was sitzend auf dem Sofa? Muss/soll er sich mit dem Smartphone umfassend bewerben (müssen)? milch & zucker AG 18

19 5) Mobile first Layout, Navigationskonzepte Navigationskonzepte Benutzen Sie die in den Desktop- und Mobile-Welten üblichen Navigationsmethoden Das erleichtert dem User das schnelle Begreifen der Anwendung Vermeidet unnötige Irritationen Frustrationen Hilft ihm sich auf das Wesentliche der Anwendung zu konzentrieren: DEN INHALT! Planen Sie von Anfang an, wie auf dem Smartphone sinnvolle, mediumadäquate Zwischenschritte anbieten Planen Sie Infoboxen von vornherein schon als Collapsable Elemente, das schafft auf dem Smartphone Übersicht und trotzdem sind alle Inhalte griffbereit. milch & zucker AG 19

20 5) Mobile first Layout, Navigationskonzepte Beispiel Hauptnavigation: Desktopnavigation (klassisch) Geht auch noch auf Tablet Portrait milch & zucker AG 20

21 5) Mobile first Layout, Navigationskonzepte Beispiel Hauptnavigation: Auf Smartphone unter einem Icon zusammengefasst als Einklapp- Navigation milch & zucker AG 21

22 5) Mobile first Layout, Navigationskonzepte Beispiel Formularnavigation: Reiter vs. Klappnavigation: Auf Smartphone unter einem Icon zusammengefasst als Einklapp-Navigation milch & zucker AG 22

23 5) Mobile first Layout, Navigationskonzepte Beispiel Info-/Teaserboxen: Offene Collaps- Elemente auf Desktop und Tablet und geschlossene auf dem Smartphone. milch & zucker AG 23

24 5) Mobile first Layout, Navigationskonzepte Beispiel Suchergebnis: Reduktion der Desktop-Ansicht und funktionen auf Smartphonebedingung en: Suche in einem geschlossenen Collapse-Element. Ergebnisliste reduziert auf das Nötigste: Datum und Stellentitel milch & zucker AG 24

25 6) Performance Sprites, Retina, Adaptive Media, Icons als Fonts Sprites Reduzieren Sie die Serveranfragen durch die Verwendung von Sprites (alle benötigten Bilder, Icons, Grafiken zur Darstellung der Standardseitenelemente in einer Datei) für Standardgrafiken zur Darstellung der Website. Retina Auflösungen Bereiten Sie alle Bilder, grafischen Elemente in Doppelter Größe (Kantenlänge) vor, um sie auf den o.g. hochauflösenden Bildschirmen perfekt dargestellt werden können. Bildoptimierung Auch wenn dieses Thema lange nicht mehr wichtig war, arbeiten Sie für mobile und schwächere Bandbreiten! Optimieren Sie z.b. PNGs immer mit Tiny-PNG oder anderen Tools. Bei PNGs können Sie so bis zu 60% Datenvolumen sparen; wichtig vor allem bei den Retina Auflösungen. milch & zucker AG 25

26 6) Performance Sprites, Retina, Adaptive Media, Icons als Fonts Adaptive Media Steigern Sie die Performance, gerade auch für mobile Endgeräte durch serverseitige Ausgabe von device-angepasseten Formaten. Icons als Webfonts Nutzen sie, wenn möglich, die Webfont-Technologie zur Darstellung von Icons als Webfont. Sie steigern dadurch die Ladegeschwindigkeiten deutlich und sind zudem befreit von der Bereitstellung eines Retinaoptimieren, zweiten Iconsets. milch & zucker AG 26

27 7) CSS Frameworks Bootstrap uns Co. Warum ein Framework CSS Frameworks erleichtern das erstellen von Responsive-Design Websites. Ohne Framework ist die Entwicklung solcher Websites sehr aufwendig. Manche Frameworks bringen auch Javascript Funktionen mit Gestaltungselemente wie Label, Menüs und Buttons. Welche gibt es? (Auswahl) milch & zucker AG 27

28 7) CSS Frameworks Bootstrap uns Co. Eine genauere Betrachtung der 5 erfolgreichsten Frameworks 2014 BootStrap Ist die unangefochtene Nr 1 unter den Frameworks Steckbrief Schöpfer: Mark Otto and Jacob Thornton. Veröffentlicht: 2011 Aktuelle Version: Popularität: 81,000+ Sternchen Beschreibung: Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. Browser Support: Firefox, Chrome, Safari, IE8+ (ie8 eingeschränkt) Lizenz: MIT Framework Größe: 145 KB Beispiel milch & zucker AG 28

29 7) CSS Frameworks Bootstrap uns Co. Eine genauere Betrachtung der 5 erfolgreichsten Frameworks 2014 Foundation Ist der 2. große Player Steckbrief Schöpfer: ZURB Veröffentlicht: 2011 Aktuelle Version: 5 Popularität: 20,000+ Sternchen Beschreibung: The most advanced responsive front-end framework in the world Browser Support: Chrome, Firefox, Safari, IE9+; ios, Android, Windows Phone 7+ Lizenz: MIT Framework Größe: 326 KB Beispiel milch & zucker AG 29

30 7) CSS Frameworks Bootstrap uns Co. Eine genauere Betrachtung der 5 erfolgreichsten Frameworks 2014 Sematic UI Versucht vor allem sehr gut lesbaren Code zu erzeugen Steckbrief Schöpfer: Jack Lukic Veröffentlicht: 2013 Aktuelle Version: Popularität: 17,000+ Sternchen Beschreibung: A UI component framework based around useful principles from natural language. Browser Support: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10 Lizenz: MIT Framework Größe: 552 KB Beispiel milch & zucker AG 30

31 7) CSS Frameworks Bootstrap uns Co. Eine genauere Betrachtung der 5 erfolgreichsten Frameworks 2014 Pure by Yahoo! Leichtes sehr modulares Framework Steckbrief Schöpfer: Yahoo Veröffentlicht: 2013 Aktuelle Version: Popularität: 11,000+ Sternchen Beschreibung: A set of small, responsive CSS modules that you can use in every web project. Browser Support: Letzte Versionen von Firefox, Chrome, Safari; IE7+; ios 6.x, 7.x; Android 4.x Lizenz: Yahoo! Inc. BSD Framework Größe: 18 KB Beispiel milch & zucker AG 31

32 7) CSS Frameworks Bootstrap uns Co. Eine genauere Betrachtung der 5 erfolgreichsten Frameworks 2014 UIkit Leicht anzupassendes Framework, das oft in Wordpress Themes genutzt wird. Steckbrief Schöpfer: YOOtheme Veröffentlicht: 2013 Aktuelle Version: Popularität: Sternchen Beschreibung: A lightweight and modular front-end framework for developing fast and powerful web interfaces. Browser Support: Chrome, Firefox, Safari, IE9+ Lizenz: MIT Framework Größe: 118 KB Beispiel milch & zucker AG 32

33 8) Beispiele Deutsche Telekom AG Daimler AG Deutsche Bank Uni.-Klinikum Heidelberg Deutsche Bahn Porsche milch & zucker AG 33

34 8) Sonstiges Google mobile ready test Google Page Speed Test Geeignete Metatags (Beispiel) <title>global Graduate Program - Trainee (m/w) Inhouse Consulting, befristet auf 2 Jahre bei Merck Gruppe (Merck Group) in Darmstadt (Hessen, Deutschland) </title> <meta property="og:title" content="global Graduate Program - Trainee (m/w) Inhouse Consulting, befristet auf 2 Jahre bei Merck Gruppe (Merck Group) in Darmstadt (Hessen, Deutschland)"/> <meta property="og:site_name" content="jobstairs"/> <meta name="geo.region" content="de-he" /> <meta name="geo.placename" content="darmstadt" /> <meta name="geo.position" content=" ; " /> <meta name="icbm" content=" , " /> <meta name="description" content="stellenangebot Funktion Beratung, Einstiegslevel Trainee, Branche Chemie/Pharma/Biotech"> <meta name="keywords" content="stellenangebot, Job, Stelle, Stellenanzeige, Karriere, Top Unternehmen"> <meta name="author" content="merck Gruppe"> milch & zucker AG 34

35 Fragen? milch & zucker AG 35

36 Vielen Dank Ingolf Teetz milch & zucker AG Küchlerstrasse Bad Nauheim i.teetz@milchundzucker.de milch & zucker AG 36