Uppdrag granskning – så byggde vi sajten (del 1)

Postat av Johan Hallberg, Interaktionsdesigner och utvecklare - 31 augusti, 2011 17.04

Det började i Boston, när två frontendutvecklare (Lasse och jag) från SVTi var på An Event Apart 2010. Ethan Marcotte introducerade begreppet Responsive Design, Dan Cederholm pratade om CSS3, Nicole Sullivan föreläste om prestanda och skalbarhet med objektorienterad CSS, Luke Wroblewski uppmanade oss att tänka “Mobile First” och Andy Clarke predikade att vi skulle vara “hårdnackade” och bygga med HTML5. Detta var precis innan upphandlingen för att köpa in ett nytt CMS-system, som skulle ersätta det mallsystem som vi utvecklat och byggt ovanpå Pololpoly 8 sedan 2002, skulle inledas.

På väg hem genom MIT-campus efter en inspirerande dag av föreläsningar i Boston

Vi satt på planet hem och var eld och lågor. Vi skulle snart få chansen att börja bygga det nya svt.se. Ut med det gamla, och vi borde ta chansen att verkligen få in det nya; ett nytt ramverk på det nya CMS:et med HTML5 och objektorienterad CSS3, på ett sätt som gjorde att det anpassade sig för olika skärmstorlekar. Webben stod inför ett paradigmskifte och om vi inte gjorde det här nu så kanske vi aldrig skulle få göra det, utan istället sitta med en HTML4-sajt och svära om några år. Men vi var också ganska nervösa eftersom vi insåg att det var en sak för dessa föreläsare att predika och en helt annan sak för oss att leverera i stora delar oprövad och experimentell teknik på verksamhetskritiska system. Skulle ens någon låta oss försöka? Vi skulle bli tvungna att lyckas förmedla visionerna från Bostonföreläsarna och göra någon slags “proof of concept”.

Under konceptutvecklingen av olika sajter som skulle byggas hade det redan tagits fram en del skisser där innehåll laddades in utan sidomladdningar. Självklart hade vi använt AJAX mycket förut, bland annat i SVT Play, men inte för att visa upp innehåll som borde ha en egen permalänk. Djuplänkning med javascriptdrivna “hashar” gav ingen kärlek från Google och är inte ett stabilt sätt att bygga på. Så för att kunna realisera detta på ett bra sätt ville vi också testa ytterligare en funktion history.pushState som (snart, förhoppningsvis) skulle komma med HTML5.

Vi bestämde oss för att klargöra några saker för att lyckas med detta.

Allt behöver inte se likadant ut i alla webbläsare. Men allt måste se bra ut i de vanligaste och de kritiska funktionerna måste fungera i alla.
Vi måste bygga för de minst kapabla webbläsarna och göra progressiva förbättringar för de som klarar modernare teknik. Detta för att säkerställa tillgänglighet och SEO.
Vi måste nog tyvärr kasta bort all HTML, CSS och Javascript som kommer ur lådan på det CMS vi kommer välja.
Vi måste skapa en CSS-strategi som gör att många utvecklare kan utveckla över lång tid på samma system utan att sajten får problem med vikt och renderingsprestanda.
Vi måste skapa en sån strategi för Javascript också.

Vi började bygga prototyper på wordpress, vi testade olika lösningar och körde på nightly builds av Chromium och Minefield för att testa bland annat history.pushState och ganska snart kände vi oss tryggare. Vi började bygga det som du nu ser på svt.se/ug.

De största utmaningarna med Responsive Design har varit att få redaktörer och grafiker att släppa pixelperfektionen. Det har varit avgörande att jobba iterativt och designa mycket i browsern istället för i Photoshop så att intressenter kan se hur det fungerar.

Koncept, design och utveckling tillsammans i browsern.

Uppdrag gransknings nya sajt är inte bara en sajt utan också den första grundplåten i en plattform att bygga sajter och tjänster på. Den HTML-, CSS- och Javascriptkod som syns på svt.se/ug är början på ett ramverk för hela svt.se. Vi återkommer snart med en mer teknisk bloggpost om hur och vad vi byggt med.

En sista grej. Det finns så klart buggar och barnsjukdomar och saker som vi helt enkelt inte hunnit med ännu men:

”If you’re not embarrassed when you ship your first version you waited too long” / @photomatt

Nu lanserar vi Uppdrag granskning

Postat av Linda Cederberg, Produktägare nyheter, samhälle, sport - 31 augusti, 2011 12.38

Tisdagen den 30 augusti, lanserade vi Uppdrag gransknings nya sajt. En sajt som innehåller en hel del tekniska och funktionella nyheter som vi hoppas ska förhöja upplevelsen av Uppdrag gransknings redaktionella innehåll.

Det har varit en lång och rolig resa att utveckla UG:s sajt. En resa som inte är fullbordad än, men vi är en bra bit på väg. Vi vill gärna ha alla era synpunkter på form, funktion och innehåll för att fortsätta slipa på konceptet.

Uppdrag granskning är ett mycket uppskattat program, med tyngd och integritet, och vi har velat förmedla den känslan även på nätet. Att läsaren ska lämnas ifred från störande grafik och plottriga puffar har varit ledande i arbetet med sajten. Dessutom har vi fokuserat på att i mesta möjliga mån flytta på innehållet och inte på användaren. Något som märks i funktionen där artiklarna fälls ut i löpet istället för att ladda en ny sida. Vi har även valt att ”fälla ut” bilder och videor i artikeln så att användaren inte aktivt behöver navigera utan kan ta del av innehållet på samma plats.

För att integrera det rörliga materialet, som tidigare endast hittades i SVT Play, har vi nu valt att placera programmen under en egen flik på sajten. Fliken heter ”hela program” och kommer att innehålla allt rörligt material knutet till Uppdrag granskning.

Om du ”bara” vill titta på tv kan du fortfarande göra det i SVT Play. Det här är en av de saker vi vill utforska närmare framöver: vilken roll ska svt.se ha och vilken roll tror vi på framöver för SVT Play?

Nyckelorden på den nya Uppdrag granskning-sajten har varit:

Flytta på innehåll inte på läsaren
Lämna användaren ifred
Mycket lugna ytor – white space

Ett helt nytt grepp är att sajten är utvecklad med responsive design. Det betyder att sajten anpassar sig efter din webbläsare och skärm. Det behövs inte längre en mobilsajt eller särskilda appar – en url funkar i alla prylar. Förhoppningsvis kommer detta innebära ett lyft för våra besökare som inte längre måste surfa till mobilsajter och använda appar.

Uppdrag gransknings sajt är, som sagt, fortfarande i en utvecklingsfas. Vi kommer att skruva på form och funktion under en tid framöver. Kom gärna med input och hjälp oss göra sajten ännu bättre. Skriv i kommentarsfältet eller mejla oss på svtwebb@svt.se

Om du vill komma i kontakt med Uppdrag gransknings redaktion eller har åsikter om programmet mejla till granskning@svt.se

Vi bygger framtidens mediesajt. Välkommen in och titta!

Postat av Lena Glaser, Divisionschef SVTi - 31 augusti, 2011 09.45

Har du sett nya Uppdrag Granskning-sajten? Vad tycker du? Om du gillar det du ser kommer du också att gilla… allt det andra vi kommer att göra framöver. Det här är nämligen bara början.

Under den närmaste tiden kommer vi att bygga om och bygga nytt på svt.se. Och vi vill att du och alla andra ska vara med och hjälpa till med planritningarna.

Kom du in via datorn, mobilen eller en surfplatta? Nya UG-sajten funkar på alla skärmar och det kommer så småningom hela svt.se att göra.

Allt fler använder mobilen eller någon annan bärbar skärm, och för oss är det självklart att sajten ska fungera oavsett vilken väg du kommer in. Och att den ska vara enkel att använda, för alla, oavsett ålder och bakgrund. Det du ser är det första steget på vägen mot det vi menar är framtidens mediesajt.

Vi kommer löpande testa och justera det vi gör på nya svt.se, och vi vill att du är med och utvecklar tjänster och innehåll, här på Testbild/Testbildsbloggen. Här kommer vi att berätta om vad vi gör, hur vi tänker och varför vi gör som vi gör med svt.se och med SVT Play-tjänsten. Vi kommer att berätta om nya saker, sådant vi har förbättrat och om vad vi tycker och tänker om sådant som händer på annat håll.

Tyck till!