Вправду ли Ваш сайт совместим с мобильными устройствами? Вправду ли он адаптивный? Согласно данным eMarketer, ожидается, что текущем году будет более 1.75 пользователей смартфона.
К 2017 пользование сотовыми телефонами во всем мире возрастет до 69.4% от общего количества населения.
Точно Вы слышали такие высказывания как: Интернет везде; в следующем году в Интернет будут выходить лишь с мобильных устройств; стационарные компьютеры идут методом динозавров и без того потом.
Но так как в действительности так и происходит! Нравится нам это либо нет, в случае если мы не будем придерживаться текущих тенденций, то весьма не так долго осталось ждать сайт, в который мы уже так много положили, может утратить собственную аудиторию.
Неприятности появляются в то время, когда дело доходит до горизонтальной ориентации, поскольку ее нет для мобильных устройств. Вместе с представленными iPhone 6 и 6 Plus, мы приобретаем 46 соперничающих между собой устройств, со своим видением и возможностями. Вдобавок, сетевая скорость с которой необходимо верно иметь дело.
В случае если трудясь за стационарным компьютером Вам необходимо думать лишь о скорости Wifi либо DSL,то при с мобильными устройствами другие скорости, именуемые GPRS, EDGE, 3G и LTE (4G).
Не обращая внимания на то, что мы можем сделать сайт для мобильных устройств, можем ли мы сделать сайт, что будет трудиться на таком громадном количестве разнообразных девайсов, и еще будут прекрасно действующий при разной скорости передачи данных?
Сейчас мы желаем продемонстрировать Вам два несложных инструмента. Инструменты, каковые окажут помощь отвечать на запросы самый распространенных скоростей и девайсов и наряду с этим оставаться на вершине развития Вашего красивого сайта. Начнем с первого инструмента.
Мобильная эмуляция в Гугл Chrome
В новом Chrome 32 имеется инструмент разработки – мобильная эмуляция. Данный инструмент – настоящая находка для отладки мобильных и адаптивных проектов.
Если Вы его еще не открыли, то откройте посредством одной из следующих опций:
- Надавите F12 (либо Cmd+Alt+l на Mac)
- Кликните Developer Tools под View — Developer
- Кликните правой кнопкой мыши в одной из частей сайта и выберите Inspect Element
Вверху окна инструментов разработчика Вы отыщете новый знак, что похож на сотовый телефон. Щелкните по нему, и мобильная эмуляция будет трудиться на сайте, где Вы на данный момент находитесь, как продемонстрировано на скриншоте ниже.
Вы имеете возможность заметить, что дешёвы простые инструменты разработчика, но имеется еще дополнительные опции, и сайт будет имитировать мобильное устройство, в том случае iPhone 6 Plus. Давайте разглядим его поближе.
Конфигурация девайса
В верхней левой части находится конфигуратор девайса, что разрешает выбрать один из 46 разных мобильных устройств. Под перечнем устройств Вы имеете возможность заметить опции:
– разрешение экрана;
– вертикальное/горизонтальное положение экрана;
– установка пиксельного соотношения устройства;
– возможность регулировки дисплея в пределах видимой части либо полноразмерного режима.
Конфигурация сетей
Синим цветом выделена конфигурация сетей. В том месте Вы имеете возможность установить скорость сети, начиная с оффлайном и заканчивая неограниченным числом запросов. Это окажет помощь Вам заметить как скоро либо медлительно грузится Ваш сайт, в зависимости от скорости сети.
Под «сетью» Вы имеете возможность вручную настроить агент пользователя. Это разрешит Вам заметить как сайт адаптивный.
Брейк-пойнт
Что на счет брейк-поинтов? Данный инструмент будет обнаруживать все брейк-поинты, каковые Вы установили в CSS и обеспечить сообщение с каждой из них.
Один момент связанный с строковыми последовательностями Пользователя-агента – если Вы не желаете устанавливать их вручную, этого возможно не делать. Кликая кнопку escape на клавиатуре, Вы имеете возможность открыть другие опции конфигурации и выбрать из перечня заданных поддельных пользовательский агентов.
В дополнение к этому Вы имеете возможность кроме этого имитировать датчики сенсорных устройств, включая вход прикосновением, геолокацию и акселерометр.
Расширение Usersnap
Кроме этого, новая версия разрешает весьма легко создавать дизайн для мобильных устройств. Но это еще не финиш отечественной истории.
Одно дело видеть, как сайт трудится в разных условиях, но другое дело знать, как делиться результатом с дизайнерами и Вашими разработчиками?
Расширение Usersnap Chrome красиво вписывается в перечень инструментов разработчика. Применяя плагин эмуляции Вы имеете возможность применить Usersnap светло синий в дизайне.
В случае если у Вас его еще нет, установите его с сайта Chrome Web Store. По окончании установки, Вы заметите иконку Usersnap в тулбаре Chrome. По окончании первого применения покажется указание о конфигурации.
Кликните «ок» и по окончании логина и регистрации в Usersnap, Вы станете перенесены на страничку конфигураций. В нижней части страницы Вы заметите перечень Ваших проектов.
Выберите необходимый Вам проект из перечня и кликните Select Project. Сейчас Вы готовы применять расширение. Возвращаясь к работе с плагином эмуляции, мы увидели, что в то время, когда страница достигает 768px, то он перестает трудиться верно.
Сохраняем надежду в недалеком будущем это будет устранено.
Нажимая кнопку Usersnap мы переходим на сайт редактора Usersnap, где имеется целый вероятный функционал. Тут возможно добавить комментарии, главные элементы, заметки, время отключения, экранное рисование и управление.
На скриншоте Вы имеете возможность заметить, что сделаны заметки о том, как выглядит сайт, какие конкретно трансформации необходимо внести, дабы он прекрасно трудился на мобильном устройстве. Сейчас Вы владеете гибкостью и большим контролем в дизайне, разработке, создании сайтов и приложений, чем в то время, когда или.
Заключение
Сейчас Вы понимаете, что имеется два красивых инструмента, каковые окажут помощь Вам несложнее преобразовать сайты для громадного количества мобильных устройств.
Высоких конверсий!
Случайные статьи:
- Что необходимо знать, прежде чем браться за разработку нового продукта
- 5 Значительных мобильных тенденций дизайна 2015
Joomla / Jblank — Делаем сайт адаптивным под мобильные устройства.
Подборка похожих статей:
-
Руководство для новичков: простой адаптивный сайт при помощи css
Все говорят об адаптивном веб-дизайне. Но значит ли это, что все знают, для чего он нужен? Респонсивный дизайн – это не только разработка сайтов для…
-
Как сделать сайт действительно удобным для мобильных устройств. рекомендации платона щукина
Некое время назад Яндекс начал отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», и отдавать им…
-
Узнайте, как дешево сделать сайт для заработка в интернете
В чем преимущества одностраничников? Как сделать одностраничник недорого? Вместо заключения Многие современные люди неспешно вспоминают над тем, дабы…
-
Как сделать сайт для малого бизнеса
Александр Родионов Директор по формированию, Краснодар Восемь советов, каковые окажут помощь сберечь деньги и приспособить ресурс под задачи бизнеса….