Diseño adaptativo, basta con solo trasladar los px a % o em?

[Lola Lola]

Hola amigos!

No se si llego tarde a ello o no, pero estoy en la tarea de hacer mis diseños web adaptativos (al menos adaptativos, ya que no tengo aun conocimientos para hacer un responsive design). Tengo ya un diseño armado en px y quiero hacerlo adaptativo.

la preguntas en concreto son:

1) Basta con solo trasladar mis tamaños en pixeles a porcentajes o ems??? O hay alguna otra cosa a tener en cuenta? En general, los elementos se ordenan de manera similar que en px al trasladar medidas a % o ems? Así de simple?

2) Estuve leyendo bastante y vi por ahi que a las columnas de los diseños hay que darles un ancho mínimo para que, al verse en un celular, mantenga cierta legibilidad, es correcto? Entiendo luego las columnas se posicionarian en un orden vertical. Algo más a tener en cuenta?

3) Que hay del uso de grillas base, como las que se mencionan en este articulo? http://www.creativasfera.com/los-mej...ponsive-design

Espero su colaboración como siempre! Saludos a todos!!


Lola

[pzin]

Voy a pensar que con adaptativo te refieres a un diseño líquido.

En principio si, lo que es la estructura puedas pasarla de píxeles a porcentajes sin mayor problema.

Lo del ancho mínimo, indirectamente, te estás metiendo en cuestiones de diseño responsivo, que dices que no querías abordar de momento. Aunque realmente podrías hacerlo, ya que el diseño responsivo es realmente un diseño líquido con algún añadido extra, que vienen siendo las media-queries.

Lo de las grillas, yo siempre digo que es para sitios complejos, con muchas estructuras diferentes y demás. Para la gran mayoría de sitios no hace falta usar ningún sistema de grillas.

[Lola Lola]

Hola pzin, como estas?

Si, con adaptativo me refiero a que, segun entiendo, el diseño web que busca ser correctamente visualizado en todos los dispositivos se divide en adaptativo o responsive, y a ello me refería con adaptativo. Tengo entendido que adaptativo es solo trasladar de px a % en una web ya maquetada en px, mientras que responsive es maquetar desde cero usando otros elementos y selectores.

Entiendo tu explicación. Creo que trasladaré sin mayores problemas mi diseño ya armado. Crees que es mejor trabajar con porcentajes o con em?

Lo de los media-queries es algo que he leído pero no domino aún, creo que estudiaré del tema antes de aplicarlo.

Por último, que bueno que me aclares lo de las grillas ya que mejor no meterme aun con cosas complejas.

Muchas gracias y saludos!

Lola

[educhip]

El diseño web adaptativo como sabes consiste en que el documento se adaptará al tamaño del puerto de visualización (pantalla en este caso), digo esto porque muchos desarrolladores novatos confunden tamaño de pantalla con puerto de visualización, y no es lo mismo.

Para ello como te dicen tienes que hacer uso de los media-querys en css, definiendo tres, para móvil, tablet y pc.

Si lo haces pasando los pixeles a em, sólo conseguiras que se adapten los divs, pero las imágenes y demás elementos permanecerán a su tamaño original. Para que las imágenes funcionen en responsive es necesario incluir un archivo que dreamweaver introduce llamado respond.js.

Una vez tengas esto hecho podrás ir definiendo cada elemento en la hoja de estilos css, es como si tuvieras tres hojas en una, para los distintos tamaños de pantalla.

Es un proceso que requiere experiencia hasta obtener los resultados deseados. Empieza por ejemplos sencillos con divs solamente y vas ampliando incluyendo texto (en tamaños em), e imágenes, verás que en algunos casos debes hacer uso de los atributos max-with, min-with, etc...

Saludos y ánimo.

[Lola Lola]

