Archief - Feedback persoonlijke site

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Octavian

Legacy Member
Hey,

Ik had graag wat kritiek gekregen over de design van mijn site. Ik heb die met Photoshop gemaakt en vervolgens naar CSS en HTML gecodeerd. Ik ben online al heel lang bezig maar design is nooit mijn prioriteit geweest (meer de programmatie), de laatste tijd heb ik wel mijn niveau wat verbeterd. Mijn vraag is, hoever sta ik nu? Punten? Kritiek? Laat maar komen.

stoomboot

Legacy Member
De marmeren achtergrond straalt eentonigheid uit...
En het vloekt een beetje met de wat meer modernere look van de rest.

Zou de banner wat meer opvullen, want nu is het een lege plek met uwe naam.

De gouden links in de grijze vakjes rechts die bij het hoveren wit worden zijn niet echt leuk. Dat wit is niet zo goed leesbaar. Dribbble-link is ronduit vreselijk.


Home-gedoe vind'k ook maar niks.

De gouden titel onder dat home-gedoe vind'k dan weer wel geslaagd, alsook de overzichtelijkheid ;)

Octavian

Legacy Member
Bedankt voor je reactie,

Marmer is speciaal voor de Romeinse look & feel ;).

Rechts naast de banner zullen wrs status updates komen van twitter (zodra ik begin te twitteren :P).

De witte hovers zijn inderdaad mottig, kheb nu #333 gebruikt. Dribble link vreselijk? Welk browser gebruik je?

"Home-gedoe vind'k ook maar niks." -> De link zelf of het navigatiebalkje? Want er komen nog contact en about links.

Verder moet ik nog een home-link plaatsen op de banner....

adrianhates

Legacy Member
HTML:
<div id="divider"></div>
<div id="header"></div>


really makes no sense, die achtergrond kunt ge ook anders doen door bvb een div direct in uw body te zetten en die die achtergrond te geven.

Uw header is leeg , echt niet logisch. Waarom staat hij er dan?

Code:
<div id="left-ribbon"></div>
<div id="right-ribbon"></div>

zelfde liedje :)

HTML:
 <!-- Start the Loop. -->
                <div class="post">
                    <!-- Display the Title as a link to the Post's permalink. -->
                    <[B]h1>[/B]

Start the loop wilt zeggen dat je in de toekomst meerdere 'posts' gaat tonen. Daarvoor is een H1 niet geschikt. Nen H1 mag imo maar 1 keer op een pagina voorkomen (al is dat nu wel het geval)

HTML:
<div class="subtitle">
                        May 9th, 2010                    </div>

Tekst zet je best niet in een div. Tekst hoort thuis in een paragraaf of een span.

HTML:
<div id="presence">
                <dl id="sidebarlinks">

kan evengoed ook gewoon

HTML:
<dl id="sidebarlinks">

zijn zonder de omvattende div. Ge zou daar nog een div kunnen rondwrappen voor bvb jQuery functionaliteit maar dat zit er hier niet in.

grtzzz

ps: om nu al 'master of the web' in uw logo te zetten moet je lef hebben ;)

Drone

Legacy Member
Een andere benaming voor "Jack of all trades" is "Master of none". ;)

Octavian

Legacy Member
Header heb ik ondertussen al aangepast voor een betere SEO. Je stelt max één keer h1 te gebruiken, staat dat daar een beperking op qua SEO best practices? Maar het klinkt niet gek, ik zal h2 gebruiken voor de post titels.

In de subtitle ging ik een soort kalenderblok inbouwen in die div, maar uiteindelijk niet gedaan. Bedankt om het op te merken alleszins.

Een lege div, is daar iets mis mee? De ribbons hebben geen content vandaar dat ze leeg zijn. Wat is jouw oplossing? Een image element invoeren, makes no sense.

Thanks voor de goeie tips!

woony

Legacy Member
maar 1 h1 per pagina? dat is ook het eerste wat ik daarvan hoor... kun je dit ergens ondersteunen ofzo?

--edit--
na wat nalezen zie ik inderdaad dit vaak verschijnen, ter ondersteuning van de titel van je pagina. Vind het op zich geen zo'n grote fout, maar ja ok :)

adrianhates

Legacy Member
woony zei:
maar 1 h1 per pagina? dat is ook het eerste wat ik daarvan hoor... kun je dit ergens ondersteunen ofzo?

--edit--
na wat nalezen zie ik inderdaad dit vaak verschijnen, ter ondersteuning van de titel van je pagina. Vind het op zich geen zo'n grote fout, maar ja ok :)

Ja een exacte waarom kan ik u echt niet geven ze. Het lijkt gewoon logisch maar is zeker niet verplicht. Op SEO vlak is een h1 samen met title en url zowat het belangrijkste dat je kan/moet optimaliseren. Als je een stuk of 5 h1's op je pagina hebt staan, maak je het moeilijk om goed aan SEO te doen.

In principe moet je altijd je URL , titel en H1 zo goed mogelijk afstemmen op de belangrijkste keywords van je website en dat botst als je i.p.v. 3- 5 keywords in een H1 hebt staan, 3-5 steeds verschillende keywords heb staan in verschillende H1's.

Waarom geen lege divs? Wel in principe mag je geen html gebruiken om je pagina te designen. Daar zijn natuurlijk wel toepassingen in als je een heeel clean design wilt maken waar het niet anders kan, maar hier kan het zeker beter :)

Octavian zei:
Een lege div, is daar iets mis mee? De ribbons hebben geen content vandaar dat ze leeg zijn. Wat is jouw oplossing? Een image element invoeren, makes no sense.

Je doet het nochtans hier wel, wat ook fout is. Je moet je h1 die image als background nemen. Je a zo stijlen dat hij perfect over je logo past en dan in je <a> een span steken die tekst aanduidt en vervolgens die text met text-indent van je scherm weghalen.
HTML:
<h1 class="header">
	<a href="http://www.octavian.be">
		<img src="img/logo.png" alt="octavian // web designer, developer and entrepreneur" />
	</a>
</h1>

Nu is je a in de h1 zelfs helemaal niet klikbaar op de website.. Als je dan vervolgens maar 1 h1 gebruikt moet je die classe nooit aan een h1 hangen. Het is zeer lang geleden( speaking in internet times) dat ik nog een class aan eender welke header heb gegeven om deze te stijlen. Dit doe je gewoon aan de hand van het wrappende element.

bvb:

Code:
.post h2{
   // hier komt stijl
}
(alle h2's in het wrappende element met class "post")

of

Code:
.post > h2{
   // hier komt stijl
}
(enkele het directe h2 child in .post class)
ipv

Code:
h2.post{
   // hier komt stijl
}

Uw telefoon item in je definition list is ook niet zo mooi.

ps: Ik vind trouwens, IMO, dat die ribbons op niets slagen.. Je wilt 3D effect creëren maar doet het geheel fout. Het klopt gewoon niet. Maar dit zal IK altijd zeggen en moet je je niet teveel van aantrekken :p

Octavian

Legacy Member
Hehe, bedankt voor de verdere uitleg.

Ik heb voor de h1 een post van Chris Coyier gebruikt, waarschijnlijk is dit achterhaald zoals je zegt.

Mijn telefoon is echt 'mijn' telefoon, vandaar dat icoontje. Enja, die ribbons vind ik wel een leuk effect, smaken en kleuren... ;)

quiZ

Legacy Member
Pluspunt: Het design is strak.
Minpunt: Te weinig kleur gebruikt en wordt daardoor een beetje saai. Iets meer kleur mag naar mijn mening.

woony

Legacy Member
adrianhates zei:
Als je dan vervolgens maar 1 h1 gebruikt moet je die classe nooit aan een h1 hangen. Het is zeer lang geleden( speaking in internet times) dat ik nog een class aan eender welke header heb gegeven om deze te stijlen. Dit doe je gewoon aan de hand van het wrappende element.

bvb:

Code:
.post h2{
   // hier komt stijl
}
(alle h2's in het wrappende element met class "post")

of

Code:
.post > h2{
   // hier komt stijl
}
(enkele het directe h2 child in .post class)
ipv

Code:
h2.post{
   // hier komt stijl
}

dit artikel Efficiently Rendering CSS | CSS-Tricks
spreekt u een beetje tegen denk ik...

adrianhates

Legacy Member
goh, ik heb nog nooit nagedacht over efficiëntie in css en kga da waarschijnlijk ook ni te veel over nadenken aangezien ik mij wil focussen op andere zaken. Ik doe wat leesbaar is :)IMO is het voor mij vooral leesbaarder en het houdt u html properder.. Het is dus vooral iets van wikken en wegen..

Uiteindelijk ligt het werk om css te interpreteren aan de client side dus nadelen zoals extra CPU time of extra kosten voor bandwith zijn er niet.

Voor mijn part interpreteer ik het artikel eerder als een vrije keuze ( met volgende quote in het achterhoofd )

That Mozilla article I linked to at the top? Literally 10 years old. Fact: computers were way slower 10 years ago. I have a feeling this stuff was more important back then.

dat is zoals 2D gebruiken omdat uw computer geen 3D aankan, wilt ge mee koopt nen nieuwere computer.. Verder , als ge de moeite doet om de comments te lezen zult ge zien dat het meer op een mening lijkt dan op feit.. Alles heeft zijn voor en nadelen.

Eleven

Legacy Member
CSS schrijven is altijd een goede verhouding vinden tussen wat snel/efficiënt is en wat goed leesbaar en onderhoud baar is.

Zoals ook vermeld word in het artikel op CSS tricks, als je heel efficiënt wil zijn voor het renderen geef je gewoon alles een ID, dit heeft dan tot gevolg dat je filesize van je html document weer stukken groter word, wat dan weer tot snelheidsverlies leidt bij het downloaden.
Dit is ongeveer hetzelfde verhaal als het object georiënteerde CSS gedoe, hierdoor krijg je gewoon een shitload aan classes. Twee classes op een element kan nog wel handig zijn, maar daar houd het ook op.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan