Responsives Design

Die "alten Zeiten"

Die Generationen, die in das digitale Zeitalter hineingeboren wurden - die sogenannten "Born Digitals" - können es sich gar nicht mehr vorstellen. Wie das damals war, so ohne Smartphone.

Damals, als Anfang der Neunziger Jahre des letzten Jahrhunderts das Internet und damit die Entwicklung der notwendigen Peripherie dazu die ersten nennenswerten Entwicklungsschritte vollbrachte. (Tim Berners-Lee, 1989)

Dazu gehörten klobige Tastaturen und noch klobigere Röhrenmonitore genauso dazu wie das analoge Modem zum Einwählen in das Internet. Flatrate? Weit gefehlt, abgerechnet wurde im Minutentakt.

Die ersten Internetseiten sahen auch noch ganz anders aus als heute. Vor allem: es war nicht notwendig, sie an sehr viele verschiedene Display-Größen lesbar anzupassen. Denn es gab ja nur den Röhrenmonitor, der in wenigen Größen verfügbar war.

Bereits Ende der 90er Jahre gab es die ersten Flachbildfernseher und damit auch die ersten Flachbildmonitore, die jedoch noch eine Weile Zeit benötigten, um die alten Röhrenbildschirme abzulösen. Bis sie bezahlbarer wurden.

In der Zeitreise erinnern sich die Älteren unter uns ganz sicher an den legendären Auftritt von Steve Jobs, als er 2007 das iPhone mit dem Touchscreen präsentierte. Weniger bekannt ist, dass IBM bereits 1993 mit dem IBM Simon das erste Smartphone auf den Markt gebracht hat.

Es folgten immer mehr Smartphones, iPads und Tablets. Die Bildschirmgrößen, die immer mehr für den Internetzugang genutzt wurden, hatten also ziemlich große Spannbreiten von ganz klein (Smartphone) bis ganz groß (Monitor).

Responsives Design - was ist das?

Die Internetseiten waren also ursprünglich im "starren Format" aufgebaut und geeignet für die Größe eines Monitors.

Wenn man sich diese Seite auf einem kleinen Display wie auf einem Smartphone ansieht, wird die Seite genauso wie sie aufgebaut ist unflexibel auf Minimalgröße geschrumpft. So, dass niemand mehr Bilder erkennen oder Text lesen kann.

Erst im Jahr 2010 war es Ethan Marcotte, der in einem Artikel vorschlug, dass Webdesigner flüssige Raster, flexible Bilder und Media Queries verwenden sollten, um Websites zu erstellen, die sich automatisch an verschiedene Größen von Bildschirmen anpassen.

Der Beginn des "Responsive Web Designs" war geboren.

Genau wegen dieser flexiblen Designs können wir heute Websites auch auf kleinen Bildschirmen bequem anschauen.

Da sich immer mehr Menschen "nur" mit Smartphone oder iPad/ Tablet im Internet bewegen, wurde der Begriff für die Designer "Mobile First" geprägt.

Anekdote am Rande

Wenige unter uns sind in der Lage, eine Website ohne die hilfreichen Baukästen von Webdesign-Anbietern zu erstellen. Diese Baukästen übersetzen die Gestaltung des Anwenders im Hintergrund in Programmiersprachen wie Java, Java Script und PHP.
Für diese Baukästen sind im Zweifel keine Programmierkenntnisse erforderlich - allerdings dennoch sehr hilfreich.

Viele Softwares zur Erstellung von Websites waren lange Zeit leider nicht responsiv. Auch heute gibt es kaum Softwares, die man einmal mit einem Betrag kauft und dann damit arbeiten kann. Es bleiben die Baukästen, die man mit monatlichen Gebühren bezahlt.

Die Anekdote:

Vor noch nicht allzu langer Zeit entdeckte ich eine Website, die ich mir über meinen großen Monitor am PC anschauen wollte.
Es war die Website über Hochzeitsfotos einer ehemaligen Kollegin.
Ich wurde am Monitor nahezu "erschlagen".

Statt ein responsives Design umzusetzen, wurde hier dennoch die Devise "mobile first" sehr-sehr ernst genommen.
Die Schriftart und die Größe der Fotos wurde so riesig gewählt, dass sie beim starren Zusammenschrumpfen auf Smartphone-Bildgröße immer noch gut sichtbar waren.

Mit dem Effekt, dass der Betrachter mit einem größeren Bildschirm erschlagen wurde.

Das ist definitiv keine empfehlenswerte Lösung!

Wie die flexible Website entsteht

HTML ist die Grundlage einer Website. Es ist eine Ausprägungssprache, die mit HTML-Befehlen den zu präsentierenden Text aufnimmt und entsprechend auf die darzustellenden Bilder oder Videos verweist.

Das allein sieht jedoch ziemlich hässlich aus. Es funktioniert optisch ansprechend nur in der Verbindung mit dem sogenannten Style Sheet.
Im Style Sheet definiert man die Optik, wie Bilder angeordnet werden sollen, wie die Schrift aussieht und vieles mehr. Besonders bei Bildern wird mit Flexboxen und Gridboxen gearbeitet, um durch Zeilenumbruch bei schmalen Displaybreiten die Responsivität zu gewährleisten.

Das Style Sheet vererbt seine Festlegungen kaskadierend nach unten - daher der Name Cascading Style Sheet: CSS.

HTML und CSS gehörten nicht zu den eigentlichen Programmiersprachen, da ihnen Befehlsstruktur, Algorithmen, Aufgaben, Bedingungen oder Schleifen fehlen.
Es handelt sich um Ausprägungssprachen.

Komplexere Websites kommen heutzutage nicht mehr allein mit HTML und CSS aus.

Für interaktive Seiten wie Web Shops, Blogs, Chats oder auch Formulare sind Programmiersprachen notwendig.
Die momentan gängigsten sind beispielsweise Java, Java Script, PHP, Python, Ruby und einige mehr.

Verständlicherweise "scheitert" daran der private Anwender, der eine eigene Website erstellen möchte.

Hierfür sind dann die bereits oben erwähnten Baukästen sehr hilfreich. Die Alternative ist natürlich, eine professionelle Agentur mit der Erstellung der Website zu beauftragen.
Üblicherweise sollen jedoch die Webseiten immer wieder mit Neuigkeiten angepasst werden.
Wenn das der Fall ist, kommt es darauf an, wie schnell eine professionelle Agentur reagiert und die Änderungen erstellt.

Selbstverständlich ist es am Ende auch immer eine Frage der Kosten.

Mit einem Baukasten flexibler selbst Änderungen erstellen oder eine Agentur beauftragen.

Wie immer: es gibt für alles ein Für und Wider. Entscheiden muss das für sich jeder Einzelne selbst.

Die Website publizieren

Was wir brauchen - und was auch Geld kostet:

🔷 Den Baukasten, um anwenderfreundlich die Website zu erstellen oder
🔷 eine Agentur beauftragen

Wenn man nicht selbst mit HTML, CSS und Programmiersprachen die Website erstellen kann oder will.

🔷 Eine domain wie www.sabine-mustermann.de - je nachdem, wie die Site heißen soll und ob sie noch zur Verfügung steht.

🔷 Das Hosting. Den Server, der 24/7 mit dem Internet verbunden ist und zur Verfügung steht.

Alles in allem ist es für private Anwender ein tolles Hobby - aber auch eins, welches ein bisschen Geld kosten.

Es gibt allerdings auch sehr viel teurere Hobbys...

In diesem Sinne: Viel Spaß beim Erstellen einer eigenen responsiven Website!