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.
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.
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
Kul att visade videoklipp i smartphone kan stängas ned för att spara skärmyta.
Haha. Vim & Textmate som software.
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.
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?
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
Alla utvecklare finns listade här: http://www.tv4.se/humans.txt, både egna och konsulter (Fleecelabs, Omegapoint och Valtech i bokstavsordning).
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
Totalt genomskinligt och utförligt. Tack, Peter!
Fick den av Per! ping @perkovich:disqus
Är inte även icke-responsiva saker väldigt stora idag?
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.
RT:ade denna idag, apropå detta – och kommande utmaningar: https://twitter.com/eriklindebratt/status/217934914543288320
Ha ha? Bästa textverktygen för kod som du kan hitta…
japp, finns i humans.txt.
TV4.se –
Design Load: http://oshyn.com/_blog/General/post/Load_Testing_What_is_Design_Load/
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?
Å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.