Article

Disseny de pàgines web per a mòbils el 2021: tot el que heu de saber

El disseny de llocs web per a mòbils és essencial.

Per què? Perquè els dispositius mòbils revolucionen la nostra manera de connectar-nos i, en conseqüència, la forma en què operen les empreses. De fet, la majoria del trànsit web ara ve del mòbil dispositius.



'El mòbil s'està convertint no només en el nou hub digital, sinó també en el pont cap al món físic'. va dir Thomas Husson , el vicepresident i analista principal de Forrester Research. 'Per això, el mòbil afectarà més que les vostres operacions digitals: transformarà tot el vostre negoci'.



Dit d’una altra manera, necessiteu un lloc web adaptable per a mòbils.

Però, què és un lloc web per a mòbils? En aquest article, aprendreu tot sobre llocs web adequats per a mòbils i veureu nou dels millors exemples de disseny de llocs web per a mòbils. A més, aprendràs a saber si el teu lloc web és apte per a mòbils.



Anem-hi.

No espereu que ho faci algú altre. Contracteu-vos i comenceu a atacar.



Comenceu gratuïtament

Què és un lloc web per a mòbils?

En poques paraules, un lloc web adequat per a mòbils és un lloc dissenyat i optimitzat per a dispositius de mà, com ara telèfons intel·ligents i tauletes.



I el disseny sensible al mòbil és el procés de creació d’un lloc web que s’adapta a la mida de pantalla on es visualitza.

A Oberlo, tenim un disseny de llocs web per a mòbils. Comparem el seu aspecte a l’escriptori i al mòbil.



Com puc obtenir un canal de YouTube?

A la imatge següent, podeu veure que el lloc web de l’escriptori té molt d’espai, que els elements de la pàgina estan disposats un al costat de l’altre i que el text és relativament petit en comparació amb la mida de la pantalla.

Lloc web d’escriptori Oberlo

D’altra banda, quan visualitzeu el lloc web al mòbil, els elements de la pàgina s’apilen els uns sobre els altres en una columna llarga i hi ha menys espai al voltant de cada element. A més, els botons són més grans per facilitar-los el toc i el text és més gran en relació amb la mida de la pàgina per facilitar-ne la lectura.

Disseny de pàgines web Oberlo Mobile

'Les experiències riques i interactives que hem esperat de les aplicacions mòbils han creat nous estàndards i expectatives per a tots els suports digitals, inclòs el web'. va dir Raj Aggarwal , CEO de la companyia de màrqueting mòbil Localytics. 'El resultat és que els llocs web evolucionen fins a convertir-se en aplicacions més semblants en la seva rica funcionalitat'.

La importància del disseny de llocs web per a mòbils

Anem a la taca: durant l’últim trimestre del 2019, els telèfons intel·ligents van ser els responsables d’una enorme quantitat 52,6 per cent del trànsit mundial de llocs web .

Això significa que l'ús de dispositius mòbils ara domina els equips d'escriptori.

Més, el nombre d'usuaris mòbils s’espera que a tot el món creixi fins als 3.800 milions el 2021.

Com Cyndie Shaffstall , el fundador de la companyia de màrqueting Spider Trainers, va dir: “El mòbil no és el futur, és l’ara. Conegueu els vostres clients a l’entorn que escolliu, no en el lloc on us convingui '.

Els dispositius mòbils també canvien els hàbits de compra.

Segons Google, El 59 per cent dels compradors dir que poder comprar als seus dispositius mòbils és important a l’hora de decidir a quin minorista o marca comprar.

Més, El 70 per cent dels propietaris de telèfons intel·ligents els qui van fer una compra a la botiga es van adreçar als seus dispositius mòbils per investigar la compra prèviament.

Si això no és suficient, l'algoritme de Google dóna prioritat als resultats de cerca als llocs web adequats per a mòbils.

El març de 2020, Va dir Google , 'Per simplificar-ho, passarem a la indexació per a mòbils per a tots els llocs web'.

Si us pregunteu què vol dir això, el defensor del desenvolupador de Google John Mueller explica :

'Actualment, Google analitza la versió d'escriptori d'un lloc i, a continuació, basa com classificarà el lloc per a mòbils segons aquesta informació. Una vegada que es publiqui aquesta actualització, passarà el contrari. Google començarà a mirar el vostre lloc per a mòbils i, a partir d’aquí, classificarà el lloc per a ordinadors ”.

L’actualització entrarà oficialment en joc el setembre de 2020, però 70 per cent dels llocs web que es mostren als resultats de la cerca ja s’estan classificant en funció d’aquest algorisme d’indexació primer mòbil.

Estadística de Google

Finalment, molts usuaris carreguen llocs web per a mòbils mitjançant connexions telefòniques lentes i febles. Com a resultat, les marques han de crear un disseny de llocs web per a mòbils que es carregui ràpidament.

Per tot plegat, ara el món és el primer en mòbils i per això necessiteu un lloc web adaptable per a mòbils.

8 consells de disseny dels millors llocs web per a mòbils

