Share
Vloeiende lay-outs zijn de perfecte manier om onze inhoud onder elke viewportgrootte te plaatsen. Tekst kan stromen als containers groeien en krimpen, afbeeldingen en zelfs video en iframes kunnen ook buigen en squishen. Maar wat als we inhoud hebben die moet niet afmetingen veranderen? Hoe zit het bijvoorbeeld met advertentieblokken die vaak zijn ontworpen met een zeer specifieke dimensionering in gedachten? Vreemd genoeg is dit waar tafellay-outs te hulp komen ...
Ik werd hier onlangs aan herinnerd toen ik Tim Kadlec's Implementing Responsive Design las. Het kwam ook precies op het juiste moment; Ik zat midden in een klantproject dat precies deze aanpak nodig had (en ik was druk bezig het te slachten).
Veel websites zijn afhankelijk van advertentie-inkomsten. Hoe graag je ook wordt gehinderd door webmarketingafbeeldingen, zonder dit zou je geen toegang hebben tot de gratis inhoud die je gewend bent. Tuts +, bijvoorbeeld, is voor een deel afhankelijk van advertentie-inkomsten om het immer groeiende team van schrijvers en personeel te behouden.
Het Interactive Advertising Bureau (iab) is verantwoordelijk voor een enorme hoeveelheid digitale advertenties en werkt er hard aan om normen en richtlijnen voor de hele branche te definiëren. Bekijk hun Richtlijnen voor display-advertenties voor een verwijzing naar de universele advertentieblokformaten die ze aanbevelen:
Vier afbeeldingen met vaste afmetingen. En het is belangrijk dat ze ook op die dimensies blijven; logo's, straplines en disclaimers kunnen allemaal onherkenbaar of onleesbaar worden als ze in een vloeiende lay-out worden gepropt. Bedrijven die voor deze advertenties betalen, doen dit ook op basis van de grootte en positie van de blokken. Een advertentie van 300x250px is mogelijk minder prominent of effectief als deze op een kleiner formaat wordt weergegeven, waardoor het betreffende bedrijf korter wordt.
Advertenties zijn ontworpen voor weergave op een vaste grootte, dus totdat we een betere oplossing hebben voor responsieve advertenties, is het het beste om dat te respecteren.
Laten we snel een generieke vloeistoflay-out bouwen om ons probleem te demonstreren. EEN , met een en een . Alles wat we nodig hebben:
Dan kunnen we het als volgt stylen:
sectie breedte: 90%; marge: 0 auto; opzij breedte: 30%; zweven: links; artikel width: 65%; zweven: rechts; img max-width: 100%;
Met wat toegevoegde kleur, is dit het effect dat je bereikt:
Met onze img max-width: 100% regel hebben we ervoor gezorgd dat onze afbeeldingen vloeiend zijn en nooit uitbreken van hun bovenliggende container. Helaas is onze vloeistof opzij smaller dan de 300px-breedte van de afbeelding, precies wat we niet willen.
Laten we de breedte van de zijkant opzij leggen en het artikel laten buigen. Als een combinatie van vaste en vloeibare, verwijzen we naar dit type lay-out als hybride.
sectie breedte: 90%; marge: 0 auto; opzij width: 300px; zweven: links; artikel width: 65%; zweven: rechts; img max-width: 100%;
Dit werkt op bredere schermen, maar zodra de container te klein wordt, dat wil zeggen: wanneer 300 px meer is dan 35% van de breedte van de container, wordt het artikel eronder geschoven:
We kunnen dit in ons geval oplossen door de opmaak om te draaien; plaatsen opzij in het artikel:
Vervolgens verwijdert u de breedte en de vlotter van het artikel en geeft u uiteindelijk een marge-recht om op te treden als de rugmarge:
sectie breedte: 90%; marge: 0 auto; opzij width: 300px; zweven: links; marge-recht: 5%; artikel img max-width: 100%;
Dit is wat we krijgen:
Dat is perfect! De inhoud van het artikel is vloeiend, terwijl het advertentieblok en de bijbehorende ouders een vaste breedte hebben! Je kunt het terzijde zelfs naar rechts verplaatsen door de vlotter in te wisselen zweven: juist en de goot (zijn marge) ook aan de andere kant plaatsen.
Er doen zich echter problemen voor wanneer de inhoud van het artikel meer verticale ruimte begint in te nemen dan het terzijde. Dit is het resultaat:
Er zijn hacks om dit te voorkomen; we zouden een enorme bodemvulling opzij kunnen zetten, en dan even massief negatief de ondergrens. Dan met een overloop verborgen we verlengen de opoffering kunstmatig, verbergen alles wat eruit springt.
Of we kunnen gebruik maken van positionering en het opzij fixeren in de rechterbovenhoek van het artikel, waardoor het artikel wat opvulling krijgt om er ruimte voor te maken.
Geen van beide is ideaal, elk met zijn eigen unieke problemen.
Wat?! Ik hoor je zeggen ...
Dat is juist. Tafelindelingen (God rust hun ziel) waren eigenlijk best goed in het regelen van hybride lay-outs, dus laten we een blad uit hun boek nemen. Met behulp van CSS kunnen we onze elementen weergeven alsof ze componenten van een tabel zijn. Dit is ook helemaal goed; we gebruiken niet werkelijke tabellen in onze opmaak (dat zou slecht zijn omdat we niet werken met tabelgegevens). We gaan gewoon op tabellen leunen voor weergave, zonder de semantische betekenis te veranderen van ons document.
Terugkomend op onze oorspronkelijke lay-out (waar de zijkant en het artikel naast elkaar lagen) kunnen we de CSS aanpassen om tabelachtige bouwstenen aan te bevelen. Onze bevattende sectie wordt de tabel, het artikel en opzij worden de tabelcellen daarin:
sectie weergave: tabel; breedte: 90%; marge: 0 auto; opzij display: tafel-cel; breedte: 300 px; artikel display: table-cell; img max-width: 100%;
Welke ons geeft:
Hmm, niet helemaal goed. We moeten de verticale uitlijning van onze cellen wijzigen, omdat de afbeelding en tekst hier allebei op dezelfde basislijn zitten.
terzijde display: tafel-cel; vertical-align: top; breedte: 300 px; artikel display: table-cell; vertical-align: top;
Nu, wanneer het artikel of de zijkant verticaal groeit, groeit de andere mee. De indeling is wel afhankelijk van de DOM; welk celelement van de tabel eerst in het document verschijnt, verschijnt ook eerst (links) van onze tabellay-out.
En natuurlijk kunnen we dit allemaal in een mediaquery inpakken, zodat deze lay-out alleen op grotere schermen in beeld komt. Op kleinere schermen zal de zijkant netjes boven op het artikel zitten. Bekijk de demo om te zien hoe dit zich gedraagt.
Het gebruik van CSS-tabelweergave wordt in alle moderne browsers ondersteund, maar werd alleen door Internet Explorer overgenomen met de release van IE8.
Voor eerdere browsers zou het daarom verstandig zijn om voorwaardelijk een fallback-stylesheet op te nemen, waarmee u een alternatieve lay-outoplossing krijgt:
(of je zou IE7 en hieronder kunnen negeren ...)
Zoals Tim ook vermeldt in zijn boek, laden Windows 7-telefoons ook in de ie.css-stijlen die we zojuist hebben ingesteld. Om te voorkomen dat dit gebeurt, moet je de voorwaarden aanpassen:
Dus daar hebben we het - wie had ooit gedacht dat tabelindelingen je ooit zouden kunnen helpen in dit tijdperk van responsief webdesign ?! Toegegeven, dit is niet de perfecte oplossing die je misschien al had gewenst, maar totdat CSS Grid Layout en Flexbox wat meer grip krijgen, is dit een geweldig alternatief.
Accentsconagua