RubyFlow The Ruby and Rails community linklog

A More Sane Way to Build Mobile-ready Rails Apps

This is a quick tutorial on how to create a mobile version of your Rails app without creating a custom mobile-formatted version of every single layout and template.

Comments

If talking about mobile websites there cannot be a Rails way. Just the designer way.

According to A List Apart / Responsible Web Design techniques like m.yoursite.com are obsolete.

Instead use CSS media queries and fluid grids. Mobile design is done exclusively in CSS not in code and subdomains.

I’ve created an example site shopledge.com which works both mobile/smartphones/tablets/desktop and large screens.

Additional code logic were used only to serve scaled images for different displays in rest everything is done by CSS.

For details you can contact mr cs@clair.ro

Please find the code here: https://github.com/rubycs/shopledge

Check header.php for media queries usage and /css for the different displays.

There is an article on The List Apart titled Fluid Grids where you can learn how to calculate div sizes suited for all screens.

For other questions please contact me.

As noted in the post, “css media queries go a long way toward accomplishing this, but sometimes you want to do more.”

Different strokes for different folks, but CSS media queries alone don’t:

  • Allow a simple way to toggle your own display preferences regardless of device type
  • Prevent sending of markup that is completely unnecessary for display on the device in question
  • Prevent execution of code that is used to generate markup that won’t be displayed in the alternate format.

Post a comment

You can use basic HTML markup (e.g. <a>) or Markdown.

As you are not logged in, you will be
directed via GitHub to signup or sign in