Permalänk
Medlem

Kritik på webbsida

Det var länge sedan man skrev här men nu har jag suttit och knåpat med ett projekt i några veckor och äntligen fått fram något som man vågar visa upp.

Det började som en idé för säkert 5-6 år sedan och efter att aldrig ha blivit nöjd med designen har jag nu äntligen hittat något.

Jag kan kort dra vad denna webbsida innebär:
Sidan heter TracksRadio, ett namn jag fastnade för även om sajten inte sänder radio. Hade en idé om att sända webbradio när jag var yngre men jag vet inte vem som vill lyssna och dessutom är det på tok för dyrt. Sidan är hursomhelst en hyllning till Trackslistan i P3 (Sveriges Radio P3 - Tracks) men vad jag satsar på här är att få fram mer statistik över själva lista. Vilka låtar har legat längst, vilken grupp har mest tio-i-topp låtar eller vem har kanske sämsta låten. Detta tillsammans med att jag integrerar det med Spotify och en lite sväng Facebook så får man en väldigt bra lyssnarupplevelse.

Måste bara varna innan att även om sidan fungerar som den ska är innehållet inte "Up-To-Date" Endast låtar från 1984 fram till mitten av 1991 finns med. Sista varningen är också att sidan ser förjävlig ut i Chrome. Fungerar fint i IE och Räven men Chrome har problem med bakrundrsbilder på <tr> i tabeller (någon kanske har något tips på det även om google inte har hjälpt mig).

Här är adressen: TracksRadio
Var snälla och lämna gärna en rad om vad ni tycker.

/Hannes D.

PS. det kan finnas buggar

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem

Rolig sida, har bokmärkt den för att leka med efter jobbet.
fick "Error - 404 Page does not exist!" från länken.
spotify länkar funkar inte för mig, spotify startar men spelar inte låten.

Gillar designen enda som blev lite irriterande för mig var mouseover flippandet på flikarna.

firefox 3.6.3
gratis spotify

Visa signatur

Du behöver inte vaccinera dina barn, bara dom du vill behålla.

Permalänk
Medlem

Håller med mikgus. Sidan är rolig och ganska användbar. Designen är det inget större fel på. Skulle dock önskat lite mer "webb 2.0"-stil på sidan = Kanske lite gradients, effekter, spegling, glans o.s.v. Men det är absolut inget fel på designen! Bra jobbat, fortsätt så och utveckla vidare

Visa signatur

- Shmoo

Permalänk
Medlem

Tooltips och tabellbakgrund fungerar inte i Safari. Misstänker att det inte fungerar i någon Webkit-baserad webbläsare. Du kan testa att sätta background-position till typ -10px 0 på alla tr.top>td+td, eller liknande. Det Webkit gör är att applicera bakgrunden på <td> istället för <tr>. F.ö. borde du ha <thead> och <th> med i din tabell. Då slipper du dessutom sätta onödiga klasser (t.ex. "top") på dina <tr>. Lite padding i cellerna skulle inte heller skada, det ser hemskt ut:

I övrigt kan jag hålla med om att designen ser lite halvtaskig ut, den är lite grå och trist och personligen tycker jag inte om de gigantiska ramarna du har på allting. Bra grundidé dock.

Edit: Sen kan jag passa på att klaga på saker som att sätta text-size i px. Jag satt och lekte en stund och fick ihop en finare tabellstruktur med CSS som fungerar i Webkit och som bör fungera i alla moderna webbläsare också. Tänkte att du kanske ville se den.
Edit 2: Du bör ha någon form av legend till förkortningarna du har i tabellhuvudet också.

Permalänk
Medlem

Tack för era åsikter. och tack "You" för tabellstrukturen. Jag ska försöka göra om tabellen jag har till den typen av struktur istället. Jag vet att designen inte är "top notch" men det är verkligen inte min starka sida så jag vet inte om jag kan göra mycket bättre än så.

Tog nu bort "mouseover" på listobjekten då det faktiskt nog är rätt irriterande.

Jag vet knappt vad Web 2.0 design är. Har ni något exempel?

