DIY TV-station

Hi

I stumbeled over the following link when I was googling if screenmonkey can be output through a Decklink-card

DIY BROADCAST : How to build your own Internet TV Channel with Open-Source & other goodies

DIY_broadcast_platform_exportweb

 

This blogg by Nicolas Well shows in a for me as a public service-man that the industry still needs public service-companies who are not affraid to try to build something that they need and then share it for free (meaning Ingex and CasparCG).

I could also tips everyone to go and check out the BBC reasech and development. Amaizing stuff

b Markus

(Nästan) hela förra årets besökarsiffror

Här är alltså nästan hela förra årets besökarsiffror för artiklar på svenska.yle.fis olika nyhetssidor eller ämneshelheter. Våren, det vill säga januari-april fattas pga. att vi tog Comscore i bruk först i maj. Men visst kan man hitta en hel del intressanta mönster redan i  det här materialet, kommentera och fråga gärna.

Mest lästa artiklar, 06-12/2012.

 

Och de tre senaste veckorna:

Vecka 51

Vecka 52

Vecka 1

Den tidvis vrickade diskussionen kring Flash och HTML5

I mitt tidigare inlägg presenterade jag ytligt hur vi jobbar med att animera material för Buu-klubbens webbsida i Adobe Flash.

För oss på svenska.yle.fi är diskussionen kring Flash och HTML5 nu högaktuell, och konkreta linjedragningar är att vänta inom snar framtid. Diskussionen har ju på bred front pågått en längre tid, och ibland reagerar man på hur generaliserande och flummig den som värst kan vara.

“Flash är ett problem”

Fel! Flash är inte ett problem. Flash är ett verktyg, och ifall man missbrukar det uppstår problem. Försöker man tvätta fönster med en hammare är det troligt att resultated blir ganska dåligt, och i värsta fall går saker och ting sönder.

Det man ser och hör allt för mycket av är attityder och åsikter som helt och hållet saknar grund, och tydligt beror på blind övertygelse. Vissa tar hela diskussionen väldigt personligt, och jag påstår att folk som är redo att kasta den ena eller andra lösningen ut genom fönstret utan desto mer åtanke har definitivt andra (ofta personliga) målsättningar i baktankarna.

Flash har under årens gång sträckt sig till så gott som allting man hittar på webben, på gott och ont. Exempel som alla känner till är animerade banners, spel och även hela webbsidor byggda uteslutande i Flash. Det är uppenbart att Flash inte är det klokaste alternativet till precis allt man kan göra med det, och därför ser jag det som mer än välkommet att det nu existerar utmanare för de plattformer och för de lösningar där Flash helt enkelt inte är det bästa möjliga.

Det man inte kommer ifrån är att Flash är ett utmärkt verktyg för produktion av spel, och i nuläge är det totalt omöjligt att rakt av ersätta det med HTML5.

HTML5

Vad gäller renodlad webbdesign är HTML5 perfekt. Det erbjuder obegränsade verktyg för designers att producera snygga dynamiska lösningar som har alla förutsättningar att fungera på varje plattform så fort understöd existerar. Det här är också ett exempel på ett delområde där man “missbrukat” Flash allt för länge. Missbruk av Flash har lyckligt vis (med tanke på användbarhet) minskat redan innan diskussionen ordentligt hettade till.
Att man nu kan ersätta Flash med HTML5 då man producerar t.ex. banners, datavisualiseringar eller enbart utveckla snyggare webbsidor är en strålande sak. Jag har personligen höga förväntningar för vad HTML5 och CSS3 i framtiden kan medföra.

Buu

Att införa HTML5 i arbetsproceserna för webbdesign är alltså ingen dålig sak alls. Farhågorna väcks då man börjar höra kommentarer riktade emot spelproduktionen. Att producera spel i HTML5, även lika avancerade som i Flash är ingalunda omöjligt. Exempel finns det gott om. Däremot handlar det om arbetsprocesser och resurser. En grundlig kartläggning av vad som krävs för att åstadkomma det vi nu gör vore på sin plats, förutsatt att nuvarande nivå är nånting vi vill bevara. Faktum är att ingen vet vad det i praktiken skulle kräva att exempelvis producera en motsvarande julkalender som vi erbjöd i år, genomförd i HTML5. Jag kan här och nu berätta att det i nuläget aldrig skulle lyckas pga. bristfälliga resurser och otillräckliga verktyg.
Alternativet skulle då vara att gå i en helt ny riktning, där det säkert finns möjligheter, men det skulle i så fall att ske på en bekostnad av mycket av det som nu är Buu-klubbens webbsida.
Det är upp till dem som fattar besluten att avgöra vilka linjer som skall dras för innehållet. Ett mardrömsscenario är en situation där man slänger in nya arbetsmetoder och processer och förväntar sig samma resultat som tidigare, trots solklara brister i kapacitet.

Realism och is i hatten

Lyckligt vis är det knappast realism att förkasta det ena eller det andra alternativet helt och hållet, utan att utnyttja alla fördelar så gott det går. Strävan till att bemöta användarna på alla tänkbara plattformer utan kompromisser i innehållet torde vara en självklarhet, och med tanke på den legacy vi har kommer Flash att vara en del av vår vardag ännu i långa tider. Vår uppgift är att presentera innehållet så att möjligast många kan utnyttja det. Samtidigt skall vi se till att experimentera med nya möjligheter och se till att också HTML5 med alla sina fördelar blir en del av det vi gör.

2013 kommer att bli väldigt intressant, inte minst vad gäller spelen på Buu-klubbens webbsida!

///Johan

Just nu öppnar sina filer och besökarantal

Hade nöjet att delta i Open Knowledge Festival två veckor sedan. Rekommenderar varmt Michael Edsons presentation – i synnerhet om du jobbar med broadcast media:  http://bambuser.com/v/2996119 .
För att fortsätta i festivalens anda öppnar Första sidans redaktion våra planeringsdokument, dvs. Just nus kalender och turlista att börja med. Blir kanske inte Yles mest populära innehåll men i alla fall.
Och därpå börjar vi publicera Svenska Yles besökarantal. Dokumentet innehåller förra veckans tio mest lästa artiklar enligt huvudkategorier.

BUU, Vega och Yle Fem fattas pga de inte ännu finns på vår nya Drupal-plattform. Siffrorna kommer från Comscore.

Svenska yles besökarantal, vecka 39:

https://docs.google.com/open?id=0B1gre8H-DNuHLUZ6NUF4S21yUUk

Just nu-kalendern:
https://www.google.com/calendar/embed?src=49hrrn0touniq0e6rtvkheqq64%40group.calendar.google.com&ctz=Europe/Helsinki

Just nu-turlista:
https://docs.google.com/spreadsheet/ccc?key=0Algre8H-DNuHdHg3MnJVRGUyTTJlbThRUnc4cHVDdmc

 

Öppen data nytt vapen i
kampen mot korruption

Öppen data kan hjälpa avslöja korruption och ekonomisk brottslighet. Det tror man på OpenCorporates och Global Witness – två organisationer som vill lyfta fram dunkla hemligheter i dagsljuset.

Öppen data i kampen mot pengatvätt

OpenCorporates har skapat en söktjänst där vem som helst kan försöka nysta upp ägarförhållanden i företagsvärlden. Tjänsten är det största öppna företagsregistret i världen.

Söktjänsten innehåller i dag uppgifter om 45 miljoner företag – 377 000 av dem i Finland.

Informationen mår bra av att vara öppen eftersom osunda eller olagliga kopplingar är svåra att hitta, förklarar Chris Taggart, verkställande direktör för OpenCorporates.

Målet är att journalister, organisationer och intresserade medborgare ska kunna bidra med information, och hjälpa avslöja den ”mörka sidan” av företagsvärlden.

