Адаптивный сайт по фэн-шую

Главные вкладки

Аватар пользователя Majestio Majestio 22 октября 2017 в 21:48

Приветствую!

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

  • Bootstrap Layouts
  • Chaos Tool Suite
  • Page Manager
  • Panels
  • Paragraphs

Но, увы, даже с помощью них не могу понять, как мне сделать правильную для меня верстку. В большинстве важных советов слышу одно и то же - "используй CSS". Но, имхо, это не делает сайт адаптивным - это делает (может делать) адаптивной только верстку. А разница есть. Например, отдавать 25-меговый контент по бесплатному вай-фаю, или 1-меговый по мобильному инету. Конечно, программно на HTML/JS определить характеристики инет-канала невозможно, но можно программно определить физические характеристики окна вывода сайта в дюймах, используя ширину/высоту в пикселях и DPI. И уже на этом этапе решать, что грузить. Таким образом, напрашивается одно решение - в каждой странице должен быть JavaScript-загрузчик. Который сперва определяет, что грузить, и только потом грузит. Кстати, так ли это работает в многочисленных адаптивных темах? Если "нет", то как?

Собственно, что мне нужно:

  1. Определить набор размещений (Layout)
  2. Определить набор геометрических размеров окон вывода в дюймах
  3. Мочь привязать часть размещений из набора к любой странице сайта - исходя из набора геометрических размеров окон вывода
  4. Желательно мочь передать в любую вьюху параметрами - используемое размещение

Как я понимаю, п.1 можно сделать с помощью DS?
Как то можно и п.4, наверное через контекстные фильтры? Как?
А вот как решить весь вопрос в том виде, как я описал?

Спасибо.

Комментарии

Аватар пользователя BatKor BatKor 22 октября 2017 в 21:54

Приветствую!
Я делал как то с мультисайтингом, использовал библиотеку мобайл детект, и если он выдавал мобильное устройство то редиректил на поддомен m.exemple.ru. А у него уже своя тема, свои шаблоны, свои стили.

Аватар пользователя Olegars Olegars 22 октября 2017 в 23:16

На стороне сервера нельзя определить какой конкретно экран у клиента, только мобильный\не мобильный. Так что адаптивный шаблон можно сделать только средствами css\js

Аватар пользователя Majestio Majestio 22 октября 2017 в 23:32

Да, я об этом писал выше:

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

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

Аватар пользователя gun_dose gun_dose 22 октября 2017 в 23:37

Если у вас восьмёрка, то там в ядре есть модуль responsive images (или что-то в этом роде). Он позволяет загружать разные разрешения изображения под разные экраны. Всё остальное можно спокойно делать через цсс.

Аватар пользователя Majestio Majestio 22 октября 2017 в 23:45

Всё остальное можно спокойно делать через цсс.

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

Аватар пользователя Andruxa Andruxa 22 октября 2017 в 23:52

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

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

Majestio wrote:

Если не будет анализа и редиректора на каждой странице - можно в поисковике нарваться на мобильную версию, сидя на десктопе.

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

Аватар пользователя Majestio Majestio 23 октября 2017 в 0:16

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

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

Вроде бы раньше поисковики называли такое клоакингом, и пессимизировали за это.

Да, почитал ... http://wiki.rookee.ru/kloaking/. Надо будет подумать. У меня и так сайт планируется 8-ми язычный, в URL'е уже присутствует язык типа http://сайт/ru/страница. Как вариант, попробовать "подмешивать" используемое размещение к языку. Типа http://сайт/ru-s/страница. Поэкспериментирую.

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

Учту. Скорее всего нужно в шапке переключатель повесить "адаптировать или нет" разметку.

Аватар пользователя Andruxa Andruxa 23 октября 2017 в 0:28

Majestio wrote:

планирую восемь

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

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

Аватар пользователя gun_dose gun_dose 23 октября 2017 в 0:32
1

Majestio wrote:

Вообще-то ... планирую восемь)

Не проще ли перешагнуть через себя и всё-таки научиться использовать медиа-запросы?

Аватар пользователя Majestio Majestio 23 октября 2017 в 0:35

gun_dose wrote:

Зачем что-то прятать, кроме картинок?

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

Аватар пользователя gun_dose gun_dose 23 октября 2017 в 0:38

Всё второстепенное задвигается вниз. А реклама и так джаваскриптом грузится, поэтому её показ ограничить не будет проблемой. Плюс, если говорить о множестве разрешений экранов, стоит вспомнить о режиме разделения экрана. Так что надо уже как минимум 16 вариантов))))))))

Аватар пользователя Andruxa Andruxa 23 октября 2017 в 4:14

А ведь есть ещё такой критерий, как правши-левши.
Из-за особенностей работы полушарий, визуальная информация воспринимается ими по-разному.
Вот, например, первая попавшаяся в поиске ссылка, а я читал об этом в какой-то толстой книге по боевому НЛП.

Аватар пользователя Majestio Majestio 23 октября 2017 в 0:41

gun_dose wrote:

Не проще ли перешагнуть через себя и всё-таки научиться использовать медиа-запросы?

))) не проще ли внимательно прочесть первое сообщение?

В большинстве важных советов слышу одно и то же - "используй CSS". Но, имхо, это не делает сайт адаптивным - это делает (может делать) адаптивной только верстку. А разница есть.

Медиа-запросы, повторюсь, работают с оформлением, но не с содержимым! За исключением картинок, там да - можно подсовывать забитые хард-кодом в стиле. Мне не надо так.

Аватар пользователя Majestio Majestio 23 октября 2017 в 0:45

gun_dose wrote:

Всё второстепенное задвигается вниз

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

Аватар пользователя Majestio Majestio 23 октября 2017 в 0:50

gun_dose wrote:

Так что надо уже как минимум 16 вариантов))))))))

Никаких 16 не будет - я планирую 8. Решать будет скрипт, а-ля:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Test viewport</title>  
  <script type="text/javascript">
    var width = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

    var height = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
    document.write('<p>Your viewport width is '+width+'x'+height+'</p>');
</script>
</head>

<body>
</body>
</html>

Аватар пользователя Olegars Olegars 23 октября 2017 в 1:13

"на смартфоне - 1920х1080." -для смартфона не в реальных пикселях считается, а в CSS пикселях (кажется так), там 1:3 или типа того, в итоге для смартфона разрешение будет 480x320 (могу ошибаться)

Аватар пользователя Majestio Majestio 23 октября 2017 в 1:19

Andruxa wrote:

Размеры вьюпорта - вообще ни о чем.

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

Аватар пользователя Majestio Majestio 23 октября 2017 в 1:22

Olegars wrote:

"на смартфоне - 1920х1080." -для смартфона не в реальных пикселях считается, а в CSS пикселях (кажется так), там 1:3 или типа того, в итоге для смартфона разрешение будет 480x320 (могу ошибаться)

Вот тут неплохо все расписано.

Аватар пользователя BatKor BatKor 23 октября 2017 в 1:24

Не надо целых 8.
Достаточно определиться с содержимым HTML. На планшетах и ниже одно, наостальных другое. Или вариант сделать на js фреймворка. Получать и строить ту структуру которую запросил клиент. Конечно же дело ваше с выбором способа реализации вашей задачи.
П.С. Не стоит критично относится к комментария здесь спецы с большим ВЛД. Скоро и вы в такого превратитесь:-) если только не уже

Аватар пользователя Olegars Olegars 23 октября 2017 в 1:48

"Если у вас восьмёрка, то там в ядре есть модуль responsive images (или что-то в этом роде). Он позволяет загружать разные разрешения изображения под разные экраны"
для семерки тоже есть

Аватар пользователя ХулиGUN ХулиGUN 23 октября 2017 в 2:42

Majestio wrote:

как мне сделать правильную для меня верстку. В большинстве важных советов слышу одно и то же - "используй CSS". Но, имхо, это не делает сайт адаптивным - это делает (может делать) адаптивной только верстку. А разница есть. Например, отдавать 25-меговый контент по бесплатному вай-фаю, или 1-меговый по мобильному инету. Конечно, программно на HTML/JS определить характеристики инет-канала невозможно, но можно программно определить физические характеристики окна вывода сайта в дюймах, используя ширину/высоту в пикселях и DPI. И уже на этом этапе решать, что грузить.

В таком случае Вам следует лучше изучить понятие адаптивности. О клоакинге уже писали выше.
Не знаю, как работает responsive images, если на пресетах, то это беда

Аватар пользователя VasyOK VasyOK 23 октября 2017 в 4:25

Olegars wrote:

"на смартфоне - 1920х1080." -для смартфона не в реальных пикселях считается, а в CSS пикселях (кажется так), там 1:3 или типа того, в итоге для смартфона разрешение будет 480x320 (могу ошибаться)

А разве не от настроек масштабирования зависит? Или это и есть оно по другому названое?

По делу. Автор, стоит дождаться выхода https://www.drupal.org/project/context_breakpoint или альтернативы (может и сейчас есть, не в курсе). Ну или другую тему в зависимости от разрешения. Под это тоже модули есть.

Аватар пользователя Majestio Majestio 23 октября 2017 в 8:18

****GUN wrote:

В таком случае Вам следует лучше изучить понятие адаптивности. О клоакинге уже писали выше.

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

Аватар пользователя Majestio Majestio 23 октября 2017 в 8:46

VasyOK wrote:

По делу. Автор, стоит дождаться выхода https://www.drupal.org/project/context_breakpoint или альтернативы (может и сейчас есть, не в курсе). Ну или другую тему в зависимости от разрешения. Под это тоже модули есть.

Интересный подход! Надо будет поразбираться.

Аватар пользователя ХулиGUN ХулиGUN 23 октября 2017 в 12:35

Majestio wrote:

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

И там говорится, что они должны отдавать разный контент? (Всё что не относится к html тегам есть контент)
gun_dose wrote:

Почему беда? И как будет не беда?

Ну то есть при "грамотном" подходе каждое загруженное изображение получит как минимум по 3 прессета.. ну или 8? Всё это я считаю бесполезным мусором. Одно дело, когда в сайт долбятся одновременно 10кк анонимов, а другое - 3 калеки(мама, друг и сам разраб)

Аватар пользователя Majestio Majestio 23 октября 2017 в 13:04

****GUN wrote:

И там говорится, что они должны отдавать разный контент? (Всё что не относится к html тегам есть контент)

Там как обязанность - это не отмечено. По всему тексту нет упоминания о разном контенте. Но есть один абзац, где это практикуется, как вариант:

Сначала мобильные («Mobile first»)
Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное.

Аватар пользователя Majestio Majestio 23 октября 2017 в 13:21

Вопрос с "клоакингом" в разрезе моих "хотелок", считаю, можно закрыть!
Вот неплохая статья по этой теме от 31 июля 2015, а вот интересная цитата оттуда:

Несколько месяцев назад мы задали вопрос по поводу опасений попасть в разряд клоакинга в службу поддержки Яндекса и получили следующий ответ: «Если посадочная страница релевантна объявлению и ключевому запросу, не будет никаких проблем».

Аватар пользователя fairrandir fairrandir 23 октября 2017 в 14:23

Видео грузить точно на мобилку не стоит. Лучше js-ом подгружать.
Адаптивные картинки с помощью picture - вполне норм вариант. Стилей достаточно двух-трёх. (мобилка, планшет, всё что выше - то десктоп).
Не грузить на мобилку лишние стили - тоже вполне неплохое решение. Группировка файлов по медиа-запросам в advagg есть.
Не грузить на мобилке неиспользуемые скрипты - вопросик посложнее, но тоже решаемо, если заморочиться.
Разметку в целом можно вообще не трогать, те 5-6Кб разницы от скрываемой разметки - это капля в море.

Аватар пользователя gun_dose gun_dose 23 октября 2017 в 17:22

КококоGUN wrote:

Ну то есть при "грамотном" подходе каждое загруженное изображение получит как минимум по 3 прессета.. ну или 8? Всё это я считаю бесполезным мусором. Одно дело, когда в сайт долбятся одновременно 10кк анонимов, а другое - 3 калеки(мама, друг и сам разраб)


А как правильно то?

Аватар пользователя ХулиGUN ХулиGUN 23 октября 2017 в 18:33

Ган_Дос wrote:

А как правильно то?

vbard wrote:

А как надо-то? уменьшать картинки на каждом запросе?

Ну да))))
Ну например так http://nginx.org/ru/docs/http/ngx_http_image_filter_module.html
Причём сервак не грузит, отрабатывает моментально, при увеличении посещалки можно родной нжинковский кеш включить при желании. Для 3-х калек можно без кеша. На личном опыте месячный кеш давал производительность максимум 10-15% так что необходимость его использования далеко под вопросом. Как правило кропалки и ресайза хватает за глаза

Аватар пользователя vbard vbard 23 октября 2017 в 18:52

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

Аватар пользователя vbard vbard 23 октября 2017 в 21:23

С другой стороны, чото щас подумал, а чой-то он, сильно быстрее php-gd работает? Он же всё равно работает через libgd, правильно?

Аватар пользователя ХулиGUN ХулиGUN 23 октября 2017 в 19:03

