Hur bygger man en sajt som fungerar både på mobil, tablet och desktop – på respektive form factors villkor?

Svaret är: Responsiv design, med vilket vi bestämt att bygga nya svenska.yle.fi. Beslutet grundar sig på att vi vill tillgodose det behov som uppstår då sajten används på en allt större flora av apparater.

* När du tittar på demon, tänk på att den här versionen är en statisk html kopia, och att den saknar lösningar specifikt per apparat. Den är grunden med vilken vi börjar se vilka tilläggslösningar vi behöver göra för att få den att fungera optimalt i alla apparater.

Den modell vi gått in för betyder att vi byter utseende ‘on the fly’ med media querys beroende på hur stor skärm sajten visas på. För att det skall fungera lika smidigt för ngn som använder mobilen som för ngn vid sin dator behöver man utgå ifrån mobilens behov först.

Mobilen har förutom en liten skärm också långsammare nätförbindelse, och stöder inte alla nya tekniker. På en dator är det möjligt att lägga till saker som saknas i mobilen.

Vi har därför beslutat att leverera en liten bild som standard. Den laddas av alla apparater, som sedan byts ut till en större version beroende på vilken skärmstorlek som används. Problemet med den lösningen är att det uppstår en omritning av sidan, då den större bilden laddas in med viss fördröjning. Det problemet går att lösa genom att kombinera bild-utbytningsfunktionen med CSS (styr sidans utseende). Eftersom CSS:en är skild för varje skärmstorlek kan storlekarna för bilderna också anpassas korrekt.

Rent markup-mässigt vill vi inte ladda hela sökvägen för fem gånger, utan räknar med att lösa det med en egen bildutbytningsfunktion. Så här ser den dock ut i skrivande stund:

<img alt="Yle" src="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-fluid="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_8.jpg" data-src-narrow="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_4.jpg" data-src-normal="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_6.jpg" data-src-wide="http://www.yle.fi/ims/nyheter/2011/43/611054ea59521d6b15/611054ea59521d6b15_5.jpg">

Men layouten då?
I och med de fyra olika storlekar som sidan kan ses i måste man hitta på sådana layoutlösningar (layoutblock) som fungerar smidigt i alla storlekar. Detta för att redaktören som skriver artiklarna inte skall behöva kolla att textmängden inte ställer till problem i ngn viss skärmstorlek.

Ett utmaning uppstod i att omforma raden med fyra puffar bredvid varandra till en med två bredvid varandra. Lösningen ligger i att använda en CSS selector på varannat block för att bryta blocken annorlunda beroende skärmstorlek. Alternativet att krympa spaltbredden skulle ha lett till en allt för stor chans att orden skulle ha varit så långa att de inte rymts inom spaltbredden.

En annan är att ta bort bakgrundsfärger från layoutblocken då de visas i mobilen, då det inte längre är intressant att visa layouten som är gjord för större skärmar. Lösningen ligger i att använda media querys även för att lägga till bakgrundsfärgen i de större skärmstorlekarna, så att de aldrig ens finns i mobilversionen.

Vilka är nästa steg?
Nu går vi vidare och testar denna version, och bestämmer vilka specifika lösningar vi gör per apparat (dvs Android, Ipad, Nokia). Redan nu vet vi att demon inte fungerar så som vi vill på Android (Samsung Galaxy Tab) i och med att den inte visas i tablet läge. Javascript-lösningen är heller inte perfekt, i och med att den räknar skärmbredd annorlunda än media queryn, vilket gör att det i vissa skärmstorlekar blir fel bildstorlek i kombination med de fyra sidstorlekarna. En lösning vi ännu inte gjort, men kommer att ställas inför är hur vi visar och lägger in videon (istället för bilder). Då vi är nöjda med hur det fungerar kommer vi att bygga fler modeller för layoutblocken, och lägga på fler visuella stilar på de modeller som redan existerar.

Sprint 1 demo – Proof of concept

Torsdagen den 20.10. avslutades SYND-projektets första sprint, dvs. en två veckors arbetsinsats med i förhand uppsatta mål. Projektgruppen arbetade fram grundförutsättningarna för att skapa och producera innehåll med det nya verktyget.

Sprint 1 innehöll bland annat:

  • Skapa en installations profil
  • Skapa artiklar
  • Skapa en ämnessida
  • Puffa en artikel på en ämnessida
  • Lås av artiklar (förhindra att två ändrar samma artikel samtidigt)
  • Ge ett utseende till en ämnessida (brandbyline)

I videon ges en snabb presentation över hur artiklar och ämnessidor skapas. Det som visas i videon är en så kallad ”proof of conept” – en ytterst avskalad prototyp för att visa att en viss funktion fungerar. Häng med andra ord inte upp er på kosmetiska brister, det engelskspråkiga användargränssnittet eller referatets oslipade utförande! 😉 Syftet med demonstrationen är att visa enligt vilken logik och enkelhet innehåll skapas.

Efter andra sprinten (3.11) återkommer vi med en ny demonstration över andra egenskaper i Svenska Yles nya Drupal plattform.

Vad är Drupal?

Drupal är ett open source content management system byggt med programmeringsspråket PHP. Om man jämför Drupal med PHP så kunde man använda sig av den här analogin:

Drupal är som att få ett paket med lego, där ett nyckelfärdigt hus redan är byggt, men man får med delar och verktyg för att bygga till vissa saker.

