W3Sidan.net

Hejsan!

Jag undrar vad ni tycker om min senaste design som jag har gjort till min hemsida Cssinspiration.se.

Länk: http://cssinspiration.se

Ändrat totalt 3 gång(er), senast 10/10 2008 10:16 av Viggz

Hejsan!

Vi kör väl samma format som senast?

Negativt

Övergripande design

Designen känns, for lack of a better word, rätt skabbig. Svart bakgrund, helvit content och lite växt-brushes i olika färger i toppen och botten - i mitt tycke ser det inget vidare ut.

Lägg sedan till en naken "ängel" som står och smeker låret på vardera sidan av content - det känns inte fräscht över huvud taget. Hur tänkte du när du beslutade dig för att använda den grafiken?

Varför är dina hörn inte rundade utan istället pixel-klippta? Är det medvetet, och i sådana fall, varför?

Vidare till förstasidan:

"Cssinspiration.se!" i blått förstår jag inte riktigt poängen med. Den är så liten att man egentligen missar den, men så stor att man stör sig lite när man ser den och inte fattar vad den är bra för. Att man är på cssinsipiration.se görs klart för besökaren genom URL, genom header och i första meningen i index-texten.

"Välkommen till en svensk CSS sida! [ikon ikon ikon]"
Högst intetsägande. "en svensk CSS sida![sic]" får mig knappast att hjula av glädje - speciellt inte när det är särskrivet.

Varför har du ikoner för "gör till startsida, spara, skriv ut" i en rubrik? Det känns som en väldigt konstig plats.

Varför har du dem över huvud taget? Vill användaren göra din sida till sin startsida - vilket inte är troligt - lär den göra det utan en sådan knapp. Vill användaren bokmärka eller skriva ut - samma sak. Fast vem skulle vilja skriva ut cssinspirations index-sida? Det står ju inget annat där än vad cssinspiration är. Det vill man ju knappast spika upp på väggen.

En skriv-ut knapp på dina "artiklar" kunde vara motiverat, men på index blir jag bara sur av att se knapparna - känslan blir av en polsk porr-länk-aggregator anno 1997 som verkligen verkligen verkligen vill att jag ska bokmärka dem och smäller upp en uppfordrande popup där det står ?press cancel to bookmark this page?, när jag skickats till sidan av en länk som påstås gå till "world news" och istället ger mig östeuropeisk getporr. Jag rekommenderar dig att ta bort ikonerna.

Innehållet i texten på förstasidan är väl okej förutom en del rätt korvig svenska. Dock skulle du kanske se över ditt bruk av kursiv text - jag blir lätt mordisk av att se kursiverad CSS, HTML i parti och minut. Du verkar använda kursivering för att indikera att "oj, det här är kanske lite svårt för dig lille vän" och det är ingen bra idé.

Värst är dock kursiveringen av 'designer'. Jag tror att de flesta vet vad en design är (även om "designer", på korrekt svenska, inte är pluralformen av "design", då ingen sådan finns, utan en benämning på den som designar - men jag är hyfsat språkliberal, så det får väl passera.). Hur tänkte du när du valde att kursivera text i parti och minut, speciellt beslutet att kursivera i princip varje användning av ordet CSS på hemsidan?

Artiklar

Det första som slår mig är svenskan i sidtexten behöver en rejäl polering. Det andra är att "Kategorier"-headern ser lite malplacerad ut; om du nu ska envisas med olika width i olika sid-segment får du nog allt ta och se till att det som tillhör en del följer stilmallen för den delen, och vice versa.

Den blå färgen du använder på vissa avgränsare och vissa headers känns inte som att den passar in på sidan och med de färger du använder. En lite mörkare kanske skulle fungera bättre, eller en helt annan färg?

Den grå bakgrunden bakom "artikel" och "skribent" känns 1996-era web-grey. Tråkigt. Jag hade bytt i dina dojjor. Grått är okej, men inte plåtgrått i en död färg.