EDIT:
Nu tror jag att jag har fått till det med thead, tbody och th. Sidan fungerar fint för mig nu även i Chrome.
Ska lägga till Legends till fältnamnen (står som "title") på dem men det kan ju vara bra att man ser det direkt ovanför listan eller något.

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem

Web 2.0 är den nya "stilen" på hemsidor. Alltså jag kan inte direkt förklara med HTML- och CSS-srpåk hur det ser ut men det är helt ekelt lite modernare look. Glans, reflektioner o.s.v.

Hoppas att denna bild visas:

Dock är detta bara ett exempel på vad som förknippas mest med web 2.0. Det är inte taggiga och runda knappar utan effekterna på dem Hoppas det ger inspiration

Visa signatur

- Shmoo

Permalänk
Medlem
Skrivet av Shmoo:

Web 2.0 är den nya "stilen" på hemsidor. Alltså jag kan inte direkt förklara med HTML- och CSS-srpåk hur det ser ut men det är helt ekelt lite modernare look. Glans, reflektioner o.s.v.

Dock är detta bara ett exempel på vad som förknippas mest med web 2.0. Det är inte taggiga och runda knappar utan effekterna på dem Hoppas det ger inspiration

Njah. Web2.0 är väl egentligen hela AJAX-grejen, att själva upplevelsen ska vara mer seamless. Det här med glansiga knappar och dylikt blev väl populärt samtidigt bara.

Vad jag hellre skulle se är lite mer whitespace för att ”öppna upp” sidan lite. Just nu känns det väldigt trångt. Lite mer genomtänkt färgschema och intressantare typografi skulle också förbättra sidan. Att bara slänga på effekter för att det ser ”coolt” ut är fel metod.

Permalänk
Medlem

Jag har hållit på med Ajax och JavaScript en del men jag tycker det är för ohållbart. Jag vill alltid gardera mig att alla kan se den webbsida man programmerar. Om man baserar för mycket av innehållet på JavaScript skiter det sig när man har JavaScript avstängt. Då måste man istället fixa så allt som använder sig av JavaScript även har en backup.

Då lär jag mig hellre HTML 5 där man slipper JavaScript och Flash.

Glansiga knappar och liknande tycker jag bara blir en massa lull lull och kan istället förstöra designen. Hur mycket glans är det t.ex. på Facebook W3Schools eller PHP.net? Men jag är mer en kodare än en designer så jag vet inte så mycket.

Men vad menar du "You" med mer whitespace och intressantare typografi?

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem
Skrivet av harvey:

Jag har hållit på med Ajax och JavaScript en del men jag tycker det är för ohållbart. Jag vill alltid gardera mig att alla kan se den webbsida man programmerar. Om man baserar för mycket av innehållet på JavaScript skiter det sig när man har JavaScript avstängt. Då måste man istället fixa så allt som använder sig av JavaScript även har en backup.

Då lär jag mig hellre HTML 5 där man slipper JavaScript och Flash.

Du lär inte slippa JS helt i HTML5. Nyckeln är att använda JS på ett unobtrusive sätt, dvs. för att förbättra upplevelsen, inte att basera sidan på det. Själva språket är inte svårt att lära sig, och använder man ramverk som jQuery så tar det inte lång tid att implementera lite småsaker. Men att gardera sig så att alla kan använda webbsidan är såklart mycket viktigt.

Skrivet av harvey:

Glansiga knappar och liknande tycker jag bara blir en massa lull lull och kan istället förstöra designen. Hur mycket glans är det t.ex. på Facebook W3Schools eller PHP.net? Men jag är mer en kodare än en designer så jag vet inte så mycket.

Precis min poäng. Lite glans kan vara snyggt, men slänger man bara på utan att tänka så blir det inte bra.

Skrivet av harvey:

Men vad menar du "You" med mer whitespace och intressantare typografi?

