¿A qué debo prestar atención al crear un sitio optimizado para dispositivos móviles?

Lo primero y lo más importante a considerar es la velocidad de su sitio.

Para reducir el tiempo de carga de su sitio (después de la implementación), debe tener cuidado con lo siguiente en su fase de desarrollo:

  1. Importe solo los componentes necesarios, no todo el paquete. (El tiempo de carga de bibliotecas externas como bootstrap, Foundation y jQuery es el factor principal para desarrollar sitios amigables para dispositivos móviles. Alternativamente, puede importar solo los componentes necesarios CSS (Me gusta botones, Sistema de cuadrícula) y JS (Me gusta Dropdowns, Carousel, SideNav) .)
  2. Use la versión minificada de las bibliotecas. (Ej. Jquery.min.js tiene menos tamaño que jquery.js)
  3. Escriba código JavaScript amigable para dispositivos móviles. (Usando el ancho y la altura de la ventana gráfica, puede cargar / descargar su JavaScript personalizado para dispositivos móviles)
  4. Escriba código CSS amigable para dispositivos móviles. (Usando CSS Media Queries, puede modificar la vista de su sitio para dispositivos móviles. El posicionamiento correcto, el tamaño de fuente legible y la navegación adecuada son los principales puntos a considerar).
  5. Minimice el uso de archivos CSS y JS externos. (Importar archivos a través del servidor es un proceso lento. Puede intentar enlazar todos sus archivos CSS en uno y usar fuentes locales en lugar de importar a través de CDN)
  6. Use imágenes comprimidas. (Es otro factor importante que ralentiza su sitio web. Puede probar la compresión en línea o herramientas como jpegtran para reducir el tamaño de sus imágenes)
  7. Después de la implementación: haga el uso adecuado de su proveedor de host. (En realidad, ofrecen muchas técnicas de mejora de la velocidad, como el almacenamiento en caché, la compresión HTML (.gzip), etc.)

Como programador perezoso, utilizo Bootstrap cuando es posible.

Para crear un sitio amigable para dispositivos móviles, aprenda en serio el diseño web receptivo. Dado que mi trabajo principal no es un desarrollador web, solo uso algunos marcos disponibles como Bootstrap o Foundation, con una codificación CSS menor. Es suficiente para sitios web básicos para dispositivos móviles.