@()(implicit request: play.api.mvc.RequestHeader) @main("Sample on responsive design") { @* We use a fluid layout from bootstrap to adapt to different resolutions *@
@* The sidebar won't be shown in smallest screens like phone or tablet. This means that we want to load the content conditionally as per screen size *@

Dynamic Sidebar

This sidebar loads a minimal amount of content by default. If we will display it, some ajax requests will populate it with extra content.


A Responsive page

The idea of this sample is to show 2 important concepts in a simplified environment:

  • Responsive Layout: the layout adapts dynamically to the size of the browser displaying the data
  • Mobile first design: the layout is rendered for a mobile version and adds extra details for bigger screens

Responsive layout is not just a Buzzword. We are in a mobile world, were you can't guess the resolution of the screen browsing your web application. Twitter Bootstrap provides styles to facilitate the construction of responsive layouts, which is great. But Responsive is not only "hide some elements when you are in a tiny screen". Elements hidden by CSS are downloaded anyway, and in a mobile network that can be problematic.

Mobile First is a concept that tries to solve that. The idea is to design the minimal layout that works for your application, that layout that mobile users will see, and add more options if the user has a bigger screen. How? By conditionally loading elements, using Javascript to modify your HTML or via Ajax requests.

This single page will use media queries and javascript to delay loading some content and to not render other content according to your viewport. It is a simplified environment, but it should give an idea on how to develop these concepts for bigger projects. To test the CSS media queries, the border of the body will change color as per viewport size.

Asynchronous Javascript

This article talks about loading Javascript resources asynchronously. With HTML 5 you can use the async attribute for script tags. You can also use libraries like yepnop to trigger a callback after loading a Javascript resource. The link contains some samples on async loading for popular resources.

Responsive Favicons

Favicons may be used in different contexts by the browser, like Bookmark links, etc. This, along new HD displays, means that 16x16 favicons may not be enough.

To solve the issue you should provide:

  • An ico favicon with layeers at 16x16, 24x24, 32x32 and 64x64. See instructions for Gimp here. This way the system will use the best size for the job
  • Provide several png versions of the favicon, at 57x57, 72x72, 114x114 and 144x144. They will be used by mobile devices (like IOS). You can link them in the header via link or you can just leave them in the root of the application, they'll be picked up anyway. You can read more about it here

Google Ads

One issue with responsive design is making Google Ads change according to the viewport size. Google Ads are not responsive, they have a fixed size which means that you won't be able to modify them dynamically. Luckily http://www.labnol.org/internet/google-adsense-responsive-design/25252/ proposes a solution to this problem.

The solution consists on creating 3 sets of ad units (say 768×90, 468×60 and 300×250) and based on the size (width) of the user’s device, the most appropriate format get served. The following code shows how it would be done (replace ad_slot and ad_client by the values of your own ads):

                    
                        <script type="text/javascript">
                            google_ad_client = "my-ad-id";
                            if (window.innerWidth >= 800) {
                                google_ad_slot = "ad-size-1";
                                google_ad_width = 728;
                                google_ad_height = 60;
                            } else if (window.innerWidth < 400) {
                                google_ad_slot = "ad-size-2";
                                google_ad_width = 300;
                                google_ad_height = 250;
                            } else {
                                google_ad_slot = "ad-size-3";
                                google_ad_width = 468;
                                google_ad_height = 60;
                            }
                        </script>
                        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
                    
                

Responsive images with Picturefill

Picturefilll allows us to select the image we want to display using a media-query. This javascript library uses div tags to which we add some specific metadata, the path and the media query to validate against. When loading the page, the library will scan all div elements with valid metadata and replace the ones that pass the media query by an image.

The image is kept responsive, browser size changes will load the corresponding image. This is also a form of delayed loading, in which the image is loaded after the text content is rendered, speeding up the site.

@* Example *@
@* End Example *@

Below: delayed load of images

The following images are loaded after all the text content is loaded. Sizes change as per viewport (only on load, if you resize the size keeps the same)

@* Loading many random comments with random avatars *@ @for(i <- 1 to 100) {
@for(j <- 1 to 5) {

Drew McLellan

This is a great article!

}
}
}