Com convertir una web a mòbil

El següent article mostra com convertir una web a mòbil, perquè una pàgina web es visualitzi correctament en els telèfons Smartphone amb navegadors integrats.

La tècnica que s'utilitza per convertir una pàgina web a mòbil és el responsive design, mitjançant el qual el disseny de la pàgina web s'adapta segons l'ample en píxels del navegador del mòbil que està visualitzant la web, tot això per oferir usabilitat al visitant del lloc web.

La usabilitat en les pàgines web per a mòbils té com a objectiu oferir al visitant la capacitat de poder visualitzar la pàgina web sense haver de fer zoom per llegir el text, sense haver de desplaçar horitzontalment per veure la pàgina íntegrament i sense tenir problemes de prémer en enllaços i botons per estar massa a prop els uns dels altres.

A més de la usabilitat per als visitants d'un lloc web, en un futur molt proper serà un requisit indispensable el tenir una web adaptada per a mòbils perquè aquesta estigui disponible en els cercadors dins d'aquests equips, més tenint en compte el creixent nombre d'accessos que tenen des dels equips mòbils (la mitjana d'accessos des de dispositius mòbils en les pàgines que gestionem a data d'avui és sobre un 30% del total de visites).

En aquest sentit i com a exemple per al nostre article, Google ens va enviar una alerta fa 2 setmanes que ens indicava que el 100% de pàgines d'un lloc web de la nostra propietat no estava adaptat per a la visualització en dispositius mòbils, i que de moment només informaria als usuaris de mòbil en els resultats del cercador que aquesta pàgina no estava adaptada per al seu dispositiu mòbil.

Imatge d'alerta a Google Webmaster Tools sobre una pàgina web no optimitzada per a mòbils

Exemple alerta a cercador per pàgina web no optimitzada per a mòbils

De moment, Google només publica un avís informatiu en els resultats del cercador (el que ja ens ha d'influir en un menor nombre d'accessos des de dispositius mòbils), però és probable que en un futur molt pròxim simplement la nostra web desaparegui dels cercadors per mòbils, perdent el creixent nombre de visites que aquests generen.

Aquí els deixo una imatge del test d'usabilitat per a mòbils de Google per a aquesta pàgina web, l'anomenarem (abans):

Imatge de Google Test de pàgina web no convertida a mòbil

A continuació mostrem el procés necessari per convertir un web a mòbil, l'hem dividit en 3 parts:

1- Revisió del codi font HTML base de la nostra pàgina web
Primer de tot cal revisar la base del codi font de la nostra pàgina web, per poder convertir el web a mòbil cal que l'estructura base del codi HTML de la nostra pàgina web estigui formada per contenidors "div" i no per taules HTML o el que és el mateix per elements "table".

Les etiquetes contenidores HTML "div" ens permeten una major flexibilitat de cara al disseny de la nostra pàgina mitjançant els fulls d'estil CSS i en conseqüència faciliten la tasca de convertir una pàgina web per a mòbils.

Si la base del disseny de la seva pàgina web és mitjançant elements HTML "table", llavors serà necessari un redisseny del codi de la pàgina web per poder convertir-la a mòbil.

2- Modificació de les fulles d'estil CSS per convertir el web a mòbil segons l'ample del navegador
Tècnicament, el punt clau per aconseguir la usabilitat mitjançant el responsive design està en adaptar les fulles d'estil css de la nostra pàgina web perquè visualitzin els contenidors, tipus de lletra, enllaços, botons i altres elements de diferent manera segons el tipus de navegador i mida d'aquest.

Per a això hem d'afegir el següent codi al final del nostre full d'estils css, afegir el codi al final del fitxer .css és important, ja que volem que se sobreescriguin els estils per defecte segons l'ample del navegador.

També és important anar definint els estils de major a menor ample per anar implementant el disseny i la conversió de la pàgina web a mòbil de manera progressiva, així alguns canvis que realitzem per a un ample de 479px per a mòbils tipus iPhone són heretats per al següent ample definit de 319px definit per a mòbils amb una pantalla més petita.

Això es veurà millor amb un exemple bàsic de l'estructura de codi css que utilitzem, el codi parla per si sol:

