Oi e aí tudo bem seja bem-vindo a mais uma aula Vamos falar agora sobre design responsivo Ah e por quê que a gente vai falar de design responsivo ou RW web responsive web design porque ou você quer um site responsivo ou você cria mil versões diferentes Então como você tem muito tempo né o cliente vai pagar muito bem para você fazer mil versão diferente você vai fazendo aí trocentos mil versões seu site para garantir uma boa experiência do usuário para garantir que seu layout não quebre que você consiga transmitir o conteúdo e a mensagem da
sua interface web de uma maneira legal né de uma maneira coerente independente dos dispositivos site responsivo hoje em dia não é Plus não é bônus algo superficial luxo não é simplesmente algo fundamental dentro de um projeto de interfaces web bom e o que é design responsivo é um conjunto de técnicas para adaptar interface de um site as diferentes resoluções que usuário pode acessar o usuário aí do seu site visitante do seu site sem precisar criar sem precisar definir diversas e diferentes versões do site para cada resolução então é você pegar o mesmo site o mesmo
conteúdo que tá lá no HTML e adaptá-lo às diferentes resoluções você formatar aquele seu site aquele seu design para as diferentes resoluções sendo mesmo site não tendo uma nova versão diferente com menos conteúdo uma versão totalmente diferente da versão desktop não é isso é você conseguir adaptar o seu site então o mesmo site que vai aparecendo notebook vai aparecer na tela do computador aí na tela o top vai aparecer na tv também apareça no celular no tablet mantendo o mesmo layout a mesma coerência visual passando o mês conteúdo e a mesma informação é tão design
responsivo é também pensar na experiência de navegação do visitante que está na experiência do usuário garantir que o seu site Seja acessível a maior número de dispositivos e com uma navegação agradável claro que também nos dispositivos menores ao no celulares Smartphones enfim todos os dispositivos aí que enfim praticamente enfim nos dispositivos que a gente tem acesso hoje em dia e eu design responsivo surgir então no dia 25 de Maio através de um artigo do desenvolvedor é itam marca é que eu tinha falado o nome do cara corretamente e ele escreveu um artigo no site o
Allianz Parque que mudaria completamente a forma do desenvolvimento de layouts para web esse artigo inclusive está ainda disponível Você pode verificar aí você pesquisar no Google você vai encontrar a facilmente e Nesse artigo ele abordava a mudança lá em 2010 do uso da web com o crescimento que só vê se tornar uma realidade hoje em dia dos usuários mobile e como isso afetava lá em 2010 as empresas que necessitavam seu site tivesse uma boa performance transmitisse uma boa experiência também nos dispositivos menores e Nesse artigo ele falar muito sobre a performance sobre a experiência ele
até utilizando a arquitetura com um exemplo para fortalecer o argumento dele e ratificar aí a importância do Design responsivo é legal e certinho você dá uma lida está em inglês mas dá para você utilizar o Google Tradutor você vai entender aí eu acho que também tem algumas versões em português bem interessante você vê a origem realmente do Design responsivo foi quando alguém pensou realmente passar uma boa experiência para o usuário e também uma melhor performance do site em si em resoluções menores e o design responsivo vão ao Contrário de outras técnicas que você verá mais
à frente ele se encaixa exatamente ele segue exatamente o navegador do usuário independente da resolução que ele esteja acessando então como eu já falei é você pegar o meu site o mesmo layout e conseguir que o usuário acesse ele independentes e tá no celular no tablet o ou no desktop bom e como era antes do Design responsivo até mesmo é simultaneamente o design responsivo surgiu o as técnicas aí para tentar resolver esse problema que o entanto apontou aí no artigo dele então vamos ver o que ele antes do Zé responsivo e o que surgiu também
com uma ideia de adaptar o site as diversas resoluções é o primeiro foi o layout fixo então layout fixo ele utiliza de um tamanho sem ser relativo né fixo determinado então a gente precisava o Pixel que é uma unidade estática e nessa época que a gente começou a construir sites a gente não tinha tanta preocupação com os celulares Afinal a gente não acessava à internet por celular você estava muito pouco por isso layout fixo a gente utilizou por muito tempo e ele funcionava mais ou menos assim se um site tivesse mil pixels de largura por
exemplo esse seria o tamanho do site independente do dispositivo então não tem aquela coisa de você acessar o site é no tablet e ele se adaptar o Grid do site a ficar de acordo com espaço que ele tem dentro aí do navegador não tinha isso a largura fixa pronto acabou independente da resolução Oi e aí a gente tem um exemplo de um site de 960 pixels se você começou a criar sites aí no final começo dos anos 2000 até mesmo um pouco no início da década aí de 2010 você provavelmente já viu o Grid 960
pixels que foi um grande muito famoso que a gente utilizou por bastante tempo e que ele atendia bem afinal as pessoas utilizavam sites apenas pelo computador de casa ou no máximo no notebook então as medidas eram fixas e estáticas a gente sabe muito a gente utilizava sempre Pixel para estrutural layout só que o problema disso claro que foi com a evolução dos dispositivos mobile é que um out fixo como ele não se adapta a resolução ele quebra E aí você tem seguir fake mostra muito bem Este exemplo pode ver que o layout está fixo e
aí quando a resolução diminui a tela do usuário diminui o site não diminui e não fica de acordo com a resolução que o usuário Está acessando conheço layout vai quebrar Vai ficar ruim de acessar é só vai ter que dar zoom ou tirar o zoom do celular se tiver liberado Sim vai ser um Deus nos acuda para ela conseguir acessar a informação que o site Contém e uma alternativa que surgiu quando começaram E aí os primeiros celulares com acesso à internet foi criar uma versão exclusiva para esses dispositivos tão aí a gente tem um exemplo
de um site do lado esquerdo centro esquerdo e de um site mobile da época do lado direito é um site apesar de ter CSS tal nem HTML5 css3 ele é xhtml e CSS 2 e na época para tornar acessíveis site via celular manda soluções era criar uma versão exclusiva diferente para celular então você pode perceber que na versão no canto direito até muda um pouco a forma de consumir o conteúdo é a experiência muda apesar de manter a mesma couro logo e tal muda a experiência e até o link ali acesse a versão full então
isso era comum você vem nos sites mobile sempre tem um link para pessoa poder visualizar a versão desktop a versão completa vamos se dizer assim e era feito em tabelas e site foi feito em tabela então dá um trabalho para caramba para fazer foi uma alternativa que surgiu que durou por um tempo criar uma versão exclusiva inclusive o link era é n. Osite.com.br mobile ponto site ou o site por exemplo de arte. Com barra mobile a gente até colocava em outro em outro endereço um subdomínio ou numa pasta separado por que era uma outra versão
do site foi uma alternativa que surgiu quando começou a pintar o acesso pela água acesso à internet pelos celulares e depois veio o layout fluido ou layout líquido essa técnica utiliza porcentagens para construir um layout elástico com esse basicamente a versão para desktop em dente que a versão mobile e ele funciona mais ou menos como a sanfona como você tá vendo aí amplia E comprime e essa foi uma versão que surgiu como alternativa para que aquela questão de ter um layout diferente para o mobile então quando o celular de começar a aceitar um pouquinho mais
de CSS começaram a ser um pouquinho mais inteligentes nessa questão aí do navegador então basicamente era isso o mesmo site igualzinho na versão desktop quanto no tablet ou no celular apesar de ser melhor do que a versão estática ela tinha alguns problemas por exemplo a gente tem aqui uma versão desktop toda com porcentagem Então a gente tem essas unidades relativas só que do mesmo jeito é que tá o site desktop Ele ficava no Smartphone ou no tablet só que olha só como esse mesmo site fica no smartphone no tablet ele simplesmente cumprir me Então como
se fosse uma sanfona ele vai esticar e comprimir ficar recolher isso prejudica diretamente a experiência do usuário Imagina você acessa nesse mês site do smartphone e ali na coluna com vinte por cento ontem eu tava exprimido bem colado você precisa mudar assunto toda hora para identificar o que tá escrito ali essa forma técnica que foi um começo aí para gente chegar no design responsivo mas que não foi a solução 100% ideal eu e mais um exemplo aqui como você pode perceber no design responsivo agora no comparativo nos a response vão a versão do celular ela
adapta então a versão dessa foto tá de um jeito e a versão do celular tá adaptada para o tipo de uso desse dispositivo Janusa incluído você pode perceber como ele simplesmente comprimiu é como se ele pegasse o site do desktop Ah mas assim dos lados até caber dentro do celular e aí a gente também tem o design adaptativo que é até um pouco paradoxal falar sobre design adaptativo esses possível Afinal é responsável também é adaptativa também se a datas também é flexível mas o tema design adaptativo é utilizado para falar de outra coisa para falar
de um jeito diferente de uma outra técnica de tentar colocar o site para resoluções menores e o design adaptativo é basicamente Como criar um site encaixar em resoluções menores ao contrário do Design responsivo que vai se adequando exatamente a resolução que a pessoa Tá acessando do usuário através da flexibilidade do Grid do Design responsivo ele vai se adequando no design adaptativo não utiliza medidas estáticas fixas onde você determina tamanhos fixos tamanhos pré-determinados e para os dispositivos menores e claro que isso não dá muito certo Afinal existem milhares diferentes resoluções aí cada hora surge em resoluções
diferentes por isso que ele acaba criando essas lacunas esses vãos que você tá vendo aí no gif então porém trabalhar mais com medidas fixas por ele criar uma nova versão uma nova adaptação do site para determinadas resoluções ele tem essas lacunas que você pode ver e enquanto responsável vai se adaptando exatamente a largura aí do dispositivo simulado no adaptativa ele dá uma quebra tem algumas lacunas tem alguns problemas que acabam prejudicando o design adaptativo Ah beleza então é isso essa foi a primeira parte sobre design responsivo foi mais um review geral sobre um pouco da
evolução do Design até onde a gente chegou no Design responsivo na próxima aula a gente vai ver realmente Como funciona o design responsivo eu tanto na parte tô design tão de grids e entre outras técnicas como na parte também do código então vou indo nessa estudar galo forte abraço e até mais fui
