beanz Magazine

How to Build a Slightly Complicated Website

Squarespace Website

Some tips on how to find online publishing services and use them to create your website.

In the February issue, I showed you how to create a simple website made of two basic HTML pages. The goal? To learn a little about how websites work, HTML tags, and how HTML pages are displayed in web browsers.

This article shows a slightly more complicated way to build a website.

When people create websites, they have at least three options:

  • Code every page by hand, either line by line or with tools to help automate parts of the coding process, for example, closing tags automatically, tracking web page files, and managing a library of commonly used code.
  • Sign up with an online publishing service and use their software to create and publish their web pages.
  • Use publishing software on their own web hosting service and create pages through a mixture of automation (the publishing software) and hand coding (usually templates to control the page layout).

This article describes the second option, hosted publishing services. The third project, publishing in the June/July issue in a few months, will show how to do the third option.

Each of these three options have positives and negatives. Personally, I like to control every last detail when coding so the first and third options appeal to me despite the extra work involved. The second option works well for many people but you are limited by what the publishing service offers.

Where Can You Find Hosted Web Publishing Services?

There are too many services available to list them all here. However, some large services are LightCMS, Wix, Squarespace, WordPress, and EduBlogs. The latter service caters to schools and teachers. LightCMS, combines the first two options, hand coding with hosted publishing. There also are services for specific countries or languages. Search online, ask friends, look at computer magazine ads, and ads when you’re on technology websites like Smashing Magazine.

These services are somewhat hard to find online because they are a web service, which also describes a type of software technology, and content management systems, which are not always hosted on the internet.

How to Choose a Hosted Web Publishing Service?

With a few services to investigate, here are some issues to consider as you explore:

  • Do they offer a free account? This will let you try their service to see how it meets your needs (or does not).
  • Do they offer templates? Unless you know how to code a full-on web page design, you will need a number of web page designs, or templates, you can adapt for your site. Be sure to look through any and all templates offered to see if they offer a page design you like.
  • Do their templates display well on mobile phones and tablets? This might be hard to check but if you can create a test site, call up your site on your phone web browser and a tablet computer. Or simply resize the width of your web browser on your desktop computer to see if the page design degrades nicely. Many people at least check out a website on their phones then browse later on a tablet or desktop computer.
  • Do they let you use your own domain name? While some people are happy with a subdomain (yourdomain.wordpress.com, for example), most people want the option to use a custom domain name they own.
  • Do they offer enough self help? Try to create a few web pages, upload images or video, change headings, and see what help the publishing software has as you get stuck or have questions. For example, Wix has a lot of tool tips that pop up as you work.
  • How fast is their support? File at least one support ticket to answer a question and see how they respond and how quickly.
  • How fast does your test site load? If they provide a test account, be sure to view your test site from your computer. Maybe ask friends in different locations to also check how fast your test site pages display.
  • How big are they as a company? While small companies tend to provide better service, large companies rarely go out of business. But big companies also tend to stuff as many accounts as they can on their web servers which slows down how fast your site displays.
  • Can you export your data? If an online publishing service goes out of business, you will want your page content, images, and other material stored on your computer to use at another service. You should organize and back up all your files used to create your site but exporting data also helps.

If you don’t know, another great way to check out any service or technology is to search online for the company name or URL and the word problem. The most amusing example I’ve found, over years, is to search for the phrase Dell problem because Dell computers seem to go back and forth between making great computers for a few years with few online complaints to a few years of less reliable computers and more complaints, then back to making great computers.

How Does a Hosted Publishing Service Work?

If you’re impatient to actually create a hosted website, as I am, you can see this method of creating websites is as much about finding and choosing a service as learning how to use their technology.

Let’s try one service, Wix.com, because their service is provided in many different languages aside from English. They also let you set up a test site. And they offer a range of canned templates.

First, go to Wix.com and click the Login/Signup link at the top right of the page. The registration process is simple: enter your email address and a password.

The next page displays a set of templates to use for your site. While the default is a picker tool organized by type of site, there is a link to browse all templates.

projects-wix-1-template-picker
The Wix Page Design Picker Tool

If you click the all templates link at the bottom of this picker, you also can browse the templates as a list. For me, this is a better way to see what they offer.

projects-wix-2-template-list
All Wix Page Designs as a list

Once you pick a template, Wix creates a simple site with example pages. Here is the main interface you see, with a simple blue Edit this site button up top of the page.

projects-wix-3-first-page
Your New Test Site with Blue Edit this site Button

When you click the blue Edit button, then you see many options arranged around the site home page. One good thing about Wix is how carefully they organize the many things you can do, as well as how clicking links doesn’t get you into too much trouble.

projects-wix-4-edit-tools
The Main Edit Screen with Tool Tip Help Displayed

Clicking on parts of the site page, and right mouse-clicking, also displays options to add or edit content and headings.

projects-wix-5-edit-text
Click or Double-Click to Edit Parts of the Web Page

One of the more interesting parts for me, having coded many contact forms, is how Wix makes it easy to configure the form on a Contact Us page. When you test different services, small details like this make a big difference. You want to update these bits easily and have lots of options.

projects-wix-6-contact-us-page
The Contact Us Edit Form

There are too many different options to document every last screen provided on Wix.com. Instead, it is an excellent way to try out this second type of website publishing, using a hosted online service. Because they allow you to create test sites, it’s also a good way to compare services. And, not least important, the fact they pre-load your test site makes it easy to test out how to change content, how easy or hard it is to send contact us information to yourself, how to add video to a blog post, and other common tasks.

Learn More

Online Publishing Services

http://www.edublogs.org
http://www.lightcms.com
http://www.squarespace.com
http://www.wix.com
http://www.wordpress.com

Also In The April 2014 Issue

How to Make a Twitter Bot

There are a ton of ways to make a Twitter bot. Here are a number of resources, ideas, and clues to follow up.

What is an Algorithm?

Algorithms control our lives online and offline. Here are some examples to show what is an algorithm and how they work.

How to Build Example Bot

I have updated the installation instructions for this Github project to make it even easier to install and play with.

Bot Makers

A collection of bot makers and professor types attend an online bot convention to talk about Twitter bots and more.

File Extensions

You can tell a bit about the software used to create the web page you're reading by looking at the URL in your web browser.

Traceroute

A computer command used to diagnose network problems also lets you see how data hops across the internet.

How to Build a Slightly Complicated Website

Some tips on how to find online publishing services and use them to create your website.

What is an API?

APIs can be a fun, easy to use, and easy to learn way to retrieve and mash up data online.

April 2014 News Wire

Interesting stories about computer science, software programming, and technology for the month of March 2014.

Objects

Many programming languages organize their code into objects, to model their applications and make their code more reusable.

April 2014 Learn More Links

Links from the bottom of all the April 2014 articles, collected in one place for you to print, share, or bookmark.

At bottom, robotics is about us. It is the discipline of emulating our lives, of wondering how we work.