Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
ich frage mich seit langem, welche Maßeinheiten man für was verwendet. Es gibt ja einige Sachen, z.B.:
EM und Viewport
EM und %
Würde es reichen, damit es übersichtlich bleibt, wenn man nur den Viewport und für prozentuale Anpassung zum Elternelement nur Prozent verwendet oder muß ich trotzdem noch REM und EM mit einbeziehen?
em brauchst du trotzdem noch. Du willst ja, das elemente mehr oder weniger gleich bleiben, wenn du von hochformat auf Querformat wechselt. Nur die Anordnung soll sich ändern.
dann könnte ich % weg lassen und nehme dafür em. also braucht man REM in der heutigen zeit gar nicht mehr, genau wie Pixel (außer in Außnahmefällen, z.B. für die Rahmendicke).
es müßte ja 1 Einheit reichen die sich am html Dokument orientiert und 1 Einheit die sich am Elternelement orientiert.
bisher hatte ich em, %, rem und vw. das ist ein Durcheinander, das ich eigentlich los werden will.
im Notfall setze ich ein Breakpoint ab einer bestimmten Auflösung.
rem und em ergänzen sich. Die haben nur einen anderen Bezug. Das braucht man beides. Man kann das nicht pauschalisieren. Das kommt auf die Situation drauf an. Pixel verwende ich bis auf absolute Ausnahmefälle gar nicht mehr.
Also ab und zu muß evtl. auch mal was absolut positioniert werden, dann werden auch Pixelangaben benötigt. Als relative Angabe bevorzuge ich immer die prozentuale Angabe und em als Ergänzung.
also reichen im normalfall 2 sachen (rem und em). in ausnahmefällen px und vw. für eine smartphone version der seite, würde ich eh alles anders schreiben (also eine 2. version der seite erstellen).
ich kümmere mich erstmal nur um die deskop bzw. tabletversion (1 Variante für beide).
du kannst die Werte eigentlich nach belieben nutzen.
EM - Bezieht sich immer relativ zur Schriftgröße eines Elements. Hat ein Element zb 12PX Schriftgröße, so sind 18PX gleich 1.5em. die Rechnug geht immer gleich <gewünschte pixel>/<schriftgröße> bei Schriftgrößen setzen beziehen sich EMs auf die Schriftgröße des Elternelements (wie bei %)
REM - Bezieht sich immer relativ zur Schriftgröße des HTML (oder root) Elements, also ist die Rechnung eine Spur anders: <gewünschte pixel>/<schriftgröße des HTML Elements>
% - Bezieht sich immer auf die Breite, oder Höhe(nur bei height Angaben) eines umliegenden Elemets oder der Schriftgröße des umliegenden Elements(wenn man es zum setzen der Schriftgröße nutzt)
VW - Bezieht sich immer auf die Viewportbreite in %
VH - Bezieht sich immer auf Viewporthöhe in %
Ein beliebter Trick für die einfache Nutzung von EMs und REMs ist es, die Schriftgröße am Body(für EMs) oder HTML(REMs) Element auf 10PX zu setzen, dann lässt sich leichter rechnen als mit der Standard 16px Browser Schriftgröße. Dazu gibts verschiedene Möglichkeiten:
A (nur mit EMs):
CSS:
/* Font size to 10px at body */
html{
font-size:1.25em;
}
body {
font-size: 0.5em;
}
B(mit %)
CSS:
/* Font size to 10px at html */
html{
font-size:62.5%;
}
Schlussendlich gibt es für jede Situation die richtige Einheit.
Darin zu entscheiden, wann was genutzt wird liegt auch ein wenig die Kunst in dem Ganzen.
Mit nofollow und noindex lässt sich das schon regeln aber man muß verdammt aufpassen. MMn ist es aber auch wesentlich leichter das mit media-queries im CSS aufzubauen statt eine eigene Version zu basteln.
danke für die ausführliche information. natürlich wußte ich das schon, ein paar jahre programmiere ich auch schon. ich habe mir NUR vorher keine gedanken um das wirrwarr gemacht, da man ja sauber programmieren sollte. wollte daher alles so einfach wie möglich halten und daher auch nicht alles mögliche an einheiten verwenden.
werde wohl REM für den globalen teil nehmen und % für das kindelement (die anderen einheiten nur im notall).
meine Schriftgröße passe ich ein wenig (z.b. so) an, je nach bildschirmauflösung gehts dann automatisch:
was die 2. webseite anbelangt, da werde ich wohl mal mein design überarbeiten. ich habe mir die großen seiten, wie FB, youtube und twitter angeschaut. werde das so ähnlich aufbauen. 3 bereiche und umso kleiner der schirm, umso mehr wird ausgeblendet, so das der hauptbereich in der mitte nur noch übrig bleibt.
desweiteren werde ich bei der desktopversion alles sehr luftig gestalten, so das beim zusammen schieben von ein paar hundert pixeln, nicht gleich ein break rein muß.
ich vermisse die guten alten zeiten mir statischen auflösungen. mit den ganzen x variationen ist alles viel aufwendiger geworden.
nein, finde ich nicht. Ein vernünftiges CSS Grundgerüst mit MediaQueries, wie es z.B. Bootstrap mit dem "Grid" nutzt, und man braucht sich schon nicht mehr um viel kümmern. Und wenn es nicht "bei Null" losgehen muss nimmt man ein Responsive Theme und passt das nach den eigenen Vorstellungen an.
es wir ja keine einfache seite. es wird ein netzwerk mit einigen unterschiedlichen unterseiten (pinnwand, gallerie, kontakte usw.) da kann ich schlecht ein fertiges Theme nehmen.
schön wärs, wenn man einfach was fertiges nimmt, bissle was anpaßt und ende. klappt aber wohl nur mit landingpages oder kleineren seiten mit 5 unterseiten. in meinem fall nicht. da muß alles selbst individuell gezimmert werden.
vieeeeell arbeit. die techn sachen habe ich soweit (multiuploader für div. dateien, JWT loginsystem, open graph import der daten usw.) jetzt geht es eben um das ganze CSS und alles sinnvoll aufzubauen (header, footer, main, aside, usw.).
ich muß mich morgen und die nächsten tage mal an PSD bzw. Affinity Photo klemmen.
es wir ja keine einfache seite. es wird ein netzwerk mit einigen unterschiedlichen unterseiten (pinnwand, gallerie, kontakte usw.) da kann ich schlecht ein fertiges Theme nehmen.
dann nimm einen PageBuilder wie Divi mit WordPress - wegen einer Galerie und Kontakten muss heute niemand mehr das Rad neu erfinden.
schön wärs, wenn man einfach was fertiges nimmt, bissle was anpaßt und ende. klappt aber wohl nur mit landingpages oder kleineren seiten mit 5 unterseiten. in meinem fall nicht. da muß alles selbst individuell gezimmert werden.
muss warum? Du sprichst von unterschiedlichen Unterseiten - und jetzt? Das haben etliche Homepages. Was ist so besonders, dass du da bei Null anfangen musst?
Ich gehe so gut wie jede Wette ein, dass du das eben nicht musst.
Also ich kann mit PageBuildern und Bootstrap garnix anfangen.
Ein Grid ist in 5 Min runtergeschrieben, ansonsten verkompliziert dir bootstrap das html und pagebuilder müllen den inhalt mit kommentaren zu (besonders lustig, wenn der mal raus ist und das bereinigt werden muß) und speichert layout im inhalt (vermischung Content/Layout uije)
BTW gilt das aus meiner sich auch für Gutenberg.
Wenn er eh schon die Erfahrung hat spricht ja nichts gegen ein eingenes angepasstes theme.
genau, fertige script enthalten immer dinge, die man nicht braucht. deshalb schreibe ich mein zeug soweit es geht selber, auch ein umfangreichen uploader mit einzelnen blöcken, thumnail erstellung aus videos usw. es ist zwar aufwenig, aber kürzt den code ungemein, als etwas fertiges.
mit CMS system komme ich nicht klar, mir ist eigenbau für jede codezeile lieber.
ein gridsystem mal schauen, im moment reichen mir ein paar flex elemente. das obere menu und seitenmenu wird fixed werden, so das es mit wandert.
also ich habe auch mit alles statisch begonnen. mittlerweile benutze ich CMS Backends als Datenbankeingabemaske und das Frontend schreibe ich immer komplett selbst. Das geht mit vielen verschiedenen CMS aber derzeit ist mir Wordpress mit seiner gut-dokumentierten PHP-API am liebsten zum Templates bauen.
Meistens reicht Flex für alles, nur für UIs mit vielen Bedienelementen, die abwechselnd erscheinen ist dann Grid eine Hilfe.
wie gesagt, ein vernünftiger PageBuilder und die Grundelemente sind fertig. Den Rest kann man über PageTemplates oder kompletten Custom Code ja auch machen - kommt man ja nicht drum rum. Aber man muss heute definitiv nicht bei Null anfangen, um eine responsive Homepage mit ein paar Unterseiten und Erweiterungen zu schreiben. Das kann mir einfach niemand erzählen. Du treibst damit die Entwicklungszeit und damit die Kosten in die Höhe - wenn die Konkurrenz das nicht macht kriegst du schlicht den Auftrag nicht, weil du zu teuer bist. Den Kunden interessiert nicht, dass der Code vielleicht 20 ms performanter oder "schöner" ist.
Ich mache das auch schon seit etlichen Jahren, was wir an Aufträgen bekommen haben einfach weil wir dadurch günstiger anbieten konnten und dem Kunden ohne Nachteile trotzdem exakt das bauen konnten, was gewünscht war, und zwar mit extrem gut auditiertem und getestetem Code...kann ich gar nicht abzählen.
wobei ich hinzufügen muß, das ich damit meinen lebensunterhalt verdiene. Für einzelne, die mit Programmieren nix am Hut haben und "ich mach mir meine erste Webseite" sind die vorgefertigten Sachen gut. Für Firmenwebseiten würde ich aber keine Page-Builder empfehlen.
Ergänzung ()
Madman1209 schrieb:
Hi,
wie gesagt, ein vernünftiger PageBuilder und die Grundelemente sind fertig. Den Rest kann man über PageTemplates oder kompletten Custom Code ja auch machen - kommt man ja nicht drum rum. Aber man muss heute definitiv nicht bei Null anfangen, um eine responsive Homepage mit ein paar Unterseiten und Erweiterungen zu schreiben. Das kann mir einfach niemand erzählen. Du treibst damit die Entwicklungszeit und damit die Kosten in die Höhe - wenn die Konkurrenz das nicht macht kriegst du schlicht den Auftrag nicht, weil du zu teuer bist. Den Kunden interessiert nicht, dass der Code vielleicht 20 ms performanter oder "schöner" ist.
Ich mache das auch schon seit etlichen Jahren, was wir an Aufträgen bekommen haben einfach weil wir dadurch günstiger anbieten konnten und dem Kunden ohne Nachteile trotzdem exakt das bauen konnten, was gewünscht war, und zwar mit extrem gut auditiertem und getestetem Code...kann ich gar nicht abzählen.
Das ist abschließend richtig. Ich hab natürlich auch schon über die Jahre vieles vorgefertig parat, das ich selbst irgenwann schon mal gemacht habe, hier erspare ich mir dafür wieder einiges und als Einzelunternehmer kann ich es mir gelegentlich auch leisten auf die 20ms Rücksicht zu nehmen oder sie anderweitig zu verbrauchen.
bei einer einfachen seite für firmen, um sich zu representieren gehe ich mit, da reicht ein baukastensystem. aber eine seite ala twitter und FB mit vielen funktionellen scripten und viel JS, würde ich kein vorgefertigtes system nehmen. außerdem mache ich das nur als hobby für mich selber.
witzig, dass du Twitter aufführst - genau daher kommt nämlich Bootstrap. Und gerade bei solchen Sachen setzt man auf gut dokumentierte und getestete Systeme.
PageBuilder ist das eine, aber ein CSS Framework, das die Grundelemente anbietet erspart einfach viel Arbeit.
Ich nutze da entweder bspw. Bootstrap (ohne deren JS) oder Bulma (das erst gar kein JS anbietet, ist ein reines CSS Framework). Ich wüsste nicht, wieso ich mir antun sollte, das alles selbst zu implementieren.
Meist kann man es selbst eben nicht besser. Stichwort Dunning Kruger.
