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

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

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


Подписаться

Recent Posts from This Journal

  • Как нам реорганизовать рабкрин

    Катя продолжает ликбез ================================ Оригинал взят у pumchik в Как нам реорганизовать рабкрин Среди прочего, в…

  • Уроки прошлого

    А сегодня я расскажу про одну старую и очень грустную историю. Как то ходила ко мне пара, которым было очень трудно пережить смерть их годовалого…

  • Развод и девичья фамилия

    Сначала про негативные якоря. Которыми могут быть кольца от прошлых браков и много всяких разных вещей. Тут принцип простой: если вам неприятно…


  • 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.

Ну если шаблон и анонсировался как мобильный, щас он точно не мобильный. Мож там настройки какие есть?

Самый простой способ найти реально мобильный шаблон и перетащить сайт на него. Делать из не адаптивного шаблона адаптивный это геморрой тот еще.

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

вопщем, надо искать приличную биржу, старая закрылась :(( я сбегал по ссылке, увы, 404

Гугловская проверка 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, только что посмотрел.
спасибо за наводку.

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

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

Отказался, разбойник: говорит, не интересен ему более графический дизайн, ушел в UX. Я бы сама сделала, но не уверена в своем профессионализме (я тестировщик и UXer, в графическом и веб-дизайне только теоретическую подготовку имею). А так, если еще кого вспомню, напишу.

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

Можно вопрос? Я не очень в WP в теме. Вы его как-то подстраивали под себя или он сам все делает, а вы только пишете контент? То, что у вас есть, я бы еще подкостыляла... (просто интересно, возможно ли такое подкостыляние).

На ВордПрессе просто покупаешь за 100 долларов тему, которых зигилион, и все. Есть бесплатные темы, но они похуже, попримитивнее. А самому писать тему для вордпресса - это надо быть героем шизофренического труда. ВордПресс и так помойка, а в чужой шизофазии сам черт не разберется. Я пробовал. Плюнул. Кусок дерьма. ВордПресс и так медленно грузится без причины. Покупатели по 3 секунды терпение на загрузку испытывать не станут. Он на PHP работает и имеет базу данных на MySQL. Там уже не ВордПресс надо будет оптимизировать для андроида, а сервер для ВордПресса. Я на свой блог поставил бесплатную тему Twenty Twelve, ничего оптимизированная. И пошли все нафиг.


Если под "под словом "подкостыляла" вы имеете в виду изменения и подгонку, то да, я бы тоже:) И делаю это потихоньку, когда есть время. Но его, как водится, никогда не хватает.
Сам шаблон - вот этот: http://www.goodwinpress.ru/shablon-dlya-wordpress-secret-garden-3/ Его, конечно, изначально надо немного настроить (как минимум какие блоки будут показываться, какие нет, какая страница будет главной, ссылки, общая цветовая гамма и т.п.). В целом это как конструктор из кубиков - знай двигай себе как хочется.
Плюс в том, что основные вещи в такие шаблоны уже встроены: автоматическая подстройка под разные виды гаджетов, минимальная сео-оптимизация и т.п. то есть если ты не программист и не планируешь, а на сайт пока не готов тратить какие-то вменяемые деньги - шаблоны ВП самое то.

ПС: и я теперь вообще другой хочу...это затягивает - как одежду новую себе покупать))

Понятно, спасибо )

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

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

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

Спасибо большое!!

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

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

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

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

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

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

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

> то есть, никто специально не делил сайт на разные устройства, а делали сразу под мобильники.

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

Возможно, и вордпресс это "из коробки" поддерживает. (если нет, наверняка есть какой-нить плагин, - вопрос решается 1 строчкой кода).

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

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

Спасибо за помощь!

> Бывает и так, но технически нет ни малейших проблем установить на сайт одну версию для обычных компов и другую - для мобильных устройств.
Обычно пользователи на это ругаюццо как сапожники. Я бы просто адаптивный CSS написала, и вроде выше упоминали, что WP это умеет.

Гуглу, Яндексу, Ленте, и прочим топам не западло, а у кого-то юзеры ругаются как сапожники? Нуу.... Может дело всётки не в "консерватории"(с)?

Мы о двух версиях сайта (для десктопных браузеров и для мобильных) или об адаптивном дизайне?

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

(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