Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 4 von 4
Like Tree1Likes
  • 1 Post By Edi

Thema: Einstieg in das Responsive Webdesign

  1. #1
    PostRank: 4
    Registriert seit
    16.07.2010
    Beiträge
    206

    Einstieg in das Responsive Webdesign

    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. #2
    Edi
    Edi ist offline
    PostRank: 10 Avatar von Edi
    Registriert seit
    26.07.2006
    Ort
    Zürich
    Beiträge
    3.475
    Zitat Zitat von Seph Beitrag anzeigen
    Für welche drei gängisten Viewports muss ich gestalten? Gibt es da Standards?
    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/d...-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

    Wie muss das Gestaltungsdokument beschrieben werden (Pixel, Prozent?), sodass der Entwickler es exakt umsetzen kann?
    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...m-rem-oder-px/
    Kurt Singer likes this.
    Was ich auch noch mache und garantiert nicht mit WordPress zu tun hat: Fidus-Projekt.

  3. #3
    Edi
    Edi ist offline
    PostRank: 10 Avatar von Edi
    Registriert seit
    26.07.2006
    Ort
    Zürich
    Beiträge
    3.475
    Ü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-previ...ss-customizer/

    Eine interessante Ergänzung dazu findet sich hier:

    https://wpsmackdown.com/device-previ...ss-customizer/
    Was ich auch noch mache und garantiert nicht mit WordPress zu tun hat: Fidus-Projekt.

  4. #4
    Edi
    Edi ist offline
    PostRank: 10 Avatar von Edi
    Registriert seit
    26.07.2006
    Ort
    Zürich
    Beiträge
    3.475
    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.

    Genauso funktioniert Webdesign eben nicht. Ausser es darf jede Menge Geld verbrannt werden.
    Was ich auch noch mache und garantiert nicht mit WordPress zu tun hat: Fidus-Projekt.

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •