Queries / breekpunten maken op Master Page (Breakpoints)

Om een website goed responsive te krijgen zullen we grote aanpassingen moeten maken aan de layout van de pagina’s.

Er zijn enorm veel verschillende schermformaten in omloop.

Je moet ervoor zorgen dat de website zich op elk formaat goed vertoont.

Hiervoor maak je zometeen breakpoints aan.

De vormgeving en layout pas je dan per breakpunt aan en zo zorg je voor een perfecte layout.

Begin altijd eerst met het maken van aanpassingen op de Master pages.

Ik open de A-Master Page.

Elke website die je opstart met een ‘Fluid Width’ toont boven het document de breakpoint bar.

Op dit moment staat de breedte van de website op pixels.

En is er een minimale grootte van .

Sleep met de schuif totdat de vormgeving in de problemen komt.

Zet de schuif op het uiterst acceptabele moment.

Boven de schuif zie je een +icoon.

Klik eenmaal op dit icoon in de balk en je hebt een breakpoint aangemaakt.

Dit breekpunt staat nu op pixels.

Pas de vormgeving aan voor dit breekpunt gebied.

De huidige menubalk staat vastgezet met Pin op de rechterzijde.

Ik wijzig dit in het vastzetten op de linkerzijde van de pagina.

En ik wijzig de breedte van het menu.

De kaders in de footer pas ik ook aan. Ik verplaats het logo iets meer naar de kantlijn.

en verdeel de drie kolommen over het twaalf-koloms stramien.

De Adobe Muse Badge zet ik op een andere positie neer.

En om te voorkomen dat deze uit beeld verdwijnt zet ik de positie vast aan de rechterzijde van de pagina met Pin.

Klik dan eenmaal in het laatste breekpunt gebied.

Nu je de aanpassingen gemaakt hebt kun je de overgang van de ene naar de andere breakpoint controleren.

Zie je hoe vloeiend de overgang wordt opgebouwd.

Open de Site Properties onder File.

De website heeft als basis een ‘Fluid Width’.

Dit heb je destijds bij het aanmaken van de website al ingesteld bij de Page Properties.

‘Fluid’ betekent dat alle inhoud op de pagina percentueel geschaald wordt.

Als de pagina breder en of smaller wordt.

Daarom zie je nu tussen de breakpoints hoe de pagina zich percentueel prachtig aanpast. Heel vloeiend dus.

Op de website van ‘MarketEagle’ vond ik een mooie illustratie over breakpoints.

Je ziet hier een overzicht van allerlei apparaten en bijbehorende schermformaten.

Natuurlijk maak je niet voor elk schermformaat een breakpoints.

Je bent op zoek naar de meest gebruikte breakpoints.

Alle tussenmaatjes heb je dan als het goed is ook afgedekt.

Hier zie je een overzicht van de belangrijkste breakpoints.

Dat zijn de schermformaten voor mobiel, voor tablet en voor desktop.

De minder belangrijke breakpoints zijn , en .

Stel dat ik nu eens deze breakpoints aanhoud als leidraad. Keer terug naar Adobe Muse.

Om een bestaand breakpoint te verwijderen klik je met de rechtermuisknop ingedrukt op het breakpointgebied.

En kies je uit het contextuele menu voor ‘Delete Breakpoint’.

Maar je kunt ook de instellingen van de breakpoint aanpassen met ‘Breakpoint Properties’.

Want dan behoud ik mijn zojuist gemaakte aanpassingen.

Pixels was een bekend breakpointgebied.

Dus wijzig ik de Breakpoint Width in .

In dit Properties-venster kun je voor een breakpoint gebied nog meer zaken aanpassen die van invloed zijn op de webpagina.

Een toepasbare optie is bijvoorbeeld het wijzigen van het kolomstramien.

Misschien nu nog niet maar als straks de kolommen nog veel smaller worden wellicht wel.

Klik op OK. Het eerstvolgende breakpoint wordt , het tablet-formaat.

Klik met de rechtermuisknop ingedrukt in het breakpoint gebied en kies voor ‘Add Breakpoint’.

Typ bij 'Breakpoint Width' in en klik op OK.

Bekijk opnieuw het overgangs gebied. Alles ziet er op zich, ja, best goed uit.

Dan voeg ik nog een breakpoint-gebied in voor Mobiel en wel .

Nu zijn er wel duidelijke problemen die je moet oplossen.

Zodra de website op een mobiel vertoond wordt dan past sowieso het menu niet meer.

Ik leer je straks hoe je deze vervangt voor een hamburger menu.

Ik richt me nu dus enkel op een oplossing voor het -gebied.

Dat is de staande tablet-versie.

Ik zou het logo kleiner kunnen maken. En boven de menubalk kunnen plaatsen.

En zo meer ruimte creëren voor de menubalk. De eerste en laatste kolomlijn houden veel afstand aan door de marge.

Klik in het breekpunt gebied en activeer de breekpunt Properties.

Ik zet de Margins voor Left en Right op . En voer deze door.

Dan kan ik nu de menubalk onder het logo verplaatsen.

En deze trek ik over de volledige breedte van de pagina tussen de margelijnen.

En dan zorg ik dat Resize nog op Responsive Width komt te staan.

Alle kaders in de footer ga ik ook herverdelen.

Ik probeer er rekening mee te houden dat de kaders voldoende ruimte aan de tekst bieden.

Als het scherm zometeen weer smaller wordt.

Ik zou er ook voor kunnen kiezen om de fontgrootte van de tekst enkel voor dit breekpunt gebied kleiner te maken.

Selecteer het tekstgereedschap. Op dit moment staat de optie 'Format Text across Breakpoints' actief.

Die gebruik je het meest.

Elke wijziging in vormgeving als corpsgrootte, tekenkleur, lettertype etcetera.

Geldt voor alle vormgeving in alle breekpunten voor de gehele website.

Daaronder staat de optie ‘Format Text on Current Breakpoint’.

Die gebruik je alleen in speciale gevallen. Bijvoorbeeld zoals nu.

Dus ik activeer deze optie. Ik zet de corpsgrootte voor de drie tekstblokken op pixels.

En bekijk dan of dit voldoende is om voor dit breekpunt gebied de teksten goed te kunnen laten zien.

Nou, zoals je ziet gaat het beneden net wel goed in de footer.

Maar boven net niet. De menubalk moet nog iets zuiniger worden.

Selecteer dan de tekst in de menubalk. Het beste kun je eerst je selectie-gereedschap pakken.

Een keer aanklikken om de menubalk te selecteren.

Dan net zo lang dubbel klikken totdat je in het control-venster de opmaakmogelijkheden voor teksten ziet.

Ik verklein de corpsgrootte naar pixels. En ik zet de spatiëring op .

En ik kijk opnieuw of dit voldoende is voor het gehele breekpunt gebied. En jawel!

Tussenfoor je webpagina bekijken via File > Preview Site in Browser.

Is altijd aan te raden. Je kunt dan ook de menubalk testen.

En kijken of ook de vormgeving van de knoppen nog steeds mooi functioneren.

Op de verschillend vormgegeven breekpunt gebieden.