Archief - OTHER: Beroil

Xavez · 14 aug 2006

* Nog eens een nieuw ontwerpje gemaakt voor een smeermiddelenmaatschappij (niet durex dus).

* Gebruikte tools: Photoshop CS2 en Notepad++

* Hoog in het vaandel draag ik persoonlijk steeds toegankelijkheid (zowel wat betreft code als wat betreft ontwerp), xhtml-geldige code en crossbrowser-ontwikkeling. M.b.t. dat laatste puntje zit ik nog met een bugje betreffende de footer. In Internet Explorer (waar anders) overlapt de footer bij een te klein venster gewoon de content-laag. Dat mag dus niet, maar dat los ik nog wel op (in ieder geval niet door een z-index ofzo

).

* Er staat een foutje in de tekst, maar dat wordt ASAP aangepast

* De taal van het doc staat nog op engels, maar dat wordt ook ASAP aangepast (ik heb ATM nog geen toegang tot de server)

* Accesskeys komen er samen met het menu

* Shoot! http://beroil.be/

b0bbY · 14 aug 2006

sober is het alleszins. En da's niet slecht bedoeld uiteraard! Usability zit dan ook wel snor!

Maar té sober is ook weer niet goed imo. Vind het persooonlijk iets teveel whitespace hebben. Zeker op hogere resoluties (1024*768 en groter) Misschien eens kijken wat het geeft als je met een 'container' werkt in plaats van de volledige viewport te gebruiken.

Foto staat er zo een beetje verloren bij. Komt over alsof er nog een foto bij 'moest' en dat die er zowat 'opgegegooid' is.

Hover effect in het menu kan iets duidelijker.. misschien textkleur of gewicht ook laten wisselen?

contact info in footer mag iets duidelijker, zag eerst enkel de icoontjes, niet de tekst. Ligt ook deels aan m'n tft scherm, maar tekst mag iets donkerder denk ik.

Code is wel goed. Enkele puntjes toch.

-Waarom kies je voor 's in de footer? zijn meergeschikte tags denk ik.
-dimensies van de <img> tag van het logo kunnen ook in het stijlblad

- hier in FF overlapt de footer ook de content laag...

Xavez · 14 aug 2006

- Dat van die foto kan ik zeker volgen, ik zal er eens naar kijken

- Hover effect duidelijker, wordt ook voor gezorgd!

- Contact info, okay, ik zit op een CRT dus da's hier vrij inorde maar ik moet uiteraard rekening houden met TFT's, thanks for pointing it out!

- spans omdat die beter te stylen waren. Met mijn <ul><li></li></ul>-structuur die ik eerst had ging het gewoon niet om ze mooi naast elkaar te krijgen gelijk ik het wou. Is ook een resultaat van dat ik daar niet m'n hoofd over wou breken. Welke andere tags stel jij voor?

- Dimensies kunnen idd in het stijlblad, maar in dit geval niet. Het gaat om een transparante PNG die ik in IE ook graag transparant wil houden, dat gebeurt door middel van een javascript, maar die javascript moet dus ook de exacte dimensies van die afbeelding uit die tag halen, anders schiet er niet veel meer van m'n afbeelding over in IE!

- De footer overlapt de contentlaag inderdaad ook, maar daar is het minder storend omdat je de tekst die eronder zit nog kan lezen door te scrollen. De footer heeft position fixed, wat in IE niet gaat en wat ik daar een beetje "gefaked" heb

.

Thanks!

b0bbY · 14 aug 2006

Xavez zei:
- spans omdat die beter te stylen waren. Met mijn <ul><li></li></ul>-structuur die ik eerst had ging het gewoon niet om ze mooi naast elkaar te krijgen gelijk ik het wou. Is ook een resultaat van dat ik daar niet m'n hoofd over wou breken. Welke andere tags stel jij voor?

