Google Sites Tip - Designing a Nice Background

Many sites, you will start to notice, have a main area with the navigation, body, etc, and a nice background that compliments the site. If you're designing in Photoshop I suggest using a page size of 1286x900.

This gives you ample room to work with a site thats going to be center in the screen. Try saving at least 150 px, equal on both sides to allow yourself a good amount of space for a real creative background. Or you can try designing your main area with no more than a 700 px width. Anything more and you may want to increase that 900 px width to maybe 1200px. Just remember try and keep a min. of 150 px on both sides.

So lets say that with your Side Menu and Main Content Area, you have a width of 900px. With your background being 150 on each side, you will make your over all image size 1200px wide.

Just remember to add guide lines that are 900px apart to keep you from designing over your set area.

go here for finish view

You can use anything you like to make a really eye-catching background, there are plenty of stock images out there for free, see this post.

GOOD TIP:

Try and use a Layer Mask of your finished background design. This will help get rid of the hard edges and make a design flow into the page. try using solid background colors that you are sure most browsers support. for some good color guides check out http://colorschemedesigner.com/

they offer tons of browser friendly colors.

Google Sites Tip - The File Cabinet Page

When you click create page in your Google Site you can choose from four primary types of pages.  One essential page is the 'File Cabinet' page.

Try Out a File Cabinet, Your Behind the Scenes Storage!

Rather than adding attachments at the bottom of your pages use File Cabinet.  Here's how:

• Create a File Cabinet Page
• Add Files
• Right Click the 'Download File' link and Copy Link Location
• Create a Link on your public web pages
• Paste your Link

Add Your File then Right Click the Download to copy Link Location

Now your visitors can easily click and view your uploaded files.  .PDF files should open automatically in the visitor's browsers.  .DOC files will be downloaded when the link is clicked, so inform your visitors accordingly.

If you copy the link for 'View File' from your file cabinet Google will open a Google Doc, which is messier and less straightforward for visitors.

Enjoy this little tip for your behind the scenes storage (I wouldn't add this page to your navigation).

Google Sites Tip - Using JotForm Contact Forms

Many of us have come to realize that Google Sites doesn't offer a nice contact form to manage visitors comments and questions.  However, http://www.jotform.com offers Google Site developers a fast and very creative way to make forms that are easy and simple to manage. Its a semi-free service, meaning it gives you a free amount of web storage, but you can upgrade for more space.

Simply Make an account, (email, password) and start designing. You can use the templates offered by JotForm or you can start from scratch. I find working with a blank slate is the best.

You have many different items to pick from to create your forms. Size, colors, fonts, there really isn't anything you can not custom design in these forms. Options you can work with include: FORM TOOLS, QUICK TOOLS, SURVEY TOOLS, POWER TOOLS, PAYMENT TOOLS.

As you see, its some real powerful items that can be used to design your form. So play around and have fun! Hope this add some nice creative design to just having a plain form.

Google Sites Tutorial - Background and Favicon Design

The latest video tutorial for Google Sites web design.  Learn how to design a background using GIMP, a free photoshop-like application that has been of tremendous use to me.  There was so much good information that I had to split this into two parts.  I had some mistakes while working with GIMP because I'm still a novice to be honest, but hey we all learn from mistakes.

Part 1

Part 2

My Small Business - Website Improvements

I recently upgraded by business' website appearance to reflect professionalism and clean design.  A big part of web design is of course graphic design.  I am not a professional graphic designer so I use works that artists provide free to the web design community.  It is important to make sure any images, photos, etc are approved by the artist for commercial application.  This narrows the field quite significantly.

Here are my favorite sources for free, commercial use graphics:
http://www.sunipix.com
http://www.sxc.hu
http://icons.mysitemyway.com/
http://www.devwebpro.com/developer-icon-sets-collection-of-the-best-free-to-both-personal-commercial-use-icon-sets/

(Note: Make sure the images you use are specifically approved for commercial use by author/artist)

Take a look at the new site at www.kirksvillewebdesign.com.  Here's a screenshot for the timid.

Pretty Nice Eh?  Google Sites can look good, I promise!

Google Sites Tip - Favicon

Definition: A favicon is the icon that is displayed in browser tabs, bookmarks, etc.

Google Sites allows the uploading of a custom favicon.  The favicon will be displayed for all pages of the site and is one of the simple things that makes your site more credible.

To make and upload a favicon is simple.  First of all, get the free graphics and photoshop-like program GIMP.  It is an essential program for web designers like myself.  I use it for all my graphics.

•  Open GIMP
• Create 'New'
• Specify a 32x32 pixel canvas
• Create your symbol/icon
• Save and name as favicon.ico, choose the 32 bpp option
• In your Google Site go to Manage Site > Attachments
• Click Upload and select your favicon.ico file

It's that easy!  Enjoy your new favicon and differentiate yourself from the typical Google Sites crowd.

That Favicon is Boring Anyway

Web Designer Font Favorite - Mangosteen

Mangosteen

A serif font from Dafont.com, Download Mangosteen

Sort of gives you the feel of the classic Copperplate Gothic, but provides a higher, thinner rendition. A beautiful free font that can stand on it own typographically. This is a nice gem of a font - take a look on how we used it below.

A nice final product using Mangosteen from Dafont.com

Here is How We Made this Graphic

It's not hard to make this graphic look pretty cool.

1. We picked a vibrant orange, #ff6600, being mangosteen and all. 
2. We didn't kern this font at all, it is nicely uniformly spaced.
3. Duplicated the main text. Converted the Object to a Path (this transforms it into a vector image rather than a text object)
4. Changed to #fff white.
5. Dynamic Offset allows you to grow the text image.
6. Duplicated the main text and changed color to #000, black and toggled opacity to 8.8% almost transparent really.
7. Clicked twice on the now gray text to slant the text left to right and maneuvered to create the shadow.

Have fun with Mangosteen

Google Sites Update: Logo now Maps to Custom Domain

The Old Problem
Imagine you had a Google Sites mapped to a custom domain, like www.kirksvillewebdesign.com. If you used Google Sites custom logo upload into the header, it would always link to your long sites.google.com/a/domainname.com/sitetitle URL. A total bummer!

The Update & Solution
If you Google Sites is mapped and someone clicks on your header logo, you simply go back to the base custom domain URL! No more confusion about your Site's location. And this will help search engines be less confused now with the dread duplicate content.

Original Issue Log: https://code.google.com/p/google-sites-issues/issues/detail?id=63#makechanges

What's this prove? 
Google still supports Google Sites, albeit delayed.

Fun Commemoration Graphic

Google Sites Tutorial - Pages and Navigation

I am posting here for your enlightenment a walkthrough tutorial for creating pages and setting up a navigation bar. The video is pretty self-explanatory so I needn't provide much of an introduction.  However, I make reference to this post on designing a background with the 'blank slate' theme.

Please take note of the tips and tricks mentioned in the video, these may things even a Google Sites' users may have overlooked.

My Small Business - A History

I submitted to Google Sites at Sitesstories@gmail.com, the history of my little business to date.  Here is that story.

Kirksville Web Design - A small business in a rural town of Missouri (Kirksville, MO) that has succeeded in creating professional-looking websites, using the Google Sites engine, for businesses and organizations.

We, I mean I (we sounds better in the business world I think), first made a website for a local friend plumber starting up a business.  It was more like I commissioned him than he commissioned me to do his website.  I started making what is now www.nemoplumbing.com.  It was my first domain buying, analytics processing, search engine optimization experience.  I also took advantage of Google Places and registered the business there.  Year to date it has received 440 visits.

Then I made a website for a more prominent business run by a friend, Foreman Heating and Air Conditioning.  I started to get more into graphic design, teaching myself to use a freeware photoshop-like program.  The website was created in about a month, collaborating with the owner along the way.  The website is www.foremanhvac.com.

I went searching for clients to commission me a website and there's not exactly a ton of sprouting businesses in rural Missouri, so I had to find someone willing to take a green professional web designer like myself.  To help my endeavor I built www.kirksvillewebdesign.com, deciding to hit the obvious market I was striving for.  That website has evolved with the changes Google Sites has seen recently, like horizontal navigation.  Eventually I found a willing client, Pancake City!  For those of you that don't know, Pancake City is like the biggest thing in Kirksville.  A locally-owned business serving home-cookin' if you know what I mean.  I created a series of menu webpages, even creating an Arcade out of Google Gadget games.  The website has seen 890 visits so far this year.  That's www.pancakecitykirksville.com

After that I made a website for MAPP, the Missouri Association of Public Purchasing, to which I am a member.  They needed a new webmaster and I volunteered for the job.  I successfully transitioned from there old website to the new Google Site.  I made forms, a Google Group forum, posted newsletters, and the newest item, I implemented Google Checkout so that members could pay for conference registration fees.  That was a great solution for them that is currently going to the board for approval.   So I even made a website for a state organization that receives hundreds of visits a month.  www.mappi.org is something I am very proud of.

I've also made websites like www.martinconsultant.com and http://sites.google.com/site/customsiteswebdesign (If I ever decide to move away from Kirksville I'll need a more generic name).  Now, most recently, I have made a blog on Blogger, Web Design with Google Sites available at googlesiteswebdesign.blogspot.com.  I made created a Youtube channel for my tutorials using Google Sites under my name kirksvillewebdesign.  I am now making a website for a local grocery store and one for the bakery my wife might open.  Google Sites has enabled me to explore the creative side of me.  I've used all the tools Google has given me and achieved great personal success.

