Olá, ao começarmos, veremos a diferença entre design de site responsivo e adaptável, bem como como criar sites que estão prontos e otimizados para os mecanismos de pesquisa. Nesta lição, estaremos explorando o conceito de web design responsivo. Designers e desenvolvedores de sites, tem um enorme desafio com todas as diferentes maneiras pelas quais as pessoas pode acessar as informações. De computadores com monitores grandes para pequenos dispositivos IOT wearable, designers devem levar em conta todas essas variações. Designers e desenvolvedores de sites tem dois frameworks para escolher: design responsivo ou design adaptável. Vamos primeiro explorar o exemplo de design responsivo, bem como rever os prós e contras deste tipo de design. Se olharmos para o site da Cidade do Conhecimento em um navegador normal, podemos ver que todos os elementos no site estão bem posicionados. Agora, se eu alterar o tamanho do navegador, o conteúdo se moverá dinamicamente para alinhar ao novo tamanho do navegador. Isso é web design responsivo. Com a natureza generalizada dos dispositivos móveis, designers devem considerar uma variedade de tamanhos de tela. Sites responsivos exibem conteúdo da web com base no espaço disponível do navegador. Em dispositivos móveis, isso acontece automaticamente. O site verifica o espaço disponível e renderiza o conteúdo de acordo. Isso proporciona uma experiência perfeita para o usuário final, permitindo que eles aproveitem o máximo do seu site como eles gostariam. Agora, vamos olhar para o mesmo site usando um plug-in de simulador de dispositivo móvel para o Google Chrome e como ele será renderizado com base no espaço disponível do navegador. Vou escolher o simulador do iPhone 11. À medida que avançamos pelo site, os componentes são dimensionados de acordo com as dimensões do navegador disponível. Podemos ver que o site é renderizado adequadamente, com base no tamanho do dispositivo. Se escolhermos um dispositivo móvel diferente, como um iPad Air 4, podemos ver que o site se ajusta novamente para contabilizar o espaço disponível do navegador. E à medida que avançamos pelo site, todos os elementos são exibidos adequadamente. Com web design responsivo, hierarquia visual deve ser mantida em todos os dispositivos. Esta é a disposição dos elementos para mostrar sua ordem de importância. Por exemplo, os cabeçalhos, imagens e links estão todos no mesmo lugar, independentemente do dispositivo utilizado. Algumas vantagens de usar este tipo de web design são: a facilidade de desenho, o tempo que leva para implementar é significativamente menor, e é o método preferido para a criação de sites hoje. Alguns dos contras: você tem menos controle sobre o design em termos de tamanho de tela, e velocidades de download variadas entre dispositivos pode afetar seu projeto pois os dispositivos móveis podem baixar mais lentamente. Obrigado por assistir. Aguarde a próxima aula onde exploraremos o design adaptativo da web.