Te diremos a continuación cómo crear una página web para celulares sin cometer errores y convertirte en un verdadero experto. Para ello, te daremos una guía con el paso a paso que tienes que hacer para lograr una web con estilo profesional. Pero esto no es todo lo que vas a leer, también te diremos ejemplos de plataformas para crear una página web, lo cual te servirá para elegir la opción que más se adapte a tus necesidades. Por último, vas a encontrar una lista con los mejores consejos sobre cómo crear una página para celulares y lograr diferenciarte del resto. Echa un vistazo.

¿Cómo crear una página para celulares? Guía Paso a Paso 0
Descubre cómo crear una página web para celulares.

📱 ¿Cómo crear una página web para celulares? Guía Paso a Paso

Te mostraremos a continuación los pasos que tendrás que hacer para crear una página web para celulares sin cometer errores. Comencemos:

Obtén dominio y hosting

Ten presente que, un gestor de contenido puede facilitar la creación de un sitio web adaptable. No obstante, vas a necesitar un espacio para alojarlo y también una dirección web única. Por lo tanto, examina las empresas de hosting disponibles en el mercado para adquirir el servicio de alguna de ellas. Procura que la elegida ofrezca un buen soporte al cliente, optimización para CMS y un panel amigable. 

Analiza con cuidado los aspectos más importantes, ten en cuenta beneficios como el ancho de banda, el espacio en servidor y el uptime. Todos estos factores contribuyen a largo plazo a disminuir el tiempo de carga de una página para celulares. Por otro lado, muchas compañías de hospedaje web incluyen un dominio gratis durante un año, por lo que, tener estos dos elementos cubiertos te dará la oportunidad de usar un CMS eficiente. Este es el caso de WordPress.  

Instala WordPress en CPanel

Gran parte de los alojamientos actuales vienen con los gestores más populares previamente descargados, listos para instalar en pocos clics. Si este no es el caso, basta con que te dirijas a wordpress.org y bajes en tu ordenador la última actualización disponible. Luego, necesitarás iniciar sesión en tu panel de control CPanel, Plesk u otro por medio del correo y contraseña que hayas elegido.

Lo siguiente que deberás hacer es subir los ficheros que has bajado con anterioridad al servidor de hospedaje. Para esto, si estás en CPanel, por ejemplo, debes emplear el Administrador de archivos, el cual lo encontrarás en el menú principal. Una vez abierta esta sección, debes dirigirte a la carpeta Public_html en el apartado izquierdo. 

Pulsa en uno de los botones de la barra superior, denominado Cargar. Una vez abierta la ventana, haz clic en Seleccionar archivo. Explora los archivos de tu PC hasta encontrar en descargas el .zip que corresponde al CMS de WordPress, luego tendrás que subirlo. Cuando hayas terminado con este proceso, regresa al administrador y refresca la página hasta que aparezca el archivador comprimido. 

Descomprime worpress.zip

Marca la carpeta y descomprímela haciendo clic en la herramienta Extraer del menú superior. Aparecerá un recuadro emergente para verificar la ruta de destino, compruébalo y pulsa en Extract File(s). Esta acción hará que surja un nuevo archivador en la fila superior con todos los contenidos necesarios para ejecutar el gestor. 

A continuación, ejecuta este proceso:

  1. Una vez que abras el contenido, elige Seleccionar todo.
  2. Cuando esté sombreado, presiona en la función Mover a Public_html, mediante Move File(s). 
  3. De forma simultánea, borra el fichero .zip desde la barra de arriba en Eliminar, perosin guardar en la papelera.

De esa manera, los archivos de ejecución y demás documentos pasarán a estar en la carpeta raíz de dominio.

Crea una base de datos 

