▲Mobile Web Front-end development

This article is about to enter the oath of mobile Web development. As a layman in the mobile field, after this period of contact, I found that front-end development has become increasingly deep! Enter the topic.

I will discuss mobile Web Front-end development from the following aspects: resolution, screen, mobile browser, design concept, and responsive web development.

Resolution

Mobile phone resolutions are much more complex than PC resolutions. Are there various resolutions? What is the difference in size? This brings a lot of trouble to page creation to a certain extent. Therefore, such factors must be fully considered. I think about it from two aspects:

1) Product resolutions of mainstream mobile phone manufacturers on the market. After investigation, we found that the current mainstream mobile phone resolutions are 480*800 pixels and 320*480 pixels, while 1280*720 pixels (720 p) will be the next trend. These are rough statistics. It takes a lot of effort to have accurate data, which is the work of data analysts.

2) The resolution of the devices in the target group of the project. The project target group is the user's mobile phone resolution. To a certain extent, it is more important than the first point. It determines the direction of project development.

Screen

Currently, mobile phone screens on the market are divided into two types: normal screen and Retina screen. The biggest difference between a Retina screen and a normal screen is that the display performance is better and the image is more delicate. Apple started to use retina screens from iPhone 4 and new pad.

The pixel density exceeds PPI. Taking iPhone 4 as an example, the pixel density is calculated as follows:

1) Resolution 640: 960 =

2) obtain the diagonal line of the theorem, with the root number 22 + 32 = 3.6.

3) pixel density (960*3.6)/(3.5*3) = 326, of which 3.5 is the screen size and 3 is the final value corresponding to 960. There are errors in the calculation process, so don't worry too much.

The appearance of the Retina screen introduces a new concept: "device pixel ". Device pixels must be differentiated from CSS pixels. For more information, see Zhang xinxu's article titled compatibility between retina new iPad and general-resolution iPad pages. I have benefited a lot from the detailed description.

Mobile Browser

Browsers have gradually switched from traditional desktops to mobile phones, and competition is becoming increasingly fierce. Currently, mainstream mobile browsers in the Chinese market include: UC, Baidu, ou Peng, QQ, dolphin, Safari, and chrome. These browsers are based on the WebKit kernel and there is no compatibility problem, at the same time, HTML5 and css3 are well supported. Therefore, we should boldly apply HTML5 and css3 technologies.

Design Concept (3 s principles)

The 3 s principle refers to simple, small, and speedy. This is a summary of a foreign company. For more information, see mobile Web Design: best practices. I agree with these three points. What we want to talk about is that speedy should be regarded as a result in a strict sense, rather than a rule. In terms of web design, I have always advocated simple style: convenient operations, refreshing interfaces, friendly prompts, less and smaller images, and streamlined code, I believe the website will become Speedy.

Mobile web development should give priority to the inherent features of mobile phones. First, the mobile phone screen is smaller than the desktop screen, so there is not much content to display on the full screen. This requires us to select a proper font size during page design, we also need to consider the priority of the document content to display important content in front of the page. Secondly, the interaction mode of mobile phones allows us to rethink the design of page elements. The desktop web is dominated by mouse operations, so that the operational scope is very accurate. Mobile web is dominated by touch operations, and the operation scope of fingers is relatively broad, which is reflected on the page. I use buttons as an example, for low-resolution mobile phones with small screens, you can set the button. button {display: block;}, which can be set. button {display: inline-block;}. This is the button. For the link list, you need to set the appropriate Row Height to avoid Operation errors because the clickable range is too small. Finally, the picture is shown. Mobile phone development should try to avoid the use of images, such as rounded corners, shadows, and gradient, which were previously hard to achieve on the desktop. Mobile Phone development does not exist and can be fully implemented using css3, therefore, when designing the PSD, the designer will make the effect, but do not have to give it when cutting the graph.

I think all the design concepts are put forward to improve the user experience. When our target group is determined, how to improve the user experience is the starting point of our design.

Responsive web development

This is not a groundbreaking technological change, but when I understand it, I still think it's amazing. Simply put, the responsive web design uses three technologies: Media query, stream layout, and liquid image to combine them to create pages, so that pages are not only on traditional desktops, different resolutions can be perfectly displayed on tablets and mobile phones. To do this, I think it is not difficult. Please continue:

1) preparations:

A) Plug-in installation: Window resize. You can click. As follows:

 

B) Editor installation: subline text2 (HTML5 is supported, and css3 extension fails to be installed) and topstyle5 (css3 is supported ).

C) identify the differences between the view and the screen. The viewport is the content display area of the browser, and the screen is the physical display area of the device. For example, we generally use width to indicate the width of the view, while the screen width is represented by device-width. I believe that kids shoes who have made mobile phone pages often see this Code:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Width = device-width indicates that the page width is set to the same as the screen width.

D) responsive design creative website collection: http://mediaqueri.es. There are many responsive web design websites for your reference and learning.

2) journey ing:

E) responsive web design-media queries:

To reduce HTTP requests, I think it would be a good option to perform media queries in the CSS style sheet, rather than using link for loading in the header part of the page. The media Query format in the style sheet is:

@ Media screen and (max-width: 960px ){}

The internal style of braces. This statement is equivalent to a judgment statement. There are two conditions: one is that the maximum width of the view is not greater than 960px, and the screen represents the display. If both conditions are met, the style in the braces is called.

F) stream layout of responsive web design:

Streaming layout is performed as a percentage. The most important thing is to keep an eye on the element's parent layer. All elements are based on the parent layer. Streaming layout is used to perfectly combine with media queries to form a smooth Layout Change jump effect. Generally, most styles in media are width, padding, margin, font-size, and line-height.

G) responsive web design:

To implement a liquid image, add the following code: IMG {max-width: 100% ;}

Responsive web development is not very difficult, but the previous page only needs to be provided by the artist. Now we need to provide more than two pages, which increases the workload accordingly. We recommend that you first have the idea of stream layout to reduce hierarchy nesting. I will post my own test page at the end of the article. You can see that the page comes from the testing. For reference only. There are too many theories in the article, and there is no way to do it. If it is often written, it will be biased towards the theory, haihan. Thank you for reading!

Test page: RWD