Web Design with Google Sites

Google Sites New Feature - Mass Upload

2012-03-06T13:00:00.000-08:00

Add as many files as you want in one easy step. Free hosting on Google Sites just got better.

You can add multiple files at once in the File Cabinet page, in the Add Files at the bottom of pages, in the Attachments.

Remember these rules.

Click image number 1, hold shift, click image number 20. You've selected images one through twenty.
Click image number 1, hold control, click any individual images to add to your selection.

Conclusion
Google Sites is becoming a popular hub for files and I think we complained enough about having to upload files one-by-one so painstakingly.

Feedback Right in Google Sites

2012-02-25T20:26:00.001-08:00

It's wonderful - two new links in the MORE drop down box: one leads you to the Google Sites Help Forum, the other leads you to Google Feedback (my first encounter with this wonderful tool.

Check out my experience below. Now you can 'Report an Issue' as soon as it crops up, or just make a suggestion.

Favorite Free Font - Arvil Sans

2012-02-16T10:02:00.000-08:00

Avril Sans from the Lost Type Co-Op is an awesome sans-serif / all caps / condensed font that I have recently used a few web design projects here lately.

It's beautiful, it's free. I'll keep this post short and sweet because it speaks for itself.

This font is a ton of fun. Enjoy the graphic =).

Major Bug Report - Background Image Fixed Position

2012-02-14T06:19:00.000-08:00

UPDATE 2/16/2012: This bug has been fixed! Thanks to all that participated on the Google Sites Forum to get this addresses. The Google Sites team resolved this quickly and effectively!

The Bug

The background image has a fixed position on the page. For instance, when you scroll down the page, the background image occupies the same space regardless of where you've scrolled. This is breaking most designed Google Sites.

The footer is eating my content. Help!

The Effect

The Google Sites help forums are totally abuzz with complaints, probably fueled by customers/clients pestering their web designers. This is a huge problem that came out of nowhere and has many designer caught off-guard.

It has been escalated to Google representatives.

This isn't good...at all.

Conclusion

The whole issue calls into question the Google Sites team's beta-testing of updates and truthfully whether they test at all. This problem is readily visible and annoying.

On the other hand, perhaps this means that Google is working on a new patch to the Google Sites platform, more specifically in the design field. This has happened before. I know people have asked for the ability to create a fixed background image, like in blogger, before. Maybe that's it.

Overall, bear with the inconvenience and hope for a quick-fix, instead of a 'working as intended' (hopefully not!).

Here's my post on the forums if you wish to chime in: https://groups.google.com/a/googleproductforums.com/d/topic/sites/tvlVGnJJ_3s/discussion

2012-02-03T04:38:00.000-08:00

Add Your Site - It's FREE!

Happy Friday!

Beckystar here .... I put together a little treat for you ... sorry it's not chocolate but it is an unofficial google sites directory, soon to be the biggest online. Check it out here!

There are simply some excellent google sites out there so it's a great tool to get some design inspiration and gadget ideas. Let me know what you think and if you think any other info about the sites would be helpful?

Whilst you are there ....

It's easy to get your site added to the directory whilst you are there, it might even help you get some eyeballs on your site!

Google Groups and Drawings

2012-02-02T19:29:00.000-08:00

Kyle here with Kirksville Web Design and another Google Sites update. The Google Apps teams is always kind enough to announce changes and roll them out slowly. Sometimes you'll stumble upon them randomly and say 'woah didn't know that was there.' Then you question yourself as to maybe it was there all along and you are losing your mind.

Anyways, this is another smallish update to Sites (I haven't been too terribly excited since horizontal navigation rolled out 8/19/2010).

Google Groups Discussion Forums

There have been several occasions where I have recommended the use of Google Groups Discussion Forums. Since the beautification of this tool, it has garnered more recognition.

It was always a hassle to direct clients to More Gadgets, so this is convenient. It's still a bit clunky to setup I think. You need to setup the group, grab the url, and throw it in the gadget. You've easily wasted 10 minutes just to get a commenting functionality.

To fix this, I would like to see the insert of the Google Groups Discussion Forum streamlined.

Easy to find, Not so easy to use

Drawings Gadget

I tried creating a drawing in Google Docs and didn't like it too much. So being able to insert a drawing into my Google Site doesn't appeal too much to me.

I can see it being useful for wireframe drawings, flowcharts, but nothing too fancy.

Any thoughts on Drawings in Google Docs, then embedded into Google Sites?

Uploading Images and Attachments

Who doesn't love to see how their upload is coming along? Great feature that is appreciated for those larger file uploads.

Another feature that could be added is a multiple file upload capability. It's a drag to add files one-by-one. I did find a great solution in Cloud Sherpas Mass Upload Tool. It's free for 5 files at a time. Thanks + Cloud Sherpas for that one.

Here's the original information from the Google Apps Team

Scheduled Release Track 1/31/2012
- Groups Discussion Forums can be inserted via the ‘insert’ menu.
- Drawings gadget: Drawings can be inserted as a gadget via the ‘insert’ menu when editing a page.
- New interface when uploading images and attachments

Google Sites News - Gadget Cleanup

2012-01-11T09:47:00.000-08:00

The News

The following features are now available to domains following the Scheduled Release track:

Sites: Removal of some categories in the Gadget Directory with ‘Featured’ becoming the default category.

For Google Apps, Google Apps for Business, Government and Education.

The Google Sites Gadget Gallery got minimized.

The Effect

So does this have much of an effect on Google Sites? No, not really. In fact, it lumps all Google Sites gadgets into two categories: Public and Featured.

Featured gadgets are wonderful and are either made or endorsed by the Google Sites team. Steegle has some great gadgets for example. He is a Google Sites Help Forum top contributor.

My only inclination is to say that Google Sites gadgets have drawn some concern for being superfluous, buggy, and unreliable. Not to mention they are ill-categorized. An overhaul of the Google Sites Gadget Gallery is in my wish list. Some rankings and sorting options would be wonderful.

Don't you agree?

Awesome Free Font - Blanch

2012-01-06T09:31:00.000-08:00

Here is another awesome font from the folks at the Lost Type Co-Op, called Blanch.

It's a beautiful, rounded, sans-serif font that I think is really beautiful. Can't wait to use it on our next project here at Kirksville Web Design.

Blanch, Our First Highlighted Font of 2012

2011 gave us some great free fonts. Top quality stuff. Keep an eye out for those lovely designers that provide some free goodies.

Backgrounds, Layout, and Call to Action

2011-12-29T14:30:00.000-08:00

Intro

Here at Kirksville Web Design, we aren't afraid to try new things. New gadgets, backgrounds, layouts, and styles. It great to test the creative mind and think outside the box.

Everything in a website has to work in symbiosis, it has to agree. The background image on a Google Site largely dictates the flow of a website, the layout leads your visitor, and the call to action creates conversions (e.g. a product sold, a form filled out, page read). Here's an example of everything working together - synchronicity.

Like a Clownfish in the Anemone - Elements need to work together for mutual benefit

Background

There are two primary background images for the Google Sites Designer: background image wrapper and background image. One usually acts as the header, one as the footer (and doesn't matter much which one is which).

The header can be understated or a huge attention grabber. If you are using a slideshow - you want the header to be short in height, because the slider is your more important element. That's why Kirksville Web Design recently cut down it's header to a third the height - to make the slider standout and allow the visitor to now have to scroll down as much.

Make sure your footer isn't an arbitrary color/pattern/dimension - it can match the header or at least compliment it.

You can see it all, no scrolling down. Get to the meat of the subject - those sample websites.

Layout

Content is king. Layout makes sure that content is easily deciphered by the visitor. No walls of text, please.

Google Sites is limit on it's page layouts - 1,2,3 columns. I usually go with three columns or create a table to make four or five. This is usually for listing information. Visitors will most likely read only your titles, subtitles, and the first sentence of a paragraph.

Work your layout around your images, slideshow, and finish it off with a big, audacious, highlighted call to action.

Three columns - simple, elegant, spaced out. Modern = Space between elements.

Call to Action

The Call to Action button is a huge deal on the home page. Send the visitor instantly to where they need to go.

Sign up, Get Started, Search, Buy, Contact Us - whatever your conversion is. Contrast it, make it stand out. This isn't the time for a muted, subtle, hard to read element.

A different font, a contrasting color, big and easy. Like the easy button.

Free Font Favorite - RB No2

2011-12-13T15:09:00.000-08:00

Just a quick post here to highlight another amazing free font, one of 2011's best fonts - RB No2 by Rene Bieder of fontfabric.com.

Here is a link to the free download:

http://fontfabric.com/rbno2-free-font/

Kirksville Web Design - Looking Good in RB No2

Enjoy! Chime in you other lovers of typography.

Google Sites New Look Becomes Permanent

2011-12-06T20:09:00.001-08:00

I've heard all sorts of praise and criticism about Google's new look for all it's apps. Honestly, I liked the black bar at the top, but that not really the point of this article.

So Google Sites go its own little stylistic refresh and non Google Apps users have been testing it out over the last couple weeks. Anyways, that new look becomes permanent across all Sites users and accounts.

From a recent post by Google, on 12/6 the new look will be the default standard look and I'm so far not sure that you can hold on to the old look. I wouldn't imagine so at least. So warn your Google Sites end users. Like me, I think they will find it a refreshing change.

Web Designer Font Favorite - Mangosteen

2011-11-21T14:22:00.001-08:00

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.

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

Have fun with Mangosteen

New Update - Admin Settings for Sites

2011-11-10T09:38:00.001-08:00

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.

Bug Report: Mobile Devices and JPG Rendering

2011-11-07T13:01:00.000-08:00

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.

Set Up Email Notifications When Your Google Docs Form is Submitted or Filled Out

2011-10-31T11:30:00.000-07:00

Howdy! Beckystar here again ....

Google docs forms work hand in hand with google sites and are a favourite to user wanting to contact you, forms are quick and simple to fill out but what about the replies?

So, here is how to find out virtually straight away when people fill out and hit submit on one of your google doc forms!

Once you have created your form close the window by hitting the big red cross! Open the spread sheet which contains your once filled out forms data > choose share > set notification rules > select "A user submits a form" option and how often you want to know, straight away or a daily digest.

Remember to save your changes!

Revert Back To The Old Google Sites User Interface

2011-10-31T11:28:00.000-07:00

Hello! Beckystar from Web Princess fame here .... long time not blog! If you are not getting on with the new user interface that google sites introduced recently you can revert back to the classic style

So here is how to disable the new user interface.

Ok > go to sites.google.com (or go to your google site) and log in with your google account > click on the 'user settings' link which is located under the cog like settings icon in the top right of your browser's page.

Uncheck the box beside 'use the new look'

Remember to save your changes then you are done!

Document Hosting With Google Products - Google for Non-Profits Blog

2011-10-20T08:35:00.000-07:00

Document Hosting With Google Products - Google for Non-Profits Blog

Google Sites Hangout with KWD

2011-10-12T13:24:00.001-07:00

UPDATE: I would like to thank all who joined this successful Google + Hangout. I plan to report our topics of discussion in a subsequent post.

Join Kirksville Web Design right now for a Google + Hangout.

https://plus.google.com/hangouts/extras/talk.google.com/google%2520sites%2520hangout?authuser=0&hl=en

Bug Report: Check Your Websites

2011-10-12T08:29:00.000-07:00

Issue: Scrollbars are Popping Up Everywhere

If you have created an image that extends beyond the width of your content, on all browsers a scrollbar will now appear.

See below:

Ugly Ugly, Get Rid of It

Now I made all my images width set to 30 pixels minus the Site Width set in Manage Site > Site Layout. Most of my pages are 940 pixels wide, so I had images set to 910 pixels. Through some update to Google Sites this causes a scrollbar to appear.

Solution:

The most efficient solution, rather than change the width of your images in the HTML, is to change your Site Width. Now all my images must be 32 pixels minus the Site Width in order to avoid the scrollbar.

Alternative is the edit HTML, and in the <img src="..."> add width="[## SITE WIDTH - 32 PIXELS]px"

Conclusion:

Unannounced updates and unforeseen bugs from the Google Sites team really throw me for a loop. I'll try to keep all up to date with any Google Sites bugs that come our way. Quickly look over your designs today or this week and make sure there are no gaudy scrollbars.

How Much Should a Google Sites Website Cost?

2011-10-09T20:12:00.000-07:00

When a field such as Google Sites web design is brand new it is difficult for clients, designers, and other interested parties to approach the cost. After all, Google Sites is free and the hosting is free. So what are you paying for with a Google Sites website? How much is it really worth?

Pricing in the General Web Design Market

Take a look at the conclusions illustrated in this chart from the study contained at http://blog.folyo.me/post/10723370923/how-much-does-a-website-cost

KWD - Kirksville Web Design doesn't charge you nearly the going rate.

Should the cost of a Google Site be as high as a typical website? No, not really. There is a lot less work that must be done to a Google Sites website because it is more efficient for the designer. I can't speak for all Google Sites designers but here are the factors that dictate our cost.

Factors for Cost

Graphic Design Time
Consultation and Training Time
Coding of Gadgets, HTML, and Scripts Time
Domain Name Settings (DNS) Setup Time
Stock Images
Domain Name

So besides a couple stock photos for $30 and a domain for $10 a year, the cost is dictated by TIME. Being a stickler for good design, graphic design time and the consequential revisions is the bulk of my time. I would say 75%.

Finding and coding a new gadget can take me a couple hours (and pulling out my hair) - 20%. Everything else 5%, I would say.

How much is a Google Sites website going to cost me?

If you are paying a designer less than a $300, get references and samples of their work for quality assurance. If you are paying more than say $1,000, I would get quotes from several designers - don't get swindled into thinking Google Sites is equal to building from scratch.

Contract or No-Contract?

There really isn't much maintenance to speak of for a Google Site, and as said before, no hosting fees. Kirksville Web Design doesn't use contracts, though we tried it. I think its much more liberating for clients not to have a web designer on their payroll. However, if your designer is going to stay engaged with your website, that sounds entirely reasonable.

We have an hourly fee that we work under, $50 an hour. And I think we move very efficiently during that.

Google + Hangout with Kirksville Web Design

2011-10-03T15:03:00.000-07:00

UPDATE: Thanks for all that came to the hangout. My next scheduled Google + Hangout will be 10/12/2011 at 4:30pm Eastern US (EST).

Hi folks, Kyle Horst of Kirksville Web Design here, I am hanging out on Google + right now for the next 2 hours.

Join up:

https://plus.google.com/hangouts/extras/talk.google.com/just%2520hanging

I'll try to actually schedule this next time. =)

Until Next Time!

Freebie: 'Pixelated Seamless Tile Background'

2011-09-30T11:20:00.000-07:00

Backgrounds and textures are increasingly important in contemporary web design. It can be hard to find suitable patterns for web design, I know, I've looked. It seems like everyone uses Adobe filetypes. Well here is a GIMP pattern (.pat) for free. See how I've used it below and then download it for yourself.

Create a high-tech look with this tile background. Not the crazy parallelograms, the gray part.

Use it for your background image in Google Sites for a fast-loading interesting background.

Try it as a table background. Remember edit html, background="image url here" in either <table> or <td>

Download the .png file using 'Pay with a Tweet.'

What is 'Pay with a Tweet'?

A great little innovative marketing tool I found. www.paywithatweet.com

How can I convert this to use as GIMP pattern?

Open the .png file in GIMP > Save as... > Find your GIMP Folder (usually under your user) >save as a .pat > refresh your patterns and you should see it.

Google Sites Grows in Popularity

2011-09-28T04:57:00.000-07:00

The proof is in the pudding as they say. Google Sites has taken the spot of Google Reader on the Google toolbar common across its applications.

One Google employee commented:

I wanted to give you more information on the changes to the links at the top of Gmail. Google is always working to improve our products, and that often results in changes such as the one you are seeing.

While the link to Reader has moved, you can continue to access Google Reader under the "More" dropdown. Or, you can also set a specific bookmark to reader.google.com for one-click access. Depending your browser, try dragging http://reader.google.com right from this post onto the bookmark bar on your browser (usually below the URL bar). I've attached some additional information on bookmarks below.

In the meantime, I've shared your feedback with the rest of the team.

Thanks to googlesystems.blogspot.com for sharing this unofficial change and also noting the trend toward Google Sites. Check out this line graph.

Interview with Stephen Hind of Steegle.com

2011-09-22T05:38:00.000-07:00

Stephen Hind is the creator/writer of Steegle.com, an excellent crossroads of everything Google Sites related. Stephen is a Top Contributor on the Google Sites help forums and a well-known Google Sites guru.

Interviewer: Kyle Horst of Kirksville Web Design

Tell us about yourself.

I’m an IT Manager for a training company in the UK. My history of using and developing for the web started when I used to own my own company and a customer wanted me to make some web pages, so I learned how to. I moved on from there to work for the National Health Service in the UK, developing and maintaining websites for them. At the NHS I learned a great deal about PHP, MySQL but most importantly accessibility and usability. From there I moved to RWP Training where I was employed to look after their IT infrastructure and develop some web-based projects and re-develop the website.

What’s your favorite food?! =)

See my profile! ;-)