Para crear una base de datos, será necesario que hagas esta guía:

  1. En el inicio del tablero principal busca Base de datos.
  2. A continuación,colócale un nombre y genera una nueva base de datos.
  3. En el mismo apartado añade un usuario con clave secreta para que tengas acceso a ella de modo privado.
  4. Luego, vincula ambas bases de datos seleccionando el botón Añadir usuario a la base de datos.
  5. Verifica que los nombres en cada campo sean correctos, luego continúa haciendo clic en el botón Añadir.
  6. Concede todos los privilegios de administrador y culmina en Realizar cambios. 

Finaliza el instalador de WordPress

Continúa con este procedimiento para finalizar la instalación de WordPress:

  1. Desde el panel de gestión accede a la dirección de dominio principal. Se abrirá una ventana para iniciar el asistente de instalación de WordPress. 
  2. Configura el idioma, el nombre de la base de datos, el usuario y la contraseña.
  3. Después de ello, comprueba el servidor y los otros puntos, cuando termines, presiona en Enviar.
  4. Acto seguido, el programa te redirigirá a otra ventana, en la cual debes hacer clic en Ejecutar la instalación. 
  5. Llegado el momento, la plataforma te pedirá indicar información única de tu sitio. Por ejemplo, será necesario que escribas campos como el título principal, el correo y si estás de acuerdo o no en hacerlo visible a los buscadores.
  6. No te olvides de generar un username y password con los cuales siempre abrirás sesión en tu tablero WordPress. 

Escoge el tema que más se adapte a tus necesidades

Dentro del administrador WordPress tendrás que hacer este paso a paso:

  1. Busca la función Apariencia en la barra izquierda y presiona en la misma.
  2. A continuación, selecciona la opción Temas.
  3. Abierta esta sección, observarás al menos tres plantillas prediseñadas que vienen por defecto. No obstante, tú puedes agregar más desde Añadir Nuevo con el botón central. Haciendo esto, te aparecerá una cuadrícula con cientos de opciones gratuitas y de pago. Es recomendable elegir alguna que sea totalmente compatible con el constructor Elementor.
  4. Gracias a este complemento tendrás más libertad a la hora de esquematizar tu website. Ten presente que uno de los favoritos de los expertos es Astra Theme, ya que es ligero y detecta automáticamente desde qué dispositivo se ingresa para adaptarse a él.
  5. Para elegirlo, escribe Astra en el cuadro de búsqueda de la esquina derecha.
  6. Prueba la Vista previa para saber si te agrada y si es el indicado pulsa en el botón Instalar.
  7. Si no sientes que este identificará con tu marca, puedes buscar otros como GeneratePress, Sydney, OceanWP, Hello u otros. Lo cierto es que el editor que usarás encaje sin problema con casi cualquier plantilla. 

Añade Elementor

En este paso tendrás que instalar complementos, los cuales te ayudarán a realizar tareas de modo automático. Para ello, tendrás que seguir este proceso:

  1. Dirígete a Plugins en el menú lateral y escoge Añadir nuevo.
  2. Con el cuadro Buscar por palabras clave, ubicado arriba de la pantalla, escribe Elementor.
  3. Haz clic en Instalar ahora en Elementor Page Builder para acceder a su opción gratuita. La ventaja es que podrás probar el software sin costo, tú decides cuándo optar por el modo Pro.
  4. Una vez culmine la instalación, termina el proceso presionando en Activar. 

Trabaja con el modo adaptable

Poco a poco irás creando las páginas y entradas que tu website necesita. Para esto, marca con el puntero del ratón la función de la barra superior Editar con Elementor. Explora la sección Elementos en la cual tendrás acceso a más de 30 módulos gratuitos que te ayudarán a estructurar tu página. Entre ellos están columnas, imágenes, videos, editor de texto, botón y demás. 

Y si te has pasado a Pro, contarás con 22 módulos más para colocarle post, fan pages de Facebook, listas de precios, entre otros. Igual, cuentas con un navegador flotante que te permitirá desplazarte por las secciones y columnas con facilidad. Una vez que te hayas familiarizado con las funciones, el objetivo es estructurar el site para dispositivos móviles.

