Gerenciando blocos em um tema responsivo

15

Estou apenas começando um tema responsivo baseado no Omega, concentrando-me primeiro no layout móvel.

Existem certos blocos que provavelmente serão considerados muito pesados para incluir no layout móvel e outros que precisarão ser introduzidos especificamente para esse layout (menus diluídos, barra de usuários atenuada etc.).

Eu poderia ocultar facilmente os blocos indesejados no layout para dispositivos móveis com CSS e incluir os blocos específicos para dispositivos móveis no layout padrão e ocultá-los (para que eles sejam mostrados apenas para dispositivos móveis), mas isso parece uma maneira muito antiga de pensar sobre isto. Se os blocos não forem mostrados, a sobrecarga extra em que incorrem seria realmente inaceitável (especialmente considerando o número de consultas de banco de dados extras que o conteúdo dos blocos ocultos adicionaria).

Eu estou pensando que deve haver uma maneira limpa e agradável de interceptar o processo de tomada de decisão do bloco no início da compilação da página e excluir / incluir blocos com base em alguma detecção de sistema operacional, mas estou deixando em branco como isso pode ser possível.

Também vou abordar o fato de o Varnish estar em frente a este site, o que deve tornar as coisas mais divertidas :)

Existem módulos / estratégias conhecidas por aí que podem ajudar com isso?

Devo acrescentar que o uso do módulo Context não é uma opção, pois o site já está completo, e movê-lo para o Contexto seria uma tarefa enorme neste momento.

blocks theming

— Clive
fonte

4

Sem dúvida, eu teria usado Panels e um plug-in de acesso de agente de usuário relevante. O contexto provavelmente poderia fazer o mesmo, mas como você já disse, isso não é uma opção. É claro que há a horrível possibilidade de avaliar: a visibilidade do bloco, mas ... Por outro lado, com o Varnish na frente, as consultas adicionais ao banco de dados realizadas pelo bloco podem não ser um grande problema?

— Letharion

@ Letharion Sim, esse é o pensamento, deixe o Verniz remover a tensão. O site tem algumas centenas de milhares de usuários ativos, e o Varnish apenas se envolve em tráfego anônimo. Iremos jogar com o ESI em breve, mas mesmo assim consigo pensar em problemas ... do ponto de vista de SEO, a marcação / menus extras seria pesada e potencialmente confusa, sem mencionar o peso extra (desnecessário) nas páginas para usuários móveis. É difícil!

— Clive

11

Talvez adicione um manipulador de blocos mais inteligente (painéis / contexto / outro) às páginas mais pesadas, para que você possa obter algum ganho com isso sem precisar refazer o site inteiro?

— Letharion

11

Não concordo que isso torne a pergunta estúpida, ou uma mudança de jogo total. O verniz pode ser configurado para lidar bem com o problema, ele simplesmente não saberá como fazer com uma configuração pronta para uso.

— Letharion

2

@Clive: há um velho ditado: "Não existe uma pergunta estúpida, apenas uma resposta estúpida!" ;-)

— AjitS 28/11

4

interceptar o processo de tomada de decisão em bloco no início da criação da página e excluir / incluir blocos com base em alguma detecção de sistema operacional

O verniz está sendo executado na frente deste site

Conforme já observado nos comentários, isso exige que você configure o verniz para não armazenar em cache apenas no URL da solicitação, mas também variar no agente do usuário. Há um exemplo relevante no wiki do verniz, VCLExampleNormalizeUserAgent .

Uma vez que o pedido realmente não acertar o site, você precisa para determinar quais blocos para mostrar e não mostrar. Eu consideraria que não é menos do que um desastre fazer isso com eval , portanto as opções mais comuns restantes são Contexto e Painéis .

Com o site já construído. refazer a colocação de todas as páginas / blocos com qualquer um dos módulos provavelmente não é uma opção, mas com um criador de perfil e a aplicação de 80 a 20 , seria possível obter ganhos significativos de desempenho refazendo apenas páginas específicas.

— Letharion
fonte

Isso é realmente muito interessante, obrigado. O site em questão está no Pantheon, então eu não acho que configurar o Varnish seja uma opção, mas isso se transformou em uma pergunta mais geral do tipo 'como alguém faria isso teoricamente' agora, então isso é muito útil

— Clive

O Pantheon permite que você configure os cookies STYXKEY (no final de helpdesk.getpantheon.com/customer/portal/articles/425726 ) e permite segmentar o que o Varnish armazena em cache / serve para outros usuários.

— Jimajamma

Totalmente espaçado nessa recompensa, eu gostaria de dividi-la entre as duas respostas, mas a vida não é desse tipo. O sistema escolheu Chapabu's para dar a recompensa, então o carrapato verde vai até você, companheiro :)

— Clive

10

Não posso entrar em muitos detalhes, pois não uso nenhum dos módulos há muito tempo (construo todos os meus sites com o Contexto desde o início e não atendi a algo que ainda não criei para um enquanto isso, eu não tive esse problema antes), mas acho que você deve conseguir juntar algo com o Mobile Tools and Spaces.

Espaços

Spaces é um módulo de API destinado a tornar as opções de configuração geralmente disponíveis apenas em todo o site para serem configuráveis e substituídas por "espaços" individuais em um site Drupal. Foi descrito como:

Uma maneira de fazer um site Drupal agir como vários sites

Uma maneira de fornecer grupos orgânicos ou páginas iniciais de usuários muito mais configuráveis e com recursos completos

Uma API generalizada para configuração contextual

Ferramentas móveis

O módulo Mobile Tools fornece aos desenvolvedores do Drupal algumas ferramentas para ajudar a fazer ajustes no seu site com base no dispositivo do visitante.

A página do projeto para o MT diz que não está pronta para produção, o que pode ser um problema - depende da última atualização, pois o último commit foi neste mês.

*EDITAR

ESQUECI COMPLETAMENTE DESTES!

Browscap

O Browscap fornece uma versão aprimorada da função get_browser () do PHP.

Bloco Browscap

O bloco Browscap adiciona opções de visibilidade para bloquear as definições de configuração, permitindo ocultar ou mostrar blocos em dispositivos móveis.

O Browscap depende da configuração do servidor, mas se você pode usá-lo, o segundo módulo fornece configurações de visibilidade extra para cada bloco na página de edição do bloco.

insira a descrição da imagem aqui

— Chapabu
fonte

O bloco Browscap parece realmente promissor, obrigado, vou dar uma olhada nos próximos dias e informar você

— Clive

Opa, isso me escapou totalmente, desculpe pela meia recompensa!

— Clive

0

você pode usar um suporte ao navegador jQuery para obter a resolução da tela:

var browserWidth  = $(window).width();
var browserHeight = $(window).height();

Adicione um script PHP simples para exibir a configuração do bloco relacionado.

— monymirza
fonte

Obrigado, mas isso não significa converter o site inteiro para usar o AJAX para blocos? Eu estou olhando para fazer isso do lado do servidor, se possível

— Clive

0

Você pode usar o Mobile Detect Block, mas atualmente estou procurando uma solução que funcione com a largura da janela e com as AdaptiveThemeconsultas de mídia do módulo Breakpoints para não duplicar esse código e sobrecarregar o download do usuário final mais do que é. Eu também tive resultados mistos com o Mobile Detect, não atendendo a um dispositivo com o qual testei, o que o torna um pouco inútil como o Browscap, se não puder fornecer resultados confiáveis.

Algumas discussões têm pessoas que desejam se afastar do Browscap por um motivo ou outro, daí a mudança para o Mobile Detect .

— deanflory
fonte