Mozaïek HTML-sjablonen

Responsieve mozaïek-HTML-sjablonen

Een mozaïek-HTML-sjabloon wordt geleverd als bestanden die u in een editor kunt openen: een pagina, een stylesheet en afbeeldingen die al in secties van verschillende breedtes zijn geplaatst. De demo-screenshot toont één specifieke indeling van die tegels. Alles wat u daarna doet, gebeurt in de code erachter; het is daarom de moeite waard de broncode al vóór het voorbeeld te bekijken.

Het meeste werk blijft beperkt tot de inhoud. Foto's worden vervangen, bijschriften worden herschreven en een kaart wordt gedupliceerd zodra de galerij groter wordt dan de demo.

Markup achter ongelijke afbeeldingsblokken

Tegelcomposities worden op heel verschillende manieren opgebouwd, en dat verschil wordt zichtbaar zodra u nog een item toevoegt. Een raster dat bijeengehouden wordt door kolom- en rij-overspanningen blijft werken wanneer een kaart wordt gekopieerd. Een lay-out die met vaste offsets is vastgezet, vraagt daarentegen elke keer om handmatige correcties.

Secties zoals deze bepalen meestal het merendeel van een mozaïekpagina:

• een brede afbeeldingstegel met een korte titel eroverheen
• een kaart die zich herhaalt in een galerij of categorie-overzicht
• een teksttegel voor een dienst, een notitie of een citaat
• een call-to-action-tegel die het visuele cluster afsluit

Geen enkel sjabloon levert ze standaard allemaal, dus het helpt om de demo te openen, te tellen wat echt herbruikbaar is en de rest te negeren.

Broncodevolgorde op smalle schermen

Een telefoon toont de compositie in een enkele kolom, en die kolom volgt de volgorde van uw bestand. Een tegel in de rechterbovenhoek op een laptop kan op een telefoon op de vierde plaats belanden, terwijl deze nog steeds het belangrijkste project bevat.

Er is een snelle manier om dit te controleren. Schakel de stijlen in de browser uit en lees de pagina als platte tekst. Wat u dan ziet, komt dicht in de buurt van de volgorde waarin een bezoeker met de duim scrollt. Staat iets belangrijks daarin te ver naar onderen, verplaats de sectie dan binnen de HTML. Een extra media query zou het alleen maar verbergen.

Voorbeeldcode aanpassen zonder tegels te breken

Beschouw demo-inhoud als reserveonderdelen. Kopieer een tegel die zich al precies zo gedraagt als nodig is, plak deze op de plek waar de galerij verderloopt en vervang de afbeelding en tekst daarbinnen. Behoud de klassenamen zoals de auteur ze heeft gekozen; halverwege het project van die conventie afwijken kost meer moeite dan deze simpelweg te volgen.

Maak het browservenster vervolgens smaller totdat het mozaïek inklapt tot een enkele kolom, en kijk welk project een bezoeker als eerste tegenkomt. Als dat het project is dat u aan een klant zou laten zien, is het sjabloon klaar voor uw content.