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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ответов: 43

  1. volgin7
    18.03.2015

    Красиво получилось, Дим! Частенько захожу на сайт с АйФона.
    И, к слову, как первый раз на днях увидел — сразу понял, что это мобильная версия сайта ;) А уж как переключиться на основную версию тем паче было понятно ☺️

    [Ответить]

    sputnik1818 Reply:

    Вопросы задавали постоянные читатели сайта. Поэтому чтобы не отвечать 5 раз на дню — написал эту статью:)

    [Ответить]

    Ответить

  2. I)EI/I4II
    18.03.2015

    Дмитрий, плюньте на гугл, когда дело касается этого замечательного сайта. И вдогонку просьба, или даже вопрос — обзор на Sid Meiers Starships будет?

    [Ответить]

    sputnik1818 Reply:

    Мне одному кажется по видео геймплея и отзывам, что цена на эту игру завышена изначально? На PS3 игры дешевле на распродажах) Пока не решился на покупку.
    Насчет гугла — с 21-го апреля числа все сайты, не адаптированные под мобильную версию будут сильно понижаться в поиске. Да и мобильная версия никому не мешает, если есть возможность переключится на полную. Например, на iPad удобнее нормальной компьютерной версией пользоваться.

    [Ответить]

    sputnik1818 Reply:

    Просили? Сделал.
    А это персональное оповещение:
    http://ipadstory.ru/sid-meiers-starships-na-ipad-civilizaciya-v-kosmose.html
    :)

    [Ответить]

    Ответить

  3. Dmitry
    18.03.2015

    Если зайти на сайт через клиент твиттера, то переключателя на комьютерную версию нету.

    [Ответить]

    Volgin7 Reply:

    К слову, да)

    [Ответить]

    Lenysia Reply:

    Тоже самое с клиента мейл.ру. Но меня не смущает, читаю из почты только статьи, пришедшие по подписке. А так через сафари, полную версию сайта нашла сразу же. Хорошо что браузер запоминает мой выбор, например вк периодически выкидывает на мобильную.
    А вообще удивило что только сейчас сделали мобильную версию, так что молодцы!

    [Ответить]

    Ответить

  4. Елена
    18.03.2015

    Спасибо за мобильную версию!
    Когда есть право выбора — это прекрасно!:)

    [Ответить]

    Ответить

  5. Nemo2333
    18.03.2015

    Спасибо что дали возможность пользоваться старой версией сайта. В новой версии надо делать много кликов доя переключения между разделами. Да и выглядит новая версия сайта уныло. Ещё раз спасибо за сохранение старой.

    [Ответить]

    Volgin7 Reply:

    «новая» и «мобильная» — немного разные понятия

    [Ответить]

    Ответить

  6. Андрец
    18.03.2015

    Спасибо за пояснение. Очень мудрое решение. На ipad я однозначно за старый дизайн, а на iphone … за новый.

    [Ответить]

    Ответить

  7. Сергей
    18.03.2015

    В целом сайт не хуже/не лучше старого, просто иной.
    Возможно выглядит по-современнее, хотя старый мне тоже нравится. Выбрать или/или так и не смог.
    Что потерял лично я:
    Самое главное — нет возможности изменять пальцами массштаб изображения. Это для оего зрения еритично очень. Многие сайты где этой функции нет стали для меня недоступны. (и этона айпаде)
    Отсутствует функция Reader. Или я ее не нашел…
    Кроме того, за поледние пчть лет так ине нашел веской присины заменить свой старенький са ый первый айпад на более новый. А 5-й ios это совсем не то сто нынешний восьмой…. Отсюда все вытекающие проблемы.
    Ну и последнее: — сайт стал похож на многие другие сайты….
    Хотя в этом тоже ничего плохого нет.
    В конце концов, это же не картина чтоб ей любоваться.
    Содержание важнее формы…

    [Ответить]

    sputnik1818 Reply:

    Спасибо за отзыв. Странно, что вы не нашли возможность переключения на компьютерную версию. Разве в браузере с самом низу у вас нет этой кнопки? Старый дизайн как бы не совсем «старый» :) Он и есть основной. Просто мобильная версия включается по умолчанию на мобильных девайсах.

    [Ответить]

    Сергей Reply:

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

    [Ответить]

    Ответить

  8. Марк
    18.03.2015

    Мне старая версия милее. 4 айпад

    [Ответить]

    sputnik1818 Reply:

    Мне тоже) Поэтому внизу переключитесь и забудьте о мобильной версии:)

    [Ответить]

    Ответить

  9. Игорь
    19.03.2015

    Старая версия для меня удобней (iPad2)

    [Ответить]

    Ответить

  10. Владимир
    19.03.2015

    Нашол переключатель. Ура ! Спасибо за статью .

    [Ответить]

    Ответить

  11. Вика
    19.03.2015

    У меня кнопок переключения нет, увы. Очень нравилась прежняя версия сайта. Мобильная просто кастрат убогий.

    [Ответить]

    sputnik1818 Reply:

    Должна быть кнопка) Я точно ни от кого её не скрываю

    [Ответить]

    Ирина Reply:

    Слушайте, ну нет кнопки!!!!!! Где же её взять?

    [Ответить]

    Ответить

  12. Сергей
    20.03.2015

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

    [Ответить]

    Ответить

  13. SirReindeer
    20.03.2015

    В мобильной версии, в разделе текущие скидки, на ipad — иконки приложений растягиваются на весь экран … Хотелось бы маленьких иконок ;)

    [Ответить]

    sputnik1818 Reply:

    Пока не поборол эту беду:)

    [Ответить]

    Ответить

  14. Денис
    21.03.2015

    В приложении Почта Mail.ru «переключатель» на основную версию сайта отсутствует.

    [Ответить]

    sputnik1818 Reply:

    Возможно, почта передаёт идентификатор «взрослой» системы.

    [Ответить]

    Ответить

  15. QQmber
    22.03.2015

    Есть простой способ переключаться на полную версию сайта. Работает на iOS 8. Заходите на сайт, нажимаете на адресную строку, свайп вниз, появляется появляется меню, там есть пункт «полная версия сайта», нажимаем и вы на полной версии. Правда не на всех сайтах адекватно работает (например Яндекс), но на вашем без проблем.

    [Ответить]

    QQmber Reply:

    Этот способ для браузера Safari.

    [Ответить]

    sputnik1818 Reply:

    Apple под нас браузер писала:)

    [Ответить]

    Ответить

  16. Ирина
    24.03.2015

    А почему-то у меня нет кнопки перейти на старый сайт((( Что делать? Пожалуйста, подскажите.

    [Ответить]

    sputnik1818 Reply:

    А где вы смотрите?

    [Ответить]

    Ответить

  17. Станислав
    25.03.2015

    По компьютерной версии сайта я согласен с Google, не особо удобно, но и мобильная что-то простецкая совсем, а Текущие скидки это просто караул конечно.

    [Ответить]

    sputnik1818 Reply:

    От мобильной и требуется простота, чёткие и ясные шрифты, максимально упрощённый дизайн:)

    [Ответить]

    Ответить

  18. Станислав
    25.03.2015

    Это да, но тёмную область слева я бы сделал поменьше :)

    [Ответить]

    Ответить

  19. Совранский
    29.03.2015

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

    [Ответить]

    Ответить

  20. Совранский
    29.03.2015

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

    [Ответить]

    Ответить

  21. Catarina
    30.03.2015

    Лучше бы, при заходе с айпада/мобилки — загружала основной дизайн (текущий) и рассказывала, что есть мобильный. И кнопку переключения на видное место.

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

    Интересно, количество читателей уменьшилось с момента ввода мобильной версии?

    [Ответить]

    sputnik1818 Reply:

    Поверь, я был последним, кто хотел делать эту мобильную версию.

    [Ответить]

    Ответить

  22. Алина
    02.04.2015

    Здравствуйте! По какой-то причине у меня не открывается десктопная версия одного сайта на айпад. Вчера заходила — все было нормально. Пытаюсь открыть через адресную строку — не выходит. Подскажите, пожалуйста, что делать?

    [Ответить]

    Ответить

  23. Цветок
    02.04.2015

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

    [Ответить]

    sputnik1818 Reply:

    Постараюсь:) А разве браузер не запоминает?

    [Ответить]

    Цветок Reply:

    Хм, у меня safari на ipad не запоминает и открывает всегда версию для мобильных устройств….

    ios 7

    [Ответить]

    Ответить

Ответить

 

 

 

Наверх
мобильн. компьютерная