(Kyle looks it up) Spaghetti Carbonara, let’s face it - you love bacon and cheese.

Too right!

When and why did you start using Google Sites?

I started using Google Sites the week it was released. I saw it promoted on the Google Apps sign in screen as Google Sites was only first available as part of Google Apps. I thought “websites created by a Google tools - we’re on to a winner here”. I immediately gave it a go and I saw it would be a really powerful App.

I noticed there were some limitations and didn’t know why so I went along to the Help Group and asked a couple of questions. I found that I could answer way more than I needed to ask and the Google Employee that manned the forum was very responsive, so I stuck around and answered a lot of questions.

We all appreciate your help on the forums. You are all over the place answering the tough questions that users like me used to have. I think a big ‘thank you’ from the Google Sites community is in order. Expect a dozen roses coming your way.

How was the Google Top Contributor Summit?

Fantastic! It was great to meet all the people I have been chatting online with for so long. It was a wonderful opportunity to get face-to-face with Googlers and the other TCs. Google was very open and gave us a great insight into various products.

The Google Top Contributor Summit was a gathering of Google Help Forums’ most prolific helpers on September 12-13. It was the first event of this sort. Several Google Sites top contributors attended. For a recap on this event at the Googleplex at Mountain View, CA see this blog post.

What do you think the future of Google Sites is?

