, March 5 2013

4 Preliminary Steps to Optimizing Your Site for Mobile

At first glance, adapting a website for mobile and tablet devices can appear like a complex task.

What content should be the most prominent on your mobile website? Which pages should be optimized first? How should the layout change for different devices?

It's easy to get overwhelmed.

We created this article to arm you with the important data you'll need to begin launching a successful mobile website, as fast and as painlessly as possible.

Site Analytics to the Rescue

Here at Mobify, we follow the belief that "when in doubt, look at the data."

When optimizing your website for smartphones and tablets, the best place to start is always with the site analytics.

You already have visitors coming to your site from mobile, even if it's just a small percentage at this point. By studying these users, you can uncover insights into what matters the most to them, and how you can better serve their needs.

In this post, we'll be using Google Analytics for our research, but other website analytics platforms should have similar functionality.

Step 1. Segment out smartphone and tablet visitors.

Research has shown that people behave differently on different devices. And the context often matters a lot more than the screen size.

Let's begin by looking specifically into our mobile traffic. Here's how:

  1. Go to the Reporting section in Google Analytics.
  2. Switch to Audience > Overview in Standard Reports.
  3. Click on Advanced Segments.
  4. Check All Traffic, Mobile Traffic, and Tablet Traffic segments.
  5. Click Apply.
Selecting Traffic Segments on Mobile and Tablet

A new report will be generated showing how many visits you get from each device type, as well as other useful information.

Mobile and Tablet Traffic Graph in Google Analytics

This is a great place to start learning about your mobile traffic. Look at the metrics such as Bounce Rate or Pages/Visit and see how they compare between device types.

Step 2. Learn about your top content.

We also want to find out which pages your mobile users visit the most and which pages they land on when coming from different sources.

For example, your Home Page may be the most visited page on your website. But your Contact Page may be the one most people see first when they arrive from search engines.

To find out what your top content is, follow these steps:

  1. Go to Content > Site Content > All Pages.
  2. Look at 3 segments (All, Mobile, Tablet) separately and pay attention to the differences. See anything surprising yet?
  3. Repeat these actions for Content > Site Content > Landing Pages.
Top pages on Mobile and Tablet

You can use this information to prioritize your design and development effort. We suggest aiming for at least the top 5 most visited pages and the top 5 landing pages. This should cover about 40-80% of your mobile traffic.

Step 3. Select the most important devices.

Next, let's identify which exact devices people use to access your site.

To begin, deselect all Advanced Segments in Google Analytics and go to Audience > Mobile > Devices.

List of Mobile Devices in Google Analytics

This information is useful when prioritizing your mobile adaptions. Should you build a mobile site or tablet site first? Do you have to tackle both at the same time? This report will help you identify which devices to target.

Step 4. Set up benchmarks for performance.

Now that you know who your mobile visitors are, what content they view and which devices they use, you're well-equipped to start making informed decisions about going mobile.

The last thing you should do is make a report of all the important metrics and set up benchmarks and goals.

