This is Essential! Technical Knowledge Every Web Manager Should Know

I'm not a technician, and I don't need to know web production techniques. Do you think that? What's the reality? Well, I'm writing an article like this, so I can confidently say, 'It's better to have at least a minimum.' This is because the person ultimately responsible for checking the website is the person in charge, and if you don't grasp at least the 'quality of the site,' you won't be able to distinguish even if you're provided with the worst possible site for your project.

What's more, the difficult part is that the value placed on 'quality' differs completely depending on the creator or production partner company. Some types prioritize design, while others prioritize the quality of programming code. Some types value information architecture, while others value marketing. Ultimately, it is up to the client to decide what to prioritize.

Of course, you will also receive suggestions from creators and production companies on what would be best. A production partner who doesn't propose the best path is out of the question, but if you have a minimum amount of knowledge to judge what is good, high-quality discussions should arise.

Furthermore, if you don't have a minimum amount of knowledge when checking deliverables during the production process, misunderstandings in thinking can arise. For example, you might misinterpret the intention of what your production partner is saying, or conversely, the words you use might differ from the meaning originally used by the production side, leading to communication discrepancies.

For example, if you need to use IT terms but misunderstand their meaning, you won't be able to communicate effectively with each other. Therefore, a minimum understanding of technology is necessary to mitigate communication risks and to properly judge good and bad with your own eyes.

Instead of buying a side dish for a few hundred yen, you are making an expensive purchase of hundreds of thousands, millions, or tens of millions of yen for a website, so if you can understand it to some extent yourself, you will be able to achieve better results with your website.

Steps to Create a Website

Before we talk about technology, let's go over the basic steps of website production. If you know what steps to take and what values to proceed with, you should be able to grasp the overall picture and advance the project more constructively.

Consultation

First, you need to decide what kind of site you want to create and what the goal of producing this website is. Is it to sell products or services, to generate inquiries, or to enhance brand power? If the goal setting is vague, naturally, the website produced will also lack consistency. First, let's clarify the goal.

Furthermore, this time, what pages do you minimally need? Do you have corporate colors? If not, what is your color image? Are there any reference sites you'd like to use? Your production partner will ask you about various information, so having a clear image of the site you want to create beforehand will make the discussion smoother.

Sitemap, Planning, and Quotation

Once the hearing is complete, the production partner will take the information back. After that, they will create a rough overall plan, a sitemap showing the site's structure, and a quotation. The next meeting will be the start of production if the quotation created based on that information is approved.

By the way, regarding quotations, it's not good to decide solely based on low price. For details on how to find a good production partner,hereI've summarized it in an article, so please take a look.

In most cases, the production company will likely ask if you have any usable photos or materials. If they request materials, please provide all available data such as past brochure data, images, videos, and logos you'd like them to use. They should be able to effectively incorporate them into the design.

Wireframe

If the estimate is approved, we will then create a wireframe. A wireframe is like a blueprint, usually specifying 'what content goes where' using only gray boxes, lines, and text. It's similar to a real estate floor plan or furniture assembly instructions.

Once the wireframe is complete, we mutually check the text content and layout, ensure there's no missing content, and confirm if the design is easy for users to understand. We also ask the client to review it, but since they are not professionals, it's fine for them to simply state what they feel.

For instance, if something is hard to grasp at first glance, or if you want to highlight certain content more prominently. Or if you want to adjust the wording. Just convey your thoughts as they are. Your production partner will surely appreciate it as valuable user-centric feedback.

Create designs

From here, we will begin the actual production. First, production partners often present only the top page to establish the design direction. After reviewing the top page design and confirming that the direction is suitable, if approved, we will proceed with the creation of other pages. Pages other than the top page are referred to as "inner pages" or "sub-pages". If the design direction is set and everything is built at once, making changes later becomes difficult, as it requires significant effort and time.

For example, if you try to change the color later, you might vaguely feel that 'changing the color should be quick and easy,' but design, including colors and layouts, is arranged in a delicate balance, and just changing one color can disrupt that balance, potentially making everything look tacky.

If you change the color, all other design elements will also need to be changed, which can be as much work as starting over. Therefore, let's carefully discuss and decide on the design direction here. Once the design of the top page is decided, we will design all the sub-pages, and if approved, we will proceed to the 'coding' process.

Coding

The designs I've created so far exist purely as images; they don't have clickable links, nor do they have features like slideshows. They won't appear in Google searches, and they don't possess any website functionality. Therefore, the task of giving website functionality to mere images is what coding entails.

Coding is the process of reconstructing images that have been created so far into a form that functions as a website. Therefore, if you have an excellent engineer, they will accurately reproduce the appearance without frequent checks. What the client needs to do is to ensure that the final product is assembled exactly as designed, that the layout is not broken, and that links are correct.

However, if animations or similar movements were incorporated, the final form of the movement would only be confirmed after the coding phase. It is crucial to thoroughly check for any discrepancies in the visual representation. In any case, if only minor adjustments are needed during the coding stage, the project will be delivered. However, this delivery scenario typically applies to general websites primarily focused on conveying information, where there is no system development involved, such as user registration.

A site created to convey such information is called a "static site". The coding work up to this point is sometimes referred to as "front-end".

However, for web services and web applications that include member registration, system development must be done after coding. Sites that require system development are called "dynamic sites." The work on the system development side is called "backend."

System Development

As mentioned earlier, if a website has functions that users use as tools, such as member registration or product purchase functions, system development is required. System development mainly uses languages such as PHP and Ruby, and requires deeper programming knowledge and concepts than HTML and CSS coding. What clients need to do regarding system development is to actually use and check whether the desired functions are working properly.

Most operations are, of course, checked by the production partner, but since they check as professionals, unexpected errors may occur if a user with no knowledge operates it, and there is a possibility that such errors may be overlooked.

Therefore, when clients check, it is advisable to use it freely from a completely amateur user's perspective and then confirm whether it is functioning normally. What is required of clients is simply a user-perspective check.

Delivery and Publication

Once the development of a static or dynamic site is complete, it's time for delivery. Delivery, which we will explain in detail later, requires moving data to a place like a data storage called a server. Servers may be prepared by the production partner or by the client. If you already have a website or are publishing a website for a relatively large organization, it is common to have your own server.

On a server, there are two environments: a non-public environment called a test (staging) environment, and an environment accessible to general users called a production environment. However, depending on situations where speed is prioritized or corrections are made while publishing, only a production environment may be prepared, and everything may be checked in the production environment and then published directly. But generally, both a test environment and a production environment exist. After confirmation in the test environment, if it's OK, it will be published to the production environment, leading to delivery and publication (release).

HTML、CSS、JavaScript、php、Ruby、Python

It might be widely known to some extent that HTML and CSS are used when creating a website. However, there are many languages for creating websites, and even if we only gather the most frequently used ones, there are six types. This time, we will introduce six languages with a large share.

HTML

This is the language that creates the framework of a website. A website is composed of small parts such as buttons, images, text, and titles, but these parts, so to speak, must be converted into "machine language" for Google's search engine and computers to understand what is a button and what is an image.

Therefore, to make the website understandable to machines, appropriate meaning is assigned to each part. If you are interested in the specific methods, please look them up. Since HTML is merely for assigning meaning, it cannot reproduce design elements such as colors or layouts.

CSS

Design elements such as colors and positions are added to sites structured with HTML. The scope of what CSS can do is expanding year by year, and animations can also be added with CSS. Only with CSS can a website gain design appeal. HTML alone would just be a string of characters.

JavaScript

This is the language that allows users to interact with a website like an application. For example, if an image is enlarged when clicked, a list of data is sorted, or complex animations are added, it is mostly controlled by JavaScript.

Simple animations can be added with CSS, but for example, when and at what timing simple animations should function is controlled by JavaScript. However, JavaScript can only "operate" and cannot "save or record" data. The languages introduced below are capable of doing that. HTML, CSS, and JavaScript are collectively referred to as the front-end.

