Erste Schritte mit Responsive Webdesign

Praxisbeispiele - Ohne Responsive Webdesign

Testen Sie unsere 1922 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Nicht jede Website basiert bereits auf Responsive Webdesign. Sehen Sie in diesem Video ein paar Beispiele, die noch auf die neue Methode verzichten.

Transkript

Ich möchte nun noch einige Beispiele aufzeigen, die auf Responsive Design verzichtet haben. Das erste Beispiel ist ein bekannter Fernsehsender, der auf das auf Responsive Design speziell für Smartphone verzichtet hat. Noch einmal wichtig in diesem Zusammenhang: Das bedeutet nicht, dass es eine schlechte Seite ist sondern schlicht und ergreifend, dass die Umsetzung nicht gemacht wurde. Diese Entscheidung müssen Sie als Betreiber einer Seite oder auch als Programmierer natürlich jederzeit treffen. Ist Ihnen der Aufwand Wert, für spezielle Endgeräte auch das Responsive Design zu implementieren, ja oder nein? Wenn nicht, dann lassen Sie es eben. Aber was dabei herauskommt, möchte ich Ihnen hier demonstrieren: Ich rufe die Seite einmal auf und wir sehen hier jetzt auf dem Screen zunächst einmal eine Webseite, wie wir sie kennen, üblicherweise. D.h. wir haben hier links einen Bereich, der flexibel dargestellt wird. Je nach Auflösung vergrößert sich einfach dieser Bereich. Der eigentliche Contentbereich hier in der Mitte wird immer gleich groß sein. Schauen wir uns das Ganze nun auf einem iPad an. Das habe ich bereits vorbereitet. Ich muss das iPad nur noch starten und die Seite dort aufrufen. Wie wir hier erkennen, ist der Seiteninhalt komplett identisch zu einem normalen Browserinhalt auf dem Desktop. Das einzige, was fehlt, ist der blaue Balkenbereich links und rechts der Webseite. D.h. hier hat der Designer die Möglichkeit gewählt, die Breite auf das Maximum des iPads oder eines beliebigen Tablet-PCs anzupassen. Schauen wir uns das Beispiel nun auf einem iPhone an, sieht man, dass sich hier die Webseite ebenfalls nicht verändert sondern einfach nur kleiner wird. Die Bedienung hier ist sehr mühselig, wenn man gerade die Menü-Punkte betrachtet man sie kaum lesen kann geschweige denn, dass man sie mit einem Finger anklicken könnte. D.h. ich muss immer diesen Zoom-Faktor wählen und entsprechend die Seite so öffnen. Sie sehen, jetzt bin ich schon woanders hingekommen, wo ich eigentlich hinwollte. Aber das passiert eben bei Seiten, die zu klein sind und wo man immer dieses Reinzoomen durchspielen muss, um auf bestimmte Inhalte zu klicken oder bestimmte Inhalte zu sehen. Im Landscape-Format, also Querformat, wie Sie es hier erkennen, ist es noch einigermaßen machbar. Aber richtig problematisch wird es dann in dem Moment, wenn man das Hochformat wählt. Ich drehe das Ganze mal um. Jetzt sind wir in einem Bereich, der sehr klein ist. Man kann noch nicht einmal mehr die Schrift lesen und spätestens hier wird deutlich, wie wichtig eigentlich Responsive Design ist - denn die Nutzerrate von solchen Smartphones ist mittlerweile so hoch, dass es ein großer Kundenkreis, ein gewaltiger Markt ist, der mit diesen Geräten, mit diesen Endgeräten, auf Webdienste, auf Webseiten zugreift. Greifen wir das Beispiel meiner Seite auf, der Burgeninfo-Seite. Ich rufe das noch mal auf, burgeninfo.de. Haben wir hier das gleiche Prinzip, d.h. ich habe ein Design gewählt, was eine feste Breite besitzt im Contentsektor und hier links und rechts der Seite entsprechend, hier nicht farbig, aber immerhin eine Fläche, die dynamisch reagiert auf die Auflösung der jeweiligen Seite. Das erneut im iPad betrachtet sieht so aus, dass, wenn ich jetzt die Seite aufrufe - ich gebe ganz kurz ein, wo wir hin müssen, www.burgeninfo.de - haben wir das gleiche Prinzip wie bei dem bekannten Fernsehsender. Links und rechts die Bereiche sind abgeschnitten oder sind nicht sichtbar und der eigentliche Contentbereich ist entsprechend auswählbar. Auch hier wieder, auf dem iPad oder ganz allgemein auf Tablet-PCs ist das noch relativ gut nutzbar. Aber auf einem iPhone, schauen wir uns das dort auch noch an, haben wir hier das gleiche Problem wie bei dem Beispiel zuvor. Auch hier ist wieder eindeutig erkennbar, dass die Seite so nicht wirklich benutzbar ist. Es passiert sogar etwas Schlimmes, denn der Menübereich, die Menüleiste, wird umgebrochen. Auch hier kann ich im Landscape-Format zwar einigermaßen navigieren. Das kommt auch auf das Smartphone an. Ich kann sehr schön zoomen, also d.h. lesbar bleibt das Ganze schon. Aber es ist eben nicht so, wie es sein könnte und ich muss hier wirklich mit vielen Mausklicks oder bzw. mit vielen Bewegungen die Seite aufrufen. Auch hier ist natürlich im Hochkantformat das Ganze noch schlimmer. Auch hier erkennbar: Im Textbereich kaum lesbar und navigierbar, gerade wenn man hier im unteren Sektor die Sprachversionen betrachtet, die sind so gar nicht anklickbar.

Erste Schritte mit Responsive Webdesign

Erarbeiten Sie sich die grundlegenden Techniken zu Responsive Webdesign und stellen Sie damit sicher, dass sich Ihre Webseiten auf unterschiedlichen Endgeräten einsetzen lassen.

1 Std. 32 min (11 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!