mozilla

Revision 347895 of Diseño web adaptable

  • Enlace amigable (slug) de la revisión: Desarrollo_Web/Web_adaptable
  • Título de la revisión: Diseño web adaptable
  • Id de la revisión: 347895
  • Creada:
  • Creador: maedca
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "primero para móviles", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardwar, desde teléfonos móviles a pantallas anchas de alta resolución.

Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:

  • Diseño líquido o fluido: Definir todos los anchos de los contenedores en términos de porcentajes de la vista del navegador, así pueden expandirse y contraerse cuando la ventana del navegador cambie de tamaño.
  • Consultas de medios: Invocar hojas de estilo diferente basándose en las capacidades de la pantalla usada, como tamaño, resolución, relación de aspecto y profundidad de color.
  • Imágenes fluidas: Hacer que las imágenes ocupen mayormente el máximo ancho de la pantalla.

Recursos

Overviews

Técnicas

Herramientas

Ejemplos

Fuente de la revisión

<p>Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "<a class="external" href="http://www.lukew.com/ff/entry.asp?933" title="http://www.lukew.com/ff/entry.asp?933">primero para móviles</a>", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardwar, desde teléfonos móviles a pantallas anchas de alta resolución.</p>
<p>Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:</p>
<ul>
  <li><strong>Diseño líquido o fluido</strong>: Definir todos los anchos de los contenedores en términos de porcentajes de la vista del navegador, así pueden expandirse y contraerse cuando la ventana del navegador cambie de tamaño.</li>
  <li><strong>Consultas de medios</strong>: Invocar hojas de estilo diferente basándose en las capacidades de la pantalla usada, como tamaño, resolución, relación de aspecto y profundidad de color.</li>
  <li><strong>Imágenes fluidas</strong>: Hacer que las imágenes ocupen mayormente el máximo ancho de la pantalla.</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>, por 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>, por 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>, por 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>, por Luke Wroblewski</li>
</ul>
<h3 id="T.C3.A9cnicas">Técnicas</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="Herramientas">Herramientas</h3>
<ul>
  <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/docs/Tools/Responsive_Design_View">Vista de diseño adaptable</a> en Firefox</li>
</ul>
<h3 id="Ejemplos">Ejemplos</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>, por 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>
Revertir a esta revisión