olpro: Websites in 2017

Zurück in der Zukunft ... auf Basis aufbauen

Hallo jüngere Tastaturen.

Bis 2010 habe ich noch mit HTML4 plus etwas CSS und Javascript Websites für Projekte und kleine Unternehmen erstellt, ausdrücklich "zu Fuß", also per Schreiben der Codes und unter unter Verachtung jeglicher WYSIWYG-Editoren, um 100% Kontrolle über meine Skripts zu behalten. Das war damals fleißig studiert und gelernt von - ja, Stefan Münz und selfhtml. Dann bin ich ausgestiegen, um komplett andere Dinge zu machen...

Inzwischen hat sich viel getan. HTML5 ist seit 2014 etabliert. Und die Websites müssen nun nicht mehr nur in verschiedenen Browsern, sondern auch auf erheblich unterschiedlichen Ausgabegeräten, Tablets, Smartphones etc. funktionieren, dafür also angelegt und "übersetzt" werden.

Wenn ich nun wieder einsteigen wollte: was müsste ich auffrischen / updaten oder stattdessen anders neu lernen?

  • Was braucht es in 2017, um die Anforderungen an eine Website zu erfüllen?

P.s.: Mit Wordpress habe ich inzwischen tatsächlich einen WYSIWYG kennengelernt, der mir zusagte und lohnend erschien - aber es kann nicht genügen, sich nur mit diesem einen Service auszukennen, oder.

Dank für Eure Hinweise und Hilfen für meine Rückkehr an die Konsole ;)

