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