Webbutveckling

Hur man bygger webbplatser med fokus på struktur, tillgänglighet och användbarhet (inte så mycket kod). Det var det bloggen handlade om från början.

Dela inte upp din webbtext på flera sidor

Om du har en lång artikel är det sällan en bra idé att dela upp den på flera sidor. Använd i stället en enda lång sida. Att skrolla är inte farligt.

På senare tid har en del webbplatser valt att dela upp långa artiklar på flera sidor, vilket kräver ett klick framåt. Tanken är förstås god, man vill inte skrämma iväg läsaren med för mycket text på en gång. Men det uppstår i stället ett annat problem, nämligen att man måste klicka sig fram och vänta på att sidan laddas klart innan man kan läsa nästa del, och man kan inte heller skaffa sig en enkel överblick. Jag har till och med sett skräckexempel där webbdesignern delat upp varje stycke på en ny sida, vilket innebär att man inte får något sammanhang i texten utan tvingas klicka fram och tillbaka varefter frustrationen ökar: ”Ge mig texten på en gång så bestämmer jag själv hur jag vill läsa den!”.

M3 – ett avskräckande exempel

Tidningen M3 delar regelbundet upp sina artiklar på olika sidor, som synes nedan i denna artikel som är drygt 1 000 ord och 5 800 tecken (lite mindre än två utskrivna A4-sidor text):

M3 har valt att lägga två stycken text på varje sida (med bild mellan styckena), vilket gör sidorna väldigt innehållsfattiga. Google vill i bästa fall ha minst 500 ord på en sida, så den här utformningen är dålig ur nästan alla aspekter.

Problemet bottnar ofta i en (van)föreställning att mycket text är jobbigt för läsaren, och att man bäst delar upp den i mindre bitar. Och det är förstås helt sant, men utförandet har tyvärr missuppfattats. Vad man ska göra är att använda mellanrubriker och andra typografiska element som delar upp texten i mindre bitar. Inte nya sidor. För även om vi traditionellt sett skannar webbtexter så blir internet mer och mer vårt primärmedium för att faktiskt läsa text av olika slag (av det enkla skälet att fler av texterna finns på nätet).

Användbarhetsexperten Jakob Nielsen ger dessutom följande tips när han pratar om Mini-IA: Structuring the Information About a Concept:

If you have a long article, it’s almost never good to simply chop it up into a linear sequence of pages. If the only navigation is a link saying ”continue” or ”next page,” then it’s typically better to stick it all on a single page and rely on scrolling instead of page-turning.

Ett undantag är iPad och andra tablets eftersom de har naturliga gester för att byta sidor. Dessutom bör man på en e-handelssida använda sig av olika sidor vid betalningen eftersom de följer logiskt efter varandra. Först granskar man innehållet i kundvagnen, sedan får man fylla i betalningsuppgifter på andra sidan och till slut, på tredje sidan, får man bekräfta sitt köp. (Man kan ju inte gå till sidan tre utan att först ha gått igenom de föregående.)

Wikipedia – ett inspirerande exempel

Många av Wikipedias texter är väldigt långa, som denna om Bipolär sjukdom, men har utomordentligt bra disposition så att man ändå enkelt kan hitta det man letar efter:

Artikeln har drygt 6 300 ord och 45 000 tecken som ger drygt 14 stycken A4-sidor text. Den är alltså mångdubbelt längre än M3:s webbtext, men ändå betydligt enklare att navigera i. Förvisso finns det ingen reklam på Wikipedia, vilket kan bidra till att den uppfattas som renare, men i det här fallet är vi endast intresserade av strukturen på själva webbtexten. Med ett konsistent val av mellanrubriker och underrubriker har Wikipedia grupperat informationen i logiska block som är enkla att hitta (innehållsförteckningen ligger dessutom överst i texten, inte underst som hos M3).

Jakob Nielsens tips är att dela upp innehållet i delar på detta sätt:

In many situations, the best alternative is to chunk information into individual content units, focusing on logical cohesiveness; you can then describe each unit accordingly and let users navigate directly to the unit that meets their needs. (Note: ”page 3 of 5” is neither descriptive nor deserving of its own page.)

Hur du bygger upp ditt textinnehåll handlar alltså mer om vanlig traditionell textbearbetning snarare än några tekniska finesser som paging (att bläddra mellan sidor). Läs gärna Konsten att formatera dina inlägg och artiklar för att lära dig mer.

Hur vi läser på nätet (och hur dina webbtexter bör se ut)

Objektorienterad CSS

CSS har varit en enkel sak i alla tider – det är ba å gör’t. Men här kommer en idé som omkullkastar hur jag arbetar med CSS: Objektorienterad CSS.

