# As novas regras da web responsiva > Descubra as novas regras da web responsiva moderna. Container queries, aspect-ratio e técnicas atuais de responsive design em CSS. Atualize-se! URL: https://dpw.dev/design/novas-regras-web-responsiva/ Publicado em: 2013-02-18 Categoria: design Tags: interface, layout, planejamento Autor: Tárcio Zemel O **desenvolvimento web** está mudando; e para melhor. É preciso que nós, desenvolvedores web, acompanhemos estas mudanças, tendo ciência de que, agora, existem novas regras para o desenvolvimento web moderno, o **desenvolvimento da web responsiva**. > Artigo baseado em [The new rules of the responsive web](http://www.webdesignerdepot.com/2013/01/the-new-rules-of-the-responsive-web/). **Responsive web design** (ou [web design responsivo](/miscelanea/livro-web-design-responsivo/ "Livro "Web Design Responsivo"")) se tornou um termo onipresente no mundo de desenvolvimento web. Se você pesquisar por **#rwd** no Twitter ou [Google+](/midia-social/google-plus-apresentacao/ "Em 2013, comece a ser mais social: Google+"), vai encontrar ambos, conteúdo e spam. Essa é uma fase comum no amadurecimento de uma ideia nova. Na época do "boom" do AJAX, o termo foi "levado ao chão". Agora, poucas pessoas falam sobre AJAX, mas bibliotecas como jQuery estão totalmente entrelaçadas com o fluxo de trabalho de um desenvolvedor web interativo. Isso parece espelhar o que está acontecendo com o web design responsivo. O termo está em toda parte. Por exemplo, aconteceu o caso de uma amiga de um desenvolvedor envolvida com publicação de revistas que foi a uma conferência; um editor de uma revista conhecida, falando sobre as próximas tendências, mencionou **web design responsivo**. Os editores podem não ser profissionais da web, mas conhecem as _buzzwords_ do momento. À medida em que o web design responsivo vai ganhando força, nossa forma de desenvolver sites vai se alterando. À medida em que o _status_ de "_buzzword_" vai se alterando e o web design responsivo, em si, vai se tornando parte comum de todos os projetos de web design, nossa forma de trabalhar como profissionais de web também precisa mudar. Com isso em mente, precisamos estabelecer algumas regras básicas sobre como vamos trabalhar a partir de agora. ## Não pare no "esticar" Quando alguém diz "Confira este site responsivo", qual a primeira coisa que você faz? Provavelmente, você vai redimensionar a janela do navegador para ver as mudanças no _layout_. Provavelmente, você não vai abri-lo num celular ou _tablet_ e começar a fazer mudanças de orientação ou iniciar a execução de testes de performance. Todos nós escalamos a janela do navegador e seguimos em frente com nosso dia. Essa é a nossa experiência como designers e desenvolvedores, mas não como "usuários". Quando se visita um site como "usuário", não existe muita "paciência": geralmente as pessoas não se importam se o site "estica" bem, só queremos o que queremos (pesquisar, encontrar alguma coisa, realizar alguma tarefa, etc). "Esticar" é uma escala linear em um site. O site vai de "magro" para "gordo"? Ao invés de uma escala linear, web design responsivo deve se centrar no estabelecimento de uma base de carregamento e, a partir daí, carregar recursos _progressivamente_ a partir daí. Imagine um site que tenha que ser desenvolvido para um celular minúsculo usando IE7 em uma rede EDGE. Esse é o "ponto de partida", o "_core_ mínimo"; a partir daí, você vai incrementando com base no tamanho da tela e capacidades dos dispositivos. ## Não procure por um caminho mais fácil **Web design responsivo é complicado**. É assim que é. Eu gostaria que houvesse algo que eu pudesse dizer para tornar mais fácil, mas não há. A maioria das pessoas trabalhando com responsive web design acrescentaram algo a seus fluxos de trabalho, seja um novo produto ou apenas perguntando a um desenvolvedor se o projeto vai trabalhar responsivamente. Veja este cenário comum (história real): um amigo trabalhando em um site responsivo para um cliente. Ele está planejando o visual do site no Photoshop em tamanho desktop. Depois de alguns esboços de algumas páginas, ele queria mostrar como o site se pareceria em um tablet e um smartphone, por isso ele fez estes esboços também. Depois de apresentar ao cliente, foram dados alguns ajustes criativos. Existem mais de 50 arquivos PSD para este site e, como não poderia deixar de ser, são necessários alguns dias para rever todos os _layouts_. Tentar acrescentar novos designs sozinhos só vai resultar num processo demorado e inconsistente. Uma das melhores maneiras de resolver isso é através da criação de _wireframes_ e os apresentando para os respectivos clientes. Isso permite ter _deliverables_ sobre o layout do site sem que, simultaneamente, seja preciso se preocupar com o design. Existem ferramentas excelentes que podem ser usadas, também, para a criação rápida de _wireframes_ e protótipos, como [Twitter Bootstrap](/miscelanea/twitter-bootstrap/) e [ZURB Foundation](http://foundation.zurb.com/). Mas somente adicionar protótipos em seu fluxo de trabalho também não será o suficiente. Para ter sucesso no desenvolvimento de sites responsivos é preciso **ajustar** (o que nos leva à próxima regra). ## Abrace a mudança ![](/images/blog/novas-regras-web-responsiva/novas-regras-web-responsiva.webp) Muitos desenvolvedores, ao começarem em suas carreiras de desenvolver sites, usaram ferramentas como Photoshop e GoLive. Atualmente, existem muitos outros, considerados por alguns absolutamente necessários para a construção de um site. Obviamente não existe unanimidade, mas, por exemplo, um desenvolvedor pode usar o Photoshop para a criação de elementos gráficos, "projetar no navegador" com Sublime Text 2 e usar as ferramentas de desenvolvedor do Safari para inspecionar elementos num iOS 6, usar alguma ferramenta para compilar códigos LESS e o Terminal para controle de versão com Git. Web design responsivo também significa _mudar a maneira de projetar_. Ao invés de uma página inteira no Photoshop, é possível usar [Style Tiles](http://styletil.es/) para o projeto visual. Ao projetar o visual de um site e elementos de interface fora de uma disposição real (o que sugere o projeto Style Tiles), é possível comunicar o design diretamente e combiná-lo com protótipos para "projetar no navegador" sites responsivos. Pré-processadores CSS, como [LESS](http://lesscss.org/) e [SASS](http://sass-lang.com/), também são uma grande ajuda em qualquer fluxo de trabalho ágil. Para explicar de maneira simples, pré-processadores podem ser usados --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml