36
Сайты для смартфонов Ваш сайт готов принять смартпользователей? Андрей Липатцев Отдел нелинейного счастья октябрь 2014 г.

Сайты для смартфонов - Сybermarketing 2014

Embed Size (px)

DESCRIPTION

Почему и как следует создавать сайты, оптимизированные для мобильных устройств.

Citation preview

Page 1: Сайты для смартфонов - Сybermarketing 2014

Сайты для смартфоновВаш сайт готов принять смартпользователей?

Андрей ЛипатцевОтдел нелинейного счастья

октябрь 2014 г.

Page 2: Сайты для смартфонов - Сybermarketing 2014
Page 3: Сайты для смартфонов - Сybermarketing 2014

Определимся

Page 4: Сайты для смартфонов - Сybermarketing 2014

зачем это надо?

Page 5: Сайты для смартфонов - Сybermarketing 2014

1. На мобильных исследуют

google.com/think (“Mobile Path to Purchase”)

Page 6: Сайты для смартфонов - Сybermarketing 2014

google.com/think (“Mobile Path to Purchase”)

2. Исследования начинаются с поиска

Page 7: Сайты для смартфонов - Сybermarketing 2014

google.com/think (“Mobile Path to Purchase”)

3. Местоположение играет роль

Page 8: Сайты для смартфонов - Сybermarketing 2014

google.com/think (“Mobile Path to Purchase”)

4. Близость покупки играет роль

Page 9: Сайты для смартфонов - Сybermarketing 2014

google.com/think (“Mobile Path to Purchase”)

5. Исследования на мобильном → покупки

Page 10: Сайты для смартфонов - Сybermarketing 2014
Page 11: Сайты для смартфонов - Сybermarketing 2014
Page 12: Сайты для смартфонов - Сybermarketing 2014

что надо делать?

Page 13: Сайты для смартфонов - Сybermarketing 2014

или

Page 14: Сайты для смартфонов - Сybermarketing 2014

1.можно ли читать текст, не увеличивая?

Page 15: Сайты для смартфонов - Сybermarketing 2014

или

Page 16: Сайты для смартфонов - Сybermarketing 2014

2. видны ли картинки и содержание?

Page 17: Сайты для смартфонов - Сybermarketing 2014

или

Page 18: Сайты для смартфонов - Сybermarketing 2014

3. можно ли нажимать на ссылки пальцами?

Page 19: Сайты для смартфонов - Сybermarketing 2014

или

Page 20: Сайты для смартфонов - Сybermarketing 2014

4. видны ли изменения поисковику?

Page 21: Сайты для смартфонов - Сybermarketing 2014

www.example.com/robots.txt

User-agent: *Disallow: /scripts/Disallow: /stylesheets/

Page 22: Сайты для смартфонов - Сybermarketing 2014

как это сделать?

Page 23: Сайты для смартфонов - Сybermarketing 2014

https://www.google.com/safetycenter/

Page 24: Сайты для смартфонов - Сybermarketing 2014

тот же HTML+ тот же URL

+ CSS медиа-запрос

@media only screen and (max-width: 640px) { … }

Адаптивный дизайн = профит

Page 25: Сайты для смартфонов - Сybermarketing 2014

PageSpeed Insights

developers.google.com/speed/pagespeed/insights/

Page 26: Сайты для смартфонов - Сybermarketing 2014

PageSpeed Insights

developers.google.com/speed/pagespeed/insights/

Page 27: Сайты для смартфонов - Сybermarketing 2014

что не надо делать?

Page 28: Сайты для смартфонов - Сybermarketing 2014

www.example.com/www.example.com/foowww.example.com/bar

m.example.com/m.example.com/foo

m.example.com/bar

Page 29: Сайты для смартфонов - Сybermarketing 2014
Page 30: Сайты для смартфонов - Сybermarketing 2014
Page 31: Сайты для смартфонов - Сybermarketing 2014

Подытожим

учитывайте интересы пользователей12 откройте доступ к ресурсам

3 адаптивный дизайн — успех надолго

Page 32: Сайты для смартфонов - Сybermarketing 2014

что почитать?

Page 33: Сайты для смартфонов - Сybermarketing 2014

https://developers.google.com/speed/pagespeed/insights/?hl=ru

Page 34: Сайты для смартфонов - Сybermarketing 2014

https://developers.google.com/web/fundamentals/

Page 35: Сайты для смартфонов - Сybermarketing 2014

https://developers.google.com/web/starter-kit/

Page 36: Сайты для смартфонов - Сybermarketing 2014

Спасибо!

Андрей Липатцевg.co/ruwebmasters

октябрь 2014 г.