Close Menu
Webmemo Consulting Walter Schärer | Generative AI Beratung
  • Home
  • Social Media
  • Online-Tools
X (Twitter) LinkedIn Facebook RSS
  • Home
  • Kontakt / Über mich
  • Datenschutz
  • Nach oben
Webmemo Consulting Walter Schärer | Generative AI Beratung
LinkedIn YouTube RSS
  • Home
  • Social Media
  • Online-Tools
Webmemo Consulting Walter Schärer | Generative AI Beratung
NavigationHome»Visualisierung»Responsive Web-Design – Wie geht man vor?
Responsive-Design-Praesentation
Visualisierung

Responsive Web-Design – Wie geht man vor?

Walter SchärerBy Walter Schärer1. Mai 20234 Mins Read
Hier teilen
LinkedIn Twitter Facebook Email

Gemäss Google werden 2015 60% aller Websuchen von mobilen Geräten aus gemacht. Es ist also anzunehmen, dass Google den Page Speed, also die Ladezeit, und die mobile Darstellung als Rankingkriterium einführt. Was heisst das für die Programmierung von Mobilen Webseiten?

Felipe Kaufmann und Melinda Lini von Screen Concept referieren am Internet-Briefing über Responsive Web-Design.

Responsive Web-Design ist unterdessen mehr als ein Buzzword, denn die Vielfalt der Endgeräte und der verfügbaren Hilfsmittel für Designer und Frontend-Entwickler wird laufend grösser. Felipe Kaufmann, Teamleader Software Engineering und Melinda Lini, Teamleader Interaction Design bei Screen Concept, präsentieren die relevanten Kriterien.

2013 griffen weltweit 17% via Smartphones auf Internetdienste zu (hoch von 12% in 2012). Haupttreiber sind Entwicklungsländer, in denen sich User keine Laptops oder Desktops leisten, sondern nur via Mobiles auf das Internet zugreifen.

22% der Online-Sales des Black Friday’s werden über Mobile abgewickelt. Entsprechend wichtig ist es heute, alle Inhalte auch für mobile Geräte aufzubereiten.

2013 gab es 232 verschiedene Bildschirmauflösungen (2010 waren es noch 97). Es ist nicht mehr realistisch, für alle eine eigene Lösung anzubieten, dynamische Konzepte drängen sich auf.

Melinda Lini von Screen Concept über Bildschirmauflösungen
Melinda Lini von Screen Concept über Bildschirmauflösungen

Fred Wilson:

Speed is the most important feature
 

85% der Mobile User erwarten die gleiche Geschwindigkeit wie auf dem Desktop.
57% verlassen eine langsame Seite nach 3 Sekunden.

Der limitierte Platz auf Mobiles zwingt zum Beschränken auf das Wesentliche. Das sollte man proaktiv als Vorteil einsetzen!

Die Erstellung des Designs sollte heutzutage möglichst schnell im Browser erfolgen, d.h. Designer sollten sich in der Mobile Programmierung auskennen und Auftraggebern möglichst schnell klickbare Prototypen anbieten. Designabnahmen erfolgen entsprechend im Browser und nicht mehr auf Papier.

Melinda Lini über die Abnahme von Mobile-Prototypen
Abnahme von Mobile-Prototypen

Je enger die Zusammenarbeit von Designern und Entwicklern ist, umso besser das Resultat.

Edge Reflow CC ist Tool für die Erstellung von Responsive Designs.

Herausforderungen aus Design- und Entwicklungssicht

Ethan Marcotte ist einer der wegweisenden Entwickler der Responsive-Bewegung: Mit einem einzigen CSS-File und Media-Queries können unterschiedliche Darstellungen ausgegeben werden.

responsive-web-design-ethan-marcotte-ebook
Ethan Marcotte über Responsive Design

1. Man benutze Preprocessors wie SASS oder LESS

Sass: Syntactically Awesome Stylesheets werden via Preprocessors generiert. Damit können die CSS-Files Variablen und Schleifen beeinhalten ebenso wie Mix-Ins mit wiederverwendbaren Funktionen.