Para lograrlo, haz clic en uno de los íconos, debajo de la columna izquierda en forma de monitor, denominado Modo adaptable. Dicho apartado te permite previsualizar cómo se ve el sitio desde un celular, una tablet o un ordenador promedio. Elige la alternativa Móvil y ve trabajando en función de ella. Si partes del concepto mobile first, luego es más fácil adecuarla al escritorio. 

Prueba si el sitio es responsive

Se estima que las dos terceras partes de los usuarios acceden a los sitios desde dispositivos móviles. Debido a ello, los buscadores dan una alta importancia a la adaptabilidad en el momento de posicionar un resultado. Siendo así, al finalizar tu diseño web, es vital que compruebes si en realidad es mobile friendly. 

Google también dispone de un recurso de testeo gratuito para este aspecto. Basta con ingresar a esta página y escribir tu dominio. Luego, deberás hacer clic en Probar URL y espera unos minutos. Te arrojará resultados específicos sobre qué tan fácil o difícil es navegar desde celulares en tu sitio. Junto a ello puedes extraer y llevar a la práctica los consejos de optimización que te den. 

En el apartado Incidencias, bajo Detalles, suelen advertirte si el texto o los botones son muy pequeños. Incluso alertan en caso de que el usuario deba desplazarse horizontalmente o hacer zoom para ver un contenido, lo cual es un error común. Por supuesto, el mejor test se realiza experimentando cada sección desde el propio móvil con sistema operativo Android o iOS.

💡Ejemplos de plataformas para crear una página web

Mira estos ejemplos de plataformas para crear una página web:

Dreamweaver

Uno de los software de la suite Adobe más apreciados por webmasters es Dreamweaver.  Bajo este sistema es posible personalizar el diseño, disminuir los pasos de ejecución y trabajar con interfaz de landing pages de grandes y medianas webs. Es ideal para la creación de tiendas online, blogs y apps, entre otros portales. Es compatible con los lenguajes de programación más usados como es PHP, JavaScript, HTML o CSS.

Por medio de sus controles, puedes modificar el código mientras ves el resultado gráfico en tiempo real para poder hacer cambios sobre la marcha. Además, incluye herramientas que simulan diversos tamaños de pantallas y resoluciones, por lo que es posible gestionar proyectos de gran envergadura desde un mismo lugar. En realidad, si ya estás familiarizado con otros programas de Adobe, será fácil utilizarlo.

Zyro

Si no quieres enredarte en aspectos técnicos, con Zyro puedes formar una página optimizada para smartphones en minutos. Aunque no es un programa gratuito, es mejor que otras alternativas del mercado, pues combina un hosting con un creador de sitios amigable. Adquiriendo alguno de sus planes anuales, vas a tener acceso al registro de dominio gratis, certificado SSL y soporte al cliente.  

Su biblioteca está repleta de plantillas sin coste, ligeras y minimalistas, ideadas para cada necesidad. Junto a ello, el editor no solo permite arrastrar y soltar elementos, sino también brinda características de personalización avanzadas. Por ejemplo, puedes delinear tu propio logo desde cero. No importa si creas un blog o una tienda online, con este programa vas a disfrutar de un diseño responsive.

Mobirise

Mobirise ofrece una aplicación web para MacOS y Windows, lo cual te permite crear websites sin conexión. Para descargar el programa, primero te tienes que registrar con tu correo, luego podrás seleccionar alguno de sus patrones prediseñados y recién puedes comenzar a editar. Una vez que tengas los pasos anteriores listos, tendrás que decidir dónde alojarás el sitio. Muchos no lo saben, pero la compañía cuenta con un servidor bajo un subdominio disponible.  

Sin pagar nada ya tienes 70 temas, más de 80 plantillas y hasta 120 bloques de inserción para diseñar cualquier tipo de plataforma para celulares. Lo más llamativo de esta empresa, es que se enfoca en el estilo móvil, esto quiere decir que no tienes que crear dos sitios distintos (uno para celular y otro para ordenador). En su lugar, cada web que realizas se ajusta al tamaño de pantalla desde donde se visita.  

