Hallo und herzlich willkommen zu einem weiteren Fachartikel, diesmal geht es um das Thema "responsive Webdesign" bzw. wie man mit der steigenden Zahl von mobilen Surfing-Geräten arbeitet.
Mobile Surfing-Geräte besitzen im Vergleich zum herkömmlichen Desktop-Browsing nur eine sehr kleine Leseoberfläche und man muss den Bildausschnitt eventuell mehrmals pro Minute verschieben oder sogar heraus- und wieder hineinzoomen.
In den meisten Fällen kann der Benutzer zudem durch schwenken des mobilen Anzeigegerätes wiederholt und unbegrenzt zwischen einer hoch- und einer Querformatigen Ansicht wählen.
Da lohnt es sich also schon, den Inhalt mit einem technischen Filter anzupassen, sodass der Benutzer mehr Text bzw. Inhalt pro Fläche vorliegen hat. Wir benutzen die CSS3-Media-Queries:
/* CSS-Anweisungen, die eine normal große Seite produzieren */
@media only screen and (max-width: 480px) {
/* Diese Anweisungen werden hier für die querformatige Ansicht überschrieben */
}
@media only screen and (max-width: 320px) {
/* Die CSS-Anweisungen werden erneut, hier für's Hochformat überschrieben */
}
Hochformat
Querformat
Widescreen
