Responsive Web Design (RWD) maakt gebruik van de viewport-metatag die de browser aanwijzingen geeft om pagina-afmetingen en schaling te regelen.
Een website die is ontworpen met RWD maakt gebruik van op vloeistof gebaseerde rasters met Bootstrap, responsieve afbeeldingen die worden geschaald volgens de browsergrootte, door de eigenschap max-width in te stellen op 100% en CSS3-mediaquery’s voor de paginalay-out.
De tekstgrootte is ingesteld op een viewport-breedte (vw) om een responsieve lay-out te krijgen.
Hallo wereld
met “font-size:10vw” erin ingesloten als stijl.
Zo past de tekst zich aan het browservenster aan.
Mediaquery’s worden ook gebruikt in responsief webontwerp, waarmee u verschillende stijlen voor de pagina-elementen kunt gebruiken op basis van de breedte van het browservenster.
@mediascherm en (max. breedte: 800px)
.links,.hoofd,.rechts
breedte: 100%; /* De breedte is 100%, wanneer de viewport 800px of kleiner is */
Bootstrap is een gratis front-end framework voor HTML en CSS.
Bootstrap biedt sjablonen voor formulieren, knoppen, tabellen, navigatie, modale dialoogvensters, afbeeldingscarrousels en JavaScript-plug-ins.
Bootstrap biedt flexibiliteit voor gebruiksgemak, responsieve functies, Mobile-First-benadering en browsercompatibele functies.
Trends in responsive webdesign –
Illustratie –
De illustratie is een visuele weergave van tekst, concept of een proces.
Illustraties kunnen van verschillende typen zijn, in de context van Digital Marketing zijn dit infographics. Infographics zijn de visuele weergave van informatie, data, die informatie snel kan presenteren.
brutalisme –
Brutalistisch webdesign hanteert een onconventionele benadering voor het ontwerpen van websites; het tart het traditionele webdesign.
Grafisch ontwerp beïnvloedt dergelijke websites, dergelijke websites hebben geen kop-, voetteksten of menu’s.
Dergelijke websites hebben opzettelijk ongepolijste webpagina’s ontworpen met een “ruwe” visuele esthetiek, wat de gebruikers zou storen.
Een brutalistische website gebruikt basislettertypen, grote afbeeldingen, met de hand gecodeerde HTML en een ongebruikelijk scrolleffect, met een muisaanwijzer.
Door een onconventionele benadering van webdesign te gebruiken, openen ontwikkelaars mogelijkheden voor unieke gebruikerservaringen om de aandacht van de gebruiker te trekken.
De code van de website is grof en ongepolijst, het hoofdgedeelte van de website heeft een eenvoudige inline-styling en een eenvoudige opmaak.
Het is een dramatisch verschil met wat u normaal gesproken op de meeste moderne websites zou zien.
typografie –
Typografie is een kunst die wordt toegepast op stijl, rangschikking en uiterlijk van de letters, cijfers en symbolen, door het juiste lettertype te gebruiken.
Het is een visuele weergave van het geschreven woord. Het gekozen lettertype en hoe je het laat werken met je verschillende HTML-elementen in het lay-outthema zal een groot verschil maken.
Typografie gebruik –
Het gebruik van consistente lettertypen verbetert het uiterlijk van de website en het algehele webdesign.
De juiste plaatsing van woorden en letters komt de leesbaarheid van de website ten goede.
De styling van HTML-elementen kan worden gedaan met behulp van de klassen van het Bootstrap-framework.
Afgeronde profielfoto’s –
Ronde profielfoto zorgt voor een unieke nadruk tussen dozen.
Gezichten kunnen correct worden bekeken in een cirkelvormige afbeelding. Ronde profielfoto’s benadrukken gezichten meer dan vierkante; ze helpen gebruikers profielnamen te onderscheiden van de inhoud.
Kleurrijke gebruikersinterfaces –
Tip 1. Leer de 60-30-10 regel –
De 60-30-10-regel komt uit het interieurontwerp. De dominante tint moet 60% zijn. De secundaire kleur moet 30% zijn en 10% maakt de accenten.
Tip 2. Contrast is een vriend –
Door het gebruik van contrasterende kleuren valt het individuele UI-element op.
Dergelijke elementen met dezelfde kleurschakeringen trekken minder snel de aandacht. Contrasterende kleuren zijn aangenaam voor onze ogen omdat ze de visuele elementen geleidelijk kunnen waarnemen. Door de kleuren in de juiste verhouding te mengen, ziet de gebruikersinterface er elegant uit.
Tip 3. Streef naar kleurharmonie –
De aantrekkelijkheid en de keuze van kleuren zorgen voor harmonie.
De website moet kleurharmonie hebben om een goede eerste indruk te krijgen.
Tip 4. Steel ideeën uit de natuur –
Natuurlijke kleurencombinaties zijn altijd bijna perfect.
Seizoenen van de natuur zorgen voor een goede kleurencombinatie; zo’n kleurencombinatie levert een goed ontwerp op.