Mobile First: desenvolvimento web em ordem crescenteMobile First: desenvolvimento web em ordem crescenteMobile First: desenvolvimento web em ordem crescenteMobile First: desenvolvimento web em ordem crescente
  • Início
  • Categorias
    • Certificado Digital
      • TecnoSign para ERP
      • Tipos de Certificado
    • Documentos Fiscais
      • CTe
      • EFD-Reinf
      • eSocial
      • GNRe
      • MDFe
      • MFe
      • NFe
      • NFCe
      • NFSe
      • Notas Técnicas
      • Regimes Tributários
      • SAT
      • Soluções Fiscais
      • SPED
    • Eventos
    • Fintech
      • Boleto
      • Consulta de Crédito
      • Meios de Pagamento
      • Pix
      • Tecnologia Financeira
    • Gestão
    • Institucional
    • Mobile
      • Banco de dados
      • PlugDash
      • Tecnologia Mobile
      • Visualização de Dados
    • Inovação
      • Plug4Market
      • PlugMessage
      • PlugSign
    • Tecnologia
  • Sobre Nós
    • Site
    • Institucional
    • Evento TecnoUpdate
  • Soluções
    • Documentos Fiscais
    • API Boleto
    • API Pix
    • API Consulta de Crédito
    • API Pagamentos
    • Fintech
    • Dashboard Mobile
    • Certificado Digital
  • Ferramentas Gratuitas
    • Siga as novidades
    • Materiais Ricos
    • Monitor SEFAZ
    • Validador NF-e
    • Visualizador de DANFE/DACTE
    • Cursos Gratuitos
    • Revista TecnoUpdate
  • Casa do Desenvolvedor

Mais resultados

Generic selectors
Apenas correspondências exatas
Pesquisar no título
Pesquisar no conteúdo
Post Type Selectors
Filtrar por categorias
Academy
Banco de dados
Boleto
Certificado Digital
CTe
Documentos Fiscais
EFD-Reinf
eSocial
Eventos
Fintech
Gestão
GNRe
Inovação
Institucional
Marketing
MDFe
Meios de Pagamento
MFe
Mobile
NFCe
NFe
NFSe
Notas Técnicas
Pix
Plug4Market
PlugDash
PlugMessage
PlugSign
Regimes Tributários
SAT
Soluções Fiscais
SPED
Tecnologia
Tecnologia Financeira
Tecnologia Mobile
TecnoSign para ERP
Tipos de Certificado
Visualização de Dados
WiFire

Mobile First: desenvolvimento web em ordem crescente

Publicado por Gabriel Serra em 23 de abril de 2019
Tempo de Leitura: 4 minutos

Essencial em projetos web, o Mobile First revolucionou o design, o desenvolvimento e a experiência do usuário para sempre. Descubra este conceito!


Um dos maiores desafios do desenvolvedor front-end é oferecer uma experiência completa para todos os seus usuários, independente do tamanho e da resolução da tela do seus dispositivos.

Uma página, portal ou software web com a capacidade de adaptar sua interface ao dispositivo do usuário é chamado de responsivo.

A responsividade é um tema bem extenso e complexo, e faz parte de um tópico ainda mais abrangente, que compõe a principal “filosofia” do desenvolvedor front-end: a experiência do usuário, ou simplesmente UX.

Neste artigo, publicado na Revista TecnoUpdate #11, apresentamos um dos conceitos mais revolucionários de UX dos últimos tempos: o mobile first. Primeiro, vamos entender como e por que ele surgiu.

Conteúdo ocultar
1. Quando tudo isso aqui era Desktop
2. A ascensão mobile
3. Design responsivo: novos dispositivos, novas experiências
4. O que é Mobile First
5. Media queries
6. Vantagens do Mobile First

Quando tudo isso aqui era Desktop

No começo da disseminação popular da internet, o acesso a ela era feito, em sua maioria, através de computadores com monitores de tubo de imagem, grossos e com aspecto semelhante à TVs. Esses monitores tinham a resolução de 800×600 pixels e era praticamente universal.

Com a evolução tecnológica, começaram a ser comercializados monitores com outras resoluções, por exemplo, com 1600×900 pixels e, o mais importante, eram retangulares.

Monitores 800x600 e 1900x600

Este foi o primeiro desafio de responsividade, bem antes deste termo ser cunhado. Para resolver, o desenvolvedor basicamente centralizava o site, que era quadrado.

No monitor quadrado mais antigo, ele ficava do mesmo jeito. No monitor retangular, era praticamente igual, exceto por margens laterais margens vazias e o site no meio. Fácil… por enquanto.

A ascensão mobile

Com o advento dos smartphones, qualquer pessoa poderia ter acesso aos sites que estavam online. Estes sites, no entanto, haviam sido criados para aparecer em computadores, com telas bem maiores.

Você provavelmente se lembra desta época: navegar em um site pelo celular consistia em dar “zoom” no trecho do site que você queria para ler ou observar. Acertar um link com o dedo era um desafio e tanto. Quando você mudava de página dentro do mesmo site, o “zoom” se perdia, e você se perdia junto.

Diante desta terrível experiência para os usuários de um mercado crescente, os desenvolvedores front-end, na época chamados de webmasters ou webdesigners, começaram a discutir formas de melhorar a experiência do usuário mobile.

Design responsivo: novos dispositivos, novas experiências

Assim, por volta de 2009, surgiu o conceito de Design Responsivo, um paradigma de desenvolvimento de portais, páginas e softwares web que fornecem uma experiência de uso otimizada para qualquer tela ou dispositivo, causando a sensação de que aquele conteúdo foi feito exatamente para rodar naquela tela.

Bem, desde o surgimento do design responsivo, a experiência do usuário mobile na internet melhorou bastante, mas ele ainda era considerado secundário em relação aos usuários de computadores desktop.

No entanto, o número de proprietários de dispositivos mobile cresceu (e cresce até hoje) exponencialmente, superando o número de usuários desktop.

De acordo com a pesquisa TIC Domicílios, do CETIC, 49% dos usuários acessam a internet apenas pelo mobile, 47% utilizam tanto desktop quanto mobile, e apenas 4% afirmam utilizar apenas computadores.

Número de usuários Mobile aumenta exponencialmenteCompreendendo a ascensão de um novo público principal, os desenvolvedores front-end adotaram o paradigma do mobile first, literalmente, “móvel primeiro”.

O que é Mobile First

O Mobile First (em tradução livre, “móvel primeiro”) é um conceito de desenvolvimento web que consiste em iniciar a implementação pensando primeiro na experiência dos usuários de dispositivos móveis, e ir incrementando os recursos e adaptando o design ao passo que se aumenta o tamanho e alteram as características da tela.

Luke Wroblewski, diretor de produto da Google, foi o responsável pela proposta inicial e pelo nome deste paradigma. Publicado em 2011, seu livro Mobile First explica por que priorizar o mobile ao criar uma aplicação web, e como realizar esta transição de mentalidade em equipes de design e desenvolvimento front-end.

Mas como é feito esse processo de implementação e adaptação dos elementos para as diferentes telas?

Media queries

Para compreender a aplicação de design responsivo, é preciso primeiro entender quais são as características de tela a serem levadas em conta. São elas:

  • Tipo: tela, impressão, leitor.
  • Resolução: altura x largura, em pixels, da tela.
  • Densidade: resolução real dividida pela resolução virtual, medida em DPI.
  • Orientação: retrato ou paisagem.

Para resolver esse problema, o CSS 3 disponibiliza a especificação media queries que consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor.

De acordo com o Mozilla Developer Network, “os media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama específica de dispositivos, não precisando mudar o conteúdo em si.”

Para habilitar essa tecnologia no seu código, devemos informar ao navegador que ele deve considerar a resolução virtual da tela, ao invés do tamanho real.

Para isso, adicionamos esta tag <meta> no <head> do seu código:

<meta
    name="viewport"
    content="width=device=width"
>

Dentro da técnica Mobile-First, costuma-se utilizar as seguintes variações de resoluções:

  • 0 ~ 575px (sem media querie)
  • 576 ~ 767px (sm) [@media (max-width: 768px)]
  • 768 ~ 991px (md) [@media (max-width: 992px)]
  • 992 ~ 1199px (lg) [@media (max-width: 1200px)]
  • ≥1200px (xl) [@media (min-width: 1201px)]

Assim, por exemplo, podemos alterar a propriedade background-color da classe exemplo de acordo com cada media querie.

/* 0 ~ 575px */
.classe {
    background-color: red;
}
/* 576 ~ 767px (sm, small) */
@media (max-width: 768px) {
    .classe {background-color: blue;
    }
}
/* 768 ~ 991px (md, medium) */
@media (max-width: 992px) {
    .classe {background-color: green;
    }
}
/* 992 ~ 1199px (lg, large) */
@media (max-width: 1200px) {
    .classe {background-color: yellow;
    }
}
/* >=1200px (xl, extra-large) */
@media (min-width: 1201px) {
    .classe {background-color: pink;
    }
}

Vantagens do Mobile First

As aplicações criadas com mobile first tem recebido cada vez mais vantagens em relação às que priorizam a experiência desktop. Atualmente, pode-se considerá-la fundamental para obter resultados satisfatórios de acessos e interações dos usuários.

Entre as vantagens deste paradigma, podemos destacar:

  • Prioridade de rankeamento nos resultados do Google;
  • Usuário mais propenso a interagir e navegar dentro do seu site;
  • Páginas carregam mais rápido, reduzindo a taxa de rejeição dos usuários impacientes;
  • Dá um aspecto de modernidade para a sua marca;
  • Até a versão desktop do seu site ficará naturalmente mais limpa e bonita.

Vai desenvolver um novo projeto web e quer maximizar seus resultados? Não se esqueça: mobile primeiro, desktop depois.

