Responsive Template: positiesDe responsive template van Teqa zorgt ervoor dat uw website functioneel is op diverse devices (pc, laptop, iPad, iPhone en smartphones) en correct wordt weergegeven. Dit is onder andere mogelijk door te werken met posities waarbinnen de elementen van uw website worden geplaatst. Alle posities zijn geplaatst in een container. Deze container kunt u zien als een tabel met 12 kolommen. Een positie heeft een toegewezen breedte (= aantal kolommen) binnen de tabel. In de tabel op pagina 3 kunt u zien welke posities in de Teqa template beschikbaar zijn en hoeveel kolommen een positie in beslag neemt.

Binnen een positie kunnen meerdere elementen (blokken) worden opgenomen. Standaard verschijnen de elementen binnen een bepaalde positie onder elkaar, maar het is mogelijk de elementen binnen een positie naast elkaar weer te geven. Hiervoor stellen we de gewenste bootstrap size in. Iedere positie kan, net als de container, gezien worden als een tabel met 12 kolommen. De bootstrap size geeft aan hoeveel kolommen een element binnen de positie in beslag neemt. De bootstrap size setting lijkt op de span setting die u wellicht kent wanneer u een tabel maakt in MS Word. De responsive template code zorgt ervoor dat de kolommen (met hun inhoud) automatisch worden aangepast aan de beschikbare breedte van betreffende device.

Een voorbeeld: in de positie header willen we het logo, een slogan en een mini-slideshow naast elkaar weergeven. De drie genoemde elementen krijgen alledrie als positie 'header' toegewezen. Daarnaast wordt de bootstrap size ingesteld: logo = 3 (geel), slogan = 6 (groen) en mini-slideshow = 3 (blauw).

Op een device met een viewport kleiner dan 768px (bijvoorbeeld op een iPhone of smartphone) zullen de elementen in de header als volgt worden weergegeven:

Per element maar ook per positie is het mogelijk in te stellen of de inhoud van betreffend element of positie wel/niet getoond moet worden op een bepaalde device. In bovenstaand voorbeeld zou ingesteld kunnen worden dat de elementen slogan en mini-slideshow niet worden getoond op een iPhone of smartphone. Resultaat:

Belangrijk om te weten:

een positie mag gebruikt worden, een positie hoeft niet gebruikt worden. M.a.w. U heeft beschikking over alle standaard aanwezige posities, daarbij hoeft u niet alle posities daadwerkelijk te gebruiken. Een positie die in uw site niet wordt gebuikt, verschijnt eenvoudigweg niet. De beschikbare ruimte wordt opgevuld door de positie die onder betreffende positie ligt.

© Teqa Automatisering Pagina 1

Posities kunnen niet overlappen. M.a.w. Een positie kan niet over een erboven of eronder gelegen positie vallen.

Er kan een ruimte boven en/of onder een positie worden ingesteld (=margin). Het is ook mogelijk dat 2 posities naadloos tegen elkaar worden geplaatst. Wanneer er bijvoorbeeld tussen de positie header en de eronder gelegen positie navigation geen ruimte wordt ingesteld, verschijnt de header en het eronder gelegen menu alsof het één geheel is.

Het is binnen beperkte mate mogelijk de plaatsing van een positie aan te passen. Zo kunt u bijvoorbeeld de positie navigation boven de positie header plaatsen. U kunt eveneens de positie logobar boven de positie footer plaatsen i.pv. de standaardweergave onder de footer.

Het is mogelijk custom posities op te nemen binnen de maincontent maar ook binnen een positie. Bijvoorbeeld het tonen van een Facebook Like Button onderin de maincontent van specifieke site pagina's of het plaatsen van een positie followus (social media) binnen de positie footer.

Het gedeelte waarin de maincontent van een site pagina wordt getoond heeft geen positie toewijzing. Dit is een dynamisch blok waarvan de breedte mede wordt bepaald door de aangrenzende posities left en right. Feitelijk zijn de positie left, de maincontent en de positie right één tabelrij met een standaard toegewezen aantal kolommen van respectievelijk 3, 6 en 3.Indien er geen elementen (blokken) worden getoond in bijvoorbeeld positie left, wordt alleen de maincontent en worden de elementen binnen positie right getoond. De maincontent heeft dan een breedte van 9 kolommen (3 van positie left + 6 van maincontent). Worden er zowel in de positie left als in de positie right geen elementen getoond, dan heeft de maincontent een breedte van 12 kolommen (3 van positie left + 6 van maincontent + 3 van positie right).In een tabel uitgewerkt:

1 2 3 4 5 6 7 8 9 10 11 12

Positie left Maincontent Posititie right

Maincontent Posititie right

Positie left Maincontent

Maincontent

Op pagina 3 = 4 wordt tabellen getoond met daarin opgenomen de beschikbare posities van de responsive Teqa webtemplate.

© Teqa Automatisering Pagina 2

Beschikbare positiesDe eerste tabel toont de posities in samenhang met het aantal kolommen dat aan betreffende positie is toegewezen. De responsive template zorgt dat de kolombreedtes automatisch correct worden aangepast voor de verschillende devices zodat de site er altijd goed uit zal zien, ongeacht op welke device de site wordt bekeken.

De tweede tabel toont de plaatsing van de posities voor de kleinste devices (= iPhone en smartphones, zowel in portrait als in landscape). Hierbij geldt dat de container(tabel) slechts 1 kolom bevat i.p.v. de standaard gehanteerde 12 kolommen. Dit heeft tot gevolg dat alle posities de volledige breedte van de tabel (= 1 kolom oftewel 100%) krijgen toegewezen. Alle posities verschijnen dus onder elkaar. Wanneer er binnen een positie meerdere elementen (blokken) zijn opgenomen die d.m.v. bootstrap size settings naast elkaar worden getoond, dan geldt ook voor deze elementen dat ze onder elkaar op volledige breedte worden getoond. M.a.w. de bootstrap size settings wordenvoor de kleinere devices altijd automatisch omgezet naar een size setting va 100%.Bovenstaande is in beeld gebracht in de tabel op pagina 4.

1 2 3 4 5 6 7 8 9 10 11 12

positie: header

positie: navigation positie: search

positie: banner-top

positie: above-content *

positie: left maincontent positie: right

positie: below-content *

positie: banner-bottom

positie: footer

positie: logo-bar

*De posities above-content en below-content krijgen dezelfde breedte als maincontent, zie uitleg dynamische

© Teqa Automatisering Pagina 3

positie: header

positie: navigation

positie: search

positie: banner-top

positie: left

positie: above-content

maincontent

positie: below-content

positie: right

positie: banner-bottom

positie: footer

positie: logo-bar

© Teqa Automatisering Pagina 4