В чем заключается серверная часть реагирующего дизайна?

Question

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

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

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

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

Answer 1

Рассматривали ли вы использование AJAX для передачи данных о размере экрана обратно на серверную php? Затем выполните запросы на основе соответствующего CSS-дизайна. Ваша проблема возникает, если у вас есть мобильные устройства, которые не поддерживают JavaScript или браузеры, которые его отключили. У вас также есть дополнительное обслуживание - если вы измените свой CSS для отображения более или менее, ваши сценарии должны быть обновлены, чтобы оставаться в синхронизации.

В целом, я считаю, что CSS-запросы СМИ предназначены для оптимизации отображения содержимого различных размеров, но игнорируют «потери» контента. Это может означать, что дополнительные запросы/вычисления/содержимое загружаются, но скрыты. Поверхность этого заключается в том, что если ваш пользователь работает в браузере, который уменьшен, а затем они максимизируют его, они получают свежий показ полной страницы. Однако, если у них нет полного набора контента, они не смогут полностью использовать его, если они не обновят страницу.

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

Answer 2

@jakobud Вы можете ознакомиться со следующими статьями и презентациями, в которых обсуждаются способы объединения обнаружения функций на стороне клиента и на стороне сервера в контексте мобильного и/или адаптивного дизайна.

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

Answer 3

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

Однако, мое понимание движения «Ревизионное проектирование» (если это целесообразно назвать?) Заключается в предоставлении веб-страницы по умолчанию, которая разумно масштабируется для всех размеров устройств, путем изменения способа отображения.

Если ваш веб-ресурс таков, что некоторые взаимодействия или информация, представленная в полной версии жира на ПК или ноутбуке, становятся совершенно непрактичными или неуместными, то, возможно, настало время создать мобильную версию вашего сайта или родную приложение для смартфонов. В этот момент вы можете сделать что-то серверное, чтобы обнаружить браузер и перенаправить с www.example.com на mobile.example.com.