Cookies on this website

This website uses cookies to improve your navigation and technical cookies (info). Browsing this website you accept the cookies usage.

Cookies op deze website

Deze website maakt gebruik van cookies om uw navigatie en website ervaring te verbeteren (info). Door verder te gaan, accepteert u het gebruik van cookies.


 
Foto Hoofdfoto bij artikel "Layout issues aangepakt wat betreft kleine schermen".

Layout issues aangepakt wat betreft kleine schermen


Intussen ben ik verder gegaan met het verbeteren van de website en MultiSite en ik heb de volgende zaken aangepakt:

Op het scherm van de iPhone (of andere telefoon) zag de website er niet altijd even goed uit. Met name het grote lettertype in de header was toch wel een doorn in het oog. Dit heb ik aangepakt, op kleinere schermen zoals dat van een telefoon wordt automatisch een kleiner lettertype gekozen voor de titel van de website. Op grotere schermen zoals dat van een iPad, laptop of desktop wordt de originele grootte weergegeven. Dat ziet er toch al weer beter uit.

Ook heb ik het vakje van de taalkeuze aangepast en ervoor gezorgd dat het geheel minder breed is, zodat het beter op een klein scherm gaat passen.

Daarnaast de links in het hoofdmenu aangepakt, de teksten zo kort mogelijk gehouden, zodat er meer items in de breedte op het scherm passen. Zeker als je de iPhone een kwartslag draait. In deze stand vielen er wat zaken naast het scherm en ik heb geprobeerd om ze weer binnenboord te krijgen. Vooral dat winkelwagentje viel buiten het kader.

Het symbooltje van het winkelwagentje is vervangen door een winkeltas of mand, dat vond ik wat meer passen bij de naam winkelmandje en het is weer eens wat anders. Ineens was ik dat rode bolletje kwijt omdat ik iets teveel had verwijderd in de stylesheet, maar dat was snel weer hersteld.

In sommige gevallen liep de layout niet helemaal lekker op de iPhone in verticale stand, dat verbetert zich wanneer je je telefoon een kwartslag draait zodat je een horizontale weergave hebt, er past dan meer in de breedte op het scherm. Om de tekst mooier en beter op het scherm te krijgen heb ik aan beide kanten de loze ruimte weggehaald, maar dat zorgde ervoor dat de tekst wat teveel tegen de rand van het scherm zat, door een kleine marge in te stellen is dat opgelost en is alle tekst leesbaar.

Het lettertype van veel teksten is ietsje vergroot, zodat alles toch net weer iets beter leesbaar is. Hierdoor moest ik op sommige plaatsen wel wat tekst aanpassen of inkorten, anders paste het niet meer goed.

Verder nog een paar kleine bugjes verholpen in 2 bestanden die door de gewone bezoekers niet gebruikt of bezocht worden, maar die wel gescand worden door hackers en ander gespuis. Deze 2 bestanden zijn er om ze te laten denken dat het een WordPress site is, maar dat is MultiSite dus absoluut niet. Ze zijn bedoeld om dat tuig te misleiden en ze worden dan ook meteen geblocked zodra ze deze 1 van deze 2 bestanden aanroepen, om schade aan MultiSite te voorkomen.

Verder heb ik mijn website laten controleren op hoe toegankelijk deze website is. En wat denk je? deze website scoort best wel goed, is goed toegankelijk, duidelijk te lezen en de navigatie is ook in orde. De kwaliteit van de code is uitstekend. Dus daar ben ik dan weer erg blij mee. Het is nu eigenlijk nog finetunen om de beleving op verschillende schermen in orde te krijgen.

Steeds meer pagina's binnen MultiSite worden geschikt gemaakt voor de meertalige ondersteuning, dat gaat gestaag door zo tussen de bedrijven door. Maar we zijn er nog lang niet, er is best nog wel veel werk te verzetten wat de meertalige ondersteuning betreft, maar we komen er wel, het heeft alleen even tijd nodig. Ik ga ook eens even uitzoeken hoe ik de inhoud van de website kan vertalen, ik zit te denken aan een functie om dit realtime te doen, via AI? Dat zou mooi zijn.

Al met al toch weer het een en ander gedaan en MultiSite wordt weer een beetje beter.


 

Foto's bij dit artikel:

Klik op een foto vor een vergroting.
Foto 1 bij artikel "Layout issues aangepakt wat betreft kleine schermen".

 

Reacties:

Dit artikel heeft helaas (nog) geen reacties.

Schrijf als eerste een reactie:

Plaats een reactie:

Door op de knop "Reactie plaatsen" te drukken, gaat u akkoord met de algemene richtlijnen voor het plaatsen van reacties.
Reacties zullen echter niet direct op deze pagina verschijnen, deze worden eerst beoordeeld door de beheerder.