To make sure your site looks its best on mobile devices, we will copy your existing site to a staging server so that you can preview it and make any necessary changes in the staging location.

View Mobile Site

Even if you don't have a mobile phone available you can use your computer to see what your mobile site will look like:

  1. Visit the staging location of  your site at (www.bu.edu/your-site/, sites-staging.bu.edu/your-site/, etc.)
  2. Click on the Mobile Version link at the bottom of the page.
    Mobile Version Link
  3. Resize your browser window to the appropriate size by clicking on one side of the window and dragging it to the minimum width.
  4. To return to the desktop version of the site, scroll to the bottom of the page, click on the Desktop Version link, and then resize your browser window.
    switch-from-mobile

Update Content

Rotating banner images, large tables, large in-content images, Flash-based content, and complex Gravity Forms should be changed or removed in order to optimize your site for the mobile layout. Some tips:

  • Avoid setting pixels widths to images (rotating and static) and tables. Instead, use percentages as width: width="95%"
  • Apple iOS devices and newer Android devices will not display Flash-based content or videos. If possible, avoid using Flash at all. Otherwise, be sure to provide alternate content. The following bit of code shows how BUniverse videos add an additional link and text inside the Flash object to account for devices without Flash:<object type="application/x-shockwave-flash" data="http://www.bu.edu/buniverse/interface/swf/player.swf" width="550" height="355" id="buniverseplayer">
    <param name="movie" value="http://www.bu.edu/buniverse/interface/swf/player.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="flashvars" value="viralbu.videoid=KWG5b14X&amp;viralbu.loc=3" />
    <a href="http://www.bu.edu/buniverse/youtube/?v=KWG5b14X">
    <img src="http://www.bu.edu/buniverse/data/thumbs/thumb_l.jpg" width="550" height="310" border="0" />
    <br />Watch this video on YouTube
    </a>
    </object>

    The highlighted portion can be an image, paragraph text, a link, or a combination of all three (as above).

If you have any questions or concerns during the content review process, please contact the IT Help Center.

Separate Mobile Homepage

If it turns out that you cannot manage your homepage content in one location for both your mobile and desktop sites, we can create a new homepage that will only be used when your site is viewed from mobile devices. This is helpful in the cases of robust homepages with multiple sections that do not translate well to mobile.

Contact the IT Help Center to create a new mobile homepage.