Com fer que el vostre lloc web sigui mòbil

A l’estiu de 2015, es van realitzar més cerques a Google per mòbil per primera vegada i des d’escriptori, i tu’millor creur-los’Només he pujat des de llavors!

Si tu’Torneu llegint aquest article, és probable’Ja coneixeu la importància de tenir un lloc web amigable per a mòbils i estic buscant per assegurar-vos que el vostre oferix una experiència fantàstica als usuaris de telefonia mòbil. Et podem ensenyar a fer-ho!

Perquè el vostre lloc web sigui mòbil, tu’necessitaré:

  1. Trieu un tema o plantilla que respongui al mòbil
  2. Retireu el contingut
  3. Feu imatges i CSS el més lleugers possible
  4. Eviteu el flaix
  5. Canvieu la mida i la ubicació del botó
  6. Espai els enllaços
  7. Utilitzeu un tipus de lletra gran i llegible
  8. Elimina les finestres emergents
  9. Prova regularment

Però primer, què significa realment l’ús mòbil?

Quan parlem d’un ‘mòbil-friendly’ lloc web, nosaltres’estic parlant de mostrar una altra ‘versió’ del vostre lloc web als visitants que visiten el vostre lloc des del mòbil, per tal de donar-los una millor experiència.

Hi ha diverses formes per aconseguir-ho:

  • Disseny responsiu – la teva web’El seu disseny s’ajusta per adaptar-se a la mida de la pantalla, tant si és així’només heu de canviar la mida de la pestanya d’escriptori o la navegació des d’un mòbil o tauleta.
  • Servei dinàmic – als visitants se’ls mostra una versió diferent del lloc, feta segons el dispositiu’estic veient des de.
  • Una aplicació per a mòbils – en alguns casos, tenir una aplicació totalment separada per al públic mòbil té més sentit (tot i que, si és així, també us heu d’assegurar que el vostre lloc web estigui a l’abast de tots aquells que no’no vull descarregar-ho).

El disseny sensible és el mínim que heu de tenir per objectiu’és el que Google recomana. Dit això, ho pensem’val la pena editar més el vostre lloc mòbil generat automàticament. Al cap i a la fi, voleu apuntar-vos a una experiència fantàstica d’usuari mòbil, més que a una ‘acceptable’ un.

Si creieu que una aplicació mòbil funcionaria per al vostre lloc, us recomanem que us poseu en contacte amb un desenvolupador que us pugui ajudar.

A continuació, es detallen alguns altres articles:

Com dissenyar un lloc web – Si tu’comenceu a dissenyar (o a redissenyar el vostre lloc web), consulteu aquest article per obtenir una guia pas a pas i els punts clau a tenir en compte..

Com crear un lloc web – Haven’encara no heu començat al vostre lloc? No hi ha cap problema, aquesta guia us guiarà durant tot el procés!

5 millors creadors de llocs web per a SEO – Qualsevol creador de llocs web amb SEO intens ve amb facilitat per a mòbils integrada a les seves plantilles. Aquí en teniu cinc dels millors.

1

Trieu un tema o una plantilla responsiva per a mòbils

Està bé, així que aquest és el primer pas, i sí’és un gran: tria un tema o una plantilla responsiva per a mòbils!
Com que tenir un disseny amb resposta mòbil és tan important’és una cosa que pràcticament tots els creadors de llocs web han cobert a cadascuna de les seves plantilles. Per exemple:

Espai quadrat: té capacitat de resposta mòbil a l’aigua i seria la nostra opció més elevada si ho feu’tornar a construir un lloc des de zero i veure l’experiència mòbil com a prioritat màxima.

Wix: totes les plantilles donen resposta a mòbils, però sempre comproveu que comproveu la vista del mòbil mentre aneu. Com que els llocs Wix són tan personalitzables, de vegades es fan grans canvis’No tradueixes tan perfectament, i tu’Haig de fer alguns canvis.

Si tu’torneu a crear un lloc mitjançant un sistema CMS, com ara WordPress, assegureu-vos que el tema que trieu per crear el vostre lloc respon al mòbil, o si’Ja heu creat un lloc, canvieu a un que sigui!

Només cal buscar ‘tema responsiu’ a WordPress’ biblioteca temàtica pròpia o en un lloc de tercers com Themeforest. Assegureu-vos de llegir les ressenyes i, si és possible, feu una ullada a qualsevol lloc que utilitzen aquest tema des del mòbil per avaluar l’experiència..

Ajuda! I si jo’estic en un tema que no respon i puc’No el canvieu?

Si el vostre lloc web es va crear amb un tema o una plantilla antiga, sense resposta, i vosaltres’No puc canviar-lo, intenteu afegir aquesta línia de codi a cada pàgina’s etiqueta:

Això vol dir que les vostres pàgines s’han de reformatar automàticament per adaptar-se a l’amplada del dispositiu, passant d’un estil de paisatge al retrat.