Den gröna länkfärgen tycker jag heller inte är ett vidare bra val. Den känns lite småsvår att läsa.

Vad gäller individuella artiklar gäller allt jag skrev ovan gällande färger och 'Artikel'-headern (som är helt onödig, folk förstår.) I övrigt ser det OK ut.

Annat
Ta bort sektionen tills dess att du har något att lägga i den.

Tips & trix

Byt submit-knappar mot vanliga länkar och registrera events till länkarna istället, om du nu ska envisas med att inte visa alla direkt. Submitknappar är fula och icke-intuitiva i ett sådant här sammanhang.

Faq

Ditt användande av pluralis majestatis (som jag sett många andra här använda, lika kul och hemskt varje gång) på sidan känns lite fånigt; än så länge är det du som är cssinspiration, och då bör du antingen skriva om det så att det är texten på sidan till singularis (jag istället för vi o.s.v.) eller skriva om texten så att den undviker det problemet över huvud taget.

Information
Se det jag skrev om färger tidigare. Även här bör språket ses över.

Kodning och liknande
Det är bara tragiskt att du driver en css-sida där du använder tables för layout. Din trovärdighet sjunker som en sten direkt, liksom den gör när du rekommenderar inline javascript onfocus blur för att ta bort outline. Det är så fel på så många sätt.

Du bör för övrigt ta bort all javascript ur HTML-koden och använda event-registrering och liknande, antingen genom native JS eller något framework, för att få kod som är enklare, lättare att läsa och lättare att underhålla.

Positivt

Sidans syfte är behjärtansvärt. När du rekommenderar inline-JS för att lösa ett enkelt CSS-problem och därmed lär ut helt felaktiga saker blir du dock istället en del av problemet.

Slutsats

Gör om, gör rätt.

Ändrat totalt 2 gång(er), senast 10/10 2008 11:39 av monkeycid

Håller fullkomligt med Monkeycid. Det verkar också vara ett ganska vanligt problem med dålig semantik (även hos rutinerade webbutvecklare).

Jag har ändrat en hel del på sidan just nu, i kodningen. Du sa att jag använder tabeller för designen? Fel! Jag har det endast för att skriva ut innehållet! Resten av din kritik förstår jag. Tänker kolla igenom all text på sidan när jag får tid och ändra "svenskan". Angående designen har jag fått bra kritik hittills. Jag tror det är en smaksak, vissa gillar den. Ängeln är inte naken (tror jag) tyckte det var en "cool" sak, kanske det inte är men nu valde jag att ha med den. Hörnen är medvetet klippta, än en gång "cool", kanske inte var det.

Inline-JS grejen. Ni menar onFocus saken? Aa, tanken med tips och trix är att lära ut så mycket knep och knåp som möjligt då man inte kan ta bort länkmarkering i alla webbläsare med CSS (Windows Vista, Internet Explorer).

Vad det låter som så tycker ni ungefär "lägg ner skiten!" eller har jag uppfattad det hela fel? Jag tänker fortsätta och driva vidare sidan trots dålig kritik. Om ni vill se mig driva vidare sidan, ge mig enkla tips. Beskriv enkelt med en lista vad jag ska ändra. Vissa saker som jag gillar kommer jag nog behålla.

Jag kommer framöver att enbart köra med tips inom CSS och inga JavaScripts!

Tackar för kritiken och hoppas att ni gillade min sida (Lite iaf.) =)

Ändrat totalt 2 gång(er), senast 15/10 2008 23:01 av Viggz

Kul att du inte bara slank iväg med svansen mellan benen, som många gör när de får ärlig kritik! Med lite (nåja, mycket) jobb tror jag att det kan ordna sig.

Jag tycker inte att du bör "lägga ner skiten". Däremot har jag många synpunkter på de val du gjort inom design, kod, innehåll och copy. Jag delar med mig av mina åsikter för att vill hjälpa dig med din sida och dina färdigheter inom webområdet.

