kjempekjekt.com redesignet m/twitter bootstrap

[torbjørn marø]

Programmeringsbloggen fikk i natt et nytt design basert på twitter bootstrap. Jeg utnytter nå de responsive egenskapene slik at siden dynamisk tilpasses ulike skjermoppløsninger, og den fungerer nå mye bedre på smartphones og pads (testet på iPad og Windows Phone 7).

 

Det gikk litt fort i svingene, så om jeg har oversett noe sentralt eller det er noen ting som ikke fungerer så veldig bra så vil jeg gjerne ha tilbakemeldinger på det.

 

Blogposten om redesignet:

http://blog.kjempekjekt.com/2012/05/27/kjempekjekt-com-responderer/

[MikkelRev]

1. Siden er veldig ryddig, fin og akkurat passe moderne og stilren.

2 . Jeg har sagt det før: valideringsfeil: 29 Errors, 7 warning(s). Jeg kan nesten ikke tenke meg en annen nettside utenom W3C-validatoren selv hvor valideringsfeil er mer tabu enn Programmeringsbloggen

3. Har du prøvd med et RSS-ikon ved RSS-linken, en logo vedsiden av tittelen i topbaren, søkeikon i søkeboksen?

3. På min skjerm og oppløsing ser jeg bare ned til User Experience på Kategorier. Jeg må sette større oppløsning for å se valgene under.

5. Du har to facebook-ikoner nederst i artikkelen og ingen G+1. Jeg lurer på om du kanskje kunne kuttet ut noen av de sosiale mediene. Tror ikke det er så mange nordmenn sender linker til til reddit, stumpleupon, favoritter, gmail eller email (ja, du har både gmail og email).

6. Litt tett mellom artiklene.

[torbjørn marø]

1. Siden er veldig ryddig, fin og akkurat passe moderne og stilren.

Akkurat hva jeg forsøkte på, så det er bra..

2 . Jeg har sagt det før: valideringsfeil: 29 Errors, 7 warning(s). Jeg kan nesten ikke tenke meg en annen nettside utenom W3C-validatoren selv hvor valideringsfeil er mer tabu enn Programmeringsbloggen

Huff, ja. Skal ta en gjennomgang. Er nok endel drit som henger igjen, og har nok endel slurvefeil i WordPress theme-filene jeg kan rydde unna. Skal skedulere en valideringstest på todo-listen min

3. Har du prøvd med et RSS-ikon ved RSS-linken, en logo vedsiden av tittelen i topbaren, søkeikon i søkeboksen?

Har prøvd litt forskjellig, men falt tilbake på ingen ikoner. Syntes dessuten det var rart Twitter Bootstrap ikke hadde et RSS-ikon blant de innebygde ikonene. Kommer til å gjøre noe med dette, men tenker fortsatt..

4. På min skjerm og oppløsing ser jeg bare ned til User Experience på Kategorier. Jeg må sette større oppløsning for å se valgene under.

Fryktet det, og har redusert antall kategorier noe i kveld. Kommer til å forsøke å fjerne flere..

5. Du har to facebook-ikoner nederst i artikkelen og ingen G+1. Jeg lurer på om du kanskje kunne kuttet ut noen av de sosiale mediene. Tror ikke det er så mange nordmenn sender linker til til reddit, stumpleupon, favoritter, gmail eller email (ja, du har både gmail og email).

Bør se om jeg finner en plugin eller noe lignende som er enklere enn det jeg bruker nå. Er egenlig bare interessert i å ha "fb like", G+1 og "tweet this".

6. Litt tett mellom artiklene.

Enig. Økte avstanden litt i kveld.

 

Jeg lurer forresten på om jeg burde designe forsiden litt anderledes. Kanskje jeg lager en litt mindre typisk blogg-forside.., noe med en større logo, og kun ingressen til de to-tre siste innleggene - og få alt til å pass på én skjerm uten scrolling. Hva synes folk om det?

 

Uansett, 1000 takk for tilbakemeldingen!

[MikkelRev]

2. Ja, for du er vel opptatt av kvalitet og ren kode ?

3. Evt. kan du jo bygge i dybden - ha to (eller flere) nivåer av kategorier om du ønsker å beholde kategoriene du har.

 

Til det siste forslaget ditt: aner ikke før jeg ser det

[torbjørn marø]

Til det siste forslaget ditt: aner ikke før jeg ser det

Da kan du ta en titt nå

[agm]

Her er noen synspunkter fra en front-end nerd. Alle har forskjellige synspunkter og fokusområder, så ta til deg det du føler er riktig for din side

 

Programmeringsblogg-grafikken skiller seg ut fra resten av siden mtp. skrifttyper, fargetone og stil. Den ødelegger også symmetrien på siden. Fjerne denne? Eventuelt midtstille den eller reorganisere elementene?

 

Inkonsekvent bruk av whitespace? Blir veldig langt ned til footer på forsiden. Og hvorfor har footer margin-bottom: 650px? På artiklene kan du nok med fordel også øke mellomrommet mellom artikkelen og høyre kolonne.

 

Og &--#60;a name="footer"&--#62;&--#60;/a&--#62; er vel avleggs? Her bør det holde å sette id="footer". I tillegg kan du jo vurdere å bruke HTML5 elementer for å gjøre koden mer semantisk.

 

Og når du bruker HTML5, trenger du da å angi XML Namespaces i &--#60;html&--#62;? Det er kanskje nødvendig for FB? (Spørsmål altså, ikke kritikk :+)

 

Det er grei praksis å legge inn javascript som jquery sist i &--#60;body&--#62;, og ikke i &--#60;head&--#62; (Med mindre det er funksjonalitet som skal kjøres før innholdet er lastet). Da får brukeren lastet innholdet så tidlig som mulig, så kan heller funksjonene vente noen millisekunder

 

En fin måte å hente jQuery på er å forsøke først fra Googles CDN (som med stor sannsynlighet ligger i brukerens cache), kjøre en sjekk og evt. laste inn fra lokal server hvis window.jQuery ikke er definert:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>

 

Begynner å se bra ut dette Torbjørn!

Endret 28. mai 2012 av agm

[torbjørn marø]

...

 

Jeg lagde logoen/grafikken i natt, men var fortsatt fornøyd da jeg så det igjen i dag Synes jeg fikk til en grei symetri, men som du sier kan det være min smak, og ikke alle andres...

 

Poenget med footeren er at den ikke er synlig "til vanlig", men at man navigerer til den fra menyen. Margin-bottom er der for å få innholdet så langt opp til toppen av siden som mulig når man har klikket på "Om kjempekjekt.com".

 

Dette er i høy grad et eksperiment, og jeg setter pris på tilbakemeldingen.

 

Ang. id="footer" : Det visste jeg ikke. Lærte HTML i 1996, og det er nok mye nytt jeg ikke har fått med meg

 

Å flytte js-lastingen til bunnen av sidene forsøkte jeg, men av en eller annen grunn (jeg tror jeg vet hvorfor) så sluttet ting å fungere, så jeg flyttet det meste tilbake. Men dette skal jeg få til..

 

Begynner å se bra ut dette Torbjørn!

 

Takk

[agm]

Poenget med footeren er at den ikke er synlig "til vanlig", men at man navigerer til den fra menyen. Margin-bottom er der for å få innholdet så langt opp til toppen av siden som mulig når man har klikket på "Om kjempekjekt.com".

 

Dette er i høy grad et eksperiment [...]

 

Skjønner. NASA skjøt opp mange raketter før de nådde månen!

 

En annen ting som kan være praktisk å merke seg - siden HTML sider/apps stort sett bruker CSS og JS, har disse blitt satt til standard MIME-types for <link> / <style> og <script> i HTML5. Mao. trenger vi ikke lengre å skrive type="text/css" og type="text/javascript".

[JiGGe]

1. Jeg syns teksten i innleggene er alt for brede. Jeg syns 600-650 px holder i massevis ellers kan det fort bli slitsomt og uryddig å flytte øynene 40 cm for hver gang en ny linje starter.

 

2. "Siste kommentarer" på høyre side virker unaturlig (vanskelig og lese, vi er ikke vandt til det) og hele siden mister balanse fordi du har høyrestilt teksten. Denne ville jeg heller høyre stilt

 

3. Jeg ser også at du har med deler av kommentaren til folket. Antall bokstaver ville jeg kortet ned noe fordi det ofte ser ut som at du kutter i starten av en ny linje.

+1 for 6er til This Developer's Life! Min

definitive favoritt. Jeg trengte også noen nye

podcaster, så dette passet bra. Takk for

tips!...

 

4. På kommentarer under blogg post så ser man bilder av folket som har kommentert. Her ligger plutselig navnet deres på høyre siden av bildet, med luft over og under. Dette vil jeg endre til slik at det ligner på "siste kommentar, kun luft over.

 

5. Datoen på kommentargene under blogg poster syns jeg bør være dyttes litt ut slik at den ligger rett under navnet på denne måten blir det mer naturlig at det står "says" etter navnet eller så kan det virke som at personen bak kommentaren har skrevet inn datoen selv. Datoen bør også endres til Norsk.

 

6.

Jeg ville endret menyen til å bli aktiv på mouse over istedenfor at man trykker på den. Dette er kun fordi jeg er vandt til det. Nå som jeg satt her så ville jeg se hva slags kategorier du hadde så jeg tok musa over og ingenting skjedde. Når jeg trykket så forventet jeg å komme til en ny webside fordi det er det som ofte skjer når jeg trykker rundt på nettet.

Her ville jeg også lagt drop-down menyen over to kolonner sånn at de som ikke har så stor oppløsning, ikke går glipp av de nederste kategoriene samtidig som at det ser mer ryddig ut.

 

7. Legg til en "skrevet av" eller noe lignende. Jeg vil gjerne vite hvem som skriver ting. Eneste avsenderen jeg ser er programmeringsbloggen, kult hvis man får fram navnet ditt f.eks som en signatur nederst på alle blogginnlegg. (Blogg=personlig)

 

8. Øverst til høyre kommer et lite bilde (er det et blogginnlegg) Dette passer ikke inn utifra hvordan resten av siden er lagt opp. Resten er veldig "korrekt" og måten du har brukt typografien på klarer å lage en form for balanse og design i seg selv. Da syns jeg det ødelegger med et bilde øverst som ikke følger noen linjer. Hverken bredden på teksten ved siste kommentarer eller høyden ved bloggpostene (Jeg ville kanskje prøvd å la toppen av bilde følge linjen under overskriften til bloggposten.

 

9. rss og twitter logoen øverst til høyre er i forskjellig str.

 

10. Jeg tviler på at alle de ikonene nederst i bloggposten blir brukt. Fjern de som er unødvendig.

 

 

 

Jeg har kun tatt utgangspunkt i denne siden:

http://blog.kjempekjekt.com/2012/05/27/kjempekjekt-com-responderer/

 

Kodedelen ser jeg de over meg har gitt kommentarer på. Det er ikke jeg særlig flink på, men har prøvd å gi deg kommentarer på det som kan løfte det visuelle og brukervennligheten.

 

Lykke til videre!