Step 3-6 What is important multi-device compatibility in website creation?

Click here if you want to know the table of contents for Web Beginners

Quiz

What kind of devices do you use to view websites? "Aren't you spending more time on your smartphone than on your computer?" Before tablets and smartphones became commonplace, it would have been enough to consider that websites would be used on personal computers, but today many people use smartphones to access websites. I'm here. Not only for personal use, but also for business.

For example, use a BtoB site on your work computer to carefully consider purchasing materials for work and purchase through approval. And you can easily imagine a scene where you can quickly check whether the materials have been shipped using the same B2B site on your smartphone. In order to respond to such changes in user behavior, multi-device support that can be used on various devices is required.

In 3-6, I will introduce what you should consider in order to create a website that responds to these changes in user behavior.

Changes in main devices used to access websites

The main devices used by users to access websites have changed roughly as follows.

  1. PCs are mainstream
  2. Smartphones and tablets are now being used along with PCs
  3. Smartphones are mainstream
< p> At a time when there were no smartphones or tablets, it was common to view websites on a personal computer. Next, mobile devices such as smartphones and tablets appeared, and as more people used them, it became necessary to support smartphones and tablets.

Step 3-6 Website Creation What is important multi-device support?

The multi-device support that was implemented at that time was a method of preparing different web pages for each device and displaying the page for personal computers according to the width of the screen of smartphones and tablets. The latter method, which allows the display to fit the width of the screen, is called responsive. It is used in many sites because it can support each device with one source code.

And now, smartphones are the main way to use the web. As shown in the following figure, according to a LINE survey (internet usage environment fixed-point survey in the first half of 2021), 94% of people who are actively using the Internet are using smartphones. 53% of the respondents said they only use smartphones.

Currently, smartphones are the mainstream environment for using websites, and many people are accustomed to the interface and speed of smartphones. Now it's easier to use a website that can be used like a smartphone even on a personal computer. At present, when it comes to multi-device support, it is a good idea to set a basic policy of “creating a website targeting smartphones”.

Points for Creating Web Pages Targeting Smartphones

When web use on personal computers was the mainstream, there was a global menu (global navigation) as shown on the left in the following figure, and side navigation There were many websites that said they had one or two. However, today, as shown on the right side of the next figure, there are many web pages that can be read by scrolling at once without the side navigation.

The hamburger menu was created to allow the global menu to be used on smartphones and tablets at the time when smartphones and tablets began to be used along with computers. Recently, the number of cases where this menu is displayed as it is on the personal computer side has increased.

In addition, there were many contents that were just responsively adjusted from the PC version. In that case, the problem that the amount of characters is too much for smartphones remains. As a provisional measure, a long title that spans multiple lines is automatically omitted in the middle and displayed with the symbol "...".

However, if it is abbreviated with ..., the meaning of the title cannot be understood by users viewing it on a smartphone. You are missing information that you want to provide to the user. In order to avoid such a situation, it is necessary to be conscious of smartphone first, adjust the amount of sentences from the beginning, and express concisely.

Users who are accustomed to the convenience of smartphones want to be able to quickly reach the information they want. For example, people who want to buy a product should be able to go directly to the product information page, and people who want to get a job should be able to go directly to the job information page, as shown in the image below. In other words, instead of following from the top page, it is necessary to have a structure that allows direct access to the relevant page.

This structure also matches SEO, where you can quickly reach the relevant page as a result of keyword searches from SNS and search sites.

Furthermore, as I introduced in Step 3-3, "What can a CMS do?" It will be possible to distribute the most suitable information for each.

In this way, centrally managing information (managing multiple pieces of information and data in one place) with a CMS has the advantage of making it relatively easy to support multiple devices in the future. Currently, smartphones are used, but wearable glasses, watches, and game consoles may become mainstream in the future. At that time, all you have to do is create a new component for the device that has become mainstream, so you can quickly respond to changes in user behavior.

◇◇◇

In 3-6, I explained the points of multi-device support. In 3-7, we will introduce how to manage content materials.

Yuichiro Shiraishi

Kinotrope Co., Ltd. Consulting Department Deputy General Manager Director, Copywriter

Joined Kinotrope after over 25 years of editing professional magazines. He supervises more than 500 "resulting" contents per year. He also serves as a lecturer at corporate seminars and large-scale seminars.