An introduction to information architecting through storytelling
If you've been following along with the last few articles, I have described how I lay down foundation code for an application by:
Now it's time to build a user experience: how your users will understand your [whatever you're building] and how they will . . .
How to set up mobile device detection in a Rails application using Rails variants and the Browser gem
UPDATED: March 30, 2016
In 2007 I worked for Fidelity Investments helping develop their then new mobile offering. Our goal was to cover 99.999% of all web-enabled mobile phones that Fidelity customers used. To accomplish this we developed a super dumbed down HTML 1.0 template that would render correctly on at least 90% of mobile devices . . .
A mixin for determining the number of columns being used and which breakpoint you are on
When I use Susy, to help identify which breakpoints are being utilized (and when), I use a helper that produces a numerical color-coded identifier that makes it easy to see what breakpoint I am on and how many columns are being used at any given viewport:
This is especially helpful when testing responsive web design in different devices, . . .
Susy 2 with the Breakpoint gem on Rails 4
I introduced the three main components of Responsive Web Design which included flexible grids. To implement a flexible grid system, this article introduces the Breakpoint gem, a Sass plugin, and Susy, a Compass-based grid system that will handle all the flexible-grid-math-calculation heavy lifting for you.
Your markup, your design, your . . .
Using device detection and responsive web design to serve Rails views and assets to different device types
UPDATED: March 13, 2016
I like using "user agent sniffing" to deliver highly optimized versions of a website to different devices. Doing so allows me to really optimize and improve the user experience. What happens though when a device slips through my detection strategy? Let's say it's brand-new and for whatever reason does . . .
How to set up a mobile first Rails application using Rails variants and the Browser gem for device detection
UPDATED: March 30, 2016
If you have been reading the last couple articles you know I am a big fan of Mobvious. I use it to figure out what kind of device any given request has come from, i.e. tablet, PC, phone?
With this information Rails then serves optimized content for that device:
Adding mobile boilerplate files and configuring Rails to serve mobile specific files from a separate mobile folder
Now that we have Mobvious set up – if you've been following along from the last article – here is how we will use it:
- Rails detects the device type through Mobvious
- If the device is a standard desktop computer, Rails will serve regular view files
- If the device is a mobile device, then Rails will serve files from a special folder . . .