tristanjacobs89 / cttr Goto Github PK

Ik zie de rating widget niet?

Line height kan zonder units

Is dit iets anders dan gewoon width: 47%?

• Het contrast is wat laag bij sommige elementen. Sommige stukjes tekst zijn zelfs onleesbaar
• :focus stylen ontbreken op message en op button.

Ik zieems, px en pt op verschillende plekken. Kan je uitleggen waarom je die units precies gebruikt?
pt heb ik zelf nog nooit gebruikt. Waar is dat precies voor?
Je gebruikt ook px voor je mediaqueries. Ik heb eerlijk gezegd geen idee of dat conflicten oplevert met de rest van de units die je gebruikt (in elk geval wel met de ems, maar pt weet ik niet). Kan je dat even uitzoeken/uitleggen?

• Het media-item wordt vaak gebruikt op homepages van bijvoorbeeld een nieuwssite. Dan is het handig als het in z'n geheel klikbaar is. En ja, dat kan ook zonder de HTML aan te passen (-:
• Je hebt nu maar een visuele variant gemaakt van het media-element. Maar er zijn flink wat verschillende manieren te bedenken waarop je dit kunt laten zien. Zie bijvoorbeeld de homepage van The Guardian of de linkerkolom van de Volkskrant. Kijk eens of je net zo'n lijst kan maken waarbij de eerste er anders uit ziet dan de rest.

Er zijn een paar issues met de UX van je form:

• De vormgeving van de focus- en validatie-states is niet duidelijk: het contrast tussen de achtergrond en de kleur van de states is niet hoog genoeg.
• De font-size van de inputs is te klein.
• Button heeft wel een :hover maar geen :focus.

De navigatie is op sommige breakpoints niet helemaal optimaal. Soms is het submenu onbereikbaar. En op een klein scherm neemt het het hele scherm in beslag.

De HTML van het media-item is wel erg veel aangepast. Volgens mij is dat niet echt nodig.

Verder:

• Het media-element wordt vaak gebruikt op homepages van bijvoorbeeld een nieuwssite. Dan is het handig als het in z'n geheel klikbaar is. En ja, dat kan ook zonder de HTML aan te passen (-:
• Je hebt nu maar een visuele variant gemaakt van het media-element. Maar er zijn flink wat verschillende manieren te bedenken waarop je dit kunt laten zien. Zie bijvoorbeeld de homepage van The Guardian of de linkerkolom van de Volkskrant. Kijk eens of je net zo'n lijst kan maken waarbij de eerste er anders uit ziet dan de rest.

Dit probleem is complexer: Het plaatje moet altijd helemaal zichtbaar zijn in elke viewport. Dus maximaal 100vh, en maximaal 100vw. Bovendien moet je ook altijd kunnen zien dat er een onderschrift is. En dit moet werken met een landscape en een portrait plaatje …
En kan je je nog herinneren hoeveel em breed een paragraaf maximaal mag zijn?
En hier is er iets mis met de aangeleverde HTML. Hier moet je dus wel iets aanpassen (-:

Je hebt justify-content: space-between; gebruikt bij de items onder de step indicator. Daardoor lijnen ze niet helemaal lekker uit met de progress bar. Er bestaat een betere value voor justify-content voor deze use case …

Je hebt nogal veel classes toegevoegd. Voor de vormgeveing die je nu hebt is dat echt niet nodig. Probeer het eens zonder.

Stel dat de een van de chatters twee berichten achter elkaat stuurt. Werkt jouw CSS dan nog steeds? Wellicht lukt dit niet zonder de HTML aan te passen.

Het ziet er zo te zien aardig uit. Je bent op de goede weg, maar je moet ook nog echt wel wat doen. Let ook op het volgende:

Kijk eens of je hier een echte site van kan maken. Lukt het je om alle elementen op een logische manier te tonen? Het mag op één pagina, maar ook op meerdere pagina's. Het onderwerp mag je natuurlijk zelf weten.

• De focus- en hover-states zijn niet (overal) vormgegeven. Hierdoor lijkt de pagina nogal onactief als je er doorheen tabt of er over beweegt met je muis. Die states zijn juist superbelangrijk. Je kan een interface er veel duidelijker mee maken. Geef ze dus vorm. Hier kan je ook transities voor gebruiken.
• Let er bij die states ook op dat ze wel zichtbaar zijn, bijvoorbeeld op het formulier: is het wel zichtbaar op de achtergrond?
• Kijk eens of je de techniek uit dit form kunt gebruiken.