Website ontwikkeling

is maatwerk met minstens twee partijen

Websites zijn er in vele soorten en maten en worden met uiteenlopende doelen gebouwd. Het is daarom belangrijk hier vooraf goed bij stil te staan. U wilt niet zomaar een huis, maar moet de wensen in kaart brengen en kijken welk budget er beschikbaar te maken is. Dat is vaak een lastige puzzel waar ik gewoonlijk goed bij kan helpen. Hierbij wat aandachtspunten, in de aanloop naar een oriënterend gesprek:

• Wat is het belangrijkste doel van de site?
• Welke subdoelen zijn er?
• Zelfde vragen voor de doelgroep; is die in kaart te brengen?
• Hoeveel waarde hecht u aan het uiterlijk, de vormgeving, de uitstraling?
• Hoe belangrijk is responsive web design voor uw site?
• Welke informatie heeft u te presenteren?
• Welke informatie wil de bezoeker?
• Hoe is dat in een menustructuur te gieten? Eén menu, twee menu's, met één, twee of drie niveaus?
• Vindt de bezoeker daarmee makkelijk de gewenste informatie?
• Hoeveel waarde hecht u aan goede content, goede teksten, afbeeldingen, media?
• Wat kunt u op dit terrein zelf doen, of wat wilt u uitbesteden?
• Hoeveel waarde hecht u aan interactie met de doelgroep (daadwerkelijke bijdrage aan enige content)?
• Verwacht u dat de doelgroep behoefte heeft aan dergelijke interactie?
• Welke onderdelen (uitbreidingen) moeten er in de site komen?
• Is content in losse pagina's en uitbreidbare oagina-sets (rubrieken) onder te verdelen?
• Is er een passend budget vrij te maken, of zijn er concessies nodig?
• etc.

Op basis van deze en andere informatie kunnen we doorgaans vlot tot een goed plan komen.

Zelf spelen met blokken

Schuif zelf eens met de blokken op deze pagina; gewoon met de muiscursor of vingertop.

Bouwproces

• Algemene content en menu structuur bepalen (inhoud en rangschikking)
• Algemene ontwerpkenmerken bepalen (sfeer en uitstraling, in zogeheten style tiles)
• Content per device type bepalen (blokschema, componenten en modules)
• Paginatypes bepalen (soorten presentatie)
• Basis bouwen voor smartphone (tekst en structuur, lineair)
• Breakpoints voor verschillende schermen bepalen (rangschikking bij verschillende schermbreedtes)
• Basis bouwen voor andere schermen (tekst en structuur)
• Modules en componenten vormgeven (in verschillende paginatypes)
• Totaalbeel kloppend maken in verschillende schermen
• Details afhandelen (vorm en browsercheck)
• Opleveren

Andere workflow

Met responsive webdesign is ook de workflow voor webbouwers flink gewijzigd. We beginnen niet meer op het vaste canvas in Photoshop, maar gaan nu veel meer van de content uit en ontwerpen flexibel in de browser.

Er komt een ruw beeld met ontwerp kenmerken. De content plaatsen we al vroeg in het raamwerk van de site. We geven de verschillende blokken pas later hun definitieve vorm en creëren een kloppend totaalbeeld voor verschillende schermen.

Content first, mobile first,
vormgeven in browser
Deze nieuwe werkwijze is voor mijzelf, mijn partner en voor u als klant wel even wennen. U krijgt dus geen kant-en-klaar ontwerp voorgeschoteld, maar meer een sfeerbeeld waar later de vormgeving aan tegemoetkomt, op alle schermbreedtes.

Beter zoekresultaat

• Responsive sites worden door Google hoger gerankt!
• Als een site geschikt is voor mobiel gebruik, maarkeer Google dat ook in de zoekresultaten (sinds 2015).

Mobiel gaat hard

• Veel sites worden intussen meer bekeken met mobiele schermen dan vanachter desktop computers!
• De meeste webwinkels hebben meer mobiele kopers dan desktop kopers.
• Er zijn meer mobiele telefoons dan wc's op deze aardkloot.

Probeer RWD uit

Op een groot scherm kunt u zelf eenvoudig het effect van reponsive websites bekijken.

• Zorg dat het browservenster níet gemaximaliseerd is.
• Pak en verschuif de rechter zijrand van het venster met de muiscursor.
• Kijk wat er wijzigt in de paginaweergave, in smallere of bredere 'schermen'.
• De blokken verschuiven en veranderen van maat; de content past zich 'responsive' aan op de schermbreedte.

Ingrediënten van RWD

• additief ontwerp
• vloeibare afbeeldingen
• vloeibare video
• HTML5 en CSS3
• media queries