SlideShare a Scribd company logo
Разработка адаптивных шаблонов
для
Prestashop
Переход к адаптивности
— Анализ использования мобильных устройств во
время онлайн-покупок
— Анализ адаптивности на примере других продуктов
от TemplateMonster
— Выбор фреймворка
Почему Bootstrap?
Доступность
Надежность
Функциональность
Опыт работы
Что поменялось?
Пример Пример-1
Bootstrap сетка 1170px
Трансформация хедера и футера
Перемещение боковых колонок под
основной контент
Перемещение боковых колонок под
основной контент
Трансформация таблиц под любые
устройства
Добавление адаптивных swipe
каруселей
Проблемы
— Сloud zoom с каруселью на странице продукта
— Множество всплывающих окон (iframe)
— Адаптивности без перезагрузки (для всех устройств)
— Отображение сравнения продуктов
— Перемещение блоков левой колонки под низ контента при маленьких
разрешениях
— Адаптация выпадающей корзины
— Синхронная работа выпадающих блоков в шапке сайта
Тестинг и поиск багов
Итого
— 100% адаптивность без перезагрузки страниц
— Сохранение полного стандартного функционала
— Отсутсвие дублирования контента
— Сохранение совместимости между подверсиями
— Поддержка мультиязычности
В разработке...
— Боковое swipe-меню
— Доработка всех каруселей и слайдеров под multi-touch
— Поддержка Retina Ready
— Внедрение возможности отключения адаптивности шаблона через
админпанель

More Related Content

What's hot

SCRUM:opem report from Alexander Histev
SCRUM:opem report from Alexander HistevSCRUM:opem report from Alexander Histev
SCRUM:opem report from Alexander Histev
Alexey Krivitsky
 
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014Т. Черемных "Автоматизация тестирования верстки", DUMP-2014
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014it-people
 
Nikita Kulaga, Lazy Bear Games
Nikita Kulaga, Lazy Bear GamesNikita Kulaga, Lazy Bear Games
Nikita Kulaga, Lazy Bear Games
White Nights Conference
 
Game design mistakes in Punch Club
Game design mistakes in Punch ClubGame design mistakes in Punch Club
Game design mistakes in Punch Club
DevGAMM Conference
 
Клиентская оптимизация в ритме военного марша
Клиентская оптимизация в ритме военного маршаКлиентская оптимизация в ритме военного марша
Клиентская оптимизация в ритме военного марша
Alexander Byndyu
 
Оптимизация навигации сайта. Модуль 24.
Оптимизация навигации сайта. Модуль 24.Оптимизация навигации сайта. Модуль 24.
Оптимизация навигации сайта. Модуль 24.
EMPOpro
 
Оптимизация навигации сайта
Оптимизация навигации сайтаОптимизация навигации сайта
Оптимизация навигации сайта
EMPOpro
 
Мобильный Мегаплан
Мобильный МегапланМобильный Мегаплан
Мобильный Мегаплан
Mikhail Sukhov
 

What's hot (8)

SCRUM:opem report from Alexander Histev
SCRUM:opem report from Alexander HistevSCRUM:opem report from Alexander Histev
SCRUM:opem report from Alexander Histev
 
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014Т. Черемных "Автоматизация тестирования верстки", DUMP-2014
Т. Черемных "Автоматизация тестирования верстки", DUMP-2014
 
Nikita Kulaga, Lazy Bear Games
Nikita Kulaga, Lazy Bear GamesNikita Kulaga, Lazy Bear Games
Nikita Kulaga, Lazy Bear Games
 
Game design mistakes in Punch Club
Game design mistakes in Punch ClubGame design mistakes in Punch Club
Game design mistakes in Punch Club
 
Клиентская оптимизация в ритме военного марша
Клиентская оптимизация в ритме военного маршаКлиентская оптимизация в ритме военного марша
Клиентская оптимизация в ритме военного марша
 
Оптимизация навигации сайта. Модуль 24.
Оптимизация навигации сайта. Модуль 24.Оптимизация навигации сайта. Модуль 24.
Оптимизация навигации сайта. Модуль 24.
 
