Sunday, February 26, 2017

Lessons Learned on Developing a New Website

I have been thinking about, enhancing, and revising a philosophy for better living for many years now.  In January 2017, I decided to create a website dedicated to the philosophy.

Creating a good website is not a simple task.  There is the content: what to write and show, what voice to use.  There is the technology: what hosting site to use, what tools to use to build the site.  There is the look and feel: what colors to use, what feelings to convey.  If doing it alone, you need to be a writer, a graphic designer, an artist, a developer, a promoter...just to name a few of the hats.

A month has gone by since I started the new website.  This posting presents a hodgepodge of thoughts, learnings, and tips during my journey in creating a new website.


DEVELOPMENT ENVIRONMENT

There are many website development environments available to stand up a new website.  Examples include WIX, Squarespace, Shopify, Weebly, Blogger, and WordPress.  The first four examples are great for those who want to get a professional looking website up quickly.  The last two examples are more flexible and customizable environments, but they require more technical skills and more time to customize.

The website you are viewing right now uses Blogger.  Blogger is a free environment offered by Google.  It works well, it is free, and it allows you to associate your own custom URL (for example, danielsklar.com instead of danielsklar.blogspot.com).

My personal concern with Blogger is that Google has done very little updating and enhancing of the environment for the developer over the past few years.  I am concerned it may be discontinued, although I have no knowledge of that fact.

WordPress is open source (meaning you can download the software for free), has a community of developers who maintain the software, and hundreds of professional looking templates to get you started (these are called "themes" in WordPress lingo), as well as hundreds of "plugins" and "widgets" to extend the functionality of your website and its look and feel.  Examples of plugins include: commerce capabilities for online shopping, tools to make your website run faster, YouTube integration, forms to collect information, slideshows to show photos, community forums, spam detectors.

After exploring these six new environments, I decided to use WordPress for the new website for the following reasons:
  • I wanted to learn a new environment.  WordPress is very popular.  According to W3Techs in February 2017, WordPress is used by 27.6% of all websites, and of all the websites using a content management system, WordPress has a 58.8% market share.  The knowledge gained by learning this environment would not be obsolete soon.
  • I wanted to customize the website over time.  I felt WordPress could give me the most flexibility without a lot of extensive coding.  There are lots of plugins, and many of the popular plugins continue to be maintained and enhanced.


HOSTING ENVIRONMENT

Although the WordPress software is free, you need to host the software and website on a web server.  You can host it on your own computer ("free" if you have an internet-connected computer you want to use as the host), use WordPress.com (a WordPress service which has a free plan), or use a web hosting service.

I did not want to maintain my own server.  WordPress.com does have a free plan, but the free plan displays WordPress.com ads and does not allow you to have your own custom domain.  The other WordPress.com plans cost money, and their pricing is not extremely lower than web hosting companies.

There are several web hosting companies out there.  I went to a WordPress meeting for developers as I explored development environment options, and I asked for suggestions.  Meeting attendees suggested SiteGround or ClickHOST for WordPress web hosting.  Both offer one-click WordPress installs.  I ended up picking SiteGround.  I have been pleased with the support they have offered.

Tip: Buy the plan you think you will want six months in, not what you need at the beginning.  You will save money in the long run.  SiteGround (as of January 2017) offered three levels of WordPress hosting managed services at 60% off their regular price: StartUp ($3.95 per month), GrowBig ($5.95 per month), and GoGeek ($11.95 per month).  I went with StartUp to test it out.  After a month, I decided to upgrade to GrowBig because I wanted backups and to create another site where I could test themes and plugins.  While I thought the difference would be $2 more per month ($5.95 minus $3.95), they computed the upgrade off of the regular prices of $9.95 and $14.95 per month, respectively; in other words, the upgrade cost $5 more per month.  If I had originally picked the GrowBig plan for two years, I would have saved almost $61.

