stefan-espant / funda-detail-page Goto Github PK

De verschillende blokken zijn niet met elkaar uitgelijnd waardoor het design heel erg schommelt. Hierdoor oogt het heel onrustig

Verhoog de height van de iframe

Really nice job demoing your project to us @Stefan-Espant.
The quality of the project and the level of preparation was impressive 💫👏

Here is a few notes after I reviewed your repository:

1- You have a good understanding of html semantic and hierarchy. That's visible in your headings and in your lists.
2- You have excellent eye for details. For example writing descriptive documentation, hover states and adding funda logo favicon.
3- Good job with the accessibility descriptions.
4- Really impressive that you made a solution for the color contrast issue.
5- Really good job with the css file 👏 Just make sure if a rule is not needed, it's deleted instead of commented out. (line 779)
6- There is Open kaart inside a div. The Open kaart to me indicates a button that opens the map. Now only the map icon is clickable. Maybe you can expand that to Open kaart as well.
7- I see there are four images for Plattegronden, but in the demo I only see one.
8- Is it necessary to load all the images of the carousel by default? Maybe some of them could have lazy loading?
9- Think about the differences between links and buttons and how users should interact with them. For example: it is a common behaviour to add an underline if a link is hovered and add a colored box around the button's hit box when the button is hovered. In your project, links act like buttons when I hover over them.

Maak een media query voor large screens (70em).

Test of dit hover effect goed werkt, probeer een paar alternatieven. Denk aan 'appeal' en 'exaggeration' uit de disney principles: https://www.creativebloq.com/advice/understand-the-12-principles-of-animation

Meer line-height voor paragrafen. Meestal is 1.5 (150%) line-height voor de meeste lettertypes genoeg.

Je kunt nog iets met margins/padding doen want het staat nu te dicht op elkaar.

De afbeelding binnen de hero section neemt veel ruimte in beslag.

Je zou misschien de afbeelding wat kleiner kunnen maken, waardoor de rest van de gallery rechts in beeld kan.

Zorg voor een property die de titel funda geel maakt zodat deze regel voorkomen wordt:

footer h1, h2, h3, h4, h5, h6, p {
  color: var(--c-default);
}

footer staat nog niet goed voor desktop versie

Bij bijvoorbeeld "Oppervlakten en inhoud" staat een subtitle "gebruiksoppervlakten". Misschien mooier als deze een andere kleur heeft om meer onderscheid te maken.

Op desktop staan de footer content onder elkaar, misschien mooi om deze in meerdere columns te verdelen over de gehele breedte.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/8cafc91b4aecc7a8b2bdacfe754ad90e867044eb/index.html#L36

Als de fill voor alle SVG elementen hetzelfde is kan die in je CSS. Je kunt dan ook gemakkelijk dingen aanpassen vanuit je CSS.

Ik zag een flash of unstyled content bij de afbeeldingen. Het is goed om srcset en sizes op je afbeeldingen te plaatsen, de browser kan dan zelf bepalen welke resolutie het beste past. Ook een goed idee om alvast een grijze achtergrondkleur te gebruiken. Als je dat toepast verwacht de gebruiker daar al iets ook als het nog niet is ingeladen.

Misschien mooi om bijvoorbeeld de woningindeling meer qua tekst onder te verdelen, ipv 1 lap tekst.

Er gaat het eea mis als je de pagina groter/kleiner maakt.

Maak een max-width voor deze section om een vaste breedte mee te geven.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/8cafc91b4aecc7a8b2bdacfe754ad90e867044eb/style/main.css#L796-L801

Bij het focussen van een a tag verspringt de link als er een border ontstaat.
Maak een hidden border om verspringing te voorkomen.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/eed78d128f662552a07d2484e53484784e4bd7be/index.html#L214

Deze kan je beter met de li aangeven.. hoeft niet in tekst

Los deze glitch op doormiddel van margin.

Check of je binnen de keyframes een locatie kan toewijzen hoe die binnenvliegt.
Check of er een mogelijkheid bestaat om een pad te creëren.

Hi,

Ik zag dat je HTML doc op Nederlands staat, wellicht is Engels een betere optie? (:

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/eed78d128f662552a07d2484e53484784e4bd7be/index.html#L2

Hoii,

Ik zag dat je gebruikt hebt in de HTML, wellicht zou je het element kunnen stylen in CSS?

Wanneer je over het icoontje van de map hovert is de animatie in mijn ogen te schokkerig. het zou wat smoother kunnen.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/eed78d128f662552a07d2484e53484784e4bd7be/style/main.css#L8-L36

Kijk of ik een functie kan maken die het kleurcontrast kan vergroten. Het geel op wit is nu 2:1.
Om aan WCAG AAA te is minimaal 7:1 vereist.

Kijk of je een flew-wrap verticaal kan proberen.

Op klein scherm is de kaart een beetje ingedrukt. Elementen mogen ruimte innemen.

scrollbar images is tekort bij desktop versie

De kopjes mogen wat verder af van de blokken erboven, zowel binnen het kader als erbuiten. Het is nu een beetje onduidelijk welk kopje waarbij hoort.

Schakel de class hero-impression uit om overlapping te voorkomen.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/eed78d128f662552a07d2484e53484784e4bd7be/index.html#L79-L105

https://jakearchibald.github.io/svgomg/

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/eed78d128f662552a07d2484e53484784e4bd7be/style/main.css#L198

De afbeeldingen van de carrousel vullen niet het volledige scherm (bij de mobiele versie) door de width die bij .images staat.

https://github.com/Stefan-Espant/the-startup-responsive-interactieve-website/blob/8cafc91b4aecc7a8b2bdacfe754ad90e867044eb/index.html#L172-L199

Met het ID kan je voor screenreader gebruikers interne navigatie op #id doen. De headings helpt ze de pagina te navigeren.

Afbeeldingen van hoe het huis er van binnen uitziet zijn best klein. Als koper wil je dat graag ook goed kunnen.

Er is wat weinig ruimte om de tekst heen op mobiel, dit leest niet zo lekker.