Mobify Developer Blog Mobify

Top 11 Mobile Web Development Tools Used at Mobify

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.

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.

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.

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.

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 (every 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.

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!

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.

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.

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.

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.

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.

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.

Hope that article was useful for you!

Would you like to receive more tips on mobile development in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile development tips and tricks, in your inbox, right when we publish them.