What is the essential “responsive compatible” web design for EC sites?

Are you a group that uses your smartphone when purchasing something on an EC site? Or are you using a personal computer? Are you a tablet group? ?

Needless to say, online shopping is now in an era where it is natural to use smartphones. And this is regardless of Japan or overseas. In other words, it is essential to create an EC site that supports all the devices for all devices in the domestic EC and cross -border EC in any case. Conversely, EC sites that are difficult to see on smartphones have a significant effect on sales.

In this article, I would like to look at the basic parts of responsive design!

1. What is responsive design?

In order to make it an easy -to -use site for everyone from any device, "this design for those who use it from a personal computer" and "this design for those who view it from a smartphone". It is necessary to create a site where the optimized design is displayed. Basically, the standards of designs that are easy to see on a large screen with a large screen and a vertical and small screen on a small screen are very different.

Then, you are looking at one site like this, and it is a web design that is optimized to make it easier to see by the device you see.Responsib designIt's called. And if this responsive support is good,Mobile friendlyIn other words, it is a site that can be seen without stress on the mobile screen!

The idea of ​​responsive design is to propose that "design and construction should adapt to user behavior and environment based on screen sizes, platforms, and adaptability.

(Quote:Smashing magazine | Responsive Web Design --What It is and How to USE It）

For example, the top page of Go Ride News. It will be displayed as a PC, but

It looks like this on a smartphone.

In both cases, the URL of the page ishttps://news.goriderep.com/ja/Is managed by. This is responsive support.

In addition, the original SEARCH & CO, the original SEARCH & CO, which recently developed at Go Ride, is also responsive! (It will be released soon!)

2. Advantages of responsive support

So what will be better by responding responsive?

It will be an easy -to -read and easy -to -use site even on a smartphone screen with a small screen

Everyone wants to stay on a site that can be used comfortably, right? Sites that are difficult to understand where they are, leading to the withdrawal of users = loss of sales.

If it is not responsive: The screen seen on the PC is as small as the size is small. can not see. 。 It is difficult to use. 。 。

Google gives priority to responsive sites

Google recommends responsive design to improve user experience, and sites that are responsive can be advantageous in search rankings. From the SEO perspective, responsive design is better.

If it is not compatible with responsive: The content of the site is solid, but it is not displayed at the top in search. 。 。

Only one URL is done

In the case of a site that supports responsive, both the same URL is used for both PCs and smartphones, so users will not be confused. It is convenient when attaching a store link on SNS or email!

If not compatible with responsive: URLs for PC screens and URLs for smartphone screens ( + tablet) will be used separately, making it difficult for users to understand the conductors. 。 。

Easy management for the site creation side

Both URL and HTML/CSS have one source, so there is an advantage that updates and maintenance are easier.

If you do not support responsive: If you try to update one place on the site, you need to correct the smartphone code and PC page code.

There are so many benefits for the responsive design site! But do you still see such a display in rare cases? ↓

3. Responsive design mechanism

Up to this point, what is responsive design? I talked about the rough part. From here, let's go deeper and look at the responsive design!

Responsive design configuration

I would like to introduce some differences in PC and smartphone design configurations that are often seen in responsive design.

The menu is displayed on the top / hamburger menu

In the case of a PC, the menu bar is often displayed at the top of the screen. On the other hand, on the smartphone screen, there are many patterns that the menu is stored in the icon of the three -line line, and when tapped it, the content of the menu opens. By the way, the three -line icon on the menu is called a hamburger menu!

Number of columns

The PC has a large screen size and is more horizontal, so it is natural and easy to see if each element is arranged sideways. For example, there are many textbooks next to the image, and three images are placed horizontally. If you look at this on a page that is not responsive, one column will be extremely fine, or the element will not fit in the screen ... Therefore, on the vertical smartphone screen, the elements are not placed side by side, and all the elements are written so that the elements are placed up and down in one line.

Adjustment of margins

In the case of a PC screen with a large screen, if the text is written on the whole screen, the feeling of pressure is too strong, so there are many margins in the page. However, if you take too much space on a small smartphone screen, it will be difficult to see. For this reason, PCs often have margins, but smartphones often hide the margins.

Code when creating responsive design

Now that you know what the responsive design is like, let's look at the HTML/CSS code that creates this. Broadly divide, two steps.

① Add ViewPort tag to HTML: Write the following code on the header part of the HTML file. (In the case of a website created in the HTML file)

＜meta name=”viewport” content=”width=device-width,initial-scale=1.0″＞

② Specify the conditions using media query for CSSIn CSS, specify the conditions, such as "This is the case of the screen of the PC!"

This is the media query!

@media screen and (max-width: 480px)　{ }

Since the specified conditions in this ｛are reflected only on the smartphone screen,

@media screen and (max-width: 480px)　{ img { width: 100% ; } }

In this way, the image will be displayed only in the smartphone screen only for the smartphone screen.

4. How to know if websites are responsive?

Is your site or other sites compatible with responsive? Let's look it up. There are two main methods!

Open your PC & open your smartphone!

Here is the simple and easiest way to understand. Open both smartphones and PCs and compare the screen!

From the PC, use the verification tool on Google Chrome

Have you ever used Google Chrome [Verification]? If you use this, you can quickly check what screen it will be when viewed on a tablet or smartphone on a PC. The way is very easy. First, open the page you want to verify, and then right -click.

Select the second [Inspect] from the bottom of the item that appears at that time. Then it will be such a screen.

Here, if you look at the upper left of the column where the right code is written, there is such a mark, so click there!

Then you can check the image of the smartphone screen on the PC like this!

If you haven't used the verification function, try it once!

5. summary

Did you deepen your understanding of responsive support? We have introduced various benefits in various ways, but in 2020, it is no longer necessary to respond to EC sites. If it is not responsive design, it will be directly linked to sales loss ...

And the responsive design site is, of course, can be written by writing the code from Ichi! However, using CMS such as WordPress and SHOPIFY can create more responsive sites for more easy and speedy.

---

If you have any problems with responsive EC sites, we recommend that you select SHOPIFY! If you request a production of SHOPIFY construction, go to Go Ride!

Contact Us