Using Bootstrap to make the movies list responsive

The current movie list looks quite nice on a desktop browser but leaves something to be desired on a tablet or phone. And as this is something I think should work just as well it is high time to fix this.

One of the reasons I think every web application should work equally well on a tablet as on a desktop browser is that they are so frequently used. You might argue that a phone is a very limited device screen wise, and that would be true, but a tablet is becoming the default browser for quite a few people. I never really measured this but I suspect I do more casual web browsing on my Nexus 7 tablet then I do on my PC. I will certainly walk over to my PC when I need to enter a lot of data but even then I would expect to be able to be fully functional on my tablet.

 

So what is the problem?

When I open the movies list in the browser on a big enough screen it looks like this:

image

Pretty nice :-)

 

However when I resize the window to become smaller I get a layout like this:

image

Not very nice, the text is really squashed against the movie poster. This is what I get on my Nexus 7 in landscape mode.

 

With the window even smaller the layout changes to this:

image

Now the movie poster is above the text, not nice at all. This is what I get in my Windows Phone or on the Nexus 7 in portrait mode.

 

Fixing the layout problem

Most of these problems can be fixed with a really small change, just add the CSS style "img-responsive" to the movie posters image element. This will resize the image and make things look better.

However that leaves us with a second problem that the movie poster takes us screen real estate on small screens where it might be better to leave it off altogether. This second problem can be fixed with a small change by adding the CSS style "hidden-xs" to the first column containing the movie poster. THis will just hide the poster on small screens and reserve all space for the text. Now that might not always be the best thing but that is what I choose to do in this case.

 

Fixing the hidden problem

It might not be immediately apparent but there is still a problem to be solved. Even though the movie posters are no longer visible they are still loaded as can be seen in the screenshot below. And that is a waste of bandwidth, specially on a mobile connection.

image 

In order to fix that problem we need to make sure that the images are not even loaded. Fortunately that is relatively easy to do with AngularJS and the ngIf directive. All we need to do is create a small function to determine if the image will actually be shown or not and remove the complete <img> element if it is hidden. Of course window sizes can change so we need to hook up the window resize event and make sure to reevaluate the removal of the <img> element on resizing. Simple enough :-)

   1: $scope.showMoviePoster = function () {


   2:     var width = ($window.innerWidth > 0) ? $window.innerWidth : $window.screen.width;


   3:     return width > 767;


   4: };


   5:  


   6: $window.onresize = function () {


   7:     $scope.$digest();


   8: };



 



Try it



The running application can be found here and the source on GitHub here.



 



Index of posts on the RAW stack



See here for more posts on the RAW stack.



 



Conclusion



Creating a responsive site with bootstrap is really easy, just add a few CSS styles and you are mostly done. And with AngularJS it is really easy to take it one step further and even prevent downloading images that are not going to be shown.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>