Как быстро создать адаптивный дизайн перед последним обновлением алгоритма Google

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

Так как Google объявил об обновлении алгоритма, которое произойдет уже 21 апреля, стоит серьезно задуматься уже сейчас, каким будет ближайшее будущего вашего сайта. Грядущее обновление эксперты поисковика называют самым мощным среди всех прочих, но прежде чем начинать паниковать, подумайте о том, что же именно от вас хотя? А хотят от вас минимальных изменений и добросовестной работы, что не так уж и много.

Суть обновления алгоритма Google 2015

26 Февраля Google раскрыл все карты и сообщил миру о том, что после 21 апреля те сайты, которые оптимизированы под мобильные устройства, будут ранжироваться лучше, чем все остальные. Информация огорчила многих веб-мастеров, особенно, тех, кто работает над международными проектами и не имеют более милостивого Яндекса, который, в данном случае, как сейф, сохранит хоть часть трафика. Так как проект Промокодабра является частью международного проекта Magic Coupons, для разработчиков вопрос оптимизации сайта для мобильных устройств встал особенно остро. Безусловно переделать все в такой короткий срок невозможно, но внести некоторые изменения в скрипт сайта просто необходимо.

Как оптимизировать свой сайт для мобильных устройств

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

1. Гектор Гавин Ривас — главный IT-разработчик проекта:

“Для начала всегда используйте viewport. Это самый простой метод создать отзывчивый дизайн. Для того, чтобы ваш сайт хорошо смотрелся на мобильных устройствах необходимо задать дополнительные правила для области просмотра. Для этого можно использовать мета-тег viewport, который подходит для всех устройств. Необходимо добавить следующее:

 

Device-width дает браузеру указание, что ширина области просмотра равняется ширине устройства. Таким образом, он не будет ставить по-умолчанию 980px. Если вы зададите конкретную ширину смартфона, то на некоторых устройствах появятся искажения, так как ширина у смартфонов разная, поэтому лучше добавить

initial-scale=1.0, тогда вся строка будет выглядеть так:

 

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

2. Габриэль Гамбанини — ведущий frontend разработчик проекта:

“При помощи медиазапросов CSS можно создать отзывчивый веб-дизайн. Как это сделать, Google подробно объясняет на сайте для разработчиков. Мы использовали атрибут max-width, который применяется к браузеру с меньшей шириной, чем указана в запросе. Таким образом вам не придется менять контент, что сэкономит многие часы работы над оптимизацией сайта. Грубо говоря, медаизапросы фильтруют стили CSS и изменяют стили на основании характеристик устройства, например, тип контента, ширину, ориентацию и разрешение экрана. Соответственно, полезными будут следующие изменения:

Как быстро создать адаптивный дизайн перед последним обновлением алгоритма Google

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

3. Штефан Нольте — CEO компании Global Leads Group:

“Если вы создаете новый проект, то используйтеfront-end фреймворки Bootstrap или Foundation по нескольким простым причинам:

1. Это упростит процесс стандартизации при оптимизации сайта или форматировании семантической разметки.

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

3. У вас есть много разных нестандартных решений уже интегрированных в фреймфорк, поэтому нет нужды создавать стандартные компоненты дизайна, такие как галереи, модальные окна и уведомления. Зато вы можете полностью сконцентрироваться на кастомизации. Я могу порекомендовать этот фреймворк не только для больших программных приложений, но также для создания лендингов, потому что это значительно сэкономит ваше время”.

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

  • Инструменты веб-разработчика Google Chrome

Данный инструмент используется при отладке CSS и скрипта Java. Эмулятор Хрома позволяет протестировать внесенные изменения в браузере вашего компьютера, а также на мобильном устройстве. Это, пожалуй, два наиболее важных преимущества Google Chrome.

  • Текстровый редактор Brackets

Данный текстовый редактор от компании Adobe прост в использовании и радует большим количеством тем и плагинов. Brackets может похвастаться уникальными расширениями Inline Editor и Extract, при этом предоставляется абсолютно бесплатно.

  • Текстовый редактор Sublime

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

Как быстро проверить сайт на отзывчивость

После внесения изменений, проверьте, как отреагировал Google. Ниже приведены два самых простых способа, как это сделать:

1. Проверка при помощи Google поиска

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

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

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

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

Компании и сервисы: Промокодабра
Автор: Игорь Назаров

Подписаться на новости

Читайте также

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

Повышение конверсии — путь часто длинный и извилистый.  Он состоит из понимания возражений (негласных) и эффективной работы с ними. В конечном итоге пользователь оказывается на распутье: один путь ведет к конверсии, а другой с кнопкой «назад». Или хуже – к вашему конкуренту. В этой статье мы разберем что такое дизайн, ориентированной на конверсию. И не забудем рассмотреть несколько реальных кейсов (с неожиданными заключениями).

далее →

1 февраля / Комментарии

Маленькая деталь страницы товара в зарубежных магазинах одежды, которую пока игнорируют наши продавцы

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

Мобильная версия почему-то не воспринимается как важный аспект многими владельцами интернет-магазинов. Альтернативный такому невниманию вариант – адаптивная вёрстка, которая просто логично умещает весь контент на маленькие экраны мобильных устройств. Это, конечно, уже что-то, но если уж делать, то делать хорошо, да? В таком случае, надо учесть ряд факторов.

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

Вы хотите увеличить количество конверсий на своем сайте? Многие знают, что дизайн оказывает на это значительное влияние. В этой статье мы поделимся 11 принципами веб-дизайна, которые повышают коэффициент конверсии.

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook