Mobile first met een kleurtje

De uitdaging die ik mijzelf stelde in de eerste aflevering van deze nieuwe serie over de vorderingen die ik maak tijdens mijn opleiding tot webontwikkelaar was om een website te bouwen. De serie heet Web development uitdagingen en toen bleek dat het bijbehorende domein nog vrij was, heb ik dat maar snel geregistreerd.

Het resultaat van uitdaging 1 is dan ook te bewonderen op dat nieuwe domein. Dat geeft mij de vrijheid om te oefenen zonder dat ik mijn blog in de weg zit. Neem vooral even een kijkje, ik loop niet weg.

De uitdaging die ik mij hier stelde viel uiteen in een tweetal deeluitdagingen:

1. Ontwerp een pagina die responsive is. Of te wel een pagina die er op elk formaat scherm goed uitziet. Natuurlijk had ik het mezelf makkelijk kunnen maken door uit te gaan van een kant-en-klaar Bootstrap ontwerp maar daarmee zou de uitdaging een stuk minder interessant zijn. Het was er mij juist om te doen om een zelf van de grond af een responsive website te bouwen en zo toe te passen wat ik tijdens mijn opleiding heb geleerd.Gelukkig blijkt responsive design niet heel ingewikkeld. Het geheim zit hem vooral in de grid en de media queries. Het eerste is een matrix waarmee je een scherm onderverdeelt in vlakken. Bij grid systems als Bootstrap zijn dat er meestal 12. Een pagina is dan opgebouwd uit rijen met daarin kolommen. De som van het totale aantal kolommen in een volledige rij bedraagt altijd 12. Ik heb in mijn ontwerp gekozen voor een item van drie kolommen (het menu), een van zes voor de hoofdtekst  waar nu nog een dummytekst staat en waar drie kolommen voor Done/To do.

   Bekijk je de pagina echter met een smartphone dan zijn de elementen gestapeld, of stacked, zoals dat in het Engels heet. Dat doe je door media queries op te nemen in je stylesheet. Een media query ziet er bijvoorbeeld zo uit:

   @media screen and (max-width: 767px){
   	[class*="col-"] {
       width: 100%;
   }
   

   Deze regel zorgt ervoor dat op schermen die maximaal 767 pixels breed zijn (smartphones) alle elementen de klasse “col-” in de naam 100% breed zijn en dus gestapeld worden.

   In de stylesheet en de html pagina heb ik ook van jQuery gebruikt om de pagina schaalbaar te maken,  het menu te verbergen bij kleine schermen om de breedte van het middengedeelte breder te maken als er een geen menu in beeld is. In code ziet dat er als volgt uit:

   <script>
   	$(document).ready(function() {
   		$("#menubutton").click(function() {
   			$("#menubutton").hide();
   			$("#menu").show();
   			$("#content").toggleClass("col-md-9");
   		});
   	});
   </script>

2. Het tweede deel van de uitdaging lag in het grafisch ontwerp van de de site. Zelf heb ik weinig kleurgevoel maar gelukkig is daar Paletton (voorheen Color Scheme Designer). Kleurenlay-outs met 2, 3,  of 4 kleurgroepen of juist varianten van één bepaalde tint, het kan allemaal met een paar klikken. Zelf koos ik via de kleurencirkel voor een ontwerp met 1 hoofdkleur en 2 secundaire kleuren die ik keurig geëxporteerd kreeg naar CSS waarden. Maar het bleek nog een aardige klus om en ander te verwerken in mijn eigen pagina-ontwerp. Eerst had ik ook nog een lichtgroene zijbalk, maar dat vond ik minder mooi. Wat er staat, bevalt me zolang het duurt. Het aanpassen van het kleurenschema hoeft echter – dat heb ik nu wel geleerd – geen heel ingewikkelde zaak te zijn en omdat ik daarbij niet op mijn eigen gevoel voor kleurencombinaties hoef te vertrouwen, heb ik goede hoop dat het resultaat blijft ogen.

Web development uitdaging 2

Tot zover mijn uitwerking van de uitdaging van anderhalve week geleden.  Nu staat er nog dummycontent op de site en werken de links nog niet. Voordat ik aan mijn opleiding begon heb ik ook wat gewinkeld bij Udemy. De uitdaging voor volgende week is om de opdrachten die ik daarvoor gemaakt heb nog eens door te nemen en te verwerken in mijn nieuwe site.

PS: bij nader inzien leek het mij handiger om de verschijningsdagen van Van lezen naar doen en Web development uitdagingen om te draaien. De tweede aflevering van Van lezen naar doen verschijnt dan ook komende vrijdag en de web development uitdagingen blijven op de maandag.