Viele Wege führen nach Rom- auch ohne Bootstrap & Co. !

[kukki]

Mitte März 2012 habe ich begonnen auf Basis dieser Vorlage mich mit responsiven Website auseinander zusetzen. Auf meiner Spielwiese habe ich mehrfach daran und damit rumgebastelt. Nebenher entwickelte sich das phpWCMS schnell weiter, so dass sich erkennen ließ, dass man nur mit Boardmitteln - ohne Bootstrp und Cp. es schafft eine responsive Website zu zaubern.

Allheilmittl sind eigentlich in Grunde nur die dynamische Änderung der Bildgrößen mittels "max-width:...., display : block" und die Anwendung von "@media queries und max-width/ min width" - neben weiteren Features, die aber nicht zwingend sind!

Wie man der Philosophe "first mobil" oder "first desctop" folgt, ist jedem sein eigenes Bier, funktionieren wird beides! Bei den aktuellen Übertragungsraten sind keine großen Hürden zu meistern. Etwas Mühe mehr macht die richtige Anpassung der Formulare. (siehe auch hier!), die dazu notwendigen Informationen muss man sich mühevoll zusammenklauben

Unterm Strich aber funktioniert alles sehr gut. Am Schluß dröselt man die gesamte CSS etwas auf in einen reset-Part, einen allgemeinen Part incl. der notwendigen Definitionen und einen responsiven Part. Hilfreich sind auch solche System-Tags wie "[LEFT]{ LEFT }[/LEFT]", wenn diese Websitebereiche für das responsive Layout nicht unbedingt gebraucht werden. Ich habe durchgängig das NAV_LIST-Konzept benutzt und dann ab 599px-Breite mich mit SlickNav durch hinzufügen einer Klasse für Slicknav die Menüführung dementsprechend angepasst.

https://youtu.be/3ULcTFkxAD8

Vorteil des Ganzen:
Ich muss mich nicht um eine Zusammenstellung irgendwelche Bootstrap -Bibliotheken kümmern, brauche dazu auch keine Upgrade/ Update, benutze nur mit die üblichen Boardmittel von phpWCMS. Updates seit 2012 habe zu keiner Zeit Probleme mit dem responsiven Layout gebracht!

Für mich immer noch ein Grund, nicht mit phpWCMS zu hadern. Weder "Wordgeresstes", noch "TyPOsierte CMS's" oder andere kleinere Systeme konnten mich überzeugen. Ob Oliver es doch mal schafft den Bug '143 zu beseitigen .... wäre wünschenswert und auch notwendig!

[Old Boy]

Auch ich habe so angefangen, ohne Bootstrap zu verwenden.
Eigentlich sind ja nur die CSS Werte entsprechend anzupassen, man muss natürlich reichlich knobeln, aber es funktioniert tadellos!
Bootstrap habe ich erst vor 2 Wochen "entdeckt". Überrascht war ich, wie schnell sich mit was funktionierendes zusammenschieben lässt!
Mein Eindruck allerding, man lässt sich damit sehr leicht verleiten, nur noch den Vorgaben in den Musterseiten zu folgen, was schnell eine "Vereinheitlichung" der selbst erstellten Seiten mit sich bringen kann.

Mein Entschluss deshalb:
1. Wenn es mal wirklich "zackig" sein muss: Bootstrap.
2. Wenn es "mehr individuell" sein soll, bleib ich lieber bei der Methode, wie kukki sie hier auch verwendet hat.

Trotzdem macht die Beschäftigung mit Bootstrap Sinn, denn man lernt eine Menge Neues kennen und korrigiert sein übliches Vorgehen dementsprechend.

Auch muss ich bestätigen, der responsive Massenwahn macht eine komplette Überarbeitung meiner bisher vorhandenen ContentPart Vorlagensammlung erforderlich. Ohne diese Arbeit geht gar nichts!
Intuitiv ist damit bei phpwcms kaum noch etwas ... zumindest nicht mehr "out off the box" anwendbar.
Wenn man die Anpassarbeiten aber einmal hinter sich hat... ist der Bann gebrochen und die Site-Erstellung läuft dann wieder wie geschmiert.


