STRUKTUR UND DESIGN RESPONSIVER WEBSEITEN AUF SMARTPHONES : wie sie das mobile internet ... userfreundlich gestalten

Annika Brinkmann zeigt in diesem __essential__, wie mit wenigen Kniffen aus schlechten Beispielen gute mobile Webseiten entstehen können. Die Autorin erläutert, was getan werden muss, um Inhalte nicht zu klein oder zu groß für den verfügbaren Platz darzustellen, Navigationen sinnvoll zu strukturieren und von der richtigen Seite her einzublenden. Kurzum: Sie zeigt, wie man mobile Websites übersichtlich gestaltet, damit diese keinen User-Frust auslösen. Das mobile Internet hat die Nutzung von Webseiten auf Desktop-Computern längst hinter sich gelassen. „Mobile first“ ist angesagt, die Zeichen stehen oftmals sogar auf „Mobile only“-Nutzung des Internets – zumindest im Privatgebrauch. Was Sie in diesem essential finden können 6 Vorwort 7 Begriffsklärung 8 Hinweise zu den Bildern 9 Inhaltsverzeichnis 10 1 Versuch einer Problembeschreibung 12 1.1 Status quo 2018 12 1.1.1 {Put some device name in here} first! 14 Auswüchse von „Mobile first“ 15 Auswüchse von „Tablet first“ 15 Auswüchse von „Desktop first“ 16 Weg vom „[Device] first“-Ansatz 17 1.1.2 Eine Fotografie entsteht nicht im Labor – eine Webseite wird nicht vom Programmierer gestaltet 18 Ich liebe Entwickler – was die alles können! 19 Ein Unterschied wie Tag und Nacht 19 Geschichten aus der Praxis 20 1.2 Das mobile Internet kann noch viel besser werden. Helfen Sie mir dabei! 21 1.2.1 Impfungen gegen die schlimmsten Unarten im mobilen Webdesign ... 21 ... z. B. Navigationspunkte, die ohne inhaltliche Aussage den ganzen Screen einnehmen 22 ... z. B. das Formular-Element des Pulldowns als Navigations-Element einsetzen 22 ... z. B. den User zwingen, sein Smartphone zu drehen 23 2 Das mobile Internet könnte so schön sein. Es müsste nur gut gemacht werden 25 2.1 Above the fold – die erste Ansicht 27 2.1.1 Den Inhalt vor lauter Metadaten nicht sehen 27 2.1.2 Den Inhalt vor lauter Bild nicht sehen 27 2.1.3 Den Nutzer mit Keksen vergraulen 30 2.1.4 App-Store-Werbung 30 Vorgefertigte App-Store-Links 31 App-Store-Links und andere werbliche Inhalte in Overlays 31 2.2 Der Header 33 2.2.1 Von Riesen- und Zwergen-Logos 33 2.2.2 Sticky Elements 33 2.2.3 Funktionsblockade mit Sticky Elements 36 2.2.4 „Hamburger“-Menüs 36 Hamburger-Menüs nicht zu früh auflösen 38 2.2.5 Kraut und Birnen – Navigation ohne Orientierung 40 2.3 Der Inhaltsbereich 40 2.3.1 Der Satzspiegel – die Breite des Textblocks 40 Umbrüche in Überschriften und anderen Spezialfällen 43 Schriftgrößen 43 Webfonts richtig einbinden 45 2.3.2 Tabellen 45 Werte vor Eigenschaften 45 Gängige Notlösungen 47 Tabellen auflösen 47 2.3.3 Formulare 48 Inputfelder ohne Input-Types? Niemals! 49 Pulldowns? Pull them down! 49 2.3.4 Klappmenüs 53 2.3.5 Reiter/Tabs 55 2.3.6 Bilder auf Smartphones 56 Bilder auf Smartphones braucht kein Mensch? 57 Welches Bildformat ist das richtige? 57 Bild-Text-Kombinationen 57 Auf das Bild gerenderter Text 59 Text-Overlays auf Bildern 59 Wie man eine Galerie versaut 61 2.3.7 Videos responsive einbinden 66 2.3.8 Contiguous Navigation 66 2.4 Der Footer 67 2.4.1 Vor dem Footer: Der Link nach oben 68 2.4.2 Social Media Icons 68 2.4.3 Newsletter- und Kontaktformulare 70 3 Kurzer Abriss über die technische Basis von responsivem Webdesign 71 4 Ein paar Links zum Schluss 73 Was Sie aus diesem essential mitnehmen können 74 Front Matter ....Pages I-XIV Versuch einer Problembeschreibung (Annika Brinkmann)....Pages 1-13 Das mobile Internet könnte so schön sein. Es müsste nur gut gemacht werden (Annika Brinkmann)....Pages 15-60 Kurzer Abriss über die technische Basis von responsivem Webdesign (Annika Brinkmann)....Pages 61-62 Ein paar Links zum Schluss (Annika Brinkmann)....Pages 63-63 Back Matter ....Pages 65-65 Die Autorin erlautert, was getan werden muss, um Inhalte nicht zu klein oder zu gross fur den verfugbaren Platz darzustellen, Navigationen sinnvoll zu strukturieren und von der richtigen Seite her einzublenden.