Оптимизация навигации сайта
Оптимизация навигации сайтаОптимизация навигации сайта
Оптимизация навигации сайта
 
Мобильный Мегаплан
Мобильный МегапланМобильный Мегаплан
Мобильный Мегаплан
 

Viewers also liked

Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)my1site
 
Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницы
Marina_stn
 
Теги для сайта
Теги для сайтаТеги для сайта
Теги для сайтаMarina_stn
 
Поток заказов с вашего сайта – Москва – Михаил Христосенко
Поток заказов с вашего сайта – Москва – Михаил ХристосенкоПоток заказов с вашего сайта – Москва – Михаил Христосенко
Поток заказов с вашего сайта – Москва – Михаил Христосенко
Михаил Христосенко
 
Технология Web 2
Технология Web 2Технология Web 2
Технология Web 2
Marina_stn
 
Как создать сайт бесплатно
Как создать сайт бесплатноКак создать сайт бесплатно
Как создать сайт бесплатно
Mikhail Ageev
 

Viewers also liked (6)

Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)Создание сайта. Начало (TemplateMonster Russia)
Создание сайта. Начало (TemplateMonster Russia)
 
Web страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницыWeb страницы и web-сайты.структура web-страницы
Web страницы и web-сайты.структура web-страницы
 
Теги для сайта
Теги для сайтаТеги для сайта
Теги для сайта
 
Поток заказов с вашего сайта – Москва – Михаил Христосенко
Поток заказов с вашего сайта – Москва – Михаил ХристосенкоПоток заказов с вашего сайта – Москва – Михаил Христосенко
Поток заказов с вашего сайта – Москва – Михаил Христосенко
 
Технология Web 2
Технология Web 2Технология Web 2
Технология Web 2
 
Как создать сайт бесплатно
Как создать сайт бесплатноКак создать сайт бесплатно
Как создать сайт бесплатно
 

Similar to TM - презентация по престашопу (львов)

1С-Битрикс - Версия 10.0
1С-Битрикс - Версия 10.01С-Битрикс - Версия 10.0
1С-Битрикс - Версия 10.0
Alexander Demidov
 
Готовим сайты на 1С-Битрикс
Готовим сайты на 1С-БитриксГотовим сайты на 1С-Битрикс
Готовим сайты на 1С-Битрикс
IRCIT
 
Управление сайтом
Управление сайтом Управление сайтом
Управление сайтом Annely Nurkaliyeva
 
Создание и продвижение сайтов по недвижимости на Word Press
Создание и продвижение сайтов по недвижимости на Word PressСоздание и продвижение сайтов по недвижимости на Word Press
Создание и продвижение сайтов по недвижимости на Word Press
Elena Shuvalova
 
Разработка сайта с 1С Битрикс
Разработка сайта с 1С БитриксРазработка сайта с 1С Битрикс
Разработка сайта с 1С Битрикс
Max Baas
 
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
simai
 
Интернет-магазин с адаптивным дизайном «на раз-два-три»!
Интернет-магазин с адаптивным дизайном «на раз-два-три»!Интернет-магазин с адаптивным дизайном «на раз-два-три»!
Интернет-магазин с адаптивным дизайном «на раз-два-три»!
Burbon.ru
 
Lotus Forum 2009 Websphere Portal 6.1
Lotus Forum 2009 Websphere Portal 6.1Lotus Forum 2009 Websphere Portal 6.1
Lotus Forum 2009 Websphere Portal 6.1guestcaef82
 
Как создать тему для магазина на платформе InSales?
Как создать тему для магазина на платформе InSales?Как создать тему для магазина на платформе InSales?
Как создать тему для магазина на платформе InSales?InSales
 
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнесаКорпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
ADN Digital Studio
 
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтомСистема управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
borovoystudio
 
«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.51С-Битрикс
 
Управляем сайтом: Быстро. Просто. Эффективно.
Управляем сайтом: Быстро. Просто. Эффективно.Управляем сайтом: Быстро. Просто. Эффективно.
Управляем сайтом: Быстро. Просто. Эффективно.
Евгений Курбанов
 
