Мар 18, 2015 - 0 Comments - Без рубрики -

Мобильная версия сайта, или Как вернуть старый дизайн

Очень много вопросов я получил в комментариях на тему «нового дизайна сайта». Поэтому постараюсь сейчас разъяснить ситуацию, чтобы вопросы отпали.

Недавно на почту мне упало письмо от Google, которое пристыдило меня тем, что у нас сайт по мнению робота смотрится плохо на мобильных устройствах. В специальном окне проверки выдавался рейтинг удобства около 40 из 100. И шрифты якобы слишком мелкие, и элементы сайта на мобильных расположены близко друг к другу и ещё десяток всяких проблем.

Я прикинул разные варианты исправления ситуации. В моём случае их было два основных:

  • сделать адаптивный дизайн на основе существующего, так как он мне нравится
  • сделать мобильную версию сайта

Адаптивный дизайн — это такой дизайн, который подстраивается под размеры экрана. Покопавшись в коде я понял, что своими силами мне существующий дизайн не переделать. Слишком многое пришлось бы поменять, что равнялось бы новой вёрстке, а это заново пришлось бы задействовать дизайнера и верстальщика.

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

Мобильная версия сайта

Возможности мобильной версии:

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

Мобильная версия сайта

В этом меню есть рубрики и категории.

Мобильная версия сайта

Вместо вывода.

Теперь пользователь сайта iPadstory.ru может в любой момент на мобильных девайсах переключаться между мобильной версией (которая удобна на маленьких экранах) и привычной компьютерной.

По рейтингу Google мобильная версия по удобству для посетителей получила 99 из 100. Ну значит, я всё сделал правильно.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *