Ruby on Rails: CSS for different devices

Question

I am new to rails, and I have finished making my first web application. I am now looking at styling my app. I realise that I need to think about how my app will look on different devices, but don't really know how, or the best way to go about this. Is there a way where I can have a standard look no matter what device the page is rendered on?

I started moving objects around to suit how it would look on a laptop, but looking at the page on a tablet, some things stay where they should, but others disappear off the edge of the page and basically mess up the style I had (which I think had something to do with using absolute positioning). I think I just want their device to look a page that is set in stone, where the user has to zoom in and out on their device, rather than optimise the page for their device.

Any help at all will be hugely appreciated. Thanks

Answer 1

You may want to use CSS media queries to optimize / change CSS rules according to your screen width/height. These are just usual CSS files which are applied by the client's browser, so you don't have to mess around with them on your side.

Here's an example:

@media all and (max-width: 430px) and (min-width: 360px) {
  /* put your mobile css in here */
}

Answer 2

That's a fairly good question. The solution to go about it is to use the twitter bootstrap framework. You will have to include a gem for it in your gems file and bundle it; 'bootstrap-sass', '2.0.0'. After that import it in your custom css and use according to your need. Bootstrap is a responsive framework by the good team at twitter. What bootstrap basically provide is a responsive framework for you so that your app can adjust it's dimesions automatically according to the clients screen, no matter whatever the screen size is your app will adjust according to it. It has a grid system that makes it to function that way.

You would like to visit few sites that would help you achieve what you are looking for, learn a little more about bootstrap here http://twitter.github.com/bootstrap/ Also the gem I recommended for your problem has Sass functionality with it too, so you might want to check it out also http://sass-lang.com/tutorial.html

Answer 3

You need to read up on media queries. Twitter bootstrap is a great framework, but if you already have CSS you like (or if you just want to learn something new) you can setup your own responsive design with media queries. A decent place to start is this Smashing Magazine article about creating a mobile site.

If you want to start over with the framework of the month that everyone loves and has responsive design built in, then check out Twitter Bootstrap which has really awesome documentation to help you start using it.