Тема форума: «Материалы сайта. Что можно улучшить?»

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

 

А ты уверен, что речь о том, что все страницы сайта должны быть адаптированы к мобильному просмотру. Может быть достаточно, чтобы конкретные страницы были адаптированы? Например, статьи.

 

Соответственно, если страница настроена для мобильного просмотра, то она поднимается вверх по поиску в случае, если поиск идёт на мобильном устройстве. То есть она не вообще везде поднимается, а только для поиска с мобильных. Это было бы логично, тк поисковая система должна давать удобный для просмотра контент.

 

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

 

Нан, Гугл - это Андройд, браузеры и поиск. Если поиск будет давать неудобные сайты, с которыми даже их браузер не может справиться, то у пользователя будет отрицательный пользовательский опыт и он пойдёт на другой поисковик, который будет уметь выбирать удобные для просмотра сайты.

 

У Гугла есть специальный превьювер, который показывает, как смотрится страница в адаптивной версии и выдаёт ей соответствующую оценку ок/плохо.

 

Но не всё так просто. Например, у меня после того, как я подключил адаптацию к мобильным через CSS начались проблемы с Яндексом. Часть элементов я просто хайдил в CSS, они казались мне лишними в мобильной версии. В итоге возможно поэтому, а может не из-за этого, сайт слетел из десятки практически по всем запросам. Я не уверен в полной мере, что это связано с адаптацией, но в силу того, что никому, насколько я знаю, неизвестно что берёт в расчёт Матрикс.Яндекса (его облучающаяся машина для поиска), некоторая магия с CSS вполне может быть неадекватно воспринята поисковой системой.

 

Поэтому, возможно стоит делать адаптацию не через CSS, а просто сделать отдельную страницу для мобильных типа article?id=100&mobile=1. Мобильную версию страницы можно будет линковать в хедере основной (речь об элементе head). 

 

Кстати, сейчас мобильная версия сайта полностью убита. Метатег meta name=viewport настроен неправильно. Из-за чего IPhone не может сам настроить размер сайта, с чем он раньше прекрасно справлялся. В итоге пользоваться сайтом невозможно. Можешь посмотреть?

 

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

 

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

 

Тут проблема не в Гугл, а в том, что этот сайт (Форнит) написан до эры фреймворков и эры мобильных устройств.

 

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

 

автор: daxon71 сообщение 43849:

По поводу горизонтальной прокрутки, считаю, что для текста важно листать вниз.

Да, я вчера сам убедился, пролазив по сайту и уже улучшил показ статей. Но это получился компромисс, так что попробую сделать полностью, используя ob_start(). Нужно тоже сделать для форума и обсуждений.

автор: Айк сообщение 43850:

А ты уверен, что речь о том, что все страницы сайта должны быть адаптированы к мобильному просмотру. Может быть достаточно, чтобы конкретные страницы были адаптированы? Например, статьи.

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

автор: Айк сообщение 43850:

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

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

автор: Айк сообщение 43850:

озможно стоит делать адаптацию не через CSS, а просто сделать отдельную страницу для мобильных

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

автор: Айк сообщение 43850:

Метатег meta name=viewport настроен неправильно. Из-за чего IPhone не может сам настроить размер сайта, с чем он раньше прекрасно справлялся. В итоге пользоваться сайтом невозможно.

Да, это нужно исправлять точно.

 

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

Статьи вроде бы сделал и про http://scorcher.ru/adaptologiya/happiness_illusion/happiness_illusion.php гугл и яндес хором говорят, что все в поряде :)

Одно дело, когда просто хотим оптимизировать сайт, ради мобильной выдачи, учитывая формальные признаки поисковиков (например, запрещаем горизонтальную прокрутку и срубаем все, что не влезает), а другое, когда на самом деле делаем удобным сайт для мобильных пользователей. Считаю, что нельзя пренебрегать, а то ведь человек с телефона, попав на обрубленную страницу быстро свалит с сайта. Чем более избыточная верстка (огромное количество лишних HTML элементов) и смешанная (CSS стили весят в атрибутах непосредственно на элементах, а не вынесены в отдельную таблицу стилей), тем более сложно будет сделать сайт адаптивным.
Адаптивная верстка это именно верстка, которая адаптируется с помощью условных стилей (в простейшем случае пишем условие на ширину экрана устройства). Это значит, что по-сути не нужно ничего программировать и ставить условия в скриптах, иначе будет винегрет с трудноотловимыми багами, не говоря о том, что это тяжкий труд. Даже к помощи скриптов на клиентской стороне стоит обращаться в последнею очередь, когда с помощью стилей ничего нельзя поделать.
Кароче, я сделал пример, что бы сразу наглядно было.
Когда используются стили то все шустро адаптируется и на лету, при этом нужно немного кода, что бы кардинально что-то изменить и адаптировать. Все строиться на CSS медиозапросах (@media), которые описывают условия, при которых нужно использовать тот или иной стиль к элементам - это удобно и прозрачно. Суть в том, что мы выбираем опорные точки, которые представляют из себя условия, например, на ширину экрана (в простом случае), мы избирательно активируем те или иные стили. Так можно полностью перекомпановывать сайт как угодно.
Считаю, что не стоит шаманить с буферизацией и всякими сложными скриптами, когда все можно сделать одними стилями. Обрати внимание, как в моем примере, адаптируется всплывающее меню.

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

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

 http://scorcher.ru/adaptologiya/happiness_illusion/happiness_illusion.php

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

автор: nan сообщение 43861:

вот как послупить с длинным словами не придумал.

Можно переносить по буквам, если не влезает, CSS свойство word-wrap со значением break-word

автор: daxon71 сообщение 43862:

Можно переносить по буквам, если не влезает, CSS свойство word-wrap со значением break-word

Прикол в том, что в таблицах просто так это не работает. Пока не догадался применить table-layout:fixed

Вот в таком виде работает:

<div style="width:98%;max-width:1000px;word-wrap:break-word;">

<table border=1 style="width:98%;max-width:1000px;table-layout:fixed; "><tr>

<td>11111111 2222</td><td style="word-wrap:break-word;">

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</td></tr>

</table>

</div>

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

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

С диалогами выкрутился вроде.

Кто как думает, какие еще страницы нужно адаптировать?

Верхнее меню становится в два ряда для устройств с экраном меньше 500 и 3 ряда для до 1000,там ничего не нужно прокручивать, хотя в статьях чуть срезается, но не мешает (исправлю).

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

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

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

Короче, я обнаглел и с помощью ob_start адаптировал почти все страницы. Могут быть очень странные глюки, я пока не заметил, вроде удалось сделать корректно для самых разных видов страниц.