To: Heading_
Headshot of Patanjali Sokaris

Pondering the universe

Science & technology

Website design

!

There are a plethora of YouTube pundits declaring what is required for building a website. They miss the point.

The takeaway that listening to those pundits is that websites are seemingly technology and fancy visual tricks. No, website design is about communicating with people, and that means structuring content that people will want to read or view. All the technology has to fulfil that purpose in the best way for that content to be understood. Focussing on technology is a distraction if it interferes with that purpose.

This is not a tutorial, but a discussion of the concepts involved in a website, and what it really takes to make one.

Technology

The actual technology required for a website is very little.

The structure of a page is defined by the HyperText Markup Language (HTML). It defines the elements that contain the content, as well as the content itself, and the order and placement of those elements on the page. No matter how it is created, or how simple or complex the technology that aids that is, the end result is HTML. So HTML is essential to understanding a website, as it is basically just a bunch of HTML pages.

Pages are a hierarchy of HTML elements, all of which are restricted in what they can contain. Block elements fill the width of their container, while inline elements in them change the meaning (semantics) and presentation of the text in them.

The way HTML elements are presented is defined by Cascading Style Sheets (CSS), which is a set of rules tied to various aspects of those elements. Most elements have default rules. Explicit CSS rules can modify the presentation in many ways, including by which elements they are contained in.

Thus, for understanding web pages, these are all that is required for static pages that just contain information. To learn these technologies, a website is not required and just a page in a computer folder, such as page.html, can be double-clicked on and will open in the default browser. Its structure and CSS rules can be examined and experimented with in the Elements or Inspector tab of the browser dev tools page, accessed by the F12 key.

Note that these are what are called declarative languages because they state what is required. To change anything on a page in the browser after it has loaded usually requires JavaScript (JS), which is a script of the steps to make those changes. It is the basis of many libraries and frameworks, but none of these are required for static pages.

Only HTML and CSS are essential for usable – as in legitimately presentable – static pages. That means that these two languages must be learnt before anything else to do with building a website. JS is only to help make a page respond to user input, such as might be used if making a calculator page that is self-contained. Thus, being able to program in JS is required if the content of a page needs to respond to changes that do not require communicating to the web server where the pages are hosted. These three languages form the basis of all of what is called frontend web design.


Static pages and any files they require can be stored as is on the web server without needing anything else. However, if a page has a form that seeks information from the server, such as from a database, then the means of handling that request will usually be though a language like PHP, though other languages like Python or JS have become popular. But PHP is not just a programming language but a package of modules (extensions) that provide a lot of functionality that must be loaded separately for other languages, and is usually kept up to date by the shared hosting company.

Many website design packages are built upon PHP, with WordPress (WP) being the most popular because of its rich ecosystem of plugins and variety of design methods.

Content

Despite being omitted from many YouTube discussions, most time with building a site is spent on its content.

Websites are for communicating with people, not being a means for designers to show off their technical wizardry. A real site consists of a home page, the real content spread over perhaps several hundred pages, and supported with policies and contact pages. While the look and feel of pages through the CSS used can enhance the comprehension of what is on the page, the content has to have a consistent narrative across the site.

Once the structure of the core page types and their presentation has been set up, the real work starts with deciding what content to include. That will usually involve a series of iterations until happy. Do that for each of the many pages that are added over time, and that accumulated time will dwarf the development time. If dealing with the content owner, even for just the initial site, that will be a significant soaker of time, and possible disputes. Many people are not good with writing, so if also in that boat, enlisting another who is will probably blow most of the budget.

Communicating

Every aspect of websites involves communicating.

Websites are interacting with people, so their content is critical. Building a website for someone else involves a lot of communicating with the site owner to get their requirements and initial content ideas. Working within a team on a large website involves a lot of communicating. Being able to accurately express oneself in all these situations requires some mastery of language. If not skilled enough, learn how to write more effectively.

If not interested in the communication side so much, but still wanting to program, then app design may be a more appropriate direction to focus upon. However, that requires skill in user interface design, which requires communicating very succinctly and appreciating how spacial layout and what elements are used and where is critical to usability. While that is also required for web pages, there is more flexibility there.

Sizing

Sizing is about the resources needed for a site to service its requests.

A site with static pages on shared hosting can start with very modest computing resources, and scale up to millions of accesses per day merely by progressively upping the plan by a small cost per month as limits are approached. However the more complex the handling of each access, sharp increases in access levels can tax a site. There are many platforms that manage storefront or time booking which can be utilised by providing a simple link from the site.

They will typically handle payments which keeps a site from having to provide the onerous documentation required when handling credit card payments directly, while also having the resources to handle increases in purchases. They can handle all the customer information as well, keeping the site running fairly as is. When a site is getting significant sales volume, then consider embedding the external provider's sales interface into the site, as then the expense of such a upgrade will be justified.

There is no need to build a site for a possibility that may never come. Instead, design it so that only the parts that may need upgrading can be swapped out to handle immanent usage upswings. For international sales, do not use PayPal just because it is cheaper. Instead become a wholesaler to a merchant of record like FastSpring (no kickbacks) who will handle all the remittances of sales taxes to all countries, while only costing a little over twice as much as PayPal for a lot less headache. The site then only needs to be the information resource for the product pages on the seller's site.

AI

AI is not something that can be left to its own devices.

AI is a best-guess fuzzy tool that is heavily dependent upon the material it is trained on. It is like a language professor that can find information quickly, but it does not know whether it is true. It relies upon seeing some consistency in the available information, so for subjects for which there is a lot of formally published and largely agreeing information, it can be fantastic. For topics that have a variety of opinions with no consistent consensus, its results may be dubious or just made up with best guesses.

For programming, it will have had access to a lot of formal and consistent language material, but also a lot of snippets of code of dubious value on sites like Stack Overflow (SO) and Reddit. That means that its results really depend on the quality of the code samples it has come across. It will be excellent for a rare problem that the only information is where someone has fully documented their working solution. For others, it can be just plain wrong because the snippets it has access to are terse opinions that may not have been tested.

AI is not good at optimisation across language domains, meaning that it will be unlikely to see synergies or patterns of opportunity between HTML, CSS and JS unless some code it has did. This is because it tends to work in one domain at a time and not necessarily remember what might be able to be leveraged from previous domains. What might be obvious for a skilled programmer will be opaque to AI. This highlights that understanding of the domains that AI is being tasked with is required to be able to challenge its proposed solution.

Where AI might be giving the illusion of design is when it enlists commonly-used libraries and tools as part of its solution. The hidden part is that the designers of those will have encoded a lot of website design criteria into them that would have had to be defined to the AI if working from first-principles with core technologies. The downside is that any resulting design is likely limited to many of those choices.


A site owner may know their domain but might not be so skilled at expressing themselves. In the past, this has usually required some rounds of interaction to get to the core information that a site needs initially. AI cannot automatically know that information, so any text it creates for initially filling a site will be generic and unlikely to represent the owner's focus at all, and certainly not what differentiates them from others.

If AI has access to relevant previous advertising and other technical information, it may fair better. It still needs vetting as AI tends to try to reduce what it scans to the salient points. But that risks important nuances in the writing or dependencies in the information being filtered out, or relatively minor points being overemphasised.

AI cannot create novel solutions, as in create something new that has not been done in some way before, though it can create novel combinations of existing forms. This means that anything really new has to come from people perceiving the possibility, which can then be discussed with AI as it applies fairly conventional thinking to it.

The impossibility of AI knowing what is true, what actually works, or even relevant, makes AI a dubious assistant that requires someone of high skill to oversee. If not having that, it may be better to slowly build up a site as programming and writing skills accumulate.

Websites for writers

Do you really need to build a website?

If just wanting to build a body of knowledge without having to understand web technologies, then my Smallsite Design word-processor-like website tool will do the job extremely well.

LinksLatest articles&Subsite links

Powered by  Smallsite Design  ©Smallsite™  Privacy   Manage|