En aquesta secció, examinarem de prop els vuit consells sobre disseny de llocs web per a mòbils que podeu utilitzar. A més, veureu exemples reals d’alguns dels millors llocs web per a mòbils del web.

1. Utilitzeu botons grans

Els llocs web adequats per a mòbils han de tenir botons prou grans perquè els usuaris els puguin tocar sense haver d’apropar-los.

A més, cal que hi hagi espai entre els hiperenllaços. Si els enllaços es col·loquen massa junts, és possible que els usuaris intentin fer clic en un enllaç i fer-ne un accidentalment.

Shopify utilitza botons grans i posa molt d’espai entre els hiperenllaços al disseny del lloc web per a mòbils.

Botons grans de Shopify

Per tant, quan dissenyeu el vostre lloc web responsiu per a mòbils, tingueu present l’espai i assegureu-vos que es pugui fer clic a tots els enllaços.

2. Feu que el text sigui suficient per llegir-lo

Pot semblar una mica obvi, però també és crucial per al disseny de llocs web adaptats per a mòbils.

Els usuaris mai no haurien d’haver d’apropar-se (ni desplaçar-se cap a l’esquerra o cap a la dreta) per llegir alguna cosa. El text sempre ha de ser prou gran per llegir-lo còmodament.

A l'exemple següent de Beardbrand , podeu veure que tot el text que es mostra s'adapta perfectament a la mida de la pantalla.

Text gran de Beardbrand

Feu que el text sigui prou gran a les pantalles de totes les mides perquè els usuaris puguin llegir fàcilment el que heu de dir.

3. Simplifiqueu els menús

Els menús de llocs web d’escriptori tenen molt d’espai. Poden ocupar tota una barra a la part superior de la pantalla i disposar d’extenses opcions desplegables, tot sense obstaculitzar l’experiència de l’usuari.

No és el cas dels dispositius mòbils: no hi ha prou espai.

Els llocs web adequats per a mòbils han d’utilitzar menús senzills que presentin una visió general del lloc web. Els usuaris poden utilitzar categories, filtres o la funció de cerca per perfeccionar allò que cerquen.

La majoria de llocs web per a mòbils utilitzen el símbol d’hamburguesa, format per dues o tres línies horitzontals, per indicar un menú.

Vegem un bon exemple d’un dels millors llocs web per a mòbils, Kylie Skin .

Quan els usuaris toquin el menú de hamburgueses de dues línies a la part superior dreta de la pantalla, se’ls mostrarà un menú de pantalla completa amb botons grans i text.

Exemple de menú mòbil KylieSkin

Quan creeu un lloc web adaptable per a mòbils, feu que els vostres menús siguin senzills per facilitar als usuaris la cerca del que busquen.

4. Proporcioneu una funció de cerca senzilla i intuïtiva

La funció de cerca del vostre lloc web és especialment important per als usuaris de mòbils.

Com es va esmentar anteriorment, els menús simplificats poden facilitar la navegació des del mòbil. Tanmateix, també poden dificultar la cerca d'un article específic per als usuaris.

Per tal que els usuaris no facin cap esforç per trobar allò que volen, col·loqueu la funció de cerca al davant i al centre.

Usuari de Shopify Gymshark col·loca la funció de cerca a la barra superior de la pàgina. També hi ha una funció de filtre intuïtiva per facilitar als usuaris trobar tipus específics de productes.

Funcions de cerca i filtre de gymshark

El menjar per emportar? Feu que una funció de cerca senzilla i eficaç formi part del disseny del vostre lloc web per a mòbils.

5. Feu que sigui fàcil posar-vos en contacte

Si un client està buscant les vostres dades de contacte, és possible que hagi tingut problemes, cosa que significa que probablement ja estarà una mica frustrat. No afegiu insult a la lesió, dificultant el contacte amb vosaltres.

millor mida d'imatge per a publicacions de Facebook

Sobretot quan 84 per cent dels consumidors considerar servei d'atenció al client ser un factor clau a l’hora de decidir si voleu comprar.

Atenció al client

Aquí teniu un altre gran exemple de disseny de llocs web per a mòbils de l'usuari de Shopify Bremont . Aquesta marca de rellotges de luxe col·loca una icona de xat a la part inferior dreta de la pantalla, de manera que els visitants del lloc web poden contactar amb un representant de manera ràpida i senzilla.

Opcions de contacte de Bremont

Si no podeu oferir xats en directe les 24 hores del dia, penseu a enllaçar-los a Chatbot de Facebook o simplement proporcioneu un formulari de contacte al qual els usuaris puguin accedir mitjançant un enllaç 'Contacte' al menú.

6. Creeu formularis senzills

És possible que els usuaris estiguin més inclinats a omplir un formulari llarg a l’ordinador perquè la pantalla és més gran i és més fàcil escriure amb un teclat.

Als dispositius mòbils, els formularis han de ser més curts amb grans camps de text i botons.

Per exemple, si demaneu als usuaris que s’inscriguin a la vostra llista de correu, no hauríeu de demanar més que un nom i una adreça electrònica.