Just nu känns sidan inte så genomtänkt rent grafiskt sett. Det är lite "standardtypsnitt, random färgschema,
övertydlig uppdelning"-känsla över den. Om man väljer något snyggt typsnitt (kanske använder @font-face och någon font från t.ex. Kernest), ökar avståndet mellan sidans olika delar, tänker igenom färgschemat (lite ljusare kanske?) och har betydligt mindre tydliga ramar så kan det bli mycket luftigare, och sidan kommer kännas lite fräschare.

Permalänk
Medlem

En fråga till dig "You". Du postade tidigare om tabellstruktur med th thead och tbody. Lånade den och CSS-koden men jag undrar lite över vad "last-child", "nth-child" och "even" och "odd" är. Det fungerar iaf inte i IE.

W3C CSS Validator gillar det inte och jag vet inte om jag gillar det heller. Jag litar inte riktigt på CSS-klasser eller HTML attributer som inte är standardiserade.

Får dåliga vibbar när jag ser "intelligent" (eller vad du vill kalla det) CSS-kod. Sånt som håller koll på vilken som är den sista raden i en tabell eller om raden är udda eller jämn.

Missförstå inte men jag anpassar mig först och främst för IE och Firefox sen Chrome och sist Safari.

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem
Skrivet av harvey:

En fråga till dig "You". Du postade tidigare om tabellstruktur med th thead och tbody. Lånade den och CSS-koden men jag undrar lite över vad "last-child", "nth-child" och "even" och "odd" är. Det fungerar iaf inte i IE.

W3C CSS Validator gillar det inte och jag vet inte om jag gillar det heller. Jag litar inte riktigt på CSS-klasser eller HTML attributer som inte är standardiserade.

De är ytterst standardiserade. De är en del av CSS3. Av någon anledning har W3C inte börjat validera CSS3 än (standarden är inte heller helt klar, även om den nått långt och implementeras av många webbläsare, dock ej IE).

Skrivet av harvey:

Får dåliga vibbar när jag ser "intelligent" (eller vad du vill kalla det) CSS-kod. Sånt som håller koll på vilken som är den sista raden i en tabell eller om raden är udda eller jämn.

Sådan CSS är ytterst viktig för att man ska kunna separera stil och struktur (vilket är själva poängen med CSS). Klasser som "odd" och "even" (eller som i ditt fall klasserna center/left/right1-2) är osemantiska och har inget i HTML att göra. Sådan är mycket bättre att sköta med CSS.

Du kan läsa mer om CSS3 på CSS3.info.

Edit: Att inte lita på icke-standardiserade saker och samtidigt utgå ifrån vad IE gör är lite ironiskt IMO. IE är som bekant den webbläsare som följer standarder sämst och som har flest tillverkarspecifika extensions.

Permalänk
Medlem

Har inte läst något om CSS3 men då är det kanske dags.

Jag tycker inte om IE men jag ser att sidan först och främst fungerar i både Firefox och IE (Helst ska den ju fungera i all Webbläsare, även de textbaserade). De är trots allt de största webbläsarna: Usage share of web browsers - Wikipedia, the free encyclopedia.

Man kan bli vansinnig när IE förstör för en men lik förbannat måste man nästan få det att fungera. Om ens sida inte fungerar i IE känns det som dålig reklam.

Men det är alltid kul att lära sig nya saker.

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem
Skrivet av harvey:

Man kan bli vansinnig när IE förstör för en men lik förbannat måste man nästan få det att fungera. Om ens sida inte fungerar i IE känns det som dålig reklam.

Det är skillnad på att fungera och att se så bra ut som möjligt. Det mesta kan man konstruera så att det i alla fall blir någorlunda bra i IE. (Se t.ex. border-radius i CSS3; det blir ju vanliga borders i IE). Det kanske inte ser lika bra ut, men det funkar. Man får helt enkelt fråga sig om webbsidor måste se likadana ut i alla webbläsare.

Permalänk

Jag antar att du använder en bakgrund för hela tabellen med egen bild uppe o nere, allternativt bakgrund i raderna. Detta medför att när tabellen blir längre så glider den huvudsakliga bakgrunden ut nedanför i IE8.