Squarespace

Al entrar en Squarespace notarás que es un CMS integral en muchos sentidos. Su principal diferencia con otros sistemas de gestión de contenidos, como WP o Joomla, es que ya contiene hospedaje y dominio, solo tienes que suscribirte mediante un plan de pago. También resalta el hecho de no requerir de plugins de terceros para su funcionamiento optimizado.

Ya viene integrado con botones de redes sociales, formularios, recursos SEO, galerías, anuncio de cookies y otros detalles que sueles agregar por separado en WordPress. Las opiniones de los clientes siempre coinciden en que tiene un buen tiempo de operatividad sin caídas. Sus planes van desde los $144 hasta los $480 por año, pudiendo optar por ecommerce pequeños o medianos.

Jimdo

Si tu presupuesto es más limitado, una alternativa a Squarespace es Jimdo. Pese a tener características similares, como el uso de un CMS propio y host, este programa es mejor al ofrecer un pack de creación gratis de por vida.  Si después de experimentar su servicio, deseas pagar alguno de sus dos paquetes JimdoPro, vas a poder hacerlo sin limitaciones porque te será fácil la migración.

Cabe destacar que la modalidad gratis es más adecuada para pequeños emprendimientos, aunque debes tener presente que vas a ver publicidad en las webs.  Sin embargo, no estarás obligado a sacrificar su usabilidad en tablets o móviles, dado que ya cubre este factor en todos sus servicios. No habrá problemas si decides generar una plantilla propia para tu uso personal.

Wix

Cientos de personas emplean Wix cuando buscan obtener su primera página digital. Sus beneficios son evidentes para aquellos que no conocen nada o muy poco de códigos de programación. Por ejemplo, tiene un constructor intuitivo y cuenta con una gran variedad de temas genéricos que puedes usar. Otras plataformas impiden visualizar cómo se verán los contenidos en teléfonos inteligentes, pero en este portal eso no sucede. 

Wix facilita a los usuarios un editor móvil durante el proceso de estructuración. Con este es posible agregar animaciones, cambiar el fondo y redimensionar el texto, sin distorsionar nada del modo escritorio. De hecho, si hay widgets que no son compatibles en ambas versiones, el mismo programa los oculta. Para ser un servicio gratuito, es bastante funcional respecto a la adaptación.  

Mozello

Es importante tener en cuenta que Mozello no es tan amigable para el usuario promedio. En cambio, es más útil para quienes tienen cierto manejo del código JavaScript, CSS o HTML y quieren adaptar las páginas a su gusto. No echarás de menos la vinculación con Google Analytics ni con redes sociales, ya que puedes usar estas herramientas métricas sin inconvenientes.

También es apropiado si quieres un ecommerce robusto con pasarelas de pago, precios en varias monedas, crear categorías y más. En todos sus paquetes, los diseñadores aseguran aportar asistencia sobre dispositivos móviles. Otra de sus ventajas es la capacidad de traducción multilingüe de sus webs. Los dos planes premium tienen precios competitivos de $8 y $18 por mes.

Sellfy

Si ya escuchaste hablar de Shopify, Tiendanube u otros ecommerce para formar tiendas online desde cero, con Sellfy vas a conseguir las mismas herramientas, aunque no sea tan reconocida. Es posible trabajar con las empresas que tienen productos físicos, de suscripción y digitales en conjunto para conectarlos con sus clientes. No cobran comisión por venta, convirtiéndose así en un medio rentable de acuerdo con las funciones que ofrece.

Inicias con una prueba sin costo de 14 días, terminado este periodo deberás elegir un método de pago.  Adicional a esto, podrás descargar su app para móviles e ir administrando todo desde el smartphone. Por cierto, las imágenes de tus productos, botones de Comprar ahora y más no se distorsionan en teléfonos inteligentes. Si diseñas con Sellfy una tienda, podrás vincularle feeds RRSS, pasarelas de pago y más.