2

Retireu el contingut

Vostè’He triat un tema o una plantilla responsiva preciosa, i ara mateix’estic tot definit, oi? Mal!

Canviar a la plantilla o al tema adequat és un gran pas, però’és només un dels diversos que heu de portar per a perfeccionar aquesta experiència mòbil.

Ara, ja’És el moment de fer una ullada a la vista automàtica del mòbil del vostre lloc web i deixar-la anar enrere:

Destil·la la teva oferta

Elaboreu l’objectiu principal de la pàgina que feu’tornem a seguir i don’No dubteu a fer-ho molt més destacat a la vostra versió mòbil.

Mireu aquest exemple de Trainline:

Exemple agradable per a mòbils de Trainline

La pàgina principal està dissenyada per animar els usuaris a cercar bitllets de tren i aquest formulari pren el protagonisme en la versió mòbil. A la versió d’escriptori, això podria semblar massa impuls, però en una versió mòbil funciona.

Eviteu trossos grans de text

La còpia al vostre lloc web ha de ser breu i dolça en el millor dels moments (a excepció de les publicacions del bloc, com aquesta!), Però al mòbil, això és cada cop més important. Feu una lectura dels nostres consells per escriure per a la web i feu les vostres tisores virtuals a trossos llargs de text.

Escurçar els formularis

Emplenar formularis llargs és una tasca en el millor dels moments, però en un mòbil? En moviment? Oblida-ho! Les formes llargues us perdran els lectors més ràpidament del que podeu dir ‘Aquest camp és obligatori’. Assegureu-vos que cada formulari us ofereixi’tornar a mostrar al mòbil només demana informació que’s absolutament essencial.

Extrem superior! L’autocorrecció de pesky és una manera segura de convertir l’ompliment de formularis en una pèrdua important de temps. Estalvieu l’estrès pels lectors desactivant-lo. Si teniu accés al codi del formulari, assegureu-vos que el camp d’autocorrecció estigui definit autocorrecció = desactivat. 3

Feu imatges i CSS el més lleugers possible

Fer que el vostre lloc web sigui el més lleuger possible sempre és una bona idea, però què vol dir exactament? Bé, cada element del vostre lloc web porta un virtual ‘pes’ – si és que’s un vídeo o una imatge que tingui una mida de fitxer o un codi que s’ha de carregar cada vegada que es fa clic en el lloc web.

Google ha tingut molt clar que la velocitat del lloc web és un factor de rànquing crucial, és a dir, lenta (a.k.a.. ‘pesat’) Els llocs web perdran la competència a les pàgines de resultats del motor de cerca (SERPs).

Quan es tracta de mòbils, això és encara més important. Si tu’Mai he intentat carregar una pàgina web en algun lloc remot, només veure cada element caure al seu lloc dolorosament lentament’Entenc per què.

Aleshores, què podeu fer al respecte??

Comprimeix les teves imatges

Quan tu’Torneu a penjar qualsevol imatge al vostre lloc (versió mòbil o d’escriptori)’És vital que comprimeixis les teves imatges mitjançant una eina en línia gratuïta, com ara kraken.io. Això redueix la mida del fitxer de les vostres imatges sense comprometre la qualitat de la imatge.

Amfitrió de vídeos amb un tercer

Si pengeu els vídeos a un tercer i els incrusteu al vostre lloc, això significa el virtual ‘pes’ d’aquests vídeos es conserven principalment al lloc escollit en lloc del vostre lloc.

Wistia és una plataforma popular per a això, però YouTube també funciona’Només vull assegurar-te’Torneu a desactivar la reproducció automàtica de manera que no es faci cap vídeo relacionat’no jugues després de la teva. Per fer-ho, simplement:

  • Vés a la teva pàgina o publicació de WordPress
  • Cerqueu el codi incrustat i feu clic a ‘text’ fitxa
  • Cerqueu la part que diu src =”youtubeurlhere”
  • Afegiu ?Reproducció automàtica = 0&rel = 0 després youtubeurlhere
  • El codi ara ha de llegir src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Pega ‘Actualitza’ i tu’estic bé d’anar

Extrem superior! Si no’No crec que el contingut baixés massa bé a YouTube (alguns vídeos no’No tinc molt sentit sense el context d’una pàgina completa), assegureu-vos que configureu la visibilitat ‘no catalogat’. D’aquesta manera, ningú no ensopega en cap lloc que en sigui el vostre lloc web. 4

Eviteu el flaix

El flaix s’utilitza sovint per crear animacions, però generalment no és’És compatible amb els dispositius mòbils, de manera que s’evita millor.

5

Canvieu la mida i la ubicació del botó

Gairebé tots els llocs web utilitzen botons per enllaçar a altres seccions o a formularis. Però a ‘bé’ botó pot convertir-se ràpidament en ‘dolent’ botó al mòbil si ho és’s al lloc equivocat o és la mida incorrecta.