– Det är som att leta efter nålar i en höstack. Vi måste börja göra större skillnad mellan den genomskinliga företagsvärlden och den ogenomskinliga – den mörka företagsvärlden, säger Chris Taggart, som tidigare har arbetat som journalist.

Den mörka företagsvärlden drar nytta av komplexitet, förklarar Taggart. Ägarförhållanden och relationer mellan bolag kan vara så invecklade att det är näst intill omöjligt att reda ut dem. OpenCorporates har som mål att registrera varje företagsentitet i världen, med tillhörande information om företagsnamn, direktörer, aktieinnehav, med mera.

Rosie Sharp arbetar för Global Witness’  bank- och korruptionsteam. Hennes team försöker påvisa problemen med att vissa banker låter korrupta klienter deponera pengar.

Sharp säger att det har blivit allt vanligare att brottslingar tvättar pengar via global bank- och företagsverksamhet. Hennes organisation har satt ihop en broschyr ”An Idiots Guide to Money Laundering” som visar hur man kan dölja sin identitet och gömma pengar via rätt kopplingar. Syftet med dokumentet är att på ett enkelt sätt förklara ett komplext ämne.

Pengatvättarna registrerar vanligen sina bolag på platser där bankerna håller ägarförhållandena hemliga. Sådana platser är exempelvis Schweiz, Brittiska Jungfruöarna och Maldiverna.

Pengatvättarna brukar öppna bankkonton i någon bank som inte ställer så många frågor. Sådana banker finns exempelvis i Lettland, uppger Rosie Sharp. Via Lettland kan man sedan flytta pengar vart som helst inom EU.

Rosie Sharps organisation använder öppen data för att påvisa pengatvätt och andra internationella problem. Global Witness gör sina avslöjanden och dokument fritt tillgängliga på webben.

 Stommen för OpenCorporates webbsida är en sökfunktion. Organisationen erbjuder gratis gränssnitt för att återanvända sökfunktionen på andra webbsidor. En sökning på ”Microsoft” ger exempelvis 206 resultat globalt, vilket ger en inblick i hur utbredda tentakler ett stort bolag kan ha.

– Öppen data är inte tillräckligt. Vi behöver också färdigheter, förståelse och inspiration att göra något av den, säger Chris Taggart.

 Länkar:
http://opencorporates.com/
http://www.globalwitness.org/

 Chris Taggart och Rosie Sharp föreläste vid konferensen ”Open Knowledge Festival” i Helsingfors i september 2012.

Theme layer i Drupal 8 – DrupalCon

Under Drupalcon i Munchen kunde man bekanta sig med de projekt som är på gång inför Drupal 8 (planerad lansering Augusti 2013). Det projekt som kommer att påverka flest användare är Spark / Dries tillkännagivande av Spark. Spark är en WYSIWYG editor som fungerar direkt på sidan, responsiv layout designer, mobil verktygsfält och mobil anpassningar. Allt detta gör det mycket lättare att se hur de ändringar man gör ser ut.

En demo hur Spark fungerar

Spark kommer att finnas som contrib för D7, och målet är att bli del av Core i D8.

Kärnan i Spark utgörs av Aloha Editor som Drupalcon till ära tillkännagav att de ändrat sin licenseringsmodell så att Aloha kan användas i Drupal utan restriktioner.

Aloha Editor är den mest imponerande WYSIWYG editor jag sett. Det är inte bara kodmässigt en bra lösning, utan den ger också användaren en mycket bättre användarupplevelse – mer i stil med hur man redigerar text i Word eller Google Docs. Den klarar till och med av att hantera text som kopieras från Word utan att markupen blir full av onödig kod.

En klar fördel med Spark är också att ”förhandsgranska”-funktionen blir onödig. Detta för att ändringarna man gjort ligger färdigt framme med rätt utseende. På samma sätt som i ett textbehandlingsprogram kan man fritt ändra, för att sedan spara då man själv är nöjd.

