Blog Post

Creating a new responsive website in 10 mins (2021 update)

Sandra • April 3, 2019

This guide will help you build a website in the next 10 mins on FirstSite.


FirstSite is an Award Winning no code system that allows anyone to build a Google optimized website that is also a mobile app. It is powerful enough for marketing agencies and simple enough for entrepreneurs. FirstSite makes it easier for marketing agencies to create and optimize websites for their clients. It also enables entrepreneurs to quickly create, test, and launch new business ideas without having to spend time or money on a web designer.


You can create your responsive, SEO friendly website today by following these easy steps.

Getting started

Register for a domain on www.8c.sg. Your domain will be the address which users can find your website. For example: www.yourdomain.com. If you are undecided if you should get a .com or a .sg domain, you can read this first.


Next, sign up for an account on https://signup.firstsitebuilder.com/. 

To build your website, click on site name or

Start with a template (Hundreds of free professional templates to choose from)

Hundreds of professional website templates for FirstSite

During the setup phase, you will be given hundreds of professionally designed responsive website designs to choose from.


If you do not like the template that you have chosen, you can simply reset it and choose a new template.


To reset, go into design panel and click on Design > Reset Site which can be found at the bottom. Choose to either "Complete reset" or "Reset & keep data".


 After clicking on either of the buttons, you will be redirected to the template vault. In template vault, you can search for a new template that is suited for your business. To replace the current template, simply click on the new template.

No code design

Left side panel for FirstSite

You can build your website by just dragging and dropping elements around the website. The left panel contains all of the widgets and features. Here you can find tools to edit almost anything on your site.


The left panel has features to make broad, sweeping changes to the entire site. For example, changing the color scheme or button design in the Design tab, add new features and widgets with the Widget tab, change your pages' configuration in the Pages tab, and make administrative changes in the Settings tab (for example, changing the site's URL).
  • Customize Site Layout

    Your template includes the matching header, footer and navigation, but you have a multitude of options to change it. Depending on why you created a site, you can pick a social media focused header, a call-to-action buttons based header and so on. You can have different layouts between desktop, tablet and mobile views.


    To change the layout of your site, in the left panel, click Design, and then click Site Layout.

  • Images and Colors

    All of our templates have a vibrant color palette and rich array of images, so all that is left to do is re-color the site in your branding colors and pick the images that reflect your niche. When doing so, do not forget to make sure you have adapted all elements of the template to your style.


    Make sure to visit every page and double-check that the color of the text elements and backgrounds are correct. Switch to desktop, tablet, and mobile view as you go.


    To change images, in the left panel, click Design, and then click Global Images.

Consistent Branding

If your site accompanies your business or organization and you already have a branding package, make sure the site reflects the same. Use the same logos, fonts and colors on your site.

  • Font

    When it comes to fonts, our rich built-in library will cover you for the majority of widely-used fonts. If the font is not available, you can use Google fonts or even embed your custom font on the site using @font-face technology.


    To change the global font, in the left panel, click Design, and then click Global Text.

  • Logo

    Make sure your logo is in the header of your site. For most templates, you will just need to update the default logo of the template with your own one. Check both the header and the footer of your site.


    For some templates, you have the option to upload a larger image on desktop and a crispier, smaller version of it on mobile. This means that you need to update the logo separately for each device layout.

  • Favicon

    Favicons are a great way to make your site stand out on your users’ browsers. It is always a great idea to upload a smaller version of your logo as a favicon. If your logo is too big, just upload a small icon that matches the general design of your site in colors.


    To upload a favicon, in the left panel, click Settings, and then click Site Icons. Click +Image next to Favicon.

SEO Optimization

SEO Optimization settings for FirstSite

For every site that you build, Website Builder makes our best effort to have your pages load quickly. We automatically resize the images for your site and optimize the code. When publishing a site, the sitemap is submitted to Google and Bing to make sure it is indexed. 


Complete the following to continue optimizing your site.


