Developing on Mobile

At this point in today's internet industry, if you aren't in the mobile space in some shape or form, then you don't have much insight into the industry. At least from my perspective, and it takes little to no effort, maybe just a little intuition to make that jump from desktop to mobile.

A lot of the trouble of switching to a new medium (Desktop to Mobile) is dealing with unfamiliar ground or black box systems that require at least some kind of research. I'm going to be documenting my mobile prototyping process and what I use as a boilerplate to jump into mobile development. As well as this, I'm going to explain why I chose specific technologies and what I'm leveraging from them to create beautifully simple mobile prototypes.

Skeleton + JQuery + JQuery Mobile

Mobile device screen resoulutions

The first two resources I look to for quick and easy mobile prototyping is the Skeleton boilerplate, along with the latest versions of JQuery, and JQuery Mobile. Skeleton is an HTML5 boilerplate for mobile development, and with the right adjustments can be fitted with JQuery Mobile. The reason I chose to leverage these technologies is simple; Skeleton handles all the mobile markup, styling, and degradation of screen sizes. While JQuery Mobile provides a simple page interface, transitions, and basic user interface elements like buttons and form elements.

Once downloaded, the next step is integrating Skeleton with JQuery Mobile. I found that just including the script tags weren't enough to get both frameworks to play nice; So, I went into the Skeleton CSS files added a class identifier to each selector within the style sheet. This allows me to pick and choose when and where I want the Skeleton styles to take affect, and since I know that the page framework JQuery Mobile provides will be the same no matter which device I'm viewing the site on, I can leverage both frameworks while only using Skeleton in the content area for each page.

Although all I did was just mash-up two frameworks, the result is a mobile web app, that can handle most screen sizes and most devices. Simple. fast, efficient, and effective in quickly developing Mobile Applications.