Tja kukki, auch ich träume davon, etwas zum Nachlesen in der Hand zu haben oder - noch viel besser vielleicht - eine "lebende Musterseite" mit allen verwendeten ContentParts... nur um zu sehen, was man alles so machen kann und welche geheimnisvollen Möglichkeiten sich noch in unserer "Lieblings-Toolbox phpwcms" verborgen halten

[kukki]

...man muss natürlich reichlich knobeln, aber es funktioniert tadellos! ... Mein Eindruck allerding, man lässt sich damit sehr leicht verleiten, nur noch den Vorgaben in den Musterseiten zu folgen, was schnell eine "Vereinheitlichung" der selbst erstellten Seiten mit sich bringen kann.

... (2) Wenn es "mehr individuell" sein soll, bleib ich lieber bei der Methode, wie kukki sie hier auch verwendet hat.

Intuitiv ist damit bei phpwcms kaum noch etwas ... zumindest nicht mehr "out off the box" anwendbar.
Wenn man die Anpassarbeiten aber einmal hinter sich hat... ist der Bann gebrochen und die Site-Erstellung läuft dann wieder wie geschmiert.

Ein Schuss ins Schwarze , Du sprichst mir aus der Seele.! Häufig muss es bei mir nicht soo schnell fertig sein.
Im Moment soll noch keine Seite dazu online zusehen sein, der Kunde weiß zwar von seinem Glück, hat aber noch keine Zustimmung gegeben. Da diese Seite (Video) relativ einfach und ohne Schnörkelist und sich regelrecht anbot, habe ich einfach mal angefangen - und siehe da ... sie dreht sich doch, unsere gute alte Erde!

[juergen]

Trotzdem macht die Beschäftigung mit Bootstrap Sinn, denn man lernt eine Menge Neues kennen und korrigiert sein übliches Vorgehen dementsprechend.

Volle Zustimmung und die Zellen müssen beschäftigt werden, sonst fallen sie aus !

[kukki]

Nachdem ich nun meine CSS-files angefangen habe zu optimieren, kam eine Auftragsanfrage rein. Ich habe innerhal 20 Minuten ein komplett neues System rein zum Zwecke der Demo für Website fester Breite (max.1024) und dynamsicher Höhe, fixed Banner, fixed Footer aufgesetzt, Vorlagen aus Text-File kopiert, die CSS-File per FTP übertragen und gestartet. Nach weiteren 15 min waren auch ein paar Anpassungen wie Banner, Footerund Bannerüberschrift etc. erledigt.
Und ..... das ganze immer noch OHNE Bootsstrap und Co. mit "slickNav" und "media queries"

[kukki]

Nahhh, schon im Urlaub gewesen?

nach meinem Urlaub habe ich mich bezüglich des "Weges nach Rom" mal mit dem Flex-Modell und phpwcms abgegeben. Erfolgreich bisher und gewöhnungsbedürftig. Die vielen Beispiele im Netzt sind häufig veraltet, da die neusten W3C-Vorgaben noch nicht eingearbeitet sind.

Auf jeden Fall funktioniert das Model ganz gut unter FF, Chrome, Safarie und Opera.
Der IE11 macht noch ein paar kleinere Zicken, könnte aber auch an den noch nicht ganz suaber durchdachten media queries liegen Ich habe hier mal strick die Formel "fist mobile" benutzt.
Die CSS-Steuerung für Bilder und Texte sind noch nicht mit eingeflossen, sprich sind noch leer, aber bereits vorbereitet. Damit dürfte auch dieser Weg in ganz naher Zukunft gut gangbar sein, ohne sich mit dem anderen Gerammel abgeben zu müssen.

[juergen]

Und deswegen bist du jetzt extra nach Rom ?

[Old Boy]

Hi kukki,

