1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Einstieg in das Responsive Webdesign

Dieses Thema im Forum "Design" wurde erstellt von Seph, 11. Oktober 2017.

  1. Seph

    Seph Well-Known Member

    Registriert seit:
    16. Juli 2010
    Beiträge:
    222
    Zustimmungen:
    0
    Hallo zusammen,

    ich habe einen Hintergrund als Gestalter, aber wenig Erfahrung im Webdesign und keinen im Responsive Design. Die zugrundeliegenden Prinzipien sind mir einigermaßen klar, ich weiß zum Beispiel, was Viewports sind und dass sich Elemente anhand von Sprungmarken dynamisch in Größe und Layout verändern etc. pp. - Mir ist nur nicht klar, wie ich eine optimale Schnittstelle von meinem Gestaltungsdokument hin zum Programmierer schaffe, damit dieser meine Ideen umsetzen kann. Für mich sind die Kernfragen:

    - Für welche drei gängisten Viewports muss ich gestalten? Gibt es da Standards?
    - Wie muss das Gestaltungsdokument beschrieben werden (Pixel, Prozent?), sodass der Entwickler es exakt umsetzen kann?

    Danke für die Antworten!
     
  2. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Die grundsätzliche Frage ist, ob das Web-Design responsiv oder adaptiv oder beides sein soll.

    Abgesehen davon ist die Frage der drei (?) gängigsten Viewports vor allem eine philosophische Frage.

    Wix etwa unterscheidet nur nach Desktop oder Mobile. Das beliebte "Standard-Theme" Divi dagegen arbeitet mit sechs Break-Points:

    https://www.elegantthemes.com/blog/divi-resources/how-to-identify-divis-responsive-breakpoints-and-fine-tune-your-designs-with-media-queries

    Die Krux dabei ist, dass diese beispielsweise nicht mit iPhones und iPads "kompatibel" sind.

    Eine Statistik der verwendeten Bildschirme findet sich beispielsweis hier:

    http://gs.statcounter.com/screen-resolution-stats

    Auch das ist eine philosophische Frage. Am einfachsten sind Pixel, finde ich, obwohl REM und EM empfohlen werden.

    Dazu beispielsweise:

    https://blog.novatrend.ch/2017/10/02/das-muss-etwas-nach-links-em-rem-oder-px/
     
  3. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Übrigens habe ich jetzt gerade gesehen, dass der Inspektor von Firefox derzeit mit folgenden Bildschirmgrössen arbeitet:

    320x480
    360x640
    768x1024
    800x1280
    980x1280
    1280x600
    1920x900

    Die Vorschau des WordPress-Customizers wiederum verwendet folgende Formate gemäss WP Smackdown:


    • The desktop version will always fill up 100% of your screen
    • The tablet version is set to 6-inch x 9-inch
    • The mobile version is set to 320px x 480px

    Vgl. https://wpsmackdown.com/device-preview-wordpress-customizer/

    Eine interessante Ergänzung dazu findet sich hier:

    https://wpsmackdown.com/device-preview-wordpress-customizer/
     
  4. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    Und Chrome erlaubt standardmässig die Wahl zwischen

    Galaxy S5
    Nexus 5X
    Nexus 6P
    iPhone 5
    iPhone 6 Plus
    iPad
    iPad Pro

    Aber das interessiert den TE mittlerweile offensichtlich nicht mehr... Hauptsache der Entwickler (!) setzt seine Vorgaben exakt um. :twisted:

    Genauso funktioniert Webdesign eben nicht. Ausser es darf jede Menge Geld verbrannt werden.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden