Tegels HTML-sjablonen

Schone HTML-sjablonen voor tegels met bewerkbare broncode

Wanneer een ontwikkelaar een HTML-sjabloon voor tegels overneemt, krijgt hij een set bestanden. Hoe prettig de volgende maand verloopt, hangt af van hoe die bestanden zijn samengesteld. Het patroon duikt overal op: een portfolio-index, een productoverzicht of de homepage van een tijdschrift. De onderstaande code bepaalt of het toevoegen van tweehonderd items een klusje voor een middag is of een complete herziening vereist.

Codepatronen die u vaak zult kopiëren

Herhaling is het doel van een tegelindeling en het eerste waar u op moet letten. Een kaart bevat meestal een afbeelding, een titel en een link, en de vorm moet van het eerste tot het laatste item identiek blijven. Open de broncode en let op de volgende punten:

1. Semantische secties rond elke tegelgroep in plaats van één oneindige container.

2. Kopteksten die in volgorde aflopen, met een uitgelicht item boven de items die ze introduceren.

3. Een kaartpatroon dat letterlijk wordt herhaald, met klasse-hooks die behouden blijven voor latere aanpassingen.

4. Links die zijn geplaatst op de elementen waarop een bezoeker daadwerkelijk klikt.

Leesvolgorde blijft behouden, ongeacht de lay-out

Een tegelindeling die goed leesbaar is op een breed scherm, kan op een telefoon in een vreemde volgorde verschijnen, omdat de visuele positie van een paneel en de plaats ervan in de broncode verschillen. Het uitgelichte item linksboven mag niet onder drie kleinere kaarten verschijnen. Een snelle controle van elk herhaald blok:

1. Het item dat een bezoeker als eerste nodig heeft, staat als eerste in de broncode.

2. Ondersteunende tekst blijft gekoppeld aan de afbeelding die het beschrijft.

3. De link sluit het blok af in plaats van boven de inhoud te zweven waarop deze van toepassing is.

Als u dit één keer goed doet binnen één kaart, erft de tweehonderdste kaart deze eigenschap over. Als u het fout doet, krijgt u er een klacht van een klant met een telefoon.

Controleer eerst de links na het exporteren

Nicepage exporteert het project vanuit de desktopapplicatie en de exporthandleiding beschrijft die workflow. Wat op de schijf terechtkomt, is een set bestanden die je overal kunt hosten, dus niets is gebonden aan Nicepage-hosting en de broncode blijft open voor verdere bewerking.

De eerste controle na het exporteren is kort en de moeite waard. Controleer of relatieve links en bestandspaden nog steeds werken zodra de bestanden op een server staan, of de alt-attributen van afbeeldingen de inhoud correct beschrijven en of de koppen de inhoudswijziging in de juiste volgorde hebben overleefd. Herhaalde kaarten verdienen een tweede controle zodra ze gevuld zijn met echt materiaal, want een titel die in de demo in vier woorden past, past zelden in de realiteit in twaalf woorden.

Je beoordeelt hoe gebruiksvriendelijk de broncode zal zijn. Markup die je kunt lezen, bewerken en uitbreiden zonder erover te discussiëren, blijft bruikbaar lang nadat de lay-out op het scherm is veranderd.