- Dimensies kunnen idd in het stijlblad, maar in dit geval niet. Het gaat om een transparante PNG die ik in IE ook graag transparant wil houden, dat gebeurt door middel van een javascript, maar die javascript moet dus ook de exacte dimensies van die afbeelding uit die tag halen, anders schiet er niet veel meer van m'n afbeelding over in IE!

Was me ontgaan dat het een .png met transparantie was. Heb me ook eens rotgezocht om zulke afbeeldingen mooi in de css te verwerken, zonder succes. Dus hier is er idd geen andere oplossingen dan zowel de img als de dimensies in de html te zetten.

Kent er iemand een oplossing om transparante .png te gebruiken in het stijlblad als background property trouwens? in IE bedoel ik dan hé

Als alternatief voor de zou ik voor opteren.
Voor de contact info misshcien een <dl> ? like so:

Code:

<dl id="contact">
<dd><img src="phone.png" alt="Telefoon" title="Telefoonnummer" /></dd>
<dt>011 80 33 23</dt>
<dd><img src="fax.png" alt="Telefax" title="Faxnummer" /></dd>
<dt>011 80 10 04</dt>
<dd><img src="email.png" alt="E-mail" title="E-mailadres" /></dd>
<dt>[email protected]</dt>
</dl>

Ze naast elkaar zetten zou moeten lukken met een margin-right op de contact info dnek ik...

Xavez · 14 aug 2006

b0bbY zei:
Was me ontgaan dat het een .png met transparantie was. Heb me ook eens rotgezocht om zulke afbeeldingen mooi in de css te verwerken, zonder succes. Dus hier is er idd geen andere oplossingen dan zowel de img als de dimensies in de html te zetten.

Kent er iemand een oplossing om transparante .png te gebruiken in het stijlblad als background property trouwens? in IE bedoel ik dan hé

Daarachter heb ik me dus ook al suf gezocht, zonder oplossing voorlopig =P.

Code:
Als alternatief voor de zou ik voor opteren.
Voor de contact info misshcien een <dl> ? like so:

Code:

<dl id="contact"> <dd><img src="phone.png" alt="Telefoon" title="Telefoonnummer" /></dd> <dt>011 80 33 23</dt> <dd><img src="fax.png" alt="Telefax" title="Faxnummer" /></dd> <dt>011 80 10 04</dt> <dd><img src="email.png" alt="E-mail" title="E-mailadres" /></dd> <dt>[email protected]</dt> </dl>

Ze naast elkaar zetten zou moeten lukken met een margin-right op de contact info dnek ik...

Hmm, maar wat is het semantische voordel t.o.v. mijn spans dan eigenlijk? Ik denk dat ik met de <address>-tags ga werken

.

Jellepunk · 14 aug 2006

Code ziet er goed uit, behalve dat ik het ook wat raar vind dat je met span's werkt in de footer.
Ook in de footer ietsje meer contrast steken, want deze is hier moeilijk leesbaar (tft).
* kheb mijn brightness beetje lichter gezet en nu zie ik nog een lijn extra naast het menu die ik eerst niet zag. deze zou ik wat donkerder maken, niet veel, maar gewoon dat ze toch iets meer zichtbaar is.
voor de rest vind ik de site wel te leeg. dus zou ik ook opteren voor een container en die op 770px breedte zetten, dan heb je 800*600 support en ziet je pagina er wat voller uit.
Misschien muggeziften, maar het stoort me een beetje dat de afbeelding van slechte kwaliteit is (gulf_refining.png).
Misschien nog uw header ten opzichte van je tekst alingeren, want ik heb nu het gevoel dat hij daar beetje staat te zweven zonder houvast.
In het algemeen mis ik een beetje kleur, misschien kan je nog iets met het donkerblauw van het logo doen of uw lijnen in dat lichtblauw, het is maar een suggestie hé

Moest het niet zo leeg zijn zou het al heel wat anders zijn denk ik

Erlend · 14 aug 2006

