Diseños web adaptables
Necesito preguntar sobre esto porque ando algo perdida. Yo que estaba tan contenta con dominar el tema del diseño web -o eso creía- y que ya empezaba a hacer algún que otro trabajo, me encuentro ahora con la "avalancha" de los cien mil tipos de dispositivos móviles que han ido apareciendo -supongo que no haber tenido todavía un smatphone no me ha ayudado mucho-. Satisfecha con mis diseños de 1000 px, he pasado a sentirme insegura por lo que puedo ofrecer a mis clientes. No sé cómo plantearme el cambio porque llevo ya mucho estudiado, todo en plan autodidacta, y quiero centrarme más en diseñar que en estudiar -sin dejarlo, claro-. Bueno, todo este rollo que os suelto es por qué no sé por que vía optar: Responsive design, hojas de estilo para distintos dispositivos, diseños líquidos, diseños directamente diferentes para portátil y smartphone... Todo un mundo... Mis diseños tienden ser complicados, más bien barrocos, y suelen sumar bastantes kb. ¿Por dónde podría tirar? ¿Qué hacéis vosotros? ¿Hay alguna opción que sea relativamente sencilla y que no me complique mucho el trabajo? Un saludo y espero ver la luz después del túnel;) Thank you!
7 Respuestas
Te comento que desde el momento que entraste a este mundo del diseño web, internet y todo lo que compete al campo visual estamos sujetas a estar constantemente innovando, cambiando y adaptándonos a los nuevos cambios que conlleva la era de la Información.
No se en que país te encuentras, por algunas palabras tuyas noto que eres de españa, creo, en ese caso tienes que adaptarte al estilo de vida y la generación tecnológica en la que tu país se encuentra.
No es que una cosa sea mejor que otra, sino que cada cliente tiene unas necesidades, es en eso que debes de volcar tus esfuerzos.
Si te aconsejo que te actualices, pero si haces diseño web concentrate en eso, el diseño móvil es otro cuento muy diferente y he aquí que si necesitas estudiar.
Lee tips para optimizar sitios web, te recomiendo leerte el manifiesto de Cluetrain para que apliques algunas de estas tesis a tu equipo de trabajo<a> http://tremendo.com/cluetrain/</a>
Ten en cuenta algo fundamental para nuestra era, y es que los usuarios no esperan mas de 5 segundos a que se cargue una página, así que toma este tema de los kb muy en serio o sino estas fuera de linea.
Si deseas enviame algunos de los sitios que has desarrollado te doy algunas sugerencias
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
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 ;).-.
Cuando hablamos de webs, más que de dispositivos, se puede decir que se diseña para pantallas y para navegadores.
En el tema de las pantallas tiene que ver el tamaño de las mismas y la posición en la que se ve (horizontal o vertical).
En el de los navegadores, los más utilizados por la mayoría de usuarios, (IE, Chrome y Firefox en escritorio, Safari para Iphone...) están preparados para el responsive design, con lo que no tendrías ningún problema.
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
Ya me he pasado por vuestra empresa, me han gustado los diseños, son muy profesionales.
Yo soy freelance y estoy un poco más solita, evidente ;)
Te agradezco el interés que has puesto
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
No hay problema, pregunta lo que quieras, no es molestia.
Yo en particular probé joomla, drupal y wordpress en varias versiones ya que trabajo en diseño hace tiempo y me quedo con wordpress (no digo que sea mejor que los demás, es mi gusto particular).
En cuanto a los móviles los tres CMS usan plantillas así que todo depende de tu diseño, el CMS lo único que hace es darte la facilidad de manejar el contenido del sitio sobre la base de datos mediante php y mysql.
El único problema que veo en joomla es la curva de aprendizaje para el usuario final, por momentos se torna muy complicado para el cliente (que no sabe nada de diseño o del CMS y no tiene porque saberlo).
Si solo vas a diseñar para móviles yo usaría: http://jquerymobile.com/
Acá te dejo una nota clarificadora sobre "diseño responsive": http://www.cssblog.es/diseno-responsive-necesidad-o-capricho/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+CssBlogEs+%28CSSBlog+ES%29
Y un ejemplo de una web que hice usando wordpress, basando el diseño en una plantilla gratis que voy modificando en la medida de mis necesidades: 25noticias.com
Bueno mi consejo es que estudies y practiques "Responsive Web Design" y los media queries en CSS, eso es lo ultimo que esta pegando fuerte y es el futuro.
Lo ideal es hacer diseños ligeros y más sencillos, sin flash ni elementos que no abran los dispositivos móviles.
Cada vez más gente se va a conectar por su teléfono a internet, va a más. Yo lo que haría sería crear un diseño normal, y otro móvil, y que la web redirija, si es un móvil, al theme móvil.
En esto siempre tienes que estudiar si realmente quieres hacer algo distinto. Te recomendaría trabajar todo con hojas de estilo. Si necesitas hacer trabajos urgentes hay soluciones muy económicas en la red hasta que puedas dominar la técnica de diseño para smartphone. Puedes comprar una plantilla y estudiarla a fondo haciéndole modificaciones jugando con las hojas de estilo. No tener uno no es un impedimento