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

Дата: 18.03.15
Автор:
рубрика: новости об iPad
43 комментария


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 звезда2 звезды3 звезды4 звезды5 звёзд (Ещё никто не присваивал рейтинг статье. Будьте первым!)
Загрузка...


43 комментария к записи: “Мобильная версия сайта, или Как вернуть старый дизайн”

  1. volgin7:

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

    • sputnik1818:

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

  2. I)EI/I4II:

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

    • sputnik1818:

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

    • sputnik1818:

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

  3. Dmitry:

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

    • Volgin7:

      К слову, да)

    • Lenysia:

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

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

  5. Nemo2333:

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

  6. Андрец:

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

  7. Сергей:

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

    • sputnik1818:

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

      • Сергей:

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

  8. Марк:

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

  9. Игорь:

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

  10. Владимир:

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

  11. Вика:

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

  12. Сергей:

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

  13. SirReindeer:

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

  14. Денис:

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

  15. QQmber:

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

  16. Ирина:

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

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

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

    • sputnik1818:

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

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

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

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

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

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

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

  21. Catarina:

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

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

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

  22. Алина:

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

  23. Цветок:

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

Оставить комментарий