Angående sidan och dina svar:

Tabeller

"Du sa att jag använder tabeller för designen? Fel! Jag har det endast för att skriva ut innehållet!"

Jag sade att du använder tables för layout, vilket i på webbspråk innebär att du använder dem till något annat än vad de är tänkta till - det vill säga till något annat än visa tabulär data. Det är en så accepterad sanning att detta är ett både dumt och onödigt sätt att bygga hemsidor på, så jag tänker inte vidare gå in på detta utan hänvisar dig till google och de antagligen tiotusentals artiklar som skrivits i ämnet.

Kort och gott - tables för annat än tabulär data - vilket artikelinnehåll inte kan klassas som - är inte en bra idé. Speciellt inte för en sida som handlar om CSS och har som mål att lära ut något i ämnet.

Design

Änglar
Gällande design är det naturligtvis en smaksak. Jag har dock svårt att tro att din design faller allt för många på läppen - speciellt inte de något grabbiga änglarna. Skit samma om de är nakna eller påklädda - sexiga poser kanske säljer, men hör inte hemma på en CSS-sida, om man vill uppehålla någon grad av seriositet. Naturligtvis är det ditt val, om du tycker att de är "coola" kan du ju ha kvar dem, men du bör betänka på vilken effekt det kommer ha på din websidas framgång.
Extra om änglar(edit 8): De är nog nakna, eller så har de fruktansvärt tighta byxor på sig som verkligen skär in i skrevet. Dessutom är de fel-alignade - man ser mer av vänster-ängeln än höger-ängeln, i alla fall just nu - tror inte att så var fallet när jag skrev mitt förra inlägg.
Extra-extra om änglar(edit.. 10?): Ängeln som sitter på toppen av sidan är dock rätt söt, hon kan du ha kvar.

Hörn
Vad gäller hörnen tycker jag att de ser gräsliga ut, och jag kan inte minnas någon gång då sådana hörn har varit inne eller, som du säger, "coola". Idag är de i varje fall plåt-ute, och ser som sagt gräsliga ut. Jag rekommenderar att du rundar av dem istället. Förtydligande (edit 4): Det är inte rundade hörn jag vänder mig emot, utan att de är 'kantigt' rundade. Rundade hörn är en bra idé. Hörn som ser ut som att de rundades av Lasse Kongo är en dålig idé.

Inline-js

Ja, vi menar onfocus-blur. Det är en dålig idé av många anledningar, här presenterade i fallande ordning.

1. Det kan visst göras med CSS i alla moderna browsers, inklusive IE på Vista (jag testade till och med nyss, för att vara helt säker). Det leder oss in på:

2. Det är dumt att lita på alla användare har JS, de har de inte. Det är förvisso inte en dealbreaker om deras länkar får outline, men det är ändå helt onödigt att ta till JS för att göra detta, och därför bör man helt enkelt inte göra så.

3. När man väl använder JS är det dumt att göra det inline, det vill säga i HTML-koden. På samma sätt som du säkert inser att det är fiffigt att lägga stil-kod i stilmallar är det bättre att använda event-registrering och liknande för att plocka ur JS-koden ur HTML-dokumentet och därmed få en större grad av "separation of concerns". I dag kan det absolut inte räknas som god sed eller acceptablet att använda inline-JS i nyproducerade sidor. Det hela - som med tables-fadäsen - förvärras genom att sidan är tänkt som en resurs för webbdesigners, vilket gör att mycket större krav ställs på kodkvalitet.

Endast CSS-tips

Vad gäller att enbart köra med tips inom CSS istället för JS kan det vara en tanke för att göra sidan mer enhetlig. I första läget skulle jag dock se till att de tips som presenteras faktiskt är användbara och att de följer kod programmeringssed.

Introduktion till ändringslista

