Мобильная адаптация. Урок 2. Что выбрать –мобильное приложение или адаптивную верстку сайта?

Мобильное приложение – это созданная, как правило, на поддомене основного сайта мобильная версия. Фактически, это новый сайт, разработанный специально для мобильных устройств, все страницы которого имеют  URL отличные от декстопной версии .

Адаптивная верстка – этот тот же самый сайт, но в код его встроены ключи распознаватели, которые в зависимости от размера экрана по — разному располагают блоки сайта, а некоторые и вовсе не отображают при переходе на маленький экран.

Google однозначно рекомендует использовать адаптивную верстку.

Я также почти всем клиентам абд-дизайна  рекомендую адаптивную верстку.

Исключение составляют крупные проекты, для которых необходимо сохранить максимум информации , используемой на декстопе и  в мобильной версии, но при этом не потерять в быстродействии. Как правило, это поисковые порталы, банковские сервисы, сложные специализированные продукты.

В большинстве случаев правильно выполненная адаптивная верстка решает практически все задачи по мобильной адаптации –  только необходимая информация, удобная навигация по сайту, легко читаемые тексты, вертикальный скроллинг, быстрый поиск для пользователя, все  то, что Гугл называет Mobile Friendly Websites.

Мобильная адаптация. Урок 1. С чего начать.

Сегодня мы поговорим как пройти проверку на мобильность Гугла и Яндекса.

Что нужно сделать в первую очередь:

  • Избавиться о горизонтальной прокрутки: экран по ширине должен точно совпадать с размерами устройства.
  • Убрать флеш ролики – замените их на картинки или по возможности просто уберите. Из мобильных  выдач  Яндекс и Гугл их исключили, поскольку в большинстве мобильных браузеров они не отображаются.
  • Проверить размер шрифтов –нечитаемый шрифт  -сигнал об неадаптивности сайта.
  • Близость ссылок друг к другу – можете ли вы на мобильном устройстве нажать  одну ссылку, не задев другие ? Проверьте.
  • Используйте мобильное меню

Эти шаги нужны для того ,чтоб Яндекс и Гугл вас не понизили в выдаче –именно по этим вешкам они ориентируются.

Зачем нужна мобильная адаптация

Я предлагаю каждому владельцу интернет ресурса любого вида – блога, интернет –магазина, landing page, корпоративного сайта посмотреть, как выглядит его ресурс на экране мобильного телефона.

Если сайт не проходил мобильной адаптации вы увидите: маленькие, нечитаемые буквы, меню с кнопками, на которые нельзя нажать без увеличения, убегающие за экран картинки, много информации, которую невозможно рассмотреть и приходится елозить по экрану вправо влево, увеличивая нужные кусочки.

Вам удобно? Вашим клиентам и посетителям Вашего сайта крайне неудобно тоже.

А Вы знаете, какова доля мобильного трафика в Рунете? По данным Liveinternet за 2015 год, около 58% всего трафика в Рунете приходится на мобильные устройства.

Что будет делать пользователь, если ему неудобно пользоваться Вашим сайтом и он затрудняется в поисках нужной ему информации?

Правильно – он уйдет на другой, более дружелюбный ресурс. То есть 58 % Ваших пользователей уходят с Вашего сайта, каким бы он замечательным ни был, просто из за отсутствия мобильной адаптации.

И это еще не все. И Google и Яндекс постоянно работают над алгоритмом своих поисковых машин таким образом, чтобы те выводили наверх те сайты, которые максимально удобны и интересны для пользователей.

В итоге, в 2015 Google, а следом и Яндекс, начали компанию по понижению в ранжировании сайтов, у которых нет адаптации под мобильные устройства.

Так сколько же пользователей вы теряете без мобильной адаптации? Теперь Вы сможете оценить сами.

Google и Яндекс не ограничились штрафами для нерадивых владельцев сайтов, игнорирующих адаптацию под мобильные устройства, они постоянно проводят ликбез для владельцев сайтов, публикуя обучающие и разъясняющие материалы о мобильной адаптации.

