Services-Prices‎ > ‎

Google Sites Mobile Websites

"A mobile Google Sites website can be created but....."





Will you use one website for both a desktop and mobile site or will you create two?  Realize that not all websites are suitable for a Google Sites mobile website. Make sure by testing.



Tips

  • build a cell phone website first and then work on the desktop website afterward
  • how to build a mobile device Google Sites website
    • build your desktop website to work on cell phone, tablet, desktop, in that order
    • work on the design next
    • work on the desktop site last
  • test your site on all devices when changes or additions are made to the website
  • realize that you have very little control over how a site displays on a cell phone on a Google Sites website so keep it simple
  • realize that Google Sites does not have the features necessary to display desktop content properly on a cell phone so keep it simple
  • a desk top website that works as a cell phone-friendly site, too, will have limitations
  • all desktop websites may not be suitable as a mobile-friendly Google Sites website
  • think of your mobile site as a book version of your desktop, it won’t be as pretty as a desktop but it will be very readable and easy to use if it is done correctly
  • focus on making a mobile site easy to use and content easy to find
  • use a font that is large enough, remember cell phone users
  • space is very limited on a mobile devices, use content only that is necessary to prevent excessive scrolling, create more pages if needed or place content off site such as in folders on Google Docs
  • try different base themes to find the one that works best as your mobile website

Website

  • test your site
    • using online cell and tablet emulators/simulators
    • using actual cell and tablet devices
  • mobile
    • “mobilize” the site in the “General” page of Google Sites
  • css
    • the fonts chosen may not display on your mobile site
  • base themes
    • many base themes respond nicely to mobile devices whether they are used on a fixed width (960px for example) or percentage width (90 - 95% for example)
    • ski to beige and blue base themes work well for fixed width websites (960px for example), the rest of the base themes have not been tested 
    • madison base theme does not respond well as a fixed width website (960px for example)  on mobile devices
  • width
    • flexible, percentage width recommended such as 90 - 95%
    • fixed width websites (960 px for example) will respond respond and display nicely on mobile for some base themes
  • template images
    • use images that fill the site’s width to fill large empty spaces created by flexible sites
  • header site name
    • site names are dynamic, they will change size, wrap around to another line, possibly push site content out of the way if custom template images are used and line height will change to fit the device space possibly breaking the words into hard-to-read pieces, some base themes do a better job than others
    • if a dynamic site name may conflict with the site's other content or be unattractive, consider using an image for the site name
  • header images
    • keep logo and/or header images small in height & width for cell phones
    • if logo or header images are large, decrease them or divide into two images if there is multiple content on it such as a logo AND a title
    • use an image (logo or header) in place of the site name if a site name is problematic, an image's size never changes

Website, continued

  • navigation
    • drop down menus vary where they display on the page, above or below the page link and can be problematic for viewers
    • use horizontal navigation instead of a sidebar, the latter will take up space
    • use few navigation drop down menus, cell phones will wrap the ones that don’t fit on one line around to another line possibly causing space and design conflicts 
    • multiple drop down menus can be used, depending on the site’s template design (images)
    • use one horizontal navigation drop down menu, if possible
  • pages
    • use page layouts to arrange content, they degrade gracefully on cell phones 
  • content
    • keep page content simple, few gadgets & images, mostly text
    • use properly formatted  headers/titles to make content easier to read
    • keep html code clean and properly formatted  to prevent big empty spaces in the flow of the content from trash html which can add margins and extra characters that take up physical space on a page
    • set header/title sizes to percentages (200% for example) so they adapt to the space in the device, small for a cell phone and larger for other
    • use large navigation button or links (don’t make viewers search for them)
    • use small images for easier download on smaller devices