För en lista på vad du kan ändra kan du egentligen referera till min första post, men eftersom att jag inte just nu känner för att göra det jag borde göra, vilket är att skriva ett backend åt en kund, tar jag vad jag skrev i det första inlägget och enumererar dem, eftersom jag är så jävla snäll. Däremot kanske de inte är så enkla, då jag tycker att din sida har ganska stora problem. So it goes. Nedan följer:

Caveat: Varje gång jag skriver att något är fult, menar jag att jag tycker att det var ett mindre begåvat design-beslut (om jag inte gör tydligt att jag verkligen tycker att det är fult). Jag orkar inte skriva ut det varje gång bara, utan använder ful för att mena samma sak. Capisce?

Kursiv text innehåller mina konkreta förslag på vad du bör göra för att styra upp sidan.

Förtydligande (edit 5): Anledningen till att mitt första inlägg inte innehöll några riktigt konkreta direktiv är att det hade känts något förmätet att säga åt dig vad du skall göra med din sida. Men när du nu ber om det:

Ändringslista

Övergripande design
Jag tycker helt enkelt inte att sidans design är snygg. Det beror bland annat på:

1. Dina växt-brushes är tråkiga och passar inte in med sidan. Ta bort dem och sätt dit något nytt.
2. Färgerna på sidan harmonierar inte alls. Fixa ett bättre färgschema.
2. Hörnen på sid-containern är fula. Gör dem runda istället.
3. Änglarna på sidan av main-containern passar inte alls in på sidan. De hade passat om du drev en mjukporrsajt, men CSS upphetsar mig faktiskt inte på det viset. Dessutom är de fult att de upprepar sig om sidan strechar neråt. Ta bort porr-änglarna.
3. Text-logotypen är rätt trist. Designa något snyggare (dessutom borde den länka till index, en vanlig och väldigt användbar konvention)

Index-sidan
Index-sidans innehåll är inte bra. Det beror bland annat på:

1. Cssinspiration.se! i blått. Jag förstår inte meningen.Ta bort.
2. Ikonerna efter "Välkommen till...". Hänvisar till mitt första inlägg. Ta bort.
3. Textens kursivering: Hänvisar till mitt första inlägg. Ta bort eller gör om radikalt.
4. Sjävla texten. Rätt dålig svenska, och ointressant innehåll. Skriv om.

Artiklar
1. Blå "Artiklar"-header. För liten, och fel färg. Gör större och byt färg.
2. Texten på sidan. Dålig svenska, hemsk kursivering.Skriv om.
3. "Kategorier" i blått. Ligger fel, dålig färg, redundant. Ta bort - man fattar.
4. Sättet som artiklarna är indelade på - dåliga färger, inte alignade färg-bars. Byt färger, gör bättre artikel-headers.

Annat
1. Ta bort sektionen till dess att du har något att lägga i den.

Tips och Trix
1. Dålig idé med submit-knappar och javascript. Se diskussion om JS ovan. Ta bort och ersätt med t.ex. alla tips-länkar synliga direkt, eller i alla fall vanliga länkar med event-registrerad JS som visar, samt vanlig länkning som fallback om användaren inte har JS.

Faq
1. Blå bar med "vanliga frågor". Osnyggt. Gör något snyggare.
2. Användandet av pluralis majestatis. Sluta skriva 'vi' tills du har åtminstone en kompanjon som gör ett någorlunda stort arbete på sidan.

Information
1. Blåa bars. You know the drill by know.
2. Svenskan. Skriv om.

Kodning
Det här kan du se som ett work in progress, det tar ett tag innan man skriver acceptabel kod, och man lär sig nya saker hela tiden. Läs på om semantisk kod (men gör det inte till en religion som många webbutvecklare gärna gör), släpp tables för allt som inte är tabulär data, lär dig använda eventregistrering och liknande så att du slipper inline JS, skriv så effektiva kodstruktur som möjligt, och så vidare, och så vidare.

Avslutning

Hoppas att du har nytta av vad jag skrev. Ställ gärna frågor om det är något du undrar över.