Si necessiteu incloure més preguntes, feu-les ràpides i fàcils de respondre.

En aquest exemple de disseny de llocs web per a mòbils de l'usuari Shopify QuadLock , podeu veure camps grans amb requisits de formulari senzills. Fins i tot hi ha un menú desplegable per ajudar els usuaris a proporcionar informació sobre la seva consulta.

Formulari de contacte QuadLock

En resum, assegureu-vos que els vostres formularis siguin curts i dolços.

7. Creeu crides a l'acció atractives

A crida a l'acció - també conegut com a CTA - és una imatge, un bàner o un tros de text que literalment crida els usuaris a prendre alguna forma d’acció.

Per exemple, podeu demanar als usuaris que s'inscriguin al vostre llista d'enviament , obtenir més informació sobre una oferta o comprar un producte.

Aquesta tàctica de màrqueting té un paper essencial en el disseny de llocs web per a mòbils.

Tot i això, pot ser difícil crear crides a l’acció convincents amb un espai de pantalla tan limitat per jugar.

En aquest exemple de lloc web mòbil de l'usuari de Shopify Luxy Hair , podeu veure dos bàners amb crides a l'acció. El primer promociona un nou producte que inclou un regal gratuït i el segon demana als usuaris que coneguin més sobre les polítiques d’enviament gratuït i d’intercanvi de 90 dies de la marca.

Crides a l

Quan creeu CTAs per al vostre lloc web adequat per a mòbils, distingiu-los situant-los a sobre del plec on els usuaris els puguin veure sense haver de desplaçar-se cap avall.

8. Eviteu les finestres emergents

Siguem realistes: la majoria de la gent odia les finestres emergents. De fet, si Google 'Odio els anuncis emergents', trobareu gairebé 48 milions de resultats.

No és estrany que Google hagi llançat un canvi d’algoritme el 2017 que penalitza els llocs web que ofereixen tipus específics de finestres emergents en dispositius mòbils.

Actualment, és probable que els vostres rànquings de cerca es vegin afectats si:

  • Mostra una finestra emergent que cobreixi el contingut principal
  • Mostra un intersticial independent que l'usuari ha d'abandonar abans de poder accedir al contingut principal.
  • Feu que la part superior de la pàgina sembli un intersticial autònom i col·loqueu el contingut original a sota.

Pop-Ups que xuclen

Dit això, alguns tipus de finestres emergents no haurien d’afectar negativament la vostra classificació, com ara

  • Els intersticials que s’utilitzen per complir amb obligacions legals com la verificació d’edat, el consentiment de cookies o RGPD .
  • Inicieu les finestres d’accés per accedir al contingut privat, com ara el correu electrònic o el contingut que hi ha darrere d’un mur de pagament.
  • Bàners petits que es poden descartar fàcilment i que 'utilitzen una quantitat raonable d'espai a la pantalla', com ara els bàners d'instal·lació d'aplicacions que utilitzen Chrome i Safari.

Finestres emergents que estan bé

En resum, les finestres emergents per a mòbils frustren els usuaris i us poden fer mal cerca de rànquings , per tant, utilitzeu-los només quan sigui absolutament necessari.

Com esbrinar si teniu un lloc web per a mòbils

Si us pregunteu si el vostre lloc web és apte per a mòbils, només trigareu un moment a esbrinar-ho L’eina de prova per a mòbils de Google - només cal que introduïu un enllaç al vostre lloc web i que feu clic a 'Prova l'URL'.

Aquesta eina avaluarà la compatibilitat amb el mòbil del vostre lloc web i us proporcionarà un detall detallat del que podeu fer per millorar-lo.

Prova de Google & aposs per a mòbils

Resum: disseny de llocs web per a mòbils el 2021

Un lloc web adequat per a mòbils és un lloc dissenyat per funcionar bé en telèfons intel·ligents i tauletes. I ara que el món és el primer mòbil, el vostre lloc web també ho hauria de ser.

En resum, aquí teniu vuit consells per al disseny de llocs web per a mòbils:

  1. Feu botons prou grans perquè la gent els pugui tocar.
  2. Assegureu-vos que el text sigui prou gran per llegir-lo sense que els usuaris hagin de fer zoom.
  3. Simplifiqueu el menú per facilitar la navegació en una pantalla petita.
  4. Col·loqueu la funció de cerca frontal i central i permeteu als usuaris filtrar els resultats de la cerca.
  5. Feu que els usuaris no es posin en contacte amb vosaltres.
  6. Creeu formularis senzills i ràpids d’utilitzar.
  7. Col·loqueu les crides a l'acció a sobre del plec perquè siguin destacades.
  8. Eviteu frustrar els usuaris amb finestres emergents tret que siguin absolutament necessaris.

Què penses del disseny de llocs web per a mòbils? Hem trobat a faltar algunes bones pràctiques recomanades per al disseny de webs per a mòbils? Feu-nos-ho saber en els comentaris següents.

Voleu obtenir més informació?



^