Het logo en de verwerking er van komt erg amateuristisch over.
Er is ook teveel witruimte, je witruimte is ook niet in balans waardoor
het geheel onsamenhangend overkomt. Daarnaast krijg ik hier heel
lange paragrafen en staat de titel bijna uiterst rechts.
Integratie van de foto is opnieuw nieuw voldoende.

Code is puik werk maar grafisch ondermaats. Usability en toegankelijkheid
moeten zich onherkenbaar gedragen binnen een site.

sneax · 14 aug 2006

de footer algemeen gewoon wat donkerder maken

de header kunt ge laten 'spreiden' over het hele browserwindow maar ik zou toch een limiet zetten op de breedte van de pagina's (menu en content tezamen dus) als usability zo belangrijk is dan vind ik dat ge rekening moet houden met de mensen op een hoge resolutie, als die uw site bezoeken gaan die héél lange zinnen krijgen

ook kan ik mij voorstellen dat er teveel whitespace is voor hoge resoluties

en zoals al gezegd lijkt de foto en in mindere mate de header amateuristisch, der is zo iets aan ... dunno - de kwaliteit van het beeld en de kleuren ... het ziet er nie zo 'strak' uit percies uit de 80's of ne site gemaakt in '96

edit: wat mij nu opvalt is dat de foto zo wa korrelig is en dat de auto's die op de parking staan maar eenvoudige barakken zijn - da straalt zo geen 'moderniteit' uit snapte ... de term 'amateuristisch' is ni correct kzou het eerder retro noemen of allé ja tis nogal moeilijk uit te leggen

Zero Grav · 15 aug 2006

Ow, you disappoint me.

De site lijkt totaal geen structuur te hebben, ik zeg nu niet dat een website zichtbare borders moet hebben maar er moeten er altijd wel zijn, Nu lijkt de website volledig uit elkaar te hangen. Er zit ook totaal geen design in voor mij.
Ik zit hier nu echt te zuchten wat ik ervan moet zeggen, om eerlijk te zijn vind ik dat je dit totaal niet kan afleveren, het lijkt alsof je er echt geen werk in gestoken hebt (maar dat betwijfel ik ten zeerste van u), alles lijkt uit elkaar te vallen.

Waar het mij het meeste aan doet denken is inderdaad een usability site, maar dan enkel voor diegenen die daar behoefte aan hebben, die geen nood hebben aan een volledig uitgewerkt detailontwerp.

Je weet toch zelf dat je véél beter kan dan dit?

Ik zie net wat Erlend heeft gereplied en ik denk dat dat het nog het beste verwoord, dat ik er exact hetzelfde over denk.

Xavez · 15 aug 2006

Thanks guys, de kritiek klopt ook voor het grootste deel.

Opmerking over het logo schuif ik echter wel volledig langs mij door, hetzelfde wat betreft de kwaliteit van de foto's, simpelweg omdat dat materiaal is waarmee ik moest werken. Het is trouwens niet eenvoudig om met zo'n logo nog iets leuks qua webdesign eruit te halen =).

@Zero Grav: het was ook niet m'n bedoeling om dit al af te leveren, maar het bedrijf heeft een mailing gedaan naar haar klanten, waardoor ik met een tijdslimiet zat wat betreft het eerste ontwerp. Dit is niet de norm van kwaliteit die ik probeer na te streven voor een klant, dus don't worry.

Thanks for the critique so far! Updates volgen

.

Xavez · 24 aug 2006

En we hebben de boel dus in een contentbox kunnen gieten ondertussen... Wegens tijdgebrek hier en daar nog wel een paar xbrowser glitches (vooral bij het contactformulier, dat héél raar doet)

Maar al bij al best wel tevreden over het resultaat totnutoe. Het blijft nog een work in progress (zeker wat content betreft wordt er nog heel wat uitgebreid).

Edit: voor de handigheid: http://beroil.be

Jellepunk · 24 aug 2006

Ik vind het geheel wat lomp door de titel. Deze vind ik te groot.
Uw logo van beroil zou ik uitlijnen samen met de content.

