HTML Webseitenoptimierung

[Flockyflo]

Hallo zusammen,

ich hab eine Frage zum optimalen Aufbau einer Webseite.
Die Webseite, die ich überarbeiten muss, ist in verschiedenen CSS Elementen eingeteilt.

Alle CSS Elemente sind im [wrapper] Element:
[masterhead]
[top_nav]
[left_col][page_content][right_col] --> zusammengefasst in [conainer]
[footer]
[designed by]

So sieht der Aufbau aus. Eigentlich in Ordnung, nur wenn ich jetzt das Logo [masterhead] oder die Menüleiste [left_col] verändern will, muss ich das bei über 50 Seiten jedes mal einzeln ändern.

Ich hätte mir jetzt das alles per frameset neu zusammengestellt, doch anscheinend sind solche Frame-Seiten nicht sonderlich beliebt und führen bei einigen Browsern zu Darstellungsfehlern.

Nun also meine Frage, wie kann ich diese Homepage so optimieren? Soll ich zumindest den CSS-[Container] in frames machen, oder gibt es da eine bessere Lösung?

 

[Ic3HanDs]

Ich denk du laedst das als CSS rein, da sollte es doch moeglich sein nur ein CSS File zu aendern?

 

[thecain]

das grundgerüst der Seite einmal bauen, dann den Inhalt via php "includen" dazu mal die PHP Funktion Include anschauen...


http://php.net/manual/de/function.include.php

 

[echoDave]

1. Alle Styleangaben sowie Hintergrundbilder per CSS in einer externen CSS-Datei deklarieren, diese wird dann in jeder Seite Implementiert und jede Seite hat die selbe CSS-Basis

2. ist es eine reine HTML-Seite oder kommt da auch PHP / JQuery(JS) vor?

Grüß,

iDave

 

[ql1maxx]

Ein CMS wird anscheinend nicht verwendet? Framesets sind veraltet und verstoßen gegen alle Standards.
Mit einem CMS müsstest Du eigentlich nur einmal die Website anpassen und nicht, wie jetzt, auf jeder einzelnen Seite das Grundgerüst ändern.

Hoffe ich hab dein Problem richtig verstanden

 

[Flockyflo]

Naja, mit externem css file hab ich mich nie so genau beschäftigt. Das ich Bilder mit CSS implementieren kann weiss ich. wie sieht das aber mit ganzen html Containern aus? Ist es möglich, dass ich die Menüpunkte in das CSS file schreibe und dann nur die css_div einfüge?

@iDave: Ja, es kommt in [col_right] ein Java Skript vor und eine Seite besteht aus einem PHP-Formular. Das Formular könnte ich aber auch in einem extra Fenster machen, ohne den ganzen anderen Inhalten

@ql1maxx: Nein cms wird bisher noch nicht verwendet. Es wurde schon angesprochen, wäre aber nur eine Alternative, falls es mit anderen mitteln nicht einfacher zu realisieren geht. Wenn nichts mehr hilft, werde ich wohl alles auf cms umstellen müssen

 

[F_GXdx]

Das Problem ist wohl nicht das Layout, sondern der Inhalt.

Du musst die Seite auf PHP umstellen, das liegt an. Oder JSP. Oder ASP. Oder.... Das ist nicht schwer, du musst nur jetzt alle hart-codierten Sachen wie Header und Footer als eigene html-Datei auslagern, und dann in den anderen Dateien eine include-Funktion benutzen, die das jeweils reinlädt.

Das kriegst du schon hin, mach nur ein paar Tutorials und dann hast du es drauf.

 

[Flockyflo]

@F_GXdx: Das ist echt ein super Vorschlag. Keine Ahnung warum ich selber nicht drauf gekommen bin^^
Ich denke mal,d as dürfte auch am wenigsten aufwand verursachen, vielen Dank

 

[mercsen]

Wenn du JavaSCript nicht abgeneigt bist kannst du auch per AJAX die neuen Inhalte nachladen, das hat mehrere Vorteile, unter anderem das du den Stylesheet nur einmal in der index datei brauchst, da jeder per AJAX geladene inhalt in das DOM des index eingehängt wird und dementsprechend den selben Stylesheet verwendet

 

[Daaron]

oftmals ist es leichter, sich ein kleines CMS beizubringen als ne PHP-Seite von 0 auf zu schreiben. Contao ist z.B. recht übersichtlich für den Anfang, bietet aber mit den verfügbaren Addons aus dem Extension Repository schonmal richtig mächtige Waffen für große Projekte... und selbst n paar Module für spezielle Aufgaben zu schreiben ist nicht SO brutal schwer.

 

