Aan de slag met responsive grids

Snel en goed aan de slag met responsive websites is mogelijk door gebruik te maken van mach3grids.com. Hierbij wordt de extra ontwikkeltijd voor responsive websites verkort. Mach3Builders heeft op basis van het Twitter Bootstrap framework een groot aantal grids gemaakt waar je direct mee aan de slag kunt.

Stappenplan

Door te werken met de Mach3Grids is het mogelijk om zonder technische kennis responsive websites op te leveren aan jouw klanten. Je wordt niet beperkt in je creatieve vrijheid en bent in staat prachtige responsive websites te ontwikkelen. Het eindresultaat zal hierdoor beter zijn.

Het werkt als volgt:

Stap 1: Bepaal welke boodschap overgebracht moet worden en wat voor type pagina's hiervoor nodig zijn
Stap 2: Bepaal op welke Mach3Grids deze pagina's gebaseerd kunnen worden
Stap 3: Ontwikkel de vormgeving en baseer deze qua indeling en opzet op de Mach3Grids
Stap 4: Lever het ontwerp aan bij Mach3Builders en geef daarbij aan welke Mach3Grids erbij horen

Voordelen

  • Je kan jouw klant al in een vroeg stadium laten zien hoe de website qua opbouw werkt
  • Het UX eindresultaat is beter vooraf te voorspellen, zowel voor mobiel tablet als desktop computer
  • Je hebt geen technische kennis nodig voor het bepalen van responsive eigenschappen
  • Mach3Builders kan op basis van de keuze al in stap 2 een offerte voor je maken
  • Kostenbesparing door tijdbesparing met betrekking tot het ontwikkelen van de responsive elementen
  • Mach3Builders maakt je responsive website volledig beheerbaar met het Mach3CMS

Technische achtergrond

De grids zijn gebaseerd op 12 kolommen. Hierbij is de som van blokken welke horizontaal naast elkaar staan altijd 12. Zo kunnen de kolombreedtes van twee kolommen 6 en 6 zijn, maar ook 4-8, 2-10, 9-3 etc. De kolombreedtes zijn dus relatief.

Er worden vier pagina breedtes onderscheiden in de standaard opbouw. Uiteraard kan hiervan worden afgeweken indien gewenst.

  • 320px - 479px (smartphones staand, extra small)
  • 480px - 767px (smartphones liggend, small)
  • 768px - 1023px (tablets staand, medium)
  • 1024px - 1279 (tablets liggend/kleine computers, large)
  • 1280px  (desktop computers) (extra large)

 

Verder zijn de volgende mogelijkheden beschikbaar voor het responsive maken van de websites:

  • Relatieve kolombreedtes per devicegrootte anders (xs, sm, md, lg)
  • Blokken kunnen uitschakelen per devicegrootte
  • Blokken kunnen tonen per devicegrootte
  • Automatisch schalen van blokken
  • Automatisch schalen van afbeeldingen