Tutorial - Creating A Mobile Site with Google Sites

In a world of mobile devices, there is an easy (you can call it that) way to get your Google site to become a mobile web site. You'll have to re-design your site to fit a mobile device, which means your site will be shaved down a lot, but not so much as to steer customers away.

Ok, I use Photoshop CS5 to design, so we need to start by creating a new image.




Use the size of W400 H480. These sizes are your typical smart phone dimensions. The screen resolution will make your site fit correctly in the screen of the phone.

Now, using your layers, create a folder or set of folders to help organize your layers.

You can start to design a site the way you typically start. For this site, I am using a No header site. This way, your links will be at the very top and it will help viewers see your main pages at first glance.

Your site width for the actually viewing needs to be 320px. The left over will help create the border around your site. The height doesn't matter.

Here is a view of my overall Photoshop design for the site. It's simple and clean, not a lot of graphics, or photo effects. Remember having a site that has a heavy/large image file to load, will turn a customer away in a second.

Now its time for you to create a mobile Google Site. Start off by using the typical setup of your sites. Use the Blank Slate theme, its the best way to go for designing this type of site. When setting up your site layout, make the width 320px. Remember thats the area for your content. Use Horizontal Navigation Bar.

Once you play around with what works best in your colors and styles you should have a nice looking mobile site going on!

Here is a link to the site https://sites.google.com/site/3sgmobile/ you can type it in your mobile phone and see what a great way to get needed info to clients via mobile.

Hope this was a good tutorial for you. Any questions feel free to leave a comment.

Comments

  1. It is great that you thought outside the box and saw a new way to market Google Sites. Quick and easy mobile websites. Very smart. Thanks.

    ReplyDelete
  2. This blog seems to be really quite interesting as well as informative too. Thanks..

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Thanks for this tutorial. Having your website available on mobile phones is very important especially now, where most people would rather access the internet via mobile phones.

    local seo services

    ReplyDelete
  5. Great tutorial of creating a mobile site, I'll definitely try this out for sure. Thanks and have a nice day.

    ReplyDelete
    Replies
    1. Thanks for the tutorial. I know this will definitely do a lot of help! Great job by the way!

      Delete
  6. I agree with you completely. One effective strategy of digital marketing is to build a network of bloggers around your category who you can reach out to over and over again.

    ReplyDelete
  7. google sites padawanOctober 25, 2012 at 8:36 AM

    Is this information still relevant with all the really big smartphones out there with very large screens? What about iPad's and other tablets? THANKS for this great info!

    ReplyDelete
  8. Hi..
    This has been a huge help for myself and my team members! We needed comprehensive help and direction to finish project on time. Hopefully with all the resources you gave we can get it done! Thanks a million!..
    Thanks..

    ReplyDelete
  9. Quite possibly, you will have either received a recommendation or found Urban Media on a search engine or through social media. You still need to know we will be right for you. Here are some benefits that may just help you to decide.Check this out for more info.

    ReplyDelete
  10. Thank for your post ! Here is what I was looking for !

    ReplyDelete
  11. This is such a Great resource that you are providing and you give it away for free. It gives in depth information. Thanks for this valuable information.

    ReplyDelete

Post a Comment

Popular posts from this blog

Tip - Using Social Media Buttons

RSS Feed for Google Sites!

Google Sites Tutorial - Background and Favicon Design