PplWare Mobile

Como criar um Website responsivo #2


Autor: Hugo Cura


  1. Eduardo says:

    Parabéns pelo artigo! Aguardo pelas novidades da próx. semana.

  2. João Dias says:

    Bom artigo.
    Dois reparos:
    1- Não executem javascript no head a não ser que seja estritamente necessário. Para dar funcionalidades a um slider não é necessário executar no header. Só vai bloquear o render da página, o que causa um loading mais lento. Usem o $(window).load() ou o $(document).ready() para executarem o vosso javascript. Todos os scripts devem ser sempre colocados no fundo da página, a não ser que seja MESMO necessário.
    2- Não usem o box-sizing num wrapper, mas sim em todos os elementos. Assim garantem que todos os elementos na página herdam do html. Ou seja:
    html{box-sizing:border-box;} *,*:before,*:after{box-sizing: border-box}

    • João Dias says:

      Mais outra sugestão:
      Não usem pixeis para definir dimensões e fontes no CSS. São unidades fixas e podem causar problemas de acessibilidade.
      Declarem o font-size como 100% (equivale a 16px) no html e depois usem EM’s (ou melhor ainda, REM’s) para definir o tamanho das vossas fontes. Assim vão garantir que todo o site escala em conformidade quando lidam com diferentes tamanhos de ecrã e/ou o utilizador faz zoom na vossa página.

    • Consciência says:

      2 – O box-sizing não é assim tão linear. Se tivermos um projecto com 10.000 elementos no DOM, estar a chamar um selector como * poderá ter implicações a nível de performance. Em sites simples faz sentido, mas em projectos complexos é preciso ser usado com moderação.

      • João Dias says:

        O box-sizing não sofre de problemas de performance. O que sofre de problemas de performance são selectores como .classe > *, em que o CSS é interpretado de forma contrária ao que estamos habituados a ler. (primeiro são procurados todos os elementos e depois sim os que descendem de uma classe)

        Estás simplesmente a dizer ao browser para lidar com os elementos de uma determinada forma, nada mais. O browser apenas faz o cálculo das dimensões uma vez. E em browsers modernos é tão normal como definir o font-size do body ou do HTML.

        http://www.paulirish.com/2012/box-sizing-border-box-ftw/

    • Diogo Calçada says:

      Olá João,

      A equipa do Pplware alterou o artigo tendo em conta a tua primeira observação.
      Não tenciono fazer a segunda que referiste porque quero manter isto o mais simples possível, apenas isso.
      (A alteração relativamente ao font-size irei fazer na próxima edição. Concordo com o teu ponto de vista, também)

      Obrigado pelo teu feedback!

  3. Andre Costa says:

    Não entendi o funcionamento da tag viewport. Poderia explicar as diferenças de usar ou não a referida tag? Abraço

    • João Dias says:

      Resumidamente:
      Esta metatag informa o browser de que o teu conteúdo vai sempre ocupar a largura total da janela do dispositivo (é o que acontece em dispositivos móveis, onde não existem janelas – excepto talvez o surface da Microsoft) e que a sua escala inicial equivale a 100% da janela. Quer o teu dispositivo seja um tablet, um smartphone, etc.

      O viewport é o conteúdo que é visível no teu ecrã do browser (tanto num dispositivo móvel como num desktop, portátil, etc).

      No futuro, provavelmente na próxima versão do HTML, esta metatag já não será necessária.

  4. Miguel Ribeiro says:

    Eu, incluiria aí também na viewport “maximum-scale=1”
    O que em termos de usabilidade está errado, mas consigo dar um aspecto muito mais “App” aos sites no telemóvel.

    • João Dias says:

      O mais correcto é dizeres ao browser para definir a escala inicial como sendo 1 e depois tu definires se queres que o utilizador possa fazer zoom ou não.

      Quanto a usabilidade…acaba por ser uma decisão tua. Se não tiveres em conta as pessoas que têm o zoom maior nos sites, estás a colocá-las de fora do teu produto. Isso pode não ter impacto, se estiveres a falar dum site de uma mercearia. Vai para um site com milhares de visitantes, e de repente nem toda a gente acede ao teu site.

  5. JJ says:

    Bom artigo.
    Para quem já tem luzes de CSS/HTML, e esta um pouco desactualizado no campo de responsivo, é útil.

  6. Redin says:

    Para acompanhar…

  7. Rafael says:

    Boas, tenho desenvolvido uma pagina html para um trabalho q consiste ser tipo uma app dentro do tlm. Ja tenho tudo feito mas deparei-me que pc’s com resolução diferente do meu , a suposta app nao fica dentro do tlm… Alguém poderia ajudar? peco desculpa mas ainda sou um novato em html.
    Obrigado

  8. João says:

    1. Sacar o Bootstrap da Twitter.
    2. Usar o Bootstrap da Twitter.
    3. ????
    4. PROFIT!!!

  9. Sara says:

    Já vi nalguns sites que no viewport colocam user-scalable=yes? Isto é para que mesmo, pois já fiz um teste com e sem, e o resultado é exatamente o mesmo.

  10. Cláudia Mascote says:

    Olá tenho gostado bastante de acompanhar estes artigos do ppware e tenho pena que já tenham acabado. Gostaria no entanto de vos pedir uma ajuda ou sugestão,

    Vejo perfeitamente o meu blogue e ajustado à página em dispositivos móveis, com excepção das imagens que surgem enormes, principalmente em windows phone, em iphone surgem grandes, porém menores, há alguma forma de corrigir isto ou poderiam sugerir algum artigo que me ajude ?

    Muito obrigada

Deixe uma resposta

O seu endereço de email não será publicado.

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. A administração deste site reserva-se, desde já, no direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.