Página Web para Móviles

Necesitáis una Página Web para Móviles. Entra y aprende cómo hacer una página para móviles ultrarrápida y modificable.

Disponer de una página web optimizada para dispositivos móviles siempre ha supuesto una ventaja, pero hoy en día es esencial. De hecho, los usuarios se han acostumbrado tanto a navegar por internet desde pantallas pequeñas y a que las páginas se carguen a la velocidad máxima, que abandonarán tu sitio rápidamente si no está adaptado para móviles.

La importancia de una página para móviles

La mayoría de las personas usan dispositivos móviles: el uso de páginas web móviles (es decir, el acceso a una web desde un smartphone o una tablet mientras estamos de un lugar a otro) ha ido en aumento en los últimos años. En el 2015, Google anunció que, por primera vez, las personas estaban realizando más búsquedas desde dispositivos móviles que desde ordenadores o portátiles.

Creación Página Web Móvil

La prueba de optimización para móviles de Google: Google ofrece una forma útil, sencilla y gratuita de diagnosticar varios problemas móviles en tu página web. Solo tienes que dirigirte a la Prueba de optimización para móviles de Google e insertar la dirección URL de tu página web.

EL CÓDIGO HTML

Ver código

EL CÓDIGO CSS (archivo: simple-mobile-menu-responsive.css)

Ver código

En el archivo zip que podréis descargaros al final de este artículo, incluye también los archivos: bootstrap.min.css y font-awesome.min.css. Estos archivos css, van incluidos en la carpeta con el nombre css del proyecto.

También incluye la carpeta con el nombre fonts, y la carpeta img

CÓDIGO JAVASCRIPT (archivo: simple-mobile-menu.js)

;(function( window, document, $, undefined ) {
  "use strict";

  // Menu Toggle
  (function() {
    $(function() {

      var $toggle = $(".js-smm-toggle");
      var $container = $(".js-smm-container");

      if( ! $toggle.length || ! $container.length ) return;

      $toggle.click(function() {
        $toggle.toggleClass("smm__toggle--open");
        $container.toggleClass("smm__container--open");
      });
    });
  })();

})( window, document, jQuery );

Este archivo simple.mobile-menu.js, junto a los archivos: bootstrap.min.js y jquery.min.js se incluyen en la carpeta con el nombre js

Ver el funcionamiento de la página web para móviles aquí

Descargar el Proyecto