Ett exempel är att man inte ska använda ID i selectors, det vill säga skriva så här:

#post {width: 400px}

I stället ska man bygga modulbaserade komponentbibliotek, vilket kanske låter komplicerat men det handlar om legoblock som appliceras på innehållet.

Man kan fråga sig vad vitsen är med att skriva CSS på det här viset, men uppenbarligen ska det ge snabbare rendering i webbläsaren. I den här videon berättar Nicole Sullivan, som tidigare arbetat med Yslow, mer om hur det fungerar:

Hon har även tillsammans med en kollega gjort verktyget CSS Lint som är ett väldigt strikt valideringsverktyg för CSS.

Vill du börja med objektorienterad CSS kan https://github.com/stubbornella/oocss/wiki vara av intresse för dig.

(Via ReadWriteWeb)

Du har inte rätt att styra vad andra säger om ditt företag

Kritiker

Då och då kontaktar företag mig. De säger ”kan du ta bort dessa inlägg från ditt forum” och pekar på några användare som jämför priser för en produkt. ”De påstår att mitt företag är dyrare än konkurrenterna” fortsätter företagaren och försäkrar att de far med osanning. Men saken är den att du inte har rätt att styra vad andra säger om ditt företag. Du har däremot en rätt att göra samma sak: Att yttra dig.

Det forum jag driver är en mötesplats för människor. Jag har förvisso ett elegant regelsystem som tillämpas strikt, men det säger ingenting om att man inte får tala osanning. Jag betvivlar inte på något sätt att företagaren ifråga har rätt om sitt pris. De är säkert billigast på marknaden. Men det är däremot inte min sak, som drivet forumet, att se till att de påståenden som görs stämmer överens med verkligheten. På en öppen mötesplats har även motdebattörens åsikt rätt att komma till tals. Men med företagarens egna logik skulle jag lika väl kunna censurera honom i stället för användarna.

Häromåret var det till och med ett juridikföretag som menade att det var olagligt att ”förtala” deras företag. Jag skrattade, eftersom förtal är ett brott mot personer. Inte företag. Juridikföretaget hade alltså inte ens koll på den juridik de sålde till sina kunder, vilket är ett bottenbetyg i min bok (som är en Moleskine för övrigt). Deras kommunikation luktade naturligtvis lika bedrövlig som den tjänst de försökte våldföra sig med.

Yttrandefriheten innebär att även obekväma saker får sägas

Jag raderade förstås inget av de här inläggen, utan hänvisar helt enkelt till att vi alla har rätt att uttrycka våra åsikter och att det bästa man kan göra är att själv ge sig in i debatten i stället för att hytta med näven och ropa efter förbud.

Jag har många gånger ställt upp tankeexempel där enbart positiva saker får sägas. Vad det resulterar i är lätt att se eftersom vi redan har sådana länder och vi brukar fästa etiketten ”diktaturer” med snabblim på dem. Om du däremot försöker få den som äger forumet att radera och censurera allt du ogillar så bör du nog överväga att stå i en verkstad och svarva metallkoner i stället.

Så hur hanterar man negativ kritik?

Att dina kunder har flyttat ut på nätet innebär inte att du ska göra ditt yttersta för att hindra dem. Det innebär att du också ska flytta ut på nätet och möta dem där de finns. För som vi kan se ovan så är det en dålig idé att försöka censurera de som sprider dåliga vibbar om ditt företag. Internetmogna företag utvecklar i stället digitala strategier för att hantera besvärliga kommentarer och bygga upp sitt varumärke på nätet.

Några allmänna tips för att hantera negativ kritik om ditt företag på internet:

  • Var personlig. Det heter ”sociala medier” därför att det knyter ihop människor. Vi vill ha ett ansikte på företaget och inte bara ett företagsnamn. Utveckla en strategi för hur du ska profilera företaget i den externa kommunikation. Ska ni ha glimten i ögat eller sträva efter att verka kunniga och trovärdiga?
  • Var transparent. Visa vad du står för, vad du gör och vad du ska göra. Försök inte dölja dina intentioner eller arbetsmetoder. Det ställer krav på ditt etiska arbete och folk kan lättare få förtroende (och försvara dig) om de vet vad vad du sysslar med – och hur.
  • Dela med dig av fakta och information. Om någon säger något som är osant ska du korrigera med rätt fakta och ange källa. Gå aldrig till personangrepp eller börja hota användare. Då bör du säga upp ditt internetabonnemang i stället.
  • Vidta åtgärder. Se till att fixa problemet som du kritiseras för eller kompensera den kund som blivit drabbad. Skyll inte ifrån dig på underleverantörer, eftersom det till syvende och sist är du själv som valt underleverantören.
  • Bemöt kritiken på plats. Det är viktigt att du bemöter kritiken på den plats där den uppstod. Uppstår den på Twitter så bemöter du den på Twitter. Uppstår den på din blogg så bemöter du den på din blogg. Om du inte gör det kommer den negativa kritiken fortsätta att stå obemött (åtminstone ser det ut så). Därför gäller det att vara där dina kunder är, och hålla koll på förändringar.