Lycka till!

Fotnot

Jag har skrivit över 2200 ord med kritik, hjälp och råd om din sida. Snart fakturerar jag fan.

Fotnot 2

När jag skulle spara förra fotnoten sket sig något rejält och alla ÅÄÖ blev till ? efter mangling i w3s-systemet. Då var man glad att man nyss pastat skiten till word för ordräkning, annars hade nog neme legat risigt till.

Ändrat totalt 14 gång(er), senast 16/10 2008 00:45 av monkeycid

Jag vill bara tacka dig! Det är ytterst få som kommer med sådan kritik som du gör. Är van vid kritik som detta "Bra sida", "Dålig sida".

Design har jag alltid haft problem med och det är sällan som jag lyckas. Nu har jag fått mycket bra tips om hur jag kan förbättra den. Ängeln högst upp hade jag tänkt behålla som ett kännetecken på min sida. Jag kommer behålla denna designen som den är tills jag gjort ett nytt försök. Var så säker jag lägger in den här igen när den är klar!

Något jag också har stora problem med är struktur och text. När jag skriver uppsatser i skolan eller artiklar är det en annan sak men just när jag ska lägga in text på mina dokument så blir det rent ut sagt "Skit". Det är något jag får jobba på. Ser ni något fel i mina artiklar eller någon annan stans kan ni alltid maila mig.

Jag vet inte riktigt hur jag ska göra nu då jag har börjat marknadsföra mig. Jag får väl smyga in med en ny verision utan att någon märker något =)

Än en gång tack. Du verkar ha bra koll på det här med webbdesign.

EDIT:
Det där med koden. Den var väl inte ful på något sätt förutom där jag använde tabeller? Har faktiskt validerat koden på alla mina dokument samt försökt snygga till den lite, haha =)

EDIT2:
Vad tycks om detta:
http://rapidfiles.net/images/30158design.png

Något i stil med det eller?

Ändrat totalt 3 gång(er), senast 16/10 2008 22:37 av Viggz

Viggz skrev:

EDIT2:
Vad tycks om detta:
http://rapidfiles.net/images/30158design.png

Något i stil med det eller?

Är ett steg åt rätt håll, men menyn är hyffsat tråkig. Dels är den bredare än resten av sidan, dels så passar inte det blåa in och sen så känns det konstigt men en fyrkantig låda när själva innehållet är i en ruta med rundade hörn. Du kan ju titta på sidor som exempelvis www.patterntap.com ifall du behöver inspiration.

Bakgrunden är helt klart mer "neutral" nu, men jag vet inte riktigt om jag gillar att du använder hälften av regnbågens färger. Håll dig till något naturtema när det gäller färgen så blir det nog bra (dvs, grön-gul-rött, tänk sommar/höst). Sen kanske det är lite väl få löv, försök gärna att göra något pattern eller något som följer med hela sidan, just nu är det ju bara i sidhuvud och sidfot där designen är intressant.

Nu vet jag inte om monkeycid redan nämnt det eftersom han skrivit en hel del, men typografin på sidan behöver nog också en liten titt. Just nu är det väldigt liten text på relativt stor yta vilket gör det jobbigt att läsa i längden. Några typografi-regler jag brukar köra med för brödtext:

• 55-65 tecken per rad (inklusive mellanslag)
• 140-160% i radhöjd (line-height i CSS)

God typografi gör längre texter otroligt mycket skönare att läsa, men det är en konst för sig också.

Okej, jag hade inte tänkt använda denna som design utan det var endast ett exempel på hur min design kommer se ut om jag nu "orkar" göra en ny. Dock känns det som all inspiration har försvunnit för tillfället vilket inträffar då och då (tråkigt). Så det är kanske bättre att vänta på ny inspiration än att göra en massa fula designer hela tiden.

Jag lovar att säga till när jag lyckats med en design jag känner mig stolt över. =)