Kakel HTML-mallar

Rena HTML-mallar för kakel med redigerbar källkod

När en utvecklare ärver en HTML-mall för kakel får de en uppsättning filer, och hur trevlig nästa månad är beror på hur dessa filer är sammanställda. Mönstret visas överallt: ett portföljindex, ett produktrutnät eller en tidskrifts startsida. Kodningen nedan avgör om det är en eftermiddagsuppgift eller en omskrivning att lägga till tvåhundra poster.

Kodmönster du ofta kommer att kopiera

Upprepning är poängen med en kakellayout och det första du ska inspektera. Ett kort innehåller vanligtvis en bild, en titel och en länk, och dess form bör förbli identisk från den första posten till den sista. Öppna källkoden och leta efter några saker:

1. Semantiska avsnitt runt varje kakelgrupp istället för en oändlig behållare.

2. Rubriker som läggs ner i ordning, med en utvald post ovanför de objekt de introducerar.

3. Ett kortmönster som upprepas ordagrant, med klasskrokar kvar för senare arbete.

4. Länkar skrivna på de element som en besökare faktiskt klickar på.

Läsordningen överlever varje kollaps

En ruta som läses bra på en bredbildsskärm kan visas i en konstig ordning på en telefon, eftersom en panels visuella position och dess plats i källkoden skiljer sig åt. Det utvalda objektet i den övre vänstra positionen bör inte visas under tre mindre kort. En snabb kontroll av alla upprepade block:

1. Det objekt en besökare behöver först kommer först i källkoden.

2. Stödtexten förblir fäst vid bilden den beskriver.

3. Länken stänger blocket istället för att flyta ovanför innehållet den påverkar.

Gör detta rätt när du gör det inuti ett enda kort, och det tvåhundrade ärver det. Gör det fel, och du hör talas om det från en klient som håller i en telefon.

Kontrollera länkarna först efter export

Nicepage exporterar projektet från skrivbordsapplikationen, och exportguiden täcker det arbetsflödet. Det som landar på disken är en uppsättning filer som du kan vara värd för var som helst, så ingenting är knutet till Nicepage-hosting och källkoden förblir öppen för vidare redigering.

Det första passet efter export är kort och värt tiden. Kontrollera att relativa länkar och tillgångssökvägar fortfarande fungerar när filerna väl är på en server, att bildens alt-attribut korrekt beskriver innehållet och att rubrikerna överlevde innehållsbytet i ordning. Upprepade kort förtjänar en andra titt när riktigt material fyller dem, eftersom en titel som passar demon på fyra ord sällan passar verkligheten på tolv.

Det du bedömer är hur lätt källkoden kommer att vara att leva med. Markeringar som du kan läsa, redigera och utöka utan att argumentera med dem förblir användbara långt efter att arrangemanget på skärmen ändras.