Vill du inte att ditt personliga namn syns på Google?

Om du googlar på ditt eget namn, vad får du fram då? Många privatpersoner hör av sig till mig och vill att jag tar bort deras namn från mitt forum eller någon webbplats de varit med och arbetat kring. Även journalister som jag köpt (!) nyheter ifrån har velat ta bort nyheterna så att deras namn inte dyker upp vid en sökning. Det du ska göra då är att själv ta kontroll över ditt sökresultat. Bygg en hemsida med ditt eget namn som domän (jag har peterdahlgren.com) och se till att den kommer upp överst i sökresultatet. Du har som sagt inte rätt att censurera. Men du har rätt att yttra dig!

Jag måste samtidigt påpeka att yttrandefrihet är något av mina specialintressen. Förutom att som här förklara hur man bör agera så skriver jag också om yttrandefrihet ur ett politiskt filosofiskt perspektiv på mina andra blogg där jag försvarar yttrandefriheten mot galna fundamentalister som vill avskaffa den för sin egen religions skull.

Tekniken bakom Twitter: MySQL och memcached (typ)

Twitter behöver förmodligen ingen presentation. Men en sak jag däremot alltid undrat över är hur i allsin dar de lyckats skicka och ta emot så många textmeddelanden – i realtid dessutom.

Presentationen nedan visar, om än väldigt tekniskt, hur de lyckats skala upp Twitter och MySQL/memcached för att hantera det enorma antalet textmeddelanden som skrivs varje sekund. Det korta svaret är att de lagrar så mycket som möjligt i minnet.

Såvitt jag förstår har de bytt (eller ska byta) plattform. Men presentationen kan ändå ge några fingervisningar för hur all data ska struktureras för att göras snabbt åtkomlig.

(Via Jonas Lejon)

Dagens webbläsare mer och mer lika varandra

Webbläsarna börjar bli allt mer lika varandra. Från det att flikar började användas har det nu blivit standard. Och sedan Google Chrome introducerades har gränssnittet reducerats ordentligt – till det bättre. Nya Internet Explorer 9 ser också väldigt lovande ut.

Nedan finner du en jämförelse mellan de vanligaste webbläsarna just nu.

Google Chrome 10:

Microsoft Internet Explorer 9:

Mozilla Firefox 4:

Opera 11:

Apple Safari 5:

Kundcase: Webbplats åt frilansfotograf

Det är inte så ofta jag tar mig an att bygga webbplatser åt kunder. Men när en vän ber mig om hjälp försöker jag hjälpa till. Resultatet blev Eggtown.se för min vän Nils som är frilansfotograf.

Eggtown kundcase

Det ni ser ovan är den färdiglevererade produkten.

Tanken var att lägga all fokus på bilderna, även om inte alla bilder finns ute ännu. Framöver ska man kunna klicka sig vidare på porträttfoto och komma till ett litet galleri med exempel på porträttbilder. (Ingen vill ju köpa grisen i säcken.)

Färgtemat går i rosa och cyan, varav cyan är den ordinarie färgen för temat som jag tyckte passade utmärkt som primärfärg. För att inte primärfärgen ska få för mycket övervikt lades loggan i en rosa box som motvikt (tre färger är en bra grundregel att satsa på).

Texterna har jag däremot inte skrivit själv förutom någon enstaka sida samt mikrotexterna (slogan, länktexter, sidfot och så vidare). Jag väljer i detta fall att redigera de texterna som finns, och komma med synpunkter på deras innehåll än att göra all research som vanligtvis behövs.

Som ni säkert märkt är stilrenhet något av mitt kännetecken. Att lägga bilderna ”svävande” med mycket vit yta runtomkring gör att all fokus hamnar på dem och ingenting annat.

På serversidan är det som så ofta en WordPress-installation. Temat som används heter AutoFocus+ och jag har inte gjort så många ändringar förutom att ta bort störande element samt förbättra läsbarheten på texten. När det gäller tillägg är det bara W3 Total Cache och WordPress SEO. Det är för cache respektive sökmotoroptimering.