olpro

  1. Servus!

    Herzlich willkommen bei Selfhtml!

    Bis 2010 habe ich noch mit HTML4 plus etwas CSS und Javascript Websites für Projekte und kleine Unternehmen erstellt, ausdrücklich "zu Fuß", also per Schreiben der Codes und unter unter Verachtung jeglicher WYSIWYG-Editoren,

    Das ist ein gute Ausgangsbasis, ...

    Inzwischen hat sich viel getan. HTML5 ist seit 2014 etabliert. Und die Websites müssen nun nicht mehr nur in verschiedenen Browsern, sondern auch auf erheblich unterschiedlichen Ausgabegeräten, Tablets, Smartphones etc. funktionieren, dafür also angelegt und "übersetzt" werden.

    Wenn ich nun wieder einsteigen wollte: was müsste ich auffrischen / updaten oder stattdessen anders neu lernen?

    ... denn so viel hat sich nicht geändert.

    • Auf die Schnelle:
      • Verzicht auf feste Schriftgrößen, feste Breiten und absolute Positionierungen.
      • Media Queries (mit wenigen Breakpoints in em)
      • ein einfacheres Grundgerüst
    • Was braucht es in 2017, um die Anforderungen an eine Website zu erfüllen?>

    P.s.: Mit Wordpress habe ich inzwischen tatsächlich einen WYSIWYG kennengelernt, der mir zusagte und lohnend erschien - aber es kann nicht genügen, sich nur mit diesem einen Service auszukennen, oder.

    Ich habe es selbst erst vor wenigen Monaten ausprobiert und war erstaunt, wie schnell die Installation war. Ich habe die header.php und footer.php vereinfacht (zu viele Klassen) und dann styles.css vereinfacht (zu viele magic numbers)

    Dank für Eure Hinweise und Hilfen für meine Rückkehr an die Konsole ;)

    Konsole ist ein gutes Stichwort:

    olpro

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. Hej Matthias,

      - [Media Queries](https://wiki.selfhtml.org/wiki/Media_Queries) (mit wenigen Breakpoints in em)
      

      Da sollte man mal auf flexbox und grid hnweisen - dann braucht man deutlich weniger Breakpoints und die Aussage der Grafik "responsives Design mit und ohne Breakpoints" stimmt so auch nicht mehr…

      Marc

  2. Hallo olpro,

    • Was braucht es in 2017, um die Anforderungen an eine Website zu erfüllen?

    dasselbe, was es auch 2010 schon brauchte.
    Zuzüglich HTML-Semantik verbunden mit den neuen HTML-Elementen bzw. Attributen,
    zuzüglich Mediaqueries.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
  3. Und die Websites müssen nun nicht mehr nur in verschiedenen Browsern, sondern auch auf erheblich unterschiedlichen Ausgabegeräten, Tablets, Smartphones etc. funktionieren, dafür also angelegt und "übersetzt" werden.

    Und einige davon sind es leider nicht. Sind nur noch auf wischen und kleine Bildschirme ausgelegt, wer auf einem Monitor die Seite ansieht hat Pech.
    Riesen Schrift, alles in eine Seite geklatscht. Übersichtlichkeit? Nö wozu? Nochmal wohin zurückfinden wo man vorher war? Will doch niemand...
    Verschiedene URLs? Fehlanzeige, es wird alles dynamisch gemacht. Ich war schon in einem Shop da konnte ich keinen Link zu einem Produkt kopieren, musste den Produktnamen weitergeben.
    Schön? Ebenfalls Fehlanzeige. Während man früher an jedem Pixel hin und her überlegt hat damits möglichst hübsch wird, fragt man sich gelegentlich wofür man heutzutage noch Farbbildschirme hat.
    Oh und dann die Bilderanzeige, es scheint ja verhasst zu sein dass der Besucher auf ein Bild klickt. Oder warum sonst werden Bilder beim draufklicken genauso klein, oft noch kleiner dargestellt wie im Original?

    Nach destruktiven Worten hier mein Tip. Mach nicht alles nur nach wie "man" es scheinbar macht 😉

    1. Hello,

      [...]

      Nach destruktiven Worten hier mein Tip. Mach nicht alles nur nach wie "man" es scheinbar macht 😉

      [ACK]

      Du hast das totale Tracking und die vielen Ads noch vergessen. Wer sowas nicht auf seiner Seite hat, hat doch keine Ahnung ...

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es
  4. Hello,

    Bis 2010 habe ich noch mit HTML4 plus etwas CSS und Javascript Websites für Projekte und kleine Unternehmen erstellt, ausdrücklich "zu Fuß", also per Schreiben der Codes und unter unter Verachtung jeglicher WYSIWYG-Editoren, um 100% Kontrolle über meine Skripts zu behalten.

    Inzwischen hat sich viel getan.

    Vor allem die Einstellung zu JavaScript und Cookies. Vielleicht nicht unbedingt hier - hier gibt es noch ein paar Standhafte - aber in der freien Wildbahn gehören JavaScript und Cookies inzwischen dazu. Das liegt vielleicht auch an den vielen (grottigen) Frameworks, die "man kennen muss"™️.

    Wer heute ohne Framework arbeitet, ist einfach nicht mehr in. :-(

    Liebe Grüße
    Tom S.

    --
    Es gibt nichts Gutes, außer man tut es
    1. Hallo,

      Wer heute ohne Framework arbeitet, ist einfach nicht mehr in. :-(

      „Nur tote Fische schwimmen mit dem Strom.“ 😉

      Gruß
      Jürgen

    2. @@TS

      Vor allem die Einstellung zu JavaScript und Cookies. Vielleicht nicht unbedingt hier - hier gibt es noch ein paar Standhafte - aber in der freien Wildbahn gehören JavaScript und Cookies inzwischen dazu.

      Du erzählst horrenden Unsinn. Sowohl JavaScript als auch Cookies kann man für sinnvolle Dinge verwenden – im Sinne von: für den Nutzer sinnvoll – und konnte dies auch schon immer.

      Sowohl JavaScript als auch Cookies kann man für sinnlose Dinge verwenden – im Sinne von: für den Seitenbetreiber vermeintlich sinnvoll; da aber den Nutzer nervend/schädigend, letztendlich auch für den Seitenbetreiber eher schädlich.

      JavaScript und Cookies prinzipiell abzulehnen ist nicht „standhaft“, sondern einfach nur bescheuert.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hello,

        JavaScript und Cookies prinzipiell abzulehnen ist nicht „standhaft“, sondern einfach nur bescheuert.

        Soll ich mal deine ältesten Postings zu dem Thema suchen gehen, wenn die hier überhaupt noch archiviert sind? Und wenn nicht von Dir (ich meine damit ja nicht ausdrücklich Dich persönlich), dann gibt es genügend honorige Selfer, die steif und fest diese Meinung vertreten haben.

        Es gab Zeiten, da habe ich schon "Nachledetechniken" mit JavaScript propagiert - es gab aber noch kein "AJAX" - und bin dafür geächtet worden: "Sowas geht nicht", "das macht man aber nicht", usw. Aber die später so verteufelten Frames machten es doch möglich!

        Liebe Grüße
        Tom S.

        --
        Es gibt nichts Gutes, außer man tut es
        1. Hallo TS,

          JavaScript und Cookies prinzipiell abzulehnen ist nicht „standhaft“, sondern einfach nur bescheuert.

          Soll ich mal deine ältesten Postings zu dem Thema suchen gehen, wenn die hier überhaupt noch archiviert sind? Und wenn nicht von Dir (ich meine damit ja nicht ausdrücklich Dich persönlich), dann gibt es genügend honorige Selfer, die steif und fest diese Meinung vertreten haben.

          1. es ist doch völlig irrelevant, was irgendwelche Leute vor 10 Jahren geglaubt haben.
          2. ich denke, es liegt ein Missverständnis vor. Die Seite muss ohne Bedienbar sein, aber JavaScript einzusetzen um die Seite besser benutzbar zu machen ist keine Schande sondern sinnvoll. Stichwort „progressive enhancement.” Und das wurde eigentlich schon immer so hier propagiert.

          LG,
          CK

        2. @@TS

          JavaScript und Cookies prinzipiell abzulehnen ist nicht „standhaft“, sondern einfach nur bescheuert.

          Soll ich mal deine ältesten Postings zu dem Thema suchen gehen, wenn die hier überhaupt noch archiviert sind?

          Mach mal, ich bin gespannt.

          Begeh bitte nicht den Fehler, „eine Seite sollte ohne JavaScript und Cookies funktionieren“ gleichzusetzen mit „JavaScript und Cookies sollten nicht eingesetzt werden“. Natürlich will man JavaScript und Cookies einsetzen, wenn es dem Nutzer etwas bringt. Progressive enhancement.

          Es gab Zeiten, da habe ich schon "Nachledetechniken" mit JavaScript propagiert

          Dann mach das weiter – wenn der Fallback vorhanden ist.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. @@Gunnar Bittersmann

            Begeh bitte nicht den Fehler, „eine Seite sollte ohne JavaScript und Cookies funktionieren“ gleichzusetzen mit „JavaScript und Cookies sollten nicht eingesetzt werden“. Natürlich will man JavaScript und Cookies einsetzen, wenn es dem Nutzer etwas bringt. Progressive enhancement.

            Zweiter! ;-)

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        3. Tach!

          JavaScript und Cookies prinzipiell abzulehnen ist nicht „standhaft“, sondern einfach nur bescheuert.

          Soll ich mal deine ältesten Postings zu dem Thema suchen gehen, wenn die hier überhaupt noch archiviert sind? Und wenn nicht von Dir (ich meine damit ja nicht ausdrücklich Dich persönlich), dann gibt es genügend honorige Selfer, die steif und fest diese Meinung vertreten haben.

          Noch bescheuerter (um das Vorzitat zu verwenden) ist, Meinungen, die aus bestimmten Gründen gefasst wurden, bis in alle Ewigkeit zu vertreten, selbst wenn sich die Umstände ändern. Anderen keine Meinungsänderung zuzugestehen fällt aber auch in diese Kategorie.

          dedlfix.

          1. Hello,

            Noch bescheuerter (um das Vorzitat zu verwenden) ist, Meinungen, die aus bestimmten Gründen gefasst wurden, bis in alle Ewigkeit zu vertreten, selbst wenn sich die Umstände ändern. Anderen keine Meinungsänderung zuzugestehen fällt aber auch in diese Kategorie.

            Nur um das klarzustellen:
            Meinetwegen könnt Ihr eure Meinung gerne dreimal am Tag ändern (oder auch öfter ;-) )

            Für mich ist dabei nur relevant, ob der Meinungswechsel begründet werden kann und ob der Meinungsäußerer auch andere Meinungen zulässt. Das wird hier leider oft mit Aussagen "das ist doch Bullshit" oder ähnlich negiert, auch gerade von Leuten die andererseits für "höflich und wertschätzend" eintreten und Andere maßregeln. Da zählt dann nach meinem Empfinden immer das Prinzip "Alle sind gleich, nur ich bin gleicher".

            Meine Wette läuft.

            Besonders liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es
      2. Sowohl JavaScript als auch Cookies kann man für sinnvolle Dinge verwenden – im Sinne von: für den Nutzer sinnvoll – und konnte dies auch schon immer.

        Der Nutzer kann das nur leider nicht unterscheiden. Das weiter unten angesprochene Fallback gibts leider kaum mehr. Da geht ohne zig Scripte einfach gar nichts.

        Zum Beispiel Film auf einer Mailanbieter Seite ansehen. Da wird nicht nur Script vom Mailanbieter oder ein paar gängigen sonstigen Scriptquellen benötigt, da kommen zig andere Seiten, unter anderem sehr vertrauenswürdiges Zahlen und Buchstaben Wirrwarr. Zum Glück sind die Filme meistens nicht mehr wert als der Text darunter, dann kann mans auch gleich lassen :-D

        Gleiches wenn man was kauft, News lesen will, was auch immer tut. Und natürlich überall Google mit dabei. Das braucht zum Glück keine Seite, da weiß man dass es nur Spionage ohne Nutzen (für mich) ist.
        Aber der Rest ist undefinierbar.

        Wo wir beim Thema sind, gibt es ein Plugin das Scripte sinnvoll nach Inhalt filtert? Also das mich einen Film ansehen lässt und dazu alles lädt was man braucht, das aber nicht Inhalte aus der Seite wer weiß wohin schickt oder Lücken ausnutzen will usw.
        Hätte zwar mal gar keine Idee wie sowas funktionieren soll, aber vielleicht gibts ja was.

  5. hallo

    Inzwischen hat sich viel getan.

    Edward Snowden! Du gestaltest die Privatsphäre deiner User mit!

    • Was braucht es in 2017, um die Anforderungen an eine Website zu erfüllen?

    Wer definiert denn diese Anforderungen?

  6. was müsste ich auffrischen / updaten oder stattdessen anders neu lernen?

    Dazu hab ich letzte Woche noch interessante Roadmaps gesehen, zum Beispiel für Frontendler:

    Roadmap für Frontend-Entwickler

    1. @@1unitedpower

      Dazu hab ich letzte Woche noch interessante Roadmaps gesehen, zum Beispiel für Frontendler:

      Roadmap für Frontend-Entwickler

      Roadmap considered harmful.

      Dort fehlen unter Basics Dinge wie accessibility und performance, die zwingend zum Wissen eines Frontend-Entwicklers gehören – im Gegensatz zu etlichen Nebensächlichkeiten, die dort im Diagramm vorhanden sind.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. @@Gunnar Bittersmann

        Dort fehlen unter Basics Dinge wie accessibility und performance, die zwingend zum Wissen eines Frontend-Entwicklers gehören – im Gegensatz zu etlichen Nebensächlichkeiten, die dort im Diagramm vorhanden sind.

        Mit anderen Worten: “This is your friendly reminder that frontend development is not a pile of JavaScript poo, but user experience, accessibility, performance, … i.e. inclusive design.” (yours truly)

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hej Gunnar,

        @@1unitedpower Dort fehlen unter Basics Dinge wie accessibility und performance, die zwingend zum Wissen eines Frontend-Entwicklers gehören – im Gegensatz zu etlichen Nebensächlichkeiten, die dort im Diagramm vorhanden sind.

        Ist mir auch aufgefallen, dass die Verwendbarkeit von Webseiten offenbar überhaupt gar keine Rolle mehr zu spielen scheint… >:-(

        Ich halte flexbox auch für die derzeit einfachste Möglichkeit ein Layout umzusetzen - und damit gehört das doch wohl zu den Basics.

        Aber lassen wir die Details... - da gäbe es viel zu viel zu meckern. Nur eines noch: HTML ist komplett unterrepräsentiert - oder sehen die unter Basics tatsächlich die gesamte Spec. Das wäre natürlich löblich. Wenn ich mir die Roadmap so anschaue, habe ich aber eher das Gefühl, dass man wissen sollte, das man Tags oder Elemente oder irgendsowas in spitze Klammern schreibt - im Zweifel immer die Zeichenfolge d, i und v - dann wird es schon irgendwie im Viewport erscheinen…

        Marc (findet solche Zusammenstellungen meist schlecht, mindestens aber subjektiv).

        1. @@marctrix

          Ist mir auch aufgefallen, dass die Verwendbarkeit von Webseiten offenbar überhaupt gar keine Rolle mehr zu spielen scheint… >:-(

          Typischer Fall von entwicklerzentriert anstatt nutzerzentriert. :-(

          Ich halte flexbox auch für die derzeit einfachste Möglichkeit ein Layout umzusetzen

          + Grid. Jetzt in allen (relevanten) Browsern.

          im Zweifel immer die Zeichenfolge d, i und v - dann wird es schon irgendwie im Viewport erscheinen…

          Folie 2 · unnütze HTML-Elemente · *g* zur Wochenmitte

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. hallo

          Marc (findet solche Zusammenstellungen meist schlecht, mindestens aber subjektiv).

          Eine solche Roadmap sieht auch eher aus wie die Ladenstrassen in einem Shopping Mall. Da stellt sich die Frage: Was wollte ich eigentlich tun?

          Zeit ist wertvoll. Don't feed the Trolls.

          1. Eine solche Roadmap sieht auch eher aus wie die Ladenstrassen in einem Shopping Mall. Da stellt sich die Frage: Was wollte ich eigentlich tun?

            Am besten überall mal rein gucken, lernen was einem gefällt, lernen was einem nicht gefällt. Erfahrungen sammeln, die Unterschiede kennen und erkennen lernen, Präferenzen entwickeln, best-practices anwenden und herausfordern und neu-erfinden.

            Zeit ist wertvoll.

            Da sind wir uns einig. Die zahlreichen Werkzeuge aus der Roadmap brauchen ihre Einarbeitungszeit, aber einmal gelernt machen sie sich schnell bezahlt, indem sie kostspielige und zeit-intensivste Tätigkeiten erleichtern. Ich greif mir mal ein paar meiner Lieblinge raus:

            Testen mit Jest kann hunderte und tausende Software-Bugs während der Entwicklungszeit aufdecken - dann sind sie noch kostengünstig zu beheben. Einmal im Produktiv-Betrieb verhundertfachen sich die Kosten - sagt IBM. Für die Zeit, die wir sparen, weil wir Tests überspringen, zahlen wir später ein Vielfaches zurück. Sozusagen der schlechteste Sparvertrag der Welt. Eric Elliott hat einen sehr guten Beitrag darüber geschrieben. Das alles ist Zeit, die man auch hätte nutzen können, um zum Beispiel die Accessibility des Produkts zu verbessern.

            JavaScript hat die größte Paket-Datenbank, die je einer Programmiersprache gesehen hat. Jedes wiederkehrende Problem in der Webentwicklung hat mindestens drölf verschiedene Lösungen auf npm. Der Einsatz von fertigen Bibliotheken, ist in fast ausnahmslos allen Fällen einer Eigenentwicklung vorzuziehen. Aber wir zahlen auch einen Preis dafür: Wir müssen unsere Abhängigkeiten ständig überwachen, pflegen und gegen die eigenen Projekt-Richtlinien evaluieren. Paket-Manager halten diese Kosten niedrig. Und wieder: Zeit, die wir hier sparen, können wir in wichtigere Dinge investieren.

            Performance ist in allen Facetten der Software-Entwicklung ein präsentes Thema. Wir haben viele Standard-Lösungen für bekannte Engpässe: Zum Beispiel wissen wir, dass wir Netzwerk-Verkehr besser ausnutzen, wenn wir CSS/JS-Dateien zusammengefügt, minifiziert und komprimiert ausliefern. Aber niemand besitzt die Zeit und Unvernunft, das von Hand zu erledigen. Deswegen brauchen wir Task-Runner und Module-Bundler. Ein weiteres Beispiel: Wir wissen, dass das DOM ein zentraler Flaschenhals komplexer JavaScript-Programme ist. Deshalb wollen wir die DOM-Operationen auf ein Minimum beschränken. Aber das kann man auch unmöglich per Hand machen, deshalb haben wir Frameworks wie React, die die schmutzigen Details für uns erledigen.

            Ich bin voll und ganz auf eurer Seite, dass gute Accessibility und UX mehr Bedeutung zuteil werden muss. Und die beste Möglichkeit uns Zeit und Mittel dafür zu verschaffen ist uns sie woanders freizumachen. Die genannten Tools tragen dazu bei.

            1. Hej 1unitedpower,

              Ich bin voll und ganz auf eurer Seite, dass gute Accessibility und UX mehr Bedeutung zuteil werden muss. Und die beste Möglichkeit uns Zeit und Mittel dafür zu verschaffen ist uns sie woanders freizumachen. Die genannten Tools tragen dazu bei.

              Schön wäre es…

              Marc

  7. Hey, oh-kay ... das nenn ich ne satte Rückmeldung - vielen Dank! Ich werde das alles sehr genau lesen, in Ruhe die Links und Hinweise studieren. Und dann mal Hausaufgaben machen. Sobald ich wieder bisserl "drin" bin, melde ich mich gern wieder (spätestens mit den ersten Schwierigkeiten ;) ) Guten Gruß, olpro