skihutinfo website check.

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
wat vinden jullie tot nu van deze website:

http://www.skihutinfo.nl/

wat kan beter? en met uitleg van hoe... ik heb bassis html kennis en beetje css kennis.

ik werk met notepad++

website moet voor meeste gebruikers toegangkelijk zijn, en ik wil meer bezoekers trekken.
 
Hoi djeric,
Het is valid html-strict: mooi!
Het is valid css: mooi!
Van grote beeldschermen t/m kleine tablets (800*600px) zijn de pagina's goed leesbaar. Alleen voor mobieltjes is de site niet optimaal.
Het is cross-brower: Firefox, Chrome, Opera, Safari en IE7 getest en in orde: mooi!
Ook de muziek-speler doet het cross-browser: mooi!
De download-geluiden duren vrij lang voordat ze te horen zijn; dat komt omdat bij deze mp3'tjes geen player op de site zit, en de browsers het afspelen moeten doen via hun ingebouwde plug-in's (voor zover aanwezig).
Het menu werkt goed, en de pagina's zijn prettig snel: mooi!
O ja, er zijn geen javascipt-kunstjes uitgehaald met de tekst of het menu, en de pagina's zijn ook door de Google-bot goed te crawlen en te indexeren.

=======
Nog wat opmerkingen:
  • Om het prettiger leesbaar te maken, zou ik de planken-achtergrond wat donkerder maken en de papier-achtergrond van de tekst juist wat lichter.
  • Ook kan de font-size van de <p>'s met gemak op 1.1em gezet worden, dat is toch al flink groot.
  • De <p>'s kunnen ook wat padding (bv. 10px) krijgen, dan staan de letters niet stuik tegen de rand van de tekstblokjes.
  • Voor mij maakt de gecentreerde tekst het moeilijker te lezen, ik zou gewoon links uitlijnen. Daarbij kan je af en toe in de grotere tekstblokken een <br /> toevoegen om naar een nieuwe regel te gaan en wat luchtigheid in de tekst te krijgen.
Als ik dit toepas, wordt het dit verschil:

skihut-old-nw.png


(Screenshot nieuwe versie op ware grootte 1280*1024px)​
Hiervoor is gebruikt:
Code: 
#inhoud p {
    background: url(images/skihut-papier-nw.jpg");
    color: #330000;
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    padding: 10px;
    text-align: left;
}
=======
Verder wordt op een aantal pagina's een lila letterkleur gebruikt tegen een donkerbruine achtergrond: dat geeft erg weinig contrast en is daardoor slecht leesbaar. Ik zou wat meer contrastkleur voor de tekst gebruiken, bv. geel:

skihut-txtkleur.png
=======
De pagina's kunnen heel erg breed worden bij grote beeldschermen. Je kunt een maximale breedte opgeven en de pagina centreren, zodat de regels bij grote schermen niet veel te lang worden, door toe te voegen:
Code: 
body {
    ...
    max-width: 1280px;
    margin: 0 auto;
    }
Met vriendelijke groet,
CSShunter
_________
PS: De "Tip van de dag: Zie hier hoe je zelf een skihut kan bouwen" kan ik niet plaatsen. Daar zit geen link aan vast, en ik weet niet waar ik kijken moet. :rolleyes:
 
Laatst bewerkt:
csshunter zei:
Hoi djeric,
Het is valid html-strict: mooi!
Het is valid css: mooi!
Van grote beeldschermen t/m kleine tablets (800*600px) zijn de pagina's goed leesbaar. Alleen voor mobieltjes is de site niet optimaal.
Het is cross-brower: Firefox, Chrome, Opera, Safari en IE7 getest en in orde: mooi!
Ook de muziek-speler doet het cross-browser: mooi!
De download-geluiden duren vrij lang voordat ze te horen zijn; dat komt omdat bij deze mp3'tjes geen player op de site zit, en de browsers het afspelen moeten doen via hun ingebouwde plug-in's (voor zover aanwezig).
Het menu werkt goed, en de pagina's zijn prettig snel: mooi!
O ja, er zijn geen javascipt-kunstjes uitgehaald met de tekst of het menu, en de pagina's zijn ook door de Google-bot goed te crawlen en te indexeren.
Klik om te vergroten...

dit klinkt heel erg positief! :thumb: ik ben blij dat ik veel kennis hebt gekregen over html en css. voor de wat moelijkere dingen moet ik me meer in verdiepen. maar ga met de speler nog aan de gang dan.


csshunter zei:
Nog wat opmerkingen:
  • Om het prettiger leesbaar te maken, zou ik de planken-achtergrond wat donkerder maken en de papier-achtergrond van de tekst juist wat lichter.
  • Ook kan de font-size van de <p>'s met gemak op 1.1em gezet worden, dat is toch al flink groot.
  • De <p>'s kunnen ook wat padding (bv. 10px) krijgen, dan staan de letters niet stuik tegen de rand van de tekstblokjes.
  • Voor mij maakt de gecentreerde tekst het moeilijker te lezen, ik zou gewoon links uitlijnen. Daarbij kan je af en toe in de grotere tekstblokken een <br /> toevoegen om naar een nieuwe regel te gaan en wat luchtigheid in de tekst te krijgen.
Als ik dit toepas, wordt het dit verschil:

skihut-old-nw.png


(Screenshot nieuwe versie op ware grootte 1280*1024px)​
Hiervoor is gebruikt:
Code: 
#inhoud p {
    background: url(images/skihut-papier-nw.jpg");
    color: #330000;
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    padding: 10px;
    text-align: left;
}
=======
Verder wordt op een aantal pagina's een lila letterkleur gebruikt tegen een donkerbruine achtergrond: dat geeft erg weinig contrast en is daardoor slecht leesbaar. Ik zou wat meer contrastkleur voor de tekst gebruiken, bv. geel:

skihut-txtkleur.png
=======
De pagina's kunnen heel erg breed worden bij grote beeldschermen. Je kunt een maximale breedte opgeven en de pagina centreren, zodat de regels bij grote schermen niet veel te lang worden, door toe te voegen:
Code: 
body {
    ...
    max-width: 1280px;
    margin: 0 auto;
    }
Met vriendelijke groet,
CSShunter

_________
Klik om te vergroten...
ik begrijp het helemaal, en het kan idd iets overzichtelijker op deze manier, dit pas ik idd ook toe.



PS: De "Tip van de dag: Zie hier hoe je zelf een skihut kan bouwen" kan ik niet plaatsen. Daar zit geen link aan vast, en ik weet niet waar ik kijken moet. :rolleyes:
Klik om te vergroten...

idd moet ik opletten dan de text in de tips wel kloppen. nu lijkt het idd erop dat er een bepaalde link niet werkt. (lossen we op)


bedankt voor de super reactie,

ik had de schade erger verwacht, maar merk op dat me kennis met html en css aardig verbeterd is. :thumb:
 
Laatst bewerkt:
Ja, een heel verschil met een paar jaar terug! :)

  • Hier heb ik een mp3-playertje met flash: jwplayer-for-mp3.htm
  • Als ie ook op flash-loze kastjes afgespeeld moet worden, kan je bij longtailvideo.com de laatste versie JW Player 6 ophalen; die heeft een "dual mode", en werkt ook op html5.
 
csshunter zei:
Ja, een heel verschil met een paar jaar terug! :)

  • Hier heb ik een mp3-playertje met flash: jwplayer-for-mp3.htm
  • Als ie ook op flash-loze kastjes afgespeeld moet worden, kan je bij longtailvideo.com de laatste versie JW Player 6 ophalen; die heeft een "dual mode", en werkt ook op html5.
Klik om te vergroten...



met deze player moet ik nog aan de gang.
maar heb bovenstaande inmiddels opgelost.
heb sommige dingen beetje naar eigen hand weer gezet, maar begrijp heel het gebeuren.
dit vind je ook terug in de bron code.
de aanpassingen van de tips heb ik ook maar ff nagekeken, en daar zaten vaak de woorden bij: "ook hier kun je zien" dit heb ik maar aangepast, want je kan "hier" niks zien. maar wel bv "op deze site vind je" (o.i.d.)

Verder dat de text met een <br /> toegevoegd op sommige plaatsen.
moet dit niet met een <br> beginnen dan?
want de validator geeft deze fout code aan:

Line 67, Column 5: NET-enabling start-tag requires SHORTTAG YES<br />
✉


For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.
Klik om te vergroten...

verder controlleer ik hem nog ff, maar we zijn goed op weg.
 
Verder dat de text met een <br /> toegevoegd op sommige plaatsen.
moet dit niet met een <br> beginnen dan?
Klik om te vergroten...
Ja, dat klopt.
  • Je hebt het Doctype html4.01 gebruikt, en dan mag zo'n eind-slash / er niet bij.
  • Bij een Doctype xhtml1.0 moet de / er juist wel bij.
  • Dat geldt ook voor andere "losse tags" die geen bijbehorende afsluit-tag hebben, zoals <meta ...>, <link ...>, <img ...> en <hr>: in gewone html met alleen > op het eind, in xhtml met />.
  • Het vloeit voort uit het karakter van xhtml, waarbij een voorwaarde is "well-formedness". D.w.z. alle tags moeten een begin en een eind hebben. In xhtml wordt dan bij losse tags het eind in de tag zelf aangegeven, en klopt dat ook.
De html-validator reageert hierop als volgt:
  • Zet je de / er ten onrechte wel bij in html, dan komt de fout "NET-enabling start-tag requires SHORTTAG YES" zoals boven.
  • Zet je de / er ten onrechte niet bij in xhtml, dan komt de fout "end tag for '...' omitted, but OMITTAG NO was specified".
Zou wel iets duidelijker omschreven kunnen worden. ;)

Met vriendelijke groet,
CSShunter
 
csshunter zei:
Zou wel iets duidelijker omschreven kunnen worden. ;)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

idd. hoewel me een raadsel is waarom de css validator wel nederlandse vertaling heeft, maar html validator nog altijd niet nederlands talig is.
het lezen maakt t al moeilijker.

maare met die <br> had ik wel gedacht, maar had ff je tips weg gewerkt, dus deed hem ff vlug maken dus moet m nog aanpassen.

csshunter bedankt! :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan