Building sites for the multi-device web Google Developers English Russian

Building sites for the multi-device webYouTube↗ IA↗(long shot)
Science & Technology 35.7K views 138 likes 4 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

Hi, I'm Pete, a developer advocate at Google.

Привет, я Пит, разработчик разработчик из компании Google.

I use a lot of different devices to browse the web-- my desktop,

У использую много разных устройств для работы с Интернетом –

my tablet, my phone.

компьютер, планшет, телефон.

Now some of these sites look great

Сейчас некоторые из этих веб-страниц отлично отображаются

across all these different devices.

на всех этих устройствах.

But other sites?

А другие сайты?

Не очень.

When a site isn't optimized or designed

Когда сайт не оптимизирован

to work across the multi-device web,

для отображения на разных устройствах,

it requires panning, zooming, trying to hit those

страницы нужно прокручивать, увеличивать и уменьшать,

пытаясь нажать на малюсенькие кнопочки.

It's just no fun.

В общем, неудобно.

And those same sites when viewed on my TV

И те же самые сайты выглядят просто

can be just as awkward.

превосходно на моем телевизоре.

The buttons may be bigger, but touching my TV

Кнопки большие, но экран так не потрогаешь,

is just going to leave a fingerprint.

он будет весь в отпечатках пальцев.

It's not going to do anything.

Ничего не выйдет.

Building sites that work well on the multi-device web

Создание сайтов, которые работают на всех устройствах,

isn't hard, but it does require a shift in the way

нетрудная задача, главное – поменять

that we think about it.

образ мышления.

Small screens aren't just zoomed-in big screens.

Недостаточно просто увеличивать экран.

Instead, we need to tailor our content and styles

Нужно адаптировать наш контент и стили

for the multi-device web.

для разных устройств.

The easiest way to get started is

Самое простое для начала –

by designing for a small screen, and then building up.

разработать все для маленького экрана, а затем перейти к большим.

So let's give it a shot.

Давайте попробуем.

I've already created a page that looks great on a small screen.

Я уже создал страницу для маленького экрана.

It has all my content, the styles for the small screen,

Здесь весь мой контент, стили для маленького экрана,

and it includes the meta viewport tag.

и мета-тег viewport.

The meta viewport tag is important

Мета-тег viewport играет важную роль

because it tells the browser to adapt

потому что он указывает браузеру адаптировать

the content to the size of the device.

контент под размер устройства.

It's important to set width=device-width,

Важно установить параметры width=device-width

and initial-scale=1 to establish a one-to-one relationship

и initial-scale=1, чтобы создать отношения 1:1

between CSS pixels and device-independent pixels.

между пикселями КТС и машинонезависимыми пикселями.

Without the meta viewport tag, mobile browsers

Без мета-тега viewport мобильные браузеры делают вид,

lie and pretend that they're 980 pixels wide-- desktop width.

что их ширина 980 пикселей – это ширина экрана компьютера.

Our content looks weird because it's

Наш контент выглядит ужасно, поскольку

scaled to fit on a 980 pixel-wide display,

он настроен для дисплея шириной 980 пикселей,

resulting in a page that's just way too small.

и в результате получается очень маленькая страница.

With our viewport properly set, we now

Если viewport настроен правильно,

have our site optimized for mobile.

страница оптимизирована для мобильного устройства.

So let's make it look better on a bigger screen

А теперь настроим ее для экранов побольше,

by adding a breakpoint.

добавив точку прерывания.

A breakpoint is used to display different styles depending

Точка прерывания используется для отображения различных стилей

on characteristics of the device, like device

в зависимости от характеристик устройства, таких как

width or device pixel density.

ширина или плотность пикселей.

We can apply different styles using media queries,

Мы можем применять различные стили, используя медиазапросы,

giving us a completely responsive experience.

обеспечивающие нам полную оперативность.

Media queries only apply their styles

Медиазапросы применяют свои стили только,

if the device matches the query.

если устройство соответствует запросу.

You can either specify the query by adding a media attribute

Вы можете либо уточнить запрос, добавив атрибут media

to the linked CSS file, or directly in the CSS.

к связанному файлу КТС или непосредственно в КТС.

For most designs, you'll find the min-width query

В большинстве случаев вы увидите, что запрос min-width

to be the most helpful.

будет самым целесообразным.

Min-width rules are applied for any browser width

Правила min-width применяются для любой ширины браузера

over the value defined in the query.