✨ Consejos para crear tu página para celulares

Para convertirte en un experto en la creación de páginas para celulares, presta atención a estos consejos:

Evita textos extensos

Al generar una web para celulares, se aconseja crear textos breves, usar fuentes legibles y en tamaños medianos. Esto es de especial importancia en la home page, en el Marketplace y en las páginas estáticas que brindan información. De esa forma, los visitantes entenderán con claridad el mensaje que buscas transmitir. 

Procura que el color de las letras marque un completo contraste con la tonalidad de fondo. De lo contrario, es probable que el usuario esfuerce la vista intentando leer el contenido. Los márgenes laterales y espacios vacíos entre columnas son de vital relevancia, ten en cuenta que los websites modernos para teléfonos reflejan un estilo limpio y abierto para su visualización. 

No elijas Flash Player

Este complemento dejó de tener soporte de Adobe en el año 2020. Si bien ya el mundo cibernético fue dejando de lado este estándar, puede que estuvieras acostumbrado a utilizarlo en tus anteriores sitios web. Sin embargo, los navegadores actuales no son compatibles, mucho menos resulta adaptable con teléfonos inteligentes.

Debido a ello, en su lugar es prudente usar estándares actuales como HTML5, un reemplazo con gran aceptación porque no requiere de la activación de un plugin para reproducir audios o videos. Inclusive, se pueden crear de forma rápida videojuegos y apps bajo este moderno código. 

Optimiza tus imágenes

En un diseño responsive, las fotografías se deben ver bien al cargar tanto en móviles como en ordenadores. Una de las claves para lograrlo es dimensionar la imagen al mismo tamaño que se recomienda en la plantilla original. Desde Canva, Pixlr Editor o el propio Paint, se pueden modificar medidas y bajar en formato JPG. 

Cuando las escojas, ten presente que desde la pantalla móvil tiende a verse solo la parte central de la imagen. Asimismo, es prudente comprimirlas antes de subirlas al servidor para acelerar el tiempo de carga. Con ello, se reduce el peso digital original, obteniendo muchas veces la misma calidad fotográfica. No te olvides de que hay plataformas online que se especializan en ello; por ejemplo, Optimizilla, TinyPNG, Optimole y Compressjpeg, entre otras. 

Piensa en el usuario

Aprende a diseñar las webs pensando en el comportamiento del visitante desde su celular.  Así, en lugar de usar un menú complejo, opta por uno desplegable o hamburguesa. Intenta separar bien los botones, enlaces y CTA para que el usuario no se pulse nada por accidente. Busca despertar el interés de la persona para que desplace la pantalla hacia abajo porque, de lo contrario, se cansará de buscar y se irá de la página.

Los banners y mensajes emergentes suelen acaparar toda la pantalla del teléfono inteligente. Por tal motivo, procura que los pop-ups, si es que son necesarios, sean menos invasivos. Recuerda que, a mayor cantidad de elementos, más demora el servidor en entregar los contenidos. Por otro lado, en caso de emplear una animación, carrusel de imágenes o video, es necesario que verifiques su funcionamiento.

Activa las Accelerated Mobile Pages (AMP)

Si piensas en buscar una salida menos complicada para las visitas desde smartphones, es conveniente optar por el formato Accelerated Mobile Pages de Google. Si tu blog o página de negocio está generada desde WordPress, solo es cuestión de activar el plugin AMP. Pero ten presente que vas a tener que estar dispuesto a sacrificar un poco la multimedia, ya que Google ha optado por priorizar los contenidos textuales.

Como compensación, tendrás un sitio que cargará rápido en diferentes medios móviles y con la aprobación del motor de búsqueda más usado a nivel mundial. Y si crees que vas a necesitar mayor personalización, puedes valerte de complementos como WP AMP Ninja o Glue for Yoast SEO & AMP para sorprender al usuario.