Design Vraagje

[Maximvdw]

Hallo,
Ik ben bezig met een site te maken voor een programma van mij.
Het is de eerste keer dat ik een site maak en ik ben er lang met bezig geweest.
www.shutti.co.nr
Nu , ik ben niet zo goed in het uitpluizen of een interface van een site professioneel is.
Tips zijn altijd welkom
Het is wel nog niet af, dus sommige links zijn nog niet volledig.

Vriendelijke groeten,
Maxim Van de Wynckel (Shutti Developer)

EDIT: Heeft er iemand een widescreen, want volgens mij is er rechts een kleurverschil ( maar mijn scherm is te klein :-|)

 

[Solaris]

Hi!
Ja, er is kleurverschil. Als je een achtergrond plaatje gebruikt zou je hem breder moeten maken?

 

[XLThunder]

Ik vind hem wel mooi!
Alleen vind ik dit iets minder:

Beetje wazig. Ik houd daar niet zo van.

 

[lord4163]

@XLThunder

Hoezo wazig?

Ik vind het erg mooi gemaakt misschien buttons tikkeltje groter? (rechtsboven)

 

[Maximvdw]

Danku voor de reeds gegeven tips.
Ik zal dat wazig houden maar iets lichter
Die zijkant zal ik is moeten nakijken..
De buttons ging ik ook van kleur verranderen.. maar ik denk niet dat ik ze veel groter ga maken

 

[csshunter]

Hoi Maxim,
Heb je 'm al eens bekeken op een resolutie van 1024*768px (die nog vrij veel mensen gebruiken)?

Shut! Het logo onderop valt half buiten beeld (en er is geen horizontale scrollbalk, dus het is permanent).
Dit is te verhelpen met:

.bot-bg {
    ...
    background:url(images/Background/bg-bottom.png) repeat-x right bottom;
    ...
    }

Daarna zal je even naar de andere backgrounds moeten kijken om die synchroon te laten lopen en geen gaatjes te laten vallen.

Met vriendelijke groet,
CSShunter

 

[Maximvdw]

raar,.. bij mij gebeurt dit niet.. mischien niet compatibel met firefox? Zou ik dat bij Adobe Dreamweaver kunnen testen met die compatibility check of zoiets?

 

[csshunter]

bij mij gebeurt dit niet ... misschien niet compatibel met firefox?

Nop, dit gebeurt bij alle browsers die op een resolutie van 1024*768px staan.
Waarschijnlijk gebruik jij een 1280*1024px beeldscherm, en dan zie je het niet.
Wel als je via de bureaublad-rechterklik de Eigenschappen > tabblad Instellingen > Beeldschermresolutie op 1024*768px zet.

De doodeenvoudige reden is dat de afbeelding Background/bg-bottom.png een formaat van 1246*459px heeft.
Deze breedte van 1246px kan nooit op een scherm van 1024pixels (waar nog ca. 20px van af gaat voor de rechter scrollbar). Ook niet als ie gecentreerd staat: dan valt er links en rechts een strook van (1246-1024-17scrollbarbreedte)/2 = 103px af.
En dat klopt aardig met de werkelijkheid:

Met vriendelijke groet,
CSShunter

 

[Maximvdw]

Logo Shutti

Ik heb de backgroundimage rechts uitgelijnt (Danku voor tip )
En nu is het beter want ook is hierdoor dat kleurverschil weg.

Maar kan je ook zeggen dat het ergens moet stoppen met uitlijnen?
Ik bedoel,.. Als je je scherm zou verkleinen. dan staat dat logo bijna over de tekst en onder de Navigatiebalk. Kan je zeggen dat het tot bijvoorbeeld 500px naast IETS stopt?

Sorry voor zoveel vragen,.. maar het is de eerste keer dat ik een site maak.

Met vriendelijke groeten,
Maxim

 

[Maximvdw]

EDIT: Ik heb het terug gecentreerd.. het was echt catastrofaal lelijk :0
Ik zal mischien het logo uit mijn background halen en als image maken die verdwijnt als X>500px

 

[csshunter]

...terug gecentreerd.. het was echt catastrofaal lelijk

En als je dit doet:

<h2>Recent news</h2>
<ul class="items-list" id="bgDown">...

met:

#bgDown {
    padding-bottom: 75px;
    }

Dan hangt het logo altijd onderaan de items, en kan er nooit catastrofaal doorheen komen te rammelen.

Met vriendelijke groet,
CSShunter

 

[Maximvdw]

Ok ik heb al jullie tips toegepast. Ik vond mijn logo 1) te klein en te donker. dus heb ik het wit met donkere schijn. Laat weten wat jullie er van vinden
Ook heb ik het logo rechtvanonder weggehaald en het kleurverschil hersteld (gradient in background , was vergeten weg te halen)
Dank voor alles

 

[lord4163]

Nog hele kleine opmerkingen, voor de rest ziet het er heel erg mooi uit. Bij Downloads kan je de twee knoppen More Info en Downloads misschien wat ruimte er tussen zetten, ze staan nu bijna in elkaar.

We have archived the news of the old shutti site to this site.

Die nog effe met een hoofdletter ?

 

[Maximvdw]

Dankje zal er rekening mee houden. Heb dankzij jou ook nog een fout ontdekt bij de buttons. Deze verranderen niet van kleur wanneer je er met de muis overgaat.
Hartelijk bedankt!

 