Penseu en com mantingueu i feu servir el telèfon. És probable que siguis’utilitzeu els polzes gairebé tot, és a dir, qualsevol cosa que pugueu’L’abast amb el polze es converteix en un dolor total.

Aquí’s on heu de voler col·locar CTAs en un lloc mòbil:

Creació d’un lloc web amigable per a mòbils: on afegir CTAs

Ara, tu’Tens els botons al lloc correcte, això’és el moment per fer-los la mida adequada. Això significa generalment’Haureu d’ampliar-los una mica’és molt més difícil fer clic amb precisió amb el polze que amb el ratolí, després de tot.

6

Espai els enllaços

Parlant de lo difícil que és fer clic amb precisió amb un polze que no pas amb un ratolí, això ens porta bé al nostre següent punt: mira els teus enllaços!

Més concretament, vosaltres’Vull comprovar que hi hagi hiperenllaços al vostre lloc mòbil:

  • Aren’No massa junts, per evitar que les persones facin clic per accident sobre el que està malament.
  • Enllaceu-vos a pàgines optimitzades també per a mòbils per a un viatge d’usuari sense problemes.

7

Utilitzeu un tipus de lletra gran i llegible

Ell’s recomana que utilitzeu un tipus de lletra d’almenys 14px a l’escriptori, però assegureu-vos de provar com es veu a la versió mòbil.’Vull aconseguir una mica.

Comproveu també la llegibilitat del vostre tipus de lletra. Ell’una cosa és provar un tipus de lletra més experimental en un escriptori, però és probable que aquesta mossa es pugui pagar des del mòbil. Dit això, tu’Vull mantenir els tipus de lletra ‘en marca’ possible a totes les plataformes.

Quan treballes en una vista mòbil del lloc, tu’Tinc una zona molt més petita per jugar. A un escriptori, podeu espaiar text amb salts de línia i imatges. Des del dispositiu mòbil, intenteu posar en negreta o majúscules diferents línies de text per evitar que es fusionin entre si.

8

Elimina les finestres emergents

Si s’utilitzen amb cura, les finestres emergents poden funcionar molt bé en una versió d’escriptori d’un lloc. És possible que els hagueu adonat’tornem a utilitzar alguna cosa en algunes pàgines aquí a WBE.

Però quan es tracta de mòbils, s’eviten els pop-ups. No només teniu una pantalla més petita per tractar, sinó que també podeu fer-ho’Netegeu el menú emergent per activar-lo en moments clau, com per exemple quan l’usuari vagi a sortir de la pantalla.

9

Prova regularment

La millor manera d’esbrinar com és el vostre mòbil el lloc per a mòbils és provar-lo! Vostè’Vull fer-ho de tres maneres diferents:

Executeu URL mitjançant Google’s eina amigable per a mòbils

Google disposa d’una eina de prova gratuïta per a mòbils, que qualsevol pot utilitzar per provar com d’amigable qualsevol URL URL determinat, ja sigui’s una pàgina principal (com es mostra a continuació) o una pàgina del vostre lloc.

Prova de Google per a mòbils

Proveu diferents mides de dispositiu de l’escriptori

Una manera fantàstica de comprovar el grau de resposta del vostre lloc és només jugar amb la forma de la pestanya del vostre lloc web oberta. Quan reduïu l’amplada de la vostra pestanya, haureu de notar que el vostre lloc comença a ‘contracte’ i es transforma en la versió més senzilla per a mòbils.

Per provar ràpidament l’aspecte de qualsevol cosa al mòbil, també podeu fer clic amb el botó dret a la pàgina web, seleccioneu ‘Inspeccionar’, i després feu clic a la icona de dues pantalles que apareix a la barra d’eines de la part superior:

Veure la versió mòbil des de l'escriptori

Com fer que el vostre lloc web sigui amable per a mòbils: resum

Gràcies per mantenir-se amb nosaltres, ja que vam explicar com fer que el vostre lloc web sigui mòbil. Aquí’s aquests passos una vegada més:

Com fer que el vostre lloc web sigui mòbil:

  1. Trieu un tema o plantilla que respongui al mòbil
  2. Retireu el contingut
  3. Feu imatges i CSS el més lleugers possible
  4. Eviteu el flaix
  5. Canvieu la mida i la ubicació del botó
  6. Espai els enllaços
  7. Utilitzeu un tipus de lletra gran i llegible
  8. Elimina les finestres emergents
  9. Prova regularment

La bona notícia per a la majoria de llocs és que el tema o la plantilla probablement la realitzaran la major part del vostre treball. Dit això, ho pensem’val la pena fer els retocs addicionals descrits anteriorment per garantir que els usuaris de mòbils tinguin una experiència excel·lent, en lloc d’una acceptable. Al cap i a la fi, les estadístiques diuen’Probablement conformi la majoria dels usuaris!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me