The difference between mobile website and computer website
Mobile phones and computers are very different in terms of browsing and operation, which also determines the difference between mobile websites and computer websites. Compared with computer websites, mobile websites mainly include the following aspects:
1. content first
Computer websites can have a resolution of 1024*768, while smartphones only have a resolution of 320*480. How to design at such a small resolution without reducing the user experience is very challenging. Computer websites often contain a wider range of content, while mobile websites only contain some main functions and features that suit the usage context. Mobile websites should present the content and features that users need most to users through mobile devices. Some site content, information architecture and screen layout are designed with a deep understanding of customer needs.
2. Vertical browsing replaces horizontal browsing
Horizontal navigation is a widely used navigation method when computer websites present data structures and data content. Users can click on different site links from left to right to browse. Mobile websites use vertical navigation instead of horizontal navigation.
3. Navigation bars, tags and hypertext
Hyperlinks are the main part of websites. However, we rarely see hyperlinks on mobile websites. It's not that there are no hyperlinks in mobile websites, but they are replaced by some navigation bars, tags, buttons, etc. Users use their fingers to operate mobile devices is one of the reasons for vertical navigation. On a computer, moving the mouse and clicking on a hyperlink is an ideal way to view information, but on a mobile device, opening a hyperlink by touching the screen with your finger is not so easy. Users can easily activate a link and enter a new page, but this is not the page the user expects, and if so, it will produce a very poor experience. Fitts 'Law tells us that the time it takes to use a pointing device to reach a goal has a moving relationship with the distance between the device's current position and the target position, as well as the size of the target. On some large mobile sites, navigation bars, tabs and buttons attract more attention.
4. graphics
On the web page, we often see some promotional, marketing or navigation graphical information. Designers often need to design some promotional or marketing graphics, company logos, etc. In mobile website design, these graphics should be reduced for two reasons: First, some mobile devices do not support the same display methods as traditional web sites; second, mobile screens are small and display content is limited. In addition, too much display content will reduce the running speed of mobile designs.
5. Global navigation and situational navigation
In computer websites, various navigation methods can be used, such as global navigation and situational navigation. Mobile websites use global navigation and very little situational navigation. In mobile websites, the 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 make users lose. To this end, when building mobile content, hierarchical relationships should be minimized, so that users can find the information they need without digging too deep. As designers, users should find their information before they get lost.
6. scroll bar
Mobile browsers do not have scrollbars, so places where scrollbars appear in computer browsers may not be displayed as expected on mobile browsers. The drop-down list input field in the figure below can be displayed normally on desktop computers, but on mobile phones Only the first few options can be displayed, and items that need to be scrolled to see cannot be displayed at all.
7. Mobile browsers do not support some css attributes
For example: position: fixed
If you need to display top bar and bottom bar on your mobile phone screen, it will be troublesome and you need to use css+javascript to achieve it.
© Website copyright and disclaimer
1.[honmau Media] independently owns the copyright of all materials on relevant pages of this website;
2. No one is allowed to copy it without the express written permission of [honmau Media];
3. The articles that do not indicate "honmau Media" on this website are all from the Internet and are only for everyone to learn and refer;
4. If there is any infringement/violation/irregularity, please contact customer service QQ or email to delete it, please understand;
5.[honmau Media] reserves the right to correct, modify and update this statement at any time.legal notice
English
简体中文
繁体中文