1С-Битрикс: Управление сайтом 11.5
1С-Битрикс: Управление сайтом 11.51С-Битрикс: Управление сайтом 11.5
1С-Битрикс: Управление сайтом 11.5itees
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другие
lugnsk
 
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнесаКорпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
borovoystudio
 
Катерина Золотарева: SEO итоги 2015 / тренды 2016
Катерина Золотарева: SEO итоги 2015 / тренды 2016 Катерина Золотарева: SEO итоги 2015 / тренды 2016
Катерина Золотарева: SEO итоги 2015 / тренды 2016
Alexander Rys
 
Roman Zdebskiy - Client vs. Browser
Roman Zdebskiy - Client vs. BrowserRoman Zdebskiy - Client vs. Browser
Roman Zdebskiy - Client vs. BrowserAndrew Mayorov
 
ProvectaPOS
ProvectaPOSProvectaPOS
ProvectaPOS
Alexander Pivovarov
 

Similar to TM - презентация по престашопу (львов) (20)

1С-Битрикс - Версия 10.0
1С-Битрикс - Версия 10.01С-Битрикс - Версия 10.0
1С-Битрикс - Версия 10.0
 
Dev
DevDev
Dev
 
Готовим сайты на 1С-Битрикс
Готовим сайты на 1С-БитриксГотовим сайты на 1С-Битрикс
Готовим сайты на 1С-Битрикс
 
Управление сайтом
Управление сайтом Управление сайтом
Управление сайтом
 
Создание и продвижение сайтов по недвижимости на Word Press
Создание и продвижение сайтов по недвижимости на Word PressСоздание и продвижение сайтов по недвижимости на Word Press
Создание и продвижение сайтов по недвижимости на Word Press
 
Разработка сайта с 1С Битрикс
Разработка сайта с 1С БитриксРазработка сайта с 1С Битрикс
Разработка сайта с 1С Битрикс
 
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
Правильный интернет магазин на платформе «1с-битрикс». лучшие технологии борь...
 
Интернет-магазин с адаптивным дизайном «на раз-два-три»!
Интернет-магазин с адаптивным дизайном «на раз-два-три»!Интернет-магазин с адаптивным дизайном «на раз-два-три»!
Интернет-магазин с адаптивным дизайном «на раз-два-три»!
 
Lotus Forum 2009 Websphere Portal 6.1
Lotus Forum 2009 Websphere Portal 6.1Lotus Forum 2009 Websphere Portal 6.1
Lotus Forum 2009 Websphere Portal 6.1
 
Как создать тему для магазина на платформе InSales?
Как создать тему для магазина на платформе InSales?Как создать тему для магазина на платформе InSales?
Как создать тему для магазина на платформе InSales?
 
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнесаКорпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
 
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтомСистема управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
Система управления сайтом «1С-Битрикс» изнутри: работа с корпоративным сайтом
 
«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5
 
Управляем сайтом: Быстро. Просто. Эффективно.
Управляем сайтом: Быстро. Просто. Эффективно.Управляем сайтом: Быстро. Просто. Эффективно.
Управляем сайтом: Быстро. Просто. Эффективно.
 
1С-Битрикс: Управление сайтом 11.5
1С-Битрикс: Управление сайтом 11.51С-Битрикс: Управление сайтом 11.5
1С-Битрикс: Управление сайтом 11.5
 
История развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другиеИстория развития и применения CMS: Drupal и другие
История развития и применения CMS: Drupal и другие
 
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнесаКорпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
Корпоративный сайт нашего времени: лучшие технологии «1С-Битрикс» для бизнеса
 
Катерина Золотарева: SEO итоги 2015 / тренды 2016
Катерина Золотарева: SEO итоги 2015 / тренды 2016 Катерина Золотарева: SEO итоги 2015 / тренды 2016
Катерина Золотарева: SEO итоги 2015 / тренды 2016
 
Roman Zdebskiy - Client vs. Browser
Roman Zdebskiy - Client vs. BrowserRoman Zdebskiy - Client vs. Browser
Roman Zdebskiy - Client vs. Browser
 
ProvectaPOS
ProvectaPOSProvectaPOS
ProvectaPOS
 

More from PrestaShop

PrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShopPrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShop
PrestaShop
 
Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017
PrestaShop
 
