Mobile Webpage Design Experience and experiences

The development of smart phones is indeed rapid. Most of my work this year is on mobile Web pages.

In the past few years, the mobile/mobile Web pages we see are limited to browser and mobile phone performance and 2 GB network speed.

Web design is nothing more than blue, black, white, monotonous interface, and the design should be as simple as possible.

 

The current situation is quite different. The webkit kernel browser is widely used in software, and the hardware is advancing by leaps and bounds. In terms of network speed, 4G is booming.

I will share with you some of my mobile Web page design experiences.

 

Resolution
This should be the biggest concern for mobile Web pages, because there are a wide variety of mobile devices and various resolutions. It takes some time to have a good browsing experience on these devices.

• Using viewport: this is already a must-have for mobile Web pages. It can set the page width, whether to allow scaling, and so on.

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

  Generally, you can set width = device-width to the screen width of the device. It can also be a specific value.

• Percentage and max (min)-width usage: mobile Web pages not only have different resolutions, but can also be switched horizontally and vertically at any time. Therefore, it is necessary to set the percentage width with max (min) -The width limit is the maximum (small) width, which can effectively adapt to various resolutions. If you have special requirements for this, you can refer to the next one, "use Media Queries"

• Using Media Queries is part of responsive web design.

• <link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">

  This means that the style1 style can be used in the screen width greater than 640px, or written inside the style, for example:

  @media screen and (min-width: 640px){        .d1{background:#ccc;}        }

Response content and Cache
Although 4G is booming, it is undeniable that the network environment of mobile devices has limitations, so it is necessary to deal with this.

• Use manifest Cache

  Add manifest to html. The file format is as follows:
  Cache manifest # offline content CACHE: Script/jquery. jsScript/gameconfig. jsImage/home.png Image/logo.png # NETWORK that always accesses the NETWORK: * ## access BFALLBACK when access A fails
  The browser caches all contents in the chache and canOffline access, As long as the file changes, it will re-read and refresh all the cache, so changing the comment is a good way to update the cache.
  Note that
  1,The current webpage with manifest added will also be cached.Therefore, we recommend that you cache pages and obtain dynamic page content using ajax. Therefore, pay attention to this issue when designing a mobile website project.
  2. Adding iframe to the page and then referencing manifest on the sub-page to cache resources without caching the current page content is invalid.

• Try to use css styles instead of images. Because mobile browsers support css3, many images can be replaced by styles in the past.
  For example, some of the projects in our company use ,:
  . Btn_red {display: block; line-height: 28px; padding: 1px 0; border: 1px solid # B81414; border-radius: 2px; background: # FF5A5A; background: -webkit-gradient (linear, 0 0, 0 70%, from (# FF5A5A), to (# FF4444); overflow: hidden; margin-top: 3px; color: # fff; box-shadow: 0px 1px # FFB5B5 inset ;}
  A triangle is the color of border. If you change the color, you can draw a triangle pointing to different directions.

  .tip_t{border-color: transparent transparent #bb0808 transparent;border-style: solid;border-width: 10px;width: 0px;height: 0px;}

  
  Arrows are stacked together with two triangles.
  ......
  Replacing images with styles not only reduces the size but also improves maintainability.

• The page displays only part of the content, prompting you to "click to expand" or "view more" and then asynchronously retrieve the content. If you do not want to open a website, the traffic will crash.

Timeline Layout
The visible area on the mobile phone side is small, and the layout is different from that on traditional web pages. Therefore, we need to make full use of the limited space to display information.

• The page process is simple and clear, and complex operations are displayed in segments as much as possible, such:
  
  Others and conclusions
  
  
  • Mobile phone tablets of many small manufacturers, and the default browser versions of some rom systems are different (a headache...), so the test work should be fully done
  • There are several new types of <input/> type in html5, such as <input type = "tel"/>. The keyboard is displayed by default when you click on the mobile terminal. You can try more.
  • This article just summarizes some of my project's considerations. If you have any suggestions or errors, thank you for your correction. You are also welcome to likes and discuss them.