Reference
~
Hosting options
~
Code primer
~
Questionnaire
~
Hosting, content management and customisation
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.
For a primer on how websites work, see “Websites: the core languages” further along on this page .
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.
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:30pxCSS 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);
Values and friendly questionnaire
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.
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.