milch & zucker AG 1
Anzeige in einer mobilen Welt Die responsive Stellenanzeige milch & zucker AG 2
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
01_Vorstellung: milch & zucker Das Unternehmen Die Zutaten von milch & zucker Mitarbeiter 101 72 Vorstände 3 Inhaber 5 Standorte 2 Jahre 17 Geschäftsbereiche 2 milch & zucker AG 4
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
1) Warum überhaupt User, Devices, Ranking milch & zucker AG 6
1) Warum überhaupt User, Devices, Ranking milch & zucker AG 7
1) Warum überhaupt User, Devices, Ranking, Browser Browser Verteilung 03.2015 Quelle: Statista.com milch & zucker AG 8
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
2) Was heißt das und was macht das? Eine Website, viele Devices Responsive heißt: Reaktionsfähig. milch & zucker AG 10
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
3) Wie geht das genau? Flexible Grids, Sprungmarken, Responsive vs. Adaptive milch & zucker AG 12
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
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
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
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
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
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
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
5) Mobile first Layout, Navigationskonzepte Beispiel Hauptnavigation: Desktopnavigation (klassisch) Geht auch noch auf Tablet Portrait milch & zucker AG 20
5) Mobile first Layout, Navigationskonzepte Beispiel Hauptnavigation: Auf Smartphone unter einem Icon zusammengefasst als Einklapp- Navigation milch & zucker AG 21
5) Mobile first Layout, Navigationskonzepte Beispiel Formularnavigation: Reiter vs. Klappnavigation: Auf Smartphone unter einem Icon zusammengefasst als Einklapp-Navigation milch & zucker AG 22
5) Mobile first Layout, Navigationskonzepte Beispiel Info-/Teaserboxen: Offene Collaps- Elemente auf Desktop und Tablet und geschlossene auf dem Smartphone. milch & zucker AG 23
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
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
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
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) http://usablica.github.io/front-end-frameworks/compare.html milch & zucker AG 27
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: 3.3.4 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 http://telekom.jobs milch & zucker AG 28
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 http://www.toms.com milch & zucker AG 29
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: 1.12.3 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 https://www.redesudeste.com.br milch & zucker AG 30
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: 0.6.0 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 http://purecss.io/layouts/email/ milch & zucker AG 31
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: 2.21.00 Popularität: 5.000+ 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 http://getuikit.com milch & zucker AG 32
8) Beispiele Deutsche Telekom AG http://www.telekom.jobs Daimler AG http://www.daimler.com/karriere/ Deutsche Bank https://www.db.com/careers/index.html Uni.-Klinikum Heidelberg https://karriere.klinikum.uni-heidelberg.de Deutsche Bahn https://karriere.deutschebahn.com Porsche https://jobs.porsche.com milch & zucker AG 33
8) Sonstiges Google mobile ready test https://www.google.de/webmasters/tools/mobilefriendly/ Google Page Speed Test https://developers.google.com/speed/ 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="49.8695282;8.6506852" /> <meta name="icbm" content="49.8695282, 8.6506852" /> <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
Fragen? milch & zucker AG 35
Vielen Dank Ingolf Teetz milch & zucker AG Küchlerstrasse 1 61231 Bad Nauheim http://www.milchundzucker.de i.teetz@milchundzucker.de milch & zucker AG 36