De PHPhulp kroeg
Layout mooier maken
Zoals sommigen hier vast al wel weten ben ik zelf een layout in elkaar aan het steken voor mijn site waar ik ondertussen ook aan het werken ben maar ik ben natuurlijk niet de beste designer dus wou ik even vragen wat jullie ondertussen van mijn eerste layout vinden en natuurlijk met jullie tips hoe ik deze mooier kan maken.
http://layout.site11.com/
Gewijzigd op 24/10/2012 20:00:56 door Andy V
alleen die knoppen links die van grijs naar groen overgaan vind ik wat minder. Wordt een beetje te grijzig zo die knoppen. Op zich wel leuk effect maar zo verdwijnt je knop veel in de achtergrond, te veel naar mijn mening
Misschien als je verteld wat je wilt dat je site uitstraald en waar je site over gaat kunnen we daar ons advies nog op aanpassen. Maar het design is verder oké naar mijn mening.
Die knopjes aan de linker kant bevallen mij wel. Misschien dat je die nog een beetje fade kan meegeven?
Want ik vind die overgang een beetje hard gaan. Of het misschien omdraaien, het verloop naar vol vlak laten lopen?
Ik ben helemaal van 0 eraan begonnen dus dan kan ik er alles mee doen wat ik wil, en ondertussen leer ik er best veel uit.
De bovenste knopjes zijn eigenlijk alleen voor als je nog niet ingelogd bent dan krijg je dus alleen de bovenste knopjes te zien als je wel ingelogd bent krijg je alleen het linkermenu te zien.
Ik ben het ermee eens dat sommige knopjes er niet thuishoren, die heb ik er eigenlijk gewoon gezet om een voorbeeld te hebben.
Ik ga misschien ook wel de knopjes aan de linkerkant verwijderen of gewoon in verschillende Menu's steken die je dan kan uit of inklappen.
Het is duidelijk dat je nog aan het begin van een mooie ladder zit. Maar iedereen moet ergens beginnen, zelfs grote schilder maken eerst hark poppetjes.
Ik vertel hieronder gewoon verhalen wat ik onlogisch vind, wat niet hoort en wat gewoon echt niet kan :)
Kleur
Phoef, daar is de website dan. Meteen straalt er zo'n felle kleur naar me toe. Dat hoort niet echt op het web thuis. Waar we in de print sector juist om felle kleuren springen gaat het op het web juist om de wat doffere kleuren.
Ook houden we van natuurlijke kleuren. De kleur die je nu hebt ziet er zo chemisch uit.
Gewoon even snel een kleur pakkend is bijv #44A51E een veel mooiere groen.
Web 1.0
In het algemeen kunnen we de huidige webdesign geschiedenis opdelen in 3 perioden, respectievelijk Web 1.0, 2.0 en 3.0. Web 1.0 is de tijd van het begin van het internet, alles heeft een tabel look en effecten zijn erg overdreven. Web 2.0 is van rond 2010. De effecten zijn minder, code schoner en alles heeft een veel mooiere look. Web 3.0 is nog behoorlijk jong en is juist weer minimalistisch, weinig effecten en alles draait om de content.
Met alle respect, maar jou website heeft een Web 1.0 look. Dat is normaal, een webdesigner gaat vaak dezelfde weg als de webdesign wereld van 1 naar 2 naar 3.
Wat kan je nou doen om naar 2.0 te komen? De eerste stap is al de kleuren. Vervolgens komt er nog de gradients bij. Een gradient van een kleur naar een totaal andere kleur komt nauwelijks voor. We zijn meer van de gradients binnen een kleur, van licht naar donker bijv. En het liefst zo klein mogelijk dat je net denk "zit daar een gradient?".
Ook de ronde hoeken mogen wat minder veel. Er zijn nog wel veel meer punten, eigenlijk zijn alle punten hier een stap in de 2.0 richting.
Typografie
Dan je lettertype. Dat is vreselijk, maar voel je daar niet alleen in 70% is vreselijk en ook deze website heeft dat nog niet door.
Allereerst is het beter en makkelijker om donkere tekst op een lichte achtergrond te lezen. Ik zou dus die zwarte achtergrond weghalen.
Daarnaast moet je veel effecten creëren. Je moet de ogen naar korte stukjes tekst leiden door een opvallende kleur en verschillende contrasten in de vorm van groottes. Ik zeg altijd gekstekend 'een lezer wil niet lezen, hij wil lezen wat hij zou kunnen lezen'.
En ik raad je aan een ander lettertype te kiezen. Verdana, Helvetica, Arial ze zijn allemaal vreselijke lettertypes die je website echt niet mooier maken. Blader eens door http://google.com/webfonts en kies een leuk leesbaar lettertype uit.
Tevens moet je je kopjes beter indelen. H1 is een hoofdtitel en H6 kan je geen titel meer noemen. Een kopje van een artikel op een pagina heeft doorgaans in HTML4 een H3 of H2.
Maak je alinea's wat kleiner, voeg afbeeldingen toe en laat je tekst ademen. Gebruik regellengtes van 40 - 70 tekens lang en maak de regel afstand groter als de font size of regel lengte groter worden.
Code
Nog wat andere code tips:
- Maak je scrollbar over de hele pagina, dat willen mensen veel liever dan een scrollbar in een klein stukje;
- Je laadt nu 2x jQuery in, dat is 1 keer te veel. Ik raad je aan in productie omgeving de minified (.min.js) te laden. Ook raad ik je heel erg aan om een versie op te geven. jQuery is straks helaas niet maar backwards-comptable en sommige plugins werken niet op alle versies;
- Je kan de helft van je divjes verwijderen, die zijn nergens voor nodig;
- Gebruik geen inline style;
- Gebruik geen tabellen;
- Het font element is zeer ouderwets, los dit op met CSS;
- Plaats je script tags vlak boven </body>, dan laad je pagina sneller;
- Gebruik naast de prefixes (-webkit-, -moz-, -o-, -ms-, -khtml-) ook altijd de officiële variant. Haal je code ook eens door http://prefixr.com/ je mist namelijk nog wat prefixes;
- Plaats officiële property altijd na de prefixes.
Tevens als ik mijn browser op volledig scherm zet dan krijg ik links een groot zwart vlak en de website staat helemaal rechts. Dit is op een 27" met een resolutie van 2560 x 1440 en de browser is Firefox. Andere dingen die ik zo op het eerste oog zie zijn inmiddels al genoemd.
Q S op 25/10/2012 16:24:05:
Andy, bij mij klopt het menu aan de bovenkant niet helemaal. De knop Contact staat op een nieuwe regel.
Tevens als ik mijn browser op volledig scherm zet dan krijg ik links een groot zwart vlak en de website staat helemaal rechts. Dit is op een 27" met een resolutie van 2560 x 1440 en de browser is Firefox. Andere dingen die ik zo op het eerste oog zie zijn inmiddels al genoemd.
Tevens als ik mijn browser op volledig scherm zet dan krijg ik links een groot zwart vlak en de website staat helemaal rechts. Dit is op een 27" met een resolutie van 2560 x 1440 en de browser is Firefox. Andere dingen die ik zo op het eerste oog zie zijn inmiddels al genoemd.
Ik denk dat het komt doordat je uitzoomt en inzoomt op de website dan krijg ik dat ook, iemand hier een idee hoe ik dat probleem kan verhelpen?
De kleuren was ik ook nog niet helemaal uit maar ik ga ze wel veranderen als ik een idee erover heb
Toevoeging op 25/10/2012 19:32:18:
als ik mijn overflow weghaal uit de content div dan gaat hij over de footer heen, hoe kan ik er voor zorgen dat de footer daaronder blijft staan?
Code (php)
1
2
3
4
5
2
3
4
5
#footer, .push
{
height: 0px;
clear: both;
}
{
height: 0px;
clear: both;
}
Bij mij blijft de footer dan altijd gewoon onderaan
Albert de Wit op 25/10/2012 19:34:48:
waarom zo enorm breed? als ik deze site op mijn mini laptop wil bekijken, zal er een stukje zijn die niet in mijn scherm terecht komt.
die layout is zo gemaakt dat hij zich aanpast aan de breedte van het scherm..
Maar ik heb net een versie met fixed breedte gemaakt en ik heb ook de kleuren wat aangepast etc kijk maar eens naar Layout 2.. dat zou misschien het op heel grote schermen ook wel eens kunnen oplossen
- Raoul - op 25/10/2012 21:35:53:
Uhhh...
lees me vorige post dan eens..
