Close Window

Print

BB2 Mobilize It! Testing

Testing is done in the "Sandbox" version of your site, using your mobile phone. You can also invite friends, family and certain visitors to test the mobile version of your site.

The Sandbox page ensures that only people with access to that page can view the mobile version before you release it to all of your visitors.

To test it yourself, in your phone, go to your sandbox activation page...

As a reminder, the URL is www.yourdomainname.com/msb.html (change yourdomainname to your site's name.

On that page, click on the Sandbox Me button.

Check for Desktop Issues First

Before testing for mobile issues, check how your desktop version is now displaying. View your site on your computer. Check everything that you duplicated on the pages, to ensure that both versions are not showing on your pages.

If you see anything that's duplicated, you may have forgotten to set the Container Block correctly. If it's content in a Sitewide Dot, edit any page and set the block to "Mobile devices" (or "Desktop/Tablets").

Once you're certain that pages are displaying properly on your computer, it's time to begin testing the mobile version.

Test With a Wide Range of Phones

Test with as many different mobile phones as possible. For example, if you have an iPhone 5, ask people who have an iPhone 6 or 6 Plus, 7 or 8, or an iPhone X, or any Android phone to test for you, as each one will display things slightly differently.

Ideally, you'll test your mobile version first, to ensure that all functionality works properly on it. If C2 invitations and FBI! forms work on your phone, they'll work on the other phones as well.

You need the other testers to ensure that everything displays properly on the phones you don't have.

Test Functionality

It's essential that every part of your site continue to work properly for mobile visitors, and for desktop visitors. So you need to test everything to ensure that it works in your phone.

Here are the page elements you need to test. Note that some will be on all pages, others only on certain pages.

While you're testing functionality, also check that these forms display properly (e.g., text boxes aren't too wide for the screen). This will save you having to return to these pages to check them a second time, for display issues.

• Contact form on the contact page. Fill out the form.

  Does it take you to the Thank You page? If it does, move on to the next test. If it doesn't take you to the Thank You page, test the form on a page in your computer's browser. If it works there, try rebuilding the form in FBI!, then refresh the page on your phone. If it still doesn't work, contact Support.

• Newsletter opt-in form. Fill out the small version (in a Sitewide Dot) in the Nav or Extra Column and the large version (if you use one) on a dedicated signup page.

  Do you see the subscription Thank You page? If so, check for a confirmation email in your email app or Webmail. Confirm your subscription. Do you see the confirmation Thank You page? If you do, the entire process is working. If it fails anywhere, check that the form works on your computer. If it works there, contact Support about the mobile problem.

• Every C2 invitation (including the Thank You page). Fill out a "submission."

  You may not be able to upload photos, depending on the type of phone you have. You may want to add a note in the help section for Picture Upload about this.

  Edit the submission contents on the Thank You page. Enter your notification information. Also add a comment to an existing submission and enter the notification information.

• Socialize It! button bar. Click on each button in the bar. Each one should open a small window.

• Facebook Like buttons. Click on one of the buttons on a page you haven't already Liked.

  A small dialog box should open, allowing you to add a comment with your Like.

  Note: Due to changes at Facebook, the commenting part of the Like button may not display at smaller widths (Nav and Extra columns) in the mobile view.

• Facebook commenting. Click in the comments box on one of the pages.

  You should be able to type or paste in a comment and then have the comment added to your profile's Timeline.

• Other social media buttons. Click on each one, which should allow you to complete the action at the respective social site.

• Pin It buttons. Click on a Pin It button (if you have them on your site).

  A dialog box should open, allowing you to customize the Description text and select a board to pin the image to.

Check the Layout and Display

There are two types of things to check in the layout and display -- that the design itself looks good, and that the content that should only be seen in mobile is seen in mobile (and the content that should not be shown in mobile is not seen).

Below is a list of items to check. Any changes to be made in Site Designer will be made in the device view where the problem shows, not the Desktop device (which is the default). Duplication of content and any other content issues are fixed in BlockBuilder.

You already checked forms, invitations, etc., above, while you were testing the functionality. If anything needs to be fixed in either Site Designer or BlockBuilder, do that now.

Issues to Be Fixed With Site Designer

• Are the buttons at the top of the page displaying correctly? Click on each one. Do they say what you want them to say?

  If there are any display problems, go to Site Designer, click on the Device menu just above the toolbar, select a mobile device from the list, then click on one of the buttons at the top of the phone "screen." Make changes to the button text and save them.

• Is the main headline the right size, or does it look too big for the page? Does it need to be centered, or made to stand out more on the page? Make changes in Site Designer.

• Are callout and reminder boxes displaying correctly. The reminder boxes especially may need to be widened so that more than just a couple of words per line fit in them. Make those changes in Site Designer.

• When you jump down to the Navigation section (using the button at the top), is any of the Nav Column and/or Extra Column covered by the buttons? If so, in Site Designer, add some padding or margin to the top of the Nav Column and/or Extra Column (for a mobile device, not the desktop).

• Is the text in the footer on two or more lines instead of just one line in the desktop view? Try reducing the font size. If that doesn't work, you'll have to add a duplicate footer, making the original for desktops and the second one for mobile devices.

  Links, however, should use larger font sizes, especially if you have several of them (links to your Tier 2 pages, for example). You may also want to increase the line height, if links are too close together.

Issues to Be Fixed With BlockBuilder

• Is the NavBar at the top of the Navigation section, or is there still some content above it.

  If you see anything but the first Nav Header or Nav Link, edit the page to hide the content from the mobile view. If the content is common to all pages, hide the content in the Sitewide Dot by adding a Container Block to it, setting it to Desktop/Tablets, and moving the block of content into the container.

  If you want the same content moved to the Extra Column in the mobile view, add a new Container Block to the applicable Sitewide Dot and add the content to it.

• Do social media buttons, images and ads display properly in the Extra Column? If they're too wide, you'll have to reduce them (this will require code changes) to no wider than 150px.

Time for Outside Testing

Now that you've completed testing the functionality and fixed any design and layout issues, it's time to have friends, family and regular visitors test for you.

You may not think it's necessary. Based on Help Elf's beta testing experience of Site Designer, we can say that it is necessary. Having as many eyes as possible, with as many different phones as possible, will help you find the small details that you overlooked (or the ones that you thought wouldn't really matter).

Send an email with the URL of your Sandbox page to anyone you think will do some testing for you. If you send the email from your phone, copy the URL from your browser. (Don't provide instructions for using the Sandbox page to the first few people, as you'll want feedback about it. This will let you improve the Sandbox page for the remaining testers.)

Before you send the email, realize that not everyone will test for you, even if they say they will. Some will not want to. Those who do, may not do a thorough job of it. Others will test well but will not report issues clearly.

The bottom line is that whatever you do receive from your volunteers, take it. And then thank them for helping you make your site better for all users.

You'll help your cause if you make testing as easy as possible for them. In your email, provide URLs to pages with forms and C2 invitations. This helps them get right to the functionality testing.

If they don't like a certain way that part of the page displays, tell them that you want them to let you know about it, and, if possible, how they would fix it. Then look into changing it (however, if you have 25 people testing and only one of them complains about something, you may not want to make that change).

Give testers a deadline for sending you their report. If you don't, you'll be receiving some reports in a month. A week to 10 days is enough for most volunteers to get testing done and send a report back to you.

Going Public

Once all testing and fixes/improvements have been made, it's time to go public with the Mobilize It! version of your site.

First, though, go to Traffic Stats and record the mobile stats for the previous full month and this month to date. That will give you a baseline to judge traffic improvements due to Mobilize It!.

If you use Google Analytics, record time on site, pages per visit, and bounce rate before you switch over. Then record the mobile stats, including cities and your AdSense revenue from mobile.

Now go to Site Central and click on the Mobilize It! link. Click on the ON circle. The green button will slide over there from TEST. Click on Update Mobilize It!.

Congratulations! Your site now has a desktop/tablet version plus a mobile phone version, available to all visitors.

Now it's time to announce it.

Add a bloglet to your Blog It! page, send out a newsletter issue, tweet about it, and announce it on your Facebook page.

You'll soon start seeing traffic numbers increase as more and more visitors read your site in the mobile view on their phones.

© and ™ SiteSell Inc. All Rights Reserved.

Close Window