Думаю, это будет интересно каждому хозяину сайта, заинтересованному в продвижении ресурса на передовые позиции и максимальном привлечении своей аудитории:

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

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

О чем стоит задуматься в 2016 году при продвижении сайтов:

  • Социальные сети рулят еще больше. Google повернулся нужным местом к крупным соцсетям и теперь их контент включен в поиск. Посты с хэштегами на них будут показаны в выдаче Google.
  • В 2016 –входящие ссылки на ваш сайт перестают быть самым эффективным средством продвижения. Поисковые системы становятся интеллектуальными и ловят социальные сигналы — шары, лайки, посты, комменты и пр.  Именно они сегодня способны вытащить ваш сайт на вершину в поисковых выдачах. Но это и логично и прозрачно. Одобрение ваших услуг целевой аудиторией дает возможность развивать наиболее эффективную в 2016 году обеспечивает стратегию SEO.
  •  В 2016  году – прогнозируется еще больший рост мобильного трафика, а значит мобильная оптимизация сайта становится  необходимостью., без нее можно потерять значительную часть целевой аудитории.
  •  Ключевые слова – то, что было всю дорогу основой продвижения сайта, отходят на второй план. Контент,  а точнее качество контента – становятся весомым аргументом в пользу вашего сайта не только для пользователей, но и для поисковых систем. Пишите больше, пишите лучше, пишите интересней!
  •  Еще один важный момент в SEO продвижении 2016 – баланс. Google полюбил сайты, с разносторонним содержанием. Видео, графика, статьи, картинки все это должно присутствовать на продвигаемых страницах.

Тенденции в дизайне сайтов 2016 — плоский дизайн.

Начинаю обзор предполагаемых тенденций в дизайне сайтов на год 2016.

Первая, про которую стоит упомянуть — одна из тенденций дизайна сайтов 2015 года, которая обещает перейти в год 2016, это плоский дизайн сайтов.

За последние несколько лет плоский дизайн набирает обороты с удивительной
скоростью.

Это неудивительно – его простота делает понятным любой интерфейс, он отлично работает с адаптивным дизайном и, конечно, выглядит потрясающе (когда используется там, где он уместен и стильно выполнен).

Однако, не теряя своей популярности, плоский дизайн стиль вряд ли останется неизменным. Уже в следующем году можно ожидать новых идей в этом направлении дизайна сайтов.

Из идей – это добавление к минималистически плоскому дизайну «неплоских» мелких деталей: тени, небанальные краски, необычные винтажные элементы.

В результате ,оставаясь преимущественно плоским дизайн сайтов приобретает затенения и текстуры, становясь своеобразным гибридом – комбинацией
упрощенные элементов плоского дизайна сайтов с фотореализмом.

Что выбрать

  • Нет однозначного ответа и нет волшебной кнопки.
  • Цели, конкуренты, целевая аудитория, конкуренты на рынке — все разное.
  • Для каждого проекта мы выстраиваем уникальную стратегию успеха.
  • В основе этой стратегии всегда лежит комплексная аналитика на каждом этапе нашей работы.
  • Все инструменты продвижения взаимосвязаны и требуют детальной работы над содержимым сайта.

Оптимальный контент

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

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

Разработка и продвижение сайта для детского технологического центра «БИП» — стартап

Начало работ: июль 2015 года
Окончание работ: Постоянное маркетинговое сотрудничество. Ведется полный маркетинговый аутсорсинг, включая работы по продвижению, обновлению и сопровождению ресурса.
Результат работ: сайт существует с 0-го цикла проекта. Полное сопровождение деятельности центра: привлечение клиентов, осуществление заказов, освещение акций и мероприятий.
В настоящее время в центре  по 8 направлениям легопроектирования и программирования обучается 400 детей в​ ​ 3​ ​ филиалах центра.

логотип БИП
Детский центр БИП

Посмотреть сайт

 

 

 

 


Стояла задача вместе с коллективом детского центра БИП (будущие инженеры и программисты) быстро поднять с нуля новый центр в Нижнем Новгороде, где ребята 5-14  лет будут проходить обучение по легопроектированию,  программированию и другим техническим дисциплинам.

