Setting Up Site for Mobile

Initializing Mobile Style Sheets

As of version 5.4.0, The page layout files include mobile device detection. This detection performs three actions to aid in mobile development:

The style sheet used for rendering the page switches from site.css to site_mobile.css. You can editing these files either with the styles editor, and/or the custom styles editor. There are also style sheets for mobile menus as well.
mobile style sheets

To get started quickly, you can copy the desktop style sheets to the analogous mobile style sheets. To do this, click on the button as shown below:

Copy styles to mobile button

(Note: This feature is only available when logged in with admin privileges.) You will see the console and shown below:

Copy stlye sheet to mobile

Simply click the desktop style sheet button and after a couple of warnings, the desktop style sheet will be copied into the analogous mobile style sheet. If the mobile style sheet does not exist, it will be created. Note: Any existing styles in the mobile style sheet will be erased. Tip: Use the length unit em instead of px or % for text and other things. Pixels are much tighter on a mobile device to get image sharpness in a small package. Thus it is more difficult to get pixel sizes to work across many mobile platforms compared to ems.

You can turn off table structures within the page layout file. Note: You can also turn off table structures when being viewed with office devices if you want. For more information on turning off table structures click here.

The built-in mobile detection within the page was kept intentionally very simple to avoid loading down the pages with a lot of browser/platform-detection JavaScript that may not be used. It is a very simple go/no-go gage to determine is mobile or is not mobile. There is a JavaScript var in the head of every page named is_mobile. If mobile device, this var is set to true, otherwise false. You can use this var to perform different actions in JavaScript or JQuery based on viewing platform. If you want more fine tuning for different devices, you may of course add JavaScript and JQuery referencing to a popular browser/platform detection script in the head of the pages using the head code editor.

 

Mobile Menus with Hamburger Icons

One of the most important considerations for mobile-capable sites is how the menus will look and work on a mobile device. Fortunately, the Breeze Website Builder's CSS menu system offers a great deal of flexibility in mobile design. Below is an example of a website shown on a desktop or laptop computer:

desktop site

The same site on an Android phone looks like the image below:

mobile screen shot

Note the "hamburger" icon in place of the menu. When this icon is clicked, the menus display as shown below:

mobile screen shot with menus

You can see that the mobile menus have the same look and feel as the the desktop version, but they are shown vertically instead of horizontally. The hamburger icon is replaced with the close menu icon. The code that accomplishes this is shown below:

<script>
     var menu_height;
     var step = 10;
     var max_menu_height = 640;
     var timer;
     var interval = 5;

     function HideMenu()
     {       
			if (is_mobile)	{
       		document.getElementById("menu_div1").style.height = "0px";
	         	document.getElementById("menu_div1").style.overflow = "hidden";
	       }
     }

     function ShowHideMobileMenu()
     {
	       var img_src = document.getElementById("show_hide_mobile_menu_img").src;
	       if (img_src.indexOf("menu-icon.png") > -1)	{
		         document.getElementById("show_hide_mobile_menu_img").src = "/images/menu-close-icon.png";
		         menu_height = 0;
		         timer = setInterval(ExpandMenu, interval);
         }
         else	{
	         document.getElementById("show_hide_mobile_menu_img").src = "/images/menu-icon.png";
	         menu_height = max_menu_height;
	         timer = setInterval(CollapseMenu, interval);
        }
     }

     function ExpandMenu()
     {
	       if (menu_height < max_menu_height)	{
        		menu_height = menu_height + step;
         		document.getElementById("menu_div1").style.height = menu_height + "px";
	       }
	       else	{
	  	       clearInterval(timer);
	  	       document.getElementById("menu_div1").style.overflow = "visible";
	       }
     }

     function CollapseMenu()
     {
	       if (menu_height == max_menu_height)
		       	document.getElementById("menu_div1").style.overflow = "hidden";
	       if (menu_height > 0)	{
		         menu_height = menu_height - step;
		         document.getElementById("menu_div1").style.height = menu_height + "px";
	       }
	       else
	         clearInterval(timer);
     }
</script>

The one value you may want to adjust to improve the animation for you site is max_menu_height. Simply set max_menu_height to the pixel height of your expanded menu. You may copy and paste this code into the default head for your site.

To improve the code-to-content ratio on your site, a mobile menu script is included with the Breeze Website Builder™. Simply add this code to head for your pages using STYLES & HEAD CONTENT/Manage Head Code/Edit Head Code:

<script>
     var hamburger_menu_num = 1;
     var max_menu_height = 640;
</script>
<script src="scripts/mobile_menus.js"></script>

Set hamburger_menu_num to the menu number of the menu that should be used when hamburger icon is clicked, i.e. 1 for menu1_mobile, 2 for menu2_mobile, etc. as you have assigned in MENUS/Manage Menu Assignments. Adjust max_menu_height to the expanded height of your menu as mentioned above. If not assigned, the default for hamburger_menu_num is 1, and for max_menu_height is 640.

 

Below are the "hamburger" icons and the close icons. You can download these images for your site if you wish. Whatever hamburger icon you decide to use, name it menu-icon.png and save it as a PNG file. Also for the close hamburger icon, name it menu-close-icon.png and save it as a PNG file. Upload both images to the images folder.

hamburger menu icon menu close icon   hamburger menu icon menu close icon   hamburger menu icon menu close icon   hamburger menu icon menu close icon   hamburger menu icon menu close icon

Put the following code into the header (or sometimes the top) of your pages using CONTENT/Manage Border Areas/Edit Border Areas:

<div id="show_hide_mobile_menu_btn" onclick="ShowHideMobileMenu();">
   <img alt="Show/Hide Menu" src="/images/menu-icon.png" id="show_hide_mobile_menu_img" />
</div>

This will place the hamburger icon at the top of your page with the appropriate on-click code for expanding and collapsing your mobile menu and swapping the icon image to show state of menu. Create the class show_hide_mobile_menu_btn using the class editor and set the CSS to position your hamburger icon. Add this class to both the desktop and the mobile menu style sheets, i.e. menu1 and menu1_moblie. For desktop you will simply want to hide the icon, thus the CSS is simply:

#show_hide_mobile_menu_btn {
     display: none;
}
For mobile you will need to dispay and position the icon. Thus CSS will look something like:
#show_hide_mobile_menu_btn {
   display: block;
   position: absolute;
   top: 5px;
   right: 20px;
}

Note that at a minimum, you must set the display to none for desktop styles. This ensures that the hamburger icon is hidden when viewing on a desktop or laptop computer. Other CSS that you may want to include for mobile styles are position to absolute, top and left or right.

You will also need to hide the menu div initially for mobile devices. To do this, in your mobile menu style sheet, add to the CSS for your menu div as follows (using the appropriate menu number suffix):

#menu_div1 { 
	.
	.
	.
	height: 0px;
   	overflow: hidden;
}

All together, the CSS for your menu div will look something like:

#menu_div1 {
	position: absolute;
	display: block;
	top: 150px;
	right: 0px;
	width: 400px;
	z-index: 100;
   	height: 0px;
   	overflow: hidden;
}

Alternatively, you could call the HideMenu() JavaScript function to hide the menu when your page loads. (Less desirable because you have to do this to every page.) To do this, go to PAGE MANAGEMENT/Page Attributes. Then set Call Body OnLoad Function to:

HideMenu();

 

Sub Menus for Mobile Menus (touch-screen devices)

Note that this example site uses sub menu items in the top menu. There is one caveat for sub menus on a mobile site. Because there is no mouse-over event, you will need to add a menu item who's sole purpose is for displaying the sub menu items under it. To do this, simple insert a menu item and do not assign a link (URL) to it. Below is an example of what this looks like on an Android phone:

moble screen shot showing menus

You can see that there is a Highlights item in the main menu and in the sub menu. The item in the main menu has no link assigned to it. This is to prevent going to another page and thus refreshing the menu back to its closed state. The item with the actual link to the Highlights page is in the sub menu instead.