diff options
Diffstat (limited to 'files/pt-br/desenvolvimento_web/responsive_web_design/index.html')
| -rw-r--r-- | files/pt-br/desenvolvimento_web/responsive_web_design/index.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/files/pt-br/desenvolvimento_web/responsive_web_design/index.html b/files/pt-br/desenvolvimento_web/responsive_web_design/index.html new file mode 100644 index 0000000000..5655d1024d --- /dev/null +++ b/files/pt-br/desenvolvimento_web/responsive_web_design/index.html @@ -0,0 +1,40 @@ +--- +title: Responsive Web design +slug: desenvolvimento_web/Responsive_Web_design +translation_of: Web/Progressive_web_apps +--- +<p>Com os usuários da Web usando cada vez mais dispositivos móveis para navegar em sites da Web e aplicativos, Web designers e desenvolvedores precisam ter certeza de que suas criações olhar tão bom e funciona tão bem em dispositivos móveis como em computadores de mesa tradicionais. Proeminente designer de Luke Wroblewski defende criação de "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">Mobile First</a>", ao invés de como um adendo ao projeto para desktops. Se você design para dispositivos móveis como alvo principal ou como um extra legal, você pode usar o poder do CSS para garantir que o mesmo conteúdo pode ser acessado em todas as plataformas de hardware, desde telefones celulares a telas de alta resolução wide-screen.<br> + </p> +<p>Esta abordagem é conhecida como "Web design responsivo". Algumas de suas estratégias incluem:</p> +<ul> + <li><strong>Layout líquido ou fluido</strong>: Definição de todas as larguras de contêineres em termos de percentagem do navegador visor, de modo que eles se expandem e contraem como a janela do navegador muda de tamanho.</li> + <li><strong>Media queries</strong>: Invocando as folhas de estilo diferentes de acordo com as capacidades da tela que está sendo usado, como tamanho, resolução, formato e profundidade de cor.</li> + <li><strong>Imagens fluidas</strong>: Definir imagens para ocupar, no máximo, a largura máxima da tela.</li> +</ul> +<h2 id="Recursos">Recursos</h2> +<h3 id="Overviews">Overviews</h3> +<ul> + <li><a class="external" href="http://www.alistapart.com/articles/responsive-web-design/" title="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web design</a>, by Ethan Marcotte</li> + <li><a class="external" href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/" title="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's guide to responsive Web design</a>, by Rick Petit</li> + <li><a class="external" href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" title="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">Responsive Web design: What it is and how to use it</a>, by Kayla Knight</li> + <li><a class="external" href="http://www.lukew.com/ff/entry.asp?1436" title="http://www.lukew.com/ff/entry.asp?1436">Multi-device Web design: an evolution</a>, by Luke Wroblewski</li> +</ul> +<h3 id="Techniques">Techniques</h3> +<ul> + <li><a href="/en/CSS/Media_queries" title="CSS media queries">CSS media queries</a> reference page</li> + <li><a class="external" href="http://css-tricks.com/6731-css-media-queries/" title="http://css-tricks.com/6731-css-media-queries/">CSS media queries and using available space</a>, by Chris Coyier</li> + <li><a class="external" href="http://www.maxdesign.com.au/articles/liquid/" title="http://www.maxdesign.com.au/articles/liquid/">Liquid layouts the easy way</a>, by Russ Weakley</li> + <li><a class="external" href="http://unstoppablerobotninja.com/entry/fluid-images/" title="http://unstoppablerobotninja.com/entry/fluid-images/">Fluid images</a>, by Ethan Marcotte</li> + <li><a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/" title="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">Designing for touch screen</a>, by Chris Kemm</li> + <li><a class="external" href="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/" title="http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/">Responsive Web Design Techniques, Tools and Design Strategies</a>, by Smashing Editorial Team</li> +</ul> +<h3 id="Tools">Tools</h3> +<ul> + <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> in Firefox</li> +</ul> +<h3 id="Examples">Examples</h3> +<ul> + <li><a href="/en-US/demos/devderby/2011/october" title="https://developer.mozilla.org/en-US/demos/devderby/2011/october/">DevDerby demos of CSS media queries</a></li> + <li><a class="external" href="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design" title="http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design">20 Amazing examples of using media queries for responsive Web design</a>, by Joshua Johnson</li> + <li><a class="external" href="http://designmodo.com/responsive-design-examples/" title="http://designmodo.com/responsive-design-examples/">Responsive Web design: 50 examples and best practices</a></li> +</ul> |