Поскольку было очень важно запуститься к августу, а заказ поступил в агентство бизнес дизайна в середине июля, в очнеь сжатые сроки было придумано название БИП — будущие инженеры и программисты и  созданы первый вариант сайта, логотип, фирменный стиль, основанные скорее на предположениях, чем на длительных маркетинговых исследованиях.

Первый вариант дизайна сайта детского центра БИП

 

В первом варианте дизайна преобладает  веселое, «детское» направление стиля, основанное на предположении, что основными клиентами будут детишки дошкольного и младшего школьного возраста.

Разработанный логотип в технологическом стиле лент мебиуса тоже был с яркой детской расцветкой и под стать ему  персонаж для сайта – веселый робот из Лего.

Таким стал новый:

 

Спустя 2 года возникла необходимость в редизайне сайта,  поскольку основу центра  составили ребята –подростки и возникли новые направления. Структура сайта осталась без изменений.

После редизайна сайт немного напоминает космические войны, которые так любят мальчишки возраста 9-14 лет.

 

Разработка и продвижение завода «Евробетон» в Дмитровском районе Московской области

Начало работ: июнь 2017 года
Окончание работ: Постоянное маркетинговое сотрудничество. Ведется полный маркетинговый аутсорсинг, включая работы по продвижению, обновлению и сопровождению ресурса.
Результат работ: продающий сайт для узкого геотаргетинга и специализированной аудитории

Посмотреть сайт

 

 


Основная задача — создать с нуля сайт для бетонного завода , нацеленный на продаи по очень небольшой геолокации: Дмитровский, Пушкинский и Сергиево -Посадский районы.

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

 

 

Фактически — это набор лэндингов, даже на некоторых страницах блога.

 

Для лучшего итеракива использовались онлайн калькуляторы для расчета расхода бетона.

 

 

Разработка сайта «Мастерская ландшафта Татьяны Царевой»

Начало работ: апрель 2016 года
Окончание работ: июнь 2016 года
Результат работ: быстрый запуск к летнему сезону сайта -портфолио для начинающего ландшафтного дизайнера

Посмотреть сайт

 

 

 

 


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

Было принято решение не использовать в этом проекте фото чужих ландшафтных работ, а свои в основном были только в эскизах, поскольку Татьяна только начинала на тот момент свою карьеру в качестве ландшафтного дизайнера.

В итоге, в портфолио мы использовали эскизы и 3D  визуализации.

На главной странице разместились ее художественные работы с цитатами выдающихся писателей и философов.

Весь сайт стал неким арт объектом — художественной мастерской, галереей. Это как нельзя лучше отображает и характер самой Татьяны  — творческой, вдохновленной, многогранной.

Получилась своего рода  ландшафтная шкатулка со множеством мелочей и художественных приемов, привлекающая клиентов, которые хотят не стандартных решений, а чего то удивительного, красивого, эксклюзивного, только для них.

 

 

 

 

Разработка и продвижение сайта для группы компаний «Адепт»

Начало работ: март 2016 года
Окончание работ: Постоянное сотрудничество. Ведутся работы по продвижению, обновлению и сопровождению ресурса.
Результат работ: в​ ​ 3​ ​ раза​ ​ вырос​ ​ общий​ ​ ​ трафик;​ ​ заказы​ ​ демонстраций​ ​ с​ ​ сайта​ ​ заменяют
работу​ ​ 1/2​ ​ ​ диспетчерской​ ​ службы,​позволяя​ ​ значительно​ ​ экономить​ ​ бюджет,​ ​ начались
продажи​ ​ непосредственно​ ​ с​ ​ сайта.​ ​

 

Сайт кампании ГК «Адепт»

Посмотреть сайт

 

 

 

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

ГК «Адепт» — ведущий российский разработчик и поставщик программного обеспечения для строительной отрасли. На момент обращения фактически не было заказов через интернет и основной целью было ​ сделать​ ​ сайт​ ​ “продающим”-​ ​ ​ приносящим​ ​ заказы демонстраций​ ​ и​ ​ счетов, приводящих к ​ ​ продажам​ ​ программ​ ​ Адепт.

