Friday, February 4, 2011

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.

Related Posts Plugin for WordPress, Blogger...