{"id":80915,"date":"2020-08-17T12:52:31","date_gmt":"2020-08-17T15:52:31","guid":{"rendered":"https:\/\/aliensdesign.com.br\/?p=80915"},"modified":"2022-04-28T16:24:02","modified_gmt":"2022-04-28T19:24:02","slug":"site-mobile","status":"publish","type":"post","link":"https:\/\/aliensdesign.com.br\/en\/2020\/08\/site-mobile\/","title":{"rendered":"Qual a Diferen\u00e7a entre Site Responsivo e Site Mobile?"},"content":{"rendered":"

Apesar da similaridade nas ideias, temos dois tipos distintos de websites sendo executados nos nossos celulares e tablets: Os sites <\/span>responsivos <\/b>e os sites <\/span>mobile<\/b><\/p>\n

As caracter\u00edsticas distintas destes se aplicam tanto na forma de exibi\u00e7\u00e3o, quanto no desenvolvimento de cada um e vantagens de aplica\u00e7\u00e3o. No entanto\u2026<\/span><\/p>\n

O que s\u00e3o Sites Responsivos?<\/span><\/h2>\n

Um site responsivo, \u00e9 aquele que se molda \u00e0s dimens\u00f5es de tela na qual este est\u00e1 sendo exibido. N\u00e3o importa se ele est\u00e1 sendo exibido em um MP4 Player com Wifi, ou em uma Smart TV de 80\u201d, ele deve se adaptar e n\u00e3o atrapalhar a experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n

Como Funciona um Site Responsivo?<\/span><\/h3>\n

Os sites responsivos bem desenvolvidos utilizam-se principalmente de dois m\u00e9todos:<\/span><\/p>\n

Media Querries<\/span><\/h4>\n

Os <\/span>media querries<\/span><\/i> s\u00e3o varia\u00e7\u00f5es do c\u00f3digo CSS que implementam comportamentos para elementos do site. Dessa forma, tomando como base par\u00e2metros como: largura m\u00ednima ou m\u00e1xima, altura m\u00ednima ou m\u00e1xima, e se o comportamento deve ser implementado apenas na tela ou tamb\u00e9m em uma poss\u00edvel impress\u00e3o.<\/span><\/p>\n

Por exemplo de media querry, temos:<\/span><\/p>\n

.container {\r\n     max-width: 1200px;\r\n}\r\n\r\n@media (max-width: 420px) {\r\n     .container {\r\n          max-width: 100%;\r\n     }\r\n}\r\n<\/pre>\n
Neste exemplo, a largura do elemento com a classe <\/span>container <\/b>seria de no m\u00e1ximo 1200px em dispositivos com a largura de tela maior que 1200px. Enquanto no celular com at\u00e9 420px de largura de tela, o mesmo elemento poderia chegar a ocupar a largura de 100% da tela.<\/span><\/p>\n
Unidades de Medidas Baseadas no Viewport<\/span><\/h4>\n
O Viewport \u00e9 uma medida de dimens\u00e3o de telas, que aponta tanto para o tamanho quanto para as propor\u00e7\u00f5es desta. As medidas baseadas no viewport que podem ser utilizadas no CSS s\u00e3o <\/span>vh <\/b>(Viewport Height) e <\/span>vw <\/b>(Viewport Width). O comportamento de um elemento usando as medidas pode ser representado abaixo:<\/span><\/p>\n
.hero-carrousel {\r\n     min-height: 60vh;\r\n     min-width: 90vw;\r\n}\r\n<\/pre>\n
No trecho de c\u00f3digo acima, o elemento com a classe <\/span>hero-carrousel <\/b>ocuparia uma largura de no m\u00ednimo 90% da tela do dispositivo e uma altura m\u00ednima de 60% da tela do dispositivo.<\/span><\/p>\n
Vale lembrar que <\/span>vh e vw funcionam de forma diferente da porcentagem absoluta (%)<\/b>, uma vez que o viewport \u00e9 uma informa\u00e7\u00e3o est\u00e1tica para cada dispositivo, enquanto a porcentagem se baseia na \u00e1rea de exibi\u00e7\u00e3o do navegador.<\/span><\/p>\n
O que \u00e9 um site Mobile?<\/span><\/h2>\n
Site Mobile \u00e9 aquele site desenvolvido para funcionar especificamente em dispositivos m\u00f3veis, sejam eles smartphones ou tablets. Por tanto, ele pode conter elementos e ter a usabilidade diferente da vers\u00e3o para desktop.<\/span><\/p>\n
Como funciona um site Mobile?<\/span><\/h3>\n
Os scripts at\u00e9 podem ser reaproveitados, mas o HTML e folhas de estilo s\u00e3o independentes da vers\u00e3o desktop. Por v\u00e1rias vezes vemos os site mobile trabalhando em subpastas do site desktop, ou at\u00e9 mesmo em subdom\u00ednios do site principal, como por exemplo o <\/span>m.facebook.com<\/a>.<\/strong><\/p>\n
Os usu\u00e1rios de desktop n\u00e3o s\u00e3o privados de acessarem a vers\u00e3o mobile de um site, mas na maioria dos casos, o usu\u00e1rio mobile \u00e9 levado automaticamente para a vers\u00e3o correta para seu dispositivo. Isso \u00e9 feito atrav\u00e9s do Javascript, que pode tomar como par\u00e2metro de decis\u00e3o a resolu\u00e7\u00e3o em que o site est\u00e1 sendo exibido, ou at\u00e9 mesmo a detec\u00e7\u00e3o de qual sistema operacional est\u00e1 executando o navegador no momento.<\/span><\/p>\n
Pode ser do seu interesse: Saiba como melhorar um site lento de uma vez por todas\u00a0<\/a><\/strong><\/p>\n
Conclus\u00e3o: Qual \u00e9 o melhor para mim?<\/span><\/h2>\n
Sites responsivos sempre s\u00e3o a melhor op\u00e7\u00e3o tanto para usabilidade, disposi\u00e7\u00e3o do conte\u00fado, organiza\u00e7\u00e3o e economia dos recursos de TI. No entanto, se no seu caso, seu site j\u00e1 est\u00e1 desenvolvido e rodando apenas na vers\u00e3o desktop, o desenvolvimento de um site mobile pode economizar recursos financeiros.\u00a0<\/span><\/p>\n
Uma vez que os sites responsivos devem ser desenvolvidos utilizando princ\u00edpios de Mobile First (foco em dispositivos m\u00f3veis), e dar manuten\u00e7\u00e3o ao site que j\u00e1 est\u00e1 no ar sairia mais caro do que simplesmente criar uma nova vers\u00e3o mobile.<\/span><\/p>\n
Ainda tem alguma d\u00favida de qual o melhor para a atual situa\u00e7\u00e3o da sua empresa? Ent\u00e3o deixe um coment\u00e1rio abaixo e nosso especialista em tecnologia entrar\u00e1 em contato!<\/span><\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>