Here's a list of metrics we use here at Mobify:

  • Conversion rates and revenue
  • Mobile visits and percentage of total traffic
  • Bounce rate for different devices
  • Pages / Visit
  • Praise vs. Complaints (this one's qualitative)

Keep track of these numbers over time to calculate your return on investment.

Wrapping Up

In order to ensure long-term success, your organization needs a well-designed and high-performing mobile website.

Digging into your site's analytics can help you uncover valuable insights and make better business decisions when going mobile.

For more resources and practical tips on going mobile, check out our free 2013 Mobile Success Pack.

, February 27 2013

Which devices dominated the mobile web in 2012?

One of the most common questions for businesses implementing a mobile strategy for the first time is: What mobile devices are customers using to browse and buy online?

To answer this question, we gathered data from 20 major Mobify-powered mobile websites. In 2012, these websites were viewed by a combined total of 560,792,165 people — roughly 8% of the world’s population — who collectively browsed over 3 billion web pages.

A data sample of this size gave us tremendous insight into the mobile web in 2012, including a comprehensive list of devices people used for browsing and shopping.

We’ve isolated the top 20 devices that accessed these 20 mobile websites and broken them down into their percentage of unique views. Check out the results below.

It is important to note that Android will be underrepresented in this data because no single Android device sells in numbers comparable to the iPhone. A follow up article will be published shortly that will break down traffic by OS (rather than device).

Breaking Down the Data

2012-device-breakdown1.png
Data is aggregated from the top 20 devices (by unique views) visiting 20 major, Mobify-powered sites. Beyond the 5th device out of the top 20, no device made up more than 1% of total traffic.


From the chart above, you can see that iPhone, iPad and iPod users accounted for a whopping 85% of unique views among the top 20 devices, compared to 15% of devices from other manufacturers.

While the amount of traffic represented by Apple devices is certainly high, it doesn’t come as a surprise. According to mobile market research firm Asymco:

Besides the pattern of significant mobile [traffic] growth (from 5.2% to 24% of online in two years) there is the curious effect of iOS growth outpacing Android growth. Android went from 1.43% of Black Friday shopping traffic [including desktop browsers] in 2010 to 4.92% in 2012. In the same time iOS went from 3.85% to 18.46%. This means that iOS makes up almost 5 times as much traffic as Android.

What does this mean for your mobile strategy?

The numbers show that in 2012, no single Android device represented traffic in numbers comparable to Apple products.

Focus on optimizing your mobile site for iPhone and iPad to give your customers the best possible experience. They’ll thank you with their wallets!

Want to see which countries use Apple devices the most in their mobile commerce? Check out our infographic on Global Mobile Commerce.


Top 10 Devices (by unique views)
  1. iPhone - 61.6%
  2. iPad - 17.1%
  3. Unknown - 8.6%
  4. Sony Ericsson Xperia Arc - 4.7%
  5. iPod Touch - 4.6%
  6. Samsung Galaxy S II - 0.9%
  7. Motorola Droid X - 0.9%
  8. HTC Incredible - 0.5%
  9. HTC Incredible 2 - 0.5%
  10. Samsung Galaxy Nexus - 0.1%

Edit: It has been pointed out that up until October 15, 2012, Google Analytics has a bug that reported the user agents for the Galaxy S2/S3/Note, Razr 4g, and MyTouch as the Xperia Arc. This bug only affects the Top 10 Devices list above — it does not affect the Android / iOS breakdown. If Google had reported the UA's properly, we believe the Galaxy S3 would replace the Xperia Arc and the percentage of unknown devices would decrease. An in-depth look of the bug is available at here.

As you can see, between October 15 and 16 visits from the Xperia Arc and unidentified Android handsets dropped dramatically, while visits from the Galaxy S2/S3/Note, Razr 4g, and MyTouch increase.


, February 26 2013

Evolving Mobify: New 'Teams' features and BlackBerry 10 support

Good news everyone! We're extremely excited to announce another round of updates to Mobify!

In this post you'll find new and augmented features that make Mobify considerably easier for organizations to integrate into their mobile development workflow. We've also focused on releasing a series of powerful updates for advanced users.

1. Teams

Role Management

In larger organizations, projects of all types are typically worked on by team members across different departments. Mobile websites are no different: projects tends to feature involvement from a mixture of designers, developers and management before they go live to production.

Up until now, each Mobify project has corresponded to a single email account – meaning that multiple people have needed to log into a project using the same account.

To better reflect real world usage, Mobify users now have the ability to add multiple people to projects. Each person can be assigned a permission-based role depending on what access they need.

These new roles include admins, developers, designers, and a read-only role that allows you to look around the project and give feedback without being able to make any actual changes.

To read more about teams, please see our teams documentation.

2. JavaScript selections

JavaScript Selections

Mobify's graphical Studio interface has always featured the ability to pick elements from your desktop site using CSS selectors. For example, to select a header image, you can simply reference it using its CSS class.

In this round of updates, it’s now possible to make selections using JavaScript as well. With JavaScript, you can make more complicated selections that would be difficult or impossible using CSS-only selectors. A simple example of this is if you wanted to select all paragraphs on a page that contain an image – easy with JS, hard with CSS.

To read more about this feature, please see the advanced selections documentation.

3. BlackBerry 10 support

The BlackBerry Z10 is an exciting new device from our friends in Waterloo. In this update, we've added comprehensive support for the device and its robust new browser.

Support for the Blackberry Z10 is automatically enabled in all new Mobify projects.

4. New documentation portal

Good documentation is central to a good user experience. Even the most amazing features can go unused if they're not accompanied by clear and concise documentation.

For all of Mobify's features, clear documentation for developers is almost as important as the underlying software itself. To make life easier, we’ve put together several guides for the most common issues developers face when building mobile websites, including:

To see the full list of documentation, please visit our Cloud Documentation.

5. Popout preview

Popout Preview

Over the past month, we received some feedback from Mobify users that the mobile site preview in the Studio interface was difficult to use.

The reason: when you use Chrome or Safari’s Webkit inspector to inspect the mobile DOM, Studio previously had the preview window embedded in the same window as the editor. This made it hard to differentiate the mobile preview from the main application's DOM.

With this new release, it’s now possible to popout the mobile preview into its own window. If you inspect the DOM of this window, you only see output for the mobile preview. This is especially handy if you develop with two or more monitors – you can position the preview window on another monitor, freeing up screen real-estate on the main interface so that you can focus on coding your awesome mobile site.

Feedback, Feedback, Feedback

We are always seeking feedback from our users to make sure we are moving in the right direction. Try out these new updates and let us know what you think – we're excited to hear your thoughts!

If you have any comments, questions, or suggestions, contact us at support@mobify.com.

, February 21 2013

Resource Kit: Mobify’s 2013 Mobile Success Pack

2013 Mobile Success Pack

There are literally hundreds of ways to optimize your mobile website to increase conversions, reduce load times and create better user experiences.

How do you decide what are the right strategies for action?

Here at Mobify HQ, we’ve been busy researching current and future mobile trends to help you create fantastic, fully optimized mobile web experiences.

In order to share our findings, we’ve curated the best parts of this research and combined them into our 2013 Mobile Success Pack.

The 2013 Mobile Success Pack is stuffed full of insider tips, techniques and data sets that provide clarity on the state of the mobile web, as well as information on how to capture revenue opportunities across smartphones and tablets, including:

  • 14 Essential Tactics for Mobile: Email, Search and Social Media Marketing (ebook)
  • 50 Ways to Please Your Customers: A guide to mobile web design best practices (ebook)
  • Adapting Websites for iPads and Other Tablets: Stella & Dot Case Study (white paper)
  • Global Mobile Commerce: Shoppers’ Habits Around the World (infographic)
  • Sizing Up Man’s New Best Friend: Global Screen Size Diversity (infographic)

Accelerate your learning and start getting more out of your mobile website today!

Download the 2013 Mobile Success Pack

, February 20 2013

8 Steps to Landing a Job at Mobify

Mobify's Intense Design Hiring Team

What's the biggest problem for a fast-growing technology startup focused on building world-class products and creating a better web in the process?

Finding amazing people – because technology companies like Mobify are made of people.

People build the product. People reach the customers. People create the culture. People comprise 80% of the investment a company makes in the future.

So finding the right people – through recruiting, referrals, networks, job posts, community events and more – is absolutely essential to build a company and execute its vision.

When we look for the right people we work to evaluate 3 key areas for each specific role:

  • Skills and experience – Does this person have the skills and experience to succeed in the role we have them matched to? Have they demonstrated an ability to learn new skills?
  • Culture – Does this person fit the values of Mobify (Innovation – Communication – Excellence) and demonstrate those values in their work? Do they match our open, relaxed and meritocratic culture?
  • Passion – Does this person have a passion and ambition for the web, mobile, learning and creating new things?

If you have the skills, passion and experience and are interested in landing a job at Mobify, check out our 8 step recruitment guide below.

1. Review the Job & Company Description

This seems like an easy step but one that is often missed. Taking the time to review the job description and doing research on Mobify ensures you are applying for a role that is in line with your skills, interests and career development. This will also help you to tailor your application and showcase your most relevant skills.

2. Apply for the Job

Submitting your resume through our job site – www.mobifycareers.com – or via external job boards allows us to track your application and ensures timely feedback if your skills and experience meet the position requirements.

Applying through Mobify Careers also allows us to share your application with our internal hiring team rather than depending on third party email chains. We don’t want to lose your application when the emails start piling up!

In addition to your resume, we recommend that your application include the following:

  • A demonstration of your work such as a designer’s portfolio or engineer’s code samples (e.g. from your website or GitHub)
  • Public profiles such as LinkedIn or Twitter
  • Links to personal projects

Seeing tangible examples of your work gives us a better understanding of who you are. It also gives you the chance to show off unique skills that may not come across in a traditional resume.

Once we receive your application, we will aim to review it as quickly as possible. We have a collaborative hiring process at Mobify and your resume will be reviewed by a member of the hiring team. The hiring team is typically made up of:

  • Mobify's internal recruiter
  • A team lead
  • A few employees with a strong understanding of the role

3. Introductory Phone Call

When screening applications, we will ask ourselves “does the application indicate the essential skill requirements are met?”. If the answer is yes, a member of the hiring team (usually our internal recruiter) will reach out and schedule a telephone call.

The introductory phone call will be an informal conversation between 15-30 mins long and will focus on your general background, motivations and skills. We’ll also cover some HR details such as your availability and we can tell you more about the role and our company.

4. Phone Interview

Once the introductory phone call is complete and we believe you have the essential skills for the job, we will arrange a telephone interview. The interview is typically conducted with the team lead or another member of the hiring team currently in a similar role.

The phone interview takes around 30 minutes and the hiring team member will go over your skills and and experience in greater depth. We’ll walk away with a much better understanding of your theoretical and practical abilities.

5. In-Person Interview

After a successful phone interview, we move on to an in-person interview.

The goal of the in-person interview is to achieve a consensus among the members of the hiring team about your skills and cultural fit. Mobify relies on a collaborative recruitment process to make sure that the team is as excited by you as you are about Mobify.

The in-person interview typically lasts between 1 and 2.5 hours and is conducted by 2 to 4 team members of the hiring team at our office in Gastown, Vancouver.

For engineers and designers the in-person interview usually includes a coding or design test to see if you have the technical or design chops for the job. You’ll have a set time period to complete the test followed by a Q&A session with Mobify employees to discuss your work.

6. ‘Mobify Day’ & Assignment

The 'Mobify Day' is another opportunity for candidates to assess whether or not Mobify is their ideal workplace.

On your Mobify Day, you’ll meet people from different teams, get out of the office for a coffee, drink or lunch, learn more about how the company works as a team, and explore Mobify's company vision.

Depending on the position being applied for, your Mobify Day may also contain a job-specific assignment. We are looking for insight on how you approach problems, prioritize tasks and work under a time constraint. The team will also evaluate what you produce and the quality of your work.

Our goal with an assignment is to simulate (as closely as possible) the work you will be doing at Mobify. A candidate for an engineering role will write code. A candidate for a marketing role may generate content or report on a campaign. In executing the assignment, we want our candidates to succeed as much as possible in demonstrating their skills.

Once you complete your Mobify Day, we will gather feedback from everyone you spent some time with – both on your suitability for the role at Mobify and on the results of your assignment.

7. Reference Check

At this point in the recruitment process, we've developed a pretty strong understanding of who you are – your skills and experience, culture and passion.

We want to supplement our insights with the insights of other people who have worked with you before, so we’ll contact your references. We try to speak to at least two references from recent employers (specifically managers) to confirm our findings and learn about how we can support you in being successful at Mobify.

8. Offer & Acceptance

After the reference checks are complete, we’ll get in touch right away and make you an offer. We will go through the details, tell you about the perks of working at Mobify and answer any questions you may have.

At this point, we are confident in your abilities to succeed with us and the entire organization is excited for you to join us!

Mobify's Not-So-Intense Design Hiring Team

Interested in Open Jobs at Mobify?

Are you eager to show off your skills, enthusiasm, passion and experience? Excellent! Check out Mobify Careers for all currently open positions.

To learn more about Mobify’s company culture, visit our Culture Blog.

And if you have any questions or comments about Mobify's recruitment process, please reach out to us @MobifyCareers and we’ll get in touch with you as soon as possible.

Subscribe to our blog

Get regular updates to help you create amazing adaptive web experiences.