Google Sites, Gmail, Google Docs, Google Checkout, Youtube, Blogger, Google Analytics, Google Webmaster Tools, Google Buzz, Google Places, Google Adwords, Google Adsense.  I'm like a walking, Google-using, web designing machine.  Grazie Google.  Ciao!

Google Sites News - Share Settings

Google Sites, and really Google Apps, has been improved in terms of making it easier to share your website.  The share settings used to be part of the Manage Site contents, but now it has been moved to the More Options drop down menu next to Create and Edit Page.

Sharing has never been something I've used very much.  I always make my sites public and I limit collaborator privileges (call me a control freak).  Nevertheless, it is always great to be able to do something more easily.  Google Sites sharing is now similar to that in other Google Apps like Google Docs.

Remember your options:

• Anyone can see your site (public) *will be indexed eventually and then not very well
• Only those with a link can see your site (semi-private) *will not be indexed
• Only those given permission can see your site (mostly-private) *will not be indexed

 
For Google's post on website sharing see http://googleappsupdates.blogspot.com/2010/11/simplified-sharing-experience-extended.html

Google Sites Tutorial - Horizontal Navigation and Drop Down Boxes

Google Sites released the option for horizontal navigation not too long ago.  This new features greatly enhances the professional look of websites, and I have used it on all my new sites.  Please refer to my post on background layout for easy integration of horizontal navigation into your web design.

Horizontal Navigation is more appealing because we process information best that way.  It makes sense, we read from left to right.  Another benefit from this feature is that it eliminates the need for a sidebar.  While sidebars have their place in web design it is better to implement it on your terms, not because you have to for navigation purposes.

Also, horizontal navigation enables the use of dropdown boxes.  These are links that appear when the category is hovered over.  For instance, in my bakery website example.  I have a page called Baked Goods, the sub-pages of which will be scones, muffins, cupcakes, etc.  Those sub-pages, which you designate in Manage Site > Site Layout > Change Layout > Horizontal Navigation using the left and right arrows, are a nice option for less cluttered navigation.

For examples of horizontal navigation checkout: www.kirksvillehousingauthority.com, or www.pancakecitykirksville.com.

For a walkthrough watch this video below.

For more information Google has posted about this as well: http://googledocs.blogspot.com/2010/10/tips-tricks-making-most-of-your-sidebar.html

Google Sites Tip - Background Layout

When you making a background for your Google Site make sure you use "Blank Slate" as your theme.  This is the only theme I know of that support transparency.

First of all, take note of your header's height in 'Site Layout.'  If it is 125 pixels high, make a header that is exactly 125 pixels high.

Here's a great tip for horizontal navigation: The horizontal navigation bar is 25 pixels high.  So, in this scenario where you have a 125 pixel header, create a background that incorporates your horizontal navigation bar starting at 125 to 160.  That will give you some space above and below your bar.

If you don't want any space above and below make it snug 130 to 155.

Click on and save this background and use on your website.  Just make sure your header height is 125px.

 

Here's what it looks like on your Google Site

Here an example of a finished product using good background layout and design.

Google Sites Tutorials - Creating a Website

I have a youtube channel to which I am posting videos of how to use Google Sites to create your own professional looking free websites.  Here's a little introduction to my video.

First of all, I wanted to start from the beginning of using Google Sites to create a website.  Anyone can build a website with Google Sites with a little know how and some guidance.  I have been making websites for many months now, selling them and giving them away.  I use Google Apps all the time, and what makes Google Sites great is that it's free!  You can reap 100% profit here, well besides buying a lil' domain name for $10 a year. 

So, please join me on this tutorial for creating your site with tips and tricks from a web designer.

Please subscribe to my youtube channel: www.youtube.com/user/kirksvillewebdesign if you want to be notified of my next upload!  Have fun.

New Update - Admin Settings for Sites

Summary

This small but important update provides Google Apps administrators more control on the creation and visibility of Google Sites made within the Google Apps account. So, no, this won't have an effect on regular Google accounts Sites.

Users either can or cannot make Sites (that includes admins). Sites are either defaulted accessible within the organization or private.

More Admin Control means More Options - Check Google Apps Settings for Google Sites

Uses of Site Visibility Default Option

For users with sensitive information, making Google Sites private by default can be a relief. That way your information is private until you share it.

Uses of Site Creation Option

Administrators can create a company intranet Google Site and disable the ability to create more Google Sites. The change in creating Google Sites will not delete previously made websites or the right to access them. Therefore all information can be consolidated onto one Google Site.