Vi funderar på att antingen ta i bruk Spark på Drupal 7 eller att testa Aloha Editorn ovanpå våra befintliga lösningar. Att sätta den på de existerande redigeringssidorna (ej inline i frontend) vore enbart i sig lockande då redigeringsupplevelsen blir så mycket bättre.

Ett annat mål är att snabba upp front end, då den just nu i många system, inte bara Drupal tar en oproportionerligt stor del av tiden. Se t.ex. ”The performance golden rule”.

På BoF (Birds of a feather) diskussionerna om Drupal 8 talades det mycket om Twig som den nya lösningen för templat-lagret. Det verkar som om det råder en konsensus om att det är den bästa vägen framåt. Det jag främst tycker verkar fint är att man kan hämta ut innehållet ur Arrayn på ett tydligare sätt. Många funktioner flyttar också ut från templaten.

Här kan du se presentationen och höra ljudet från A designer-friendly theme system in Drupal 8?

Om du vill testa Twig finns det ett sandbox projekt här. Nackdelar som det talades om är Twigs licens-modell som ännu inte är kompatibel med Drupals, och att Twig som system på ett sätt introducerar ett till lager i templatsystemet.

@JohnAlbin visade också sin kartläggning av theme layer i D7 jämfört med D8. Det är en viss skillnad i komplexitet 🙂 Uppdatering 11.9 – här kan du jämföra kartläggningen av D7 med den i D8.

Det talades också om möjligheten att skapa genriska hooks, vilka kunder återanvändas av contrib moduler. Skulle isåfall kunna betyda mindre templat-kod i modulerna. Blir intressant att se om det blir av.

Kan också notera att temandet väcker större intresse, t.ex. tog sittplatserna slut vid åtminstone två tillfällen.

Missa heller inte Drupal 8: What you need to know.

Övrigt
@emmajanedotnet höll en bra presentation av vad man bör tänka på då man väljer bastema. Det här skulle jag själv ha velat höra för ett och ett halvt år sedan. Frågan är ifall ngt kunnat göra jämförelsen då, rätt mycket har ju hunnit hända. Har du inte valt bastema ännu, kolla på denna.

Kommunalvalet utmanar PMMP och nakna män

Allra först skulle jag vilja tacka alla som har varit med och byggt den nya webben. Helt ärligt, det har gått riktigt, riktigt bra hittills.
Nya nyhetswebben fungerar bra, i synnerhet med tanke på att vi drog i gång i slutet av april. Vi har haft de nya sidorna live i endast fyra månader, men redan nu tycks alla klara sig helt själv och Just nu-telefonen ligger tyst. Det är bara att jämföra med maj då telefonen ringde minst 20 gånger varje dag.
Enligt besökarstatistiken är vi likaså på rätt väg, trots att sommaren är en svår tid att jämföra – isynnerhet när X3M i juli hade närmare 300 000 sidvisningar för en viss artikel. Inte alls illa med tanke på att hela vår sajt brukar ha omkring 350-450 000 sidvisningar per vecka.
Om vi bara skulle räkna sidvisningar kunde vi lägga ner allt annat och bara fokusera på bildgallerier med kvinnliga popartister och nakna män. I och för sig en hårt konkurrerad marknad. Skämt åsido, vi borde alla göra vårt bästa för att följa X3M:s goda exempel. Hitprodukter i stil med PMMP-bildgalleriet är det absolut bästa sättet att höja vårt besökarantal. Utan sådana har vi väldigt svårt att locka nya besökare överhuvudtaget. Och X3M är en ju våra populäraste webbsajter (30 400 besök i veckan) tillsammans med Västnyland (24 600 besök). Inrikes (20 900 besök) och Utrikes (14 350) hade sammanlagt 35250 besök under vecka 33.
Ett enkelt sätt att få fram nya dragplåster skulle vara att i större utsträckning utnyttja all den planering som läggs ner på tv- och radioproduktioner också på webben. Och här är vi ju på god väg, kolla bara till exempel Radars webbproduktioner.
Men visst känns det som om det fortfarande är tv, tv, tv, radio, radio och webb, i just den ordningen. Vi behöver mer (medie)kanalintegration helt enkelt, ett bra tv- eller radioprogram skapar helt säkert också intresse för motsvarande webbinnehåll.
En annan sak som ser ut att utvecklas väl är vår kontakt med publiken (kolla t.ex. Åbolands bildgalleri). Artikelkommentarerna har kommit tillbaka efter en kort paus, Patrick Holmströms Ikea-scoop drog 90 kommentarer på bara några timmar. Och oftast är diskussionen riktigt bra. Faktiskt så pass bra att vi kanske borde ändra på vår rangordning och uppskatta publikens inslag lika högt som våra egna alster. Och för att fortsätta den här utvecklingen måste vi bli ännu bättre på interaktivitet och närvaro på sajten och därtill kunna öppna upp våra egna processer. Vara mer öppna, gästfria och delta helt enkelt. Här kan vi lära oss ett och annat till exempel av HBL och det är en av anledningarna till att vara glad över att KSF Medias Johanna Törn-Mangs kommer till Yle i oktober.
Helt konkret kommer höstens största projekt på webben att vara kommunalvalet – förstås. Där siktar vi på att förverkliga i stort sett allt som jag har skrivit om här ovan och därmed permanent lyfta vårt besökarantal. Det är också orsaken till att vi satsar på att ha valinnehållet på våra vanliga sidor i stället för att bygga en stor valportal (som sedan skulle försvinna). Men visst har vi en valsida också, den hittar du som vanligt på svenska.yle.fi/val.
Trevlig höst
Mattias
redaktionschef, Just nu

