Including website code, page design, and website optimization, especially for HTML5 websites. Hope you have some experience. Including website code, page design, and website optimization, especially for HTML5 websites. Hope you have some experience. Reply: Because I have been studying this recently, I have sorted out the following and written my views.
Mobile website development policy
First, we need to determine the direction of the website, or the policy. Basically, mobile websites have three options:
1. A responsive website, that is, the domain name and URL of the website remain unchanged, but the page size and content are automatically adjusted based on the browsing device, which is mainly implemented by HTML5 and CSS code.
2. The domain name and URL of the website remain unchanged, but are determined based on the user's device. Different pages are provided to the user, that is, the URL remains unchanged, but the HTML page changes.
3. enable new subdomains such as http://m.domain.com
, Based on the user's device to determine, and then jump. Here, we will first bury a foreshadowing. The jump method is very important and will be detailed later.
Here, I would like to emphasize that the first method is the best one. However, this method also has many challenges. The third method is widely used in China. This method is not very good in terms of website optimization and cost, but the objective reality is quite common. In addition, the network speed of mobile networks in China is still relatively slow, so mobile websites need to be streamlined. In this way, it is certainly not feasible to adapt desktop websites.
1. problems faced by the first approach are the problem of HTML5 and CSS support by non-smart machine browsers and Internet Explorer 6 on desktops.
2. in the second way, I am cautious, because I will worry about how the website handles Baidu spider, because Baidu Spider does not distinguish between mobile and desktop spider, in this way, problems may occur in determining the jump, which adversely affects the ranking and weight of the website.
3. The third method is actually a helpless choice, but it is definitely not the best technically. O (Clerk □clerk) o
Many of the following are suggestions for websites using the third method. In fact, the biggest challenge of the third method is that the search engine spider correctly judges our website as a mobile website.
Redirect Mode
HTTP redirection and Javascript redirection can be performed based on the user's access to the device. HTTP redirection is usually called 301 and 302 redirection. However, we recommend that you use 302 redirection. If the search engine spider has a problem in page judgment and cannot accurately determine whether it is a mobile website, it is highly risky to use 301 redirection. Javascript redirection is not very friendly for some search engines.
If the search engine spider is inaccurate, it is impossible to determine whether it is a mobile spider, let it return to the adapted version of the HTML version of the website, you do not need to jump back to the desktop version.
URL Planning
It is best to keep the Mobile End URL planning consistent with the desktop end, except for the previous domain name. Such as: http://www.domain.com/abc.html
And m.domain.com/abc.html. Note that do not add many trace parameters to the URLs of mobile terminals. Use standard and simple URLs to remove parameters unrelated to the page content, such as parameters used to differentiate mobile phone models, access users, and facilitate statistics. (If you want to add parameters, you can use other methods .)
When we help the search engine determine that we are a mobile website, there are two main methods. We recommend that you use them at the same time.
DOCTYPE Declaration
The DOCTYPE declaration helps search engines identify whether the page is suitable for mobile browsing.
The Declaration is located at the beginning of the documentBefore the tag. For example:
The following DOCTYPE can be used on the mobile phone page of The xhtml protocol:
Http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
The following DOCTYPE can be used on the mobile phone page of wml protocol:
Http://www.wapforum.org/DTD/wml_1.1.xml">
The DOCTYPE of the HTML5 protocol is:
This section is taken from Baidu's mobile optimization guide v1.1. It should be noted that HTML5 websites are easily determined by search engines as responsive websites, that is, a website can adapt to different browsing devices. Therefore, it is best to add Label.
Tag
Tag, which must be annotated on both the mobile terminal and the desktop. In this case, you need to ensure that the website URL planning on the Mobile End is consistent with that on the desktop end.
For example:
The desktop page can be written as follows:
Pay attention to adaptation. Pay attention to the page layout. I have encountered many problems during development. At the beginning, there were some compatibility issues. html5 had less contact with css3, so there were various problems.
In addition, there is a problem with the user experience. The font size and image location should be taken into consideration. I have also played mobile websites ....
Let me talk about my development experience.
I. Responsive layout:
Everyone is talking about this... That's really bad. Not explained
Ii. Make good use of CSS3 and what elastic boxes are there. Deformation. Transition.
3. Use fewer images. It can be done with CSS. Use CSS. CSS3 is very powerful. If your design draft is well designed. You can directly use CSS3PE to generate the corresponding CSS3 style.
4. Use json to transmit values, and use a less
5. Page depth .... Cough and cough .. I forgot my major. Is not too deep... Point one into one... I cannot go back to the homepage.
That's all .. Now, I think about it .. Go to dinner