PHP

The languages that allow data storage and more are called "backend" languages, which will be introduced from here. Among them, PHP is often used for web service and web application development. While it is an old language and not built with the latest concepts or logic, it has a wealth of information and many users, so there are no difficulties in securing resources or personnel. WordPress is also built with PHP, so it has compatibility with WordPress and is one of the most commonly used languages for system development.

Ruby

This is a rare language developed by Japanese people and used worldwide. Recently, it has become frequently used in web services, especially among startups. However, it is often written using a framework called Ruby on Rails, which makes Ruby easier to develop. In Japan, it is a widely used backend language, similar to PHP.

Python

This language is often used when developing with machine learning and artificial intelligence. The reason it is used in this field is that it has a well-established system to support development that utilizes artificial intelligence and machine learning. In recent years, it has also been used in the fields of statistics and data analysis, such as learning Python instead of spreadsheets, and thus has slightly different characteristics from the other two languages.

For backend languages, unless you are using machine learning or artificial intelligence, there isn't much difference for the client, regardless of which one you use. If anything, with PHP or Ruby on Rails, there are many developers available, so if a developer changes, it's easier to find another one. That's about all you need to remember.

Server, Domain, SSL, Database, FTP

Next, I will explain about servers. It is often the case that clients prepare these themselves, so understanding the terminology and functions will make discussions smoother. Now, let's start explaining each one.

Server

To make your website viewable by anyone, you first need a server. A server is like a storage place for data, similar to a rented warehouse in an offline context. Imagine a company that owns many special hard drives and leases out a portion of them.

Of course, you can build your own server, but it incurs significant operational and setup costs. By placing your website data on a server, it can finally be made public. However, with just a server, no one can access that site. This is because it doesn't have a URL assigned. That's where the domain, which will be explained next, becomes necessary.

Domain

A domain is like the address of a website; for this site, quon.ink is the domain. Domains can be acquired from domain registrars.

Famous domain registrars include "Onamae.com". By acquiring a domain and connecting it to the server where the website data is stored, anyone can finally reach the website. It will also be registered with search engines like Google, making it discoverable through searches.

Incidentally, it is sometimes called a URL, but a URL refers to the entire address, including the domain, such as "https://quon.ink/blog/tsukuba/". It might be easier to understand if you think of a domain as simply meaning "quon.ink".

Database

Normally, website data is stored in "files" just like on a computer. However, depending on the data, storing it in file format can sometimes make it difficult to handle.

For example, user data. Data such as user names, ages, and email addresses are often searched and edited. In such cases, it becomes easier for programs to process if they are handled as 'text only' rather than in file format.

For data that is more convenient to handle as text, databases are utilized. Databases are installed on most servers and can be used freely. Data that grows enormously, such as blog articles and SNS posts, is also basically stored in databases.

SSL

This is security to prevent your website from being hacked by malicious actors. When you look at a URL, you might see both 'http' and 'https'. If it's 'https', it means SSL is functioning and security is active.

When viewing a website on a computer, you use a browser application to view the homepage. When viewing a homepage, data communication occurs between the browser and the server. If it's not SSL-enabled, raw data travels back and forth between the server and the browser. In this situation, if a malicious hacker (cracker) tries to steal data, they can easily intercept the communication and steal information.

However, if SSL is enabled, all communicated data is encrypted, making it undecipherable even if someone tries to steal it. Therefore, security is enhanced. In the past, SSL implementation was quite expensive, but recently, more servers offer free SSL.

FTP information, FTP software

FTP software is a tool for accessing the contents of a server from your computer. We mentioned that a website can only be made public by placing data on the server; by accessing the server with FTP software, you can upload data to the server.

And FTP information is like a key required to access the server from your computer. By entering FTP information into FTP software, you can finally access the server. FTP information is provided when you rent a server, so please provide it to your production partner if necessary.

However, there are cases where company policy dictates that the production server can only be accessed internally. In such situations, you would either provide only the test server's FTP information or have the production partner prepare a test server.

CMS and WordPress