Om man är nöjd med sitt nyckelfärdiga hus så behöver man inte göra mera (att flytta en vägg är svårare än att måla väggarna), men vill man ha ngt som inte existerar i paketet måste man bygga själv eller se om ngn annan byggt en sådan lösning som man kan kopiera.

PHP är ju också till delarna färdigt, men där får du en ritning hur du skall bygga huset, och instruktioner för hur du blandar plastmassan till legobitarna och bygger gjutformarna.

Semantisk webb

Odontologi?!? Nej, inte tandmedicin – ONTOLOGI!

Min förvirringen var stor bara ett par månader sedan kring begreppet ontologi. Semantisk webb hade jag hört som term, men knappast förstått. Likaså begreppet linked data, som inte är riktigt samma sak, men ofta används som ett nästan parallellt begrepp. Men ‘semantisk’ klingade vackert och väckte främst associationer till semiotiken jag bekantat mig med i studiesammanhang ett gott tag sedan. Och att länka data kändes ju tryggt och bekant 🙂 Kort sagt, flumnivån var inledningsvis hög.

Men så småningom började vissa insikter utkristallisera sig:

1. I Finland finns en på global nivå ledande forskningsenhet som utvecklar lösningar som kan komma att förändra infrastrukturen för webbens informationsinnehåll.

2. Nyckelord, organiserade i öppna strukturerade nätverk, som kan läsas av datorer kan på ett avgörande vis hjälpa att organisera den malström av information webben blivit. Dessutom sker oväntade möten och associationer mellan enskilda innehållselement då ontologier kombineras – illustrerat av engelskans vackraste ord – serendipity.

3. Detta är något som redan existerar, som vi kan ta i bruk i samband med vårt webbförnyelsearbete. Och detta är något som på lång sikt har potential att förändra hur vi bygger upp och strukturerar webbsidor. Vilket i sin tur är en väldigt relevant del av vad mitt arbete som konceptutvecklare på svenska.yle.fi handlar om.

 

Igår hade jag nöjet att lyssna på hur biblioteken, informationsvetenskapens högborgar och pionjärer, sedan 2007 (!) aktivt arbetat med webbontologier. Ett arbete vars konkreta resultat man kan ha glädje av i tjänsten Kirjasampo. Sajten är en informationens guldgruva som kombinerar sakkunskap om information och dess förvaltnng med ett levande intresse för litteraturen. Där kan man upptcäka 73k skönlitterära verk, 13k pärmbilder, 7k länkar, 14k fiktiva karaktärer, få bibliotekariens rekommendationer för vidare läsning, mm.

Ett annat mer komplext exempel på ontologiers samverkan är Kulttuurisampo. Kolla där t.ex. Den semantiska versionen av Kalevala för att se hur en texts kulturella kontext kan utvidgas online.

 

Jag hoppas på att kunna fortsätta utvidga de här begreppen under processens lopp. Och också gå in på mer konkreta användningssätt. Men i första hand känns detta som särskilt relevant för att göra vår webb framtidssäker, så att säga. Att ha möjligheten att erbjuda öppen data, ge det sammanhang och därmed kunna erbjuda det informationsrika public service-innehåll som dagens publik behöver.

Micke Hindsberg,
Konceptutvecklare på svenska.yle.fi

lε congεtturε dı Arlεcchıno . . (dε noms d'oısεaux)
By jef safi (writing)  Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic License.

Välkommen till nya svenska.yle.fi

”Är ni helt galna?!”, frågade hon. ”Det är omöjligt att göra så många förnyelser under en så kort tidsrymd.”Reaktionen till trots är det just det vi på Svenska Yle tänker göra.

Förutom att vi helt och hållet reviderar vårt webbtänkande, kommer vi samtidigt också att skapa en ny plattform för publicering av innehåll, förnya vårt webbconcept, förnya det visuella utseendet, reformera journalisternas arbetsrutiner i förhållande till webben, osv. Och ja, det stämmer att vi har knappt med tid och resurser – annars vore ju allt för lätt att förverkliga!

Vi kommer att publicera inlägg här för att öppna upp och dokumentera processerna offentligt, mest för att vi tror på principerna för så kallad öppen design. Bloggen kommer att fungera som dokumentation för oss själva, men också för andra galningar som vill försöka sig på liknande saker i framtiden. En tydlig fördel av att vara öppen är att kvaliteten på dokumentationen kan öka dramatiskt.Vår främsta målsättning för projektet är att skapa en tydligare webbhelhet för Svenska.yle.fi, en helhet som möter användarnas behov bättre än tidigare.

Planeringen av web-reformen inleddes redan i våras och vi har nu ett team med sex utvecklare som sedan måndagen börjat utveckla vår nya publiceringsplattform, det väsentligaste elementet i förnyelsehelheten. Den första fasen varar i tio veckor. Då bygger vi grunden för vårt nya system. Vi planerar att lansera något som våra användare kan konkret ta del av i mars 2012.

I bloggen kommer vi att fokusera på användarperspektivet, alltså berätta vad vi jobbar på för dem som använder våra innehåll och dessutom förhoppningsvis föra diskussioner om förnyelserna.

Parallellt med den här bloggen publicerar vi en mera branschinriktad utvecklingsblogg på engelska, där vi behandlar tekniska webbutvecklingsfrågor, design- och mediefrågor.

Det här är en stor sak för oss och vi hoppas du vill ta del av berättelsen och som användare delta i utvecklingsprocessen genom att diskutera de behov och synpunkter som du har!