/* Inici estructura Responsive Design*/
/* Més petit que 960px (móbils, tauletes y navegadors) */

@media screen and (max-width: 960px) {
/* Navegadors tipus ipad*/
/*definim un ample segons el contenidor principal*/
#main{width: 708px;}
/*augmentem tamany de font de forma global*/
body, input, textarea { font-size: 110%; }
/*redefinim l'estructura per evitar que flotin els contenidors i traiem el bloc lateral per situar-lo a continuació del contingut i així millorar la llegibilitat del text (usabilitat)*/
#wrapper #sidebar { float: none; margin: 0;width: auto; }
/*fem que el bloc de contingut utilitzi tot l'ample disponible*/
#content {margin: 0; width: 100%;background-color: #fff;}
/*ocultem el bloc de cerca*/
#search-box {display: none; }
}

@media screen and (max-width: 767px) {
/* Navegadors tipus tauleta de 7px*/
/*definim un ample definit en el contenidor principal*/
#main{width:480px;}
/*augmentem tamany de font de forma global*/
body, input, textarea { font-size: 120%; }
}

@media screen and (max-width: 479px) {
/* Navegadors tipus iphone*/

/*definim un ample al contenidor principal*/
#main{width:320px;}
/*augmentem tamany de font a nivell global*/
body, input, textarea { font-size: 130%; }
/*reduim el padding del contenidor de capçelera per tal que es vegi correctament als mobils més petits */
#header {padding: 1px; }
}

@media screen and (max-width: 319px) {
/* Navegadors tipus mobil petit*/
/*definim un ample del 100% a partir del ample de 320px anterior*/
#main{width:100%;}
}

/* Final estructura Responsive */

El codi està adaptat als contenidors "div" que tenim definits a la nostra pàgina web, i haurà de adaptar als seus propis contenidors. A partir d'aquest esquema només ha de jugar amb el codi i provar per aconseguir el resultat desitjat.

Per provar el resultat en un navegador d'un PC i així no haver de provar directament el resultat en un mòbil, només ha d'ajustar la finestra a l'ample desitjat per comprovar com canvien els estils segons l'amplada de la finestra.

3- Incloure les etiquetes META necessàries per alertar els navegadors que la nostra pàgina web està adaptada a mòbils
Aquest punt és important perquè tot funcioni, ja que si no es modifica el següent molts navegadors per a mòbils faran cas omís a les nostres modificacions en els css, i reorganitzaran la pàgina per a la visualització en els mòbils com abans, és a dir que adaptaran la pàgina a la mida del dispositiu sense utilitzar les classes que hem definit.

Per solucionar això, només hem d'afegir una etiqueta "META" dins de la capçalera del nostre HTML, és a dir entre les etiquetes.
<head></head>

L'etiqueta META a afegir és la següent:
<meta name=viewport content="width=device-width, initial-scale=1">

Aquesta etiqueta META indica al navegador del dispositiu que no s'ha de realitzar cap escalat del contingut i que ha d'utilitzar l'ample real del dispositiu per visualitzar la nostra pàgina web, o el que és el mateix li diem al navegador que la nostra pàgina web està optimitzada per a mòbils i que ens deixi gestionar la visualització de la pàgina en els diferents dispositius a nosaltres.

Per afegir l'etiqueta META a la capçalera de la pàgina només ha de tocar el fitxer .html de la seva pàgina web, encara que aquí depenent del tipus de llenguatge de programació, gestor de continguts, plantilles, framework, o el que estigui utilitzant com a base per programar la seva pàgina web haurà de modificar unes o altres pàgines per aconseguir el resultat desitjat.

Un cop finalitzat el projecte de convertir el web a mòbil, tornem a consultar la pàgina de "Prova d'optimització per a mòbils de Google" a la direcció URL: https://www.google.com/webmasters/tools/mobile-friendly/

Com podeu veure el resultat és totalment diferent, la imatge l'anomenarem "després":

Imatge de Google test de web convertida a mòbil

Això és tot, per convertir una pàgina web per a mòbils només ha de jugar amb les fulles d'estil css, fins a trobar el resultat desitjat.

¡Compartir ara!