Kritikk på bloggen min!

[V5R1X]

Har syslet med bloggen min over en tid nå, og sysselen fikk et oppsving da jeg nylig kjøpte *SLETTET*. (NB! Kommentarer på litteraturen i bloggen min hører ikke hjemme i denne tråden, så vennligst ignorér.)

 

Jeg ønsker ikke å dreie kritikken i en bestemt retning, bare kom med det som faller deg inn. Hva er bra/dårlig? Hva liker du /ikke? etc.

 

Om siden:

HTML/CSS/PHP kodet for hånd i notisblokk.

PHP newsscript fra CuteNews.

Glass Animals (på toppen av bloggen er ikke laget av meg)

Siden validerer HTML 4.01 Transitional og CSS 2.1

Endret 13. juni 2009 av J-Core

[FrodeNilsen]

Det første som slo meg når jeg leste posten din, var at du har strukket deg litt for å gi oss som kommenterer sider litt bakgrundsinformasjon. Takker for det!

 

Du skriver at siden er skrevet for hånd, det betyr vel at du ikke benytter noen form for CMS, men skriver innholdet for hånd?

 

Skill formatering fra innhold

 

Du har benyttet inlineformatting i form av style attributtet. Dette er ikke ulovlig, men klok av erfaring har jeg sluttet å formatere i html med attributter. Hvis du skiller ut all formatering til CSS, så blir det enklere å jobbe med.

 

Du kan også jobbe med å finne en struktur på CSS som du finner hensiktsmessig, slik at du lett og raskt finner frem i CSS fila. De fleste lager en paddeflat CSS fil, noe som fort blir suppe.

 

Du har ikke formatert selve innholdet? Lite luft rundt teksten og mellom linjene.

 

Markup

 

HTML koden er rein, og du er inne på ett riktig spor. Jeg stusser litt på hvorfor du benytter dobble br-elementer fremfor ett p-element for å lage ett avsnitt?

 

Struktur

 

Jeg opplevde også avsnittene som for lange, og det er ingen grafiske virkemidler til å splitte dem opp litt, ei heller en eneste overskrift av noen slag. Du benytter kun farger på glass figurene på toppen, slik at du ved å benytte overskrifter med farger vil få en side som stimmulerer mer en det grå i hjernen. Det blir mindre fokus på de glass figurene også.

 

Jeg savner litt mer fargebruk, mer luft mellom linjene, mer luft rundt teksten, tydeligere avsnitt og vesentlig flere overskrifter.

 

Nettet egner seg for korte avsnitt og tydelig inndelt innhold. Dette oppnås typisk med bilder og overskrifter.

 

Layout

 

Du har valgt å lage en innholdsboks som skalerer etter skjermstørrelse. Denne boksen scroller når den blir for liten. Dette ble ikke særlig hensiktsmessig når jeg gjorde skjemhøyden lav, da innholdet ble slitsomt å lese. Personlig ville jeg ikke la den boksen scrolle men snarere skalere.

 

Mål med siden?

 

Du har egentilg ikke fortalt oss hvem målgruppen for siden er, hva du vil oppnå med den, eller hva du vil si med den. Dette gjør at det er umulig å kommentere designet, men bare om jeg liker det jeg ser, ikke om du har oppnådd hva du forsøker å oppnå.

 

Jeg regner med at du ønsker at besøkende skal lese bloggen, og da har du ikke truffet spikeren på hodet, da bloggen er tunglest. Jeg har kommentert med utgangspunkt i det, samt pirket litt på koden i den sammenheng.

 

Frode

[V5R1X]

Riktig, jeg har ikke brukt noe CMS. Har hatt altfor mange erfaringer med at slike får en side til å ofte se forskjellig ut fra browser til browser, så notisblokk it is.

 

Skill formatering fra innhold

 

Prøvde å søke litt ang. det å skille all formatering til CSS, men finner ikke noen eksempler som jeg tror er hva du mener. Og paddeflat CSS-fil, høres ut som min CSS. Hvordan gjør man hvis man ikke skal gjøre den "paddeflat"?

 

Tekst-innholdet er ikke formatert, nei. Har egentlig aldri slått meg at dette er så viktig, så fint du påpeker. Det samme gjelder for det du sier om overskrifter og grafiske virkemidler. Det skal og må jobbes med, definitivt.

 

 

Markup

 

De doble br-elementene kommer av at nyhetsskriptet jeg bruker oversetter doble linjeskift (som jeg bruker for å dele teksten når jeg skriver) til <br><br>. Dette kan skrues av, og det er vel noe jeg kommer til når jeg begynner å tenke på formatering av teksten.

 

 

Struktur

 

Luft. Avsnitt. Bilder. Overskrifter. Point taken...

 

 

Layout

 

Skalering hadde vært idéelt, men av en eller annen grunn så får jeg ikke til å lage en DIV-boks som justerer seg etter innholdet når innholdet går over en sidehøyde. Sett at hovedboksen på siden min skalerte seg etter innholdet, så ville ikke skaleringen gått utover den opprinnelige sidehøyden. Hovedboksen stilles til å være 100% av høyden, men hvis innholdet blir så stort at man må scrolle, så henger ikke boksen med. Vet ikke om dette er forståelig. Kan lage eksempel... HER

CSS-boksen (ihvertfall ikke bakgrunnen i boksen) skalerer ikke etter innholdet. Hvorfor er det slik? Kan man fikse dette? Har søkt masse på dette uten å finne svar... Dette problemet er altså grunnen til at jeg bruker en boks som har overflow: auto; til å håndtere innholdet.

 

 

Mål med siden?

 

Trodde at "blogg" tilsa målet med siden, men det kan kanskje være så mangt det.. Skal prøve å gjøre siden mer "familievennlig" i hvertfall.

 

 

 

Tusen takk for en fyldig og god tilbakemelding! Settes pris på

Endret 10. november 2008 av J-Core

[FrodeNilsen]

CSS og HTML

 

Det å skille mellom formatering og innhold vil i praksis si at du unngår bruk av formaterings atributter i html. Du benytter ikke style, men for HTML 4.01 så må du sette to atributter for tabeller.

 

Tanken er at all formatering skal skje i CSS, mens HTML gir innholdet strukur.

 

CSS struktur

 

Det mest vanlige er å splitte opp CSS i flere stilark, der hvert stilark har en definert oppgave.

 

Det er heller ingen ting i veien med å stykke opp CSS i bolker, slik at header, footer, eller innhold markeres i CSS koden

/*****
Header
******/

div.header
{
padding:10px;
}

/*****
Footer
******/

div.footer
{
padding:10px;
}

 

Du kan også benytte rollovers

div.header div
{
padding: 0;
}

 

Du kan også gruppere, delvis eller helt, etter verdiene istedenfor elementene

div.header,
div.footer,
div.sidebar
{
color: red;
}

 

Du strukturerer en CSS fil for at den skal bli lettere å jobbe med og finne frem i. Jeg har ikke kommet over dokumentasjon for strukturering av CSS kode, men jeg har sett hauger av rotete kode.

 

Jeg vil anbefale deg å skille utt nullstilling av CSS i en bolk, samt at du definerer farger som vist over.

 

Personlig er jeg tilhenger av å definere selve layout elementene for seg også, men jeg er ingen gjennomsnittsbruker.

 

Skalering av innholdsboksen din

 

Problemet med koden din er at du i praksis kun benytter absolute posisjonering av elementene dine. Enda værre, de er nesten alle posisjonert i henhold til body-elementet. Sagt med andre ord: Ingenting skalerer i forhold til hverandre. Denne formen for formatering har store svakheter og jeg kan ikke anbefale den.

 

For å fikse dette må du skrive om hele struktruen på koden din. Jeg har skrevet den litt om, se vedlegg.

 

Endringer jeg har gjort

 

Jeg ville gjort siden smalere, da tekst som er bredere enn 500px typisk blir for bred. Derfor minsket jeg bredden. Dette er ikke optimalt dette heller, for skjermer som er mindre enn 500px.

 

Jeg har endret noe på bruken av alt attributtet. Alt atributtet skal erstatte bildet for de som ikke kan se bildet, derfor må teksten gi mening hvis bildet ikke er der. "logo" gir ingen mening, når teksten i logo bildet er "Jan Kåre's Blog". Derfor har jeg endret teksten til "Jan kåre sin blog". Du burde forresten ha en lenke på den logoen tilbake til forsiden.

 

Du burde også forsøke å oppnå balanse mellom header og footer, noe jeg ville forsøkt med å splitte validerings blidene. Du har en header som er midtstilt, men innhold som er venstrejustert. Jeg har forsøkt å utjevne dette med å la header balansere mot footer, mens innholdet balanserer mer naturlig mellom disse to.

 

Jeg har beholdt den gradienten du hadde rundt hovedboksen, derfor har koden seks nøstede div elementer.

 

Jeg har også endret linjeavstand og gitt teksten mer luft.

 

Jeg har også bakt inn CSS koden i html filen, da gjør det enklere å laste filen opp.

 

IE har problemer med selectors, derfor benytter jeg kun den enkleste av dem. Dette fører til at siden jeg ikke kan benytte ">" for å angi arv, så må jeg lage en ekstra oppføring slik at elementer lenger ned i node treet arver egenskapene.

 

body div div etc. er ett eksempel på dette. Den siste oppføringen i den rekken gjør intet annet enn å nullstille slik at elementer som nøster lenger ned ikke skal arve egenskapene til den nest siste i den rekken. Dette er tungvindt, da ">" ville gjort susen, men dette er altså en følge av vår alles elskede IE.

 

Min CSS kode er på rundt 190linjer, og dette er veldig simpel kode. Komplisert kode kommer fort opp i flere tusen linjer, og da blir det fort behov for å stykke den opp i flere filer.

 

Frode

eksempel.html

[V5R1X]

Tusen takk for mange gode tips!

 

Har foretatt en ganske komplett renovering av siden nå, men den er fortsatt ikke ferdig.

Siden validerer nok ikke som den skal bl.a.

 

Er fortsatt åpen for eventuelle tilbakemeldinger.

[loathsome]

Korrekt heter det "Jan Kåres blogg"; ikke "Jan Kåre's".

 

[V5R1X]

Du har rett i det. Derfor jeg har skrevet 'blog' med én G i "Jan Kåre's Blog" slik at jeg kan si at overskriften er skrevet på engelsk, dernest forsvare bruken av apostrof. Personlig synes jeg at egenavn blir seende rare ut når man ikke skiller de fra genetivs-s'er, hehe...

[Rinox]

Synes nettsiden var veldig smal (smak og behag antar jeg), og bortsett fra det de andre før meg har sagt synes jeg innholdet ble litt tettpakket i innleggene. Kanskje øke linjeavstanden litt eller begynne å bruke avsnitt?