Creating Websites: Google Sites vs. Weebly

For my final project in ETEC 5213: Designing Educational Media, I had to create two instructional websites on two different web editing platforms. I chose to do my instructional websites on digital accessibility since it's obviously something I'm passionate about. I decided to try Google Sites and Weebly for my two web editing platforms since I had already tried Wix for this blog and WordPress for another class on instructional design.

I'll start off by saying that I think I'm actually more comfortable coding than I am building with pre-designed templates. I always seem to find myself battling the preset colors and fonts, and this time around was no different. The problem, of course, is that I am nowhere near ready to design complex websites on my own. Luckily, I have a class on doing just that in the spring! Let's talk about what each web editing platform has to offer as well as some problems I encountered in utilizing each platform.

Google Sites

Google Sites is relatively quick and easy - unless you're a perfectionist like I am! It features drag and drop text boxes, image boxes, and embed codes. You can also add everything from maps and calendars to documents and slide decks to your webpages with ease. You can also insert items from your Google Drive storage.

One of the things I really like about Google Sites is that you start with blank webpages, so there is no formatting or preset elements on the page that you have to edit or delete to get your site looking how you want it. Each new page or site simply has a title/heading at the top when you go to build it. This does, however, mean that you're basically starting from scratch. I recommend building a footer with copyright information and anything else you want on each page into your main page before you create any other pages because then the content will transfer over to each new page you build.

Google has some fairly basic designs and themes you can choose from. That can either be good or bad, depending on how much variety of choice you want. There are also limited images you can choose from for your header unless you have one you want to upload. Most businesses and educational institutions typically have a header they want to use already, but I didn't. That complicated things. After going back and forth, I decided to use a post-it note header because it was colorful and looked good with my content.

I also struggled with the color schemes available on Google Sites. The colors and designs for each section (header, paragraph, etc.) are sparse, with only three possibilities available for each which vary greatly depending on the color palette you choose. I ended up making my headers yellow-gold for each section while keeping my background beige because I didn't feel like the beige-on-beige highlighted my section breaks enough even with larger fonts and a slightly different font color for headers.

Google Sites also features very simple editing tools that allow you to quickly add alternate text, a caption box, links, etc., simply by clicking on an item. It was also very easy to change font size and color. The only complaint I really have about the interface is that there are not enough text options to really give the website full accessibility. Google only offers title, heading, subheading, normal text, and small text options as presets. However, you can change font size settings numerically. Overall, I found Google Sites to be the easier platform to use and the one more geared towards education.

Weebly

Like Google Sites, Weebly offers premade templates for websites ranging from business and finance to hobby and personal blogs. Unlike Google, however, Weebly comes with many more presets on their pre-built webpage designs. Each webpage features preset title and text boxes as well as image placeholders. In choosing to design my smaller site, I looked at both Google Sites and Weebly and thought the Weebly site would be easier to build because it had more content created for me from the get-go. That turned out not to be the case.

I found Weebly more geared towards business or hobby websites. So, I spent a lot of time deleting existing content, changing formatting on fonts and text boxes, and resetting colors throughout the pages. In hindsight, I wish I had gone into the theme page on the builder's dashboard in Weebly and changed my fonts, colors, and font sizes to meet accessibility standards before I added all of my content. Trying to change it all after the fact caused some issues since I had edited some fonts and colors by hand already.

Like Google Sites, Weebly allows you to drag and drop different types of text, images, galleries, maps, etc., onto your webpage easily. You can also drag items around on the page using your mouse if you want to reorganize your page contents. The only real issue I had with dragging and dropping occurred because I was working on a laptop and the touch pad and Weebly did not get along. Luckily, I had a mouse nearby that I could plug in and use.

Another issue I had with Weebly was how images were formatted. Adding images and even adding links or captions to images was easy, but adding alternate text proved more difficult since Weebly only gives you a small box that shows about five or six words of your alternate text at the most. The box to add alternate text was also difficult to find since you had to go into the Advanced portion of the image menu to see it. I ended up typing up my alternate text in Microsoft Word and then copying and pasting it into the alternate text box so that I could check grammar and spelling.

Weebly's overall web accessibility was also an issue. Weebly templates only feature one heading setting for the title and one for the paragraph heading rather than six as can generally be used in HTML5. Luckily, I only needed subheadings on the Resources/About Me page, where I decided to create my own subheadings under the paragraph headings by utilizing larger fonts with bold formatting. Weebly also did not have one of the web safe fonts - Tahoma - that can be utilized for digital accessibility. This limited my font options since I was trying to build an accessible website about accessibility featuring mostly sans serif fonts. I ended up using a combination of Verdana, Helvetica, and Trebuchet throughout my pages as a result.

The final issue I had with Weebly was the spacing on webpages. In Weebly, you have to add spacers and dividers around or between elements such as page titles, headings, text boxes, and images in order for them to look right on the page. This is not always the case, but typically, in other web editors, you can utilize a space bar rather than adding a special spacing element. Sometimes, websites like Google Sites also automatically add proper spacing to your designs or allow you to drag your text or heading boxes into the position where you want them.

Overall, Weebly was harder to use than Google Sites, but it wasn't that difficult. My biggest concern with using Weebly is accessibility as the platform doesn't appear to be built with accessibility in mind.