Pues si educhip, estoy teniendo ese problema justamente... He pasado mis valores de px a em, los DIVs se han adaptado pero claramente las imagenes se mantienen en su tamaño original y por lo tanto desencastran con los demás elementos... No encuentro aun una forma de hacer "imágenes adaptables" ó "imágenes responsive" con el solo css! seria una buena salida momentánea ;)

La verdad es que no queria entrar aun en el terreno de los media-queries sino ir adaptando de a poco mi diseño ya maquetado, pero creo que solo asi como indicas lo podré resolver...

Otra cosa que noté es que los em funcionan bien para los textos, pero no para los elementos como DIVs. Creo que debí hacer una especie de hibrido trasladando solo las medidas de los textos en em, y las medidas de los DIVs en porcentajes.

En fin, si tuvieras alguna otra idea dando vueltas antes de meterme de lleno a aprender responsive design me la cuentas por favor??

:))

Saludos y gracias!

[educhip]

Hola Lola:

Para los divs en responsive debes usar medidas en %, para el texto em.

Con css se pueden escalar imágenes pero tienen que estar como fondo del div, con unos atributos que existen, pero esa solución no es la óptima, ya que te obligaría a colocar las imágenes siempre como background. Para que se escalen al tamaño especificado en el div contenedor, debes hacer uno de un archivo de javascript...

Convendría saber que software de edición para crear la web estas usando.

Saludos.

[Lola Lola]

mmm veo que no es tan sencillo... Estoy usando dreamweaver para hacer mis sitios. No se demasiado de programación, aprendi por cuenta propia HTML y css, y bueno, por lo mismo no puedo decir que lo domino! pero si lo conozco.

Si, lo del background veo que no es lo ideal, es una alternativa pero no óptima... Crees que dreamweaver tenga alguna opción para nosotros los maquetadores?

Saludos y gracias nuevamente!

Lola

[educhip]

Sí claro que tiene solución, sólo debes crear un nuevo diseño de cuadrícula fluida, y te genera automáticamente los archivos necesarios, uno llamado boilerplate.css, que contiene los estilos principales, y otro llamado respond.js, que es el javascript necesario para escalar las imágenes dinámicamente.

El diseño web responsive no es sencillo y requiere práctica, si fuese sencillo nadie contrataría desarrolladores ni programadores web

Puedes ver aquí una muestra de cómo quedan algunos diseños responsive que yo he desarrollado.

Saludos.

[Lola Lola]

Muchisimas gracias educhip!!! Por tu buen trato, tu explicación "paciente" y toda la información volcada. Voy a estudiar en la web como resolver de manera óptima los datos que me diste.

Muchas gracias y saludos!!

Lola

[Lola Lola]

Iniciado por educhip

Sí claro que tiene solución, sólo debes crear un nuevo diseño de cuadrícula fluida, y te genera automáticamente los archivos necesarios, uno llamado boilerplate.css, que contiene los estilos principales, y otro llamado respond.js, que es el javascript necesario para escalar las imágenes dinámicamente.

El diseño web responsive no es sencillo y requiere práctica, si fuese sencillo nadie contrataría desarrolladores ni programadores web

Puedes ver aquí una muestra de cómo quedan algunos diseños responsive que yo he desarrollado.

Saludos.

Muy prolijo tu diseño, muy profesional y confiable. Felicitaciones!

[pzin]

Tampoco hace falta que uses rem como medida para las fuentes, suele ser menos doloroso usar rem, que es lo mismo que lo otro, pero basado en la raíz —root em— del documento y te olvidas de cálculos extraños.

[Lola Lola]

Iniciado por pzin

Tampoco hace falta que uses rem como medida para las fuentes, suele ser menos doloroso usar rem, que es lo mismo que lo otro, pero basado en la raíz —root em— del documento y te olvidas de cálculos extraños.

Ah bien pzin! No sabia de los rem como medida para los textos ni de sus ventajas. Que bueno que existen ustedes que saben de todo y nos colaboran a los que estamos máss rezagados!

Gracias y saludos!

Lola