Tip - Getting Into SEO

Sorry it has been awhile since my last post...this time of the year is always hectic.  Anyways, happy to quench the thirst of readers with this next topic.

SEO.  If you are new to the game, it means search engine optimization, that in turn means "Why isn't my website on Google?"  There are a couple beginning tips I have for those making their websites public:

1. Make it Public!  Make sure you Google Site is set to viewable by the public.  This is an option, More Actions > Manage Site > Share this Site > Change to Public.
2. Buy a Domain!  This is the biggest step in SEO you take make for your website.  For just $9 - $12 a year you can own a domain, and it is not as difficult as you may think.  I recommend GoDaddy.com, but bypass all the bells and whistles, just buy the domain.
3. Submit to Google!  I don't mean bow down to the power of Google.  If you simply type into to google "submit url to google," click on the first real webpage and fill out the extremely short form that tips off google to the fact you have a new website.  They will crawl it/ index it in a week safely.  A good way to supplement this action is to work with Google Webmaster Tools, which is supported in Google Sites More Actions > Manage Site > General.

I'm sure if you are a beginner you'll need some help with managing the domain and nameservers, dns records, all that crazy stuff.  I'll help you out with my next post.  Stay tuned and thanks for visiting, join up!

Working With Templates - having a problem with a public Google Sites template and you can't locate that pesky rogue logo?

Change Your Sites Logo - are you having a problem with a public template and you can't locate that pesky rogue logo? 

ok.....

there are possibly a few ways the logo or image could be attached to the top of the page

click on more actions > manage site > colours and fonts > scroll down and click on Site header background image and see if that is where the logo is



if the logo is not there ..... click on more actions > manage site > site layout > change logo and see if it is there ......



And last but not least, the template logo could be part of the background image.



If this is the case you will need to click on view, save the image to your pc and then edit the image by placing your logo over the top for example in a program such as photoshop.

Let me know if this sorts out the situation for you.....

B x

Tip - Dynamic Resizing

I don't know when it happened. I don't why it only works of Internet Explorer. This is a great discovery nonetheless - Dynamic Resizing of images in Google Sites.


The Discovery
It wasn't until recently that I started using IE for making Google Sites. The reason - Firefox and Chrome are logged into two other Google accounts. Anyways, that's not exactly important, what is important is that instead of the typical [ Small - Medium - Large ] you can scale an image to whatever you want it to be, and it looks pretty good too!

The Proof
Check out these two screen shots.

Resizing capability with Google Sites using Internet Explorer 9, who figured?

Dynamic scaling of images is a wonderfully nice tool to have.

The Impact
This development allows for flexibility within Google Sites. No longer must I have measurements exactly right for a vertical line divider...I can extend it when I need to.

The Questions
Will this interesting happenstance roll out for Google Chrome and Firefox? Is this an unannounced update or just a glitch that works really well? I really look forward to your comments and theories.

Tip: Image Map in Google sites

Look at the site: https://sites.google.com/site/artistds9n/

See what's special about it? It is made using the ‘image map’ technique. You can take your Google site website into greater level using “Image map”.  It's very easy.

Here is the steps:

1. Go to the website, http://www.image-maps.com
2. Upload the image in above website
3. Define your links
4. Copy the HTML code
5. Paste the code in to Google site HTML column 
1.  upload the same image to your picasaweb album/ photobucket.
2.  copy the image url
6. Replace the image name into copied picasaweb album/ photobucket url
7. Save

That’s it! Enjoy.

New Template and Navigation Tip

 Apple has released their Ipad 2, it is a beautiful tablet with power and intuitive design. So I spent a lot of time of Apple's website. Beautifully simple, that's how I would describe it. Something attainable with Google Sites. Many GS websites are simple too, but not so polished.

The Template
I made this website from scratch. Nothing, including the nice tablet graphic is stolen, merely modeled. And I do not want to get in trouble so it is a software company draft.

Please visit and enjoy. Google Sites, beautifully clean design.

The "tablet" graphic is custom made with inkscape. I plan on making a video tutorial for this as it is easy enough for beginners and looks quite nice. I have already used it on my homepage for Kirksville Web Design.