Effiziente CSS-Erstellung via Mixins gemäss Felipe Kaufmann
Effiziente CSS-Erstellung via Mixins gemäss Felipe Kaufmann

Damit lässt sich viel Code sparen, um nicht für alle Fälle dedizierten Code anbieten zu müssen. Ganze Raster lassen sich so dynamisch erstellen.

2. Man fange nicht bei Null an

Im Minimum sollte man HTML5 und Boilerplate by Paul Irish einsetzen. Frameworks wie Foundation und Bootstrap unterstützen User-Interface Komponenten.

3. Man benutze ein Raster statt Pixeln

Es gibt vordefinierte Raster, in die übliche Design- und Werbeformate passen. Die Breakpoints des Codes sind automatisch darauf abgerichtet. Die Elemente können sich über mehrere Kolonnen erstrecken.

4. Progressive Enhancement & Graceful Degradation

Es lohnt sich, Mobile First zu beginnen und sich auf die wichtigsten Funktionen zu beschränken. Darauf basierend können für den Desktop komplexere Funktionen erweitert werden. Es kann auch bedeuten, dass nur der Desktop runde Ecken unterstützt, aber nicht die Mobile-Version.

Modernizr ist ein SVG-Generator. Werden SVG-Bilder (Vektorbilder) vom Browser unterstützt, wird dieses als sehr scharfe Retina-Grafik ausgeliefert. Falls nicht, wird ein JPG dargestellt, das immer noch relativ gut ist.

5. Modularisieren

Die Organisation des Codes ist zentral. «Scalable and Modular Architecture for CSS» ist eine gute Wegleitung für die Organisation des CSS-Codes.

Responsive Design: was auch noch zu beachten ist

Speed und Mobile Performance sind wichtiger denn je. Caching-Methoden sind gut zu evaluieren.

Which responsive images solution should you use?

Man sollte immer zuerst die kleinsten Bilder ausliefern. Via HTML5 Data-Attribute werden bei Bedarf höhere Auflösungen nachgeladen. Im optimalen Fall basierend auf der Verbindungsgeschwindigkeit des Nutzers.

Anleitung Internet-Briefing Mobile Usability Vortrag
Share. LinkedIn Twitter Facebook Email
Walter Schärer
  • Website
  • Facebook
  • X (Twitter)
  • LinkedIn

Walter Schärer ist ein Generative AI Marketing Manager und Solutions Architect und bloggt bei webmemo.ch über Trends in künstlicher Intelligenz KI.

Ähnliche Informationen

How to prompt videos in Runway ML or Kling AI

25. Oktober 2024

AI image generation with Flux and the ComfyUI visual user interface

2. Januar 2025

The Best Day and Time to Post on LinkedIn? It’s Personal—Forget the Averages

25. August 2024
Add A Comment
Leave A Reply Cancel Reply

Über Walter Schärer

Dies ist Walter Schärers Blog über Online-Themen wie Generative AI, Digital Marketing, Search Engine Optimierung (SEO), Content Marketing und Performance Marketing.

Walter Schärer arbeitet seit 1994 als Scrum Product Owner und Online-Manager im Web-Umfeld.

  • Von HTML / VRML kam er via
  • Powerpoint / Word zu
  • Confluence / Jira dann
  • Trello / Whiteboard (Edding 500) und organisiert sich aktuell mit
  • Asana / Google Drive, wenn er nicht gerade mit
  • ChatGPT / MidJourney oder
  • WordPress / Elementor experimentiert.

«Programmierung» begann er mit

  • NoCode von Make und
  • LowCode von ChatGPT, ging über zu tatsächlicher Programmierung in
  • Python auf Anaconda und dann in
  • Google Colab / Gemini / Claude Sonnet sowie
  • Visual Studio Code / GitHub Copilot

Die Inhalte dieses Blogs spiegeln meine persönliche Meinung und sind von keinem Arbeitgeber beeinflusst.

© 2010 - 2025 Webmemo Consulting | Walter Schärer
  • Home
  • Kontakt / Über mich
  • Datenschutz
  • Nach oben

Type above and press Enter to search. Press Esc to cancel.