Datajournalistik i SYND

Nu när vi har använt Svenska Yles nya Drupal eller SYND i ett par månader är det tid att se hur systemet kan utnyttjas. Drupal är flexibelt och det möjliggör skapandet av olika innehållstyper.

Jag är mest interesserad av hur vi kan göra datajournalistik och andra visualiseringar i systemet. Vi har redan gjort några och jag tänkte prata lite om dom.

Vad har redan hänt

Visualisering gör det lättare att upptäcka skillnader.

Första större visualiserings jobbet som vi publicerade i SYND var en karta som visade hur mycket alkohol som säljs i finska kommuner.

Kartan bidrog till helheten i Radar:s rapportering om alkoholanvändningen i Finland. Den huvudsakliga produkten var radioprogrammet, men kartan publicerades samtidigt på Radars webbsida (som är publicerad i SYND).

Kartan var interaktiv vilket betyder att man kunde peka på kommuner med musen och sedan fick man mer information och statistik om den valda kommunen. Jag tycker att interaktiva visualiseringar är mer intressanta än statiska infografik, när användningen av visualiseringen känns mer som ett spel. Det att det är roligt gör att man utforskar datan mera.

Kartan var mycket populärt och då den är gjord med HTML5 så fungerar den med alla apparater och plattformar. Kartan funkade också med mobila enheter när den var bara 300px bred.

Google Forms möjliggöra att göra saker snabbt.

Andra och olika typers projekt gjorde vi på sommaren. Det var ett frågeformuläret som hade fem enkla frågor som handlade om våra nya försvarsminister Carl Haglund.

Formuläret var gjort med Google Forms och det var mycket snabbt att göra. Visualiseringarna gjordes också i Google Forms verktyg. Utredningen fick nästan 600 ansvar.

Den var inte en gallup, men det var ett fint och lätt sätt att involvera användare med innehållet.

Vad händer just nu

Nu jobbar vi mest med ett större och längre projekt som behandlar politiker i finlandsvenska kommuner och deras kopplingar till företag.

Systemet ska innefatta alla finlandsvenska kommuner och avsikten är att man skall kunna bläddra bland alla olika typer av informationen som har sparats i systemet. Den här informationen innefattar exempelvis namn, parti, ålder och information om kommunfusioner.

