Previous Entry Share Next Entry
Про мобильность
gelena_s
Тут мне попеняли, про наш сайт. Вообще-то, он на WP сделан и приспособлен для мобильных устройств, проверяли.

Но, оказывается, что он все равно не очень удобен именно для всевозможных телефонов-смартфонов. А их среди пользователей уже почти 40%!

Так вот, вопрос в зал: какие есть критерии удобства сайта для мобильных устройств? Может, даже есть какие-то стандарты?


Подписаться

Recent Posts from This Journal

  • «Лабиринт отражений»

    Еще одна ветка комментариев понравилась. В ней отражена очень важная тема, давно которую хотела обсудить. Так вот, в той ветке комментатор вначале…

  • Про порядочных…

    Мне очень в посте про наши стратегии реагирования понравилась ветка про правила. Когда главным аргументом является «хорошие девочки,…

  • Хочешь не быть виноватым? Спроси меня, как.

    И еще про чувство вины, которое возникает там, где надо и не надо. Например, при наезде, описанном у Яны в посте , явно не по делу, то надо…


  • 1
Нифига не похоже что твой сайт оптимизирован. Критерий это чтобы сайт нормально масштабировался и читался без попыток скролить вбок.

Просто сравни
твой сайт на экране телефона: http://mobiletest.me/iphone_5_emulator/?u=http://ressav.ru/

другой сайт на экране телефона: http://mobiletest.me/iphone_5_emulator/?u=http://itspatium.com

Edited at 2017-02-07 09:10 am (UTC)

ну вот Стас, и как это мне поможет? понятно, что надо что-то делать, а что?
Кстати, изначальный шаблон тоже анонсировался и как мобильный, и как Retina ready.

Гугловская проверка mobile-friendly https://search.google.com/search-console/mobile-friendly
Ещё в хроме есть эмуляция мобильных устройств. Действительно выглядит плохо (меню слишком мелкое, шрифт).

Edited at 2017-02-07 09:24 am (UTC)

Открыла с мобильного (андроид) сайт.
Несколько наблюдений:
1- Навигационное меню хоть и вверху но почему-то с трудом читается.
2- тексты и обьявления для перехода с обычного экрана на мобильный лучше располагать один под другим пл вертикали в середине окна.
Еще посмотрю попозже повнимательнее.


Для оптимизации своего сайта для мобильного делала не в ворд пресс, но тоже в "ящичной" системе jimdo.com


Сайт обычно адаптируется для мобильного устройства, причем в зависимости от его размера. Например, верхнее меню с навигацией "схлопывается" в кнопку "гамбургер" (три горизонтальные полосочки), меняется размер изображений, расположение блоков (например, были "плиткой", расположились друг за другом. Это, пожалуй, самое основное. Шрифт увеличивается.

Если говорить о более продвинутых вариантах - то ссылки, например, могут преобразовываться в кнопки или увеличиваться, чтобы было удобнее на них кликнуть пальцем; расположение управляющих элементов оптимизируется так, чтобы можно было управлять сайтом одной рукой, в которой держится телефон.
Стандарт есть например такой. https://www.w3.org/TR/mobile-bp/#d0e116

Можно проверять, как выглядит сайт на мобильном, например нажав в браузере Chrome (на компьютере) кнопку F12, а затем на появившейся панельке в ее верхнем правом углу кнопочку, похожую на телефон (3я слева), с хинтом Responcive Design Mode. Страница откроется в том виде, как она выглядит на телефоне. Можно менять размеры этого "телефона". Если открыть на нем любой современный сайт (хоть магазин, lamoda или asos к примеру) можно видеть как с изменением ширины меняется расположение элементов и управление.

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

У вас сайт не адаптирован вообще и дизайн для мобильных надо переделывать полностью. Вроде не очень много там работы, но лучше сразу взять и переделать, а не костылять по кусочкам. Если хотите, могу посоветовать дизайнера: такого прямо тру, с голыми щиколотками :))

Спасибо, посоветуйте, буду рада!

Купить новую тему для ВП, они автоматически подстраиваются под все основные виды гаджетов. И не надо будет заморачиваться подгонкой.
У меня недорогая тема на сайте стоит, прекрасно адаптирована: http://clubnadomnikov.ru/

Я когда с айпэда открываю, не могу по верхнему меню переходить в разделы. Если только открывать в другом окне их. Но не могу кликнуть и сразу перейти.

Я очень прошу прощения за оффтоп, но закопалась в блоге, не могу найти((( Название препарата (БАДа) от лёгкой депрессии (упрощаю описание). Триптофан, нет? Зашла на Айхерб Мелатонин заказать, а этот вылетел из головы!(((

5- htp. Вначале лучше пробовать чистый, без допрлнительных ингридиентов. Чтоб точно знать- прдходит или нет. Побочки у него нет, почти сразу становится ясно, принимает организм или не особо.

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

Поэтому оптимизированный для мобильных сайт:
- содержит минимально необходимое кол-во оптимизированной графики и прочей media.
- минимум javascript, причём самого простого, легковесного и лёгкого в рендеринге. Очень желательно минифицированного
- рендеринг лучше на чистом css, без javascript. css так же должен быть простой и учитывать возможные слабости, косяки и глюки мобильных браузеров.
- минимальное общее количество внешних файлов, необходимых для рендеренга страницы
- оптимизирован под малый физический размер экрана

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

зы: многие шаблоны уже содержат версию для мобильных.

спасибо за ответы по существу!

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

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

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

(Deleted comment)
Да что тут обидного? Мы же сами вопрос задали. Я все таки далека от айтишных и редакторских тонкостей. Потому любой совет по делу только приветствуется.

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

разрабатывается совместно заказчик + исполнитель
от исполнителя нужны менеджер, верстальщик и арт-директор/дизайнер

нашлась ссылка! галерея, специализирующаяся на адаптивном дизайне.
выставлены примеры красивых решений. можно глянуть, как делают "красивые адаптивные сайты" http://mediaqueri.es/

"капитанская" статья про адаптивный дизайн http://uxgu.ru/tips-for-adaptive-design/

статья Проверить сайт на адаптивность в браузерах Mozilla Firefox и Google Chrome
http://atmpl.ru/publ/useful_information/proverit_sajt_na_adaptivnost/3-1-0-5

Edited at 2017-02-07 12:57 pm (UTC)

Спасибо за развернутый ответ и подсказки!

Это надо тему в стиле bootstrap, который и расчитан для переносных девайсов. Мой сайт на Dokuwiki, WordPress я не люблю. Я поставил темплейт Dokubootstrapsimplified. Работает отлично и на ПиСи и на Андроиде. Хотя DokuWiki и без темплейтов отлично на смартфоне работает и отдельной базы данных на сервере не требует.

А для ВордПресса можешь эти посмотреть:

https://colorlib.com/wp/free-bootstrap-wordpress-themes/

Потом скачай с интернета или установи из самого вордпресса.

Еще бывают темы с пометкой responsive. Те автоматически видоизменяются в зависимости от ширины экрана.

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

Edited at 2017-02-10 12:33 am (UTC)

  • 1
?

Log in

No account? Create an account