CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

geotek · 21. Oktober 2015 17:39

Hier ist ein CMSMS Relaunch mit einem Responsive Design basierend auf CMSMS V.2.0. Es hat eine ganze Weile gedauert, ein reines CSS3-Menü (ohne Javascript) fertigzustellen, das sowohl auf Desktops als auch auf Tablets und Smartphones mit beschränktem Viewport ein übersichtliches, zweistufiges Menü erlaubt. Ursprünglich basierte es auf dem sehr guten Simplex Design, von dem am Ende aber nicht mehr viel übrig geblieben ist. Sehr ernüchternd dabei war die Tatsache, dass die einwandfreie Darstellung auf diversen Mobil-Emulatoren noch lange nicht garantiert, dass das die Seite auf einem echten Smartphone korrekt funktioniert.

http://geotek.de

geotek.de_2015_screenshot_small_411.jpg

geotek.de_2015_screenshot_medium_411.jpg

Beitrag geändert von geotek (21. Oktober 2015 17:41)

mike-r · 22. Oktober 2015 22:06

Gefällt. paar Sachen:
- Die Anfahrtskarte sollte auch bei deaktiviertem JS sichtbar sein. (Und im Idealfall von OSM)
- Die Seite hat beim Aufbau (zumindest hier) ein recht interessantes Wackeln/Wechseln der Schriftgrössen etc. Ich vermute, dass es daran liegt, dass im CSS diverse "IDs" gerendert werden wollen, welche ungültig sind:

Hier klicken, um den Code zum Kopieren zu markieren

# Setzt global die Cache-Paramtert fÃ¼r diverse Objekte
<ifModule mod_headers.c>[...]

- ich würde auf den prefix "cms" in der URL-Struktur verzichten
- Die Hauptpunkte würde ich mit eigenen Seiten beglücken, wo die Subseiten kurz angeschnitten werden.
- Bis auf das Kontaktform wäre ein Browsercaching ganz angebracht. Der Server ist zwar recht flink, aber es ist schon trotzdem merklich.

geotek · 22. Oktober 2015 11:58

@mike-r: Danke für die Rückmeldung!
Das CSS-Stylesheet hatte in der Tat einen Textblock, der da gar nicht reingehört sondern in die Apache Config. Das kommt vom heftigen Cut-and-Paste in 20 offenen Editor-Fenstern :-)

Ein Wackeln/Wechseln von Schriftgrößen kann ich hier leider nicht nachvollziehen, weder in Firefox, noch in Chrome oder IE, auch nicht unter Android. Mit welchem Browser und in welcher Umgebung tritt das denn bei Dir auf?

Die Diskussion mit OSM vs Google Maps und Javascript mache ich jetzt bewusst nicht auf, vielleicht an anderer Stelle... ;-)

Ja, Du hast Recht, der cms-Prefix in der URL ist nicht optimal, muss aber leider so sein, weil parallel zu CMSM noch weiterer Content vorhanden ist, der dem CMS-Inhalt nicht in die Quere kommen darf.

Browser-Caching sollte eigentlich eingeschaltet sein, ich habe die Lifetime aber bewusst auf 24h begrenzt. Würdest Du am Caching der diversen Elemente noch mehr optimieren, oder habe ich da was prinzipielles übersehen?

Beitrag geändert von geotek (22. Oktober 2015 12:58)

faglork · 22. Oktober 2015 15:40

geotek schrieb:

Browser-Caching sollte eigentlich eingeschaltet sein, ich habe die Lifetime aber bewusst auf 24h begrenzt.

darf ich fragen wie? bei mir funktioniert das nicht, bei keiner einzigen Site. Sobald ich im Backend die Cache-Verfallszeit auf *irgendwas* setze, kommt automatisch 10800 raus. Gibt auch nen Thread dazu ...

Servus,
Alex

geotek · 24. Oktober 2015 17:32

faglork schrieb:

darf ich fragen wie?

Ich habe das Apache-Modul mod_headers aktiviert und in der Datei
/etc/apache2/vhosts.d/website.de.conf

die folgenden Zeilen eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

# Setzt global die Cache-Parameter für Images und JavaScript:
<ifModule mod_headers.c>
	<FilesMatch "\.(gif|ico|png|jpg)$">
		Header set Cache-Control "max-age=2592000, public"
	</FilesMatch>

	<FilesMatch "\.(js)$">
		Header set Cache-Control "max-age=86400, private, must-revalidate"
	</FilesMatch>
</ifModule>

Danach wird noch Google Pagespeed aktiv, aber Pagespeed honoriert die Apache-Lifetimes und reicht sie durch.

mike-r · 24. Oktober 2015 19:22

Das selbe geht auch (zumindest hier exemplarisch bei einem Host) via .htaccess

Hier klicken, um den Code zum Kopieren zu markieren

# BEGIN Expire headers
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# END Expire headers
 
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
  <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "max-age=2592000, public"
  </FilesMatch>
  <FilesMatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
  <FilesMatch "\\.(js)$">
    Header set Cache-Control "max-age=216000, private"
  </FilesMatch>
#  <FilesMatch "\\.(x?html?|php)$">
#    Header set Cache-Control "max-age=600, private, must-revalidate"
#  </FilesMatch>
</IfModule>
# END Cache-Control Headers
 
# BEGIN Turn ETags Off
<IfModule mod_headers.c>
 Header unset ETag
</IfModule>
FileETag None
# END Turn ETags Off
 
# BEGIN Remove Last-Modified Header
#<IfModule mod_headers.c>
#  Header unset Last-Modified
#</IfModule>
# END Remove Last-Modified Header

Möglich dass da Doppelungen oder Überschneidungen drin sind, habe mir das irgendwo™ mühsam zusammenkopiert und funktioniert.

faglork · 27. Oktober 2015 16:41

Genau das funktioniert bei mir aber nicht:

http://www.cmsmadesimple.de/forum/viewtopic.php?id=4570

??

Servus,
Alex

faglork · 27. Oktober 2015 16:46

mike-r schrieb:

Das selbe geht auch (zumindest hier exemplarisch bei einem Host) via .htaccess

Hast du mal ne Site wo das funktioniert?

Servus,
Alex

faglork · 27. Oktober 2015 17:12

Hier klicken, um den Code zum Kopieren zu markieren

  <filesmatch "\.(html|htm|php)$">
  Header set Cache-Control "max-age=600, private, must-revalidate"
  </filesmatch>

ergibt bei mir das eigenartige Ergebnis

Cache-Control: public, max-age=10800, max-age=600, private, must-revalidate

Servus,
Alex

mike-r · 27. Oktober 2015 17:39

faglork schrieb:

mike-r schrieb:
Das selbe geht auch (zumindest hier exemplarisch bei einem Host) via .htaccess
Hast du mal ne Site wo das funktioniert?
Servus,
Alex

Vom Prinzip schon, aber ich sehe, dass das bzgl. Seiten(php) vom CMS überschrieben wird. (siehe Dein anderer Thread).
Ich schreib mal dort noch was dazu...

Janl · 27. Oktober 2015 22:39

Webseite sieht gut aus aber die Schrift könnte auf Fullhd etwas grösser sein.
Springen tut es bei mir nicht, Schrift ist konsistent.
Es ist aber viel Text, wird das auch gelesen?

Was mir gut gefallen hat war die Seite "Das Alleletzte". Als "Alte" lese ich sogar gerne.

Grüße nach Berlin
Jan

NaN · 28. Oktober 2015 08:45

Was mir gut gefallen hat war die Seite "Das Alleletzte".

Ja, da musste ich auch irgendwie schmunzeln smile

Ich würde für die Klasse ".dropcap" font-size: 38px; line-height:1; und margin-top:0px; verwenden. Dann sitzen die Initiale besser in der Zeile.

Andynium · 29. Oktober 2015 01:17

faglork schrieb:

Genau das funktioniert bei mir aber nicht:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=4570
??

Hast du denn meinen Vorschlag mit der config.php getestet?

geotek · 12. November 2015 11:15

NaN schrieb:

Ich würde für die Klasse ".dropcap" font-size: 38px; ... verwenden. Dann sitzen die Initiale besser in der Zeile

In der Tat, mit 38px sehen die Dropcaps besser aus. Leider sind die verschiedenen Browser nicht ganz konsistent, aber so sieht es jedenfalls besser aus. Danke für den Hinweis!!

Forum für CMS/made simple

#1 21. Oktober 2015 17:39

CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#2 22. Oktober 2015 22:06

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#3 22. Oktober 2015 11:58

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#4 22. Oktober 2015 15:40

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#5 24. Oktober 2015 17:32

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#6 24. Oktober 2015 19:22

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#7 27. Oktober 2015 16:41

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#8 27. Oktober 2015 16:46

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#9 27. Oktober 2015 17:12

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#10 27. Oktober 2015 17:39

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#11 27. Oktober 2015 22:39

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#12 28. Oktober 2015 08:45

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#13 29. Oktober 2015 01:17

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

#14 12. November 2015 11:15

Re: CMSMS 2.0 Website mit Responsive Design und zweistufigem CSS3-Menü

Fußzeile des Forums