BB2 Mobilize It! Optimization
Contents
BB2 Mobilize It! Optimization
There are several things that you can do to make your BB2 pages display well on mobile phones. If you used a responsive site design, there's nothing else left to do after customizing the design. If you selected a Mobilize It!-ready design, keep reading.
Design changes (such as making headline fonts smaller, and widening the Reminder Box), you already did in Site Designer.
Now you'll be changing the location of various pieces of content on your pages (e.g., What's New Box, Newsletter Opt-in Form, social media buttons).
Almost all of these will be common content on every page of your site, located in Sitewide Dots. This means that you'll make most of these changes on one page and you'll be done.
You'll use the Container Block to make these changes to how the page displays in desktop devices (and tablets), and in mobile devices.
You can use the Container Block in one of two ways...
-
Show the content in one location on one set of devices and show it in a different location on the other set (e.g., move content that's above the NavBar to the Extra Column in the mobile view). This requires duplicating the content (e.g., Facebook Like buttons).
Note: You cannot do this with AdSense ads, as it's against Google's terms of service. Keep reading to learn how to deal with AdSense ads.
-
Show the content on one set of devices, and not show it at all on the other set.
Before you begin, read this TNT article about Mobilize It! Best Practices...
https://sbitips.sitesell.com/mobilize-it-best-practices.html
Nav Column
Since your Nav Column appears in the mobile view after your main content, instead of to the left of it, it's important to provide your navigation first in that column, rather than an AdSense Link Unit, Facebook Like button, Google Search box, etc.
You can only "move" Link Units, not Ad Units. You must either completely remove Ad Units from the Nav Column (if you don't want them in the mobile view), or leave them untouched (which will show them in desktop and mobile views). In either case, you'll need to change the ad code, which you'll do later in this help.
This is due to the AdSense terms of service, which prohibit the hiding of ads on pages. You can hide Link Units, since they do not create ad impressions (they require a second click before an ad impression is counted).
Anything that's currently above the navigation should now be displayed for desktop/tablet devices only. To make that happen, drop a Container Block in the same location as the content you want to show only on desktops (and tablets). (If the content is in a Sitewide Dot, drop the Container Block on the dot.)
Select "Desktop/Tablets" from the Show This Block on... menu in the Container Block toolbar.
Drag the existing block (Newsletter Opt-in Form, Raw HTML, etc.) that you want to be desktop-only inside the Container Block.
By now, you may be wondering how to make that same content appear in the mobile view.
Drag a Container Block to the location where you want the content to appear in the mobile view. A good place is the top or bottom of the Extra Column (depending on what the content is). If you want this content to appear on every page, drop the block onto a Sitewide Dot.
Select "Mobile devices" from the Show This Block on... menu in the Container Block toolbar.
Add a new block to this container. It should be the same type of block as you made "Desktop/Tablets" in the Nav Column.
Next, click into the block in the Nav Column and copy the content there. Paste it into the new block inside the "Mobile devices" container. If the content is a social media button or a form, drop the relevant block into the container and select the same button or form.
Of course, all of the above assumes that your template has 3 columns. If it only has two, then move anything above the NavBar to below the navigation.
It also assumes that you use a vertical NavBar. If you use horizontal navigation, then most of the items you'd move to the Extra Column may not need to be moved.
Extra Column
The content of the Extra Column may be fine as it is, or you may want to switch the order of some items to make them more (or less) prominent to mobile visitors.
The process you used in the Nav Column also applies in the Extra Column. Anything that you want to display only on desktops and tablets needs to be moved into a Container Block set to "Desktop/Tablets."
Anything that you want to display only on mobile devices needs to be moved into a Container Block set to "Mobile devices."
If you have images in the Extra Column, they might be too wide for the mobile version's Extra Column. If that's the case, you may have to duplicate the images, creating a "Desktop/Tablets" version at the original size, and a narrower version for "Mobile devices."
This will involve resizing the images to 150px or less using a graphics application or Picmonkey, giving the small versions new names, then adding these new images to your Image Library.
The same applies to affiliate ads in the Extra Column. If they're too wide in mobile, set the originals as "Desktop/Tablets" and find smaller (no wider than 150px) versions at the affiliate company for "Mobile devices."
Content Column
There should be very little to change in the Content Column. The main exception is any social media buttons you added to your pages. See the next section for details on dealing with the buttons.
Any images that are wider than 60% of a phone's viewport (screen size) will automatically be centered to avoid text-wrapping problems.
Must-Do Tasks
There are a few things you'll have to do if you want certain parts of your site to display properly on mobile devices.
Social Media Buttons
If you added social media buttons (but not Facebook Like buttons) to the Nav Column or Extra Column, ensure that you edit the button widths to no wider than 150px. Or create new buttons using narrower button types.
If you added social media buttons to the Content Column, duplicate them if they're wider than 315px.
Facebook's code now automatically resizes from wide buttons (e.g., 450px) down to whatever fits in the mobile device's screen (to a minimum of 225px, which is narrow enough for even the smallest smartphone). So there's no work to be done for the buttons, or the Commenting box.
If you created a button (Google+, Pinterest Follow or Twitter Follow) that's too wide (wider than 315px in the Content Column or wider than 150px in the Nav or Extra column, the simplest fix is to create a new, narrower button. Then place the button wherever you want it for desktop and mobile.
Newsletter Opt-in Form
To ensure that your opt-in form will display properly in the Nav Column or Extra Column, be sure to place the labels above the text entry boxes. This is the default, so you may not need to make a change. But check it to be certain.
Search Boxes
If you have a search box at the top of the Nav Column, "move" it to the top of the Extra Column.
Drop a Container Block where the original one is, and drag the existing Raw HTML Block into it. Set the container to "Desktop/Tablets."
Drop another Container Block where you want the search box to display in the mobile view. Drop in a Raw HTML Block. Copy the code from the original search box and paste it into the new Raw HTML Block. You may have to reduce the width after testing on your phone.
If you added a full width search box just above or below your H1 headline, you'll need to make that one "Desktop/Tablets" and then add a second one, set to 315px, for "Mobile devices."
AdSense Ads
Google has an ad type that's responsive to the size of the device viewport (screen size). Create an ad using the Responsive ad type.
If you have had "normal" ads (non-responsive ads) on your site, return to AdSense and copy the Responsive version of your ad code. Replace the existing ad code in the Sitewide Dot or page with the new code. Rebuild the page (which will replace the code on every page using that Sitewide Dot).
Your Sandbox Page
You can also edit the text that will appear on the Sandbox page, which you and invited visitors will use to access the Mobilize It! version of the site during testing.
In Page Manager, type "msb" (no quotes) into the filter box. The file msb.html will show in Page Manager. Click on it, and select edit.
In that page, you'll see a Raw HTML Block with Javascript in it. You can change the text in that block to suit your needs, including changing it to a different language. See this TNT HQ article for details about what you can change and how to change it...
https://sbitips.sitesell.com/mobilize-it-uploaded-msb.html#LANG
Remember to replace "Your name" with your name!
Ignore the part about changing the button text. You did that (or can, if you missed it) in Site Designer. Scroll down until you see the red text.
Be sure to hide any Sitewide Dot common content, including your NavBar and AdSense ads, on the sandbox page.
Don't use Analyze It! for the sandbox page. The search engines will never find this page, since it's not linked to from any other page, and it's not included in the XML sitemap.
When you're done, click on Build It! to save the changes.