Publicado hace 10 años por --391712-- a misedades.wordpress.com

Tras este titular tan poético se esconde toda una filosofía de trabajo en el diseño web que un buen diseñador no puede obviar; lo que conocemos como Responsive Web Design o Adaptive Web Design. Pero tranquilos, porque no vamos a meternos a nivel técnico en este asunto. Eso será en otro artículo, antes; vamos a conocer qué es esto del diseño web adaptativo así como algunos ejemplos creativos.

Comentarios

peregrino

#6 Menú > Pendientes

D

#8 No hay menú en mi móvil...

malespuces

#9 Al lado de "menéame" hay tres rallas blancas horizontales. Eso es el menú.

D

#15 lo de las 3 rayas es ya casi un estándar, pronto para cualquier persona será natural.

#16, ¿qué móvil tienes?

D

#18 Nokia 5800 con Opera Mini.

D

#20 eso es pensando en un ordenador, en un móvil no hay ratón que pasar. De todas formas lo de las 3 rayas se suele usar al adaptar en móviles, casi en ninguna página se ven desde el ordenador. Aquí sí, pero también es cierto que desde el ordenador no hace falta el menú para nada.

#19 symbian, ¿no? Te preguntaba por si fuera un móvil con resolución de pantalla especialmente baja, pero vamos, no es el caso. Lo mismo tu Opera Mini no es compatible con ese menú o algo, a saber.

D

#21 De pantalla está bien, eso, buen sonido, whatsapp, lector de PDF y Opera Mini, ¿qué más se puede pedir? (bueno, un poco más de velocidad no estaría mal) Y sí, lleva el condenado Symbian.

DaniTC

#18 Yo creo que no estaría de más que al pasar el ratón apareciese un globito de "desplegar menú".

DaniTC

#18 Puede ser tan estándar y tan intuitivo como el símbolo de la casa (home) para ir a inicio. Intuitivo los huevos, lo que pasa es que la gente está acostumbrada, pero no lo asocia porque en el español casa es casa y punto. Lo mismo las tres rallas.

D

#24 no he dicho lo contrario.

#26 si puedes aclararme el motivo de poner la imagen te lo agradecería. Así intento mejorar lo que sea (y si es por el foro, es algo que tengo pendiente, lo que pasa es que como uso tapatalk siempre se me olvida que tengo que cambiar alguna cosilla allí). Ah, y tengo pendiente cambiar la cabecera

A

#24 Las tres rayas incluso se consideran una recomendación en Firefox OS
https://www.mozilla.org/en-US/styleguide/products/firefox-os/ (el primer logo que se muestra)
https://www.mozilla.org/en-US/styleguide/products/firefox-os/headers/ (para las cabeceras de las aplicaciones móviles)

DaniTC

#47 Ya, si Firefox lleva aún la casa (home) en su navegador. En el resto de países no anglosajones se ha impuesto por el uso, no por lo que simboliza. Lo que quiero decir es que si defienden eso, no me extraña que piensen así de las tres rayas. La verdad es que es difícil ¿cómo haces intuitivo al usuario algo así? Y encima para todas las culturas y lenguas del planeta. Es difícil.

A

#48 Me imagino que a base de repetirlo en todas partes, ponerlo en recomendaciones, etc. De esa manera podrías conseguir que sea intuitivo. Seguro que el típico niño de 5 años que maneja la tablet mejor que sus padres ya hasta siente que las tres rayas son un menú

p

#48 Lo que nunca dejará de ser intuitivo será poner la palabra "menú" en el menú, pero nos empeñamos en enterrarlo todo en capas y capas de gráficos y símbolos que sólo están claros para una parte de los usuarios.

Luego nos preguntamos por qué la gente no sabe usar las interfaces... no es ningún misterio el porqué. El que quiera estilo, que se vaya a la peluquería.

D

#12 Que en mi móvil no sale...

#13 El problema de esa es que no se puede votar ni responder, por eso usaba la "grande" hasta que la jodieron Aunque había estado buscando la versión móvil, creía que era m.menéame.net y que ya no iba, gracias

gallir

#6 #9 Diría que es muy raro que no te salga las líneas de menú que te indica #12 [*], nunca lo había oído. ¿Qué móvil es? De todas formas prueba con el reload, si sigue fallando, por favor avisa (modelo de teléfono, navegador y operador), no puede ser que no funcione (lo hemos probado hasta en Android pequeños y antiguos).

[*] Es el estándar de costumbre para el menú de opciones en las webs para móviles.

D

#39 Ya lo comenté en una nota: @1712949

Donde debería estar la cabecera con el menú sólo hay una zona gris sin texto, con un link que me devuelve de nuevo a portada, no hay menú.

Uso Opera Mini en un Nokia 5800 con Symbian 5ª edición.

gallir

#41 No lo había visto, e hice unas pruebas. A veces funciona el menú como toca (imagen) y otras hace lo que has dicho.

De todas formas, parece un problema de Opera y me va extremadamente lento (no carga ni la publicidad de AdSense y con muchos fallos ¿se conecta vía sus propios servidores, no? Porque también me dice "fallo de conexión en la red" en ajustes.

D

#46 Opera Mini comprime el contenido, es decir, te lo mandan desde sus servidores. En la versión Symbian no se puede deshabilitar esa opción, va integrada, en Android creo que sí. Es posible que sea ese el problema, y sobre todo la falta de javascript (aunque antes al darle al menú desplegable en el que sale el número de respuestas me mandaba la página con el menú desplegado).

davidgj

#9 También puedes usar la versión "reduced": http://www.meneame.net/mobile/

o

#6 Amen hermano y lo mismo para 99% de las versiones moviles de webs que lagean y van infinitamente peor en el movil que la version de escritorio ¿quien cojones las testea? ¿un mono?

enlaza

#6 Pues a tecnología no se puede ir directamente en versión movil.

t3rr0rz0n3

#7 Yo siempre he dicho "Diseño Adaptativo"

D

#7 #10 Pues yo casi que prefiero el término anglosajón que la traducción (que los españoles somos muy de traducirlo todo): "sensible" lol lol lol lol

a

#14 No hace falta traducir literalmente. Puedes decir "adaptable" y se entiende perfectamente. Además, con todo esto ya existía el concepto de "fluido" para expresar esa misma idea; no sé muy bien qué diferencia hay entre "fluid design" y "responsive design".

D

#27

Las diferencias son bastantes minimas, pero si hay una diferencia, aqui lo explican muy bien:

http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2

De hecho en la especificacion de Bootstrap 2, podias especificar que una fila fuera "fluid" o no (row , row-fluid creo que era)

D

#27 #31
El concepto "responsive web design" engloba algo (bastante más) que dejar de usar tamaños fijos en los elementos (base de las veteranas páginas fluidas, porcentuales, adaptables...).

D

#27 Pues para serte sincera, yo si que no tengo la menor idea de si hay diferencia o no entre "fluid" y "responsive"

Ka0

#32 el diseño adaptable no necesariamente es fluido y cuando lo es, es dentro de unos maximos y minimos. Por ejemplo si tienes una pagina con 3 columnas, si es fluido, a medida que estrechas la pagina las columnas se estrechan, en el responsive, se estrechan hasta un ancho minimo (definido por el desarrollador) y a partir del minimo pueden volver a ser un 100% de ancho y reordenarse unas encima de otras, con lo que se convierten en una unica columna.

krleza

#14 #7 #10 Yo lo llamo diseño de respuesta ^_^

ED209

#64 #70 nadie ha dicho que por hacer una página responsiva tengas que visualizar exactamente los mismos contenidos en desktop que en mobile. Puedes hacer unos media query muy majos que oculten contenido: sin ir más lejos en bootstrap3 tienes clases como hidden-xs, por ejemplo.
No necesitas JS para un diseño responsivo, los media queries CSS3 son suficientes para escalar las imágenes y adaptarlas.
Además el enviar un mismo HTML por página a todos los clientes (desktop y mobile) y un mismo archivo .css para todo el site web hace que sean cacheado por parte del navegador.

#14 ¿es que nadie usa "responsivo" como traducción de "responsive"?
#72 y la quiere "para ayer"

Ka0

#73 El cliente siempre quiere lo mismo, que este bien hecho, que sea barato y que se lo hagas rápido, nosotros debemos ofrecer las tres opciones en un paquete de dos:
- Bueno y barato
- Bueno y rápido
- Barato y rápido

a

#10 Falen y... ¿por qué me votas negativo? ¿Ofende mi comentario a alguna minoría? ¿Es insultante? ¿Tiene faltas de ortografía?

D

#23 Supongo que ha revisado tu lista de comentarios y ha visto que en ninguno decías "Diseño Adaptativo" y ha pensado: "Es un mentiroso"

t3rr0rz0n3

#23 El tono con el que escribes no me gusta

t3rr0rz0n3

#66 Thanks for the info brother.

D

'... ingeniería dactilar ...; zoom para los textos más pequeños, minimizar los titulares, links que no te llevan a ninguna página porque no aciertas en el sitio adecuado con esos dedazos ...'

D

Vaya por delante que no soy más que un tipo que lleva algún tiempo haciendo web, en general. No soy experto en usabilidad, ni en programación, ni en diseño, ni en casi nada.

Dicho esto... creo que tal como se está entendiendo y usando el DWR es un desastre total, es una especie de parche de pobres o el recurso del gafapastas. En el primer caso, porque es totalmente delirante pensar que una web debe ser lo mismo "pero adaptado" en un PC que en un móvil, cuando los patrones de consumo y expectativas de información son completamente distintos. Y en el segundo, porque no deja de ser una "cosa chula para alucinar clientes".

El diseño responsivo parte de la base de que un mismo contenido debe poder mostrarse en varios dispositivos sin cambiar demasiado el patrón gráfico, simplemente ajustando el tamaño de las fotos/videos mediante JS y la posición de las cajas simplemente con CSS (o también con JS). Se trata de que un mismo o similar diseño pueda verse en horizontal grande, horizontal/vertical tablet y horizontal/vertical móvil.

En general, contemplo siempre dos escenarios distintos: el PC/tablet y el móvil. En el primer caso, tanto el diseño como la expectativa del usuario es prácticamente la misma: uso extenso, lento, continuo, amplio e informativamente completo, normalmente bajo wifi o cable lan. Las webs pueden ser todo lo espectaculares que se quiera, con todos los "aditamentos" que se necesiten o el cliente pueda pagar. Las pantallas de hasta 7" son suficientemente grandes como para presentar mucha información (dos/tres/cuatro columnas) incluso en el peor de los casos. Aunque en proyectos en los que hay "pasta" se pueden hacer CSSs para tablet vertical, generalmente se desecha porque casi nadie los usa así en navegación web (apenas en lectura de libros y PDFs). Sería ideal que fuese el nuevo equipo el que se adaptase a los millones de webs ya existentes... pero el griterío appleniano ha hecho que se tome en cuenta crear diseños ligeramente adaptados a tablets en tamaño. La estética metro ha dado el aldabonazo necesario para empezar a tomar en serio los botones grandes (tamaño dedo) y los colores planos, algo que por otra parte es viejuno (una moda adelantada a su tiempo que vuelve para solventar problemas; bienvenida sea).

En cuanto al móvil... pensar que simplemente con hacer una template responsiva hemos cumplido es simplemente no haber entendido nada. Es cierto que es más barato (apenas unas cuantas mediaquerys y un poquito de JS por aquí y otro CSS por allá, nada complicado) hacer una template adaptativa para movil y convencer al cliente de que hemos cumplido, obteniendo un cerito más en la factura... pero la realidad es que ni de lejos nos hemos acercado. El patrón de uso del móvil es rápido, concreto, poco pausado, de conveniencia. Normalmente, además, con tarifa de datos en vez de wifi, poca batería y (obvio) poca pantalla para leer, o muy incómoda.

Es por eso que un diseño adaptativo no es más que un mal parche para dos tipos de web que deben plantearse completamente distintas... no en cuanto a diseño, sino en cuanto a arquitectura de información, porque esa es la clave. Menos información, más selecta, mejor organizada y más focalizada en las preferencias del usuario; ha de ser más rápidamente searchable, más adaptable en contenidos y con herramientas de búsqueda más potentes que las webs no móviles. Hay menos tiempo, menos canuto de conexión, menos pantalla.... así que hay que ofrecer fórmulas rápidas de llegar a una información en vez de ofrecer todas las informaciones posibles.

Por supuesto, es solo mi opinión. Pero 15 años en el negocio te dá para haberle dado un par de vueltas al asunto

D

#64 "Menos información, más selecta, mejor organizada y más focalizada en las preferencias del usuario..." completamente de acuerdo contigo

KimDeal

#64 me parece una opinión excelente y que me apunto (de parte de uno que lleva sólo 2 años en el mundillo web y la mayor hostia me la he pegado intentado adaptar una web al móvil).

Ka0

#64 el problema no es de el responsive, es de un mal uso de esa herramienta, se puede hacer perfectamente una web responsive correctamente adaptada y con una arquitectura de la información diferente segun el dispositivo, lo que pasa es que muchas veces es el cliente el que quiere toda la información en todos los formatos y que todos los textos destaquen y que fueran en negrita y todo en mayusculas y todos en h1...

T

No entiendo como webs como la de Adobe no han adaptado su formato

D

#2 Entre otras...es incomprensible, la verdad.

s

#2, #3, #4 La web de Adobe es 100% responsive. Puede gustarte más o menos, pero decir que necesita un diseño adaptativo no tiene sentido, está perfectamente adaptada a móviles. En mi opinión parece que el autor no es especialmente experto sobre el tema, y además explica cosas que se llevan usando años, no me parece noticia de ninguna manera

francmsk

#4 Yo estoy adaptando algunas que son un suplicio, que más me sale a cuento crear una estructura nueva o redirigir dependiendo de la pantalla, pero como eso afecta al SEO también es una putada edit

h

#5 se puede hacer redirecciin sin q afecte al seo. Echate un ojo al alternate tag y el canonical

D

#2 No has mirado la de Apple no? Eso si que da penita

D

Anda que no hay por ahí artículos con suficiente rigor y calidad como para que se lleve precisamente a portada.

Bueno, si es para gente ajena al desarrollo y creación de páginas o aplicaciones web estaría bien el totum revolutum
Pero si es para un público más específico vinculado a ello, deja bastante que desear.

Mezcla y da a entender que el RWD es lo mismo que el AWD. Comete el error a estas alturas de usar la expresión rechazada expresamente "diseño web adaptativo" no se sabe si para referirse al "responsive" o al "adaptive".

Habla y mezcla desde puntos muy diversos como desde la perspectiva del uso de la web, desde el punto del la metodología para realizarza como desde el de la gestión/generación de contenidos y su presentación y distribución.

Así, conceptos como "mobile first", degradación elegante(¿no querría referirse a la mejora progresiva?) lo presenta como objetivos o el producto final cuando en realidad son metodologías o planteamiento del trabajo...

Pero todo lo anterior posíblemente esté errado por completo. Es sólo la opinión de un amater.

D

#33 Te doy la razon en que el articulo es triste, pero para el publico al que va dirigido no esta mal.

Que otras cosas engloba el responsive design aparte de anadir etiquetas@media, basarse en un diseno por columnas, css3 apoyado por _un minimo_ de js.... ?

D

#37 Permíteme que para que no me tilden de hacer spam te remita a mi blog. Tienes unos cuantos artículos al respecto. Algunos ya veteranos y a los que posíblemente algún aspecto, como el preocuparme de su denominación en español, hoy obviaría.

Pero si quieres una "definición" (con lo que ello supone) el rwd (y también el awd):
Hace posible que tanto la forma (el continente) como el manejo de la información (el contenido) es la óptima y está adaptada para mostrase en el dispositivo que la demanda y para que éste (el aparato) la pueda manejar según sus capacidades.
O de otra forma: hacer lo más grata la experiencia al usuario con independencia de con qué o cómo visite la página. Y hacerlo con el mínimo de recursos o esfuerzos, tanto para el desarrollador como para el visitante y para su dispositivo.


El cómo o con qué herramientas ya dependerá de cada proyecto.

D

#38

Con la definicion que das en principio no veo nada nuevo, pasame tu blog por privado si no te importa, que igual me interesa

D

#40 Claro. Es que una declaración de intenciones o de pretensiones es lo que tiene. Ya sabes, para ti la redacción de la ley y déjeme desarrollar el reglamento
Está en mi perfil de mnm, pero ¡qué c**+! Por una experiencia grata de usuario vamos a ahorrarte clicks innecesarios http://ksesocss.blogspot.com

D

#42

Se me ha ido el dedo en el touchpad y te he votado negativo al anterior comentario, no me preguntes porque ...
De todas maneras, muy interesante el blog, es muy raro encontrar contenido tan detallado en espanol.

Siguiendo la conversacion, responsive design es otro termino que podemos anadir a los 10.000 que ya existen y se inventan cada dia,
al final todo se basa en adaptar la pagina a diferentes formatos y hacer la experiencia del usuario mas "grata".

Gracias

D

Otro ejemplo de Responsive Web Design, mi página http://www.rubikaz.com

Bueno, es un estilo sacado de wordpress y retocado (la web es wordpress solo algunas páginas). Y lo cierto es que cuando hice los cambios noté un aumento en el número de visitas, bueno, más que aumento, que aguantaban más en la web.

Por supuesto que no todo lo tengo adaptado, seguro que cualquiera que se ponga me saca tropecientos defectos, pero bueno, poco a poco (el foro en vez de adaptado cambia a un estilo para móviles), pero para no tener apenas idea de CSS3 y demás, pues me voy apañando

mauser_c96

#17 Estooo...

alexwing

No se yo creo que hacerlo por que si es un error, para algo esta el zoom del navegador, a mí por ejemplo me gustaba más meneame sin el diseño adaptativo, luego hay páginas como la de xataka que las versión de móvil es un suplicio y siempre le tengo que dar ver como escritorio.

D

#54 Sí los he probado... pero el plugin que uso para cachear no distingue entre escritorio y movil, y al final acaba apareciendo la web movil en el escritorio o al reves.
Y si desactivo el caché de las páginas, la web pasa de cargarse en 2 segundos a cargarse en 10 porque la base de datos del servidor va lenta.

De todas formas tarde o temprano tendré que añadir una versión movil como sea.

A

#56 Ánimo

D

Una sugerencia: no por adaptar vuestras webs al móvil os olvidéis de los usuarios de escritorio que navegamos con ratón y teclado.

Yo creo que lo ideal es hacer lo que se ha hecho toda la vida: tener una web para móvil y otra para ordenador normal. Es la mejor forma de satisfacer a todos, porque yo como usuario de escritorio no me gustan las interfaces demasiado orientadas a móvil, ya que suelen ser tediosas de usar.

Zeioth

Tomar la decision de implementar un diseño responsivo no es algo que se deba hacer a la ligera. Una buena responsividad requiere mucha maestria y tiempo por parte del programador. Bien hecho, no te lo hace cualquiera.

osiris

Alguien se anima a hacerme un diseño para www.laheliadoparda.com?
Hasta pago y todo! Un lujo!

D

Yo tengo varias webs y algunas es muy facil adaptarlas.... pero otra es imposible porque se rompen todos los plugins, o simplemente habría que hacerlas de nuevo.

PD: Y si las webs tienen solo un 5% de visitas desde movil no vale la pena... todo depende de la temática de la web.

D

#36 ¿existen páginas con solo un 5% de visitas desde dispositivos móviles? Lo digo porque las mías, que no tienen ningún tipo de contenido especial para móviles, andarán por el 30%.

D

#45 Por ejemplo, una de mis webs está enfocada a empresas y estudiantes. El perfil de gente que se mete es de personas mayores desde el ordenador del trabajo o de casa... Tiene solamente en torno al 9% de gente entrando desde el movil/tablet.

#50 En mi caso los plugins de Wordpress. Por ejemplo tengo uno que cachea las páginas para que la web funcione más rápido... pero si activo el tema para movil las cachea mal y las confunde. La solución ahi sería desactivar ese plugin en páginas para móviles, pero haciendo eso la web iria mucho mas lenta en los moviles.

A

#53 ¿Has probado a plugins específicos para móviles en plan estos:?
"3 of the Best WordPress Plugins to Make Your Site Mobile-Friendly" http://www.sitepoint.com/wordpress-mobile-plugins/

A

#36 ¿Qué plugins, javascript o así?

D

¿Poético? Teatral, más bien.

mnm-tedio

#0 Sorry y un montón, porque voté negativa esta noticia involuntariamente.

D

#63 :(((((