Web Fundamentsals Learning 1-multiple-screen-site

One of your runs on a multi-device website (Your first multi-device site)

Follow the steps:

1. Define the information architecture (information architecture) and the page structure (structure of the pages).

2. Add design elements and make it responsive, and look good on every device

Guide:

01 Create your page content and structure https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/content

02: Turn it into self-adapting https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

01-create Your Content and Structure

• Create a page structure
• add content to the page

The user enters the mobile phone number in form form, should call out the number key, convenient user input.

There are 2 types of images used in the website:

1. Content image

2. Style picture

The IMG tag must be guaranteed to have an ALT attribute so that the screen reader can better recognize that this is a picture and read it out.

02-make It responsive

Https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

Development concept: Mobile first develops a page based on a mobile phone screen, and then we expand to a large screen size.

Summarize:

In the new project development, mobile first, when it comes to the use of percent layout, especially in the case of processing forms, you can consider using Box-sizing:border-box, this property is very useful, it is easy to handle the width of the relevant elements such as input consistency problem. The next analysis uses box-sizing.