Ønsker kritikk - design på hjemmesiden min

[Gjest Slettet-XHLacM]

Jeg har i alt for lang tid brukt Joomla og dermed sett meg lei på de begrensinger designet gir. Derfor lagde jeg en webside fra skratch og slengte den opp på en webserver. Jeg har ikke laget særlig med websider før, så derfor hadde det vært greit med konstruktiv kritikk jeg kan ta med meg videre. Designet jeg har nå, kommer jeg til å beholde, men kritikk er opphav til nye idèer.

 

Fredrikjr.moo.no

Endret 13. september 2008 av Slettet-XHLacM

[FrodeNilsen]

Jeg har i alt for lang tid brukt Joomla og dermed sett meg lei på de begrensinger designet gir. Derfor lagde jeg en webside fra skratch og slengte den opp på en webserver.

...

 

Kode

 

Jeg har aldri jobbet mot Joomla, men den kildekoden din er ikke akkurat rein. Du benytter tabeller til formatering i markup, samt at det er en sann suppe med atributt formatering og css formatering i markup. Spacer-gifs. Tabell celler med non-breakable-space.

 

Mulig formatering ser bra ut men måten du kom dit på bryter med god kode skikk.

 

Det må da gå ann å få til noe så simpelt som dette med Joomla?

 

Layout og stilsetting

 

Du har benyttet en hyperklassisk layout. Det eneste avviket ditt er footer, som ikke er en integrert del av hovedboksen. Dette gir ett intrykk av tradisjon og lite nytenkning. Hvorfor ikke flytte navigering til høyre? (Det er enkelt med moderne kode, men litt av en oppgave med den kodesuppa du har.)

 

Jeg likte godt headeren din, men opplevde navigeringsknappene som litt for mørke. Jeg ser også at du fort blir å slite med å integrere innholdet slik at det får samme uttrykk som du har gitt resten av siden. Du vil fort ende opp med scrolling hvis du får litt innhold også.

 

Jeg forsøkte å fylle på med mer tekst, og da drepte jeg helt enkelt formateringen på siden din. Siden bør enten scrolle eller skalere, nå gjør den ingen av delene.

 

Navigering

 

Du har ett ett-nivå navigeringstree, samt at du ikke viser tydelig hvor i treet man er. Du vil fort slite med å fylle på med innhold i ett så grundt navigeringstree. Det kan løses med sidenavigering, men sett i sammenheng med den begrensede plassen du har satt av til innhold, så blir det fort for mange sider.

 

Hvis siden skalerer i høyden, så bryter du det jeg opplever som grunntanken i "designet": Fast størrelse på hovedboksen.

 

Oppsumering

 

Mulig du har løsninger jeg ikke har fått med meg, men dette utkastet har en klar konflikt mellom innhold, grafisk utforming, og navigering. Dette utkastet forutsetter minimalt med innhold, samt at det jobbes litt mer med å integrere innholdet slik at det får samme grafiske uttrykk som resten av siden.

 

Frode

[Gjest Slettet-XHLacM]

Takk for fin kritikk!

 

Tross kodesuppa fungerer i hvertfall siden, noe som er det viktigste. Siden er laget med sammensettning av slicede bilder i Photoshop, men jeg tror muligens jeg gjorde noe feil(?).

[FrodeNilsen]

scroll

 

Hvis målet var å scrolle innholdet, så har du gjort nesten alt galt. Da forstår jeg ikke hvorfor du har "slicet" i det hele tatt, men ikke benyttet absolutt posisjonering av bokser med fast størrelse og scroll for overflow på innholdet.

 

skalere

 

Hvis siden skal skalere vertikalt etter innholdet, så trenger du ikke mer enn to "slicer" og ett bakgrundsbilde.

 

Du trenger maks bare to div bokser ekstra.

 

Du kan ha hele greia liggenes i en div boks, der du har hele photoshoppen minus bunden i bakgrunden. Gjør bakgrunnen transparent der du har innhold.

 

Du lager en boks til, som du posisjonerer absolutt og som du gir lavere z-index enn bakgrunnen. Da får du ikke problemer med knappene dine.

 

I denne boksen lager du en div boks som har lik bredde som photoshoppen din, og gir dette er ett horisontalt snitt av photoshoppen, som du repeterer vertikalt. Sett riktig padding på innholdet. Hvis innholdet fører til at boksen blir for høy, så vil den horisontale "slicen" repeteres nedover.

 

I den samme boksen plasserer du nok en boks, med clear both, og en "slice" av bunnen. Denne vil nå alltid forskyves i henhold til inholdet.

 

kode

<div>
<p><a href="">Header</a></p>
<ul>
	<li><a href="" class="i_am_here">hjem</a></li> 
	<li><a href="">blogg</a></li> 
	<li><a href="">filmer</a></li> 
	<li><a href="">diverse</a></li> 
<ul>
<div>
	<div id="content">
		<h1>Overskrift</h1>
		<p>innhold</p>
	</div>
	<div id="bottom"></div>
</div>
</div>

 

Sammenlign dette med din egen kode. Du trenger ikke content eller bottom boksene for scrolling. Du oppnår akkurat det samme med denne markuppen som din egen.

 

Du må lære deg noe css for å få suppen din til å smake godt, da visibility settes i css. Bakgrundsbilder setter du i css, ikke som bilder i markup. Du trenger ett til tre bakgrundsbilder, eventuelt ett ekstra for hver navigeringsknapp eller ett felles for hover over knapp.

 

CSS koden blir pinlig enkel for scrolling, men den får du lage selv.

http://www.w3.org/TR/CSS21/propidx.html

 

Du vil trenge å lese litt her:

http://www.w3.org/TR/CSS21/colors.html#propdef-background

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

 

Frode