Visualiseringarna i Maktbasen projektet är interaktiva.

Systemet är skapat i SYND med Drupal och vi har skapat egna ”entities” för att kunna skräddarsy dem enligt behov. Det har varit en utmaning att använda sig av tidigare erfarenheter inom traditionella databasmodeller, när man vill bygga systemet ”the Drupal way”. Jag tror att vi har gjort bra jobb och klarat dessa utmaningar.

Datavaalit gör ett liknande projekt där alla finska kommuner ingår, där saknas dock kommunernas förtroendevaldas kopplingar till företag. Vi samarbetar med Datavaalit-gruppen, men rent tekniskt är det två olika lösningar.

Vad vill vi göra i framtiden

Jag hoppas att interaktiva visualiseringar mer och mer kommer att bli en del av vardagen i våra nyheter. Det finns många goda exempel från världen om hur man berika innehållet med informativa visualiseringar.

Många olika diskussioner pågår och det ser ut som att allt flera aktörer börjar göra visualiseringar. Mycket utveckling med andra ord, det blir spännande att följa med utvecklingen den närmaste tiden.

(Tack Mårten för korrekturläsning)

Case: svenska.yle.fi as a mobile first responsive design

This is a blog version of the presentation I held at Drupal Camp Helsinki 2.6.2012

If you prefer, watch this recording of the presentation:

So why mobile first web app, and not an app or mobile specific site?

We knew we wanted to have a mobile first responsive design, so we talked to people about what their experiences where and became even more convinced that this is the way to go forward.

I recently read two good blogposts on the subject, one by Josh Clark

“First, a growing number of people are using mobile as the only way they access the Web. A pair of studies late last year from Pew and from On Device Research showed that over 25% of people in the US who browse the Web on smartphones almost never use any other platform.” … ”There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach them on mobile. We can’t settle for serving such a huge audience a stripped-down experience or force them to swim through a desktop layout in a small screen.” – Josh Clark

in Netmagazine and an other on by Bruce Lawson in Smashing magazine.

It pretty much summarizes they way we at svenska.yle.fi look at it.

By designing the system (not site, I see it much more as an ecosystem when designing responsive sites) mobile first, and not hiding content from mobile users you are reaching a bigger audience. The same by not requiring users to download an app and keep updating an app. It is also less expensive to maintain, and one has to remember the cost of marketing the app so that users find it.

With an web app/mobile first site shared content is always displayed in the best way possible for the end user, depending on the device.

The perhaps most successful web app is Financial Times. It is much more device tailored than our site, but we embraces the same thinking.

When we look at our numbers, we have gone up from 8.5 % mobile usage (of total traffic) in January 2012 to 13 % in May. – svenska.yle.fi

Actually making it mobile first