[voodoo44]

Wenn du JavaSCript nicht abgeneigt bist kannst du auch per AJAX die neuen Inhalte nachladen

Und warum um Himmels Willen muss man heutzutage alles via "AJAX" machen? Warum reicht da kein simples Javascript? Und was macht ihr eigentlich, wenn der User Javascript deaktiviert hat?

 

[mercsen]

Wäre mir neu das AJAX kein simples JavaScript ist.
AJAX macht das surfen auf websites wesentlich komfortabler, kann dazu beitragen den Traffic erheblich zu reduzieren (auch wenn heute eigentlich irrelevant) und steigert (in meinen augen) das surf vergnügen ungemein.
Kannst das X auch gerne weglassen und ohne XML arbeiten (mache ich auch) wenn man aber schreibt nutze doch AJ weiß keiner was gemeint ist.
Bei einem sehr großen projekt welches ich betreue ist AJAX sogar fast unumgänglich. Dort werden einfach nur nackte Daten geladen und JS bastelt daraus dann die Seite, so musste der gesamte Quellcode (auch der für die dnymaischen Inhalte) nur ein einziges mal geladen werden und teilweise reicht es wenn man Sachen nur ausblendet, statt die Seite zu verlassen, eine neue Seite zu laden (bei der wieder alle CSS und JS datein geladen werden müssen (zumindest aus dem chache) etwas zu ändern und wieder zurpck zur alten zu wechseln.
Wieso nicht einfach ein kleines HTTP Reuqest welches nur die relevanten infos vom server abholt?
Für den Clienten, den Server und die Leitung ein gewinn.

Zu der Problematik wenn user kein JS an haben gab es hier schon einige lange diskussionen.
Erstens wissen 99% der user gar nicht was JavaScript ist. Von dem 1% die den begriff schonmal gehört haben wissen 99% aber nicht das man es ausschalten kann.

Sprich 1 von 1000 leuten könnten das vlt. deaktivieren.

Wenn ein User JS deaktiviert hat ist mir persönlich das egal, kann der meine Seite eben nicht nutzen, ich unterstütze das nicht.
Meine Kunden verhalten sich da verschieden. Sie wollen einerseits eine super schick animierte Seite die total hyper modern ist und auf allen Browsern laufen soll auch wenn JS deaktiviert ist. Also sage ich dennen entweder sie zahlen doppelt da ich noch eine Seite für ohne JS mache (selten) oder aber es gibt keine (fast immer) und sie gucken in die röhre.
Liegt vlt. auch daran das ich stets nur support für alle Browser außer dem IE (bis v. 9) anbiete und jede IE version 50 - 25 % aufschlag kostet ..... (sie aber natürlich alle IE unterstützung wollen (auf meiner Homepage kommt man mit dem IE nicht einmal rauf, ich will mit solchen leuten nichts zu tun haben))

 

[TheCadillacMan]

Wenn ein User JS deaktiviert hat ist mir persönlich das egal, kann der meine Seite eben nicht nutzen, ich unterstütze das nicht.

Wenn das die Kundschaft akzeptiert, ist das ja OK. Der normale Benutzer ist aber nicht das einzige Problem. Viel wichtiger sind die Suchmaschinen.

Der Google-Crawler kann (wie alle anderen Crawler auch) kein JavaScript. Wenn du denn Inhalt nur dynamisch lädst, sieht der Crawler nur den Header und die Navigation und das ist dem PageRank in der Regel nicht zuträglich.
[Google kann laut AJAX-Crawling zwar AJAX, aber eigentlich doch nicht, weil du auf Anfrage des Crawlers doch einen statischen HTML-Snapshot ausliefern musst. Spart also nicht wirklich Aufwand.]

Für Intranet-Anwendungen ist das alles natürlich kein Problem. Bei öffentlichen Seiten die auf Benutzer von Suchmaschinen angewiesen sind hingegen schon.

 

[voodoo44]

Wäre mir neu das AJAX kein simples JavaScript ist.

AJAX ist doch aber mehr als nur Javascript ....

AJAX macht das surfen auf websites wesentlich komfortabler, kann dazu beitragen den Traffic erheblich zu reduzieren (auch wenn heute eigentlich irrelevant) und steigert (in meinen augen) das surf vergnügen ungemein.

Und Javascript kann das nicht? Warum muss alles AJAX sein und nicht JS?

Kannst das X auch gerne weglassen und ohne XML arbeiten (mache ich auch) wenn man aber schreibt nutze doch AJ weiß keiner was gemeint ist.

Und warum kein JS, sondern "Asynchronous JS"? Wo ist eigentlich der Unterschied zwischen "AJ" und "J"? Ist Javascript nicht eh der Überbegriff dafür?

Bei einem sehr großen projekt welches ich betreue ist AJAX sogar fast unumgänglich. Dort werden einfach nur nackte Daten geladen und JS bastelt daraus dann die Seite, so musste der gesamte Quellcode (auch der für die dnymaischen Inhalte) nur ein einziges mal geladen werden und teilweise reicht es wenn man Sachen nur ausblendet, statt die Seite zu verlassen, eine neue Seite zu laden (bei der wieder alle CSS und JS datein geladen werden müssen (zumindest aus dem chache) etwas zu ändern und wieder zurpck zur alten zu wechseln.

In Zeiten von XCache und Memcached ist das doch fast egal ...
Wir nutzen auch viel JS auf unseren Portalen - aber unsere Version ist genauso ohne JS lauffähig. Ich hab zwar keine Ahnung, wie wir ~ 500 Itinerary-Datensätze im JS zwischenspeichern sollten .... aber die Blättern-Funktion zwingt die Server (auch bei ~300-400k Hits/Stunde) nicht in die Knie.

Wieso nicht einfach ein kleines HTTP Reuqest welches nur die relevanten infos vom server abholt?

Weil "ein kleines" HTTP-Request nicht alle Daten holen kann - es sei denn, deine Seite besitzt keinen Content

Für den Clienten, den Server und die Leitung ein gewinn.

Warum? Viele kleine Requests sind langsamer, als ein großer. Darum nutzt man auch Sachen wie CSS-Sprites für die Grafiken.
Davon abgesehen sehe ich den Sinn nicht: Hole mir den Inhalt von 5 Unterseiten, obwohl ich nur 2 anschauen will .... hm ... sehr "optimiert"

Erstens wissen 99% der user gar nicht was JavaScript ist. Von dem 1% die den begriff schonmal gehört haben wissen 99% aber nicht das man es ausschalten kann.

Quelle?

Sprich 1 von 1000 leuten könnten das vlt. deaktivieren.

Und solche Leute, die sich irgendwelche "Sicherheitstools" (Adblock, NoScript) installieren?
Vermutlich sind wir dann schon bei 200 von 1000 ...

(auf meiner Homepage kommt man mit dem IE nicht einmal rauf, ich will mit solchen leuten nichts zu tun haben)

Auf kleinen unbedeutenden Seiten kann man das sicher machen - auf größeren Portalen sollte man es sein lassen.

 

[echoDave]

Beruhigt euch mal Jungs, ich habe das Gefühl das in den letzten Posts ihr euch nur aufspielen wollt, den dem Threadersteller sind die Posts wohl nicht wirklich hilfreich. Die Sache zwischen euch könnt ihr ja per PN klären....


Er wollte eine Quick&Dirty Lösung und er hat sie bekommen sowie sich bedankt. Damit ist doch die Sache gegessen....

Grüß,

iDave

 

[F_GXdx]

Bei einem sehr großen projekt welches ich betreue

Rhabarber Rhabarber, sag erstmal den Link bevor du deine Credits forderst

 

[voodoo44]

Er wollte eine Quick&Dirty Lösung und er hat sie bekommen sowie sich bedankt. Damit ist doch die Sache gegessen....

Wo steht denn da was von "Quick & Dirty"? Er hat doch selbst sogar auf ein CMS umstellen wollen ...

 

[Flockyflo]

Entschuldigung, das ich hier jetzt eure Begeisterung ein wenig dämpfen muss, aber ich hab nicht wirklich Lust darauf, die gesamte html Seite per JS umzuschreiben. Das ist mir ehrlich gesagt zu viel Arbeit und html/php kann ich, bei java besitze ich nur grundkenntnisse, von dem her müsste ich erstmal wieder Wochenlang Java auffrischen um so eine Seite dann zu realisieren.

Ich hab es jetzt so gelöst:
Ich tsell die gesamte Homepage auf php um, die einzelne php Datei besteht zwar jetzt aus 4 php Seiten, die ich mit include zusammen setze, aber das reicht schon für den Anfang.
Wenn die Homepage im neuen Glanz erstrahlt, schau ich mich nach einer geeigneten cms Lösung um und bau mir dann paralell die Seite von php auf cms um. Das wird dann aber erst in ca. nem halben Jahr soweit sein, von dem her kann ich mir mit cms noch etwas Zeit lassen. Es steht aber auf der To-Do-Liste.

Das mit Ajax hört sich wirklich interessant an, aber mir fehlt es einfach an den Kenntnissen und der Geduld, das alles aufzufrischen und umzusetzen.
Ausserdem denke ich mal, das html und php noch nicht zur Aussterbenden Art gehören

 

[voodoo44]

Du sagst du kannst PHP, kommst aber selbst nicht auf die Idee, die Webseite mit ein paar simplen Includes zu vereinfachen? o_O
"Von PHP auf CMS umstellen" ... und wie soll das gehen? Nutzt du ein in C geschriebenes CMS?

Und bitte: du hast "Grundkenntnisse in Java" - die bringen dir doch aber gar nichts - oder willst du etwa mit JSP arbeiten und die Webseite auf einen Tomcat deployen? o_O

 

[mercsen]

Also voodoo44 du hast anscheinend nicht rchtig gelesen.

Als erstes solltest du vlt. nochmal nachlesen was denn der Begriff AJAX bdeutet.
Ich erleichtere dir das ganze mal ein wenig:

Ajax [ˈeidʒæks] ist ein Apronym für die Wortfolge „Asynchronous JavaScript and XML“. Es bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server. Dieses ermöglicht es, HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird, und die Seite zu verändern, ohne sie komplett neu zu laden. Viele Anwendungen von Ajax werden dazu eingesetzt, im Webbrowser ein desktopähnliches Verhalten zu simulieren, wie beispielsweise Popup-Fenster.

Quelle: Wikipedia

Es ist also nur ein sammelbegriff für die verwendeten Techniken.

Client Schickt anfrage an den Server -> Server generiert (im idealfall und im sinne von AJAX) ein XML Dokument -> Server Schickt XML an CLient -> Client wertet XML Daten aus

Statt XML kann man aber auch JSON Objekte, HTML oder Text oder was auch immer verschicken.

Wenn es mit einer anderen SPrache machen willst (auch wenn mir bis auf c in pepper keine anderen sprachen für browser einfallen) ist es eben kein AJAX mehr, sondern nur ein simpler HTTP request, der nichts weiter ist als eine Datei mit einem bestimmten Header.

Dann erkläre mir mal folgendes:

Wie sollen 5 Aufrufe bei denen stets der gesamte Inhalt geladen wird schneller sein als 5 Asynchrone requests die jeweils nur den Content nachladen (Codiert als JSON oder XML) und aus denen JS dann eine HTML Seite bastelt? Zumal auch dort daten gecached werden.

Ein weiterer Vorteil der Methode ist natürlich auch das man weiter arbeiten kann während im Hintergrund daten nachgeladen werden.

Ein "kleines" HTTP Request war natürlich nur versinnbildlicht, k.a. was du dir da jetzt zusammen gereimt hast, damit meinte ich halt schlicht und einfach das pure Daten an den Clienten geschickt werden die JS dann ins DOM einsortiert oder vorhandene Inhalte ersetzt. Ohne Style Informationen o.ä.
Geht natürlich nur wenn die gesamte Seite darauf ausglegt ist und JS weiß wie es mit den Daten umzugehen hat. "Klein" hat dabei keinen bezug auf die menge oder den inhalt der daten sondern sollte nur verdeutlichen das es weniger aufwand bedeutet als ein kompletter reload

Meine "Quelle" für meine Angabe das 1 von 1000 Leuten wissen wie man JS deaktivieren kann war natürlich auch reine Übertreibung und aus der Luft gegriffen und sollte nur meine Erfahrung in der alltäglichen Welt wieder geben. Dachte eigentlich das wäre klar gewesen, naja wohl nicht für jeden....

Zudem kann ich dir garantieren das die meisten nicht einmal wissen was AdBlock genau macht und das es auch mit JS arbeitet.

Die Problematik das suchmaschienen dich nicht mehr finden habe ich gerade erst selber am eigenen Leib erfahren müssen und wie ich sicher schon sagte (keine Lust jetzt nachzulesen) mache ich das auf meinen Seiten so. Für Kunden gibt es i.d.r. auch eine JS Freie version

@F_GXdx auf eine Link wirst du warten können bis auch du das Erwachsenen alter erreicht hast, da es sich bei dem Projekt um eine Verwaltungssoftware für einen Personaldienstleister handelt. Wenn du jetzt lust hast kannst du meine alten Beiträge durchsuchen, dann wirst du einige Referenzen auf dieses Projekt finden, ansonsten würde ich mir wünschen auf deiner blacklist liste zu landen, danke