case: svenska.yle.fi as a mobile first responsive design
DESCRIPTION
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?TRANSCRIPT
![Page 1: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/1.jpg)
Twitter: @mseiplax #DCFI Mårten Seiplax - AD and front end developer at svenska.yle.fi
Case: Svenska Yle - Implementing a mobile first responsive design
![Page 2: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/2.jpg)
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-mobilehttp://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
![Page 3: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/3.jpg)
• 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
![Page 4: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/4.jpg)
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
![Page 5: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/5.jpg)
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
![Page 6: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/6.jpg)
Which theme, fluid or set of sizes?
![Page 7: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/7.jpg)
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
![Page 8: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/8.jpg)
Loads of markup
![Page 9: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/9.jpg)
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
![Page 10: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/10.jpg)
CodeFirst load
After the javascript has been loaded
<img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_6.jpg" width="200" height="113" class="imsImg" data-ims-id="58628" />
<img itemprop="image" alt="VPS, augusti 2011" title="VPS slog HJK." src="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_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/586284e6cf0a1e58bb_5.jpg" data-src-narrow="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_4.jpg" data-src-normal="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_6.jpg" data-src-wide="http://static.yle.fi/ims/imssv/2011/36/586284e6cf0a1e58bb/586284e6cf0a1e58bb_5.jpg">
![Page 11: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/11.jpg)
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
![Page 12: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/12.jpg)
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
![Page 13: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/13.jpg)
KB size on mobile compared with desktop
![Page 14: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/14.jpg)
Amount of HTTP requests on mobile compared with desktop
![Page 15: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/15.jpg)
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
![Page 16: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/16.jpg)
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 resultshttp://svenska.yle.fi/artikel/2012/05/12/haglund-pop-bland-unga-henriksson-bland-aldrehttp://svenska.yle.fi/artikel/2012/06/01/har-saljer-alkoholdrycker-basthttp://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
![Page 17: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/17.jpg)
Questions?
• Twitter: @mseiplax• Come and talk to me• Follow our development– On Twitter #ylesynd– On our blog: utveckling.ylebloggen.fi
svenska.yle.fi
![Page 18: Case: svenska.yle.fi as a mobile first responsive design](https://reader035.vdocuments.us/reader035/viewer/2022062514/5585663cd8b42a46298b4c67/html5/thumbnails/18.jpg)