Cuadrícula flexible
Las columnas y los espacios se adaptan al ancho disponible, en lugar de imponer medidas fijas en píxeles.
Diseño web
Diseño responsive: primero para el móvil, después para el ordenador
Diseño web responsive con enfoque mobile first: su sitio funciona igual de bien en móvil, tableta y ordenador, carga rápido y es cómodo de usar.
Diseño web
Sitios web móviles: ¿qué son exactamente?
Diseño web responsive significa que un único sitio web se adapta por sí solo al dispositivo: en el móvil todo aparece en una columna, una debajo de otra; en la tableta aparecen dos columnas; en el ordenador hay más espacio e imágenes más grandes. Técnicamente, esto lo regulan cuadrículas flexibles y condiciones en la hoja de estilos que cambian la maquetación a partir de determinados anchos de pantalla.
Mobile first invierte el orden de trabajo. La vista para el móvil es el punto de partida, porque es la que impone los límites más estrictos: poco espacio, una conexión más lenta, manejo con el dedo. Quien logra incluir allí todo lo esencial lo tiene fácil en pantallas mayores. Al contrario, con una plantilla de escritorio hay que ir eliminando contenidos con esfuerzo.
A esto se añade un aspecto relacionado con los buscadores: desde hace años, Google valora en primer lugar la versión móvil de una página. Lo que falta allí no cuenta para la indexación. Más información en la guía sobre la indexación mobile first y en la explicación del diseño web responsive.
Contexto
Sitios web móviles: por qué son importantes.
Quien abre su página en el móvil suele estar en el tren, esperando en la consulta del médico o delante de la tienda, y necesita rápidamente una dirección, un número de teléfono o un precio. Una página que solo se ve bien en el ordenador pierde precisamente a esos visitantes.
Mito: «Móvil significa mostrar la página de escritorio más pequeña». Realidad: una vista de ordenador reducida obliga a hacer zoom y hace que el pulgar falle al pulsar. El diseño móvil reorganiza los contenidos, los acorta donde tiene sentido y agranda lo que se pulsa.
Ejemplo (ficticio): una peluquería muestra en el ordenador tres columnas con la lista de precios, el mapa y el horario. En el móvil, el horario está al final del todo, tras catorce párrafos. Pensado para el móvil, al principio estarían el teléfono, el horario y «Solicitar cita», y la lista de precios más abajo, como lista desplegable.
Visión general
Sitios web móviles: componentes y variantes.
Puntos de ruptura
Anchos de pantalla en los que la maquetación cambia, por ejemplo, de una a dos columnas. Se guían por el contenido, no por modelos de dispositivos.
Imágenes en varios tamaños
El navegador carga la variante que encaja con la pantalla. En el móvil esto ahorra volumen de datos y tiempo.
Menú para pantallas pequeñas
Un menú desplegable o una barra fija con los destinos más importantes, con espacio para el pulgar.
Tipografía adaptable
Tamaños de letra en unidades relativas, para respetar los ajustes de los visitantes (letra grande).
Tocar en lugar de teclear
Números de teléfono, direcciones y correos electrónicos como enlaces que abren directamente la llamada, el mapa o el programa de correo.
Mobile first en seis pasos
Mobile first no es una técnica, sino un orden de trabajo. Garantiza que primero se resuelva la situación más difícil: poco espacio, un pulgar, una conexión inestable. Después se amplía la página para pantallas mayores. Así se construye, en este orden.
- Definir las tareas principales. ¿Qué debe poder hacer de inmediato un visitante que está de camino? Normalmente son de dos a cuatro cosas: llamar, encontrar la dirección, ver el horario, solicitar una oferta. Todo lo demás es secundario.
- Ordenar los contenidos. En el móvil solo hay una columna, por eso el orden tiene que ser correcto. Qué va primero decide la página antes incluso de diseñar un solo píxel.
- Diseñar el borrador para el móvil. Con texto de tamaño legible, suficiente espacio y botones que el pulgar acierte. Solo cuando este borrador está terminado se sigue pensando.
- Ampliar para tabletas y ordenadores. Donde hay más espacio, los contenidos pueden colocarse uno al lado de otro, las imágenes crecer y aparecer información adicional. El orden de los contenidos principales se mantiene.
- Adaptar imágenes y medios. Preparar tamaños de archivo adecuados para cada clase de pantalla, para que el móvil no tenga que cargar la versión del ordenador.
- Comprobar en dispositivos reales. Varios móviles, una tableta, formato vertical y horizontal, ajuste de letra grande, conexión lenta.
Una objeción frecuente es: «Nuestros clientes están sentados ante el escritorio». Puede ser cierto. Pero incluso entonces la versión para el móvil es la mejor prueba de claridad: lo que funciona en una pantalla pequeña funciona con más holgura en una grande.
La zona del pulgar: cómo se maneja realmente el móvil
La mayoría de las personas sostiene el móvil con una mano y toca con el pulgar. El pulgar llega cómodamente a la mitad inferior y al lado en que descansa la mano; la esquina superior opuesta es difícil de alcanzar. Esto tiene consecuencias para el diseño.
- Acciones importantes abajo o en el centro. Una barra fija en el borde inferior con «Llamar» y «Solicitar» es más fácil de alcanzar que un botón arriba a la derecha.
- Zonas táctiles suficientemente grandes. Como referencia se considera un tamaño de unos 44 por 44 píxeles; las WCAG 2.2 fijan como mínimo 24 por 24 píxeles con separaciones, que también es una orientación razonable para versiones anteriores. Cuanto mayor es la superficie, menos errores al tocar.
- Espacio entre enlaces. Dos enlaces muy juntos, uno debajo de otro y sin separación, provocan clics erróneos. A menudo basta una línea de aire entre las entradas de listas y menús.
- Sin efectos hover como único camino. En el móvil no existe pasar el cursor por encima. Los submenús que solo se despliegan al pasar el cursor son inutilizables allí.
- No obligar a usar gestos. Deslizar, hacer zoom y arrastrar resultan difíciles para algunas personas. Cada función necesita una alternativa con un simple toque.
- Teclado adecuado a cada entrada. Para los números de teléfono aparece el teclado numérico; para las direcciones de correo, el teclado con la arroba. Eso ahorra errores de escritura.
Estas reglas también valen para las personas que usan un ordenador con pantalla táctil y para los visitantes con limitaciones motoras. Quien las aplica mejora la página para todos.
Puntos de ruptura: ¿cuándo cambia la maquetación?
Un punto de ruptura es un ancho de pantalla a partir del cual la página cambia su maquetación. Antes uno se guiaba por los modelos de dispositivos. Hoy se toma como referencia el contenido: la maquetación cambia cuando una línea se vuelve demasiado larga o demasiado estrecha, no cuando aparece un móvil determinado.
| Ancho disponible | Maquetación típica | Decisiones típicas |
|---|---|---|
| Estrecho (móvil en vertical) | Una columna, menú plegado, zonas táctiles grandes | Orden de los contenidos, qué acciones permanecen siempre visibles |
| Medio (móvil en horizontal, tableta pequeña) | Dos columnas en tarjetas e imágenes, menú todavía plegado | Cuándo pueden ir las imágenes una al lado de otra |
| Ancho (tableta en horizontal, portátil pequeño) | De dos a tres columnas, menú abierto o en forma de barra | Cuándo tiene sentido un menú lateral, qué anchura alcanzan los textos |
| Muy ancho (monitor grande) | Contenido centrado con anchura limitada, más espacio en blanco | Cómo evitar líneas demasiado largas |
Lo importante no es construir una versión propia para cada dispositivo, sino pocas transiciones bien elegidas. Más puntos de ruptura aumentan el esfuerzo de comprobación y la propensión a errores.
Priorizar contenidos: ayuda para decidir en cada página
En el móvil todo aparece uno debajo de otro. Por eso hace falta un orden de prioridad. Para cada página, repase estas preguntas:
- ¿Qué necesita alguien que solo tiene 20 segundos? Eso va arriba: mensaje, acción principal, contacto.
- ¿Qué necesita alguien que quiere decidir? Eso viene después: beneficio, proceso, pruebas, precios o factores de precio.
- ¿Qué necesita alguien que quiere saberlo todo? Eso va más abajo o en secciones desplegables: detalles, datos técnicos, preguntas.
- ¿Qué es simple adorno? Todo lo que ni ayuda ni demuestra desaparece de la versión móvil. Las imágenes decorativas y las introducciones largas cuestan espacio y tiempo.
Las secciones desplegables (acordeones) son una buena forma de ofrecer profundidad sin sobrecargar la página. Funcionan mejor cuando el título anticipa lo que hay debajo y cuando los contenidos más importantes no se esconden detrás. Quien oculta contenidos solo en secciones plegadas corre el riesgo de que no se vean ni se lean.
Problemas móviles típicos: síntoma, causa, solución
| Síntoma | Causa frecuente | Solución |
|---|---|---|
| La página se puede desplazar hacia los lados | Un elemento es más ancho que la pantalla (tabla, imagen, contenido incrustado) | Elementos con ancho flexible, tablas en un contenedor desplazable, imágenes limitadas al ancho del contenedor |
| Hay que ampliar el texto con zoom | Letra fija y demasiado pequeña o falta la indicación de vista en la cabecera de la página | Poner la metaetiqueta de vista, letra en unidades relativas, comprobar el tamaño mínimo |
| Se pulsa el enlace equivocado | Superficies demasiado pequeñas, poca separación | Superficies mayores, separaciones, aumentar la altura de línea |
| El menú no se puede abrir | Error de script, botón tapado, dependencia del hover | Menú manejable sin hover, pruebas en varios dispositivos |
| La página salta al cargarse | Imágenes y banners sin espacio reservado | Indicar de antemano el alto y el ancho |
| Un mapa o un vídeo rompe la maquetación | Tamaño de incrustación fijo | Indicar la proporción, mantener el ancho flexible |
| El formulario es difícil de rellenar | Campos demasiado estrechos, teclado equivocado, el foco salta | Ancho completo, tipos de campo adecuados, etiquetas claras |
| No se puede llamar al número de teléfono | Solo como texto, sin enlace | Añadirlo como enlace de teléfono |
Escenario: una cafetería (ejemplo ficticio)
Una cafetería pequeña (inventada) tiene un sitio web con fotos bonitas, una larga historia de los fundadores y una carta en PDF. Quien busca el horario en el móvil ve una foto a pantalla completa, pasa de largo tres párrafos de historia y encuentra las horas en el PDF de la carta. En ese punto se pierde la llamada.
Nuevo diseño para el móvil
- Arriba: el nombre, una frase sobre la ubicación («Tostadero de café y desayunos, centro de la ciudad») y debajo el horario de hoy, resaltado automáticamente según el día de la semana.
- Justo debajo, dos botones: «Abrir ruta» (enlace a la aplicación de mapas del dispositivo) y «Llamar».
- La carta como texto con subtítulos (desayuno, café, tartas), no como PDF. Los precios se pueden buscar y leer sin hacer zoom.
- La historia de los fundadores se mantiene, pero pasa al final de la página de inicio.
- Fotos en el tamaño adecuado, la primera como imagen destacada y las demás cargadas después.
La estructura no es peor en el ordenador: allí el horario y el mapa van uno al lado del otro y la carta en dos columnas. El nuevo diseño muestra cómo mobile first mejora también la versión para ordenador, porque las prioridades están aclaradas.
Autoevaluación: revise su página en el móvil en diez minutos
- Abra la página en su móvil con la red móvil (no con wifi) y mida más o menos cuánto tarda en poder leer el texto.
- Gire el dispositivo a horizontal y vuelva a vertical. ¿Se mantiene intacta la maquetación?
- En los ajustes del dispositivo, ponga el tamaño de letra en «grande». ¿Se cortan los textos, se superponen elementos?
- Toque uno tras otro cada opción del menú, cada botón y cada número de teléfono. ¿Acierta el pulgar con el destino correcto cada vez?
- Rellene el formulario de contacto sin hacer zoom. ¿Se ven todos los campos, el teclado es el adecuado, la página confirma el envío?
- Abra una página con tabla o mapa. ¿Se puede usar el contenido sin desplazar toda la página hacia los lados?
- Pida a una segunda persona con otro móvil que siga los mismos pasos y que cuente dónde se atasca.
Las herramientas gratuitas de los navegadores («vista de dispositivo» en las herramientas de desarrollo) simulan tamaños, pero no sustituyen la prueba en el dispositivo. Para un análisis más profundo, la indexación mobile first ofrece una buena introducción al lado de los buscadores.
Mito frente a realidad: errores sobre los sitios web móviles
| Mito | Realidad |
|---|---|
| Una aplicación es mejor que un sitio web móvil | Para la mayoría de las empresas, un buen sitio web móvil es más que suficiente. Una aplicación solo merece la pena si hacen falta funciones del dispositivo o un uso diario, y exige desarrollo, mantenimiento y fichas en las tiendas de aplicaciones |
| En el móvil tiene que desaparecer todo lo que hay en el ordenador | No todo va a la primera vista, pero no puede faltar nada importante. Los contenidos que solo existen en el ordenador ya no cuentan para Google de forma equivalente |
| Una ventana emergente no es un problema en el móvil | Las ventanas emergentes que tapan el contenido resultan especialmente molestas allí y pueden provocar penalizaciones si impiden el acceso al contenido |
| Reduciendo la ventana del navegador pruebo la versión móvil | Eso muestra una representación aproximada, pero ni el manejo táctil, ni la velocidad, ni las particularidades de los navegadores reales |
| Una misma estructura para todos los dispositivos es pereza | Los mismos contenidos, ordenados de otra manera: ese es el principio. Pereza sería reducir sin cambios la versión del ordenador |
| Los usuarios móviles solo quieren textos cortos | Quieren respuestas rápidas. Quien busca profundidad también lee páginas largas en el móvil, si están bien estructuradas |
Imágenes y medios en el móvil: menos datos, el mismo efecto
En las conexiones móviles, las imágenes son la partida más grande. Mostrar en un móvil una foto del tamaño de un monitor de ordenador consume volumen de datos y tiempo sin que nadie note la diferencia. Las imágenes responsive lo resuelven teniendo varias variantes disponibles, entre las que el navegador elige la adecuada.
Variantes de tamaño: para cada imagen se generan varios anchos, por ejemplo, uno pequeño para el móvil, uno mediano para la tableta y uno grande para el ordenador. En el código de la página se indica cuál debe usarse con cada ancho.
Formatos modernos: formatos como WebP o AVIF logran, con la misma calidad, archivos mucho más pequeños que las imágenes JPEG clásicas. Para los navegadores antiguos se puede dejar una versión clásica como alternativa.
Recorte de la imagen: un panorama ancho parece diminuto en el móvil. Con un recorte propio para pantallas pequeñas (la «dirección de arte») el motivo sigue siendo reconocible en lugar de desaparecer.
Vídeo: los vídeos que se inician solos en segundo plano consumen datos y batería y en las conexiones móviles suelen ser indeseables. Es mejor una imagen de vista previa que solo carga el vídeo después de tocarla.
Mapas, chats e incrustaciones: cada incrustación arrastra scripts. En el móvil deberían cargarse solo después de tocarlos. Eso protege el tiempo de carga y, de paso, la protección de datos.
Encontrará más indicaciones sobre optimización en Lenguaje visual y fotos.
Manejo en el móvil: formularios, tablas y mapas
Formularios
Apueste por una columna, ancho completo y etiquetas visibles. Utilice los tipos de campo adecuados para que el móvil muestre el teclado correcto: teclado numérico para el teléfono, teclado de correo para las direcciones, selector de fecha para las citas. El autorrelleno del navegador para el nombre y la dirección ahorra entradas y reduce errores, siempre que los campos estén bien marcados.
Tablas
Las tablas anchas no caben en un móvil. Ayudan tres caminos: hacer la tabla desplazable en horizontal (con una indicación visible de que hay más), convertir las filas en tarjetas (cada fila, un bloque con etiquetas) o reducir la tabla a las columnas más importantes. Cuál encaja depende de si los visitantes quieren comparar filas o consultar entradas individuales.
Mapas y cómo llegar
Un mapa incrustado suele ser en el móvil más un obstáculo que una ayuda, porque al deslizar se mueve el mapa en lugar de la página. Es mejor una dirección clara en forma de texto, un enlace «Abrir ruta» que inicie la aplicación de mapas del dispositivo y, en su caso, una imagen estática de los alrededores.
Documentos
Los archivos PDF son incómodos en el móvil: se abren en un visor propio, son difíciles de leer y los buscadores los aprovechan peor. Los contenidos importantes, como precios, cartas o descripciones de servicios, deben estar como texto en la página; el PDF puede ofrecerse además para descargar.
Dos casos prácticos para decidir (ficticios)
Caso 1: empresa de oficios con servicio de urgencias
Los visitantes llegan casi exclusivamente desde el móvil y tienen prisa. La primera vista muestra el número del servicio de urgencias como botón, la zona de actuación en una frase y una foto del vehículo. Los precios y los servicios vienen debajo. En el ordenador se mantiene el mismo orden, con un formulario añadido a la derecha.
Decisión: el botón de urgencias permanece visible, fijo en el borde inferior, al desplazarse.
Caso 2: consultora con páginas de servicios largas
Los visitantes leen con detalle tanto en el ordenador como en el móvil. Aquí ayuda un índice al comienzo de la página, que en el móvil aparece como lista desplegable y en el ordenador acompaña como barra lateral. Los párrafos largos se estructuran con subtítulos; las tablas se mantienen, pero con una indicación de desplazamiento.
Decisión: no se acorta nada, solo se facilita encontrarlo.
Los dos casos muestran que la adaptación móvil no significa acortar siempre. Significa comprender la situación de uso y ordenar el contenido en consecuencia.
Aceptación antes del lanzamiento: la matriz de dispositivos
Antes de poner una página en línea, alguien debería recorrer de forma sistemática las combinaciones más importantes de dispositivo, navegador y orientación. No tienen por qué ser cien dispositivos; una selección bien pensada descubre la mayor parte de los problemas. La tabla muestra un ejemplo de lista de comprobación que usted puede adaptar a su número de visitantes.
| Punto de comprobación | Móvil pequeño | Móvil grande | Tableta | Portátil |
|---|---|---|---|---|
| Abrir y cerrar el menú | Sí / No | Sí / No | Sí / No | Sí / No |
| Acción principal visible sin desplazarse | Sí / No | Sí / No | Sí / No | Sí / No |
| Enviar el formulario, aparece la confirmación | Sí / No | Sí / No | Sí / No | Sí / No |
| Formato vertical y horizontal sin romper la maquetación | Sí / No | Sí / No | Sí / No | no necesario |
| Texto legible sin zoom, también con letra grande | Sí / No | Sí / No | Sí / No | Sí / No |
| Los enlaces de teléfono y de correo funcionan | Sí / No | Sí / No | Sí / No | no necesario |
Elija al menos un navegador en dispositivos Apple y otro en dispositivos Android, además de Chrome o Edge y Firefox en el ordenador. Los navegadores se diferencian en formularios, vídeos y representación de las fuentes en pequeños detalles que, en conjunto, pueden resultar molestos. Anote los hallazgos con el dispositivo, la versión del navegador y una captura de pantalla en una lista, para que se puedan corregir de forma trazable.
Tras el lanzamiento: comprobar siempre los cambios en el móvil
Una página que estaba impecable al lanzarse puede empeorar con cambios posteriores: un banner nuevo, un menú más largo, una foto en tamaño original, un plugin adicional. La costumbre de ver cada cambio primero en el móvil evita la mayoría de los retrocesos.
Antes de cada cambio: pregunte qué pasa en el móvil. Un texto de menú más largo, que en el ordenador cabe, puede romperse en el móvil y desplazar la maquetación.
Después de cada cambio: abra una vez la página afectada en el móvil, en vertical y en horizontal. Lleva dos minutos.
De forma periódica: repase una vez por trimestre los pasos de la autoevaluación y compruebe en los informes si ha cambiado la proporción de visitantes móviles. Si el uso se desplaza, puede ser motivo para replantearse las prioridades.
En sistemas con actualizaciones: tras las actualizaciones del tema o de las extensiones, conviene volver a comprobar la visualización móvil y los formularios. Encontrará detalles sobre los planes de mantenimiento en Mantenimiento web.
Analizar el uso móvil: hacer visibles las llamadas y los trayectos
Quien quiera saber si la página móvil cumple su cometido no debería contar solo las visitas a páginas, sino las acciones. En muchas empresas locales, la llamada es la acción móvil más importante. Se puede registrar de forma sencilla: un enlace de teléfono puede activar un evento que aparezca en una estadística respetuosa con la protección de datos como «llamada pulsada». Lo mismo vale para «Abrir ruta» y para el envío del formulario.
Después, compare los recorridos del móvil y del ordenador. Si se observa que muchos llegan a la página de contacto desde el móvil pero casi nadie envía, el problema está en el formulario. Si desde el móvil llegan llamativamente pocos a la página de contacto, hay que revisar la navegación del menú. La relación con el análisis y la protección de datos se describe en Protección de datos en sitios web.
Importante: mida durante varias semanas y compare periodos equivalentes. Sobre todo en sitios pequeños, las cifras se mueven en un rango en el que el azar tiene un gran peso. Sacar conclusiones de un puñado de visitas induce a error.
Términos del diseño web móvil
- Diseño responsive
- Un diseño que se adapta con flexibilidad al tamaño de la pantalla, con un único sitio web para todos los dispositivos.
- Mobile first
- Forma de trabajar en la que primero se diseña la vista para el móvil y después se amplía.
- Viewport
- El área visible de una página en el navegador. Una metaetiqueta en la cabecera de la página indica al móvil qué ancho debe tener.
- Breakpoint (punto de ruptura)
- Ancho de pantalla a partir del cual cambia la maquetación.
- Touch target (zona táctil)
- La superficie que un dedo puede tocar, por ejemplo, un botón. El tamaño y la separación deciden la precisión al pulsar.
- Lazy loading (carga diferida)
- Las imágenes y los medios solo se cargan cuando entran en el área visible.
- srcset
- Indicación en el elemento de imagen que ofrece al navegador varias variantes de archivo para elegir.
- Progressive Web App
- Un sitio web que puede comportarse como una aplicación, por ejemplo, con un icono en la pantalla de inicio. Para muchos sitios de empresa no es necesario.
Nuestro trabajo
Sitios web móviles: lo que hacemos por usted.
Primero el diseño para el móvil
Diseñamos la vista para el móvil como punto de partida y la ampliamos para la tableta y el ordenador, no al revés.
Priorizar contenidos
¿Qué necesita primero alguien que va de camino? Eso va arriba. Lo secundario baja o se pliega.
Manejo con el pulgar
Zonas táctiles de tamaño suficiente, separación entre enlaces, menú alcanzable con una mano.
Adaptar imágenes y fuentes
Imágenes en tamaños adecuados para cada dispositivo, letra legible sin hacer zoom.
Pruebas en dispositivos reales
Comprobamos en distintos móviles y tabletas, no solo en la ventana reducida del navegador.
Calidad
Sitios web móviles: cómo reconocer un buen trabajo.
- No hay desplazamiento lateral en el móvil
- El texto se lee sin hacer zoom
- Los enlaces y los botones se pulsan con fiabilidad con el pulgar
- El teléfono y la dirección se pueden usar con un toque
- Las imágenes están disponibles en un tamaño adecuado para pantallas pequeñas
- El menú funciona con una mano
- Las tablas y los formularios se manejan bien en el móvil
- El formato horizontal y un ajuste de letra mayor no rompen la maquetación
Costes
Sitios web móviles: cuánto cuestan.
Mobile first no es un módulo adicional, sino la forma en que se plantea desde el principio un proyecto moderno. A posteriori, el esfuerzo es mayor: una página existente sin versión móvil hay que repensarla en lo esencial, no solo mejorarla.
El detalle: cómo calculamos.
Lo que determina el precio
- Estado de la página existente (adaptable o no)
- Número de tipos de página y funciones especiales
- Complejidad de tablas, mapas y formularios
- Alcance de las pruebas de dispositivos y navegadores
Lo que usted puede preparar
- Informes sobre los tipos de dispositivo, si los tiene
- Las tres cosas que un visitante debe encontrar de inmediato cuando va de camino
- El modelo de su móvil y el de sus empleados para las pruebas
- Ejemplos de páginas móviles que le parezcan logradas
Obstáculos
Sitios web móviles: errores frecuentes.
- Un menú que en el móvil muestra una docena de opciones, una debajo de otra
- Enlaces y botones tan juntos que se pulsa el equivocado
- Tablas e imágenes que sobresalen del borde de la pantalla
- El teléfono como imagen o como texto sin enlace para tocar
- Una ventana emergente que no se puede cerrar en la pantalla pequeña
Preguntas frecuentes
Preguntas sobre sitios web móviles.
¿Cuántos de mis visitantes llegan con el móvil?
Varía mucho según el sector. Su propio análisis lo muestra con la mayor fiabilidad, por ejemplo, mediante una herramienta de estadísticas respetuosa con la protección de datos o Google Search Console. Lo revisamos de forma concreta en su sitio.
¿Basta con que la página se vea bien en mi móvil?
No, los móviles se diferencian en tamaño, navegador y ajustes. Por eso comprobamos en varios dispositivos y con un ajuste de letra mayor.
¿Es mejor una página móvil propia (m.)?
Por lo general, no. Dos versiones suponen un mantenimiento doble y pérdidas de visibilidad por solapamiento. Una página responsive con una sola dirección es más sencilla y más robusta.
¿Funciona también con mi tienda?
Sí; en las tiendas, el proceso de compra en el móvil es especialmente importante. Más información en la página Tiendas online.
¿Cómo se relaciona con el tiempo de carga?
Estrechamente. Las conexiones móviles fluctúan y las imágenes grandes son lo que más frena. Por eso el tema de la velocidad de la página siempre forma parte.
¿Cómo compruebo que Google ve correctamente mi página móvil?
En Google Search Console, la inspección de URL muestra cómo Google obtiene y representa una página. Allí se detectan contenidos que faltan, archivos bloqueados o textos distintos. Encontrará una guía de configuración en el artículo Configurar Search Console.
¿Debo usar un menú hamburguesa?
Es el estándar para pantallas pequeñas y la mayoría de las personas lo conoce. Póngale una etiqueta («Menú»), no solo el símbolo, y deje visible fuera del menú la acción más importante (llamar, solicitar).
¿Cuánto cuesta hacer utilizable en el móvil una página existente?
Depende de cómo esté construida. Algunas plantillas se pueden adaptar con un esfuerzo asumible; otras están tan fijadas que resulta más sensato construirla de nuevo. Los proyectos empiezan desde 2.500 €; la revisión de la página existente se ofrece por separado. Tras la revisión indicamos el marco en la oferta.
Guías
Para seguir leyendo.
¿Cuánto cuesta una página web? Los factores del precioLo que cuesta una web de empresa depende del alcance, las funciones, los contenidos y el mantenimiento. Estos factores determinan el precio.Leer más →Rediseño web sin perder posicionamiento: cómo procederCómo hacer un rediseño web sin perder posiciones en Google: inventario, plan de contenidos, redirecciones y control tras el lanzamiento.Leer más →Diseño web adaptable: qué es y por qué es el estándarDiseño web adaptable explicado: cómo se ajustan los sitios web a móvil, tableta y ordenador, por qué importa a usuarios y a Google y cómo reconocerlo.Leer más →Sitio web accesible: fundamentos y BFSGSitios web accesibles explicados: por qué importa la accesibilidad, qué regula la ley BFSG, qué requisitos se aplican (WCAG) y cómo empezar.Leer más →Banner de cookies y protección de datosBanner de cookies y consentimiento: cuándo hace falta un banner, qué servicios puede evitar y cómo crear un sitio web respetuoso con la protección de datos.Leer más →¿WordPress o a medida? Cómo elegir el sistema adecuadoWordPress, otros gestores de contenidos o constructores web, o una solución a medida: ventajas, inconvenientes y criterios de elección para sitios web de empresa.Leer más →Optimizar imágenes para la web: formato, tamaño, cargaOptimizar imágenes para sitios web: los formatos adecuados (WebP, AVIF, JPEG), tamaños correctos, compresión y carga diferida para tiempos de carga rápidos.Leer más →Textos web desde el punto de vista del cliente: cómo convencerTextos web que venden: perspectiva del cliente en lugar de autodescripción, beneficio claro, trato directo y estructura del titular a la llamada a la acción.Leer más →Formulario de contacto: más consultas con menos camposCómo diseñar un formulario de contacto: qué campos hacen falta, cómo reducir obstáculos, evitar el spam y cumplir la protección de datos, para más consultas.Leer más →Mantenimiento y seguridad web: qué hacer con regularidadMantenimiento y seguridad web: actualizaciones, copias, contraseñas, HTTPS y supervisión. Las tareas clave para que su web siga segura y rápida.Leer más →
¿Aclarar el tema de los sitios web móviles para su empresa?
¿Dónde se atasca el tema de los sitios web móviles? Basta una breve indicación; el resto lo aclaramos en la conversación.