I tried my best to create a sophisticated, not cheesy-looking, glassy navigation bar graphic.  The graphic is part of the "wrapper background," nothing special. One thing I am particular sad about is the inability to insert an image and set that image to the background. So, graphics with text, as featured in the software company template, are really just graphics - you can't highlight and copy it (which would be nice for SEO). This is on my Google Sites wish list, which is way past-due.

Space Out Your Horizontal Navigation Links
I most often use links, as featured in this template, for my style of the horizontal navigation. Links, as opposed to boxes and tabs, do no have a pre-determined image - just text - so you can easily create the look yourself.

Anyways, the tip, create a url ink while in Manage Site>Site Layout>Horizontal Navigation. Instead of giving text in the field for a title, insert any amount of spaces. Now, it will not allow you to create the "link" without inserting a email or web address, so put something in there (it doesn't matter what it is). Now you have spaced out navigation (I put five spaces in between each of the links of this template).  

Tip - Discover Inkscape

You have proudly developed a freeware arsenal for web design.  Your using Google Sites, GIMP, but you want to create finished graphic products.  I have experimented for the past couple weeks with Inkscape - free vector image editor. What's a vector image?  See below and you'll get a grasp of what I'm talking about.

Now, I know you have a lot on your table: You've learned Google Sites, you tackled the learning curve of a photo-editing program, and now vector imaging is another big task. I would encourage you to dive right in and play around, view tutorials which are essential to building skills.

I would like all Google Sites designers to be enabled to do more and do it well.  Reverse a stereo-type that we take the easy way out, remind our customers that we strive to be more creative artistically.

My business, Kirksville Web Design, is getting better, because either you are growing or your deteriorating. Keep honing those skills! Check out what I made with this tutorial.  I was amazed.

Tip - Creating a Footer

Now, we can take a closer look around the footer of Google sites.
I need a custom footer like this,

So I created an image like this. Now I need to upload this image into Google sites.

---

Somebody asked me about the difference between uploading as 'background image' and 'wrapper background image'.
I'll show you the difference.

This is the Original image:
When I upload the image as 'background image, the result is:

See the top.
So, look at the same image uploaded as 'wrapper background image':

OK. Now it clarified, right?

---

Come to the point.
We need a custom footer image like the first original image.
I did upload in as a 'wrapper background image'. The result is good. Look:

But, when the content is too long, or in the announcement page, it looks odd.
See,

This is not we want, right?
So, I did two images like this: One,

Another one is,

Then, I upload the first image as 'wrapper background image', and the second one as ' background image'.
See the specification:

Now it's done. Look at the results!

Tip - Using Social Media Buttons

Hey, I'm Web Princess aka Beckystar and welcome to my first blog, thank you Kyle for having me!

Using social media buttons to share your site or content is easy and expected by your visitors.

Social buttons or icons facilitate the sharing of your site, content or blog and are now a linchpin of social media. It’s not enough to simply produce content these days. Your fans (hooray for them!) want a gizmo (I prefer gizmo to gadget) in place to allow them to share what they have read or seen with their family, friends and colleagues on Facebook, Twitter etc. Lucky for us there are some great tools out there.

Next I have featured my top 3.

1. AddThis is my favourite. All you have to do is join, and it's free! However it does not work on google sites. All is not lost as good news! The amazing guys at AddThis have provided us with a google sites gadget. Go to your site, hit edit page and place your cursor where you want your social media buttons. Click on insert then more gadgets, in the search box type addthis6 and add the gadget (height 32 pixels width 180 pixels). Check it out working on my sites home page http://www.webprincess.co.uk

You can customise the gizmo when you select it such as changing the background colour or even which buttons you want to display.

2. Sharethis is another great option. It is very useful, they have a powerful market place and can reach 400+ million people or 50 social media channels! Albeit brilliant if you can access your html but yet again it does not work for google sites. I like to fight the good fight so I have emailed them asking for a google sites gadget.

3. If you don't want a gizmo you can simply insert an image on your site and link it to your facebook group page or to your tweets etc.

You can get your hands on a list of free, creative social buttons from Open Source Hunter. There are 128 to choose from, but, remember they are for you to link yourself. Check out the twitter and facebook buttons working on this site's home page: http://www.thequeenofspadesboston.co.uk/

If you literally only care about who likes your site grab a code from the facebook developers.

I hope that this has inspired you to add social media buttons to your site/blog etc.

Did you enjoy my first blog? Please feel free to leave a comment.

Beckystar x
PS: What is your favourite social media button?

Tips - Useful Gadgets

Gadgets are embeddable elements that can be tools, devices, games, or portals.  Google provides the a suite of useful gadgets related to Google Apps such as Calendar, Forms, Picasa Photos, Text Boxes, etc.  However, have you ever delved into the "more gadgets" option of your "insert" tab?  There's some great stuff, let's review.

Let's Explore More Gadgets...!

Google Checkout and Paypal Simple Storefront
These gadgets are wonderful for implementing e-commerce on your website.  Really, there are two options with Google Checkout, there's a little button for one-item purchasing and a whole store with cart option.

I have not tried out Paypal's Simple Storefront, but I can only assume they went with "simple" because it's straightforward.  Paypal is like the industry standard for online shopping, ever since E-bay, Paypal has been the pioneer of safe shopping.  Google Checkout is still rather obscure, but equally effective for credit card transactions.

Try Ecommerce with Paypal, You are credible in no time.

Conversation Element
This a new gadget that showed up in the "featured" category not to long ago.  It is quick and easy for people to leave feedback, question, comments, suggestions on your website using their Google Account.  I know I've seen demand for this type of a gadget time and again from the Google Sites Help Forum.  I had tried the Google Moderator gadget before this and found it too unmanageable.

Very Nice, not bulky at all and easy to use.

Code Wrapper
Type "code wrapper" into the search bar for public gadgets and this will come up.  I have used it when toying around with coding hover / mouse-over images per the tutorial of Mori79 (http://sites.google.com/site/mori79).  You can see where I tried that here: https://sites.google.com/site/foodsitedraft/.  The potential of this gadget is awesome since it works with javascript.

I'm plum out of time to explore more gadgets right now.  Hope this helps you add some nice elements to your website. 

Tip - Get Inspiration Part II

So, I thought I'd make another mock up, since that seems to be my fancy for the month.  This one was a bit more difficult.  Take a look below or click to visit beanstalkapp.com.



Notice the centered horizontal navigation - that's not doable with Google Sites, only left orientation.  There's a nice color scheme here.  A three column followed by a four column format towards the bottom with little icons.  The image hugging the bottom of the brown header is a nice effect.  Let's see how I did below.

Here's what I did to make it:

• Background and Title are together one graphic, uploaded to background wrapper, aligned top-center.  Made with GIMP of a desaturated pattern and inverted pattern over brown and toggled for opacity.  The text is the Lobster font with light gradient from top to bottom of text and a focused drop-shadow.
• Navigation is a unique html color hex code set in content text color and link color.
• Subtitle text is yellow image of text over alpha-layer (transparent).
• Three column complex page layout.
• Content footer is the image cropped out to exact pixel height to be flush with end of brown background, it's a .png file with no saved background color and use of opacity toggle on layers.
• Content footer is manual spaced out with inserted icon images with deleted divide html.

I had a lot of fun with this one too.  Let me know if you want me to try another website.  Just no crazy flash websites plz =)

Tip - Get Inspiration

Here was my inspiration.  A website that was at the top of Webcreme.com.  I thought to myself, "I can totally make this with Google Sites!"

Here is the mock up.  I used just GIMP and Google Sites.  Visit the website and use it as a Google Sites template.

The power of Google Sites and decent graphics skill.  That was fun.

Tip - Create a TRUE Digital Signature

If you design a website, you know about a contact page. You know to list your name, number, email, all of that right? Well, its time we start taking control over that feature, and giving our viewers and clients, and more new and creative way of relaying that informatoin.

Digital Signatures

A Digital Signature can contain any information you want to have, that your clients or customers will be able to scan using their phone to relay the data stored. Its the barcode that you may see on the back of a item you buy, but instead of numbers, its information!

This is my personal digital signature. If scanned with a phone, it will display my name, email,

phone, and website. There are many websites out there that you can create one of these items. the best thing is that you can use them on business cards, or flyers, or for information on your site.

Microsoft Tag have a really nice and cool feature that you can make your digital sign. point to multiple things. The image below shows what a microsoft tag image will look like.

Using your smart phones (most of us have them now days) you can download the apps to make give a true upgrade to your style of design. give it a shot with the 2 images i posted to see how this really works.