Google Sites can be used less for making many different sites, and more for a single access point to the company intranet.

Conclusion

Google Sites are being used more for internal purposes. Google Sites are being used more by users and therefore require more options to control its use. 

Read the original article below for more information.

Original Article - More control for administrators over the creation and visibility of Google Sites

Released on 11/08/2011
Google Apps administrators now have the following new options in the Google Apps Control Panel for Sites:

Site Creation: Select whether to allow users in organizational units to create new sites.

Site Visibility: Select the default visibility for newly created sites per organizational unit.

Editions included:
Google Apps, Google Apps for Business, Government and Education

Languages included:
US English only (Next Generation Control Panel)

How to access what's new:
In the admin control panel, click ‘Settings,’ then Sites, then ‘Org Settings’ to see the new options.

Note: We’re aware of a known cosmetic issue where the organizational unit name does not display properly in the Site Creation section. We’re working on resolving this.

Change is Coming to Google Sites

The New Google Sites Icon

It is no mystery that Google Inc. has a new material design direction. The first revised icon I noticed was Google Maps, but now Google Sites, my favorite application has received some love.

Google Material Design Example - Could this be an upcoming Sites UX?

What can we glean from this new treatment? This is really a game of comparison. Take a look at the old Google Sites icon below.

The first thing I noticed is a full browser experience. Web building platforms like Squarespace has been flaunting this for years. A contemporary, full width, ultimately response experience. Could this be the new future of Google Sites? Obviously there is a lot of speculation that can be done.

I can't wait for the Google Apps for Work site to be refreshed and maybe we'll learn even more.

What do you think?

The Google Sites Icon used to be this.

Bug Report: Mobile Devices and JPG Rendering

I had a client come to me with a problem, which rarely happens. I make it a business policy to fix technical mistakes at no charge. Technical difficulties reflect badly on both the web design and the client, so I try to resolve them as quickly as possible.

The Bug
Some mobile devices, notably iOS devices, will scale the wrapper background image if it is in the file format .JPG .JPEG

The Effect
I was quite perplexed with this problem, so I do what all the best engineers do - troubleshoot. As you can see the teal banner that created a wonderful backdrop for my horizontal navigation bar, was shoved up and scaled down. Look for similar effect to your wrapper background image.

This ruined the navigation for mobile visitors to this website. The text was virtually invisible against the brown noisy background.

The Horizontal Navigation Bar is missed - ack! iPhone users will hate me and iPad users too.

The Solution
Change your Wrapper Background Image from a JPG / JPEG into a .PNG image. This will indicate to Safari or whatever browser, that the image should not be compressed or scaled down. Although the image will therefore be a bigger file size, it averts this issue. Don't make your .png images too big.

The Teal Banner is back because I converted by Wrapper background image to .PNG

Google Sites are Nicely Responsive to Mobile Devices - Just with some Hiccups
Even without the mobile rendering option in your general settings (I don't like it anyway), Google Sites are responsive to whatever device they are viewed on. Responsive web design means the website responds well to different viewing platforms, resolutions, sizes. Google Sites is nicely consistent across browsers and devices. Another reason to Go Google Sites.

Tip: Don't make any text smaller than 12pt. Accessibility and legibility are key to responsive design. Your visitors will thank you for not throwing them walls of tiny 8pt text.

Google Sites ePortfolios Hangout on Air

Update: The Hangout is over but I will post the video recording below. It was a lot of fun to create a Google Sites ePortfolio in about an hour. Enjoy!



Google Edu Hangout on Air

Electronic portfolios offer an authentic way to promote reflection on learning. Discover how to make a Google Sites template to share with your students and have them build their own portfolios.

The live event will begin Thursday, November 8, 2pm Eastern at my profile page: https://plus.google.com/116877812762735148703


Kyle from Kirksville Web Design will be Participating

So, if you have any questions related to the design or development side of ePortfolios, I will be weighing in and helping answer questions. I am very happy to help everyone learn about Google Sites and how powerful and fun a platform it can be.

Here's a fun graphic I made:

Also a Google Hangout Icon for everyone's use:

So hop on Google + and join this hangout if you are interested! Thanks all.

Kirksville E-Commerce with Google Checkout

Kirksville Web Design has been using an excellent tool to help our patrons sell their products and services online.  That tool is Google Checkout!

Google Checkout is allows customers to use all major credit cards for payment. Google takes a small commission of 2-3% and $0.30 per transaction. We've been happy to implement this user-friendly tool on many of our websites. For instance, the Missouri Association of Public Purchasing (MAPP) is interested in collecting member dues and conference registration payments.  Google Checkout and Kirksville Web Design worked to make this idea a reality.