How to Mobilize Your Websites with Google Sites
 

Mobilize Your Websites with Google Sites

According to a study conducted by Google, by the end of December 2012 more than half of the phones sold in the USA will be smart phones. Together with the rise of smart phones is an expected rise of mobile browsing AND online shopping through mobile phones. Don’t get left behind, mobilize your current website into a version that is fast and mobile-accessible.

http://i56.tinypic.com/v6q2cp.jpg



Use Google Sites to literally “Mobilize” the core contents of your website. While your pc-accessible website has all the important product and service details, pc-accessible websites do not always display well on mobile phones. You can choose to hire the next team of web developers to create and maintain your new mobile site, or you can simply hit Google Sites and design for your own! One major benefit of Google Sites is being able to interface directly with Android devices – so that clicking on your company phone number tells the Android device to call and store your phone number.

http://i52.tinypic.com/pwtut.jpg

======================================

Google Sites – Mobilize Your Business
http://i51.tinypic.com/eprnl0.jpg

Start building your own mobile website, visit the URL
Google Sites - Mobile Templates

You can play around with the website settings. You can choose from the templates:
Restaurant –A unique feature of this template is how it presents a simple yet detailed list of food items and prices
Local Business – A generic template for all kinds of businesses. Put in a short note about your core products and services, immediately followed by your phone or sales email
Lead Generation – Create quick mobile pages for gathering feedback and inviting mobile viewers to leave their mobile/email address for mailing list and survey purposes.
Social Networking – Get your Blog Address on mobile, link viewers to the mobile versions of your social networks Facebook, Twitter, and Linked-In
E-Commerce – Offer products on the mobile web, and with Google Checkout viewers can make mobile purchases securely and confidently.
Or Create Your Custom Design – Google Sites is Simple, Fast, and Free!

If you already own a pc-accessible website, you can try Google Sites for Mobile. The fastest way would be creating a redirect on your URL (in example, browsing http://m.example.com can be made to redirect to your Google Sites Powered Mobile website.



I decided to customize one of the templates and see if I can create a test mobile site of my own. Login with your Google Account, select a template, and click Use this Template

You will be asked to input a descriptive name and title of your website.
http://i56.tinypic.com/2l96p0x.jpg
Think a short, easy to remember, and descriptive site URL. Think of a really good one, this unique name will be reserved for your use. It will be unique to all Google Sites.


As soon as the site name and unique URL is created, you will be take to the preview and editor of the template.
http://i51.tinypic.com/ekkrm.jpg
Edit Page button - allows you to edit the main content of the website. This edits the middle section – where you can input the body text, images, and other components.
More Actions button – this button has a lot more options, for your website settings, viewer preview, changing or editing of website templates, managing the website layout, and even for the setup of a Google Adsense advertising account.

From the basic editor page, you can go right away to edit the body contents of each page. The next thing you would be interested in changing are the top and bottom headers. Access the settings to changing these sections through the More Actions button.
http://i54.tinypic.com/10cq24h.jpg

Below is a quick visual for understanding the default template design
http://i54.tinypic.com/2jfbx4o.jpg
The top headers can be changed by clicking on the Change Logo link.
Change the bottom footer by clicking on the Edit Footer Control
As an optional edit, you can customize the System Footer to set if you would like to brand your mobile website as a Google Powered Site.


Let’s start by editing the template header and inserting our own logo.
http://i56.tinypic.com/x1m0ys.jpg
The recommended logo is a picture of size 250 x 85 pixels


Continue editing the main body of the website. The main body of the first page can be edited right from the editor window, simply click on the Edit Page button.
http://i56.tinypic.com/vqgv9s.jpg

You can format text, insert links, and insert pictures, videos, and other website gadgets. A reminder though:
- For fast loading websites, keep the size of pictures/sound/video content as small in file size as possible.
- Remember that a variety of mobile devices will be accessing your site. Keep the size and layout of text and images friendly to scrolling vertically.
- Remember also that most smartphones expected to browse your mobile site may be touchscreen enabled, give generous spaces between linked text and images. This helps mobile touchscreen users to correctly navigate through your links.


You can add more pages to your mobile site. To better understand how Google Sites creates and manages each page, click on the Pages link
http://i53.tinypic.com/f1w38x.jpg
Create or delete new pages. Remember to give pages a descriptive name, also take note of the URL that pages take. You will need them later for linking text and images within your mobile site.


The default restaurant template had a “Menu” page. It was intended for providing a fast loading list of food pricelist. I thought I would edit this page to list the fictional products of my test Google Site. I edited the page name and url from Menu, to say Items for Sale. Proceed to edit the text pricelist of my pc parts merchandise.
http://i51.tinypic.com/hx9gzs.jpg

Again, remember the basic design concepts for creating mobile web pages. We can choose to create many pages for each product on sale, and include hyperlinks for each. But then this may hamper the browsing experience with touchscreen users. I choose to keep the links to a minimum and instead provide a summarized list of items and average prices.


Edit and customize the footer content.
http://i53.tinypic.com/s2r1g7.jpg
For this template, the footer section is a main navigation point in the website. In this brief example, I place an icon to the product pricelist and another icon for quickly browsing to the Google Maps address of my fictional computer store.


Google Sites keeps track of the changes you make, and it allows you to track the previous history of website edits. This is useful in case you make errors in the changes, or simply want to revert to an older version of a page on your site.
http://i51.tinypic.com/4vkfaq.jpg

The test mobile Google Site page is now available for online viewers.
https://sites.google.com/site/mobiletechstore/

Viewing the newly created Google Site webage on a mobile phone:
http://i54.tinypic.com/2ns6q87.jpg


http://i53.tinypic.com/16h0x83.jpg