Website builders have made it easy for anyone, even without coding skills, to create a website. Having a website is crucial for businesses to increase brand awareness and boost sales.
Website builders abound on the internet, offering a plethora of options like Wix, Squarespace, WordPress, Weebly, Shopify, and more, known for their exceptional features and website design capabilities.
However, many website builders come with hefty subscription fees, making it challenging for micro businesses to establish their online presence.
When it comes to cost versus quality, Google Sites stands out as the ideal website builder for micro businesses. In this article, I will explore why Google Sites is the perfect choice for micro businesses, offering a comprehensive explanation of its benefits.
Price
I have been using Google Sites for my business since 2021, and it’s been the best choice for me, particularly in terms of price. The first factor that sets Google Sites apart is its affordability.
One of the standout features of Google Sites is that it’s completely FREE to use. You can create your website on sites.google.com/[yourbusinessname] without incurring any costs. If you want to use a custom domain like [yourbusinessname].com, you can easily purchase one through Google Domains or other domain provider sites and integrate it seamlessly with Google Sites.
The cost of buying a domain through Google Domains is also incredibly budget-friendly, starting from just $12 USD (tax included) for one year. This is in stark contrast to other online website creation platforms that often charge monthly fees that can go up to $24 USD per month. Keep in mind, that’s per month!
As a micro business owner in Indonesia, I understand the challenges of paying >$10 per month for a website can be overwhelming, especially during uncertain times when our businesses may not be as stable as we’d like.
With its unbeatable affordability and convenience, Google Sites emerges as the ideal website builder for micro businesses looking to establish a professional online presence without breaking the bank.
Feature
In my experience, the features offered by Google Sites are already powerful. They offers a wide range of professionally designed templates that are user-friendly and easy to customize. With just a few clicks, you can input your product photos and information, making it a breeze to create a visually appealing and informative website.
One of the standout features of Google Sites is its responsive design capability, which ensures that the websites created can be easily accessed from both mobile phones and desktops. This allows businesses to reach a wider audience and provide a seamless browsing experience across devices.
Responsive Design
However, to fully maximize this responsive feature, some strategic thinking is required. When I first ventured into creating a website with Google Sites, I invested considerable time in conducting research to ensure that I could build an appealing website.
But, I found that references and detailed explanations for using Google Sites were limited. Therefore, in this article, I aim to provide comprehensive insights into one of the key features of Google Sites — setting headers.
Anchor Image
Before we dive into creating banners, it’s essential to understand the anchor image feature in Google Sites, which allows for responsive designs. The image below showcases the nine anchor options available:
In this article, I will focus on explaining the usage of Center, Right, and Left anchors as they provide a solid foundation for understanding anchor images and creating responsive design banners.
Google Sites Responsive Header Size Guideline
In this section, I will delve into the specifics of creating an optimal header design to ensure smooth functionality of responsive features. I understand that those without graphic design skills may find this concept overwhelming, but I will do my best to simplify the explanation so that it is easily understandable for everyone.
Google Sites provides four types for creating banners: Cover, Large Banner, Banner, and Just Text. Let me walk you through each of them in detail.
Header Types: Cover
As we delve into the size guide for the “Cover” banner type, let’s start with the main image, which should be set at 1440 pixels x 1024 pixels. To optimize the banner’s composition, I divided the main image into nine box with varying side lengths (I will explain the rationale behind this division later in the article, based on my research process).
When creating a “Cover” banner, it’s recommended to position your main image object within boxes 4, 5, or 6. You can choose any of these boxes, although placing your main object in multiple boxes is also possible without any issues.
Let me illustrate this concept further with the help of the following image:
In the image, you can see that boxes numbered 4, 5, and 6 represent the desktop view of the image. However, in mobile view, the display adjusts based on the anchor image choice you make.
For example, if you select “Left” as the anchor, boxes numbered 1, 4, and 7 will be displayed on mobile. If you choose “Center,” boxes numbered 2, 5, and 8 will be displayed on mobile, and if you choose “Right,” boxes numbered 3, 6, and 9 will be displayed on mobile.
After adding the sentence “Welcome to our bakery” to create a banner, you can view your website live to see the results. Here’s how it will look:
In my opinion, the “Cover” banner type is the ideal choice for creating a visually stunning website banner. It allows for larger photos that are visually appealing on both mobile and desktop views, ensuring an optimal viewing experience for visitors.
Header Types: Large Banner
I have chosen the dimensions of 1440 pixels x 1024 pixels as the basis for my research in this article, as I believe it represents both desktop and mobile views in a clear and understandable way.
Unlike the “Cover” header type, the “Large Banner” option is divided into 15 boxes. To achieve the best desktop view, it is recommended to ensure that the main object of your image falls within boxes 6, 7, 8, 9, and 10.
Let’s take a look at the sample images below for a visual reference:
In the image, you can see that boxes numbered 6, 7, 8, 9, and 10 represent the desktop view of the image. However, in mobile view, the display adjusts based on the anchor image choice you make.
If you select “Left” as the anchor, boxes numbered 1, 2, 3, 6, 7, 8, 11, 12, 13 will be displayed on mobile. If you choose “Center,” boxes numbered 2, 3, 4, 7, 8, 9, 12, 13, 14 will be displayed on mobile, and if you choose “Right”, boxes numbered 3, 4, 5, 8, 9, 10, 13, 14, 15 will be displayed on mobile.
After adding the sentence “Welcome to our bakery” to create a banner, you can view your website live to see the results. Here’s how it will look:
Recommended by LinkedIn
Based on my experience, choosing the “Large Banner” option on Google Sites can be a bit more challenging compared to “Cover”, especially if we have limited photo options to choose from.
Header Types: Banner
Of the two types of banners I have explained, this type is the simplest to implement. It focuses only on the desktop view, as the mobile view automatically adjusts to the size of 1440 pixels x 1024 pixels, ensuring that all photo components are visible.
Let’s check this image reference:
For desktop view, the main image object can be placed in box number 1, 2, or 3. But, you need to choose the right anchor. For instance, if you choose to place the main object in box number 1, you should select the “Top” anchor. If box number 2 is selected, the “Center” anchor should be chosen. Similarly, if box number 3 is preferred, the “Bottom” anchor should be selected.
Here’s how it will look when the website is live:
In my opinion, when it comes to choosing a header for my website, I prefer using Banners over Large Banners. This is because Banners are easier to set up and they still look great, without much difference compared to Large Banners.
Header Types: Title Only
As the name implies, this header option allows you to display text only. You can customize the font size to your preference, giving you flexibility in creating a header that suits your website’s style and design.
This option is ideal for those who want a clean and minimalistic look for their website, focusing solely on the text content without any visual elements. With the ability to adjust the font size, you can easily make the header stand out or blend in seamlessly with the overall aesthetic of your website.
The Rest is Creativity
Once you’ve mastered creating headers, the next exciting step is to fill in the website content on your Google Sites page. And here’s where the real fun begins — you have the freedom to let your creativity soar!
With Google Sites, you can easily drag and drop your product photos onto the page, and resize them to suit your needs. You can also freely set the font size and type for your text, allowing you to create a truly unique and personalized website that reflects your brand’s identity. The intuitive interface of Google Sites makes it easy for even those without a background in graphic design to create visually appealing and engaging website content.
Websites I’ve Created Using Google Sites
As the Founder of INCV Media, a digital studio specializing in serving micro businesses, I’ve been using Google Sites as a powerful tool to create visually appealing and functional websites for my business. Here’s a glimpse of the website I’ve created for INCV Media.
Link website: https://sites.google.com/view/incv-media/
I’ve also designed two templates specifically for micro businesses in the food or restaurant industry and micro businesses selling clothes or fashion accessories.
I have also created three additional Google Sites templates that are specifically designed for micro businesses operating in the food or restaurant sector and micro businesses engaged in clothing or fashion. Take a look at the websites I’ve crafted using these templates:
Noble Java Cafe
Link website: https://sites.google.com/view/noblejava
Mizzuki Fashion
Link website: https://sites.google.com/view/mizzuki-fashion
Bread & Love
Link website: https://sites.google.com/view/breadlove/home
My templates are designed to help micro businesses create a professional online presence and engage with their target audience effectively. With Google Sites’ user-friendly features and customization options, I’ve been able to create visually appealing and functional websites that cater to the unique needs of micro businesses.
Conclusion
Google Sites offers an incredibly affordable option for website building, with a low annual cost of approximately $12 USD (tax included) and the ability to customize your domain. One of the standout features of Google Sites is its Responsive Design capability, which allows for seamless display across different devices and screen sizes. By mastering the creation of headers, you can fully leverage this feature to create visually appealing and functional websites that adapt to various screens.
Furthermore, Google Sites’ user-friendly interface makes it easy to fill in website content, even for those without prior graphic design experience. Drag-and-drop functionality and customizable font sizes and types provide ample flexibility to create engaging and professional websites for businesses of all sizes, including micro businesses.
Enhanced
For those who are interested in delving into the research behind the Google Sites Responsive Header Size Guideline, I have created a comprehensive Figma file that outlines my process and findings. You can access the file through the following link:
By exploring my workflow and methodologies, you can gain insights into how to determine the optimal header size for your website. I hope that this resource proves to be valuable and helpful in your website design endeavors.
Thank you.
Best
Achmad Faridul Himam