Tidigare har jag använt WP Super Cache respektive All in one SEO Pack, men de har fått abdikera som mitt ”weapon of choice”. De har helt enkelt inte lika många inställningsmöjligheter. Är man seriös med sin sökmotoroptimering är WordPress SEO något som man bör titta närmare på – den kan även generera sitemaps!

För den som undrar vad Eggtown betyder så fanns det tydligen ett avsnitt av tv-serien Lost som hette just Eggtown.

Så hittar du gratis kvalitetsbilder till din webbplats

Behöver du gratis bilder av hög kvalitet? Vill du hålla dig på rätt sida av lagen? Här får du en guide med 9 sajter där du hittar bilder du kan använda utan att behöva titta i plånboken.


(Foto: GeorgesNijs)

När jag letar efter bilder är dessa fyra mina givna startpunkter:

  • Flickr är helt klart min favorit. Där finns flera miljarder bilder från hela världen. Se till att kryssa i rutan ”Creative Commons” när du söker så kan du hitta bilder som du får använda kommersiellt och till och med ändra.
  • EveryStockPhoto indexerar de flesta bildleverantörer som erbjuder gratisbilder (tänk dig Google Images på steroider). Det innebär att det är enkelt att hitta mängder med bra bilder.
  • Wikimedia Commons har över åtta miljoner mediafiler (och mycket bilder) som du kan använda, där många även får användas kommersiellt.
  • Creative Commons är en licensform med generös upphovsrätt, men på deras hemsida finns dessutom en sökfunktion som kan söka igenom flera olika källor på en gång. Och givetvis är den anpassad till att söka efter bilder som lyder under Creative Commons!

Stock photo

Det finns också speciella bildleverantörer som säljer bilder som om det vore lösgodis. Några av dem har dessutom en del gratisbilder också:

  • SXC.HU har en stor samling bilder med bra sökfunktion och kategorisering av bilder. Perfekt för ditt nya projekt som kräver kvalitetsbilder.
  • Free Digital Photos organiserar royalty-fria bilder som finns i olika storlekar. Det är den minsta bilden som är gratis och vill du har större får du betala.
  • Free Foto säger sig vara den största samlingen av fotografier online. Vill du använda foton måste du dock länka tillbaks till deras sajt.
  • FreeLargePhotos har som namnet säger större bilder. Enkel sida med tydliga kategorier där du måste länka tillbaka om du vill använda bilden.
  • Fotoakuten är en svensk sida som har åtta tusen gratisbilder i hög kvalitet.

GetSimple smart och ultrasnabbt publiceringsverktyg

WordPress i all ära, men att bygga riktigt små webbplatser gör att den gamle trotjänaren snabbt blir tungrodd. Jag vill ha något enkelt. Och det jag vill ha är GetSimple.

GetSimple är ett riktigt bra publiceringsverktyg som passar små webbplatser, och givetvis är det gratis. GetSimple beskriver sig själv som ett publiceringsverktyg som har allt som ett cms behöver, men ingenting som det inte behöver. En bra sammanfattning.

Har du bara tio sidor som ska upp på nätet är den perfekt. Du kan hantera allt i systemet och dessutom ladda upp filer, ändra teman och bygga ut det med plugins. Och man slipper strulet med databaser, eftersom all data sparas i xml-filer. Det gör också att webbsidorna svarar otroligt snabbt i jämförelse med WordPress. Den smarta uppbyggnaden av systemet (med så kallade komponenter som kan infogas var man vill) gör att det blir väldigt flexibelt trots sin enkelhet.

Men vad ska man egentligen ha GetSimple till? Jag kan ta två exempel jag själv gjort.

För det första har jag nyligen lagt in den på min visitkortssida, peterdahlgren.com, där jag samlar allt som berör mig som person. Innan var det bara en handkodad html-fil som jag var tvungen att ändra för hand och ladda upp via ftp, vilket är en tråkig och onödigt komplicerad uppgift. Dessutom svarar sidorna lika snabbt som om de vore html-sidor, vilket är ett stort plus. Jag har märkt att det tar märkbar tid att ladda en sida med WordPress, så jag undviker det om det är möjligt (och innan ni säger något, jag använder redan en cache-plugin).

För det andra har jag installerat GetSimple på naturalism.se som är en liten portal för en filosofisk åskådning med samma namn. Det är en liten portal om just detta snäva ämne, främst med texter från Wikipedia till en början.

Än så länge är det lite skralt med både teman och med plugins. Men jag hoppas vi kan ändra på detta. Det tar verkligen inte lång tid att sätta sig in i hur systemet fungerar. Det är för övrigt byggt i php.