10 tips for PHP Web websites to adapt to mobile devices

[Editor's note] Compared with the desktop, users are increasingly accessing web pages from mobile devices, which is nothing new. However, developers still need to work hard to make the site better adapt to current mobile devices. At the same time, according to Google's recent announcement, it may punish those websites that cannot provide a good user experience for mobile device users.
[Editor's note] Compared with the desktop, users are increasingly accessing web pages from mobile devices, which is nothing new. However, developers still need to work hard to make the site better adapt to current mobile devices. At the same time, according to Google's recent announcement, it may punish those websites that cannot provide a good user experience for mobile device users.

[Editor's note] Compared to the desktop, users are increasingly accessing web pages from mobile devices, which is nothing new. However, developers still need to work hard to make the website better adapt to the current mobile devices. At the same time, it can be seen from Google ’s recent announcement that it may punish websites that cannot provide a good user experience for mobile device users. It also forces developers to work hard in this regard. This article introduces some tips that can help you better provide a good mobile user experience.

The following is a translation:

Recently, Google employees have suggested that websites that fail to provide a user-friendly experience will be punished by search traffic from Google. In recent years, Google has introduced changes to multiple algorithms that have hurt traffic to many websites.

However, Google's punishment should not be your main motivation for trying to make the site friendly. Your main motivation should be to provide your users with what they want and provide them with the best user experience. So make sure your website is friendly to mobile users, not Google.

Choose a mobile solution and focus on better meeting the needs of website users
There are four main ways to provide users with a better mobile user experience:

1. Create a separate mobile website

If you want to provide a mobile user experience that is different from the desktop website user experience, create a separate website so that mobile users have only one choice.

This solution may make sense in some situations, but because the process is similar to building a brand new website, many web developers avoid this approach.

Since Google considers such a mobile user site to be a different site from the desktop site, you should set a rel = alternate link tag on the desktop site, similar to:

The mobile site page should include rel = canonical link tags, similar to:

2. Dynamic services

The existence of different URLs for mobile and desktop websites can cause some confusion for users. On the other hand, it is not a reliable method to judge whether the user device is a mobile device only from the screen width.

So you may consider dynamic services, which can serve mobile and desktop websites with the same URL, just provide different HTML according to the user's device.

This method is a bit complicated, because you need to be able to detect the type of device used by the user, such as User-Agent (header sent by the browser to the server). You can implement it in PHP (variable $ _SERVER ['HTTP_USER_AGENT']), and then you need to query the database to determine the device size to calculate whether the device is a small screen.

When you provide different HTML for different devices through the same URL, you also need to send an HTTP Vary response to let Google Robot know that your website depends on the user's device, and its work is different. You can use the following method to achieve:

  Header ('Vary: User-Agent');
?>
3. Respond to Web pages

Responsive Web page refers to the adaptive adjustment and change of the page in the Web page size. This means that if a web page changes its size, the page layout using the same HTML code will adapt itself to some extent.

In practice, not only the latitude of pages appearing on screens of different sizes is different, but these pages also need to adapt to changes in device orientation. For example, when the user rotates the device, if gravity sensing is turned on, its page will change accordingly. Because the width and height of the screen have changed.

This method is called response because it uses the same HMTL to dynamically adapt to screen changes, so it is very flexible. This response is usually implemented using CSS media queries. Here is an example:

.c640 {
display: block;
}

@media (max-width: 640px) {

.c640 {
 display: none;
}

}
4. Mobile applications

This method can be said to be a complementary solution, which is included in mobile applications that can be installed on user devices and has the ability to utilize local devices. And there are some native features that users cannot get by visiting your website, such as sending some push notifications to their devices.

Ten Website Response Tips
1. Start with the most visited pages on the site

If you use a common content management system like Wordpress, your job will be much simpler, because you only need to change the theme through a response site.

If you have a website based on custom development, such as a PHP class, you will need to do some custom development for mobile users.

If you have a large website with thousands of pages, you have to adapt to the PHP class. Your work will be huge and may take months to complete. So you need to set a standard for those pages that affect more users.

In the case of PHP websites, it is easy to determine that the pages that affect more users are the packages posted on the website because they gain more visits. Beyond that, the other most visited webpage types are not very clear.

Therefore, you need to consider the Google Analytics report of the site. If you are concerned about Google launching algorithm updates and penalizing non-mobile friendly sites, then it is best to look at webmaster tools reports, especially Search Queries and Top Pages.



You can use the PHP Webmaster Tools API class to extract the page reports you need.

2. Use browser developer tools to preview your page on a small screen

Once you have found the page you are dealing with first, you need to take control of the issues that may be present and prevent them from appearing on the screen of your mobile device.



Modern browsers (such as Chrome) provide tools to preview pages on different screen sizes.

3. Fit the window to the screen size

At this point, the first thing you need to do is to define a window that can be adjusted according to the screen size. (A window is the visible part of a page.) If a page is too large to fit the current screen resolution, a scroll bar may be required.

The definition of the window can be realized by the window width matching the device width, and the window parameters can be specified by HTML tags. In the following example, we define the window width to match the device width. The initial zoom range starts from 1. This means that mobile browsers will adjust the page width scaling to fit the device width.

4. Start with header and footer

When you define the window by the window width matching the device width, you may notice that the page for the desktop does not fit the screen of a small mobile device, and overflow problems will occur. This is what you need to build the HTML response. Normally, all websites have pages with page and footer HTML. You can start here, because changing these pages and footers will affect all pages.

5. Use the menu button to shrink the navigation bar

For PHP websites, you can use two horizontal menus: one is common navigation, and the other is used to record user operations.



Horizontal menus can take advantage of the available horizontal space, so basically all responsive pages have two versions of their navigation menus: one is a wide screen, the entire menu option can be displayed horizontally, and the other is a menu search button plus one search bar.

The website uses media queries to display a single type of navigation (or another). The following code demonstrates a simplified version of this function implemented in HTML and CSS:

Desktop menu here


Mobile menu here

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
}

@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}
Menu buttons built with PHP classes use a good trick to avoid the need for JavaScript. It uses a hidden form checkbox to control the visibility of the drop-down menu.

The following is a simplified version of such menus rendered using HTML and CSS:


 
 


  

 All class groups


  
 Latest entries


  
 Top 10 charts


  
 Blog


  
 Forums


  
 Help FAQ


 

 

  Icon Image here
 

.menu-items {
 position: absolute;
 z-index: 1001;
 background-color: # 103754;
 border-color: #cccccc;
 border-style: solid;
 border-width: 1px;
 padding: 4px;
 top: 32px;
 line-height: 36px;
}

.menu-items a {
 color: # C3F0FF;
 font-weight: bold;
 text-decoration: none;
}

# navigation-menu {
 display: inline-block;
 padding: 6px 10px 0px 10px;
}

# navigation-menu .menu-items {
 display: none;
}

# navigation-button: checked + .menu-items {
  display: inline-block;
}

# navigation-menu input [type = "checkbox"],
# navigation-menu ul span.drop-icon {
 display: none;
}
6. Sacrifice unimportant page elements

After completing the header and footer, you still need to continue your pace, shuttle through each type of page on the website, and follow the page access priority (refer to the previous article).

Use browser development tools to preview the page on a small screen and reduce the width of the window splitter until the page elements overflow the window.



At this point you need to find out which unimportant page elements you can use CSS styles to sacrifice and hide them through media queries.

The following demonstrates that the media query definition is gradually reduced to hide different page elements:

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}
@media (max-width: 499px) {
.c499 {
 display: none;
}
}
@media (max-width: 799px) {
.c799 {
 display: none;
}
}
@media (max-width: 640px) {
.c640 {
 display: none;
}
}
@media (max-width: 360px) {
.c360 {
 display: none;
}
}
7. Use Google Page Speed Insights to resolve outstanding issues

What are the criteria for Google to verify that a website is mobile friendly? Displaying the right visible content on the window is just one of the criteria, and there are other things that are not easy to evaluate, such as the distance of the contact point (such as links and buttons).

Fortunately, Google provides a tool to help us discover problems that need to be fixed, which is only part of the Google Page Speed Insights tool.

You only need to enter a URL of the page you made, it will show you a level (0% -100%), let you know the availability level of your page on the phone, it will also display the current problems of the page .

8. Image adapts to page width limit

You may encounter such a problem that there are many picture elements on the page that needs to be adapted to the small screen. At this time, you have two options, one is to sacrifice the picture element as mentioned above, and the other is to automatically adjust the width and height of the picture. This method is suitable for the available space.

The second method can be achieved by setting the width of the picture to 100% (or other percentage), and then setting the height of the picture to automatic to ensure the proportion of the original picture. As shown in the following code:

@media (max-width: 55em) {
.blog-post-body p img {
 width: 100%;
 height: auto;
}
}
Another aspect related to images is that if your menus and icons use small images, when the browser scales the window to match the width of the device, those small pictures will look very large, if the resolution of those pictures is very low It will even destroy the quality of the entire page. One way to solve this problem is to use high-resolution images and set a smaller value to match the device.

9. Secure "fill" links and buttons around

Another typical problem that Google Tools may report is that your links or buttons are too close to each other, which can easily lead to incorrect operation. You can use CSS style sheets to "fill" the space for these links and buttons, Here is a simple example:

.safe-padding {
 padding: 2px;
 line-height: 200%;
}
10. Use Google Webmaster Tools: Mobile Usability Report

Google provides us with another tool on the Google Webmaster Tools website: Mobile Usability. It can give you a concept of the process, and any problems you might or you think haven't been resolved.



This tool shows different types of problems: touching elements too close, small font size, fixed width windows ... It can give you the total number of pages that have these issues and the URL. However, the tool will not report these in real time, and the actual report will be delayed by about a week, so there may be problems you have fixed in its report. Nevertheless, it is also very useful, there will be a link to any page question, you will be able to see it at a glance.

to sum up
For web developers, adapting the website to mobile devices is a tedious and boring task, far from the excitement of front-end work. However, this is a required task.

Mobile adaptation work is still going on, and only some pages are adapted to mobile devices, so we will see more changes in the future.

Anyway, this article is to share some useful information for those who are in the process of adapting their website to mobile devices. If you have gone through a similar process, or you have other methods that are better than the tips shared in this article. You can leave your opinion and share your experience.

English link: http://www.phpclasses.org