Кроме того, необходимо было провести​ ребрендинг​,​ ​ сделав​ ​ более​ ​ современным фирменный​ ​ стиль Адепта,​ но при этом ​ сохранить​ ​ узнаваемость​ ​ и​ ​ черты​ ​ старого​ ​ стиля.

​ Вместе с клиентом было принято решение полностью переделать​ ​ сайт компании, внедрив современные технологические решения и привести сайт в соответствие новому​ ​ стилю,​ ​ подчеркнув ​ стиль​ ​ самих​ ​ разработок​ ​ от
ГК​ ​ Адепт -​ ​ качественных,​ ​ отвечающих​ ​ и​ ​ постоянно​ ​ изменяющихся​ ​ под​ ​ запросы​ ​ своих клиентов,​ ​ дружелюбных​ ​ и интуитивно​ ​ ​ понятных.

 

Таким был старый стиль «Адепта»

Таким стал новый:

Работа​ ​ над​ ​ фирменным​ ​ стилем​ ​ заключалась​ ​ в​ ​ первую​ ​ ​ очередь​ ​ в замене
неустойчивых​ ​ и​ ​ градиентных​ ​ цветов,​ ​ ​ подсознательно​ ​ связанных​ ​ с​ ​ нестабильностью​ ​ и непредсказуемостью,​ ​ ​ ​ ​ ​ ясным ​ цветом,​ ​ лаконичным ​ формам​ ​ и​ ​ четким​ ​ линиям.


Были​ ​ убраны​ ​ все​ ​ штампы​,​ ​ каждая​ ​ мелочь​ ​ от​ ​ иконки​ ​ до​ ​ линии​ ​ подчеркивания​ ​ была разработана​ ​ и продолжают разрабатываться специально,​ ​ чтобы​ ​ подчеркнуть​ ​ уникальность​ ​ разработок​ ​ Адепт.

​ Основной​ ​ упор​ ​ ​ ​ сделан​ ​ на​ ​ продвижение​ ​ программ.​ ​ Под​ ​ каждую
​ разработана​ ​ отдельная​ ​ стратегия​ ​ продвижения​ ​ и​ ​ соответственно​ ​ целевая
страница.
Программы​ ​ разные​ ​ и​ ​ предназначены​ ​ для​ ​ разных​ ​ целевых​ ​ аудиторий:от​ ​ управления проектами​ ​ до​ ​ сметных​ ​ программ.
Каждая​ ​ из​ ​ них​ ​ представлена​ ​ на​ ​ сайте​ ​ по​ ​ разному,​ ​ под​ ​ каждую​ ​ сформировано​ ​ свое семантическое​ ​ ядро,​ ​ но​ ​ все​ ​ они​ ​ обьединены​ ​ единым​ ​ стилем​ ​ Адепта.


​ Свое​ ​ почетное​ ​ место​ ​ заняли​ ​ на​ ​ сайте​ ​ блоги​ ​ и​ ​ нормативная​ ​ документация,​ ​ отвечающие за большую​ ​ часть​ ​ трафика,​ ​ страница​ ​ с​ ​ отзывами​ ​ клиентов,​ ​ размещаемыми​ ​ он​ ​ лайн привлекает​ ​ своей​ ​ читабельностью​ ​ и​ ​ открытостью​ ​ новую​ ​ аудиторию.

В​ ​ результате:​ ​ в​ ​ 3​ ​ раза​ ​ вырос​ ​ общий​ ​ ​ трафик;​ ​ заказы​ ​ демонстраций​ ​ с​ ​ сайта​ ​ заменяют работу​ ​ 1/2 ​ ​ диспетчерской​ ​ службы,​ ​ позволяя​ ​ значительно​ ​ экономить​ ​ бюджет,​ ​ начались продажи​ ​ непосредственно​ ​ с​ ​ сайта.​ ​

Работа​ ​ над​ ​ сайтом​ ​ ведется​ ​ постоянно​ ​ командой агентства​ ​ в плотном сотрудничестве с коллективом ​ ГК​ ​ Адепт.

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

 

​ ​