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”

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *