site review
graag jullie mening
link
Gewijzigd op 15/03/2012 16:57:02 door Reshad F
Op internet moet je altijd voor de grootte vlakken wat neutrale en vooral geen felle kleuren gebruiken. Dit wordt vaak als slecht opgevat en ziet er ook niet goed uit.
Ook moet je bij kleuren heel erg proberen natuurlijke kleuren op te zoeken. Je hebt keuren waarvan je denkt dat elke pixel chemisch is, probeer deze te vermijden.
Wat andere design tips:
- http://contrastrebellion.com/ in navigatie, roze stuk, tekst in header
- Alles is in sans-serif, behalve in de titels, dat staat niet goed.
- De navigatie is niet goed uitgelijnd. Plaats het of aan de onderkant van het streepje, of in het midden, of aan de bovenkant, maar niet zoals nu net te veel naar boven.
- Probeer niet zo'n groot stuk in je content leeg te hebben, plaats hier een afbeelding of laat de footer al beginnen.
- Gebruik in iets grotere line-height in de content en ik mis heel erg titels en plaatjes in de content. Nu is het 1 grote lap tekst waar niet door heen te komen is.
- About pagina is niet mooi uitgelijnd
- probeer per project iets meer informatie te geven over wat je hebt gedaan, mening van de klant, enz.
- de homepagina is de pagina waar je mensen moet vertellen wat er te zien is. Een titel als Portfolio, een lap tekst en een paar afbeeldingen helpt daar niet bij.
- plaats de social media buttons in een iets kleinere versie gewoon in de header
De code:
- je gebruikt HTML5, dus haal die XHTML lang attribute er maar uit
- <div id="bovenlijn"> is onnodig, los dit op met CSS: border-top
- ik mis een h2 tag in de header, heb je geen sitenaam?
- <div id="latestwork"><section> waarom vervang je die div niet gewoon helemaal met die section?
- Gebruik een jQuery CDN local fallback om zeker te zijn dat je jQuery laad, ookal ligt de google CDN eruit.
- margin: 0px 0px 0px 0px; kan je korter schrijven als margin: 0px; en als je waarde 0 hebt hoef je geen px te gebruiken en dus schrijf je gewoon margin: 0; is een stuk sneller.
- gebruik geen display: inline; om elementen naast elkaar te zetten, maar gewoon float: left;
- opacity: 100.5; kan niet. Opacity moet een waarde tussen 0 en 1 zijn. Tevens is de -moz- prefix al lang niet meer nodig
- gebruik een goede CSS reset om alles een beetje goed te maken: A killer collection of global css reset styles
- haal je code even door http://prefixr.com/ dan weet je zeker dat je voldoende prefixes hebt.
de margin heb je gelijk in dit was omdat ik de verhoudingen eerst anders had en toen ik dat niet mooi vond heb ik alles even op 0 gezet en had het uiteindelijk niet meer veranderd :)
de opacity 100,5 is ergens fout gegaan met tikken denk ik ( editor foutje ) van de -moz - prefix wist ik het niet en ik zal het even door prefixr halen!
en ook de global reset zal ik even gebruiken. :)
hoe zou ik die bovenlijn met css oplossen ? is dat beter voor de snelheid van de website of alleen omdat dit netter staat?
met het roze vlak zal ik ook iets doen iets met een patroon erin en de kleur wat zachter maken.
ik zal straks even een gil geven wanneer ik alles doorlopen heb.
stay tuned!
Quote:
hoe zou ik die bovenlijn met css oplossen ? is dat beter voor de snelheid van de website of alleen omdat dit netter staat?
Opmaak en semantiek moet je scheiden. HTML = semantiek en CSS = opmaak. Als je zoiets doormiddel van HTML tags gaat oplossen ben je slecht bezig met het scripten. Tevens heb je dan geen juiste semantiek meer, wat al die HTML5 tags op jou website onnodig maakt.
alleen kwa plaatjes en dergelijke weet ik even nog niet wat ik wil en/of waar naar te kijken.
heb je misschien tips voor me?
- de in de pagina van 'home' naar 'about' verspringt de content.
- klopt het dat de titel van de pagina in de webbrowser op alle pagina's hetzelfde is? niet echt SEO vriendelijk volgens mij.
- Roze in de footer komt niet echt tot zijn recht. Gebruik daar een lichtere grijze kleur voor. Bedenk erbij dat footer een soort second-interest is. Niet belangrijk, moet er wel staan en als ik er toch naar kijk duidelijk leesbaar, maar moet er niet uit springen (wat een omschrijving ;-) )
- Updates vindt ik niet echt overzichtelijk en achter elkaar niet echt mooi.
- webformulier is niet echt spamveilig.
- 'wij hebben uw reactie ontvangen en nemen zo snel mogenlijk contact met u op.'
----- Stuur ik dan een reactie of een bericht?
----- mogenlijk = mogelijk
----- misschien erbij zetten 'indien nodig contact met u op.' (niet elke mail moet beantwoord worden volgens mij. Zeker een spam mail niet ;)
- Pagina contact loop het divje waar het apenstaartje in staat niet gelijk met de content. (mozilla firefox) de divjes eindigen ongelijk.
- Die social media buttons onder 'OPEN & CLOSE social media bar'
----- Close werkt niet in firefox
----- harstikke leuk
----- jammer dat de link niet echt opvalt, lijkt meer op een slogan
----- Linkjes werken nog niet
- gebruik geen in line css als:
Code (php)
1
<br class="clear" />
- waarom een lege classe?
Code (php)
1
<li class="">
- probeer je afbeeldingen altijd een alt="hier de afbeelding naam" meer te geven:
Code (php)
1
<img class="at" src="images/at.png">
- plaats je javascript onder de verwijzing naar je css in de head in plaats van in de body, scheelt later zoekwerk.
- CSS body regel 2, in die classe geef je margin 0 mee, dit doe je ook in regel 50 van je css. Dat is dubbelop.
Verder:
- waarom een FAQ in een portfolio?
- Waarom de naam 'works' terwijl het een portfolio is?
- Posted on > 2012-03-15 15:18:49 opmaak template bijna klaar! | Posted on > 2012-03-15 15:15:47 portfolio almost online ! |
------ of nederlands of engels!
- hierboven eigenlijk voor alles, contact en home in de navigatie ok, maar als ik op about klik verwacht ik me toch een lap met engelse tekst, maar ik krijg nederlands. vindt ik persoonlijk niet logisch
- 'Voer een geldig email adres in deze hebben wij nodig om te reageren op uw reactie' -> email adres is aan elkaar en een punt achter de zin ;)
Nou je hebt weer wat dingetjes om over na te denken, succes :)
Gewijzigd op 16/03/2012 00:41:24 door Bas IJzelendoorn
Je kan gradients ook met CSS3 maken, daarvoor hoef je geen afbeelding te gebruiken. Afbeeldingen zijn in dat geval alleen maar meer laadtijd.
Koen V op 16/03/2012 08:14:50:
Nog een punt:
Je kan gradients ook met CSS3 maken, daarvoor hoef je geen afbeelding te gebruiken. Afbeeldingen zijn in dat geval alleen maar meer laadtijd.
Je kan gradients ook met CSS3 maken, daarvoor hoef je geen afbeelding te gebruiken. Afbeeldingen zijn in dat geval alleen maar meer laadtijd.
Als je een goed bestandsformaat gebruikt en je gebruikt een afbeelding van 1 pixel breed kan het geen kwaad. Het voordeel is dat het verloop dan in alle browsers werkt en niet alleen in de browsers die css3 ondersteunen.
Ozzie PHP op 16/03/2012 08:35:29:
Als je een goed bestandsformaat gebruikt en je gebruikt een afbeelding van 1 pixel breed kan het geen kwaad. Het voordeel is dat het verloop dan in alle browsers werkt en niet alleen in de browsers die css3 ondersteunen.
Koen V op 16/03/2012 08:14:50:
Nog een punt:
Je kan gradients ook met CSS3 maken, daarvoor hoef je geen afbeelding te gebruiken. Afbeeldingen zijn in dat geval alleen maar meer laadtijd.
Je kan gradients ook met CSS3 maken, daarvoor hoef je geen afbeelding te gebruiken. Afbeeldingen zijn in dat geval alleen maar meer laadtijd.
Als je een goed bestandsformaat gebruikt en je gebruikt een afbeelding van 1 pixel breed kan het geen kwaad. Het voordeel is dat het verloop dan in alle browsers werkt en niet alleen in de browsers die css3 ondersteunen.
Maar, hij gebruikt geen afbeelding van 1 pixel breed. http://www.reshadfarid.nl/images/background-top.png De afbeelding is 1280 pixels breed, dus dan moet hij dat wel even aanpassen.
En als je een kleinere breedte hebt, gaan alle menu-items niet meer goed staan, namelijk onder elkaar. Ook gaat dan het nieuws onder het menu staan.
Gewijzigd op 16/03/2012 08:49:02 door Koen Vlaswinkel
Ik zou het zeker doen, maar nu ben ik ook weer grote voorstander van CSS3 ;)
Quote:
gebruik geen in line css als:
Code (php)
1
<br class="clear" />
Het kan natuurlijk aan mij liggen, maar dit is geen inline CSS. Er staat hier dat de br tag een class .clear meekrijgt, die vervolgens in CSS gestyled wordt.
Quote:
- plaats je javascript onder de verwijzing naar je css in de head in plaats van in de body, scheelt later zoekwerk.
Ik wil eerder aanmoedigen om het vlak voor </body> te plaatsen. Dat maakt de pagina laadtijd sneller en je hebt nooit problemen met DOM not ready. Ook dan kun je ze alsnog makkelijk vinden.
Die social media klopt nog steeds niet:
- ik krijg hem niet meer dicht
- menu knoppen werken niet meer als het open is
- het is beter de buttons gewoon met een kleine versie in de header te stoppen
waarom ik nog geen css3 ervoor gebruik is omdat het dan niet overal compatible is en als ik het in IE niet te zien krijg bijv. dan krijg ik een roze vlak en dit staat niet goed, zie reactie wouterJ
@bas bedankt voor je feedback ik heb een hele hoop van je opmerkingen toegepast waar ik mee eens was
close werkt wel in firefox maar het plaatje wat ervoor kwam was zo groot dat het de button een beetje blokkeerde. :)
die lege class komt doordat mijn navigation er zo uitziet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
$array = array(1 => 'Home', 2 => 'About', 3 => 'Contact', 4 => 'Portfolio');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = 'active';
}
else
{
$class = '';
}
$menu .= '<li class="'.$class.'"><a href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>
$array = array(1 => 'Home', 2 => 'About', 3 => 'Contact', 4 => 'Portfolio');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = 'active';
}
else
{
$class = '';
}
$menu .= '<li class="'.$class.'"><a href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>
maar op een of ander manier doet de active class het niet omdat de <nav> opmaak eroverheen gaat. als iemand weet hoe ik dit oplos. dan hoor ik dat graag!
de JS heb ik altijd net boven de </body> reden: zie reactie van wouterJ.
verder...
wat bedoel je met :
- 'Voer een geldig email adres in deze hebben wij nodig om te reageren op uw reactie' -> email adres is aan elkaar en een punt achter de zin ;)
kortom ik heb een heleboel veranderd. voor het resultaat:
link
Quote:
waarom ik nog geen css3 ervoor gebruik is omdat het dan niet overal compatible is en als ik het in IE niet te zien krijg bijv. dan krijg ik een roze vlak en dit staat niet goed, zie reactie wouterJ
Ik zeg juist dat je het moet gebruiken. IE heeft een filter en die wordt al gesupport in IE5.5, dus je kan het makkelijk gebruiken. Natuurlijk wel even de juiste properties gebruiken en niet krampachtig vasthouden aan de zogenaamd betere CSS3 properties.
maar dat wist ik niet dat het door IE al ondersteunt werd. maar is css3 ipv de image gebruiken beter alleen vanwege laadtijd?
met een img van circa 6px breed zou het niet uit moeten maken toch?
ik heb overigens wel even met css3 gedaan nu:)
Gewijzigd op 16/03/2012 15:42:02 door Reshad F
en weet iemand hoe ik mijn navigation SEO vriendelijk krijg?
Gewijzigd op 16/03/2012 16:04:09 door Reshad F
Gerhard l op 16/03/2012 16:20:58:
D.m.v mod rewrite
ook als mijn navigation er uitziet zoals dit?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
$array = array(1 => 'Home', 2 => 'About', 3 => 'Contact', 4 => 'Portfolio');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = 'active';
}
else
{
$class = 'inactive';
}
$menu .= '<li><a class="'.$class.'" href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>
$array = array(1 => 'Home', 2 => 'About', 3 => 'Contact', 4 => 'Portfolio');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = 'active';
}
else
{
$class = 'inactive';
}
$menu .= '<li><a class="'.$class.'" href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>