Responsive Design ist ein relativ neuer Begriff im Webdesign. Es wurde erst vor drei Jahren im Mai 2010 geprägt, als der Webdesigner Ethan Marcotte den Begriff in sein Artikel für eine Liste Apart.
Heute gibt es sogar eine Mini-Debatte darüber, ob Responsive Design hier bleiben oder ob es nur ein Strohfeuer ist. Nur die Zeit wird es zeigen, aber im Moment ist es klar, dass Responsive Design bestrebt ist, die Benutzerfreundlichkeit so angenehm wie möglich zu gestalten.
Responsive Design ist eine Webdesign-Philosophie, die sich auf die Erstellung von Websites konzentriert, die den Nutzern ein verbessertes Seherlebnis bieten. Dazu gehören Funktionen wie müheloses Navigieren und Lesen sowie ein Minimum an Browser-Größenänderung, Scrollen und Panning. All dies geschieht über verschiedene Geräte, von Desktops bis zu Smartphones.
Da dieser Web-Design-Ansatz immer noch in einem jungen Zustand ist, sind Sie vielleicht nicht ganz klar, worum es bei Responsive Design geht. Geht es mehr darum, Inhalte auf mehreren Plattformen nahtlos darzustellen, oder geht es hauptsächlich darum, Unternehmen dabei zu helfen, attraktivere Websites zu erstellen, um ihre Umsätze durch eine bessere Nutzererfahrung zu steigern?
Mashable ist schon auf ein Bein gegangen und namens 2013 das Jahr des responsiven Designs. Während das noch offen ist, sind einige grundlegende Aspekte des Responsive Design Standards, die niemals verschwinden werden. Hier sind die wichtigsten Responsive Design-Fakten, mit denen Sie sich vertraut machen können.
Sie würden denken, dass responsives Design und mobiles Design ein und dasselbe sind - aber das ist es nicht. Sicher, Responsive Design erstellt Websites, so dass sie beide auf die Größe eines Browsers reagieren und für Mobilgeräte optimiert sind. Responsive Design ist jedoch ein vollständiges Webdesign. Das Problem bei der Bezugnahme auf diesen Web-Design-Ansatz als mobiles Design ist, dass es inhärent einschränkend ist, was dem Ansatz selbst einen schlechten Dienst erweist.
Die effektivsten responsiven Websites können so betrachtet werden, wie sie sein sollten, und zwar über eine Reihe von Auflösungen hinweg. Dies umfasst alles von den üblichen 1024 × 768 Pixeln bis zu den 1920 × 1080 Displays und alles dazwischen. Websites wie diese sehen auch auf Tablets (sowohl Retina und Standard-Displays) als auch auf Smartphones hervorragend aus. Wenn ein Webdesigner das Responsive Design ausschließlich über den Kontext von Mobile betrachtet, verpasst er möglicherweise eine breitere Benutzererfahrung.
Gleichzeitig ist Mobile ein sehr geeigneter Ausgangspunkt für die gesamte Responsive Design-Diskussion. Es war die Norm, mit einem mobilen Schema zu beginnen und dieses Design dann auf zusätzliche Größen zu erweitern, da eine responsive Website entwickelt wurde. Viele Designer glauben, dass es einfacher ist, Visuals zu entwickeln, anstatt sie zu minimieren.
Wenn es eine Regel gibt, der Web-Designer folgen sollten, ist es, dass die Bildqualität wesentlich wichtiger ist als die tatsächliche Anzahl der Bilder. Der Grund ist, dass ein Bild mit niedriger Qualität in keiner Größe einfach attraktiv aussieht. Die Zeit, die ein Standort benötigt, um ein Bild zu laden, ist fast so wichtig wie die Größe. Mobile Benutzer werden dem zustimmen, da sie eine begrenzte Bandbreite haben, mit der sie konkurrieren können.
Was muss ein Webdesigner tun? Erreichen Sie einfach ein intelligentes Gleichgewicht zwischen Ladezeit und Qualität. Dies umfasst das Skalieren von Bildern mit CSS-Eigenschaften für Höhe und Breite, das Vermeiden des Ladens von Bildern in voller Größe und das Optimieren von Bildern für das Internet. Vor dem Hochladen empfiehlt es sich, alle Bilder zuzuschneiden und jedes Bild so klein wie möglich zu speichern, solange es eine scharfe, visuelle Qualität beibehält.
Auschecken Sony USA Website . Beachten Sie, dass alle Bilder von höchster Qualität sind, unabhängig von der Größe. Wenn Sie die Website besuchen oder die Startseite aktualisieren, beachten Sie auch, wie schnell die Bilder geladen werden. Sie müssen nicht länger als eine Sekunde warten, bis alles in den Fokus kommt.
Designer haben viele Möglichkeiten, Bilder in eine ansprechende Einstellung zu integrieren. Sie können nur ein paar Bilder verwenden; die Verwendung von Bildern in mobilen Formaten verringern; Bildern erlauben, sich in einer mobilen Umgebung zu maskieren; oder verwenden Sie verschiedene Dateigrößen und -versionen. Diese Auswahlmöglichkeiten werden effektiv funktionieren, obwohl einige Entwickler gegen das Verbergen von Bildern sind, da der Benutzer die Bilder trotzdem laden muss, obwohl sie unsichtbar sind.
Typ sollte nicht eine Einheitsgröße sein. Eine Schriftart, die auf Ihrem Desktop für das Auge ansprechend aussieht, kann auf Ihrem Smartphone schrecklich sein. Die Typografie muss denselben Regeln folgen wie andere Aspekte des responsiven Designs.
Der wichtigste Aspekt der reaktiven Typografie ist die Zeilenlänge. Für eine reibungslose Lesbarkeit sollte der Typ basierend auf der Breite des Bildschirms optimiert werden. Als Faustregel gilt für Desktop-Websites, dass eine Zeile zwischen 50 und 75 Zeichen ideal ist. Für Mobilgeräte sind nur 35 bis 50 Zeichen ideal.
Typ muss auch vertikal gelesen werden können. Viele Websites verwenden einen Zeilenabstand, der bei größeren Textblöcken bis zu 140 Prozent der Bildschirmgröße ausmacht. Wenn der Bildschirm kleiner ist, sollte mehr Platz hinzugefügt werden.
Sogar die spezifische Schriftart, die verwendet wird, ist signifikant. Fancy Fonts und Novelty Fonts haben die Fähigkeit, auf größeren Bildschirmen optisch ansprechend auszusehen, sind aber schwer lesbar, wenn die Punktgröße klein ist. Diese Arten von Schriftarten sollten viel Platz zwischen ihnen haben. Wenn Sie mit kleineren Formaten arbeiten, ist es am einfachsten, normale serifenlose Stile und sogar Striche zu verwenden.
Auf Website von Hardboiled Web Design Sie können sehen, dass viele dieser Prinzipien befolgt werden, was zu einer guten Reaktionsfähigkeit führt. Beachten Sie, dass die Zeilenlänge von Text auf einem Desktop - im Durchschnitt größer als die ideale Empfehlung von 50 bis 75 Zeichen - aus einer Schrift besteht, die sauber und leicht lesbar ist. Außerdem ist der Zeilenabstand größer als die Schriftgröße der Schrift. Auf Mobilgeräten wird die Reaktionsfähigkeit der Website noch besser: Auf einem iPhone 5-Display betrug die Anzahl der Zeichen pro Zeile etwa 67, was nur ein bisschen über der Idealvorgabe von 35 bis 50 Zeichen liegt.
Wenn es um die Benutzererfahrung geht, die einer der wichtigsten Faktoren ist, an die Webdesigner denken sollten, steht Navigation ganz oben auf der Prioritätenliste. Die Navigation muss reibungslos und effizient sein, um eine komfortable Benutzererfahrung zu gewährleisten.
Effektives responsives Design muss dies sicherstellen, indem Sie der spezifischen Breite eines bestimmten Browsers besondere Beachtung schenken. Eine Website, die responsive Design gut verwendet, wird ihre Site-Navigation in verschiedenen Bereichen, abhängig von der Breite des Browsers, einrichten. Eines der besten Beispiele dafür ist Essenssinn Website-Navigation.
Es wäre ein Fehler für Responsive Design, die Site-Navigation auf Geräten mit größeren Bildschirmen auf größere Proportionen zu skalieren.
Wenn Sie jetzt Webdesigner über Responsive Design sprechen hören, wissen Sie, dass es nicht nur darum geht, eine Website auf kleinen, mobilen Bildschirmen gut aussehen zu lassen. Sie werden wissen, dass dieser Designansatz auf dem Prinzip basiert, dass Websites aller Größen dem Benutzer die optimale Erfahrung bieten - unabhängig davon, was sie zum Anzeigen der Website verwenden.
Responsive Design ist immer noch ein relativ neues Konzept, zumindest für die meisten Menschen, die nur Webseiten im Internet betrachten. Deshalb können sich so viele Leute immer noch nicht darauf einigen, was responsives Design ausmacht ... responsives Design. Geht es darum, alles auf mobilen Bildschirmen richtig zu sehen? Geht es nur um Ladezeiten und hochwertige Bilder, die dem Auge gefallen? Geht es um ein sauberes Design und leicht lesbare Schriften?
All das und noch mehr. Das sind nur die Grundlagen dieses Webdesign-Ansatzes, aber Responsive Design entwickelt sich immer noch und ändert sich, so dass die Chancen gut sind, dass zusätzliche Elemente ebenfalls berücksichtigt werden. Am Ende geht es darum, das Nutzererlebnis zu verbessern, denn niemand möchte mit einer Website umgehen, die langsam, verschwommen, schwer zu lesen, unübersichtlich oder schwer zu navigieren ist.
Ist Responsive Design nur ein Trend? Was sind die wichtigsten Aspekte von Responsive Design? Lass uns deine Gedanken in den Kommentaren wissen.