ТехАдмин

Мобильным пользователям посвящается

ТехАдмин(Москва)
4
05:23 3 68
Мобильным пользователям посвящается

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

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

Меню для мобильных устройств

Как и в случае с пользователями ПК и ноутбуков, основное взаимодействие мобильного пользователя с сайтом производится с помощью трех меню:

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

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

Доступ к меню пользователя осуществляется путем установки "птички" нажатием на чекбокс, размещенный в правом верхнем углу экрана:

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

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

Меню действий на мобильных устройствах с небольшим разрешением экрана выводится в верхней части страниц:

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

Вместо вкладок список вкладок

Некоторые из наших страниц имеют по несколько вкладок, переход по которым в версии сайта для ПК/ноутбуков производится нажатием на нужную вкладку:

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

Особенности мобильного профиля

Попасть в свой профиль можно двумя способами - нажав в открытом меню пользователя на кнопку "Мой профиль" (она первая сверху), или еще проще - нажав  на свой аватар, находящийся в верхнем правом углу каждой страницы сайта:

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

Заключение

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

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

P.P.S. Еще раз пробежавшись по страницам, увидел, что в случае вертикальной ориентации смартфона у видеоролика видна только его левая половина. Эта проблема устранена, и теперь в любом положении смартфона видеокартинка показывается полностью. 

Заодно получилось так, что не только мобильные пользователи, но и пользователи ПК/ноутбуков смогут теперь смотреть размещенные в разделе "Видео" ролики размером в полную ширину нашей страницы (раньше размер картинки был примерно на треть меньше). Правда, это касается только роликов с Ютуба, но таких у нас абсолютное большинство.

На этом пока всё. До новых встреч. Как обычно, замечания, пожелания, конструктивная критика и просто мнения по поводу прочитанного приветствуются.

4
12:04
Цитируя героя юмористического сериала «Пес» сотрудника «подлиции» капитана Игоря Гнездилова -замечательные улучшения для мобильных пользователей «смартофонов»!
14:06
О, а я тоже заметила «Хочу» и, думаю, это слово гораздо ближе по оттенку эмоции по отношению к желанному сорту))).
16:06
Спасибо огромное! А за улучшение по просмотру видео отдельное спасибо! thumbsup