Hacer un sitio web responsivo sin usar frameworks

Hyemin · #1 (**permalink**) 15/04/2015, 18:51

Hola, estoy trabajando en varios sitios web y me gustaría hacerlos responsivos, el tema es que me parece que usar boostrap para solo añadir responsividad es meter demasiado codigo ajeno.

Saben si hay agun tutotial por ahi o manual o videocurso que trate sobre responsividad "a mano"?

Gracias

NueveReinas · #2 (**permalink**) 15/04/2015, 20:26

Lo más recomendable es utilizar las media queries que proporciona CSS. Y aplicar bien los estilos, obviamente.

desco6 · #3 (**permalink**) 16/04/2015, 20:16

Puedes usar

<center> </center>

Ye quitas de todo los problemas del mundo.

Calidad VS comodismos

el dilema mas importante del mundo

NueveReinas · #4 (**permalink**) 16/04/2015, 21:21

Cita:

Iniciado por desco6

Puedes usar

<center> </center>

Ye quitas de todo los problemas del mundo.

Calidad VS comodismos

el dilema mas importante del mundo

Si se usan divs, se puede poner align="center".

jhonjaider1000 · #5 (**permalink**) 16/04/2015, 22:32

Pues mira inicialmente te quiero felicitar por que decidir no hacer uso de frameworks es una buena iniciativa, para aprender más, hacer sistemas de calidad, hacer las cosas por tú mismo. y sobre todo
hacer una página que no tenga código que jamas vas a usar, pues esa es la desventaja de un framework, habrá muchas cosas que no necesitarás y se cargarán innecesariamente en tu site..

generalmente hacer una página responsive solo consta de una buena maquetación, en realidad no es usar un center y ya!, de hecho hoy en día un buen maquetador nisiquiera las usa al igual que los <br/> para saltar elementos, las <tables> para mostrar contenido, pues su uso se ha dejado extrictamente para cuando deseas mostrar listas de datos o cosas así, aunque ya algunos prefieren usar <div> <span> u otras etiquetas demás, o <iframes> para recargar contenido a no ser que sea de otro dominio.

La manera mas flexible y fácil de usar es:

@media() de CSS

con esta aplicas los estilos en relación al tamaño de la pantalla de un dispositivo..
Claramente también existirá la posibilidad de que necesites usar javascritp para algunas cosas aunque con css puedes lograr casi todo lo más necesario, puedes ocultar o mostrar cosas cuando lo desees usando @media,

EJEMPLO: a continuación te doy un html sencillo con un texto que cambia de color según sea el tamaño de la ventana, así que correlo, redimenciona el tamaño del navegador y observa los cambios... Éxitos! :D

<html>
<head>
<title>
Responsive preview
</title>
<style>
span.text{
font-family: sans-serif;
color: #000;
font-size: 30px;
}
@media(max-width: 1200px){
span.text{
color: red;
}
}
@media(max-width: 800px){
span.text{
color: green;
}
}
@media(max-width: 350px){
span.text{
color: blue;
font-size: 20px; /** Generalmente tambien debes ajustar muchas veces el texto a tamaños más pequeños. */
}
}
</style>
</head>

<body>
<span class="text">Responsive Preview</span>
</body>
</html>

pzin · #6 (**permalink**) 18/04/2015, 02:05

La etiqueta center y el atributo align llevan 16 años que no se recomienda su uso, además de estar ya obsoletos ambos.

PHPeros · #7 (**permalink**) 18/04/2015, 04:06

A parte, no tiene ningún sentido usar CSS3 con HTML4

desco6 · #8 (**permalink**) 18/04/2015, 14:28

Cita:

Iniciado por pzin

La etiqueta center y el atributo align llevan 16 años que no se recomienda su uso, además de estar ya obsoletos ambos.

El comentario era solo como un chiste...

superweb360 · #9 (**permalink**) 20/04/2015, 00:02

yo aprendí responsive design en un par de días sin usar ningún libro, sólo a base de ir probando. Te hago un resumen de lo que tienes que hacer:

1) Le pones esto en el <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

2) Las imágenes les pones style="max-width:100%"

3) Los <div> les pones un porcentaje, por ejemplo style="width:100%"

4) Usa media queries para ocultar elementos según las dimensiones de pantalla. Por ejemplo:

Código CSS:

Ver original@media all and (max-width: 900px)
    {
         #div7 { display: none; }  
    }

Carlangueitor · #10 (**permalink**) 20/04/2015, 09:10

Obviamente no aprendiste, por que ocultar elementos es de las peores prácticas para responsive design.

Saludos

Hyemin · #11 (**permalink**) 20/04/2015, 16:16

Cita:

Iniciado por superweb360

yo aprendí responsive design en un par de días sin usar ningún libro, sólo a base de ir probando. Te hago un resumen de lo que tienes que hacer:

1) Le pones esto en el <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

2) Las imágenes les pones style="max-width:100%"

3) Los <div> les pones un porcentaje, por ejemplo style="width:100%"

4) Usa media queries para ocultar elementos según las dimensiones de pantalla. Por ejemplo:

Código CSS:

Ver original@media all and (max-width: 900px)
    {
         #div7 { display: none; }  
    }

Cita:

Iniciado por jhonjaider1000

Pues mira inicialmente te quiero felicitar por que decidir no hacer uso de frameworks es una buena iniciativa, para aprender más, hacer sistemas de calidad, hacer las cosas por tú mismo. y sobre todo
hacer una página que no tenga código que jamas vas a usar, pues esa es la desventaja de un framework, habrá muchas cosas que no necesitarás y se cargarán innecesariamente en tu site..

generalmente hacer una página responsive solo consta de una buena maquetación, en realidad no es usar un center y ya!, de hecho hoy en día un buen maquetador nisiquiera las usa al igual que los <br/> para saltar elementos, las <tables> para mostrar contenido, pues su uso se ha dejado extrictamente para cuando deseas mostrar listas de datos o cosas así, aunque ya algunos prefieren usar <div> <span> u otras etiquetas demás, o <iframes> para recargar contenido a no ser que sea de otro dominio.

La manera mas flexible y fácil de usar es:

@media() de CSS

con esta aplicas los estilos en relación al tamaño de la pantalla de un dispositivo..
Claramente también existirá la posibilidad de que necesites usar javascritp para algunas cosas aunque con css puedes lograr casi todo lo más necesario, puedes ocultar o mostrar cosas cuando lo desees usando @media,

EJEMPLO: a continuación te doy un html sencillo con un texto que cambia de color según sea el tamaño de la ventana, así que correlo, redimenciona el tamaño del navegador y observa los cambios... Éxitos! :D

<html>
<head>
<title>
Responsive preview
</title>
<style>
span.text{
font-family: sans-serif;
color: #000;
font-size: 30px;
}
@media(max-width: 1200px){
span.text{
color: red;
}
}
@media(max-width: 800px){
span.text{
color: green;
}
}
@media(max-width: 350px){
span.text{
color: blue;
font-size: 20px; /** Generalmente tambien debes ajustar muchas veces el texto a tamaños más pequeños. */
}
}
</style>
</head>

<body>
<span class="text">Responsive Preview</span>
</body>
</html>

Gracias a todos por las respuestas, hoy logre hacer responsive una parte de mi sitio pero aun hay muchas cosas que corregir y estoy tratando de arreglarlas a prueba/error

Utilice <meta name="viewport" content="width=device-width, initial-scale=1"> y a las imagenes les pase el style="max-width: 100%"

Por ahora los divs contenedores de los articulos se me deforman y no se ajustan bien a la pantalla y por mas que pongo en un div el adsense tambien me ocupa demasiado espacio y me deforma la pagina.

Si alguien quiere echarle un vistazo al codigo que estoy usando mi sitio esta en http://attackphase.net

Cualquier consejo me sirve, si veo que no puedo entonces voy a tener que usar mas mediaquerys y "deformar" el sitio a algo mas plano.

superweb360 · #12 (**permalink**) 20/04/2015, 22:13

ese baner de adsense lo tienes que ocultar cuando la pantalla sea pequeña

Carlangueitor · #13 (**permalink**) 22/04/2015, 12:40

Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.

minombreesmm · #14 (**permalink**) 23/04/2015, 09:22

Cita:

Iniciado por Carlangueitor

Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.

Entonces se podria hacer mas chica la publicidad supongo(nunca he usado adsence)

Bueno yo creo que mas que mediaquery se necesita necesariamente del javascript
ya que el mediaquery css solo verifica la resolucion de pantalla pero no verifica que tamaño de pantalla es.

no es lo mismo una tablet que un celular, creo que al celular se le deben ocultar elementos y solo mostrar los mas importantes ya que es mas pequeño y a la tablet le caben mas ya que su tamaño es mucho mas grande y se veria mejor el contenido sin hacer zoom, y la unica manera de saber que dispositivo es, es con javascript.

minombreesmm · #15 (**permalink**) 23/04/2015, 09:26

En conclusion primero debes verificar que dispositivo es y cual es su tamaño fisico y despues verificar su resolucion y en base a esto ocultar, mostrar y modificar el tamaño y acomodo de los elementos

Hyemin · #16 (**permalink**) 23/04/2015, 10:12

Cita:

Iniciado por Carlangueitor

Duro y dale con eso. Si ocultas publicidad incluso te pueden banear de Adsense.

Lo de la publicidad lo consegui usando banners responsivos del propio adsense, todavia me queda mucho por hacer y me estoy volviendo loco jaja.

Voy a estudiar si no me sirve hacer un sitio estilo m.misitio.com para redirigir ahi a los moviles como hace facebook.

Por ahi lei que los SE te penalizan por que lo consideran duplicidad de contenido pero al menos es una opcion super simple de conseguirlo.

pzin · #17 (**permalink**) 23/04/2015, 10:34

Es más simple ajustar el contenido a muchas pantallas que crear dis sitios webs diferentes. Además con undiseño responsivo puedes adaptar una web a cualquier pantalla, si haces una redirección ajustar a dos tipos de pantalla.

Y sí, ocultar contenido es mala praxis. A mí me suele frustrar mucho que me oculten contenido, porque tengo que cambiar de dispositivo. Pero al final acabo no volviendo a entrar.

mihalo · #18 (**permalink**) 24/03/2017, 20:43

Lo unico que debes hacer es agregar la etiqueta meta: <meta name="viewport" content="width=device-width, initial-scale=1">, para que puedas usar los @media y darle formato a los elementos en CSS. Se usa @media screen and (max-width: 780px) {} para cada tamaño de pantalla, debes usar diferentes atributos en cada @media para hacerla responsiva.
Puedes ver este articulo en mas detalle para ver el uso de @media: [URL="http://internetedadinero.com/web-responsive-html5css3/"]http://internetedadinero.com/web-responsive-html5css3/[/URL]
Te dejo otros con ejemplos de HTML5 y CSS3:
[URL="http://internetedadinero.com/cuadro-interactivo-html5-css3-js/"]http://internetedadinero.com/cuadro-interactivo-html5-css3-js/[/URL]
[URL="http://internetedadinero.com/hacer-una-calculadora-en-html/"]http://internetedadinero.com/hacer-una-calculadora-en-html/[/URL]