14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)
  • Q:

    Bijdrager
    Shmoo

    Feedback website

    Ik heb een website gemaakt dat uiteindelijk een WordPress thema zal worden en wil graag jullie feedback hebben zodat ik weet waar ik op moet letten tijdens het bouwen van het thema.

    Linkje

    Target is IE9 en hoger al heb ik nog niet heel veel getest op oudere browsers omdat de opmaak vrij standaard/simpel is met weinig fratsen. Eén probleem heb ik wel al gespot en dat is de viewport height bug in Safari iOS 7. De achtergrond afb. op de homepage schaalt niet altijd lekker mee met de hoogte van de browser.


    Bijdrager
    computer space

    Maak je fallbackfonts in orde. Als de wwof’s niet werken hoef je niet terug te vallen tot dikke vette arial. Een dunne helvetica neue kan ook als tweede font. Zelfde met iconen. Biedt een plaatjes-alternatief.
    En de navigatie werkt alleen voor de laatste 2 items (blog en contact), de eerste items zitten onder de “Lake Ontario” tekst.


    Bijdrager
    feek

    Op de fotopagina treedt bij een hover (FF) een kleine verplaatsing op van de afbeelding waardoor er witruimte ontstaat tussen de afbeeldingen. Ik merk dat het bij alle afbeeldingen is de een link hebben.


    Bijdrager
    Usain

    Bij photos zou ik een album verwachten zodra ik op bijvoorbeeld toronto zoo heb geklikt. Voor de rest kan ik weinig opmerkingen maken, Ziet er top uit in Safari. Ik zal hem een op mijn Blackberry bekijken.


    Bijdrager
    Shmoo
    computer op 11 november 2014

    Maak je fallbackfonts in orde. Als de wwof’s niet werken hoef je niet terug te vallen tot dikke vette arial. Een dunne helvetica neue kan ook als tweede font. Zelfde met iconen. Biedt een plaatjes-alternatief.
    En de navigatie werkt alleen voor de laatste 2 items (blog en contact), de eerste items zitten onder de “Lake Ontario” tekst.

    De kans dat iemand de font Helvetica Neue op zijn computer heeft staan wanneer @font-face niet werkt is natuurlijk extreem klein maar ik begrijp je punt en ga fallbacks instellen.

    Welke browser gebruik je voor het menu te testen?

    feek op 11 november 2014

    Op de fotopagina treedt bij een hover (FF) een kleine verplaatsing op van de afbeelding waardoor er witruimte ontstaat tussen de afbeeldingen. Ik merk dat het bij alle afbeeldingen is de een link hebben.

    (y) goed punt, zal straks gelijk gaan controleren en fixen.

    Usain op 11 november 2014

    Bij photos zou ik een album verwachten zodra ik op bijvoorbeeld toronto zoo heb geklikt. Voor de rest kan ik weinig opmerkingen maken, Ziet er top uit in Safari. Ik zal hem een op mijn Blackberry bekijken.

    Albums kun je natuurlijk altijd zelf aanmaken naar wens, dat is een kwestie van een hoop afbeeldingen insluiten op een pagina. Ik maak alleen de structuur zodat je kunt zien welke mogelijkheden je hebt met pagina’s qua uitlijnen.


    Bijdrager
    Fingerlicking

    Begin scherm en footer zijn mooi. Rest is echt niet mooi.. Schots en scheef, niets uitdagend. Een developer is niet een designer en vica versa


    Bijdrager
    Shmoo

    Schots en scheef, niets uitdagend.

    Kun je misschien iets meer toelichting geven wat schots en scheef zou zijn?


    Bijdrager
    Fingerlicking

    http://members.ziggo.nl/shmoo/demo/test/about.html

    Rare uitlijning: Title staat in het midden, plaatje links, tekst ergens er tussen, oogt niet rustig, lijkt alsof de afbeelding er zo af kan vallen.

    De foto galerij is weer leuk, al is de hoover out niet mooi, afbeelding lijkt 2 maal te verspringen. Maar ook daar weer die tekst die niet lekker uitlijnt. (en de div row img-promo valt buiten je section div, afbeeldingen vallen allemaal buiten je wrapping section zo te zien).

    Blog: afbeeldingen hebben een verschillende afmeting. Je laat de tekst daar op uitlijnen, maar daardoor staat de ene tekst 200px van links en de ander 350px (bijvoorbeeld).

    Wat je denk ik beter kunt doen, afgaande van de index: maak 2 tekst kolommen die precies onder je afbeelding staan. (zoals about en contact, maar dan uitgelijnd), blog: een standaard afmeting van je afbeelding, of een wrrapping div die altijd, zeg, 300px breed is.

    Hoop dat je er wat mee kan!


    Bijdrager
    Usain


    Bijdrager
    Shmoo

    @usain,

    Klopt, dat is een ‘frustratie’ die heel moeilijk te tackelen is wanneer je mensen in vrijheid content laat toevoegen via een CMS zonder achtergrondkennis.

    De afb. in jouw screenshot wordt bewust iets omlaag geduwd omdat deze een 0.5em (12px) marge aan de bovenkant heeft , dit voorkomt dat wanneer iemand eerst begint te typen in een pagina of blog post en pas na bijv. 15 regels met tekst beslist om een afbeelding toe te voegen dat die afbeelding dan niet koud met-de-bovenkant van de afb. tegen de onderkant van de laatst regel met tekst aan staat maar dat er altijd een beetje extra ruimte is tussen de laatste regel tekst en de afbeelding, zoals diezelfde afbeelding ook een 1.167em (28px) marge aan de rechterkant heeft om te voorkomen dat de tekst rondom de afbeelding niet koud tegen de afbeelding aan komt te staan (links) maar dat er ook ruimte is tussen de afbeelding en de tekst.

    Kijk maar – stel die marge aan de bovenkant van de afb. zou er niet zijn (zoals het officieel zou moeten) dan zou de afb. gelijkmatig worden uitgelijnd met de bovenkant van de tekst-regel-hoogte maar de marge aan de bovenkant duwt hem iets omlaag.

    Het is dus heel moeilijk om vooraf te bepalen hoe iemand zijn content gaat opmaken. Stel iemand zou altijd direct als eerste een nieuwe pagina of blog post beginnen met een afbeelding zoals op de About pagina en pas daarna tekst toevoegen dan is het vrij makkelijk en kun je gewoon zeggen elke eerste afbeelding in de content div krijgt geen marge aan de bovenkant maar de rest van de afbeeldingen wel, helaas kun je er niet zomaar vanuit gaan dat iedereen als eerste begint met een afbeelding en dan pas tekst.

    Pagina’s en blog posts opmaken blijft altijd een beetje passen en meten totdat iemand de juiste workflow heeft gevonden vanaf dat moment gaat het allemaal veel sneller omdat ze in een flow terecht komen waar ze precies weten welke elementen ze wel en niet gaan gebruiken en ook komt er een vergelijkbaar patroon in je opmaak over alle pagina’s genomen.. Dat er bijvoorbeeld 25 verschillende manieren zijn om je content uit te lijnen wilt niet zeggen dat je ze allemaal moet gebruiken, dat zou een grote kermis worden.


    Bijdrager
    Usain

    Ik zit een beetje te spelen met je website Shmoo. Ik merk dat er vaak een koppelteken gebruikt word als een woord niet geheel op 1 regel past in plaats van het gehele woord naar een volgende regel. Dit heet duidelijke te maken met het responsive design wat je toepast. Kan je niet als je width een bepaalde waarde heeft bereikt geen koppeltekens meer gebruiken.


    Bijdrager
    Shmoo

    Dit gedeelte verwijderen uit de CSS voorkomt dat er auto. een koppelteken gebruikt wordt.

    Nadeel is dan wel weer dat je regels soms verdere inspringingen bevatten.

     
    p {
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	-o-hyphens: auto;
    	hyphens: auto;
    	word-wrap: break-word;
    }
     

    Bijdrager
    Usain

    Mmm ja ik zie het, dan ziet er helemaal lomp uit.


    Bijdrager
    Shmoo

    Klopt online ben je heel erg beperkt qua tekstopmaak in vergelijking met wat er allemaal in de print wereld mogelijk is.

    Nu helpt het ook niet om je teksten te controleren op basis van deze ‘Lorem Ipsum’ teksten omdat paragrafen vaak dezelfde content bevatten waardoor je heel erg veel overeenkomsten ziet wat het sowieso al weer lelijker maakt.

    Maar elke site heeft die inkepingen aan het einde van de regels omdat het standaard is dat je teksten links uitlijnt.
    .
    OMT artikel

    .
    Tweakers artikel

    Wat je kunt doen is een justify uitlijnen gebruiken dan wordt de ruimte tussen woorden op een regel zo uitgelijnd dat je links en aan de rechterkant een strakke lijn hebt.
    Over het algemeen is dit een ‘not done’ manier van uitlijnen want het vergroot/verkleint de afstand tussen de woorden op basis van het aantal woorden dat je op die regel hebt. Kijk naar dit voorbeeld, de eerste regel is prachtig en goed leesbaar maar de laatste volle regel heeft extreem veel ruimte tussen de woorden omdat er iets minder woorden op die regel zitten.
    Tweakers heeft jaren lang op deze manier hun artikels uitgelijnd maar die zijn hier sinds een tijdje ook van af gestapt.

    En als laatste mogelijkheid wat je ook kunt doen, is het op desktop links uitgelijnd laten en op mobieltje die Justify gebruiken omdat je daar een compacte en bepekte breedte hebt. Ik denk dat de Justify manier van uitlijnen op een mobieltje en tablet veel minder irritant is dan op een desktop.

14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.