Tips for developing mobile pages: a case study

In today's increasingly popular smart phones, web design must take into account the requirements of small-screen smartphones. Developed specifically for mobile applications is a good natural program, but after all, spend energy, but also need to be developed and maintained for different devices.

Developing a mobile web page is another good option. This thing looks simple, but there are many details and doorways. Useit website a recent article on the mobile version of webpage design is worth considering.

Take this article for an example of allkpop.com, a site that covers Korean pop stars. Allkpop mobile version of the page is this:

AllKpop did several things

First, the content, Useit's survey that the killer application on the phone is time-consuming (this can be explored)

Second, a special mobile version of the page, even if http://www.aliyun.com/zixun/aggregation/10963.html"> Opera such a browser can optimize the page for mobile phones, mobile web page is not as good as a dedicated experience .

Third, automatic detection, the server automatically detects the user's device to provide a specific page, rather than set a separate address for mobile web pages.

Fourth, the information clickable area is relatively large.

Fifth, keywords in the front of the headline, because the title is longer, this can highlight the focus.

So, this web design is there any problem? In my eyes, a layman can also find some minor problems. The first is the use of space is not good, the date squeeze most of the space and is repeated; followed by the classification and tag below the title, the word is small, but not meaningful to the reader.

Let's see how Useit redesigns the web page.

The first thing that stands out is the picture, which is more intuitive than reading the text, especially for a website that reports on celebrity news. Followed by the increase in the amount of information: Remove the useless classification and labeling, key words for the reader to show the main points of the article, browse more efficient.

Useit's other improvements to the page include:

Larger touch space: the original article block touchable part of more, such as the upper right corner of the title drop-down triangle, touch a smaller range, low availability. After the improvement of the entire article color touch area, more suitable for handheld devices.

The distance between the article blocks is more compact: the reader can browse the bottommost article block without dropping down.

Full Title: This will give more information for readers to choose from.

Highlights: The name of each star in the title is highlighted.

Date as a dividing line: save screen space, more organized display.

Improve the top navigation bar: The original navigation bar, classification and search are in the upper right corner, easy to accidental touch, the improved page classification and search opened a distance, and the classification plus a text description, easier to find.

Mobile devices due to the smaller screen, the design requirements are often higher, the so-called nuances of the skills to see, this case is sufficient to prove.

The more limited design, the more you need to improve the user interface to provide the best usability. Mobile devices are a very limited design issue.

Via Useit

Source: http://www.ifanr.com/37519