CMS is an abbreviation for 'Content Management System,' and it refers to a system that allows you to easily change website content such as layout, text, and images from an administration screen.

As we've discussed, websites are created using various languages and processes. CMS can also be described as a system that allows you to modify or build a website even without programming knowledge.

Among such CMSs, the most famous is WordPress. WordPress is a free CMS, and it is said that over 40% of websites worldwide are built with WordPress. One common misconception here is that using WordPress makes it easy and cheap to build a website. There's a big misunderstanding about this.

Certainly, if you use a template as is, it's possible to build a website instantly. However, for original designs, after building the website as usual, an additional step of templating is required to make that data usable with WordPress, which increases both the man-hours and the cost compared to a standard site.

However, websites built with WordPress have the advantage that clients can manage and change necessary parts, such as updating blogs or news, or updating specific sections of the site.

That said, it doesn't mean you'll be able to change everything on the site. For areas you want to update freely, you'll need to create a special program to enable editing and changes. The point is that by deciding from the start which parts you want to update and converting to WordPress, you can change those specific areas. If you don't discuss and decide with your production partner which parts you want to be able to update, there's no point in converting to WordPress. Make sure to thoroughly discuss the areas you want to change and proceed with production.

Cache and Cache Clearing

To display a website, data must be sent from the server to the browser. However, if data is communicated every time a page is opened, the display will become slow. To achieve fast and stress-free display, data that has been loaded once is saved on the computer. This eliminates the need to call data from the server every time, resulting in faster display.

However, caching has a drawback. Even if files are updated on the server side, the cache remains on the computer, so the new files are not updated. Caches disappear after a certain period, but if you need to confirm in real-time with your production partner, you can't wait. In such cases, you can manually clear your browser's cache. Since the method for clearing the cache differs by browser, try researching how to use the cache for your current browser. A Google search for your browser name and "how to clear cache" should quickly provide results.

Google Analytics, Search Console

As I've said many times, simply creating a website is meaningless. After users visit your site, you need to meticulously collect and analyze access data to understand how they navigate, which pages are frequently viewed, and conversely, which pages don't capture their interest.

That's where Google Analytics comes in handy. By installing Google Analytics, you can acquire a vast amount of access data. Analyzing this data will naturally reveal how you should improve your pages.

Furthermore, there's another tool called Search Console. This is also provided by Google, and it allows you to obtain various search-related information, such as what keywords users are using to access your site in search engines, and which pages are displayed at what rank. It's a tool for SEO.

Use Search Console to implement measures for search engines, and Google Analytics to make revisions so that users don't get lost on the site, to make it easy to understand, and to attract user interest. You should definitely include these two on your website.

Responsive Design

Originally, websites for smartphones and websites for PCs were created separately. However, as HTML and CSS developed, it became possible to display different layouts based on screen width using a single file. This is called responsive design. While responsive design cannot achieve more complex things than creating separate files, most sites can now be covered by responsive design. It also reduces production costs and time.

Currently, unless there's something special, separate sites for smartphones and PCs are not created. It's common to produce them with responsive design, meaning they adapt to the screen width within the same file. This term is often used in communication with creators, so remembering it will help discussions proceed smoothly.

Summary

Website creation is not something where "if you leave everything to a production partner, the best site will be created." Clients need to review the site from the perspective of a professional in their own industry. Especially, by thinking about the site from a user's perspective, and creators aiming for the best website from a professional website perspective, only then will the best website be completed.

For example, when building a house, if you leave everything to others, it doesn't necessarily mean the best house for your lifestyle will be built. Since we have our own lifestyle, unless we convey our way of life to the architect and discuss it, the house we truly want will not be completed. It's the same with websites.

Of course, if there is time and budget, a web production partner might be able to thoroughly research the industry and create with confidence about what the best path is. However, if the research is delved into that deeply, an enormous cost would be required just to create one website.

Therefore, even when ordering as a client, instead of completely leaving everything to others, let's actively discuss and provide information from our own perspective. That is precisely the secret to a successful web production project.