Practical advice for website owners

When setting up a website it’s a good idea to know the fundamentals. Most people are aware of what sites should ‘look like’ and what they should ’do’.
Fewer understand how this happens.

A little foreknowledge helps you to create effective, user-friendly content that yields good search results and impressive performance.

As a bonus, you will enhance the workflow with your designer/developer.

•  ◎   •   ◎  •  ◎  •

Hosting, content management and customisation options

I build websites using WordPress and Squarespace, the two leading web-based content management systems. I also work in custom HTML for smaller, niche sites.

See “Websites: the core languages” at the bottom of this page for a primer on how websites work.

WordPress

WordPress is the leading site-builder and Content Management System (CMS), used by 38% of the web.

It’s been called “a factory that makes web pages”, storing content and enabling a user (or multiple users) to create and publish their site, requiring only a domain (your website address) and a server (where the site is hosted).

A good choice if you want to manage and update your site once it’s built. If you don’t know WordPress, please be aware that the learning curve is pretty steep at the beginning. I can help you with this.

Here is an introduction to WordPress from wordpress.org:

Squarespace

Squarespace is software-as-a-service, using elegant templates and drag-and-drop elements to create and modify webpages.

The Squarespace interface is user-friendly and the default template is quite elegant. You have full control of the site-wide styling and the individual page layouts. The learning curve is less challenging than WordPress.

Sites are hosted on the Squarespace platform so this is an excellent choice if you don’t want to manage a separate hosting account. Generic and custom domain names are available.

Learn more about Squarespace:

Custom

Custom websites use Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and Javascript for structure, styling and function respectively. A webmaster uses all three to create a website to your exact specifications.

Custom HTML is an excellent choice if you’re interested in creating a personalised website, with the expectation that your webmaster will do updates and maintenance for you.

Requires a domain and a hosting service.

My site for Tim Hendy Pianos is a good example.

 

Pricing Guide

Commissioning costs for websites vary widely according to the scope of work. My fees are in line with prevailing rates. See Expert Market for a detailed and up-to-date review of freelance website design fees and ongoing costs.

Basic

1-5 mobile responsive pages
Contact page

Design £200-500
Ongoing costs for domain, hosting, updates, £10-55/month

Small business

6-10 mobile responsive pages
Contact page
Social media integration

Design £500-1000
Ongoing costs for domain, hosting, updates £10-75/month

Institutions, e-commerce

10+ content-rich pages
Surveys, questionnaires, e-commerce tools, user logins, database management, etc.

Design £1000-2500
Ongoing costs for domain, hosting, updates £10-400/month

Contact me for a free consultation via the friendly questionnaire below. Your replies will mean that I am already up-to-speed when we make contact.

Values and friendly questionnaire

I offer:

Custom designed websites that communicate your stories and capabilities with clarity and style

Elegant, engaging design free of irrelevant and distracting on-trend tricks

Modern responsive site layouts that work on all devices

Semantically correct HTML

Careful attention to SEO and accessibility requirements

Please use this handy and entertaining form to make contact.

Websites

A selection of current projects.

transitstation
international exhibition-as-live-art event
Tim Hendy Pianos Ltd
first-class piano tuning, maintenance and repair
Paul Reeves Music
composer of soundtrack, jazz, orchestral and new music
ARTISIN LLC
planning and organisational services for artists and cultural institutions.
Hair! Human Stories
a pop up exhibition which explores the extraordinary qualities and uses of human hair
Simon Klein
prolific artist and teacher
Julie Marino
playwright, storyteller
Calum Storrie
exhibition and museum designer based in London

Websites: the core languages

Websites use three core languages: HTML, CSS, and Javascript.

That simplifies matters drastically, but along with database management, these are the essentials.

Whether built ‘by hand’ with HTML and a CSS framework, created with a content management system like WordPress, or output via a web interface like Squarespace, at the end of the day the pages will display using HTML, CSS, and Javascript.

Rules and standards for these coding languages insure reliability across the web, affecting the display of content, and key technical, usability and performance factors such as page loading time, responsive display on all devices, accessibility, search engine results and AI performance.

Site design and content are managed in the cloud via content management systems and software-as-a-service vendors; custom HTML sites are created on local computers then uploaded to host servers. Following is a quick review of of the three options that I offer.

Next on the page you will find a statement of my values and a friendly questionnaire for your inquiries. To enhance your geek credentials, read the short notes on coding languages near the bottom of the page. The page closes out with a restful video.

HTML

HTML provides the basic structure of sites, which is styled and enhanced by CSS and JavaScript.

The HTML for a basic ‘Hello World’ looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes"> 
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Some content</p>
<h2>Here we are</h2>
<p>Some content</p>
<h3>Places we like</h3>
<p>Some content</p>
<h2>Our stories</h2>
<p>Some content</p>
<footer>bottom of page</footer>
</body>
</html>

Used correctly, HTML structures the semantics, or logical meaning, of the content rather than its appearance. Semantic markup (the code) conveys the hierarchy of your content and how both users and machines will read it.

Semantically correct HTML is critical for accessibility and SEO and is an important consideration when preparing your copy.

Seekbrevity has an excellent article on semantic HTML.

CSS

CSS (Cascading Style Sheets) is used to control presentation, formatting, and layout.

These are the CSS settings for column gaps on this site:

.elementor-column-gap-narrow > .elementor-row > .elementor-column > .elementor-element-populated {
padding:5px
}
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
padding:10px
}
.elementor-column-gap-extended > .elementor-row > .elementor-column > .elementor-element-populated {
padding:15px
}
.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated {
padding:20px
}
.elementor-column-gap-wider > .elementor-row > .elementor-column > .elementor-element-populated {
padding:30px

CSS enable the separation of presentation and content, including layout, colours and fonts. This improves content accessibility, and enable multiple pages to share formatting by specifying the relevant CSS in a separate .css file to reduce complexity and repetition in the layout.

The Wikipedia article on CSS is a good resource if you want to know more.

Javascript

JavaScript is used to control the behavior of elements such as animations, menus, .

If there were animation on this page, the code to control it would include lines like these:

element.addClass(animation).css('transition', 'none');

requestAnimationFrame(function () {
element.addClass(initClass);
if (isIn) element.show();
});

// Start the animation
requestAnimationFrame(function () {
element[0].offsetWidth;
element.css('transition', '').addClass(activeClass);
});
element.one(Foundation.transitionend(element), finish);
I find Javascript to be the most challenging of the three languages. Mozilla has a great article. I love the title, “What is JavaScript, really?”
square clay tablet with symbols arranged in a rough grid
Archaic tablet, written in Sumerian (?). Uruk III

Great! You’ve read everything, right?

To change the pace, a short video of dancer Georgia Vardarou.

Coming soon in this space, my new film comparing Squarespace, WordPress and Custom HTML.