Адаптивная верстка под мобильные устройства

Автор Nic Verov, 10 Дек. 2017 в 17:53

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

Nic Verov

Для многих это слово может показаться новым и не знакомым, но по статистке, которую я собираю уже неделю 57% людей используют мобильные устройства у нас на форуме.
А на форуме нет под это условий... к сожалению...
Адаптивная верстка это http://fb.ru/article/164285/adaptivnaya-v-rstka-dlya-saytov, для любознательных =)
Кто, что думает по данному вопросу?
Для того, чтобы оценить адаптивную верстку вот Вам ссылочка
http://test.electrotransport.ru/ussr/index.php
только заходите с мобиьльных

P.S. там есть на выбор две темы - "профиль" - "внешний вид форума" и две темы на выбор "Native" и "Offside". На цветовые решения и т.п. не смотрите. Это тестовые темы. Смотрите как они работают с мобильных устройств.


Midas

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

Nic Verov

Цитата: Midas от 10 Дек. 2017 в 22:38
А что тут думать - статистика говорит сама за себя (причем на моем сайте она аналогичная). Я честно пытался юзать форум со смартфона, но это издевательство. Пришлось отказаться.
Поэтому я категорически уверен в необходимости адаптивного дизайна.

Да уж... я тоже уже отвык на смартфоне сидеть как на компе...

LeoDron

Было бы очень здорово, а то отсутсвие адаптации под смартфоны сильно раздражает - особенно сообщения писать: порой приходится сообщение сначала в емайл-клиенте или как смс писать, а потом его в окно сообщения на сайте копировать - очень не удобно. 
«Конёк Горбунoк»-Колёса: 16"; Single speed: 48/12T; 2MК (YOUE,250W,8Т); Kонтролёры: 2xКТ 14A; Батарея:36В/27Ач; Вес: ~150 кг; Макс. ск. : 28 км/ч
Симулятор: https://www.ebikes.ca/tools/simulator.html?bopen=true&motor_b=MG01_STD&motor=MG01_STD&batt=B3614_PF&batt_b=B3614_PF&autothrot=false&cont=cust_14_50_0.1_V&cont_b=cust_14_50_0.1_V&mass=150&mass_b=150&hp=0&hp_b=0&throt=100&grade=&grade_b=0&k_b=1&throt_b=100&whee&wheel_b=16i&wheel=16i&add=true&blue=Lbs

Den01

В этой части я не новатор. Мне понятнее какой-нибудь ZX Spectrum или ЕС-1840 ;-D .
Спойлер
К тому, что вся эта адаптация стала ответом на поначалу невысокое разрешение экранов мобильных устройств, небольшой размер этих экранов и несколько иное управление.

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

В пределе было бы правильно стандартизировать страницу сайта, примерно, как международно стандартизирован формат А4. Но так, справедливости ради - придём к исключению письма в современной форме, одному международному языку, пока телепатия плохо развита, далее бессмысленности общения как такового, бессмысленности обмена информацией, бессмысленности информации, 42 и тому подобному ;-D .

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

Пока это не так - да, сейчас остаётся адаптировать. Но это, по-сути, подпорка для подпорки.

Nic Verov

Для того, чтобы оценить адаптивную верстку вот Вам ссылочка
http://test.electrotransport.ru/ussr/index.php
только заходите с мобиьльных

P.S. там есть на выбор две темы - "профиль" - "внешний вид форума" и две темы на выбор "Native" и "Offside". На цветовые решения и т.п. не смотрите. Это тестовые темы. Смотрите как они работают с мобильных устройств.

Midas

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

Nic Verov

Цитата: Midas от 11 Дек. 2017 в 18:36
Попробовал - но ссылка "Профиль" в меню ничего не открывает. По умолчанию там вроде бы тема Offside. Ну что сказать - лучше, конечно. Особенно в списке форумов. Но вот сами сообщения в ветке как-то неудобно выглядят: аватар с атрибутами сообщения слишком много места занимают, да и непривычно видеть это по центру.

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

Про это?

tmiaer


Nic Verov

Цитата: tmiaer от 11 Дек. 2017 в 20:10
Дизайн менять не надо.

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

Lion

Если "адаптивная" на мобилке будет такая, то лучше не надо...








>
>
>
50сс скут > 500w скут > 70сс скут > 1Kw @ 1Kwh вел > 4Kw @ 2Kwh вел > 6Kw @ 4Kwh мопед > 12Kw @ 5Kwh мопед (Проект "Луноход")

Nic Verov

#11
[user]Lion[/user]
Дизайн даже не начинали делать.
Просто развернули. И прилепили шапку.
К вопросу об адаптивности
1. Меню для удобной работы с форумом, там будут все настройки и активные темы и личные сообщения и т.п.

2. Вот так выглядит сейчас... Только не смотрите на дизайн, а именно на мысль исполнения. Так как адаптивность под мобильные устройства предполагает легкость использования и легкость загрузки.

И как планируется

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

Midas

Цитата: Nic Verov от 11 Дек. 2017 в 18:58Про это?
Не, про сообщения внутри темы:

Очень много места отжирает вот этот блок (ава + инфо) на экране смартфона. Аву однозначно надо уменьшить, ну и все это куда-то влево загнать, а текст сообщения пусть будет справа (возможно, с обтеканием). Чтобы примерно так было:


SolarRay

[user]Nic Verov[/user], сделать адаптацию для устройств с небольшим экраном, это хорошая идея.
Но просто обрезать, это не очень хорошо, нужно что-бы информативность не страдала. В случае со списком тем, можно добавить ниже строчку или две, с тем что обрезано.
А вот с сообщениями, формами ответов, итп, так просто не сделать, придётся что-то придумывать.

Захожу с планшета (android 2048х1536 8"), стандартная тема хоть и не идеальна, но вполне устраивает. Полагаю, что из 57%, планшетопользователей довольно много. Так что возможно, ситуация не столь критична и есть время на раздумья и разработку.

Nic Verov

Цитата: SolarRay от 12 Дек. 2017 в 00:49
[user]Nic Verov[/user], сделать адаптацию для устройств с небольшим экраном, это хорошая идея.
Но просто обрезать, это не очень хорошо, нужно что-бы информативность не страдала. В случае со списком тем, можно добавить ниже строчку или две, с тем что обрезано.
А вот с сообщениями, формами ответов, итп, так просто не сделать, придётся что-то придумывать.

Захожу с планшета (android 2048х1536 8"), стандартная тема хоть и не идеальна, но вполне устраивает. Полагаю, что из 57%, планшетопользователей довольно много. Так что возможно, ситуация не столь критична и есть время на раздумья и разработку.

49% смартфоны, 8% планшеты. Остальное Пк...
Да уж картина кардинально поменялась.

AlexP

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

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

\лектросамокаты - зачем в описании писать снова электросамокаты ксиаоми и найнбот
вопервых два разных продукта, во вторых второй раз слово электросамокаты
(напртив рубрики можно поставить цифру цитируемости или количество ответов в теме)
например с моноколесами
* Inmotion 1233
* Gotway 824
* Kingsong 620
* Ninebot 221
* Airwheel 123
* Rockwhel 15

Такой способ отображения сразу же покажет новичкам основные бренды и активность их пользователей
Вот такие мысли

iSpeed

Странно, что опять вопрошают мнения общественности, когда уже везже адаптив )))
Отстаёте на 5 лет минимум, товарищи админы ;)
Inmotion V8+ L4Rv2 (M50LT)

Nic Verov

Цитата: iSpeed от 16 Дек. 2017 в 02:35
Странно, что опять вопрошают мнения общественности, когда уже везже адаптив )))
Отстаёте на 5 лет минимум, товарищи админы ;)

Я тут админ 1,5 недели. Поэтому кто и куда отстает не ко мне.

iSpeed

Цитата: Nic Verov от 16 Дек. 2017 в 09:48
Цитата: iSpeed от 16 Дек. 2017 в 02:35
Странно, что опять вопрошают мнения общественности, когда уже везже адаптив )))
Отстаёте на 5 лет минимум, товарищи админы ;)

Я тут админ 1,5 недели. Поэтому кто и куда отстает не ко мне.

Меньше оправданий, больше дел ;)
Inmotion V8+ L4Rv2 (M50LT)

baddl

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

Какие-то резоны по переносу её с обычного места есть?

Nic Verov

Цитата: baddl от 17 Дек. 2017 в 00:08
Расположение иконки разворота меню справа наверху - не лучший выбор:
- периодически задевается при прокрутке (левшей тоже жалко, но всё-таки их меньше),
- сам факт того, что что-то справа вдруг включает что-то слева, немного когнитивно диссонирует утомлённый электродумами мозг...

Какие-то резоны по переносу её с обычного места есть?


То есть перенести влево ее?

baddl

Логичное расположение пиктограмм: 1 - вверху слева, 2 - внизу справа.
ИМХО

proekcionika

Не знаю как у других, но у меня тупить начинают айпад и андроиды  когда на странице много Смайлов прыгающих.
Особенно зависает страница когда пишу сообщение, и в 1 из трех случаев зависает на глухо и приходится убивать браузер и запускать заново его с потерей написанного текста((((
Как раз на странице написания сообщения много Смайлов и над окошком сообщения, и внизу страницы где показаны сообщения тоже смайлы, и плюс окошко рекламы слева вверху в шапке сайта тоже подвижное. Все эти подвижные детали и тормозят по-моему
Eltreco Rhino 48V, (1kW), Ливер.
JackHot Carbon.

Nic Verov

Цитата: proekcionika от 20 Дек. 2017 в 14:47Не знаю как у других, но у меня тупить начинают айпад и андроиды  когда на странице много Смайлов прыгающих.
Особенно зависает страница когда пишу сообщение, и в 1 из трех случаев зависает на глухо и приходится убивать браузер и запускать заново его с потерей написанного текста((((
Как раз на странице написания сообщения много Смайлов и над окошком сообщения, и внизу страницы где показаны сообщения тоже смайлы, и плюс окошко рекламы слева вверху в шапке сайта тоже подвижное. Все эти подвижные детали и тормозят по-моему
а что за планшет?

proekcionika

Айпад 2 (реальный второй а не следующие версии)) с iOS 8 какой то.
Ну а андроиды обычные телефоны zte, Sony, и т д.
Eltreco Rhino 48V, (1kW), Ливер.
JackHot Carbon.

Nic Verov

Цитата: proekcionika от 20 Дек. 2017 в 14:52Айпад 2 (реальный второй а не следующие версии)) с iOS 8 какой то.
Ну а андроиды обычные телефоны zte, Sony, и т д.
Странно... у меня все нормально работает. У меня правда не айпад2, а чуть новее.
Под слабыми андроидами не тестил - сделаю.

electro05

Начну с видимости списка разделов и подразделов. Вот так все подразделы смещаются на Opera 12.
Спойлер






Dualtron 2 EX+ (весна 2017)

electro05

[user]Nic Verov[/user], А можно в голосовалку добавить какой-то нейтральный вариант. А то мне не один не подходит. Адаптивная верстка под мобильные, лично мне не нужна, потому-что я вообще не заходу сюда с мобильных или планшетов. Соответственно я не голосую ДА. Но с другой стороны я не буду нажимать НЕТ, т.к. может быть кому-то она и нужна. Зачем мне, кому в данном случае всеравно, как-то отдалять от положительного результата тех кому это нужно. Ну и третий вариант, може мимо.
Можно добавить, что-то типа БЕЗРАЗЛИЧНО, НЕ ЗАХОЖУ С МОБИЛЬНЫХ УСТРОЙСТВ?
Dualtron 2 EX+ (весна 2017)

Nic Verov

Цитата: electro05 от 20 Дек. 2017 в 15:24Начну с видимости списка разделов и подразделов. Вот так все подразделы смещаются на Opera 12.
Я как бы ничего не хочу сказать, но сейчас версия оперы 49.0.2725.47
То есть 49.
А у Вас 12...)))

Добавлено 20 Дек. 2017 в 15:35

Цитата: electro05 от 20 Дек. 2017 в 15:32Можно добавить, что-то типа БЕЗРАЗЛИЧНО, НЕ ЗАХОЖУ С МОБИЛЬНЫХ УСТРОЙСТВ?
Можно вообще не голосовать тогда)

electro05

Цитата: Nic Verov от 20 Дек. 2017 в 15:35
Цитата: electro05 от 20 Дек. 2017 в 15:24Начну с видимости списка разделов и подразделов. Вот так все подразделы смещаются на Opera 12.
Я как бы ничего не хочу сказать, но сейчас версия оперы 49.0.2725.47
То есть 49.
А у Вас 12...)))
Да. И это не просто так. Это последняя версия Опера до перевода её на движок Хром и полного изуродования её интерфейса. Для движка Хром у меня есть Google Chrome, но там нет того что было в интерфесе старой оперы.
Цитировать

Добавлено 20 Дек 2017 в 15:35

Цитата: electro05 от 20 Дек. 2017 в 15:32Можно добавить, что-то типа БЕЗРАЗЛИЧНО, НЕ ЗАХОЖУ С МОБИЛЬНЫХ УСТРОЙСТВ?
Можно вообще не голосовать тогда)
Можно, но тогда не видно результатов. ))
Dualtron 2 EX+ (весна 2017)

Dimy4

С компа захожу с доХромовской Оперы, всем доволен.
С планшета на Андроиде захожу с мобильной Оперы, не логинясь, как гость, всем доволен.
Буду до упора обходиться без Хрома и других гугло-продуктов.
Т.е. если с Операми начнутся проблемы - будуь любые Фаерфоксы, Макстоны, Эксплореры, не НЕ гугель.
Я лечу по Кутузу во мгле-еее, я к родной приближаюсь Земле-еее    :dash:
Контр искрит, всё болит, батарея дымит, я - пилот KS14БЭээээ.. ))

   :-D   (с)) песня из к\ф "Адский тошнопрыг", 1945г. Дармовые Электротранспортные Консультации

electro05

Цитата: Dimy4 от 20 Дек. 2017 в 15:57
С компа захожу с доХромовской Оперы, всем доволен.
С планшета на Андроиде захожу с мобильной Оперы, не логинясь, как гость, всем доволен.
Буду до упора обходиться без Хрома и других гугло-продуктов.
Т.е. если с Операми начнутся проблемы - будуь любые Фаерфоксы, Макстоны, Эксплореры, не НЕ гугель.
А куда заходите то? Мы про тестовый вариант форума по адресу http://test.electrotransport.ru
А вы?
Dualtron 2 EX+ (весна 2017)

Nic Verov

Цитата: electro05 от 20 Дек. 2017 в 15:46Можно, но тогда не видно результатов. ))
Мой 486 итак ели тянет Ваш форум...
Вот хороший пункт в голосовалке)))

igoree

Если мобильник расположить горизонтально, то очень неудобно в каждом сообщении отображается аватар и информация о пользователе
Спойлер

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