Web Design for mobile devices

Adjusting a site for the mobile environment is a huge challenge. Many of the techniques and sensory effects of web design will not be rendered intact on mobile devices, and vice versa.

Mobile devices are a good place to try new things with different limitations. Access to mobile Web pages is often not as patient as in front of a computer screen-a much smaller screen for handheld devices, and a connection to a mobile network (usually a 3G network) is still not fast enough.

Design adjustments

Navigation

Because of the limitations of the screen size, the ubiquitous menu will not be fully applied. If you apply the same menu directly to each page, the visitor must do a scrolling operation and flip the menu to see the content. It's going to be very uncomfortable. So it's only when your site has a few menu links in the top navigation that you consider placing them on each page. For this, it has to be horizontal. The solution is to put the navigation on the first page, and use one link to the first page as much as possible on other pages, or use breadcrumbs to navigate.

Content

Your content should be of the highest priority. The screen is very small, so use less pictures and stay white so that your design is as concise as possible. The connection speed of the mobile network is not fast enough to handle a large number of pictures, these images will also increase the difficulty of focusing on the reading of the main content.

Link

Anything on a mobile device gets smaller, and links are no exception. You have to make them easier for users to spot. To do this, you can leave more space around them and make the font larger. When the link is selected, be able to have appropriate feedback, such as changing the font color, increasing the underline, changing the background color, and so on, even if the link is attached to the picture. Users will be happy to see the changes that occur when they click on the link.

All kinds of screen size

Each cell phone has a different screen size, only the iphone has two kinds: vertical and horizontal. Therefore, your site should not use pixel values to fixed width, with a percentage and EMS will be better. This approach allows your site to adapt to a variety of screen sizes. Alternatively, you can limit the scaling and size of the interface by setting meta values for the mobile device's properties.

Additional examples of meta-control of mobile devices: <% @page contenttype= "Text/html;charset=utf-8"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Dtd/xhtml1-strict.dtd" > <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <meta http-equiv= "Cache-control" content= "No-cache"/> <meta name= "viewport" content= "width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0 "/> <meta name= "mobileoptimized" content= "the"/> which Width of Width-viewport The height of the Height-viewport Initial-scale-Initial scaling ratio Minimum-scale-The minimum scale that allows the user to scale Maximum-scale-Allows the user to zoom to the maximum scale User-scalable-whether the user can scale manually

Cross platform

Don't expect your site to perform the same on all mobile browser browsers, and that's a lot to do. Some browsers do not support or fully support some HTML elements and CSS properties, and the head markings are all kinds. But if you just want the page to perform well on the iphone and Android, you don't have to bother to make changes to the desktop browser's code, and all you have to do is tweak the points you've mentioned before. To test your code more on your mobile device. Some pages may not be well designed, but their code is valid and you can refer to them. Classic case

Here are some great mobile device web design, and you'll find these are very useful case shows, and the mobile interconnect is really exciting.