The difference between a mobile website and a regular website

1. Content First

The resolution of the phone is much smaller than the resolution of the computer, so only the most important content is displayed on the mobile page. The first page of Ctrip and the homepage of the mobile version are shown.

2. Vertical browsing instead of horizontal browsing

As shown in the normal Site page, the navigation bar is horizontal, and in the mobile version of the page, the navigation bar (function label) is vertical.

3. Navigation bars, labels and hypertext

On the phone, the user mainly touches the screen with the finger to operate. For user-friendly operation, the Web page should try not to use hyperlinks, but more use of navigation bars, labels and buttons.

4. Picture

In the mobile site design, should reduce the use of pictures, for two reasons: first, some mobile devices do not support the same as traditional Web site display mode; second, the mobile screen is small, the display content is limited, in addition, excessive display content will reduce the speed of mobile design.

5. Global Navigation and contextual navigation

In a desktop site, you can use a variety of navigation methods, such as global navigation and contextual navigation. Mobile sites use global navigation with minimal situational navigation.

In mobile sites, a limited screen of mobile devices determines that global navigation and contextual navigation should be reduced. However, the lack of global navigation and contextual navigation can cause users to get lost, so when building mobile content, you should minimize the hierarchical relationship so that users do not have to dig too deep to find the information they need, as designers should let users find their own information before they get lost.

6. Scroll bar

Mobile browser does not have scroll bar, so in the Computer browser where the scroll bar in the mobile browser will not necessarily be able to display as expected, the drop-down list in the input field can be displayed on the desktop, but only the first few options on the phone, you need to scroll to see the items are not displayed at all.

7. The mobile browser does not support certain CSS properties

Example: position:fixed

If you need to display the top bar, bottom bar on your phone screen, it is cumbersome and needs to be done through Css+javascript.

The difference between a mobile website and a regular website