vbard wrote:

Может действительно пригодится, когда пресетов и картинок много

Если интересно то вот применение этой технологии в django https://adw0rd.com/2012/11/10/django-nginx-image/
Там рассказывается про модуль, но весь его смысл сводится только к формированию нужных урлов. В качестве ознакомления можно посмотреть какие урлы из каких делаются и конфиг нжинкса

Аватар пользователя vbard vbard 23 октября 2017 в 21:09

fairrandir wrote:

Не грузить на мобилку лишние стили - тоже вполне неплохое решение. Группировка файлов по медиа-запросам в advagg есть.

Походил по настройкам advagg, не нашёл сходу, подскажите плз, где это?
И главное - что даёт группировка файлов по медиа-запросам?

Аватар пользователя fairrandir fairrandir 23 октября 2017 в 21:44

Прошу прощения, пропустил слово "вроде" перед есть. =/

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

Аватар пользователя Majestio Majestio 23 октября 2017 в 22:04

fairrandir wrote:

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

Вся эта замануха началась, имхо, не с разнообразия устройств вывода. А с возможности моментального изменения разрешения путем поворота устройства и переориентации. Если бы были претензии лет 10 назад, типа "я выставил на монике другое разрешение, а сайт так и не оптимизировался под него" - это были бы единицы на стопицотмильёнов. А сейчас у каждого смартфон, планшет, на алиэкспессе уже и часы с браузерами продают. И кто еще не приобрел чудо современной инженерии под названием "спиннер" - крутят планшеты и смартфоны в салонах общественного транспорта. Мимоходом проклиная веб дизайнеров в плане отсутствия тяги к перфекционизЪму. Тут сопротивляться бесполезно - ибо илита. Говорю не просто так, верите-нет, может совпадение. Сегодня пришлось ехать в метро некоторое время, и пришлось слушать краем уха азы дизайна в вагоне метро от двух подростков. Страшно жить.

Аватар пользователя ХулиGUN ХулиGUN 24 октября 2017 в 7:03

gun_dose wrote:

Ну и в чём разница, где хранить жпег?

Да ни в чём, собсна))) Другое дело зачем? Если к картинкам обратились один раз в жизни, то зачем их хранить вечно? Это первое. Второе. Что происходит при смене/добавлении/удалении прессета с картинками? Как вообще управлять всем этим дерьмищем? При дампе/переносе сайта тянем все картинки со стилями? Я понимаю - друпал для мазохистов, но зачем самостоятельно создавать себе проблемы?
vbard wrote:

С другой стороны, чото щас подумал, а чой-то он, сильно быстрее php-gd работает? Он же всё равно работает через libgd, правильно?

Да, libgd. Начнём с того, что сам по себе php не отличается скоростью среди остальных языков. В статье есть бенчмарк модуля nginx и PIL питонья либа для работы с изображениями, при желании можно найти бенчмарки и с php-gd или сделать их самостоятельно

Аватар пользователя ХулиGUN ХулиGUN 24 октября 2017 в 7:03

gun_dose wrote:

Ну и в чём разница, где хранить жпег?

Да ни в чём, собсна))) Другое дело зачем? Если к картинкам обратились один раз в жизни, то зачем их хранить вечно? Это первое. Второе. Что происходит при смене/добавлении/удалении прессета с картинками? Как вообще управлять всем этим дерьмищем? При дампе/переносе сайта тянем все картинки со стилями? Я понимаю - друпал для мазохистов, но зачем самостоятельно создавать себе проблемы?
vbard wrote:

С другой стороны, чото щас подумал, а чой-то он, сильно быстрее php-gd работает? Он же всё равно работает через libgd, правильно?

Да, libgd. Начнём с того, что сам по себе php не отличается скоростью среди остальных языков. В статье есть бенчмарк модуля nginx и PIL питонья либа для работы с изображениями, при желании можно найти бенчмарки и с php-gd или сделать их самостоятельно

Аватар пользователя multpix multpix 31 октября 2017 в 17:57

Замечательно!

Загрузка кода и инсталляция нового экземпляра дру - одна команда в консоли, и минута работы.
Загрузка и активация контриб модуля - еще одна команда и пару сек работы.

Ждем вашего отчета о browscap )))

Аватар пользователя Majestio Majestio 1 ноября 2017 в 18:34

Может ТСу было бы интереснее чем мне? Smile

Интересно, и обязательно гляну позже! Просто сейчас более другим зело занят.