[csshunter]

Hoi Maxim,
Wat me nog opvalt:

Contrast
De teksten bovenaan elke pagina zijn slecht te lezen (zeker voor mensen boven de 50), door het weinige contrast tussen het lichtblauw en het wit van de tekst. Dat voldoet op geen stukken na aan de eisen voor toegankelijkheid: de contrast-verhouding is veel te klein.

Oplossing: de gradiënt bovenaan wat donkerder laten beginnen.

Lettergrootte
Tegelijkertijd wordt de gebruiksvriendelijkheid / leesbaarheid / toegankelijkheid ernstig beknot door het gebruikte mini-formaat van de letters: font-size: 0.75em. Om niet te hoeven turen, moet de bezoeker de lettergrootte in IE instellen op "Extra groot" (voor wie weet hoe dat moet!), wat meteen het maximum is en niet zo "Extra groot". Slechtzienden die meer nodig hebben, moeten dan hun toevlucht zoeken in het inzoomen van de hele pagina (voor wie weet hoe dat moet!). Maar behalve het optreden van een hinderlijke link-rechts scrollbar breekt dan de layout...

Oplossing: lettergrootte op minstens .85em instellen.

Line-height
Deze staat heel erg krap, zelfs onder de 100%! (0.9375em = 93,75% van de standaard regelafstand). Meestal wordt juist de regelafstand wat groter gezet dan 100%, om makkelijker te kunnen lezen.
Oplossing: line-height op 1.1em zetten.

html
O ja, de homepage valideert niet, omdat er twee scripts tussen de </head> en de <body> zitten: ze moeten òf in de <head>, òf in de <body>.

Logo
Een logo is het merk, en moet als het ware ingebrand worden op het netvlies van de bezoeker. - Het huidige logo is erg zwak en zeker niet beeldbepalend: door het weinige contrast eigenlijk nauwelijks opvallend.
Oplossing: ik zou het logo pittig contrast-rijker maken, en er ook wat kleur in doen, zoals de logo's op de download-pagina.
Want die zien er heel fris en fruitig uit!

Met vriendelijke groet,
CSShunter

 

[Maximvdw]

Ben bezig met de gradient donker te maken.
(nog niet af) De buttons op de downlaod page blinken nu als je er met je muis overgaat. maar ze moeten nog wel uit elkaar gezet worden.. en hier zit ik met een probleem want spatie helpt niet echt..
Dat van de regelastand zal ook goed worden. Maar van die html valideeren snap ik niet zoveel? Wat doet dat, en waar is het voor nodig?

*EDIT* Ben bij je handtekening gaan zien "html-validator, vóórdat je wanhopig aan de css gaat sleutelen" maar ook daar vind ik geen informatie die simpel uitlegt wat het doet

 

[csshunter]

Hoi Maximvdw,
Voor de afstand tussen de buttons kan je in de css toevoegen:

.button span { margin-left: 10px; }
.button span span { margin-left: 0; }

Simpele uitleg van wat de html-validator doet:

• Een webpagina is opgebouwd met html, en de codes moeten voldoen aan een aantal standaarden (die zitten in de html-specificatie, een behoorlijke set van voorschriften).
• Browsers moeten de html ook volgens die standaarden interpreteren.
• Anders krijg je nooit een pagina op scherm, die er ook nog in alle browsers hetzelfde uitziet.
• Als een pagina fouten in de html-code heeft, gaat de browser dat proberen te herstellen.
• Maar (1) de foutafhandeling kan in verschillende browsers verschillende resultaten geven, en (2) lang niet alle fouten zijn door de browser corrigeerbaar.
• Een pagina mag dus geen html-fouten hebben.
• Hoe weet je dat? Testen! En daarvoor is precies de html-validator: die test of het geldige (valid) html is.
• Als niet, dan slaat de validator alarm, en geeft aan waar de fouten zitten.

Voor de css-validator geldt: van hetzelfde laken een pak!

Met vriendelijke groet,
CSShunter

 

[Maximvdw]

Zoals al reeds gezegt van dat inzoomen dat er een donkere balk (Achtergrond Site) komt. Maar weet iemand hoe ik kan zorgen dat wanneer je inzoomt hij gewoon de rechtse kant doorvoegd? Dit gebeurt al als je bv. een groter scherm hebt. Maar hij ziet het belijkbaar niet wanneer je inzoomt.

 

[Maximvdw]

Dankje voor de tip over de knoppen ! het werkt Ik ga nog een paar dingen verranderen en dan kan ik de vraag sluiten

 

[csshunter]

Analyse:
Omdat je no-repeat hebt staan in de .top-bg en de .bot-bg, en deze 1246px breed zijn, houden ze aan de rechterkant op als het beeldscherm breder is dan 1246px.
Dan komt daar de achtergrondkleur te staan die in de body is gezet: donkerblauw.

Conclusie:
Het no-repeat moet er uit.

Strategie:
In beide classes de no-repeat vervangen door: repeat-x.
Dan herhalen ze zo nodig horizontaal (maar niet verticaal).

Met vriendelijke groet,
CSShunter
_____________
PS:
Je hoeft de images nu ook niet meer 1246px breed te maken. Met een breedte van 100px doen ze het ook, dat is iets sneller gedownload.