Diseños web adaptables

Lo primero es agradecerte el que hayas confiado en mí.

Te voy a hablar desde mi experiencia de desarrollador web que toca tangencialmente el tema del diseño, más como algo complementario que como el núcleo de mi trabajo.

Los tiempos cambian y hay que adaptarse a ellos, como hay que adaptarse a los diferentes clientes. Mi recomendación es que intentes adaptar tus diseños al Responsive Resign lo antes posibles, me preguntarás, ¿esto qué implica?

La idea del Responsive Design es que 1 sólo diseño satisfaga las necesidades de la mayor parte de los dispositivos existentes. La teoría está muy bien. ¿Cuál es la pega? Pues que el trabajo que se tiene que realizar es mayor que si estuvieras haciendo un diseño habitual, aunque la idea es que sea menor que si tuvieras que hacer 1 diseño para cada tipo de dispositivo.

En la práctica, lo que se hace, a grandes rasgos, es adaptar la hoja de estilos con distintas clases para cada dispositivo, que logran, al aplicarse, que el diseño de la página se adapte a cada dispositivo.

Con el tema del peso de las fotos, del que hablas, también pasa algo similar, hay que subir la misma imagen varias veces, con distinto tamaño y peso, para adaptarse a cada dispositivo.

Al principio puede parecer lento y farragoso, pero cuando se le coge la marcha hará que tus diseños sean mucho más flexibles y adaptables.

En mi opinión personal, hay que estar estudiando siempre, porque la web es un medio vivo, que evoluciona y hay que estar atento para adaptarse a los cambios, sino, lo que ofreces, ya no es de una calidad suficiente como para competir.

Te paso algunos enlaces que espero que te ayuden a aclararte:

http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo

http://www.desarrolloweb.com/manuales/videotutoriales-responsive-web-design.html

http://designmodo.com/responsive-design-examples/

Vaya! Muchas gracias por la respuesta.

No quiero abusar porque ha sido genial tu respuesta, pero al haber tantos dispositivos actualmente, ¿se pueden compilar en 2,3 4 tipos? No sé, por ejemplo, un ipad, un smartphone con pantalla en vertical y otro de los que se llaman "apaisados -tampoco estoy muy ducha esto ;).-.

Me ha sorprendido que me llegue una pregunta, hacía años que no pasaba por esta web.

Ahora que me dedico profesionalmente al desarrollo web, me he enfrentado muchas veces al problema de adaptar una web a móvil.

Lo ideal para hacerlo, es hacer dos sitios web: uno para móvil y otro para escritorio. Puedes copiar y pegar, y luego adaptar el sitio móvil. La idea de dos hojas de estilo distintas también es buena. Busca la resolución de pantalla más común al público dirigido (yo normalmente las hago de 300 px de ancho, a ser posible adaptable).

Ten en cuenta que los contenidos flash por ejemplo, es mejor evitarlos, ya que smartphone baratos como los android pequeños, o los software restrictivos como los de Apple, no son capaces de reproducirlos.

Es muy importante que el ancho, aunque tenga un límite, no sea fijo. De esa manera se verá bien tanto si la pantalla es ancha como si no, tanto si se ve con el móvil en vertical o en horizontal

Una vez tu sitio móvil esté preparado, tendrás que crear una página, quizás PHP, o ASP, lo que conozcas mejor, que sea capaz de detectar el dispositivo, y en caso de ser móvil te redirija a tal sitio. Esa página será la index, ya que deben pasar por ella todas las visitas

Esto puede darte un trabajo de máximo 2 días creo yo, si ya tienes la web de pc bien estructurada.

A ver si así te he ayudado en algo. Si necesitas algo más, o códigos o algo, no dudes en preguntar.

Gracias por responderme tan rápido!

Me has aclarado bastante...

Sólo una última pregunta. Los ipad y tablets -la verdad, no sé si son comparables-podrían tener el diseño de "escritorio" y luego podríamos dejar los otros dispositivos aparte -en los que aplicas 300 px-. ¿Sería una buena distinción o habría otra más indicada? -es que no manejo este tipo de dispositivos ;(

gracias de verdad

Si, teniendo en cuenta la nueva salida de iPad mini, y el uso creciente de iPad o similares (nexus, etc) es bueno tener un tercer sitio, aunque creo que también se podría adaptar el sitio de escritorio al iPad, ya que no te cambiará demasiado. Depende de tus exigencias =) pero si, un tercer sitio es posible, aunque hoy por hoy no conozco el código que identifica a los iPad cuando se usan en una web je je pero seguro que don google lo sabe :P

Últimamente, hemos creado en mi empresa una aplicación de móvil, relacionada con una web. La hemos orientado a Android, porque en la tienda de Apple es más costoso ponerlo, pero la web misma se podría abrir en cualquier dispositivo. Por si te ayuda un poco, la web de esa aplicación que hemos creado es http://app.restaurat.es/

La aplicación, que usa esa web, está en el Market, busca "Luzmenu" (mi empresa) y te aparecerá como único resultado

Te paso algunas herramientas que uso para hacer este tipo de "diseños adaptables", si entiendes de CSS te va a ser muy fácil:

- http://cssgrid.net/ este framework es muy fácil de usar y está muy bien explicado, te va a servir para adaptar tu diseño a cualquier dispositivo. (Hay muchos otros y muy buenos)

- Para usar este tipo de frameworks es indispensable entender el concepto de "Media Queries": ej:

@media screen and (min-width: 900px) {
.class {
background: #ccc;
}
}

@media screen and (max-width: 320px) {
.class {
background: #000;
}
}

"la misma clase maneja distintos valores, si el dispositivo muestra tu diseño en una pantalla con un máximo de 320px el fondo de class va a ser negro, si el dispositivo tiene como mínimo 900px de ancho el fondo de la clase va a ser de color gris."

- Creo que las ultimas versiones de dreamweaver traen herramientas para diseño adaptativo, pero yo prefiero usar notepad++.

Bueno creo que con eso tienes para empezar, no importa si tus diseños son muy complicados o muy simples si están basados en css son fáciles de adaptar a cualquier framework, por supuesto hay mas herramientas para usar pero depende de lo que necesites para tu sitio (formularios, mapas, videos, animaciones, etc) y sobre todo si usas solo xhtml o usas algún CMS tipo joomla o wordpress.

Otra opción a usar para dispositivos es http://jquerymobile.com/ pero esto es otra historia.

Gracias por tu extensa respuesta!

Solo una cosilla por si supieses algo al respecto, ¿Joomla es una buena plataforma si pensamos en diseño para móviles? Me refiero más que nada a si tiene alguna pega, porque llevo un tiempo estudiando este CMS y no sé si como Flash acabará quedándose obsoleto.

Y ya paro, que no me gusta abusar.

Un saludo