Månhus rapporterar att Expressen.se har gjort om designen på sin sajt men man är inte imponerade. Det påpekas att URL-strukturen har gjorts om och att många gamla adresser inte fungerar längre. Något som W3C rekommenderar att man inte bör göra.
Vidare kan man läsa hos Beta Alfa att den nya sajten inte är helt klar och att man siktar på att ha den färdig tills på tisdag. Efter detta ska man släppa nya delar och förbättringar. I kommentarerna kan man även läsa att man använder XHTML Strict fast sidan validerar ej. Och även att det numera finns en version anpassad för mobiler.
Vi har tidigare klagat lite på Expressens röriga design när vi skrev om Bildtkriget. Nu har man fått till ett något mer samlat intryck, även fast det är lite väl packat med information och för lite luft emellan. Enligt min personliga smak alltså.
I samma veva upptäckte vi även ett XSS-hål på Expressens sida. Den 23 februari mailade vi deras nyhetsredaktion för att meddela om bristerna. Vi fick tyvärr aldrig något svar så vi vet inte om detta kan ha varit till någon hjälp.
Nu är i alla fall sårbarheten fixat. Man har flyttat sidan. Kan också konstatera att de nya inloggningsfunktionerna håller en högre säkerhetsstandard.
Tidigare var det riktigt dåligt. Man avslöjade alldeles för mycket av sin interna struktur och det var lätt att förstå hur deras inloggningsfunktioner till bloggarna var uppbyggda. Här publicerar jag nu den XSS-attackvektor som jag fann på Expressen innan ombyggnaden.
Hoppas att det kan hjälpa andra utvecklare att inte göra samma misstag. Bristen var av väldigt vanlig typ och ledde till att vem som helst kunde köra egna Javascript på Expressens domän.
Även TheShipLab använder flash men här handlar det om att designa pokermarker. För att använda deras applikation måste man vara medlem så den har jag inte provat.
Ge oss gärna tips på fler såna här tjänster om du känner till några.
Om du är flashutveckare och har erfarenhet av att skapa såna här applikationer, kontakta oss gärna eftersom vi kan ha ett jobb att erbjuda. Det underlättar ifall du finns i Göteborgsregionen.
456 Berea Street är verkligen en fantastisk resurs för webbutveckling. Det finns dock så mycket information så det börjar bli svårt att hitta. Tänkte nu spara en länk till en sida om kvalitativa typsnitt som jag finner mig återvända till rätt ofta.
Där länkar man vidare till två samlingar, 25 Best Free Quality Fonts och 19 More Free Quality Fonts. De flesta fonterna är helt fria att använda men vissa får endast envändas i privata projekt och ej i kommersiellt syfte. Se till att du läser igenom rättigheterna ordentligt.
Så, nu behöver jag inte leta upp den där länken igen..
På Squidfingers finns det en väldigt fin samling mönster som man får ladda ner och använda på sin egen sajt. De flesta av mönstrena är repeterande och alltså perfekta att ha som bakgrundsbilder. Kan även rekommendera ett besök till Travis Beckhams portfolio som är den som ligger bakom sidan. (hittat hos: En bloggande zombie)
Så här kan man göra för att ange vertikal position på text och bild inuti ett block-element. Man lägger två div runt om varandra och får dem att uppföra sig som tabell respektive tabell-cell.
Att få innehåll att placera sig vertikalt enligt box-modellen har alltid varit lite krångligt. Läs mer på Jakpsatweb.cz där jag hittade lösningen. Finns även länkar till fler som försökt.
Yes! Jag har äntligen fått till mitt bidrag till höstens CSS reboot. En tillställningar som knyter samman hundratals webbutvecklare från hela världen och uppmuntrar dem att kollektivt lansera nya versioner av sina webbplatser.
Det nya utseendet på hemsidan är alltså mitt bidrag till årets reboot. Om ni vill se hur den såg ut innan, så kan ni se en skärmdump från när jag bytte design senast.
Processen Jag är själv ingen webbdesigner utan huvudsakligen programmerare. Jag kan absolut inte tävla med många av de andra deltagarna i "tävlingen". Jag ville skapa en standardsenlig webbsida utan några som helst CSS-hack som min förra version var fylld av. Var rätt så trött på det gamla utseendet och ville ha förändring.
Jag ville ha rundade hörn på en del ställen och till detta använde jag det förträffliga Nifty Corners Tube. Kunde dock inte göra yttre transparens med Nifty CUbe. Det ville ha på de yttersta ramarna. Så jag kompletterade med metoden som finns på 456bereastreet.com.
Inget stöd för IE6 Jag bestämde mig tidigt att inte stödja IE6 eller tidigare versioner av Internet Explorer. Framför allt ville jag prova halvgenomskinliga PNG på en del ställen. Så om du inte ser min logga överst på sidan eller om ramarna ser konstiga ut så använder du antagligen IE6.
Fler rebooters Det finns många fina webbplatser som deltagit i år, jag kommer uppdatera detta stycket allt eftersom jag hittar fler trevliga bidrag.
Jag gillar bidraget från 32framespersecond.com har gjort ett vacker collage med många mönster.
Den tyska designer-byrån Mein Brandenburg har gjort ett absolut mästerverk. Väldigt fina bilder i galleriet också.
Gillar också Edoardo Sabadelli som är utveckare och har gjort en trevlig upplyftning.
Weknowhtml.com har gjort en stilig design med en groda som maskot.
Tillgänglighet på webben är ett aktuellt ämne just nu och har varit det ett bra tag. Att ta del av innehåll och läsa text på en skärm är mycket mer ansträngande än att läsa en hederlig gammal bok. Det är därför av största vikt att man gör det så lätt som möjligt för besökarna att ta del av innehållet man vill kommunicera. Annars är risken att de lämnar webbplatsen utan att ens gett den en chans. Sverige är ett land som är känd för relativt bra handikappsanpassning i största allmänhet. Men på webben får svenska sajter väldigt dåligt betyg enligt en undersökning som konsultföretaget Funka Nu har genomfört på uppdrag av Internet World.
- Kunskapen bland Sveriges sajtägare om tillgänglighet är fortfarande oväntat låg, säger Internetworlds chefredaktör Magnus Höij. Den dåliga tillgängligheten gör att företagen väljer bort stora kundgrupper och därmed stora intäkter.
Cap&Design skrev för ett tag sen artikeln "Tio dödssynder i webbmakeri och hur du undviker dem" där man skriver om några av de vanligaste fallgroparna vid designarbetet för webben. En av dödssynderna de nämner känner jag väl till, nämligen att använda för liten typsnittstorlek. Designers gillar liten text för det blir mycket snyggare textblock. Det har länge varit populärt att ange fontstorleken i 10px Verdana som resulterar i en stort sätt oläslig text. Som tur är går trenden mot att tänka mer på användarna. Jag menar de flesta vill ju bara kunna ta del av informationen på enklast möjliga sätt. Att sen några få designers surfar in och tänker, "oj vilken stor och klumpig font de använt" kan man väl stå ut med.
Det måste vara skönt att läsa texten, säger Paul Collins. Det bästa är att följa ett grundläggande typografiskt regelverk, precis som du gör i tryckta tidningar och magasin. På webben händer det ofta att en designer skapar en väldigt tilltalande visuell upplevelse, men så går det inte att läsa texten!
Egentligen skulle jag vilja citera hela paragrafen om typografi på webben från Cap&Design för den är så fruktansvärt bra. Men det blir lite för långt så tänkte bara nämna en sak till om valet av typsnitt. Som jag skrivit om tidigare så finns det inte så många typsnitt som man kan använda på webben. Detta leder till att designers vill göra om stor del av texterna till gif-bilder så att de ska kunna använda sina favorittypsnitt. Visst är det tråkigt att man är så begränsad men det är fortfarande smartare att använda html-text i största utsträckning. Här kommer ett sista citat:
Frustrationerna över att det finns så få typsnitt att välja mellan på webben leder till exempel till att alldeles för mycket text görs som gif-bilder. Det är tidsödande för den som ska jobba med sajten, och dåligt för besökarna och tillgängligheten.
För den som vill läsa mer om tillgänglighet kan jag rekommendera Anvandbart.se. Via den sidan hittade jag den här intressanta artikeln om hur en redesign gav 20% mer försäljning för en e-handelsajt. Något att tänka på för alla er som driver webbshoppar där ute på nätet.
Jag har tidigare skrivit om vilka typsnitt som är säkra att använda på webben om man vill ha samma resultat på alla olika system. Nu tänkte förklara lite om hur man anger storleken på typsnittet. I CSS har man följande storlekar att välja bland.
* px - pixels, bildskärmspunkter * pt - points, typografiska punkter * pc - picas, typografiska "punkter" * mm - millimeter * cm - centimeter * in - inches, tum * em - typografisk fyrkant * ex - x-höjd
Glöm punkter på skärmar För det första, glöm bort att visa typsnitt i punkter eller picas. Folk är vana vid att arbeta med punkter i program som Word och Photoshop, och sedan felaktigt använt det för att beskriva textstorlekar på webben. Dessa bör inte användas för skärmvisning. Centimeter, Millimeter och Tum bör också undvikas. Den enda gång man ska ange storlek i punkter är i separata stilmappar för sidor som ska skrivas ut på en skrivare.
Fasta enheter cm - centimeter mm - millimeter in - tum - 1in = 2.54 cm pc - picas - 1pc = 12 pt pt - punkter - 1pt=0.353 mm
Pixlar eller em? Pixlar är ju den naturliga enheten på skärmar och lämpar sig väldigt bra. När det gäller typsnitt har det länge vart populärt att ange storleken i pixlar. Oftast vill designers ha lite mindre text och väljer något mellan 9-11 pixlar på brödtexten. En nackdel med detta är att i vissa webbläsare går det då inte att ändra storleken genom inställningarna (t ex IE6).
Relativa storlekar är bästa valet Fler och fler webbplatser inser nu fördelarna med att ange typsnittstorlekarna i em eller % istället för i fasta pixlar. Vad betyder då em? Den typografiska fyrkanten är olika stor beroende på vilket teckensnitt man använder. Den utgår nämligen från bokstaven M i valt teckensnitt. Detta innebär alltså att måttet em varken är beroende av skärmens upplösning eller vilket operativsystem man använder. Det som styr är i stället besökarens egna inställningar för teckenstorleken.
Ett exempel I följande exempel visas all text i 75% av användarens standardinställning. Radhöjden är 133% för att få in lite luft mellan raderna. Rubriken h3 visas i 200% i relation till det värde vi angett i body.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; } h3 {font-size:2em;}
Detta är en beskrivning om hur man gör en liten ikon som syns bredvid adressen i webbläsaren och i bokmärkena. Filen ska vara 16x16 pixlar och av typen ico.
Skapa ikonen
Börja med att skapa själva bilden i ett bildprogram t ex Photoshop. Ett tips är att först göra bilden i 64x64 pixlar och förminska bilden med inställnngen "Bicubic Sharper". Läs mer på denna artikel, där finns även lite felsökningstips.
För att spara bilden i rätt format i photoshop behöver du ett plugin från Telegraphics.
Ett annat enkelt sätt är att spara i PNG och använda denna webbtjänsten för att skapa din favicon.ico. Där kan man även skapa animerade ikoner med scrollande text.
png2ico är ett gratisprogram som du kan ladda hem för att konvertera från PNG till ICO.
Ladda upp ikonen
För att bilden ska synas på din webbsida laddar du sen upp ikonen i rootmappen. Då får alla dina sidor samma ikon. I detta fall måste ikonen heta favicon.ico.
Om du vill ha olika ikoner på olika sidor kan du ange detta i head taggen, du kan nu variera filnamnet.
När man gör html design och anger vilka typsnitt man vill använda brukar man ange några olika alternativ. Alla plattformar som PC, Mac, Linux och Unix har ju alla olika standardfonter installerade. Man anger fonter i CSS enligt följande. Sans-serif är ett generellt samlingsnamn för att ett typsnitt utan "fötter" ska väljas.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; }
Om man vill att samma font ska visas för alla besökare blir man väldigt begränsad. Hittade en sida på nätet som skriver att de följande är de vanligaste webb-säkra fonterna.
* Arial / Helvetica * Times New Roman / Times * Courier New / Courier
Andra alternativ som brukar fungera bra är:
* Palatino * Garamond * Bookman * Avant Garde
Några fonter som fungerar bra på Windows and MacOS men inte Unix+X är:
* Verdana * Georgia * Comic Sans MS * Trebuchet MS * Arial Black * Impact