Exciting! Now Google has released page-level permissions, a huge update to Google Sites, they can start working on other stuff, so the future is bright.

What do you think Google Sites biggest flaw is?

Well I don’t think Google Sites has flaws but it definitely does have missing features, but that’s how Google works: release early and iterate. What I’d love to see is Public Comments (that will make Google Sites behave much more like a blog) so I definitely want it, also having CSS would be fantastic so you can make your sites look even better, but you don’t seem to have any trouble in doing that!

What’s next for Steegle? Any big plans or just stay the course?

Just stay the course: I work full time so the stuff I do on Google Sites is something I do in my spare time. I love watching Google Sites develop and get better over time so I don’t think I will ever get bored of it or want to move to a different platform.

Final thoughts?

Thanks for wanting to interview and thanks to Google for the Summit, a fantastic two days. Thanks to the Google Sites Team for all of the updates they have provided over the years. It was great to see the recent addition of the +1 button for Google Sites and my Google Analytics shows that people are using it a lot.

Stephen is online on twitter @Steegle and +Stephen Hind on Google +. His website is a mainstay for Google Sites education at http://www.steegle.com.

Google Sites User Survey Available

2011-09-19T05:20:00.000-07:00

New Google Sites User Survey available.

Go ahead, take it.

Here is a direct link:

https://survey.googleratings.com/wix/p3925964.aspx?V1=ND&ke=1&l=9

Feedback has done great things for Google Sites, like page-permissions. Take a moment.

What did I write about?

Column Widths - The sidebar page templates are often too small. This would allow for more interesting layouts.

Premium Templates - let designers like myself sell our work, like wordpress.

Dedicated Footer Background - with ability to span browser width.

Horizontal Navigation Padding Toggle - I want to be able to bring an image flush to the navigation bar.

Better Gadgets Community - a better database, organization, top / popular / high-rated gadgets. Unappealing is the gadget system, which is lack luster compared to Wordpress or other competitors. Finding solid plugins is a frustration.

Background Image Rendering - If you use background image as a header background it doesn't properly render (appears higher) when logged into the Google Site.

What did you write about?