To see all SEO settings, in the left panel, click Settings, and then click SEO.
  • Meta Tags for Search Engines and Social Media

    To ensure the preview of your page on social media and search engine snippets look good, remember to set the following:

    • Site Title and Description
    • Social Media Image
    • Page Titles and Descriptions
    • Blog Post Descriptions
  • Image Optimization

    FirstSite will automatically resize and compress images and show device-suited versions of the image. However, not every image can be optimized to the full potential by modern optimization tools. For instance, no compression tool will optimize the image that comes in 4000x7000 pixels. Since the majority of your users will not have such wide displays, simply upload smaller images.

  • Alt Text

    Search Engines cannot see the images on your site, but they do crawl the alt text you put on them. This is a great place to use some of the keywords for your site.


    To add alt text to an image, click the image in the editor, and on the Content tab, type the Alt text in the field provided.


    Alt text is especially relevant for pages with a lot of images, but not a lot of content. Text is the main way to communicate with search engines, so make sure not to miss such an opportunity.


    Note

    Make sure that the alt text matches the image. Otherwise, you will hurt your SEO instead of helping it.

Publishing your website

Once you are done with laying out the content for your website. It's time to get it published. This is the easy part. Your domain will need to be linked to this website. To get this done, simply contact Sandra and she will have it arranged within one business day. FirstSite will cost just SGD$500/year. Your website will be hosted and secured on Amazon Web Services. It will be fully optimized for Google and future proof to browser and other technical updates. For more information on FirstSite visit www.firstsitebuilder.com.

First thing to do after publishing: Secure your website with SSL

FirstSite one click SSL

An SSL certificate is a bit of code on your web server that provides security for online communications.  When a web browser contacts your secured website, the SSL certificate enables an encrypted connection. It's kind of like sealing a letter in an envelope before sending it through the mail.


Since July 2018, Google started to penalized sites without SSL certificates. 


After publishing your site, you should first get your SSL certificate installed. SSL certificates are free and can be installed with just one click. 

Bonus: Make your website an app

A Progressive Web App (PWA) is a web application that enables you to deliver a native app-like experience to users on mobile so that they have a fast, smooth, and engaging experience with your site.


PWAs load instantly, respond quickly to user interactions, and feel like a natural app. They do not need an app store for installation and enable users to re-enter the site instantly, even when a device is offline.


To activate PWA feature:


  1. In the left panel, click Settings, and then click Progressive Web App (PWA).
  2. Click the Activate Progressive Web App toggle. Once PWA has been activated for a site, you can configure the following settings:
  • Name. This is the name displayed on the splash screen and the “Add to homescreen message.” It can be up to 60 characters long.
  • Short Name. This is the name used when there is not enough space to display the full name; for example, on the mobile homescreen. This name can be up to 60 characters, but we suggest that you make it as short as you can.
  • Icon. This is the icon that appears on the mobile homescreen and the splash screen when the app is loading. It must be at least 192 pixels width and in .png format.
  • Splash screen background color. This is the color that appears while the site is loading.


When a user accesses a site enabled with PWA from their mobile device, they will see an Add to Home screen button displayed below the site. Once added to the home screen, the icon will be displayed on their device for quick access to the site (similar to an app).


The user can now re-enter the site using this icon, even if the device is offline.

8 Connect FirstSite PWA

Share this post

Search Generative Experience

Unlocking the Power of Search Generative Experience for Your Business

By Claire Chan • September 19, 2024
Discover how Search Generative Experience can enhance digital presence and drive results. Learn the essentials of this innovative approach and its benefits.

OpenAI Integration with FirstSite

By Sandra Lee • June 28, 2023
Discover how FirstSite is revolutionizing content creation and digital communication with OpenAI integration. From AI-powered quick edits and content generation in the text editor to a new free chatbot platform, OpenAdvisor, 8 Connect Consulting is pushing the boundaries of what's possible in the digital world. Learn more about these innovative offerings and how you can leverage them for your content creation and communication needs
Instant Organic Traffic Boost with AI-driven SEO Techniques

Revolutionizing SEO in Singapore: How Data-backed AI Outshines Traditional SEO Agencies

By FirstSite Administrator • April 12, 2023
Discover how data-backed AI is revolutionizing the SEO landscape in Singapore, outperforming traditional SEO agencies with its speed, efficiency, and adaptability. Learn how 8 Connect Consulting leads the charge with their innovative AI-driven strategies and their award-winning platform, FirstSite, offering businesses a comprehensive and cost-effective solution to conquer the competitive digital world.
Share by: