How can website making make mobile web pages look good and practical?

　　 1. Readability and usability are the most important

Everyone wants their website to be beautiful on every screen. However, it is dangerous to try to be too flashy in the mobile field. The high-end layout or functions that look beautiful on the desktop may not make sense for the mobile phone. In appropriate cases, it needs to be simplified. If it turns out that an element is too clumsy on a small screen, you won't regret deleting it or replacing it with more efficient work. In terms of layout, the size and contrast of mobile web design are equally important (if not more important). When reading long articles, even using high-quality mobile phone screens, it is still boring to stare at them. Make sure the text size is correct, and set line spacing and margins to help improve readability. In short, desktop users' efforts in usability should also focus on making mobile experience a great experience.

　　 2. Use available screen space

Multi column layouts are ubiquitous, but text intensive columns are often not suitable for the smallest screen. In this case, it makes sense to simply convert multiple columns to a single column. However, this column is very effective when we talk about tablet computers and even mobile phones. The point is, it's worth taking a moment to see how we can make the most of our existing screen resources. Many times, we have skipped these intermediate resolutions and only focused on the smallest and largest viewport solutions. For example, in the same view, the tablet placed vertically should be different from the phone placed in the mobile phone. A simpler way to implement this strategy is to use CSS Flexbox. When configured correctly, you can usually automatically provide the best layout for the current viewport. You may need to make some minor adjustments through media query, but it is worth making other adjustments.

　　 3. Everything doesn't have to be the same

It's easy to fall into the trap of placing a single design element in the same relative position as the mobile and desktop viewports. While the requirement for consistency is commendable, this approach can sometimes backfire on smaller screens. For example, many websites have items such as search forms or social media icons in their titles. On a larger screen, the effect is good, but it usually blocks the main content of the phone. This is especially true on auxiliary pages. Users may actually only want to read the text on the page without worrying about all the extra garbage. In addition to pasting these types of items on the site title, there are many options. You can consider filling these items into a button to display them according to the user's requirements. Or they can be part of any mobile navigation solution you implement. The same thing might apply to functions such as the sidebar. Other elements may be completely hidden. Similarly, media queries (and possibly some condition codes) can also place these items in more appropriate locations on mobile devices. Decide where you'd better go.

　　 4. Add mobile device specific functions

When considering the responsive design strategy, you can consider adding some skills to bring higher level convenience to mobile users. These projects can usually be implemented without additional effort. But they can greatly improve availability. Browsing on touch enabled devices may present challenges that desktop users do not have to face. For a person, having to scroll up from a long page to return to the main navigation is a major challenge on mobile devices. You can alleviate this situation to some extent by using the navigation function (automatically displayed when the user is detected scrolling up). Another option is to have a good "home" link at the bottom of each page. For enterprises that encourage calling, clicking the "Call" button may be a popular function. This can take the form of a traditional button, which literally means "call us now", or refers to the phone number of the hyperlink of the entire website. Essentially, you can consider all measures to help mobile users interact with the organization.

　　 5. Liquidity

Adaptive design is a powerful tool. We can use it to provide the best experience for users on almost all devices. But as designers, we must make full use of these possibilities. First, the most important thing is to ensure that mobile users can easily browse and navigate your website. From there, make the wisest design decisions about appearance and working methods. If you satisfy users, they will be more likely to come back again.