Superresponsive TV4.se har släppts

In Featured, Headless / Decoupled CMS, Javascriptramverk, Nyheter, Open source PHP, Responsive Design / Mobilwebb by Martin Edenström17 Comments

Update: Nya responsive design www.tv4.se av TV4 inhouse samt Daytona, Fleecelabs och Omegapoint har äntligen släppts, berättar Peter Lind på Valtech (som erbjudit några konsulter) och Per Åström på TV4 Digitala medier.

Vid första anblick laddar dock sajten lite långsamt i samtliga browsers, i flera sekunder ser den rätt märklig ut innan grafiken laddats in (se bild från FF, samma sak i IE och Chrome). Men det går säkert att komma runt detta om den ordning script och CDN-delar laddas in testas och prestandaoptimeras.

När väl sajten laddat in är det en mycket modern och välmatad produktion som visar sig. Som alltid från TV4 Digitala medier.

Och visst är det är en hel del stora objekt där. De största bilderna (på eget “img-CDN“) i den högsta upplösningen är hela 1400px × 700px stora.

Fler artiklar om ämnet:  SkiStar bygger vinterns storsatsning EQPE SkiStarShop med ny partner

http://cdn01.tv4.se/polopoly_fs/1.2676824.1340788916!image/714465188.jpg_gen/derivatives/w450/714465188.jpg

När TV4 gör responsive design andra, tredje kvartalet 2012 ska annonser och video också så klart skalas om. Men toppannonsen verkar svår att få helt flexibel och vissa videoklipp hoppar/hackar i den überambitiösa mediaqueries-lanseringen. Kul på smartphone är att det, för att spara skärmyta, går bra att stänga ned redan visade HTML5-videor. Snyggt.

Sektionsavdelaren på löpet har som “bagde” en bild över ett TV4-program i fokus. Kan misstas för pågående avsnitt, men är redaktionellt valda program i fokus. Varje puff har en nära koppling till en filmvisare, så klart. TV4play.se och Fotbollskanalen.se länkas så klart in här och där.

– Nya tv4.se är framtidens tv-sajt, där vår publik kan ta del av vårt breda programinnehåll och fördjupa sitt engagemang före, under och efter våra sändningar. Vi har haft den växande mobilkonsumtionen som utgångspunkt för sajten.

Enligt Cecilia Beck-Friis, direktör TV4 Digitala medier.

Fler artiklar om ämnet:  Episerver höjer två partners till skyarna, resten buntas ihop

Inget speciellt CMS har använts. Snarare moderna ramverk och tekniker som Heroku, HTML5 samt andra skalbara stödprodukter:

Standards: HTML5, CSS3
Components: Rails, jQuery, Memcached
Software: Textmate, vim, Rubymine

Polopoly var den CMS-produkt som kastades ut.

En Google Docs används för läsarfeedback (!) och Nielsen Online SiteCensus mäter. wwwb.tv4.se med bl a organisatorisk info använder fortfarande den gamla CMS-lösningen.

Kommentarer

  1. Adam Gerthel

    Märkligt att så många responsive design(ers) väljer att göra allting så extremt stort. Bara för att det är responsivt behöver man inte utgå ifrån att alla har problem med synen.

  2. Victor Jonsson

    Vill veta mer :)
    – Hostas allt på Heroku?
    – Använder dom inte Ruby on Rails, eller det bara Rails på backend?
    – Utvecklas alla system in-house? vilka system från tredjepartsleverantörer använder dom?

  3. Victor Jonsson

    Håller helt med! Varför inte sätten en max-width på hela sidan. Likaså bör varje enskild kolumn ha en enskild max-width

  4. Peter Lind

    Mer info om vår setup:

    CMS är hemmarullat, har MongoDB i botten. Ligger hos Basefarm

    Vårt API som all backend-kommunikation går via ligger också hos Basefarm. Även det använder Mongo för lagring av information som vi får in via andra system, tex programinformation. Sök sker mha Solr

    Alla frontar kör på Heroku (gäller både tv4.se och tv4play.se)

    Ovanstående tre appar är skrivna i Ruby on Rails

    Vi jobbar med contiuous delivery (idag gjordes 8 produktionsreleaser av http://www.tv4.se). Brian (TV4) pratar mer om det här: http://www.valtechlabs.se/lunchseminarium-med-brian-riddle-continuous-integration-the-good-bad-ugly

    Vad gäller det responsiva så är den större delen såklart css. Här använder vi sass för att underlätta (se tex respond-to mixin http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32). För responsiva bilder krävs det JavaScript samt vår image proxy som skalar om bilder (eget CDN som nämns i posten)

    Framför tv4.se, api och image-proxy har vi Akamai som CDN

    PS Om ovanstående låter som teh awesome så ska TV4 anställa två utvecklare http://http.tv4.se/2012/06/20/were-hiring/

    Om ni vill veta mer, pinga @tv4_http

  5. Adam Gerthel

    Jo det är nog sant. Kanske för att vi alla sitter på 27″-skärmar, medans slutanvändarna sitter på upplösningar omkring 1280×768. Jag får ibland säga åt våra designers att arbeta i mindre fönster i photoshop eftersom man tappar perspektivet helt när man arbetar med för stora ytor.

  6. Fredrik

    Ha ha? Bästa textverktygen för kod som du kan hitta…

  7. Per Wiklander

    Jag håller själv på att utvärdera Heroku. Något avskräckande kändes det att de bara använder sig av US_EAST på AWS. Eller stämmer inte det längre? Jag tänker att pingtiderna mot API blir onädigt långa för oss svenskar. Antar att statiskt material inte lider iochmed att det kommer ned via Akamai. Har du några tankar att dela med dig av angående detta?

  8. Per Wiklander

    Åhå, nu läste jag att ni kör API:erna på Basefarm och alltså inte Heroku. Nåja, vore kul med ett svar alla fall.

Leave a Comment

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.