7 pasos claves para el Responsive Design

Un saludo para todos los Blogeros de php, en esta ocasión quiero compartir con ustedes 7 tips para tener en cuenta al realizar responsive design.

1. El primer paso a tener en cuenta para móviles es utilizar porcentajes para las secciones de 100% de la pantalla, además de eliminar elementos innecesarios, esto debido a que dificultan la navegación, haciendo que esta sea incómoda para el usuario.
2. Es indispensable en lo posible utilizar un archivo independiente de la web y otro para dispositivos, esto en busca de que en los dispositivos móviles sea más rápida la carga ya que debe tener imágenes con menor peso y menos elementos.
3. Les sugiero utilizar alguna librería como lo es responsive-nav.com para transformar el menú, pues siempre va a ser mejor que un menú de escritorio.
4. Deben tener en cuenta que primero se debe hacer la web en un tamaño estándar de 1200px y luego se puede colocar las condiciones para los demás tamaños.
5. Recuerden que un buen responsive es sinónimo de poseer pocas condiciones como las del punto anterior, pues cuando empiezas a poner condiciones cada 10-20 px, en algo estas fallando.
6. Igualmente un mal responsive también se puede visualizar cuando empieza a utilizar exageradamente !important, pero como siempre se tiene que utilizar, lo mejor es que los coloquen en páginas independientes, y cuando terminen su web empiecen a quitarlas, (siempre tendrá que acudir a !important pero entre menos contenga será mejor).
7. Finalmente, recuerden que las librerías como: boostratp, Foundation 3 ayudan bastante, para más información los invito a revisar mi post cómo utilizar el framework responsive design boostrap.

El siguiente código sera de gran ayuda para su index

<?php
$navigator_user_agent = (isset($_SERVER[‘HTTP_USER_AGENT’])) ? strtolower($_SERVER[‘HTTP_USER_AGENT’]):”;
if(
stristr($navigator_user_agent, “iphone”)or
stristr($navigator_user_agent, “android”)or
stristr($navigator_user_agent, “kindle”)or
stristr($navigator_user_agent, “ipad”)
)
{
header(“Location: mobile.php”);
}
else{
header(“Location: home.php”);
}

?>

Comenzando de mayor a menor:

@media only screen and (max-width :1800px){ }
@media only screen and (max-width :1500px){ }
@media only screen and (max-width :1200px){ }
@media only screen and (max-width :10240px){ }
@media only screen and (max-width :768px){ }
@media only screen and (max-width :480px){ }
@media only screen and (max-width :3200px){ }

Como tip: existe una nueva librería nueva que funciona con jquery y less. responsive elements si les gustaria conocer sobre “responsive elements, sigan nuestro curso sobre responsive”