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.

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”);
}

?>
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.

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){ }

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 boostratp.

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”

Fernando Ortiz

SEO ferely.co


Nota del autor: Busco programadores y diseñadores freelance para colaborarme con proyectos. Mostrame tus trabajos desarrollados, escribime!


Te agradaría derivar tu proyecto a un programador con años de experiencia?

Ing. Diego Angelini.
Autor de BlogdePHP.com
Programador Web Freelance






Porfolio de proyectos