Dashboards Responsivos.

Nesse artigo irei apresentar algumas ideias para ajudar o desenvolvimento de Dasboards responsivos. Eu uso a suíte Pentaho mas creio que as dicas podem ser aplicadas em outras ferramentas de B.I.

Devemos nos preocupar com a responsividade de nossos Dashboards porque apesar do B.I ter foco no desktop tal cenário está mudando, ecada vez mais os usuários desse tipo de ferramenta precisam de seus dados aonde quer que estejam. Para entregar uma experiência com qualidade , o desenvolvedor precisa estar atendo a responsividade, saber apresentar seu conteúdo em uma tela de 1260 x 720 px , ou em uma de 720 x 400 px , isso não significa apenas deixar as tabela responsivas e diminuir a fonte , é preciso repensar no layout do painel para que o mesmo faça sentido em quaisquer que sejam as resoluções apresentadas.

Um bom começo é usar algum framework para desenvolvimento que facilite a responsividade, um bom exemplo é o bootstrap que já possui um sistema de grids e que facilita bastante na hora de começar o desenvolvimento para múltiplas telas. Vale lembrar que a nova versão do Pentaho possui a funcionalidade adaptive design onde o servidor detecta o device, e ajusta o conteúdo de acordo com as definições do HTML. Além disso, essa nova versão traz maior compatibilidade com o Bootstrap, agora quando adicionamos um elemento HTML podemos setar o esquema de grids de acordo com o tamanho do device, começando em extra small indo até extra large.

Uma dica interessante , não pensamento somente na responsividade , mas sim como uma boa prática de desenvolvimento de Dashboards, é você desenvolver o seu código de forma que ele possa ser utilizado em outros painéis, isso facilitará bastante o andamento do projeto, além de economizar tempo.

Para entregar um painel responsivo de qualidade precisamos estar atentos a alguns detalhes, um deles é que quando estamos em um dispositivo móvel a interação pode ser mais complexa, sem o auxilio do mouse alguns eventos podem não funcionar no mobile, mouse hovers e tooltips não funcionarão em dispositivos móveis, portanto o conteúdo desses itens devem ser apresentados de outras formas no mobile, um exemplo é usar botões que quando clicados exibem o conteúdo antes mostrado em um mouse hover.

Sem o auxilio do mouse alguns eventos podem não funcionar no mobile.

Outra dica que também faz uso do conceito apresentado acima, diz respeito à tabelas, quando temos uma com muitas colunas, devemos esconder algumas delas com JavaScript, e novamente adicionar um botão para exibir tais colunas ocultadas, nessa dica assim como na anterior é preciso ter conhecimento do projeto e o que se pretende mostrar, para que quando optar por ocultar alguns itens, não acabe ocultando itens de extrema relevância.

Ao desenvolver usando o Community Dashboard Framework Build você deve tirar proveito de todas as funcionalidades que o framework oferece, uma delas é separar seus componentes por Rows e Columns, dessa forma a manutenção do painel fica mais fácil. Você pode ainda combinar o Bootstrap e seu sistema de grids com o CDBF , ao adicionar uma coluna para cada indicador por exemplo, você vai poder colocar a classe col-md-x direto na propriedade do elemento HTML.

Um projeto de B.I responsível deve ser customizável, consistente e “future ready”.

Devemos tomar cuidado com as @media querias e a estilização pelo CSS, devemos usá-los somente como ultimo recurso, a dica é você conhecer bem a documentação do CDBF e saber usar todas suas propriedades, se aliado com o Bootstrap você irá criar Dashboards incríveis e responsivos.

Uma dica final mas não menos importante, e que pode causar sérios problemas de usabilidade é que devemos estar atentos às limitações de hardware que os dispositivos mobile possuem, evite usar muitas animações JavaScript , e SEMPRE use imagens responsivas,vale lembrar que o Bootstrap têm uma classe que já trata isso para você.