Bloguero-ec

Codigo Fuente, programación, Diseño Web

Diseño responsive y adaptable para web con framework o estilo css

abril 6, 2015
css,css3,html5,media screen,responsive



Hoy en día la gran mayoría de usuarios están usando dispositivos móviles para acceder a la red , Si optimizas tu sitio para móviles, puedes captar y retener a estos visitantes y ganar terreno con las demás web´s .

Existen gran cantidad de Frameworks responsives para que adaptes tu web a cualquier dispositivo citando algunos ejemplos como:

Bootstrap.- Es compatible con la mayoría de NAvegadores web’s

Foundation .- Con una amplia comunidad y soporte es buena opción.

Yaml .- Muy útil con soporte y compatibilidad en la mayoría de los navegadores.

Purecss .- Con un buen soporte y explicación de uso purecss lograrás obtener un resultado impresionante en tu web y adapatarla a dispositivos móviles

Ivory .- Si de listas , botones, formularios, tablas, grids , elementos y tipografias se trata este framework les recomiendo es sencillo pero potente.

Aunque la lista es bastante extensa podría mencionar infinidad de Framework para hacer responsives vuestras web’s.

Pero si se te complica la situación con estos frameworks o crees que son difíciles de entender o no se adaptan a tus necesidades podrías optar por crear tu propio sistema responsive con CSS utilizando la propiedad media screen para personalizar los anchos mientras el usuario accede desde cualquier dispositivo sin dañar el diseño de tu web .Aunque hoy en día google recomienda utilizar un sistema responsive indica que las búsquedas mas relevantes van a ser para las páginas web’s con contenido responsive ..

Desesas saber si tu sitio web es responsive realiza un test aquí .

Que es responsive..?

El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,… Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,… Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.

Aquí les comparto un pequeño código de ejemplo de una wbe adapatable y su css con una cabecera ,un contenido , un sidebar , y un pie de página espero lo analicen saquen sus conclusiones y lo realicen en futuros proyectos..

Index.html

//cabe recalcar que en este ejemplo se está usando html5
<doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
    //meta obligatorio para el sistema responsive
	<meta name="viewport" content="width=device-width">
	<title>	</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<header class="encabezado"></header>
	<section class="contenido">
		<article class="post"></article>
		<article class="post"></article>
	</section>
	<aside class="contenido-lateral"></aside>
	<footer class="pie-pagina"></footer>
</body>
</html>

Estilo.css

//estilo normal dentro del body 
body{
	margin: 0;
}

.encabezado, .contenido, .contenido-lateral, .pie-pagina{
	padding: 1em 2em;
}

.contenido, .contenido-lateral, .pie-pagina{
	float: left;
	box-sizing: border-box;
}

.encabezado{
	background-color: rgb(247, 220, 22);
	height: 100px;
}

.contenido{
	width: 60%;
}

.contenido-lateral{
	width: 40%;
	background-color: rgb(163, 163, 113);
	height: 500px;
}

.post{
	background-color: rgba(117, 255, 26, 0.46);
	height: 100px;
	margin-bottom: 1em;
}

.pie-pagina{
	width: 100%;
	background-color: #000;
	height: 50px;
}


//estilo responsive ancho minimo 780px y maximo 1024px
@media screen and (min-width: 780px) and (max-width: 1024px){
	
	.encabezado{
		background-color: rgb(246, 246, 243);
	}

	.contenido, .contenido-lateral{
		width: 50%;
	}
}
//estilo responsive ancho minimo 480px y maximo 780px
@media screen and (min-width: 480px) and (max-width: 780px){
	.encabezado{
		background-color: rgb(246, 246, 243);
	}

	.contenido, .contenido-lateral{
		width: 100%;
	}
}
//estilo responsive ancho maximo 480px
@media screen and (max-width: 480px) {
	.encabezado{
		height: 80px;
	}

	.contenido{
		background-color: rgb(250, 250, 168);
	}

	.contenido, .contenido-lateral{
		width: 100%;
	}
}

Puedes añadir mas anchos de pantallas y reducir contenido a tu gusto o a lo que se adapte tu web …

Un poco mas de información puedes vistar también adaptar web a culaquier pantalla con css y su propiedad mediascreen

Hasta la próxina…

Demostración

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: