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!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Seph

    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/divi-reso…h-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

    Zitat

    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/das…em-rem-oder-px/

    Ü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/

    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden