Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Diseño Web

Responsive Design. Consejos para Diseño Sensible

31 mayo, 2012
en Diseño Web
0
Tutorial básico para Responsive Design
Share on FacebookShare on Twitter

El diseño sensible o responsive design es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca (ordenador, tablet o smartphone). Como ejemplo puedes ver esta web desde cada uno de los dispositivos y veras el flujo de elementos dependiendo del dispositivo.

Atrás quedaron los días en que el diseño de una interfaz fija para un pantalla de ordenador lo suficientemente ancha. El diseño de su sitio web ahora debe ser  compatible y optimizado para teléfonos inteligentes y tabletas, que trabajan con diferentes resoluciones de pantalla, y que garanticemos un sitio web que se ve bien en todo tipo de los dispositivos actualmente disponibles en el mercado.

Veamos unos consejos para resposive desing:

  1. Empieza con una plantilla. Si, mola ser un tipo duro y empezar las cosas desde cero pero si hay cosas muy chulas ya hechas (Skeleton, Omega, Amazium…), ¿por qué no utilizarlas si ahorras tiempo?
  2. Trabaja con layouts basados en grids fluidos. ni una medida en pixeles, todo en porcentajes y relaciones
  3. Imágenes flexibles o adaptativas. Esto no siempre es fácil y la mayoría de las veces es costoso pero con unas reglas de CSS bien definidas y un buen número de presets para los tamaños de las imágenes, se puede lograr y dar un aspecto genial.
  4. Utiliza jQuery. Exprime los plugins de jQuery.
  5. No te olvides del viewport de Apple. Los iPhones y los iPads son lo que está copando el mercado.
  6. Fondos escalables. Primordial para dar una sensación de responsive design bien hecho.
  7. Inspírate. Navega, navega, navega y sigue navegando para ver que hacen el resto de los mortales.
  8. Probar. Nunca dejes de probar, y volver a probar, todas las veces que sea necesario. Recuerda que tus visitantes no tienen porque utilizar el mismo navegador que tu. Estas herramientas pueden ayudarte en este trabajo tan tedioso pero muy necesario.

Fuente: Cats who Code

Etiquetas: diseño sensibleresponsive design
ANUNCIO
Post anterior

Favicon

Próximo Post

Galería de imágenes en php

Otros Posts

Diseño de páginas web, el mejor escaparate digital para un negocio

Diseño de páginas web, el mejor escaparate digital para un negocio

3 septiembre, 2021
0

Cualquier negocio que se precie debe estar presente en internet, es la única manera de ampliar clientes y crecer cada vez más. Las empresas que están presentes en internet presentan unas cuentas de resultados mucho...

Manual diseño web: Planificación y configuración de un sitio web

Cómo hacer una página web paso a paso

15 agosto, 2021
0

Es fácil sentirse un poco perdido cuando estás construyendo su primer sitio web. Es posible que estés sentado allí pensando, ¿cómo hacer una página web paso a paso?  Crear una página web es la oportunidad...

Recomendados

Manual de Google+ para empresas

Manual de Google+ para empresas

2 agosto, 2013
Tutorial crear efecto metálico en un botón

Trabajando con capas en Photoshop

18 enero, 2011
Dreamweaver CS6

Dreamweaver CS6

10 mayo, 2012
Creando una web, ejemplo con div y css. 1ª Parte

Creando una web, 2ª parte

24 febrero, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .