Whenever we give developer talks or host meetups, people are always curious – what tools do we use to build mobile websites at Mobify?

To answer that question and to share our love of these outstanding tools, we’ve compiled a list of the standard program suite used by Mobify mobile developers.

For the most part, these tools are built for developers. They’re open and easy to try out for free to see if you like them.

We like open and we like free to try because we can get the hang of things before committing.

We’re following that same approach – open and free to try – with our own platform.

Get an invite to try the Mobify Platform for free.

With the tools below, our goal is to minimize the amount of time writing code and to focus on spending time adding value to the platform.

I’ve always worked around the mantra: “Spend less time in your editor and more time thinking about how to solve meaningful problems.”

1. Bootstrap, prototyping framework, Free!

What is it?

Bootstrap is a front-end toolkit built by Twitter for rapid prototyping of web applications, “built for and by nerds.”

What makes it great?

It builds in a lot of responsive elements to make sure your prototype works across devices – and looks good by default.  It’s also the most watched project on GitHub by over 10,000 watchers.

•  More about Bootstrap.

2. Sublime, text editing, $59

What is it?
Sublime is the default text editor used at Mobify.

What makes it great?

The team that makes Sublime always listens to feedback, and is very responsive to suggestions.  Several times now we’ve come across bugs that interrupt our workflow or features that could be improved.

But, before we even get around to logging them with Sublime’s developers, they’ve released an update that fixes all our issues.  Amazing.

Another unique feature is all settings are defined as a JSON object so you can customize Sublime very easily.  Those customizations then go live as soon as you save the JSON object.  Bonus: Sublime has a number of great plug ins.

• More about Sublime

3. Divvy, window management, $14

What is it?

Divvy is a window management system that lets you quickly “divvy up” your screen into exact portions.

What makes it great?

We always have a lot of windows on our Mac’s open at once – editors, previews, browsers, inspectors, simulators – and OSX doesn’t have great window management.  We need a way to keep all those windows tamed and organized.

Divvy provides shortcuts to put windows in predictable places.  This speeds up development because things are reliably in one place and there’s no hunting for the right window.

• More about Divvy

4. Chrome and Webkit Inspector, debugging tools, Free!

What is it?

Chrome is Google’s web browser.

What makes it great?

Chrome is the best browser right now because it is updated frequently (6 weeks) and has loads of useful extensions.

It stays up-to-date with new features and, more importantly it keeps up to date with new web standards and WebKit tools – all of which are bundled with the browser.

Even though the same tools are also bundled with Safari, we prefer Chrome  because of Safari’s slow, infrequent release cycle. The tools and extensions don’t stay current.

You might be wondering: “Why do you need a desktop browser to develop mobile websites?”

It turns out the differences between desktop development and mobile-web development are not that big for coding, so we do most of our development on desktop because it’s faster and switch to mobile near the end for finishing touches.

• More about Google Chrome
• More about Webkit Inspector

5. Python SimpleHttpServer, Free!

What is it?

Python’s SimpleHttpServer lets you easily serve files in folder over HTTP.

What makes it great?

SimpleHttpServer lets you get around the limitations of using the “file” protocol for local development.  The new generation of development is focused on front-end but we still need a server to serve static resources like JavaScript.

SimpleHttpServer lets you develop against the “http” protocol avoiding quirks of loading local files. For example relative references loaded via “file” are resolved from your filesystem which can lead to confusing situations.

It’s also dead simple to use. On OSX just open a terminal and change directory in to folder you would like to serve. Run the command: “python -m SimpleHTTPServer”. Painless!

• More about SimpleHTTPServer

6. Localtunnel & Portmap, expose localhost, Free!

What is it?

So now that you’re running a server on your local computer, how do you hit it with your phone?

localtunnel or Portmap both allow you to expose localhost web servers to the rest of the world.

What makes it great?

We use localtunnel to expose our code to the world primarily so we can access it via actual phone browsers.

Portmap is an alternative to localtunnel that lets you expose internal ports on external interfaces. Most routers have ways to do this but they tend to be hard. This software makes it easy.

• More about localtunnel
• More about Portmap

7. Charles, HTTP debugging, $50

What is it?

Charles is an HTTP proxy that lets you monitor all the HTTP traffic to and from your computer.

What makes it great?

Charles records all HTTP requests to and from your computer – that makes it pretty great to start with.

The added benefit for mobile development is that you can tell Charles that your phone should send proxy all requests through your computer, instead of connecting directly to the web.

This lets you see everything your phone is doing, which is particularly useful for debugging your site’s network traffic.

This works with all phones that support HTTP Proxying like the iPhone and Android 2.1+ devices.

• More about Charles

8. LiveReload, no more reloads, $10

What is it?

LiveReload monitors files for changes and automatically reloads them in your browser.

What makes it great?

It kills the need to do endless refreshes.

Normally when doing development you have a stylesheet that you’re working on in your editor and a browser open. Whenever you make a change in your editor you must switch to your browser and reload the page to see your changes.

That cycle describes the day of many web designers and developers – change the CSS, refresh the browser to see the change, repeat.

LiveReload automatically listens for when a file is changed and automatically shows that change in the browser by reloading just the resources that have changed.

As an added bonus, it also works on Android and iOS browsers.

• More about LiveReload

9. iPhone and Android emulators, Free!

What is it?

The iPhone and Android simulators simulate the actual Android and iOS browsers on your desktop of laptop computer.

What makes it great?

When developing for mobile devices, you don’t develop directly on the devices – you develop on your desktop.  The easiest way to imitate the phone is the simulators for quick testing and ongoing checks.

But while emulators are the easiest way to quick testing, they’re not for full testing. Don’t forget to test all your designs on actual phones before launching so you’re testing on a live, real-life scenario.

• More about iPhone emulator
• More about Android emulator

10. SCSS and Compass, CSS like it should be, Free!

What is it?

SCSS expands on what you can do with CSS with variables, nesting, and mix-ins.

What makes it great?

Everyone who has worked on a website with more than one designer knows how difficult it can be to make styling changes that don’t overwrite or conflict with changes made by other designers.

SCSS is great for solving two problems that come from working on bigger teams.  It solves the problems of overwriting and conflicts by allowing you to separate your CSS into multiple files and merge them.

We’ve found huge productivity gains for any teams with 2 or more people.

Using SCSS also means you don’t have to wait or stagger access and building on files in collaborative or segmented teams.  Just use it.

If you’re hesitant to try it, we recommend just trying it. It will make sense and will pay off very quickly.

• More about SCSS
• More about Compass

11. Github, not just for version control, $0+

What is it?

GitHub is a version control and management system that’s great for collaborative software development.

What makes it great?

GitHub is more than just version control.  It’s a learning environment.

There’s so much great code on GitHub that lets you indulge your curiosity and learn how some of the best minds in the world are tackling the same problem as you.

Go and see what good code looks like. Then when you’re comparing your code you’ll start comparing it to world-class contemporaries instead of whoever happens to be sitting next to you.

Join it, explore it, look at the code and start to emulate and aspire to be the best in the world, too.

• More about GitHub

Mobile web adoption is growing 8 times faster than the internet did through the dot-com boom years of late the 1990s and early 2000s.  But that’s only the tip of the iceberg in the global story of mobile growth.

In emerging markets like India, China, Turkey and Brazil, mobile web use is growing at staggeringly fast rates with enormous overall numbers that dwarf mature markets.

Bourjois.jp - powered by Mobify

For example, U.S. mobile 3G subscriptions grew 26% last year.  Impressive, but nothing compared to growth in some international markets.

For instance, 3G subscriptions grew at the following rates in the emerging world:

• 79% growth in Brazil
• 104% growth in Turkey
• 172% growth in China
• 1050% growth in India

What’s even more interesting is the potential for growth that still remains in these markets.

While the U.S. still leads the globe in terms of the absolute number of subscribers, its 3G penetration is already at 56% of the total population.

China has only 11.3% penetration.  That’s 11.3% of 1.35 billion people.

With a burgeoning middle class, growing urban populations and lust for new technology, China and India’s mobile growth will continue to explode over the next few years.

To dig deeper into the Chinese market, we can look at China Unicom, China’s #2 carrier. They had 48.9 million 3G and 160.6 million 2G subscribers in March 2012.

In terms of aggregate numbers, this makes it about the same size as the 2 largest U.S. cellular providers, AT&T and Verizon, combined.

Having gained 24 million users since December 2011, it is predicted that China will hit 230-250 million 3G subscribers by the end of 2012.

Mobile: The only way to get online

In many places in the world, mobile devices are the only way to get online.

The mobile browser vendor Opera recently found that 56% of their users access the internet exclusively via their mobile devices.

Most of these users are from countries like Egypt, Bangladesh, Brazil, and South Africa where limited infrastructure outside of major cities makes wireless internet the easiest and cheapest way to get online.

The growth in those markets shows up prominently in the usage statistics – Opera generated 117 billion pageviews in 2011, up 96% from the 2010.

And there are many cases where the rest of the world is ahead of North America.

For example, smartphone shipments surpassed feature phone shipments in Q1 2011 in North America. In Western Europe? The same thing happened in early 2010. In Japan, the crossover only just happened in February 2012.

At the time of the crossover, comScore Japan’s vice-president Daizo Nishitani said, ” Japanese mobile phone users were already highly engaged with their devices, but with the added functionality and higher levels of mobile media consumption we should expect to see significant changes in behavior among the Japanese mobile population in 2012.”

Siemens Spain - Powered by Mobify

Overall around the world, smartphones comprise just under a billion of the 5.6 billion mobile phone subscribers overall.

Your website in the hands of the world

Looking through the data a few trends become very clear.

• Mobile web usage is growing at a huge rate around the world.
• High-speed mobile web subscriptions are growing at a huge rate and have enormous room to continue growing.
• Smartphones with web browsers are the fastest-growing device types for high-speed mobile web subscribers around the world.
• More and more people are accessing the internet primarily or exclusively on mobile.

All 4 of these trends show no sign of slowing or reversing. The mobile web wave that is sweeping the world will benefit those who are well positioned to ride it – and the best positioned are those with a mobile website.

We’ve said it before and we’ll say it again: mobile is here to stay and the time to act is now.

Need help with your mobile strategy?

Get started with Mobify now!

Want proof? Last November, PayPal reported a six-fold increase in mobile transactions on Black Friday, as compared to the previous year.

Read more in the Globe and Mail.

For example, recent stats from Knotice showed that 27% of emails are opened on mobile devices, while mobile commerce has grown steadily over the last two or three years.

So what is best practice for mobile marketing? Here are seven tips to maximise your mobile campaigns…

Read more on Econsultancy.

Just Wednesday, BIA Kelsey released data indicating that mobile local search volume will surpass desktop local search for the first time in 2015. By 2016, the firm expects mobile local search to exceed desktop local search by more than 27 billion annual queries.

Read more in Portfolio magazine.