Making the site mobile first sets some limitations, and also affects the design process. People are designing from mobile to desktop, or from desktop to mobile. In my experience it works best to work on all sizes at the same time, while keeping the technical limitations of mobile in mind (designing in the browser, read more in this slide by Edward O’Riordan @edwardoriordan (Front End United 2012 Amsterdam).

Drupal, Omega and mobile first

The way Omega/Drupal includes (compresses) the CSS files prevents us from using javascript to load the CSS files only when needed (blogpost about how it could be solved).

The reason for wanting to use Javascript is because media queries always are loaded even though they are not used.

I am planning to try out if changing the weights of the CSS groups can join some of the compressed CSS groups we currently have.

We also ran into extra work with IE specific CSS files, as it is impossible to use weights to add them after the Omega CSS files. We ended up using more targeted CSS selectors for IE.

The amount of DIV’s is also something that is not optimal, as you can see in this image. More than half of the DIV’s could be removed.

Which theme, fluid or set of sizes?

The hottest theme in 2011 was Omega, and we decided to go with that one as we saw it as opportunity to get something off the shelf that was not perfect, but works. We wanted to focus our resources on making the solutions that were not available to us the best possible (and theme independent).

We decided to go with a set of sizes because it gives us better control over the layout.

I was asked a question during the presentation; ”What theme would you use if you would start from scratch with the knowledge you now have”. The answer is I don’t know, I would definitely look at what options are available – and most likely end up with a custom theme because of our specific needs.

Layout

We decided to go for a very sparsely decorated layout, to keep the UI clean and to make the basic responsive design as light as possible. We wanted to gain experience before we had built a swamp that it is difficult to dig yourself out of.

I also wanted to develop a new method, and embrace the possibilites – while leaving pixel perfect behind.

To do this I defined areas for graphics (at this stage the top of the page can be modified and display anything you like to make in Photoshop). This way I kept the layout completely CSS generated. An other defined area is for banners. They can be added anywhere, but we are still in the process of working out how they best are constructed.

Images

The first thing we tackled were images. Fortunately we have our own homebrew Image Management System (IMS) that made it possible to get the images in many different sizes.

The solution we implemented first displays a regular small image that works on mobile, and then if javascript detects that the screen size is wide enough switches to a bigger size.

First load

<img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_6.jpg" width="200" height="113" class="imsImg" data-ims-id="58628" />

After the javascript has been loaded

<img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_5.jpg" width="200" height="113" class="imsImg processed" data-ims-id="58628" data-src-fluid="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_5.jpg" data-src-narrow="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_4.jpg" data-src-normal="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_6.jpg" data-src-wide="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_5.jpg">

In the javascript we have set different sizes to be loaded depending on the image size that best fits the layout template the image is displayed in. The layout template also has different settings per size.

To prevent the images from making the page flicker when the bigger image is loaded and inserted into the page we specified the image size in the CSS. This makes the image look blurry for a while when the page is loading, and then has a “sharpen” effect when the bigger image is displayed.

Video & audio

Most of our videos and audio are embedded from our media service Arena, and fortunately it was also being rebuilt at the same time. This meant that we got a Flash free first embed, that has a big effect on our mobile first approach and the rwd solution is out of the box. The solution could be improved by making the embed mobile first (the image is one size only). Flash is required for playback.

For Youtube and Vimeo we are using FitVids.js

KB size and http requests

The image and video solution means that the KB size was solved. One can argue that only one image file should be sent to the desktop users (instead of two), but I find the solution benefiting also them, because the image will display faster even though it is blurry.

To limit the amount of http requests, KB size and user experience (quick load for all sizes) we made the social media share buttons load only after the user on desktop hover on the text. On mobile they are loaded only after the user clicks on them.

To make articles load quickly only the article itself and content closely associated with the article is loaded (article text, image, lists of related articles, most read, most commented). If the javascript detects that there is sufficient screen space it loads the content of the subject page the article belongs to. If not, links are displayed that takes the mobile user to the same content.

So did it pay off? I think so 🙂

The data was collected with Yslow for Firefox.

The reason the subject pages are not lighter on mobile is that we currently do not have a breakpoint that would allow us to not load part of the page content on mobile (but offer a link like we do on articles).

Lessons learned

In Views, always unclick to remove the extra markup – and give the block a unique style name so that your CSS is not dependent on block names.

We used a small image in our first iteration, and got feedback on that it was to small – so we changed that. Now we get some feedback that it is too big. I think think this is related to the fact that mobile is becoming the primary device, and you want to have the full version – you don’t want a preview that forces you to use a desktop to see the full image. So some more work needed to make all user types happy.

Iframes and auto height is causing grief. No perfect solution yet.

What to do next

  • Improve the theme / switch to a newer one
  • Improve on Twitter, Facebook integrations – they are not working correctly with the responsive design
  • Other external resources such as data visualizations, weather, sport results
    Responsive visualisation with Raphael
    Small enough to work on mobile
    Sports results – not responsive at all
  • Work more with the layout
  • Implement bigger images on desktop (that is why we currently have a grey box next to images in articles – backend is not done yet)
  • Build a content breakpoint on subject pages

This is the presentation itself (via Slideshare)