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?

1. Case: Svenska Yle -
Implementing a mobile
first responsive design
Twitter: @mseiplax #DCFI
Mårten Seiplax - AD and front end developer at svenska.yle.fi

2. Why mobile first web app, and not an
app or mobile specific site?
“First, a growing number of people are using mobile as the
only way they access the Web. A pair of studies late last year
from Pew and from On Device Research showed that over
25% of people in the US who browse the Web on
smartphones almost never use any other platform.”
… “There’s a digital-divide issue here. People who can afford
only one screen or internet connection are choosing the
phone. If you want to reach them at all, you have to reach
them on mobile. We can’t settle for serving such a huge
audience a stripped-down experience or force them to swim
through a desktop layout in a small screen.”
Josh Clark
http://www.netmagazine.com/opinions/nielsen-wrong-mobile
http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/

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. 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. 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. Which theme, fluid or set of sizes?

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. Loads of markup

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. Code
First 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. 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. 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. KB size on mobile compared with desktop
3500
3000
2500
2000
KB 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. Amount of HTTP requests on
mobile compared with desktop
180
160
140
120
100
Amount 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. 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. 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. Questions?
• Twitter: @mseiplax
• Come and talk to me
• Follow our development
– On Twitter #ylesynd
– On our blog: utveckling.ylebloggen.fi
svenska.yle.fi