das sieht ja im Moment noch recht einfach gestrickt aus und alles noch schön mit Rahmen und Hintergrundfarben versehen... ja, so war das bei mir auch in den ersten Tagen. Wie soll man sonst die ordnungsgemässe Funktion der responsiven Spielereien kontrollieren?!

Wichtig aber ist, du bist auf dem richtigen Weg und da du ja anscheinend beim Papst in Privataudienz gemeinsam um Inspiration gebetet hast, kann eigentlich nix mehr passieren und die Basis ist geschafft.
Jetzt nur noch die "passenden" Farben aussuchen, Rahmen RAUS und Inhalte REIN!!!

Schwups un feddich! Saaacht man hiiier in Ruuuhrgebiet!

Weiter viel Erfolg ... und grüß mir den Papst, wenn du mal wieder mit ihm telefonierst

[kukki]

@ old boy:
Mach ich immer so, border und background-color sind tolle optische Hilfsmittel, wenn man einen bestimmten Bereich sucht und per F12 dann anklicken/ korrigieren kann.
Die ganze Sache ist trotzdem sehr gewöhnungsbedürftig, man lernt die Sparache CSS2/3 ein zweites Mal und alte Routinen dann abzulegen ist sehr schwer, man verfällt immer wieder in den "older boys"-Trott. Und da wir häufig keine großartigen Notizen machen, wie bei einem Layoutentwurf und alles aus dem Ärmel schütteln und dann fertig werden wollen, wird einem gar nicht klar, was man da alles geändert hat und sucht den ganzen Schnodder von Anbeginn nach Fehlern ab. Ein doppletes "}" oder ein fehlendes ";" ...

Ob mir der Papst zur Seite stehen wölle oder nicht, die Wege des Herrn sind unergründlich - finde Deinen eigenen Weg!

und wie schon gesagt, alles an brauchbaren Infos im Netz ist häufig veraltet

So richtig traue ich der ganze Flex-Box-Methode noch nicht über den Weg, auch wenn alle gängigen Brwoser das unterstützen, erst recht die Android-Systeme. Ich denke, dass es da noch einmal eine Schub geben wird, nur die Richtig ist noch nicht klar. Meine Respo-Lösung ohne Flex-Box funktioniert ja schon, damit habe ich erst einmal genügend Munition.
Am Montag hat mich eine Firma aus MOL zu einem Gespräch geladen, die ein umfassendes Angebot haben wollen und mir noch nicht verrieten, worum es genau geht - seltsam ....

[kukki]

Zwischenzeitlich habe ich "mein" Template "tabs/jQuery-Accordion" auch responsive gemacht, war mit dem Template und drei Zeilen Code ganz easy.

Mit der Weile laufen zwei Website auf diesem Theme - ohne Bootstrap

[juergen]

Mit der Weile laufen zwei Website auf diesem Theme - ohne Bootstrap

Siehste, da wir keine Weile haben, müssen wir es nutzen...

[nameless1]

Siehste, da wir keine Weile haben, müssen wir es nutzen...

[kukki]

Der Weg nach Rom ist steinig, vor allem wenn man noch 'nen Anhänger mitzieht:

• der Motor stottert, man fährt nur im ersten oder zweiten Gang,
• man zieht eine Abgasfahre hinter sich her,
• die Klimaanlage funktioniert nicht,
• die Bremsen haben auch schon besser funktioniert .... das geht auf Dauer nicht gut!

Wer natürlich solche Viehekel wie "Word Gepresstes", Contao, Typo3 fährt und diese auf dem Stand der neusten Technik halten will, kommt nicht drumrum den Motor zu pimpen - aber phpWCMS braucht das gar nicht!

Meine respo.frontend.css hat nur 190-Zeilen Code (unkomprimiert) ...

[juergen]

Aus historischen Gründen ist das alles sehr kompliziert lieber kukki ! Deine Familie stammt von den Barbaren, nördlich des Limes ab, ich bin ein Römer, südlich des Limes aufgewachsen