The benefits of a WordPress hosting environment like SiteGround include:
  • Support: as I am new to WordPress, they offer some handholding to get the website hosted properly, including setting up SSL (encryption of the website) and the linking of a custom domain name to the server.  The support is 24x7, which has been excellent as I never know when I have time to work on the website.
  • WordPress install: they offer one click install of the latest version of WordPress.  And you can have WordPress automatically updated when a new version comes out.  It just so happened that there was a major security issue with WordPress 4.7.1 that was installed.  Within a week, a new version came out and I was automatically updated the same day.
  • Uptime: they have multiple servers, which I would not have if I hosted myself.  They also do backups.


CUSTOM DOMAIN

There are several places you can buy your own custom domain.  Even the website development environments offer them and may include a free domain name for a period of time.

The owner of domain name is public, unless you pay extra.  I prefer the privacy.  Google Domains offers a straightforward price of $12 (as of February 2017) for ".com", ".net", and ".org", which includes Whois privacy and other features.  When you compare with others, even those with enticing promotional pricing, Google Domains is cost effective when the promotion is over.  

Tip: You can save some money by buying the first year at another site with a great promotion and then transfer it, but I did not want the hassle of transferring (you have to remove your privacy before you transfer it) and receiving e-mails from a domain registrar that continues to push the purchase of new domains.


THEME

Starting with a WordPress theme greatly aids the process of setting up a WordPress site.  There are hundreds of free WordPress themes available.  Many of these have a free theme and a premium theme, with the premium theme having more options and being more customizable.  Most of these themes have demo sites that show what the website would look like if the theme was used.

I looked at dozens of themes and demos over several days before I found a theme that had a look and feel I liked, that had a developer that was maintaining the theme, and that had active support from the developer.  I ended up using a theme from Kadence Themes.


PHOTOS FOR WEBSITE

Using photos in a website is standard fare and makes the website visually appealing.  While I have taken a lot of photos over the years and have a pretty good collection of decent photographs (see Photography Tips for Amateurs from an Amateur for examples), it does not mean they are good for a website.  The photos may not fit the theme of the website.  I may not have a photo that captures the proper mood or conveys the right image for the thought being presented.  There may be too many colors so that text layered on top is not readable.  Finding good photos that are perfect for your site may not exist in your own personal stash.  It is desirable to look elsewhere.

While there are sites where you can buy photos to use on your website (for example, Shutterstock), I was amazed at the number of websites that provide high-image photos that are licensed under the Creative Commons Zero (CC0) license. This means the pictures are completely free to be used for any legal purpose.
  • The pictures are free for personal and even for commercial use.
  • You can modify, copy, and distribute the photos.
  • You do not have to ask for permission or set a link to the source.
I thank the photographers who have uploaded their own photos with the CC0 license.  This makes life easier.  I have uploaded some photos of my own in response.

Some of the CC0 photo websites I have found useful include:


QUOTES AND CHARTS

The more you dig into website development, the more tools and websites you find to help the blogger or content creator.

Sharing a quote over an image is very common.  You could do this yourself with many photo applications.  But there are websites to help you do that quickly and perhaps better.  For example, Canva and Pablo, allow you to pick a royalty-free image, type text in various fonts over that image, and then post directly to various sites like Facebook, Twitter, and Pinterest.  You can also download directly and post on your website.

Creating infographics and long-form posters like those on Pinterest is also common.  There are websites to help you do that more easily.  For example, Piktochart provides well-designed templates that you can modify and add content to create visually-appealing documents for use on websites.

I have only used Pablo so far in my website development.

WEBSITE COLORS

Conveying a certain mood for a site involves the use of colors.  It is an art and skill in picking the right colors.

There are several websites that can help you pick a palette of colors that go nicely together, such as Adobe Kuler, Coolors,co, and COLOURlovers.  Each color has a unique hexadecimal code assigned to it (for example, #FE6B7A means this color).  These hexadecimal representations of colors are used in website development and in WordPress, and these color palette websites provide the hexadecimal codes you need to recreate that palette on your website.

I ended up looking at existing websites that had color schemes I liked and then used Color Picker (an application you can download from the Mac App Store), which allows you to click on any color that is displaying on your screen and display the hexadecimal code for that color.

OTHER THOUGHTS

I am still in the process of developing the website.  I will add more thoughts and learnings as I complete the website and go live.

Happy website developing!

No comments:

Post a Comment

Lessons Learned on Developing a New Website ~ DANIEL SKLAR