谷歌Web中国开发手册：1目的&夹

原版的：https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/

该网站的第一个多屏幕适配

如今有一系列的智能手机和大屏幕显示设备（甚至是电视），所以我们须要学习如何开发一个能够在这些设备中都表现良好的站点。

多屏幕适应的开发经验并非那么难。依据这个系列的教程。一起来做一个样例：

https://www.udacity.com/course/cs256

CS256 Mobile Web Development course 能够在不同的设备中表现良好。

CS256 这个站点提供的教程文件夹：（临时不知道和谷歌Web开发手冊有关系不~）

后面会把翻译好的内容的链接更新到这个页面。

What Will I Learn?

Projects

Design and build a mobile app that takes advantage of touch screen functionality.

Syllabus

In this course, you will learn how to build web experiences that adapt to the different screen sizes and capabilities that mobile devices offer, and how to scalably optimize media for mobile and desktop. We will cover programming touch interaction, as well as how to optimize form field input for mobile devices and use APIs like geolocation and the accelerometer, and ensuring your web experiences work great when network conditions are sub-optimal. Finally, you’ll gain the tools to investigate performance in mobile applications, with a strong understanding of mobile networking, battery usage patterns and optimizing paint techniques to build smooth animations on mobile.

Lesson 01: Syllabus

We’ll start with a high-level overview of the course and what to expect in it. We’ll also go into more depth on what we mean by mobile web development, and why you should care about it.

Lesson 02: Mobile Development Tools

Workflow and tooling is incredibly important for building great web apps, and this carries over to mobile web development. This lesson will show you how to use the Chrome Developer Tools to develop for the mobile web.

Lesson 03: Mobile UX and Viewport

Designing for the mobile web is all about a smooth user experience. This lesson will get you thinking about how to achieve that on mobile, and we’ll introduce the first of many tools you need to achieve this: the viewport.

Lesson 04: Fluid Design

Mobile means lots of different devices and form factors. We’ll discuss how to make your site responsive, clean, and user-friendly on multiple devices and layouts.

Lesson 05: Media Queries

Sometimes different devices call for fundamentally different layouts. This lesson will teach you how to achieve this using media queries.

Lesson 06: Responsive Images

Media requirements are different in mobile - network constraints and very high resolution screens set up a conflict that can be challenging. We’ll talk about how best to integrate media into your mobile web applications, and adaptively scaling images based on the environment.

Lesson 07: Optimizing Performance

Users expect a fast, seamless experience on mobile. We’ll go over optimizing various performance metrics to improve that experience, such as network, cpu, rendering, and battery performance.

Lesson 08: Touch

Touch input is fundamentally different from mouse input, and requires you to think about your user interactions differently. We’ll go over UX concerns with touch-based interaction, and how to design user interactions that work across devices.

Lesson 09: Input

Using a keyboard on mobile is awful. We’ll discuss ways to improve it, using semantic input for form data, and other user input options on mobile.

Lesson 10: Device Access

Mobile devices have a full array of sensors typically unavailable on desktop. We’ll talk about camera access, geolocation, and other sensors and feedback you have access to on mobile.

Lesson 11: Offline and Storage

It’s an unfortunate reality that mobile users aren’t always online. We’ll go over using the local cache as well as local storage APIs to give your users a great offline (and partially-online) experience as well.

Lesson 12: Wrap-up

We’ll finish up the class by talking briefly about other topics to consider, such as app experience, monetization, deployment and distribution. We’ll also point you to other resources to look at moving forward in your career.

终于成果

当你完毕这次课程之后。你也能够开发一个响应式的登录页面

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd293a2s=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />