Speedy and accurate!
Coding tips for website operation (advanced)

Hello, this is Gotanda from the WS Department (Webmaster Support Department).

In the WS department, we manage websites for various clients on a daily basis. In a previous article , we introduced coding for website management, including points to note from the creation method to the publication process, but this time we would like to write about the "advanced version".

As you operate your site after publication, I would like to introduce three small tips, including coding that will allow you to update pages smoothly and updating the banner area.

1. How to write markup

Coding method that allows you to delete the <a> tag from the link button

When operating a website, it is important to respond based on future anticipated cases.
For example, this is a common case when setting up links.

• Currently, it is a link, but if the product you want to link to is sold out in the future, I don't want to be redirected to the product page, so I want to delete the link.

In cases like this, it would be easy if you could code simply by deleting the HTML <a> tag, but if removing the <a> tag causes the area to collapse, you will have to update the HTML and CSS for that area and start the coding again.

When coding, there may be cases where you want to apply CSS directly to the <a> tag selector, taking into account the effort required to assign class names.

So, here are two points that website creators should take into consideration:

- Do not add CSS to the <a> tag selector.

[HTML]

<p class="btn"><a href="#">Learn more</a></p>

[CSS]

.btn a {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-decoration: none;
	background: #F80307;
	color: #fff;
}

・Add CSS to the selector of the parent element of the <a> tag

[HTML]

<div class="button-area">
<p class="btn"><a href="#">Learn more</a></p>
</div>

[CSS]

 .button-area {}
	.button-area .btn {
		display: block;
		width: 100%;
		margin: 0 auto;
		text-decoration: none;
		background: #F80307;
		color: #fff;
	}

2. Landing page coding

If you paste an image, it will be difficult to use later.

When updating landing pages (LPs) on e-commerce sites and the like, it is common to see pages where images are sliced into large sections and coded as large section elements.

*Example image) The entire section within the blue frame is sliced into a single image

Sure, it's easy and quick to do when you first start coding, but even with landing pages, you'll likely update the page many times during its life.

For example, if a product introduced on a LP is sold out, you may be asked to add text as a device font near the product image. If the entire product area is placed as an image, you will have to recode that area or change the image in the PSD.

With this in mind, it is important to code the parts of the page that are expected to change with images that are as detailed as possible. Even if you cannot express everything as an image, by making as many as possible available, you will be able to easily update the page in the future.

※Example image) Slice each part in the blue frame

3. Banner replacement

To be able to quickly replace

E-commerce sites often have many banners on their top pages. Updating the banner area is an important task in operation. When a new product is released, when that new product is sold out, when you want to sell other products, or when you want to return to the default banner, reviewing that area every time is very time-consuming and troublesome.

In anticipation of such cases, it is convenient to always comment out the banner that is displayed by default in the HTML and make it invisible, so that anyone can easily update the page.

Depending on how the site is constructed, this method may not be the best method, as unnecessary source code may remain in the source code making it difficult to analyze, and commented-out source code may remain in chronological order as the site is operated. However, it is good to consider this as one method.

When operating a website, it is important to build it so that anyone can easily update it. When building a website, various things are considered when designing and building it, but there are cases where this is not fully implemented.

In particular, since multiple companies may be involved in operations, it may not be possible to adopt the methods introduced here as they are, but we hope that you will find them useful from the perspective of making future operations easier.