Social Selling
Social SellingSocial Selling
Social Selling
PrestaShop
 
PrestaShop SEA Workshop
PrestaShop SEA WorkshopPrestaShop SEA Workshop
PrestaShop SEA Workshop
PrestaShop
 
PrestaShop 1.7.1
PrestaShop 1.7.1PrestaShop 1.7.1
PrestaShop 1.7.1
PrestaShop
 
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
PrestaShop
 
Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]
PrestaShop
 
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop
 
Case Study - Berties closet
Case Study - Berties closet Case Study - Berties closet
Case Study - Berties closet
PrestaShop
 
Case Study - Fashion stork
Case Study - Fashion storkCase Study - Fashion stork
Case Study - Fashion stork
PrestaShop
 
WeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShopWeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShop
PrestaShop
 
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme... PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop
 
Case Study - Pronesis [IT]
Case Study - Pronesis [IT]Case Study - Pronesis [IT]
Case Study - Pronesis [IT]
PrestaShop
 
Case Study - Pronesis
Case Study - PronesisCase Study - Pronesis
Case Study - Pronesis
PrestaShop
 
Case Study - Fashion Stork
Case Study - Fashion StorkCase Study - Fashion Stork
Case Study - Fashion Stork
PrestaShop
 
Case Study - Miraherba
Case Study - MiraherbaCase Study - Miraherba
Case Study - Miraherba
PrestaShop
 
Fallstudie - Miraherba
Fallstudie - MiraherbaFallstudie - Miraherba
Fallstudie - Miraherba
PrestaShop
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
PrestaShop
 
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
PrestaShop
 
L’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShopL’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShop
PrestaShop
 

More from PrestaShop (20)

PrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShopPrestaShop Day Paris - le futur de PrestaShop
PrestaShop Day Paris - le futur de PrestaShop
 
Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017Trucos, técnicas y tácticas SEO que funcionan en el 2017
Trucos, técnicas y tácticas SEO que funcionan en el 2017
 
Social Selling
Social SellingSocial Selling
Social Selling
 
PrestaShop SEA Workshop
PrestaShop SEA WorkshopPrestaShop SEA Workshop
PrestaShop SEA Workshop
 
PrestaShop 1.7.1
PrestaShop 1.7.1PrestaShop 1.7.1
PrestaShop 1.7.1
 
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION3 PAGES CRUCIALES POUR  MAXIMISER LA CONVERSION
3 PAGES CRUCIALES POUR MAXIMISER LA CONVERSION
 
Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]Meetup PrestaShop Torino [IT]
Meetup PrestaShop Torino [IT]
 
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
PrestaShop Masterclass - SEO & Ecommerce: come incrementare visite e conversi...
 
Case Study - Berties closet
Case Study - Berties closet Case Study - Berties closet
Case Study - Berties closet
 
Case Study - Fashion stork
Case Study - Fashion storkCase Study - Fashion stork
Case Study - Fashion stork
 
WeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShopWeCommerce Perú - PrestaShop
WeCommerce Perú - PrestaShop
 
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme... PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
PrestaShop Masterclass - 8 cose che devi sapere per migliorare il tuo eComme...
 
Case Study - Pronesis [IT]
Case Study - Pronesis [IT]Case Study - Pronesis [IT]
Case Study - Pronesis [IT]
 
Case Study - Pronesis
Case Study - PronesisCase Study - Pronesis
Case Study - Pronesis
 
Case Study - Fashion Stork
Case Study - Fashion StorkCase Study - Fashion Stork
Case Study - Fashion Stork
 
Case Study - Miraherba
Case Study - MiraherbaCase Study - Miraherba
Case Study - Miraherba
 
Fallstudie - Miraherba
Fallstudie - MiraherbaFallstudie - Miraherba
Fallstudie - Miraherba
 
Outils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEOOutils et conseils pour optimiser votre SEO
Outils et conseils pour optimiser votre SEO
 
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
Noël 2015 : Conseils et astuces e-commerce pour booster vos ventes.
 
L’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShopL’e-commerce sans frontières - PrestaShop
L’e-commerce sans frontières - PrestaShop
 

TM - презентация по престашопу (львов)