Kul idé annars, men behöver ljusas upp betydligt. Den känns väldigt mörk och lite á 90-tal.

Visa signatur

Main: FD R2 - CoolerMaster Silent Pro M 700W - AsRock Z77E-ITX - Intel i5 3570K @ Stock - 4GB Corsair XMS3 1333MHz - Corsair SSD Force 3 Series 120GB - Gigabyte GeForce GTX 560 Ti OC 1GB - Win 7

Permalänk
Medlem
Skrivet av adriankarlsson:

Jag antar att du använder en bakgrund för hela tabellen med egen bild uppe o nere, allternativt bakgrund i raderna. Detta medför att när tabellen blir längre så glider den huvudsakliga bakgrunden ut nedanför i IE8.

Kul idé annars, men behöver ljusas upp betydligt. Den känns väldigt mörk och lite á 90-tal.

Har du exempel på detta? För mig fungerar det fint i IE8. Jag använder mig av en bakgrundsbild per rad och beroende på om det är på udda, jämn, först eller sist blir det olika bakgrundsbilder. Själva tabellen har ingen backgrundsbild, bara raderna i den.

Går även att se i CSS-koden innan du antar något.

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem

Jag håller med några föregående inlägg här; att basera en sida på Javascript är det sämsta man kan göra. Man bör endast ha Javascript där det kan behövas för att göra det enklare; fast som man också kan klara sig utan.

Visa signatur

POSTCARDS FROM ITALY

Permalänk
Medlem

Hej, jag bumpar tråden lite. Har nyligen fått reda på att Trackslistan läggs ned och fick därför ett tokryck. Har nu uppdaterat hela listan med alla artister, grupper och låtar från 1984-2010

För er som inte hänger med är det ett projekt jag har som sammanställer Trackslistan i P3. Läs inledningen av tråden för mer info.

Hur som helst får ni gärna kolla in sajten: TracksRadio

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB

Permalänk
Medlem

Tycker det ser bra ut funktionelllt messigt, blev inget större "fan" av din layout dock, men det har väl med att jag själv är webbutvecklare/designer och har starka åsikter om det. Och fick avsmak när det är iframes (något jag hatar mest av allt) för övre och undredelen. Men utöver det så undrar jag nuhur du gör dina grafiska tabeller som du har om man klickar på en låt. Hur genererar du bilderna med tabellerna?

Skrivet av ViLANDER:

att basera en sida på Javascript är det sämsta man kan göra. Man bör endast ha Javascript där det kan behövas för att göra det enklare; fast som man också kan klara sig utan.

Håller med vad du säger, jag personligen tycker absolut det inte är fel med JS, så länge du kan använda sidan likaväl med JS avaktiverad som aktiverad, så ser jag inge problem i att ha en sajt med massa JS
scripts.

Skrivet av harvey:

Hej, jag bumpar tråden lite. Har nyligen fått reda på att Trackslistan läggs ned och fick därför ett tokryck.

Antar detta projekt hamnar på hyllan om du nu inte vidarutvecklar på något sett obreroende av tracklistan, följ andra tracklistor? Jag vet inte.

Skrivet av harvey:

Jag vet knappt vad Web 2.0 design är. Har ni något exempel?.

Här har du lite info om web 2.0.
Web 2.0 - Wikipedia

mvh

Permalänk
Medlem

Hej sweacker. Jag vet inte riktigt vad du pratar om. jag har absolut inga iframes på min sida. Sidan är uppbyggd i DIV:ar och tabeller, inga IFRAMES.

Vad gällande "de grafiska tabellerna" använder jag mig av GD i PHP. Det är i själva verket en bild som genereras av PHP.

En liten hint bara. Läs igenom ditt inlägg innan du postar det så slipper du massa stavfel. Det här är ingen chatt.

Tack för input.

Visa signatur

I been away since 1945

Corsair TX 650W | ASRock P67 Extreme 4 | Intel Core i5 2500K 3,3GHZ | Corsair 2x4GB DDR3 | Gigabyte GeForce GTX 560 Ti OC 1GB | Corsair SSD Force Series 60GB