Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Icons für Smartphones

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Apple-Touch-Icons sind kleine Bilder, die angezeigt werden, wenn ein Benutzer eine Web-Seite zum Homescreen hinzufügt. Diese sollten Sie in verschiedenen Formaten erstellen.

Transkript

Eine kleine Sorte Bilder ist nur für Smartphones und Tablets interessant. Beim iPhone und anderen Smartphones, aber auch bei Tablets wie dem iPad, können Benutzer Lesezeichen direkt zum Home-Screen hinzufügen lassen. Diese erscheinen dann auf dem Home-Screen als kleine Icons und ein Klick darauf führt direkt zur Web-Seite. Wenn Sie kein Icon erstellen zu diesem Zweck, wird einfach ein Screenshot der Web-Seite genommen. Schöner ist es dafür natürlich selber ein Icon zu erstellen. Dieses müssen Sie unter dem Namen 'apple-touch-icon.png' oder 'apple-touch-icon-precomposed.png' im Wurzelverzeichnis des Web-Auftritts abspeichern. Was bedeutet aber dieses precomposed? Standardmäßig erhalten die Icons eine bestimmte Formatierung, einen Glanz und abgerundete Ecken. Darum müssen Sie sich nicht selbst kümmern. Wollen Sie aber diese Veränderungen des Icons unterbinden, dann ergänzen Sie beim Icon-Namen eben dieses 'precomposed'. Jetzt sollten Sie die Icons in verschiedenen Größen erstellen und außerdem die auch auf eine bestimmte Art einbinden. Klingt ein bisschen komplizierter und in solchen Fällen lohnt es sich immer bei 'Mobile Boilerplate' vorbeizuschauen. Das ist wirklich ein 'Best practice', also das ist eine gute Basis für Projekte, die viele 'Best practice'-Lösungen enthält. Und hier können wir uns einmal anschauen wie die HTML-Datei ausschaut. Da finden wir nämlich die Verweise wie man die angeben muss für diese Icons. Sie sehen hier: also es ist ein Link-Element mit 'rel'. Und dann kommt eben 'apple-touch-icon-precomposed'. Dann wird die Größe angegeben und es wird angegeben wo sich das befindet. Und Sie sehen hier auch in wieviel Größen Sie das immer erstellen sollten. Und wenn Sie sich daran halten, dann klappt es auf jeden Fall. Wie gesagt, ist der Effekt dieser Icons nur sichtbar, wenn jemand dann die Web-Seite zum Home-Screen hinzufügt. Aber dann ist es natürlich schöner, wenn hier das Icon erscheint und nicht einfach ein Screenschot der Web-Seite.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!