Als ik op 800*600 kijk stoort het me wat dat de footer boven de tekst staat.
Ik ben meer een voorstander van een footer die onderaan float ipv fixed staat.

In de footer zit er nog steeds wat weinig contrast vind ik.
en bij de contact pagina mis ik nog de foto die telkens naast de inhoud staat. het breekt beetje met je site.

dRIES1 · 24 aug 2006

Allee, da ziet ge toch zelf wa er mis is...
't is zo leeg als maar kan zijn? Geef mij es wa lorem tekstjes, eens zien hoe het eruit ziet met meer content?

De titel van de pagina's...
Fixed footer, niet doen hier. Trouwens is je footer veel te groot vind ik persoonlijk. Is echt irritant, ge moet scrollen in contact pagina, omdat de content abrupt wordt afgebroken.
Uw menu zweeft daar precies.
Verander gewoon uw content vlak, want zo is het echt niet mooi.

Sorry, niets persoonlijks, maar ik vind hem echt op nie veel trekken. Moest ik jou zijn zou ik zo goed als opnieuw beginnen en enkel de header desnoods houden...

Xavez · 24 aug 2006

@Jelle:
- Zal de titels wat kleiner zetten. Kritiek is terecht denk ik

- Logo uitlijnen met de content is niet zo'n goed idee, het breekt de pagina volledig (ik ga geen voorbeeldje plaatsen, mijn eigen designersoog zegt dat het niet mooi is

)

- Hmmm, ik heb nog lang getwijfeld aan die fixed positie omdat het op 800*600 inderdaad de viewport vrij hard verkleint. Ik ga hem eens gewoon onderaan proberen te plaatsen (gelijk dat in IE reeds het geval is)

- Dat weinige contrast ligt dan toch echt wel aan je scherm hoor, ik heb het hier al op TFT's, CRT's en flatrons bekeken en het ziet er overal even contrastrijk uit hoor. Meer contrast vestigt de aandacht te fel op de footer

/edit:
@Dries:
- Lorem tekstjes? Op een site die online staat? Doe effe serieus

.

- Ik ga sowieso niet opnieuw beginnen. Persoonlijk neem ik kritiek nooit op

. Het probleem qua design ligt voor mij in de kleuren, ik wordt er inspiratieloos van

. Heb het logo van de klant zo aangeleverd gekregen dus...

Jellepunk · 25 aug 2006

Xavez zei:
@Jelle:
- Zal de titels wat kleiner zetten. Kritiek is terecht denk ik

- Logo uitlijnen met de content is niet zo'n goed idee, het breekt de pagina volledig (ik ga geen voorbeeldje plaatsen, mijn eigen designersoog zegt dat het niet mooi is )

- Hmmm, ik heb nog lang getwijfeld aan die fixed positie omdat het op 800*600 inderdaad de viewport vrij hard verkleint. Ik ga hem eens gewoon onderaan proberen te plaatsen (gelijk dat in IE reeds het geval is)

- Dat weinige contrast ligt dan toch echt wel aan je scherm hoor, ik heb het hier al op TFT's, CRT's en flatrons bekeken en het ziet er overal even contrastrijk uit hoor. Meer contrast vestigt de aandacht te fel op de footer

Nja, van dat logo kan je best gelijk hebben, nu ik het nog eens bekijkt vind ik het beter meevallen.

Het kan wel zijn dat het aan mijn scherm ligt want mijn laptop scherm staat wel heel helder, nuja, de site is allesinds al beter dan wat je eerst had

Archief - OTHER: Beroil

Xavez

Legacy Member

b0bbY

Legacy Member

Xavez

Legacy Member

b0bbY

Legacy Member

Xavez

Legacy Member

Jellepunk

Legacy Member

Erlend

Legacy Member

sneax

Legacy Member

Zero Grav

Legacy Member

Xavez

Legacy Member

Xavez

Legacy Member

Jellepunk

Legacy Member

dRIES1

Legacy Member

Xavez

Legacy Member

Jellepunk

Legacy Member