больше значения, указанного в запросе.

Defining breakpoints based on specific devices,

Определение точек прерывания в зависимости от устройства,

products, brand names, operating systems, anything like that,

продукта, бренда, операционной системы и т. д.

will always result in a maintenance nightmare.

будет всегда превращаться в кошмар.

Instead, use the content to find the right breakpoint.

Вместо этого используйте контент, чтобы найти правильную точку прерывания.

Let's expand our page and see where

Давайте расширим страницу и посмотрим,

a breakpoint becomes necessary.

где нужна точка прерывания.

500 pixels looks like a good place for a breakpoint,

500 пикселей как раз подходят для точки прерывания,

so let's go ahead and add one there.

так что мы добавим ее здесь.

I've added a new style sheet with a media query

Я добавил новую таблицу стилей с медиазапросом,

that tests the browser width.

который проверяет ширину браузера.

If the browser is at least 500 pixels wide,

Если ширина браузера как минимум 500 пикселей,

then the styles in weather-large.CSS are applied.

тогда применяются стили, указанные в weather-large.CSS.

Отлично.

Now our base styles are applied on smaller screens,

Теперь наши базовые стили применяются на меньших экранах,

but on screens over 500 pixels wide,

а на дисплеях шириной более 500 пикселей

the media query kicks in, giving us

срабатывает медиазапрос и появляется

a great look for wider screens.

отличная картинка для больших экранов.

Now in addition to choosing major breakpoints,

Помимо крупных точек прерывания

it's also helpful to add minor breakpoints.

важно добавить и мелкие.

Let's tweak some little things.

Давайте кое-что немного поменяем.

For example, I've added a minor breakpoint

Например, я добавил небольшую точку прерывания

at 400 pixels that adjusts the margins and paddings, ups

400 пикселей, которая регулирует границы и прокрутку,

some font sizes, and changes the layout of a few items

увеличивает некоторые размеры шрифта и меняет расположение

to make things fit more naturally.

некоторых компонентов, так что все смотрится более естественно.

If you want to learn more about minor breakpoints,

Если вы хотите узнать больше о малых точках прерывания,

have a look at the web fundamentals site.

посетите сайт Web Fundamentals.

Now obviously, there's a lot more

Теперь ясно, что можно многое рассказать

to say about building awesome multi-device sites.

о разработке прекрасных сайтов для разных устройств.

But if you start small, add the meta viewport tag,

Но, если вы начинаете с небольших размеров, добавьте мета-тег viewport

and then resize your browser until the content tells you

и изменяйте размер браузера, пока контент сам не сообщит вам,

that a breakpoint's necessary, you're already well on the way.

что нужна точка прерывания, и вы уже на пути к успеху.

Thanks for watching.

Благодарю за внимание!

Go build something awesome.

Вперед, создайте что-нибудь суперское.

Similar videos:

Responsive images today
Google for Developers
14.6K views 179 likes 4 dislikes 25 Jun 201492% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201475% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201462% match

Using srcset for responsive images
Google for Developers
21K views 136 likes 10 dislikes 25 Sep 201460% match

The picture element for art direction
Google for Developers
14.6K views 141 likes 2 dislikes 25 Sep 201460% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201457% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201443% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201435% match

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201435% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201435% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201433% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201433% match

Fetch API (100 Days of Google Dev)
Google for Developers
31.5K views 642 likes 12 dislikes 05 Jul 201530% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201430% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201429% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201429% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201429% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201428% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201428% match

Building location-based apps with the Places API
Google for Developers
79.8K views 530 likes 22 dislikes 25 Jun 201427% match

Building a WebRTC app - LIVE!
Google for Developers
85.6K views 322 likes 36 dislikes 30 Jun 201426% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201426% match

DevBytes: Notifications in the Android L Developer Preview
Google for Developers
37.2K views 357 likes 17 dislikes 26 Aug 201426% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201426% match

Google I/O 2014 - Building great multi-media experiences on Android
Google for Developers
45.9K views 190 likes 4 dislikes 27 Jun 201425% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201425% match

Google I/O 2015 - Polymer and modern web APIs: In production at Google scale
Google for Developers
92.3K views 875 likes 20 dislikes 29 May 201525% match

DevBytes: Chrome DevTools Device Mode
Google for Developers
73.4K views 340 likes 26 dislikes 10 Oct 201425% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201425% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201425% match

Settings Privacy About Contact Donate