Google Web development best practices (I), google Best Practices

Last Update:2014-10-23 Source: Internet

Author: User

Tags samsung app

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Google Web development best practices (I), google Best Practices

This article was first seen on the github blog (http://aliqin.github.io) of the Ali communications front-end team, the original address https://developers.google.com/web/fundamentals/ (to overturn the wall ). Now that you want to go to Alibaba, you must first familiarize yourself with the environment. Since it is the best practice, you have to practice it yourself.

1. Creating website content and structure content is the most important part of any website. So let's design for the content, rather than let the design govern the content. In this manual, we first determine what we need, create a Page Structure Based on this content, and then present the page in a simple linear layout, regardless of the narrow or wide access port, all can run well.
1.1 create a Page Structure first clarify our requirements:

This section describes the area of the "CS256: mobile Web development" tutorial for our advanced product.
A form used to collect information about users interested in our products
An in-depth description and video
Images of some practical course Products
A data table that supports Product Concepts

The final effect is like the figure above. No matter what device it is, it can achieve good results. Based on the above requirements, you can write out the general structure of the page:

<!doctype html>

Google gave this code, but I still feel strange. The declaration method is html5, but each independent section does not use the section label. Instead, it uses a div and is identified by id = "section. I personally think it is better to name the id here or to have a specific meaning? After maintenance, you can easily see how the structure and style correspond. Use of headers and footer. In the code, the header is not in the header of the page, but in div # headline. Traditionally, headers refer to the content of the page header. However, in html5, the description of header labels is "A group of introductory or navigational aids .". Therefore, the standard header can be used not only as the page header, but also as an introduction to other content under the page header. Similarly, footer. 1.2 Add a title and form title to the website and the Registration Application Form is a key part of the page and must be quickly presented to the user. Only a few lines of simple code are required to add a title.
<div id="headline"> <div class="container">

We also need to fill in the form. The form is simple and used to collect users' names, phone numbers, and the appropriate time for returning their calls. All forms should have tags and placeholders (pre-value prompt information), so that users can focus on the corresponding elements, understand the content to be filled in, and help tools understand the form structure. The name attribute is used not only to transmit the form value to the server, but also to give important prompts about how users can automatically enter the form. We also added semantic types to allow users to enter content on mobile devices more quickly and easily. For example, when you enter a phone number, the dial-up keyboard should appear in front of the user.

The video and information areas for creating videos and information areas are slightly more complex, including a project symbol list of our product features and a reserved video that shows our products and services for users.

<div id="section1"> <div class="container"> Videos are usually more interactive when describing content, so they are often used to present products or concepts.

With the following best practices, you can easily integrate videos into your website:

Add the controls attribute to enable users to play videos easily.

Add a poster image to preview the content.

Add multiple <source> elements based on the supported video formats.

Add alternative text. If the user cannot play the video in the window, ask the user to download it.

Creating a site without images in the image area is boring. There are two types of images:

Content image-inline in the document, used to convey additional information about the content.

Style pictures-used to embellish the site to make the site look better; usually the background image, pattern and gradient.

The image area is a set of content images. These images appear in our products. Content pictures play an extremely important role in conveying the content of the page. They can be imagined as pictures in the newspaper.

<div id="section2"> The image is set to the same width as the screen width. This setting works well on mobile devices, but does not work well in desktop applications. We will discuss this issue in the responsive design section. Many people have visual impairment and can't see pictures. They usually use auxiliary technologies, such as screen readers, to analyze page data and then read the data in voice. Make sure that all your content images contain a descriptive alt tag, and the screen reader can read it to the user.

When adding the alt tag, make sure that your alt text is as accurate as the full description image. For example, in our example, we add "Name: Role" to the alt attribute, which gives users enough information about the author and their profession.

The last part of the add data list section is a simple table used to list detailed product statistics. Tables are only used to represent data in columns, such as information matrices.

To add a footer, most websites need a footer, displaying some terms and conditions and other things that should not be placed in the main navigation part or main content area of the page.

On our site, we link a clause statement, a contact page, and our social media materials.

<footer> <div class="container"> <p>We always need a footer.</p> </div> </footer>We have created a website outline and determined all the main framework elements. We are confident that all relevant content has been properly prepared to meet our business needs. At this time, you will find that the webpage looks quite perfect, the left side is already written but there is no style page, and the right side is already designed. Content is the most important aspect of any website. We need to ensure a sound information architecture and solid information density. Next we will design a style for the content.

2. Enable the website to support responsive web access by various devices, from small-screen mobile phones to large-screen TVs. Each device has its unique advantages, and the constraints are also true. As a web developer, people expect you to support various devices. According to the mobile first web development principle, we first start with a narrow view-like a mobile phone-and first build an experience for it. Then we can zoom in to a larger device screen. By increasing the viewport width, we can determine whether the design and layout looks normal.

2.1 Add a viewport. Even for a basic page, you must always contain a viewport metadata tag. The view is the most important part of creating a multi-device experience. Without it, your website will not run well on mobile devices. Display Browser: the browser page needs to be adjusted to adapt to the screen range. You can specify multiple configurations for the view to control the display of the page. We recommend a default value:

In the previous section, we added the so-called "content image ". These images are important for describing our products. A style image is not part of the core content, but adds visual impact or directs the user to focus on specific content. A good example is the title image of the top content. It is often used to attract users to read more products. They can be easily included. In our example, the style image is the background and simple css is enough.

#headline { padding: 0.8em; color: white; font-family: Roboto, sans-serif; background-image: url(backgroundimage.jpg); background-size: cover;}

We chose a simple background image. The image is blurred so that we won't compare the content. We let it cover the entire element. In this way, it will expand and maintain the correct aspect ratio.
2.3 set the first breakpoint
When the width is about 600px, the design starts to get worse. In our example, the line length will exceed 10 characters (the best reading length), and this is what we need to adjust. 600px seems to be a good position for us to create the first critical point, because it determines the range and relocates the element so that it can better adapt to the screen. We use Media Queries to set the specified style:

@media (min-width: 600px) {<span style="white-space:pre"></span>//your css for >600px width devices}

There is more space on a larger screen, and there is more freedom to place the content. We need:

Limit the maximum width of the design.

Modify the padding of an element to reduce the text size.

Floating form to make it side by side with the page header content.

Let the video float and surround the content.

Reduce the image size and display it in a better grid.

2.4 limit the maximum width of the Design
We only select two la S: narrow and wide: This greatly simplifies the build process. We decided to create the full part in the narrow-view and keep the full part in the Wide-view. This means that we should limit the maximum width of the screen so that the text and paragraph do not extend into a long single line and the screen is ultra wide. We select 800px as the maximum value.
To achieve this goal, we need to limit the width and place the elements in the center. In each major area, we need to create a container and set its margin (margin) to auto. This allows the screen to increase, but the content is still in the center and the maximum size is 800px. The code will not be pasted.
2.5 modify the padding of an element to reduce the text size. In a narrow view, we do not have much space to display the content. Therefore, typographical sizes and scales often need to be greatly reduced to adapt to the screen. In a wider audience, we need to consider that users tend to be larger screens, or even larger. To increase the readability of the content, we can increase the size and size of the layout, or change the padding to make different areas more visible. On our product page, we set the padding to 5% in the width direction to increase the padding of the area element. We will also increase the size of the top of each part.

#headline { padding: 20px 5%; }

2.6 adjust the element to adapt to the wide face
The narrow view is linearly stacked. Each major area and its content are arranged from top to bottom. The wide video port provides additional space for the content to be best presented on the screen. For our product page, according to the information architecture (IA), we can:

Move the form to the header title

Place the video on the right of the important feature list

Tiled Image

Expand table

The narrow view of floating form elements means that there is less horizontal space and the elements on the screen cannot be adequately placed. In order to make better use of the screen's horizontal space, we need to break the linear stream layout at the top, move the form and table items to bring them closer to each other.

#headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px;}#headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300;}#headline br { clear: both;}#headline { padding: 20px 5%;}

Allows video elements to float in a narrow view. The video is designed to occupy the entire width of the screen and placed behind the important function list. In the wide-eye mouth, when the video is behind the function list, the video becomes too large and does not look suitable. The video element needs to be removed from the vertical streaming layout of the narrow view, and should be displayed in parallel with the project symbol list of the content.

#section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em;}#section1 video { width: 50%; float: right;}

Tiled images are set to the full width and vertical stack of the screen in the narrow-view (most mobile devices) interface. This is not well scalable in the Wide-view. To make the image look appropriate in the wide eye, scale the image width to 30% of the container and place the image horizontally (instead of vertically placing the narrow view ). We will also add the border radius and box shadow to make the image look more attractive.

#section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; }

When making images adaptive to DPI, you must consider the size and resolution of the view. In the past, webpages were designed for 96 DPI screens. With the advent of mobile devices, we have witnessed the increasing pixel density on the screen, let alone the Retina display on the laptop. Therefore, images encoded with 96 dpi often look bad on high-fidelity dpi devices. We have a solution that is not widely used. For browsers that support this solution, you can display high-pixel images on a high-resolution display.

Data Table tables are difficult to properly display on devices with a narrow view, which requires special consideration. In narrow-view, we recommend that you divide the table into two rows and adjust the title and table unit to a column. In our website, an additional critical point must be created for the table content separately. Since the web page was originally constructed for a mobile device, it is difficult to remove the applied style. Therefore, we must disable part of the css of the table under the narrow-view in the Wide-view css. This presents us with a clear and consistent change.

@media screen and (max-width: 600px) { table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; }}

2.7. Congratulations. Now, you can create a simple login page for your first product, which can span a large number of different devices, different proportions of forms, and different screen sizes.

To sum up, the general principles of google web development and design are as follows:

Before writing code, create a basic information architecture and clear the required content

Always set a viewport

Move first to form Basic Experience

Once you have mobile experience, increase the display width until the page looks inappropriate and set the critical point here

Continuous Iteration

For more information, visit: http://aliqin.github.io/2014/05/20/google-web-get-started/https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/content? Hl = zh-cn

How to use Google's Web Service (google api)
However, experienced Google users have realized that Google provides additional services. Webpage buffering is one of them. It can be used to check the expired webpages and URLs that cannot be accessed. Googel also provides a well-known function, namely spelling check. For example, if you type "web servise" in the search, Google will give the search result a link asking you if you want to search for "web service ". Each of these three features (search, search page buffering, and spelling check) can be accessed through Google's Web Service API. To connect to Google to use Google's Web Service, You need to register on Google and obtain an account. You also need to download the developer kit. This suite includes a JAR file, a document, a wsdl file, and several examples. The JAR file contains the pre-built wrapper used to access the Web service. After downloading the developer kit, you only need to add the JAR file to your classpath. Before using Google APIs, you must create a Google account. After creating an account, Google will assign you a unique key code, which is used to identify you every time you call an API. Google limits the number of API calls per day for a single key to no more than one thousand. For an example of a client, you can use Google APIs to access the three methods we mentioned above. We will create a small Java application that searches Google based on the keywords provided by the command line. Listing 1 shows our Java file. Listing 1: MyGoogleSearch. javaimport java.net. *; import java. util. *; import org. apache. soap. *; import org. apache. soap. rpc. *; import com. google. soap. search. *; public class MyGoogleSearch {public static void main (String [] args) {GoogleSearch gs; GoogleSearchResult gsr; String key = "xFyor345zlIiiTqmzu5sRGHwCS2xNR1q"; try {if (args. length <1) {System. out. println ("Usage: java MyGoogleSearch/" some string/"/n"); Syst Em. exit (0);} gs = new GoogleSearch (); gs. setKey (key); gs. setQueryString (args [0]); gsr = gs. doSearch (); System. out. println ("Result:" + gsr);} catch (Exception e) {System. out. println ("Exception:" + e. getMessage (); e. the printStackTrace () ;}} GoogleSearch class implements the main functions of the above Code. This class wraps Google's Web Services in a "standard" Java class. In the GoogleSearch class, each Web service method is represented by a Java method, such as doSearch (). The parameter is not specified in the method, but belongs to the GoogleSearch class. You must specify the parameter before calling a method. In the simplest configuration search, you must at least provide the key code and query... the remaining full text>

Making money by developing a google web app
It's hard to say that Google has been promoting the Chinese mainland for a long time.]
You should also understand that making money does not make money. It depends on the fact that there is no market, and people are not used to it! Now there are a lot of Apple app Samsung app Nokia apps on the market. If you develop more convenient, easy to use, and save traffic, you can make money!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More