Warum EM besser als REM ist - Responsive Webdesign
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Responsive Webdesign: EM oder REM - was ist eigentlich besser? In diesem Video schauen wir uns die Unterschiede und Vorteile von EM gegenüber REM an und warum du in Webflow keine Pixel als Einheit verwenden solltest.
In meinen Tutorials siehst du mich meistens EM als Einheit benutzen und dazu erreichen mich auch häufig Fragen. Genauso von David aus meiner Patreon Community. Er fragt: Bei der Entscheidung zwischen t.ricks EM-Methode und F'insweets REM-Methode für responsive Websites habe ich mich für F'insweets Variante entschieden und habe das Gefühl, dass diese auch von mehr Leuten in der Community genutzt wird. Welche würdest du empfehlen?
In diesem Beitrag erkläre ich dir genauestens, warum ich EM gegenüber REM bevorzuge. Aber selbst wenn du dich für REM entscheidest oder schon länger damit arbeitest, ist das allemal besser als PX zu nutzen. Den Grund dafür solltest du nach dem Video verstehen (Barrierefreiheit im Web).
---------------------------------------------
Meine Onlinekurse:
👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
formburg.com/kurs
👉 50+ Webflow-Tricks:
www.formburg.com/tricks
👉 Webdesign Angebote mit drei Preisoptionen erstellen:
www.jonasarleth.com/produkt/w...
---------------------------------------------
Kostenlosen Webflow Account anlegen:
formburg.com/webflow-kostenlos *
Webflow schnell und einfach lernen:
formburg.com/tutorials
---------------------------------------------
// TIMESTAMPS
00:00 - Intro
01:37 - Das Problem mit Pixel verstehen
03:47 - Responsive Unterschied PX vs REM vs EM
05:18 - Vorteil EM Skaliert und behält das Verhältnis bei
07:59 - Problem beim Finsweet Client First Aufbau
08:32 - Warum REM und EM besser als PX sind (Vorteile Barrierefreiheit)
10:47 - Wie du REM auch schneller responsive bekommst
14:10 - Pixel einfach in REM und EM umrechnen
16:11 - Unterschied EM zu REM
18:37 - Warum du minimum mit REM arbeiten solltest
19:26 - Outro
#webflow #websitedesign #webdesign
---------------------------------------------
// PATREON
► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): bit.ly/patreon-seite
----------------------------------------------
// MEIN WEBDESIGN UND FREELANCER BLOG
► jonasarleth.com/blog
----------------------------------------------
// SOCIAL MEDIA
► Instagram: / jonasarleth
► Dribbble: dribbble.com/jonasarleth
► LinkedIn: / jonasarleth
----------------------------------------------
// MEIN WEB & DESIGN PODCAST
► iTunes: jonasarleth.com/itunes
► Spotify: jonasarleth.com/spotify
► Pocket Casts: jonasarleth.com/pocketcasts
► SoundCloud: jonasarleth.com/soundcloud
► Overcast: jonasarleth.com/overcast
► Stitcher: jonasarleth.com/stitcher
----------------------------------------------
* Affiliate Links
Ich finde das Video schon ganz gut - nur würde ich mir evtl ein Video wünschen wo man genau nachverfolgen kann wie du eine Website mit EM baust :)
So gut wie alle meine Tutorials hier sind in EM gebaut 😉
Vielen Dank!! Sehr gut erklärt, wie immer 😊
Sehr gerne 😊 Danke für deinen Support Milan!
Tolles Video Jonas! Mit dem Thema REM und EM muss man sich aktiv beschäftigen, dann kann man auch dein Video gut nachvollziehen 👍 Ich habe auch immer EM für meine letzten Projekte verwendet und wollte nun wieder zu REM zurückkehren, weil die Elternvererbung trotz Vorteile manchmal auch sehr nervig sein kann. Durch dein Video bin ich nun doch wieder am Überlegen, mein Template auf EM umzubauen 😄 War auf jeden Fall sehr hilfreich, danke dir!
Ich habe auch eine weile gebraucht. Ich nutze EM aber quasi genau wie alle REM nutzen mit der einzigen Ausnahme, dass ich den Body bei den Breakpoints kleiner stelle und das sich auf meine Elemente auf der Seite vererbt. Das macht wiederum alle Elemente etwas kleiner. Die Elternvererbung versuche ich auch möglichst garnicht erst zu verwenden. Außer mal bei kleinen Elementen wie dem Badge im Video-Beispiel. Bleib doch bei REM und stelle nur die Font Size des HTML Tag etwas kleiner. Dann hast du den gleichen Effekt.
Danke für die ausführliche Erklärung 👍
Sehr gerne!
Super video. Das erklärt mein Problem vom responsiv. Danke
Wenn man es einmal verstanden hat, macht es alles Sinn :)
Top Video! Werde ich beim nächsten Projekt definitiv verwenden. Mal schauen, wie gut es klappt meine Seite von PX in EM umzustellen. Danke! :)
Viel Erfolg!
Jonas, hi! Thanks for the video! Maybe you could sometime make a video with an example of how you design multiple pages in em in webflow? That would be a very informative video, especially for people like me who design sites in px. 🙏
Ok I write it into my content calendar! Thanks for your feedback! I try to show the process in building something from the ground up in ME.
Super Tutorial Jonas! Wäre cool wenn du dieses Tutorial "remixen" könntest mit den neuen Webflow Variables. Denke mit der Variables Funktion lassen sich viele Layouts ganz ohne Designsystemen realisieren. Zum Beispiel Abstände, Textgrößen oder Farben.
An viele Stellen machen globale Klassen trotzdem noch Sinn, da sie weniger Code generieren wie jedes Mal Abstände wieder mit den Variablen zu verknüpfen.
Hallo Jonas, hast du mediaquerys in der css gesetzt oder musst du immer den body oder html mit 16px zum Beispiel lassen.
In der Embed Datei (global CSS) ist eigentlich nichts drin. Das wurde von einem anderen Projekt dupliziert. im Body lasse ich quasi auf Desktop die 1rem stehen. Schau es dir hier gerne nochmal an: preview.webflow.com/preview/em-example?preview=6053df99a70503269ba94c610c411f03&workflow=preview
Benutzt man nicht REM um später das Fluid Responsive im Custom Code zu bekommen?
Das ist doch auch der Hintergrund bei finsweet oder?
Fluid Design funktioniert auch mit EM. REM und EM unterscheiden sich nur darin, an was sich die jeweilige Einheit orientiert. REM orientiert sich immer an der font-size von
EM orientiert sich immer an der font-size des Elternelements eines Elements.
Sowohl REM als auch EM sind relative Einheiten, lassen sich also beide für Fluid Design nutzen.
Dazu kommt als nächstes noch ein Video! Ich nutze das Fluid Design auch bei meinen Websites mit EM.
Hej Jonas! Wird es dazu noch Updates im Webflow-Kurs geben? Da sind viele Elemente ja noch in Pixel angegeben. Wird es allgemein noch Updates vom Kurs geben? Es kommen ja regelmäßig neue Funktion von Webflow, wie jetzt z.B. Logic
Der Kurs wird Anfang nächsten Jahres mit neuen Videos überarbeitet. Alle Teilnehmer bekommen dann automatisch die neuen Inhalte. REM und EM kann ein Teil des Kurses sein, trotzdem ist es für viele schneller zu verstehen, wenn es in Pixel gehalten ist. Deshalb bin ich mir bei dem Punkt noch nicht sicher. Alle Tutorials und Templates sind auch in PX.
@@jonasarleth Mega! Ich freu mich schon. Hab durch den Kurs so unfassbar viel gelernt. Eine Anmerkung habe ich: Der Einstieg mit Pixel ist zwar einfacher, aber warum nicht lieber direkt richtig lernen? Pixel hat heutzutage ja einfach fast nur noch Nachteile. Und vielleicht wäre es für viele Leute einfach verwirrend erst das eine und dann das andere zu lernen :) Ganz unabhängig davon bin ich wirklich froh Teil der Community, auch bei Patreon zu sein! Der Mehrwert ist einfach unbezahlbar
Danke Jonas. Aber für die Schrift verwendest du trotzdem REM?
Nein nur im Body
Tolles Video. Jedoch nutzt man rem um die Einstellungen vom Browser zu übernehmen, weil ein rem entspricht der Standartschriftgröße 16px und dass soll der Nutzer ändern können damit kleinere Schriften für ältere Menschen leichter lesbar sind. Wenn man jetzt wie du sagst die body schriftgröße ändert, hat es keinen Sinn mehr. Verstehe ich etwas falsch?
REM orientiert sich am html-Element und das umschließt das gesamte Dokument. Es ist, wie du sagst, 16 px beziehungsweise variabel je nach Einstellung des Nutzers im Browser. Aber auch das HTML Element vererbt seine Font size weiter an das nächste, und das ist der Body. Wenn also der Body auf 1 EM gestellt wird, wird das mit der Font Einstellung des Eltern-Element multipliziert. Und dieses ist das HTML Element mit 16 Pixel.
Aber Gute Frage 👍
@@jonasarleth Genau, deswegen hat es in meinem Augen keinen Sinn die Schriftgröße des bodys zu ändern. Außerdem, wenn ich die Schriftgröße eines Elements mit px oder rem ändere, ändert sich die em Einheit auch entsprechend.
@@jonasarleth Ich habe nochmal darüber nachgedacht und wie wäre es, wenn du dvh/dvw (device View width/height) verwendest, denn dann sparst du dir die Mitgabe der Schriftgröße, da es sich nach der Bildschirmbreite/höhe richtet.
smart
Pixel ist doch dafür gut um feste Positionen zu bekommen, es müssen ja nicht Buttons oder texte sein ?
In Zeiten von responsive und so vielen unterschiedlichen Screen Größen ist Pixel nicht mehr praktikabel. Eine Position kann auch mit EM oder REM genau erreicht werden und respektiert dabei noch die Barrierefreiheit.
Ich hatte mir REM schon mehrfach das Problem, dass ein Kunde ohne es zu wissen seine Schrifteinstellungen im System geändert hatte und das Frontend quasi immer "verzerrt" gesehen hat. Feedbackschleifen waren also frustig bis verwirrend. Hat eine Weile gedauert rauszufinden was los war. Super nervig und kein schönes Bild.
Meine Kunden nutzen in der Regel nur den Webflow Editor. Sollte ein Kunde nach Projekterstellung selber mit seinem Team im Designer die Seite erweitern wollen, würde ich höchstwahrscheinlich sogar alles mit PX aufbauen. Das ist am einfachsten zu verstehen. Das Problem ist auch, dass Webflow standardmäßig immer PX anwendet sobald der User was eingibt. Daher würden dadurch wahrscheinlich schnell Kombinationen aus beidem entstehen. Oder eine Schulung geben und zeigen, wie PX in REM umgerechnet werden und warum das so wichtig ist.
Danke für deinen Beitrag. Kannst du vielleicht das Beispiel als Webflow-Projekt bereitstellen? Das wäre hilfreich, um sich die Vererbung noch einmal genau anzuschauen. Hier noch ein gutes Video zu dem Thema: th-cam.com/video/0yiY52OB4uU/w-d-xo.html
Leider habe ich das Beispiel schon gelöscht 😩 Sorry!!!
Nein stimmt nicht, hier ist es doch noch. Aber es ist nicht sehr ordentlich aufgebaut. Aber vielleicht hilft es dir dennoch: preview.webflow.com/preview/em-example?preview=6053df99a70503269ba94c610c411f03&workflow=preview
@@jonasarleth Ich hatte es mittlerweile selbst nachgebaut, aber trotzdem Danke ;o). Eine Frage: Dass die Fontsize der Elternelemente sich auf den Fontsize des Bodys beziehen ist nur in Webflow so, oder? Ich frage, weil das Padding des REM-Badges bezieht sich wiederum auf das REM im HTML-Root. Ansonsten würde ja auch dieser skalieren…