WEEK 04
- Datum: 11-03-2024 tot 16-03-2024
📅 13-03-2024
**De feedback van Justus was dat het menu overbodig is voor de site-map. ** **De feedback van Nazneen: Een mooi en overzichtelijk Site-map. Wat alleen voor mij verwarring is de calendly pagina, het lijkt of deze pagina bij how it works en bij are you a bar hoort, maar ook weer niet omdat er geen pijl ernaar wijst. **
Aanpassing op basis van feedback:
-
Overwogen om "Are you a bar" als sub menu te gebruiken van "Work with us", zodat het voldoende onderscheidend is. Want beide zijn een soort contact formulier voor samenwerkingen.
-
De knop "book a walk" leek direct naar een betaalpagina te leiden. Ik heb een detail pagina toegevoegd , zodat gebruikers alle informatie kunnen vinden die ze nodig hebben.
-
Meertaligheid aangepast. Het leek een mix te zijn van Engelse en Nederlandse termen ('HOME PEGE' zou waarschijnlijk 'HOME PAGE' moeten zijn, en 'DETAIL PAGE' heeft misschien een Nederlandse variant nodig). Zorg voor consistentie in taalgebruik.
TODO:
- Bruikbaarheid: Test of de gebruikersintakeformulieren intuïtief en gebruiksvriendelijk zijn. Zorg ook dat het verschil tussen 'BOOK A WALK' en 'BOOK A WALK At a time' duidelijk is voor de gebruiker.
Voor het PE opbouwen van de navigatie heb ik gekeken naar 3 technieken voor het implementeren van een interactief menu zonder JavaScript. Het gebruik van :checked met een verborgen checkbox, het toepassen van :focus-within voor directe focusmanagement, en het benutten van het :target pseudo-class gekoppeld aan ankerlinks.
1 Gebruik van :checked met een verborgen checkbox
Voordelen:
● Geeft je de mogelijkheid om een "toggle" functie te creëren waarmee gebruikers een menu kunnen openen/sluiten met duidelijke controle over de staat van het menu.
● Verandert de URL niet, waardoor de gebruikerservaring soepel en ononderbroken blijft.
Nadelen
● Beperkte toegankelijkheid: Kan verwarrend zijn voor screenreader-gebruikers tenzij er gebruikt wordt gemaakt van ontworpen met ARIA-labels en juiste focusmanagement.
● Vertrouwt op het manipuleren van verborgen elementen, wat minder intuïtief kan zijn voor het beheer en onderhoud van de code.
● focus is lastiger te implementeren
- Toepassen van :focus-within voor focusmanagement
Voordelen:
● Vereist geen verborgen controls zoals checkboxes, wat de HTML-structuur vereenvoudigt.
● Maakt interactie met het menu mogelijk zodra een onderdeel ervan focus krijgt, wat kan bijdragen aan een intuïtieve navigatie-ervaring.
Nadelen:
● Onbedoelde activatie: Menu's kunnen onbedoeld worden geactiveerd of gedeactiveerd wanneer gebruikers door de pagina tabben, wat tot verwarring kan leiden.
● Beperkte browserondersteuning: Oudere browsers ondersteunen :focus-within mogelijk niet, wat de compatibiliteit beïnvloedt.
● Door het gebruik van ankerlinks kan de tabvolgorde natuurlijker worden gemaakt, wat de toetsenbordnavigatie ten goede komt.
- Benutten van :target pseudo-class
Voordelen:
● Maakt het mogelijk om met eenvoudige CSS menu's te tonen/verbergen op basis van de huidige gefocuste ankerlink.
Nadelen:
● Elk gebruik van de toggle wijzigt de URL, wat kan leiden tot ongewenste gedragingen zoals onbedoeld scrollen en navigatiegeschiedenisproblemen.
● Beperkte functionaliteit: Biedt minder controle over complexe interacties en dynamische inhoudsupdates vergeleken met JavaScript-oplossingen.
In de praktijk is het vaak het beste om een hybride benadering te gebruiken, waarbij je de basisfunctionaliteit biedt met CSS en de gebruikerservaring en toegankelijkheid verbetert met een beetje JavaScript. Dit zorgt voor een robuuste oplossing die werkt voor de meeste gebruikers, ongeacht hun apparaat of browser.
Ik kies voor het :target element voor mijn menu omdat het simpel. Dit maakt mijn website toegankelijker en makkelijker te gebruiken, vooral met het toetsenbord. Ook al zijn er wat nadelen, maar door JavaScript toe te voegen zal de navigatie goed functioneren.
📅 13-03-2024
Ik kies voor de atomic design architectuur in mijn SvelteKit-project omdat het me helpt om mijn interface consistent en modulair te houden. Door componenten op te delen in atomen, moleculen, en organismen, kan ik kleine, herbruikbare stukjes code creëren die makkelijk aan te passen zijn. Dit maakt het niet alleen efficiënter voor mij als ontwikkelaar, maar ook mijn codebase wordt er georganiseerder en onderhoudbaarder van. Als ik bijvoorbeeld een knopstijl wil veranderen, hoef ik dat alleen te doen in de 'atoms' map en het heeft overal in mijn app effect waar die knop wordt gebruikt. Het past perfect bij SvelteKit’s reactiviteit en component-based structuur, waardoor ik snel en effectief rijke, interactieve webapplicaties kan ontwikkelen.
📅 14-03-2024 tot 15-03-2024
Hier is een uitleg van de belangrijkste onderdelen en keuzes in de code:
Deze code zorgt ervoor dat het navigatiemenu responsief en toegankelijk isvoor een webapplicatie. Met de isActive en subMenuActive Booleaanse(false) variabelen controleert het script de zichtbaarheid van het hoofdmenu en submenu, die toggelen via de toggleMenu() en toggleSubMenu() functies.
let isActive = false;
function toggleMenu() {
isActive = !isActive;
}
In de HTML-structuur wordt een hamburgericoon gebruikt om het menu op mobiele apparaten te openen, en een kruisicoon voor het sluiten. Links binnen
tonen menu-items en een submenu dat dynamisch verschijnt gebaseerd op de actieve staat.<a class="hamburger-container" on:click={toggleMenu}>
<div class="hamburger"><span></span></div>
</a>
In deze code maakt ik gebruik van de :target CSS pseudo-klasse, die helpt bij het beheren van het submenu zonder extra JavaScript te schrijven. De :target pseudo-klasse selecteert een element dat overeenkomt met de identificatie (ID) in de URL. Wanneer een gebruiker bijvoorbeeld op een link klikt die verwijst naar #menu2, wordt het element met id="menu2" het doel (target) element.
<a href="#menu2" title="more" on:click={toggleSubMenu}>Meer</a>
<ul id="menu2" class={subMenuActive ? 'active' : 'sub-menu'}>
<!-- Submenu items -->
</ul>
.sub-menu:target {
display: block;
}
Het bouwen van een blog/e-commerce oplossing voor een bedrijf dat cocktailwandelingen aanbiedt en over cocktails schrijft met Sveltekit als frontend-framework, is het integreren van een CMS (Content Management Systeem) dat e-commerce functionaliteiten en een blog ondersteunt, naast realtime e-mailupdates voor klanten, essentieel.
- E-commerce functionaliteiten: Productbeheer, winkelwagentje en integratie van betalingen.
- Blogmogelijkheden: Gemakkelijke contentcreatie, categorisering (bijv. cocktailrecepten, evenementupdates) en SEO-tools.
- API-gedreven: Zorgt voor naadloze integratie met SvelteKit voor het dynamisch ophalen en weergeven van content.
- Populaire Opties:
Sanity.io: Zeer aanpasbaar en biedt realtime contentbeheer. Je kunt zijn e-commerce schema's gebruiken of integreren met Shopify via hun API's voor complexere e-commercebehoeften.
Strapi: Een open-source optie die kan worden aangepast voor e-commerce en bloggen. Het biedt een rijke set plugins, inclusief e-mail voor realtime updates.
Contentful: Bekend om zijn gebruiksgemak en flexibiliteit, waardoor het geschikt is voor het beheren van zowel e-commerce als blogcontent.
SSR (Server-Side Rendering): Benut SvelteKit’s SSR voor SEO-vriendelijke blogposts en productpagina's. E-commerce Functionaliteit
Voor het afhandelen van e-commerce transacties, overweeg het integreren van een derde partij dienst als je CMS niet voorziet in robuuste e-commerce functies:
- Snipcart: Integreert gemakkelijk in elke website, inclusief die aangedreven door SvelteKit. Het biedt een winkelwagentje en afreken systeem dat kan worden verbonden met je CMS voor productbeheer.**
- Stripe: Gebruik Stripe's API voor betalingsverwerking. Omdat je een serverloze functie binnen SvelteKit creëren om afrekenprocessen veilig te hanteren.
Realtime E-mail Updates Om realtime e-mailupdates aan je klanten te bieden: Integreer met een E-mail Service Provider (ESP): Diensten zoals SendGrid, Mailgun, of Mailchimp bieden API's om e-mails programmatisch te versturen. Je kunt e-mails triggeren op basis van specifieke acties, zoals nieuwe blogposts of aankomende evenementen.
SvelteKit Endpoints: Gebruik server-side endpoints in SvelteKit om formulierinzendingen te hanteren (bijv. aanmeldingen voor nieuwsbrieven) en te interageren met de API van je ESP om e-mails te versturen.
Ontwikkeling en Deployment Ontwikkel lokaal met SvelteKit’s ontwikkelingsserver, door te integreren met je CMS en de e-commerce flow te testen.
Deploy op platformen die SvelteKit ondersteunen, zoals Vercel, Netlify, of Cloudflare Pages. Deze platformen bieden wereldwijde CDN, serverloze functies en meer, wat de prestaties en schaalbaarheid van je site verbetert.
Het gebruik van WordPress als een headless CMS in combinatie met WooCommerce is goed voor zowel geavanceerde contentbeheermogelijkheden als e-commerce functionaliteit vereisen. Deze aanpak biedt verschillende voordelen boven andere oplossingen, waardoor het een superieure keuze is voor bepaalde projectbehoeften. Hier is waarom:
Flexibiliteit in Ontwikkeling WordPress en Headless: Door WordPress headless te gebruiken, kunnen ontwikkelaars de rijke content management interface van WordPress benutten terwijl ze de vrijheid hebben om de frontend met elk gewenst technologiestack te bouwen. Dit biedt een ongeëvenaarde flexibiliteit in het ontwerpen van de gebruikerservaring, waardoor je kunt profiteren van moderne frameworks zoals SvelteKit voor snelle, dynamische gebruikersinterfaces die geoptimaliseerd zijn voor zowel desktops als mobiele apparaten.
Krachtige E-commerce met WooCommerce WooCommerce: Als 's werelds populairste e-commerce platform biedt WooCommerce een diepgaande integratie met WordPress, waardoor het een robuuste oplossing is voor het verkopen van producten en diensten online. Het ondersteunt een breed scala aan betalingsgateways, heeft flexibele verzendopties, en een uitgebreid assortiment aan uitbreidingen en plugins voor extra functionaliteiten.
Waarom Andere Opties Minder Geschikt Kunnen Zijn Shopify en Andere E-commerce Platforms: Hoewel Shopify een krachtige en gebruiksvriendelijke e-commerce oplossing is, biedt het niet dezelfde mate van flexibiliteit in contentbeheer als een headless WordPress setup. Shopify is uitstekend voor pure e-commerce projecten, maar als je geavanceerde contentstrategieën en maatwerk blogfunctionaliteiten nodig hebt, kan WordPress een betere keuze zijn.
Andere Headless CMS Opties: Platforms zoals Contentful, Prismic, en Sanity bieden krachtige headless CMS functionaliteiten, maar missen de native e-commerce integraties en uitgebreide plugin ecosystemen die WooCommerce biedt binnen het WordPress universum. Bovendien kan de leercurve voor deze systemen steiler zijn, en de kosten kunnen oplopen bij het schalen van projecten.
Drag-and-Drop Builders: Hoewel drag-and-drop websitebouwers zoals Wix of Squarespace het bouwen van websites vergemakkelijken, bieden ze niet de controle, flexibiliteit, en schaalbaarheid die een headless WordPress oplossing biedt, vooral als het gaat om complexe e-commerce en contentmanagementvereisten.
Conclusie De WordPress headless te gebruiken in combinatie met WooCommerce, zorgt voor contentmanagementsysteem, uitgebreide e-commerce mogelijkheden, en de flexibiliteit om een op maat gemaakte, moderne webervaring te bouwen. Deze combinatie is geschikt voor projecten die een rijke interactie met gebruikers vereisen, geavanceerde contentstrategieën implementeren en een naadloze online winkelervaring willen bieden. Het biedt een solide basis die zowel aan de huidige behoeften voldoet als gemakkelijk kan worden aangepast en uitgebreid naarmate je project groeit en evolueert.
📅 13-03-2024
De volgende Ontwerpkeuzes toegelicht:
Card Cocktailwalk routes: In de vernieuwde mobiele versie van het design voor Cocktailwalk routes, is de navigatie verbeterd door de introductie van een carrousel. Dit stelt gebruikers in staat om met veegbewegingen snel door de verschillende opties te bladeren, zonder dat ze hoeven te scrollen, wat een meer efficiënte gebruikerservaring biedt. De visuele rust is ook verbeterd door de layout te veranderen en de hoeveelheid informatie op elke kaart te minimaliseren.
In plaats van twee knoppen, is er nu één duidelijke 'Boek Nu' knop die niet alleen dient als call-to-action, maar gebruikers ook direct meer informatie geeft zodra ze erop klikken. In de navigatie staat een overzicht van alle routes opgenomen, zodat gebruikers meer gedetailleerde informatie kunnen vinden.
Een carrousel werkt beter voor de gebruiker om meerdere redenen: het maakt optimaal gebruik van beperkte schermruimte op mobiele apparaten, biedt een visuele hint dat er meer content beschikbaar is, en het past bij de natuurlijke gebruikspatronen van swipen die gebruikers gewend zijn van het navigeren op hun touch-apparaten.
Hoe het werkt section: Door de 'Hoe het werkt'-sectie op de homepage te plaatsen, biedt WOGO bezoekers direct duidelijkheid over de service, wat verwarring vermindert en betrokkenheid vergroot. Dit helpt twijfels bij klanten wegnemen en kan daarmee de conversieratio verhogen. Een heldere uitleg verhoogt ook de gebruiksvriendelijkheid en onderstreept de professionaliteit van de site. Het stelt gebruikers in staat snel de gewenste informatie te vinden, waardoor ze minder geneigd zijn de site te verlaten.Als gebruikers direct vinden wat ze zoeken, zijn ze minder snel geneigd de website vroegtijdig te verlaten.