O que é design responsivo?
Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares)
Um website definido como responsivo adapta sua exibição para o ambiente de visualização usando grades proporcionais e fluídas imagens flexíveis, e media queries CSS3. (fonte: http://pt.wikipedia.org/wiki/Web_Design_Responsivo)
Mediante tais informações devemos nos atentar com as imagens postadas em nossos cursos no moodle para evitarmos que apareça a barra de rolagem (scroll bar) ou que a imagem apareça cortada.
Devemos nos atentar principalmente com as imagens da página inicial do curso que disponibilizamos através dos rótulos (recurso: rótulo ou label do moodle).
O segredo está em editar as configurações da imagem ao postá-la, conforme a imagem abaixo:
1) inserir uma imagem como rótulo
2) Parâmetros da imagem postada – ANTES
Clique na aba Aparência e veja as dimensões da imagem
Vejam como a imagem ficará na página do curso (com um scroll bar)
e mesmo redimensionando a imagem não irá resolver, pois quando você acessar de um dispositivo móvel a imagem ou ficará cortada ou terá uma barra de rolagem.
Então vamos a solução:
3) Parâmetros da imagem -DEPOIS
Alterar o parâmetro dimensões para 100% e desmarcar a opção Manter proporções – aqui está o “pulo do gato”
Vejam o resultado quando o moodle é acessado através de vários dispositivos
Imagem no desktop
Desktop -Agora com o navegador em uma tela menor, vejam que a imagem foi redimensionada de acordo com o tamanho da tela
Tablet 10″
Smartphone
Com essa simples modificação podemos ter resultados satisfatórios e um site acessível.
O próximo post será : como incorporar um vídeo do youtube responsivo
ps: agradecimentos ao meu Cliente Universidade do Futebol pelas imagens
