Case: Svenska Yle -     Implementing a mobile     first responsive designTwitter: @mseiplax                               ...
Why mobile first web app, and not an       app or mobile specific site?“First, a growing number of people are using mobile...
• By designing the  system mobile first, and  not hiding content from  mobile users you are  reaching a bigger  audience• ...
Actually building mobile first• Making the site mobile first sets some  limitations, and also affects the design  process•...
Drupal, Omega and mobile first• Compression of CSS  – Omega structure prevents loading of CSS per    set of widths via JS ...
Which theme, fluid or set of sizes?
Layout• We decided to go for a very sparsely  decorated layout, to keep the UI clean and  to make the basic responsive des...
Loads of markup
Images• Small image that works on mobile, if JS  detects enough screen space  switches  to a bigger image• JS loads & ins...
CodeFirst load <img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/201...
Video & audio• Most of our videos and audio are  embedded from our media service Arena  – Flash free first embed, has a bi...
Actions taken to reduce KB size &            http requests• Image and video solution• Social share buttons• Articles only ...
KB size on mobile compared with desktop     3500     3000     2500     2000KB                                             ...
Amount of HTTP requests on     mobile compared with desktop         180         160         140         120         100Amo...
Lessons learned• Views - always click to remove the extra markup -  and give the block a unique style name• Iframes and au...
Issue list• Improve the theme / switch to a newer one• Improve on Twitter, Facebook integrations - they are  not working c...
Questions?• Twitter: @mseiplax• Come and talk to me• Follow our development  – On Twitter #ylesynd  – On our blog: utveckl...
Case: svenska.yle.fi as a mobile first responsive design
Upcoming SlideShare
Loading in...5
×

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

2,725

Published on

Explaining the solutions chosen and implemented on svenska.yle.fi to create a mobile first responsive design. What was it like on Drupal and Omega?

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,725
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Case: Svenska Yle - Implementing a mobile first responsive designTwitter: @mseiplax #DCFIMårten Seiplax - AD and front end developer at svenska.yle.fi
  2. 2. Why mobile first web app, and not an app or mobile specific site?“First, a growing number of people are using mobile as theonly way they access the Web. A pair of studies late last yearfrom Pew and from On Device Research showed that over25% of people in the US who browse the Web onsmartphones almost never use any other platform.”… “There’s a digital-divide issue here. People who can affordonly one screen or internet connection are choosing thephone. If you want to reach them at all, you have to reachthem on mobile. We can’t settle for serving such a hugeaudience a stripped-down experience or force them to swimthrough a desktop layout in a small screen.”Josh Clarkhttp://www.netmagazine.com/opinions/nielsen-wrong-mobilehttp://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
  3. 3. • By designing the system mobile first, and not hiding content from mobile users you are reaching a bigger audience• No apps to download and update• Shared content device adjusted• Return on investment
  4. 4. Actually building mobile first• Making the site mobile first sets some limitations, and also affects the design process• Designing from mobile to desktop, or from desktop to mobile  all at once  designing in the browser
  5. 5. Drupal, Omega and mobile first• Compression of CSS – Omega structure prevents loading of CSS per set of widths via JS – needed to prevent media queries from loading all CSS• CSS groups – possible to join CSS compression groups into fewer CSS files• IE specific CSS is loaded before Omega CSS
  6. 6. Which theme, fluid or set of sizes?
  7. 7. 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• Define areas for graphics, keeping the layout completely CSS generated• We wanted to gain experience before we had built a swamp that it is difficult to dig yourself out of
  8. 8. Loads of markup
  9. 9. Images• Small image that works on mobile, if JS detects enough screen space  switches to a bigger image• JS loads & inserts different sizes depending on what size best fits the image slot in the layout template• Prevent image flickering with CSS
  10. 10. CodeFirst load <img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e 58bb_6.jpg" width="200" height="113" class="imsImg" data-ims-id="58628" />After the javascript has been loaded 2011" title="VPS slog HJK." <img itemprop="image" alt="VPS, augusti src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e 58bb_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/586284e6cf0a1 e58bb_5.jpg" data-src- narrow="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0 a1e58bb_4.jpg" data-src- normal="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0 a1e58bb_6.jpg" data-src- wide="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1 e58bb_5.jpg">
  11. 11. Video & audio• Most of our videos and audio are embedded from our media service Arena – Flash free first embed, has a big effect on our mobile first approach – responsive design solution is out of the box – Arena requires Flash for video playback• For Youtube and Vimeo we are using FitVids.js
  12. 12. Actions taken to reduce KB size & http requests• Image and video solution• Social share buttons• Articles only load core content, additional parts are loaded with JS
  13. 13. KB size on mobile compared with desktop 3500 3000 2500 2000KB KB on mobile 1500 KB size on desktop 1000 500 0 ar cle 1 ar cle 2 ar cle 3 ar cle 4 ar cle 5 subject 1 subject 2 subject 3
  14. 14. Amount of HTTP requests on mobile compared with desktop 180 160 140 120 100Amount h p requests on mobile 80 h p requests on desktop 60 40 20 0 ar cle 1 ar cle 2 ar cle 3 ar cle 4 ar cle 5 subject 1 subject 2 subject 3
  15. 15. Lessons learned• Views - always click to remove the extra markup - and give the block a unique style name• Iframes and auto height is causing grief• We used a small image in our first iteration, and got feedback on that it was to small
  16. 16. Issue list• 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 http://svenska.yle.fi/artikel/2012/05/12/haglund-pop-bland-unga-henriksson- bland-aldre http://svenska.yle.fi/artikel/2012/06/01/har-saljer-alkoholdrycker-bast http://sc.score24.com/scorecenter/o10n/uefa/euro/2012/yle/?lang=swe• Work more with the layout• Implement bigger images• Build a content breakpoint on subject pages
  17. 17. Questions?• Twitter: @mseiplax• Come and talk to me• Follow our development – On Twitter #ylesynd – On our blog: utveckling.ylebloggen.fi svenska.yle.fi
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×