Summary
O que é Mobile First?
Article Name
O que é Mobile First?
Description
O Mobile First (em tradução livre, "móvel primeiro") é um conceito de desenvolvimento web que consiste em iniciar a implementação pensando primeiro na experiência dos usuários de dispositivos móveis, e ir incrementando os recursos e adaptando o design ao passo que se aumenta o tamanho e alteram as características da tela. Luke Wroblewski, diretor de produto da Google, foi o responsável pela proposta inicial e pelo nome deste paradigma. Publicado em 2011, seu livro Mobile First explica por que priorizar o mobile ao criar uma aplicação web, e como realizar esta transição de mentalidade em equipes de design e desenvolvimento front-end.
Author
Gabriel Serra
Publisher Name
TecnoSpeed
Publisher Logo
TecnoSpeed
Gabriel Serra
Gabriel Serra
Formado em Marketing, redator do Grupo TecnoSpeed.

Posts relacionados

Tablet com dashboards

Fonte: Freepik

27 de novembro de 2023

Filtro de Dados do PlugDash: a feature ideal para otimizar a análise de dados dos seus clientes


Leia +
17 de novembro de 2023

Black Friday 2023: ideias para garantir a alta performance em campanhas comerciais na software house!


Leia +
na imagem, um desenvolvedor de software, de óculos pretos, cabelos castanhos, pele branca, jaqueta jeans azul e camiseta branca embaixo, mexendo em dashboards no computador
27 de outubro de 2023

Plataformas de BI são complexas demais? Veja uma alternativa poderosa e sucinta para análise de dados empresariais


Leia +

Comments are closed.

Siga nossa página no Google Notícias

Pesquisar artigos

Mais resultados

Generic selectors
Apenas correspondências exatas
Pesquisar no título
Pesquisar no conteúdo
Post Type Selectors
Filtrar por categorias
Academy
Banco de dados
Boleto
Certificado Digital
CTe
Documentos Fiscais
EFD-Reinf
eSocial
Eventos
Fintech
Gestão
GNRe
Inovação
Institucional
Marketing
MDFe
Meios de Pagamento
MFe
Mobile
NFCe
NFe
NFSe
Notas Técnicas
Pix
Plug4Market
PlugDash
PlugMessage
PlugSign
Regimes Tributários
SAT
Soluções Fiscais
SPED
Tecnologia
Tecnologia Financeira
Tecnologia Mobile
TecnoSign para ERP
Tipos de Certificado
Visualização de Dados
WiFire

Categorias

  • Academy (44)
  • Certificado Digital (99)
    • TecnoSign para ERP (53)
    • Tipos de Certificado (58)
  • Documentos Fiscais (543)
    • CTe (21)
    • EFD-Reinf (20)
    • eSocial (51)
    • GNRe (6)
    • MDFe (20)
    • MFe (4)
    • NFCe (73)
    • NFe (182)
    • NFSe (56)
    • Notas Técnicas (89)
    • Regimes Tributários (21)
    • SAT (6)
    • Soluções Fiscais (54)
    • SPED (11)
  • Eventos (64)
  • Fintech (177)
    • Boleto (10)
    • Meios de Pagamento (8)
    • Pix (11)
    • Tecnologia Financeira (8)
  • Gestão (72)
  • Inovação (64)
    • Plug4Market (20)
    • PlugMessage (23)
    • PlugSign (17)
  • Institucional (29)
  • Marketing (8)
  • Mobile (125)
    • Banco de dados (46)
    • PlugDash (73)
    • Tecnologia Mobile (99)
    • Visualização de Dados (100)
  • Tecnologia (66)
  • WiFire (1)

Novos artigos

  • 0
    GNR-e: Como informar juros e multa
    4 de dezembro de 2023
  • 0
    Férias no eSocial – Saiba como enviar os eventos
    4 de dezembro de 2023
  • Desenvolvedor trabalhando no computador e celular. 0
    TecnoPay: conheça a conta de recebimentos Pix para o desenvolvedor
    1 de dezembro de 2023
  • Imagem apresentando homens trabalhando em um sistema bancário 0
    O que é VAN Bancária e seu papel no registro de boletos
    29 de novembro de 2023
  • Simples Nacional0
    Simples Nacional: tudo que você precisa saber sobre este regime tributário
    29 de novembro de 2023

Newsletter

Receba conteúdo para Software Houses no seu e-mail!

Vamos juntos fortalecer o Desenvolvimento de Software no Brasil?
Conheça mais sobre a Casa do Desenvolvedor da TecnoSpeed 🚀

Desenvolvido com muito  e  pela TecnoSpeed.
Conheça nossa política de privacidade

Pular para o conteúdo
Barra de Ferramentas Aberta Acessibilidade

Acessibilidade

  • Aumentar TextoAumentar Texto
  • Diminuir TextoDiminuir Texto
  • Escala de cinzaEscala de cinza
  • Alto ContrasteAlto Contraste
  • Contraste NegativoContraste Negativo
  • Fundo claroFundo claro
  • Links SublinhadoLinks Sublinhado
  • Fonte LegívelFonte Legível
  • Reiniciar Reiniciar