Categorías
Diseño web

9 GIFs animados que te explican lo que es responsive design

¿Qué es el diseño responsivo o responsive design? La mayoría respondería vagamente que se refiere a los sitios webs que funcionan igual de bien en una pc de escritorio como una tablet o un smartphone. Pero es mucho más que esto.

Sin embargo los principios del responsive design no son difíciles de entender, gracias a esta colección de GIFs animados hechos por Froont, una empresa especializada en hacer herramientas para crear sitios responsivos.

Los diseños responsive se expanden con fluidez, mientras que los diseños adaptados se demoran un poco.

responsive vs adaptative
[hr]

Posicionar los elementos de diseño usando píxeles como coordinadas X, Y pueden causar que un sitio diseñado en una pantalla se vea raro en otra. Hay que usar unidades relativas, como porcentaje de pantalla en vez de unidades como píxeles.

3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy
[hr]

A medida que el tamaño de la pantalla se vuelve más pequeño, el contenido empieza a tomar más espacio vertical y todo lo que está debajo baja con él. Esto se llama el flujo (flow).

3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy
[hr]

Los puntos de quiebre (breakpoints) permiten que la caja cambie en puntos predefinidos. Por ejemplo: Se tienen 3 columnas en la PC de escritorio, pero solo una columna en un dispositivo móvil.

3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co
[hr]

Usar elementos anidados (nesting) para que los objetos en la pantalla se expandan o encojan como un grupo en vez de individualmente.

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy
[hr]

A veces es bueno que un contenido abarque todo el ancho de la pantalla, pero en pantallas grandes como un TV tiene menos sentido.

3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy
[hr]

Técnicamente no hay mucha diferencia si un proyecto empieza por una pantalla pequeña hacia una gran pantalla (mobile first) o viceversa (desktop first). Sin embargo se notan mejor las limitaciones y posibilidades del diseño si empiezas primero por lo móvil.

3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy
[hr]

¿Tus íconos tienen muchos detalles y efectos? Entonces usa bitmaps. Si no, trata de usar vectores. Una imagen vectorial se adapta mejor a diferentes resoluciones.

3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy
[hr]

Fuente: Fast Company

Categorías
Diseño web

Trabajar contenido embebido en un diseño responsive

Ahora que está de moda el diseño responsivo es necesario también contar con los medios para que el contenido embebido (De YouTube o Google Maps, por ejemplo) sea también adaptable.

01-non-responsive-video

Para pasar de la figura de arriba a un contenido responsive es necesario unos trucos en CSS.
Para pasar de la figura de arriba a un contenido responsive son necesarios unos trucos en CSS.

La gente de Smashing Magazine nos enseña unos trucos en CSS para lograrlo.

Enlace: Making Embedded Content Work in Responsive Design

Categorías
Diseño web

7 consejos para hacer un buen diseño responsivo

responsive-design2

Genbeta Dev nos da 7 consejos para hacer un buen diseño responsivo (responsive web design). A saber:

  1. Empieza con una plantilla. No hay que descubrir la pólvora cuando ya está descubierta. Podemos probar con Skeleton, Omega y Amazium.
  2. Trabaja con layouts basados en grids fluidos. Nada de pixeles. Todo porcentajes y relaciones.
  3. Imágenes flexibles o adaptativas. Hay que tener reglas de CSS bien definidas y un buen número de presets para los tamaños.
  4. JQuery es tu amigo. Utiliza los plugins, prueba, experimenta.
  5. No te olvides del viewport de Apple. Lo que domina el mercado son los iPhones y los iPads.
  6. Fondos escalables. Fundamental para dar una sensación de responsive design bien hecho.
  7. Inspírate y prueba. Hay miles de ejemplos, anímate a «copiarte» y adaptarlos a tus necesidades.

Vía: Genbeta dev

Categorías
Diseño web

29 sitios web con diseño responsivo

El diseño responsivo (responsive web design) ya es una realidad y las grandes empresas lo están usando como solución para el rediseño de sus sitios web.

The Next Web ha hecho una recopilación con 29 diseños sitios web que usan esta tendencia. Pongo los más resaltantes a continuación.

1. BBC

BBC responsive web

2. Disney

Disney web

3. Harvard University

Harvard responsive web

4. Time

Time responsive web

5. Starbucks

Starbucks web

6. Sony

Sony responsive web

7. Microsoft

mshp-design-devices

Mientras que aquí en mi Universidad hemos también lanzado la versión beta de nuestro sitio de noticias totalmente responsivo.

Udep Hoy

Udep Hoy

Categorías
Productividad

Aprende inglés gratis con Google Plus

Logo de Colingo

Colingo es una empresa que le saca provecho a los Hangouts de Google Plus para brindar clases de inglés de manera gratuita. Para registrarse, necesitamos tener una cuenta de Facebook.

Suena muy interesante, les animo a probar.

¿Qué más? El sitio web es responsivo (responsive web design). Ya se ve que esto se está poniendo de moda.

Enlace: Colingo
Vía: Arturo Goga