check op efficiënte bouw site

[Gregor]

Hallo,

Mijn site www.uisge-beatha.eu bestaat nu 4jr, al vele verhalen en ervaringen geschreven. Ik constateer dat de ontwikkeling op het bouwen met gebruilk van css niet stilstaan. Evenmin de ontwikkelingen met cmsms. Door de tijd hee heb ik veel hulp gehad waar ik erg veel aan heb gehad, van heb geleerd en bovenal erg blij mee ben.

Ik ben een beetje aan het puzzelen geweest met mijn site om bijv. te zien wat nu de laadtijd is, in hoeverre de site w3c-compliant is en in hoeverre de site aan de laatste standaarden voldoet. Nu heb ik niet helemaal scherp wat die laatstse standaarden zijn, ik zie alleen wel dat de ccs-toepassingen veranderd zijn. Mijn vraag aan dit forum, is of jullie vanuit je expertise naar mijn site willen kijken en me willen laten wat je mening/idee/of suggestie is, gezien mijn bovenstaande vraag.

Ben nieuwsgierig naar de reacties.

Gregor

[Jos]

De w3c validator checkt op basis van de DOCTYPE. Jij gebruikt XHTML 1.0 Transitional. Dat is prima, het dient geen nut om voor de muziek uit te lopen met bijvoorbeeld HTML5 o.i.d.

Ik kijk in de html bron van je pagina en zie erg veel meta tags. Sommigen staan dubbel, anderen hebben geen functie en zijn dus overbodig... Hier kun je dus wat besparen op de pageload. Ook opmerkingen als zou ik zelf weghalen.

In de div id=search staat ook een groot deel als comment. In plaats van  zou je {* ... *} kunnen gebruiken. In het laatste geval wordt het niet geparsed door Smarty en dus niet meegenomen in je paginabron.

Verder zie ik dat je in je News template gebruik maakt van inline css. Het is beter om dit d.m.v. id  of class te koppelen aan css in een separate stylesheet. Die stylesheet wordt aan de gebruikerskant gecached door de browser, dus door het uit je pagina te verwijderen, komt dat ook ten goede aan het aantal bytes wat je bezoekers moeten downloaden.

In IE7 staat de imagerotator in de header niet goed

In firefox ontbreekt het de menu-items aan een vaste breedte, waardoor ze soms op één regel komen te staan

In zowel IE7 als FF heeft de datum in het nieuwskader te weinig breedte.

Op de voorpagina kan het klikken op een kleine foto voor een vergroting mooier met een div overlay (à la Lightbox net als de overige pagina's) in plaats van in een nieuw venster.

Tot slot zou je je kunnen beraden hoeveel zoden de Google Ads aan de dijk zetten. Ik vind ze afbreuk doen aan je pagina.

[Gregor]

Dankjewel voor je uitgebreide reactie Jos! Ik ga dit eens op mijn gemak lezen en kom zeker nog wel met vragen

Gregor

[Gregor]

De Metatags heb ik opgeschoond, niet helemaal wetend welke eruit konden, maar in ieder geval die die k niet had ingevuld.

De comments uit de templates gehaald.

Nu met het nieuwsblok aan het stoeien. Ik heb de inline stying eruit gehaald en vervangen door een class, dus in de news-template ziet dat er nu als volgt uit:

Code: Select all

<div class="NewsDateAuthor">
    {if $entry->postdate}
       <div class="NewsSummaryPostdate">{$entry->postdate|cms_date_format}</div>
       {if $entry->author}
          <div class="NewsSummaryAuthor">{$entry->author}</div>
       {/if}
   {/if}
</div>

In ieder geval overzichterlijker 

In de stylesheet heb ik dit ervan gemaakt:

Code: Select all

.NewsDateAuthor {
  position: relative; 
  width: 100%; 
  height: 20px;  
}

.NewsSummaryPostdate {
  font-size: 95%; 
  font-weight: bold;
  position: relative;
  width: 55%;
 }

/* voor het logboek op de eerste pagina */
.NewsSummaryPlaatsingsdatum {
  padding: 0em 0.5em 0em 0em;
  f/* font-size: 95%; 150207 toegevoegd */
  font-weight: bold;
 }

.NewsSummaryLink {
    /* font-size: 95%; 150207 toegevoegd */
    font-weight: bold;
    padding-top: 0.0em;
}

.NewsSummaryCategory {
  font-size: 90%; /* 150207 toegevoegd */
  font-style: italic;
  margin: 5px 0;
}

.NewsSummaryAuthor {
  font-size: 90%; /* 150207 toegevoegd */
  font-style: italic;
  padding-bottom: 0.1em;
  position: absolute;
   width: 40%;
   left: 90px;
}

Maar daar gaat iets nog niet lekker; de naam staat op de volgende regel. Ik dacht een soort van mini container te maken (NewsDateAuthor) en daar respectievelijk NewsSummaryDate en NewsSummaryAuthor in te plaatsen, echter dat leidt er niet toe dat ze op dezelfde regel blijven. Hoe zou ik dit kunnen oplossen?

Gregor

[deactivated010521]

----------

[Gregor]

@Jos: de plaatjes op de eerste pagina, daar ben ik eens eerder mee aan het stoeien geweest. Voor het laden van die overlay uit lightbox is een js-file nodig en dat conflicteert met rotator. Heb niet echt een oplossing hoe dat voor elkaar te krijgen; wat ik nu heb, is vanuit de editor aangegeven dat als er op wordt geklikt, er een grote versie van de foto moet worden geopend.

@Arnoud.
- Dank je wel voor je compliment. Tja, passies...
- Je css-wijziging heb ik door gevoerd. en dat werkt Ga iets soortgelijks nog voor de eerste drie regels bovenaan de site doen.
- Met compressie ben ik eerder bezig geweest en via een online compressor de .js-files bewerkt. Ik weet niet wat er gebeurde, maar de gecomprimeerde code werkte voor geen meter meer. Ik heb dan te weinig ervaring daarmee om te analyseren wat er is misgegaan en zet ik het origineel maar weer terug. CSS-files comprimeren vanuit cmsms, die comprimeer je extern en kopieer je dan over de bestaande css heen die je vanuit de backend kunt editten? Dat nooit eerder geprobeerd.
- Google analytics vraagt inderdaad tijd. Nieuwe code erin gezet en lijkt sneller te laden.
- De site heb ik destijds gebouwd o.b.v. van een van de template van cmsms. Hoewel ik geen site ontwerper ben, vind ikdat ik een heel eind ben gekomen o.a. met hulp van het forum. Sta wel open voor suggesties over het grafische en gebruikersvriendelijke aspect.

Gregor

[Rolf]

Hallo Gregor,

Ook ik kijk altijd met bewondering naar je website. Het is leuk om te zien dat een hobby zich ook voortzet op het internet
Zo is het bij mij ook min of meer begonnen, en dat zie je ook bij bijv. www.wpbremer.nl

Het is prima om eens terug te kijken wat je hebt gemaakt, wat is goed, wat kan anders, wat kan beter.
Zo heb ik mijn website zelf ook al 3 of 4 keer geheel op de kop gegooid. Je leert er ook gewoon weer wat van!


Ik zou zelf eens proberen om wat betreft de layout de standaard CMSMS looks er uit te halen. Geef het een eigen gezicht.
En dan doel ik op bijv. de gele regel met het blokje links, de menukleuren, vorige/volgende pagina, gastenboek kleuren, enz.
Door te spelen met CSS kun je soms met een paar kleine wijzigingen de site een heel ander gezicht geven.

Zoals Jos ook al aan gaf zou ik ook eens kijken naar het nut van de Google ads...
Uit eigen ervaring levert dit niets op en het vervuilt de website wel. Ik heb zelf de ads er helemaal af gegooid!
Als je een website maakt juist alleen voor de advertenties dat levert het wat op, maar niet op deze manier.

Voor de fotoalbums zou ik Jos zijn Gallery module eens proberen, zoveel meer mogelijkheden en voor de bezoeker ook gebruiksvriendelijker.
Je hebt dan ook direct een oplossing voor de vergrotingen van de enkele foto's op de pagina's. {Gallery img=123}

Kan me niet meer herinneren hoe de backend van jouw website er uit zag, maar in ieder geval dan even in het algemeen 
Kijk niet alleen naar de frontend van de site, maar ook eens naar de backend.
Ruim niet gebruikte stylesheets, sjablonen, html-blokken, udt's, enz. op.
Benoem alle componenten met een logische naam.
Het beheren van de website wordt dan veel eenvoudiger. Ook voor iemand die een keer inlogt om te helpen.
Zelf zet ik om die reden opmerkingen in de code altijd in het Engels. Heb wel eens meegeholpen in een Finse website. Leuk hoor al die Finse opmerkingen, maar ik kon er niets mee 

In deze topic heb ik website (zoekmachine) optimalisatie eens onder de loep genomen en er zijn veel nuttige reacties op gekomen. Wie weet staat daar nog wat bij dat je kunt toepassen.
http://forum.cmsmadesimple.org/index.ph ... 912.0.html

Hoop dat je hier wat mee kunt,

groet, Rolf

[Gregor]

In IE7 staat de imagerotator in de header niet goed

In firefox ontbreekt het de menu-items aan een vaste breedte, waardoor ze soms op één regel komen te staan

In zowel IE7 als FF heeft de datum in het nieuwskader te weinig breedte.

@Jos: ik gebruik FF en Safari, beide op een Mac. Daar staan de header rotator en het menu netjes op hun plek. IE7 op een Mac.... Ik zal het installeren (zucht) en zien hoe het daar staat. Vraag is natuurlijk meer, wat te doen aan de browser incompatabiliteit?

Gregor

[Gregor]

@Rolf: Dank je voor je reactie. Was van de week al begonnen met het weggooien van overbodige templates en css'n. Dat ruimt aardig op Je overige opmerkingen ga ik mee aan de slag. Layout wellicht i.c.m. met opmerkingen die Arnoud mogelijk nog maakt

Gregor

[TD__]

De site ziet er aardig uit, alleen het lijkt een beetje druk...
Een paar dingetjes die daar wat aan zouden kunnen doen:
- Probeer de blokken aan de linker zijkant net zover te laten inspringen als het lijntje erboven (waar: 'waar ben ik' staat).
- Laat in het hoofdgedeelte tussen de nieuwsitems wat meer ruimte over aan de boven- en onderkant van het lijntje, dan creëer je meer 'ruimte '.
- Wissel de titel van het nieuwsitem en de datum om, (de meeste) mensen lezen van links naar rechts en aan de titel heb je meer als aan de datum.
- Die titel kan je eventueel zo groot maken als de titel van 'Het ontstaan van de naam...', de kleur mag ook wel hetzelfde.
- Maak de samenvattingstekst van die nieuwsitems minder groot, bijv. zo groot als de andere tekst.
- De knopjes voor rss, printen enz. zou ik allemaal dezelfde grootte geven, dit staat namelijk erg rommelig.
- Probeer alle blokken aan de rechter zijkant allemaal even breed te maken en rechts uit te lijnen.
- De tekst 'Nieuwtjes' zou ik wat meer laten inspringen.
- En het staat misschien logischer om 'Waar ben ik:' te vervangen door 'Hier ben ik:', omdat je bij 'waar ben ik' een vraagteken zal verwachten en een link waar je op kan klikken.

Er zijn nog wel meer dingen, maar dit is het grootste.

[deactivated010521]

----------

[Gregor]

Ik ben echt onwijs blij met jullie reacties. Een aantal heb ik al doorgevoerd, dan wel ben ik mee bezig. Ook merk ik dat ik nog wel vragen heb over sommige aanpassingen, soms ook vanwege mijn relatieve kennis over css. Bijv., hoe krijg je het voor elkaar dat als iets een link is, deze zodanig aan te passen dat niet alle links aangepast worden (de suggestie van TD__)

- Die titel kan je eventueel zo groot maken als de titel van 'Het ontstaan van de naam...', de kleur mag ook wel hetzelfde.

Logboek template:

Code: Select all

<div class="NewsDateAuthor">
   {if $entry->postdate}
      <div class="NewsLogboekTitle">{$entry->titlelink}</div>
      <div class="LogBoekPostdate">{$entry->postdate|cms_date_format}</div>
   {/if}
</div>

News / Logboek css:

Code: Select all

.NewsDateAuthor {
  position: relative; 
  width: 100%; 
  height: 20px;  
}

.NewsSummaryPostdate, .LogBoekPostdate {
  display: inline;
  float: left;
  font-size: 95%; 
  font-weight: bold;
  position: relative;
  width: 85px;
 }

.LogBoekPostdate {
  top: 3px;
}

/* voor het logboek op de eerste pagina */
.NewsSummaryPlaatsingsdatum {
  padding: 0em 0.5em 0em 0em;
  /* font-size: 95%; 150207 toegevoegd */
  font-weight: bold;
 }

.NewsLogboekTitle a {
  display: inline;
  position: relative;
  float: left;
  padding-right: 15px;
  color: #294B5F; 
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0; 
}

.NewsSummaryLink {
    /* font-size: 95%; 150207 toegevoegd */
    font-weight: bold;
    padding-top: 0.0em;
}

In de algemene css staat voor h4:

Code: Select all

div#content h4 {
   color: #294B5F; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}

Je zou zeggen dat ze beide gelijk weergegeven moeten worden, toch lijkt het niet zo. Dit soort vragen komen o.a. naar boven???

Gregor

[Gregor]

Een tijdje geleden kwam ik een module met de naam 'Script Deploy' tegen ik heb deze nog niet getest maar voor caching en minify binnen CMSMS lijkt deze me ideaal: http://forum.cmsmadesimple.org/index.ph ... 04561.html

@Arnoud: deze heb ik eens geïnstalleerd en kwam er toen achter dat mijn rss-feed niet meer werkte. Na lang zoeken, ook buiten het forum, bleek dat deze module ergens een aantal legen regels na de laatste php-tag heeft staan. Blijkbaar kan de feedmaker daar niet tegen en daarom ook geen feeds. Ik heb niet uitgezocht welke file de uiteindelijke veroorzaker is.

Gregor

[deactivated010521]

----------

[Gregor]

In IE7 staat de imagerotator in de header niet goed

Jos: heb nu kunnen zien wat je bedoelt (zit op een plek met IE7). IE voor de Mac gedownload en daar zie ik het weer niet in. Zucht, browser compatibiliteit.... Heb je een suggestie hoe ik dit kan oplossen? Als ik het in het css aanpas, dan zie ik het vervolgens in FF weer misgaan...

Gregor