January 2014 Google Sites TemplateThis month's template was an experiment in mobile sites.
I tried to create a Google Site that would work on cell, tablet and desktop. I managed to do this but learned that I have more to learn.
In spite of the limited CSS and inability to access the code to use media queries, Google Sites websites respond to the different devices quite well. About The Template
This template is very sparse in text, has no images and no gadgets (though Google Sites page gadgets perform fine). This was intentional to test specific functionality first before moving on to other kinds.NOTE that this template has custom HTML
, some for decoration and other for responsiveness. The latter was added to the page headers and used percentages for sizes, such as 200%. This worked well on the cell phones, adapting their sizes to fit within the smaller screens.What Was Tested
1 - responsive website width - OK
2 - responsive font size - OK (used custom html font size in percentages such as 200%, for example)
3 - "top of page" link in the footer and top of each page - OK
4 - site name link - did not respond but stayed original size so that larger font sizes appropriate for a desktop used up a lot of space on a cell phone)Lessons Learned
1 - build for cell phone site first and desktop site last
2 - many base themes respond well with either a percentage or fixed width
3 - use horizontal navigation links
4 - style of navigation link matters, boxes, tabs and links vary in the space used
5 - be careful not to create extra space in the pages such as margins, on cell phones it can cause more scrolling so check the html code to be remove them
6 - keep content minimal
7 - the more drop down menus, the more space the navigation takes
8 - not all types of sites will work well within these limitation so a second mobile site might be bestTips
1- "Mobilize" a site so that it will respond as a mobile site and not as a desktop site that has been shrunk down in size.
2- Test on actual devices and on online simulators, too.
3- Test after every change to the site.
4- Test the base theme you choose
on all devices for the width of your choice before using it.
5 - Download a template from the Google Sites Gallery, play with it and test it. This one is a good one because it has gadgets, images and no template images to interfere with its responsiveness.nonprofitwebsitetemplate2
If you use this template, disable the sidebar. Or, wait and find out for yourself that this needs to be done.Future Testing
The next items to test are the addition of template images and how they affect the site's mobile responsiveness. I have already done some testing and can say thus far, they can be problematic.
This is especially true of the Header section. A logo or header image does not share its space well with the site name so causes a jumbled mess. It appears that either one or the other must be used.
And a wrapper image causes template image/page content alignment problems. More on these later.
Finally I have to say that the responsiveness of a site can vary depending on the base theme used. You have to test. But a Google Sites mobile site looks promising if built within limitations.
Your comments are requested. What else should be added to a mobile/desktop site?WARNING! THIS TEMPLATE USED LOTS OF CUSTOM HTML
View the code source before working with it.
View template here. mobilewebsitetemplate1