Top 11 Mobile Web Development Tools Used at 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.
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.
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 (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.
Understanding Mobile User Experience: the 3 Modes of Mobile Usage
Do you want your mobile project to succeed?
Whether it’s a mobile website, a mobile application, a mobile game or any combination of these, the success of your mobile initiative relies on how people use it.
People are busy, their attention is in demand and they have existing patterns of behavior that your mobile project has to co-exist with.
It makes sense to understand those patterns of behavior and to build your mobile strategy with that understanding – to work with existing behaviors instead of trying to invent new ones.
So what are those existing behaviors?
3 Modes of Mobile User Experience
In statistics, the mode is the “value occurring most frequently in a series of observations or statistical data.”
Modes are a more precise way of describing the existing behaviours of people.
Our friends at Google analyzed their mobile users and came up with a strategy to help guide its mobile web and app development strategy.
The basis of their guidance is that mobile users fall into 3 main patterns of behavior with the following names:
- Repetitive Now
- Bored Now
- Urgent Now
To succeed with your mobile project you need to figure out which of these 3 describes how your users will use your product.
Threadless appealing to Repetitive Now users
1. Repetitive Now
Repetitive Now users are seeking recurring real-time information. They use their mobile device to stay in touch with ongoing, repetitive changes.
Repetitive Now users can be looking for updates on sports scores, checking the weather and finding the latest stock quotes. These users are repeatedly snacking on snippets of information, then, once satisfied, they leave.
Repetitive Now users often seek the same type information – like sports scores – but for a new date or game. Yet the pattern remains the same. They want their information and not much else while they’re in the Repetitive Now mode.
In a mobile commerce context, Repetitive Now usage can be seen in customers seeking the lowest prices or items going on sale.
Retailers can appeal to Repetitive Now users by creating an easily accessible sale section, or by creating pricing or inventory alerts, like many daily deals sites.
Retailers can also begin to create habits that align with Repetitive Now usage by releasing new products on the same day every week or the same time every day.
2. Bored Now
Bored Now usage is often a by-product of waiting and seeking distraction, entertainment or connection through a mobile device.
Ride public transit and you’ll often see everyone on the bus, train or subway engrossed in their mobile device. Sit in the waiting room at the dentists’ office and you’ll see the same. Go the coffee shop and watch people waiting in line for less that a minute – they often get out their mobile to see their messages, search for something on their mind or notice a new update to a social network.
Bored Now usage springs from users having time to pass and feeling like they could be doing something else more interesting in a digital world than they are doing in the physical world..
Bored Now usage can be valuable for mobile commerce because it’s often when people discover new products or follow up on any stage of the purchase process – they’re looking to fill time and shopping has become a popular way to do so.
But Bored Now users can also be difficult to capture because they are engaged with personal pursuits like Facebook or productivity like email.
Understanding how your customers see your offering is key to understanding your opportunity to connect with them when they’re in the Bored Now mode.
3. Urgent Now
The third category of mobile usage is Urgent Now and its name perfectly describes the sensibility of people in this mode – I need it now!
In this mode, people are seeking urgent information on their mobile device. The information is often to address a time or location-sensitive need, such as the next show time for a movie, nearby Italian restaurants, trustworthy reviews on a bar, or a tow truck provider.
People in the Urgent Now mode are making snap decisions around credibility, accuracy and relevance because they feel they have to.
Mobile commerce businesses with a great deal of time-based business driven by urgency like florists and chocolate shops on Valentine’s Day, restaurants at dinner time, holiday season gift shops and toy stores, butchers at Thanksgiving need to particularly understand the Urgent Now customer because they can be fickle, judgemental, impatient and demanding.
As a reward, Urgent Now users are very often ready to make decisions and act quickly. A well-designed and intuitive mobile experience can convert people very effectively.
Key Takeaways
How does your customer use the mobile experience you’re presenting to them?
Start from the 3 modes of mobile user experience and you’ll have a head start at succeeding with your mobile project. Think about how each type of user will use your site.
The alternative is painful. Without being able to answer the question of what mode of mobile user experience matches your customers’ needs (and it could be more than one for a larger project), it’s unlikely your customers will fit your mobile experience into their existing behaviors.
And if you need help figuring it out – talk to us.
Mobile performance benchmarks: How does your mobile performance measure up?
The mobile web is driving a wave of change that has left many businesses – especially retailers and publishers – wondering how to cope with this new, tangible connection between the real and digital worlds.
Smartphones are everywhere and connected online and they’re only growing in use and penetration. According to Morgan Stanley, mobile traffic is projected to surpass desktop traffic by 2015.
Mobile web growth overtakes desktop web use in 2014.
Mobile’s increasing importance and influence on the future of commerce means companies need to start learning mobile lessons today so they can create mobile strategies for the long term.
In order to learn those lessons and optimize for mobile users, it’s critical to:
- Understand which mobile metrics to collect
- Correlate those mobile metrics with your desktop metrics (from visits to your website from traditional desktop PCs)
- Build your own mobile performance benchmarks to compare with industry standards
1. Which mobile metrics to collect?
To understand what metrics to collect, we started with the most popular analytics tracking software, Google Analytics, and the recommendations of Google’s Digital Marketing Evangelist, Avinash Kaushik.
By default Google Analytics starts with eight common metrics across its dashboards: Visits, Unique visitors, Pageviews, Pages per visit, Time on site, Bounce rate, Conversion rate and Average order size.
Avinash Kaushik then recommends more sophistication in understanding these 8 common metrics. He organizes them into 3 groups that reflect the high-level purchase or conversion process of a web visitor: Acquisition, Behaviour and Conversion.
To make it simple to remember, Kaushik calls these metrics groups the ABCs of web analytics.
- Acquisition metrics are Visits, Unique visitors and Pageviews.
- Behaviour metrics are Pages per visit, Time on site and Bounce rate.
- Conversion metrics are Conversion rate and Average order size.
Collecting these common metrics is the starting point for learning the lessons your mobile visitors are teaching you. But these metrics don’t occur in a vacuum and they can be best understood in comparison and correlation with desktop metrics.
2. Understanding mobile metrics vs. desktop metrics and building a variance model
The best way to understand mobile metrics is to start with a set of familiar metrics – desktop metrics – and then compare them to mobile metrics with a variance model.
A variance model in this context is a great way to compare the metrics collected from the 2 main ways people visit your website: on their desktop PC and on their mobile smartphone.
The following variance model was built from over 25-million combined mobile and desktop visits between September and December 2011, sampled from a selection of over 18,000 mobile sites powered by Mobify.
With that large data set we see overall patterns and start to draw observations about the difference and sameness of traffic on desktop versus traffic on mobile, using the same 8 common metrics.
1. Acquisition metrics: The first three metrics – Visits, Unique Visitors, and Pageviews – track user acquisition from various sources and represent the top end of the conversion funnel.
- These metrics show how many people are visiting the websites on desktop versus on mobile.
- 78% of visits are on desktop, 22% on mobile
- 79% of unique visitors are on desktop, 21% on mobile
- 84% of pageviews are on desktop, 16% are on mobile
Desktop is the most prominent way to visit these websites and people visiting on a desktop view slightly more pages. No surprises here. The most interesting tracking we can do in acquisition metrics is in changes over time:
- Is mobile traffic growing on your site?
- Is overall traffic growing on your site?
- How is the ratio of mobile to desktop traffic changing?
2. Behavior metrics: The second three metrics – Pages / Visit, Time on Site, and Bounce Rate – track user behavior on a site and provide insight into whether the site is moving them towards the outcomes it’s built to achieve.
When we compare what people are doing on the desktop site vs. mobile, we see:
- Visitors on desktop go slightly deeper than visitors on mobile, and consequently stay longer on the site.
- Visitors on mobile are slightly more likely to bounce off the site, visiting only one page and then leaving.
These results seem intuitively correct as desktop visitors are likely seated somewhere working while visitors on mobile could be in many different user modes, settings and contexts.
Google has an excellent framework for understanding user modes on mobile. They classify people on mobile into the following 3 broad modes of interaction:
- Repetitive now – tracking information on an ongoing basis that’s time sensitive like stock quotes or sports scores.
- Bored now – seeking distraction or entertainment while waiting, such as standing in line at the bank or on public transit.
- Urgent now – needing information about a specific situation that’s likely location-sensitive like nearest pizza restaurant or movie showtimes.
Understand the mode your visitor is in on your site can help shed light on behavior metrics and how you ought to be addressing them over time. For example, a Board Now visitor wants entertainment and a longer Time on site indicates greater satisfaction of that need. In contrast, a Repetitive now visitor may have a high bounce rate, short Time on site and few number of Pages / visit and see that as a very successful interaction.
3. Conversion metrics: The last two metrics – Conversion Rate and Average Order Size – track user conversions and the value of each of those conversions. These numbers are for e-commerce sites and show how visitors on both desktop and mobile contribute to the bottom line.
It’s interesting to note that visitors on desktop convert at more than double the rate of visitors on mobile yet visitors on mobile have a slightly larger average order size than visitors on desktop.
What can we learn from this?
The fact that visitors on desktop still convert at a higher rate than visitors on mobile isn’t surprising. Mobile web purchasing is relatively new and habits take time to be established.
In addition, the mobile device is often used as an interface to digital data while shopping in the physical world. A recently Google study found that 79% of shoppers use their mobile device to shop with 70% of them using it in store.
And the velocity of purchases where a consumer is aided by a mobile device are significantly faster. Microsoft research found that shoppers who research products on their mobile devices are ready to buy, with 70% of them taking action within an hour, versus 70% of people on desktop PCs taking action taken within a week.
The slightly larger (by $1.73) average order size on mobile can be attributed to a number of factors but in reality is so close to the Average order size on desktop that you ought to treat them as equal, unless you find a big difference in your specific situation.
Looking at these A-B-Cs provides a good snapshot of how a mobile website attracts customers, moves them to consider an action, and finally gets them to complete a desired action. The final step is building your own mobile benchmarks and comparing them to the industry standards.
3. Build your own mobile benchmarks
To build your own benchmarks for success on mobile, refer to the table below using the same eight metrics organized into A-B-Cs and with the Mobile Variance Ratio in the centre column.
Add in your desktop numbers for each of the metrics and multiply by the Mobile Variance Ratio to find the Mobile Web Benchmarks for your own website.
| Desktop Web numbers | Desktop – Mobile Factor | Mobile Web Numbers | |
| Visits | 19,584690 | 0.28 | 5,442,697 |
| Unique Visitors | 19,584690 | 0.28 | 5,442,697 |
| Pageviews | 129,147,289 | 0.18 | 23,082,820 |
| Pages/visit | 6.40 | 0.74 | 4.75 |
| Time on site (secs.) | 323.67 | 0.68 | 218.83 |
| Bounce rate | 39.81% | 1.07 | 42.40% |
| Conversion rate | 1.72% | 0.35 | 0.61% |
| Avg order size | $95.19 | 1.02 | $96.92 |
(With Time on site, you will have to convert a blended measure of minutes and seconds into a single measurement of seconds.)
Use our Mobile ROI Predictor, an online tool that automates the calculations in the table above.
How do your numbers stack up?
More importantly, how do they stack up over time and how does that tell you how well you’re succeeding within the framework of your overall mobile strategy?
Track these metrics on an ongoing basis, make adjustments to your desktop site, your mobile site and your marketing and watch for changes.
As with any business initiative, ‘micro metrics’ like the eight listed above are to be used for tracking and tuning your program. Yet, it should be the ‘macro metrics’ of sales, orders, revenues and profits that drive your overall strategy and focus.
Measure the micro and make decisions on the macro. But make sure to start measuring as soon as possible – today is as good a day as any to start.
Adoption of the mobile web is on a rapid growth trajectory. Once you start tracking your common 8 metrics you’ll start to see how that rapid growth affects your website and your business.
You’ll be able to compare it to industry standards like those found above in the Mobile Variance Model. You’ll have data to build and refine a long-term strategy aimed at leading your competitors and serving your customers.
So start with tracking your mobile performance benchmarks. A handy feature in Google Analytics (and most other analytics software) is to have summary reports emailed to you on a regular basis. Start getting them on a weekly basis and spending at least half an hour a week listening to what your visitors are telling you.
They’re speaking loudly with their clicks and their dollars and now you’re armed to hear them.
Distinguished Young Women Go Mobile with Mobify
Mobify teamed up with Google to help the Distinguished Young Women build their mobile website.
Was it a success?
“The stats we have seen further confirm the effectiveness of our new mobile site in reaching and engaging our target audience. With more than 85% of visits to the site from new visitors, we are confident that the mobile site is allowing us to realize greater awareness across the country. As we work to encourage participation in the Distinguished Young Women program, our mobile site is allowing us to connect with our potential participants, teenage girls, in a way they are familiar with and have come to expect from companies and organizations to which they are loyal.”
– Stephanie Bradford, Communications Director
The event was part of Mobilizing Mobile in Mobile, Alabama, a live event to support Google’s larger GoMo initiative.
We had a great time a the event and look forward to the ongoing success for our friends at Distinguished Young Women.
Meet Mobify at Mobilism 2012 in Amsterdam, May 9 – 11
We’ll be in Amsterdam from May 9 to May 11 speaking at and attending Mobilism 2012.
If you’re interested in the latest in mobile design and mobile development, you should be there too.
The list of presenters speaking is second to none anywhere in the world.
The list of people and companies attending is drawn from the leading companies in the mobile world.
Simply put, it’s almost certain this is the top conference focused on the technology of mobile design and mobile development that you’re going to find in the world in 2012.
There will be minimal ceremony and maximum information sharing and learning.
Also, if you register now through this link you will save 10% on your €600 ticket.
So what are you waiting for?
Here’s that 10% discount link again. Use it. Meet us there and say, ‘Hi.’
Join the emerging leaders in the mobile revolution.
