Primero el móvil. De Mobile First a Mobile Native: lo que es importante recordar para los desarrolladores que se centran únicamente en teléfonos inteligentes. Metaetiquetas y sección

En cuanto a la prevalencia de los dispositivos Android en 2013, resulta obvio que ahora tenemos miles de dispositivos diferentes con acceso a la red con pantallas de varios tamaños. Es imposible crear un diseño de sitio web independiente para cada uno de ellos. Por lo tanto, hoy existe la necesidad de utilizar un enfoque de diseño más flexible.

Si queremos que nuestra web sea fácil de usar en todos los dispositivos, independientemente del comportamiento del usuario, la orientación o la resolución de la pantalla, entonces deberíamos pensar en implementar un diseño responsive en nuestros proyectos.

Primer enfoque móvil

El término “móvil primero” ha sido bastante popular últimamente. Significa que debes comenzar creando un diseño para un teléfono móvil, pero optimizado para pantallas de alta resolución. De esta manera, el diseño de su teléfono móvil se convierte en el principio y el fin de todo, eliminando la necesidad de otros diseños separados. ¡Es así de simple!

Al utilizar diseños flexibles pero simples de forma nativa, puede brindar un mejor soporte para una variedad de navegadores, tanto grandes como pequeños, que no pueden mostrar diseños completamente responsivos. Entonces, cuando se trata de diseños, el término "Mobile first" en realidad significa "mejoras progresivas".
-Ethan Marcotte

Ancho mínimo Preguntas de los medios

Introduzca reglas específicas para los diseños sólo cuando realmente las necesite. Usa la propiedad ancho mínimo para crear un diseño en capas que abarque todo el ancho de la ventana gráfica. Es más fácil mantener todas las consultas de medios juntas que al final de una hoja de estilo o dispersas en fragmentos de código separados.

/* Pantallas pequeñas (predeterminado) */ html ( font-size; 100%; ) /* Pantallas medianas (640px) */ @media (min-width: 40rem) ( html ( font-size: 112%; ) ) / * Pantallas grandes (1024px) */ @media (ancho mínimo: 64rem) ( html ( tamaño de fuente: 120%; ) )

1. No todos los navegadores son iguales

Los distintos navegadores muestran el código CSS de forma diferente. Para evitar esto, es correcto utilizar scripts especiales para restablecer los valores en una sola vista, por ejemplo Normalize.css, que permite que los elementos se muestren de manera casi idéntica en cualquier navegador. Tenga esto en cuenta antes de crear su propio archivo de estilos.

2. Agregar Ventana gráfica Metaetiqueta

Colócalo en un bloque. tu HTML. Permitirá consultas de medios en diseños para varios dispositivos.

Modelo de caja CSS

Es importante comprender los conceptos básicos, al igual que la generación y el comportamiento de los elementos en el navegador, antes de aprender el diseño responsivo. El modelo de caja CSS consta de cuatro partes diferentes.

Área limpiable alrededor del contenido.

Marco El marco alrededor del acolchado.

El área a limpiar es alrededor del marco.

3. uso tamaño de caja: cuadro de borde

Escriba este código al comienzo de su archivo CSS. * - seleccionará todos los elementos de su página.

*, *:antes, *:después ( -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; )

La elección es suya .clearfix:before, .clearfix:after ( content: " "; display: table; ) .clearfix:after ( clear: ambos; ) .clearfix ( *zoom: 1; )

Flujo opuesto

Agregar una clase .flujo opuesto a columnas que deberían mostrarse primero en dispositivos móviles, pero a la derecha en pantallas grandes.

@media (ancho mínimo: 40rem) ( .column.flow-opuesto ( flotante: derecha; ) )

Practica y mejora tus habilidades.

Siguiendo estas sencillas reglas, podrás convertirte en un verdadero maestro del diseño responsivo. Practique y ayude a que Internet sea mejor y más conveniente.

Por cierto, un ejemplo del diseño responsivo más exitoso es el marco

Desarrollo de aplicaciones móviles

Se ha escrito bastante sobre Mobile First y hay buenos libros sobre este tema. Y, sin embargo, la mayoría de los desarrolladores y empresas no lo utilizan en sus proyectos o no conocen este enfoque en absoluto.

Por eso, quiero contártelo brevemente y con ejemplos, esta será información útil para quienes no han oído hablar de este enfoque.
Intentaré responder a tres preguntas principales:

• Qué es Mobile First y sus ventajas
• Implementación del enfoque.
• Estadísticas de resultados

¿Qué es el móvil primero? Este año, el número de usuarios que utilizan dispositivos móviles para acceder a Internet ha alcanzado el 60%. Por tanto, el tráfico móvil es cada vez más importante y los propietarios de sitios web deben tener en cuenta estas estadísticas. Como muestra la práctica, los usuarios de teléfonos móviles y tabletas pasan menos tiempo en línea y prefieren los sitios que aparecen en las primeras líneas de los resultados de búsqueda. Mientras que los usuarios de PC pueden dedicar más tiempo a buscar información. Por lo tanto, su sitio web debe estar bien optimizado para los motores de búsqueda (SEO) y cumplir con todos los requisitos de Mobile First, para que la visita del usuario a su sitio sea lo más cómoda y comprensible posible a través de su dispositivo móvil.

Por tanto, algunos de los requisitos más importantes en el desarrollo de Mobile First son:

• Muestra primero el contenido más importante
• El sitio web debe ser liviano y optimizado porque... La velocidad de conexión de la red móvil puede ser lenta según la ubicación del usuario
• El sitio web no debe cargar más recursos de los que el usuario necesita para obtener la información que necesita, porque... Internet móvil sigue siendo caro. La información adicional debe cargarse sólo a petición del usuario.

Entonces, Mobile First es un método para desarrollar un sitio web optimizado para varios dispositivos móviles, teniendo en cuenta la velocidad de la conexión de red. Y la importancia de mostrar contenido principal al usuario final.

El gigante de las búsquedas Google escribió recientemente sobre la importancia de este enfoque:

“Aumentaremos el indicador de compatibilidad con dispositivos móviles en nuestro ranking de resultados. Estos cambios afectarán la búsqueda móvil en todos los idiomas del mundo y tendrán un impacto significativo en los resultados de búsqueda. Por lo tanto, será más fácil para los usuarios encontrar resultados optimizados para sus dispositivos”.
Vídeo sobre la importancia de Mobile First de Olivier Rabenschlag, director de la Agencia de Desarrollo Creativo de Google.

Ventajas del enfoque Mobile First Permítanme recordarles que hoy en día el número de usuarios que utilizan dispositivos móviles para navegar por Internet ha alcanzado el 60%. Y por lo tanto, utilizar Mobile First al desarrollar un sitio web proporciona, en primer lugar, grandes beneficios para estos usuarios.

• Un sitio web para todos los dispositivos
• Los usuarios recibirán primero el contenido importante de la página.
• Carga rápida de páginas con velocidades de conexión bajas
• Interfaz conveniente para navegación en pantalla móvil
• La cantidad mínima de recursos web necesarios para mostrar el contenido principal: ahorrar tráfico de Internet móvil
• Primeras posiciones en los resultados de búsqueda de Google

Implementación La implementación del enfoque se demostrará utilizando el marco Moff.js (Mobile First Framework). Este es un marco de JavaScript diseñado para el desarrollo de Mobile First.

Consideraremos el enfoque usando el ejemplo de una página con información detallada sobre un automóvil.

Determinar la parte importante del contenido. Por lo general, hay muchos datos en una página de este tipo. Y debemos decidir cuál de ellos es importante principalmente para el usuario.

Lista detallada de datos en la página:

Imaginemos que lo principal de esta lista es la imagen principal, el nombre del fabricante, modelos, equipamiento, precio, lista de características y equipamiento.

Móvil Primera página. Nombre de la empresa Descripción de la empresa Nissan Versa 2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• Modelo: Versa Nota
• Carrocería: 4D Hatchback
• Motor: 1.6L 4 cilindros DOHC 16V
• Combustible: gasolina

Estándar

• Asistente de freno
• Doble bolsa de aire frontal para impacto lateral
• Ventana trasera
• Compartimento de la puerta del pasajero
• Compartimento de la puerta del conductor
• Bolsa de aire con detección de ocupante
• Control de tracción
• reproductor de CD
• Computadora de viaje
• control de estabilidad electrónica
• Barra estabilizadora delantera
• Dirección asistida
• Limpiaparabrisas trasero
• Luces de lectura delanteras
• Bolsa de aire superior
• Frenos ABS

Creado por Company.com

• Derechos de autor
• Contacto
• Mapa del sitio

Idealmente, esta es la cantidad de tráfico que puede gastar el usuario para obtener estos datos. E intentaremos lograrlo con la mínima diferencia.

En primer lugar, escribiremos estilos para mostrar páginas en dispositivos móviles. Y solo después de eso, los estilos se ajustan a otros tamaños de pantalla mediante consulta de medios.

@media (ancho mínimo: 768 px) ( /*Estilos de tableta y escritorio*/ )

Agregar información adicional Ahora debemos agregar los datos restantes de tal manera que el usuario lo sepa y pueda obtener los datos solicitándolos. Agregar miniaturas para la imagen principal Necesitamos mostrarle al usuario que todavía hay imágenes adicionales disponibles para ver. Para hacer esto, necesitamos agregar un enlace debajo de la imagen principal que conduzca a las miniaturas.

Ver más imágenes...
Aquí utilizamos ayudantes de Eventos de datos, que ayudan a obtener información cuando se solicita. Cuando hace clic en el enlace, se enviará una solicitud Ajax a la dirección especificada en el atributo href. El resultado de la solicitud se escribirá en el elemento especificado en el atributo data-load-target. Un punto importante es que el atributo data-load-screen indica en qué valores de pantalla se cargarán las miniaturas automáticamente. Los tamaños de pantalla se toman del marco CSS Twitter Bootstrap. Y en el atributo data-load-module indicamos el identificador del módulo registrado, que se conectará luego de insertar el resultado de la solicitud ajax.

Se envía una solicitud ajax a la URL especificada en el enlace y el resultado se inserta en la página.

El módulo registrado (vehículo-galería) está conectado

Se incluyen dependencias (jQuery y Slick-carousel)

Cargando el archivo del módulo principal

Inicialización del módulo

A continuación, veamos cómo registrar este módulo. Declaración de clase de módulo El framework Moff tiene un sistema de modularidad con el que implementamos la clase de módulo de galería de vehículos.

Los módulos en Moff son elementos de aplicación independientes que tienen su propia lógica de negocios y pueden depender de bibliotecas externas.

Moff.modules.create("VehicleGallery", function() ( var _module = this; var _mainImage; function setMainImage() ( _mainImage = _module.find(".vehicle_images_main img"); ) function initializeSlickJs() ( $(_module. find(".vehicle_images_thumbs-list")).slick(( infinito: verdadero, slidesToShow: 5, slidesToScroll: 1 )) ) función handleMainImage() ( $(_module.scope).on("click", ".vehicle_images_thumbs- item img", changePreview); ) función changePreview() ( var index = this.src.match(/thumb(\d+)/); _mainImage.src = "images/preview" + index + ".jpg"; ) this .scopeSelector = ".vehicle_images"; this.init = function() ( setMainImage(); inicializeSlickJs(); handleMainImage(); ); ));
Durante la inicialización de la clase, ejecutamos slick-carousel para crear un carrusel de nuestras miniaturas y configuramos un controlador para verlas.

Registro del módulo El registro de un módulo se produce mediante un objeto que contiene un identificador único y puede contener dependencias del módulo y el archivo de clase del módulo principal.

Moff.amd.register(( id: "vehicle-gallery", depende: ( js: ["/bower_components/jquery/dist/jquery.min.js", "/bower_components/slick-carousel/slick/slick.min. js"], css: ["/bower_components/slick-carousel/slick/slick.css"]), archivo: (js: ["js/vehicle-gallery.js"]), afterInclude: función() (Moff. module.initClass("Galería de vehículos"); ) ));
En nuestro ejemplo, especificamos jQuery y su complemento slick-carousel, que crea un carrusel a partir de miniaturas, como dependencias. Las dependencias se cargan sincrónicamente, en el orden que usted especifique. Y después de las dependencias, se carga la clase del módulo Vehicle-gallery.js. A continuación, después de cargar el archivo del módulo y sus dependencias, inicializamos el módulo usando el evento afterInclude.

Estadísticas de resultados. Resumamos los resultados de la creación de la página Mobile First.

El gráfico inferior muestra que una página no optimizada es un 73% más pesada que una página Mobile First. De esta forma podremos ahorrar 186,94 KB, que posiblemente el usuario no necesite a la hora de visualizar su página.

Conclusión De esta forma nos libramos de cargar una gran cantidad de recursos secundarios, pero que estarán disponibles a petición del usuario.

Este artículo solo cubre un ejemplo de carga de información adicional. Se puede ver un ejemplo completo en el sitio web del marco.

Al cambiar el tamaño a 720 píxeles o menos, el encabezado adquiere un tamaño mayor con cómodos botones de 60 píxeles.
Las dimensiones, la alineación, el número de elementos del menú y los botones se adaptan al ancho del dispositivo.
Si conoce sus proporciones, puede encontrar un punto medio donde las dimensiones se ajusten tanto a dispositivos móviles como a computadoras de escritorio. Por ejemplo, títulos de sección. Dimensiones y proporciones de tipografía

En cierto modo, cuanto más grande, mejor. Pero lo más importante es que las proporciones armonizan el contenido. Si el texto del cuerpo tiene tamaño 24px, asegúrese de que encaje bien con el resto del sitio. No existen reglas estrictas aquí, pero la altura de la línea debe estar entre 1,2x antes 1,4x tamaño de fuente. Establezca tamaños, densidades y variaciones de color según las prioridades. Mucho aquí proviene del instinto y de un ojo entrenado.

La longitud de la línea debe ser de 45 a 90 caracteres.. Las reglas generales de tipografía se describen con más detalle en esta guía.

Trabajar con SVGUsar WebKit para animaciones

El rendimiento es importante: afecta directamente a la comodidad del usuario. Si todo es lento, a la gente no le importarán los subtítulos de su diseño porque lo único que pensarán es en lo lentas que son las cosas.

A continuación, cuando el auto arranca, utilicé webkit-transform en lugar de animate de jQuery. El rendimiento mejora significativamente con esta implementación. Además, funciona muy bien en Mobile Safari y Chrome.

Para paralaje establecí diferentes velocidades para 3 elementos diferentes. Utilicé webkit-transform en lugar de la posición superior de CSS. Debido a esto, el desplazamiento se ha vuelto mucho más fluido. Configurar la ventana gráfica

Necesitamos asegurarnos de que los dispositivos iOS y Android escale el diseño en 0,5 para que todo funcione perfectamente en un ancho de pantalla de 640 px. Para iPad escalaremos a 1.

Banner inteligente de iOS

Si tiene un iPhone, puede agregar un fragmento de código que vinculará la parte superior del sitio a su aplicación.

Cuando las personas acceden al sitio a través de su iPhone o iPad, ven un hermoso banner que los lleva a la App Store. Usando el simulador de iOS
Registrar Chrome en Android

La mitad de los usuarios de dispositivos móviles utilizan Android. Para probar elementos en el navegador Chrome en Android, siga estas instrucciones.

Me tomó un tiempo dominar la opción en el menú de hamburguesa Herramientas > Inspeccionar dispositivos Conclusión

Desarrollar un sitio web verdaderamente responsivo que funcione en todos los navegadores y en todos los dispositivos no es una tarea fácil. Por lo tanto, debe trabajar de la manera más eficiente posible para no perder la mayor parte de su tiempo en pequeñas cosas que vuelven loco al desarrollador. De manera similar a cómo dejamos de admitir IE6, también eliminamos algunos dispositivos heredados y resoluciones más bajas.

El inversor y socio del fondo de riesgo Andreessen Horowitz, Benedict Evans, escribió un artículo sobre por qué cada vez más desarrolladores están pasando del paradigma Mobile First al paradigma Mobile Native, cuál es la diferencia entre ellos y qué es importante que recuerden los creadores de aplicaciones móviles. .

“Hace varios años, las empresas de TI adoptaron una estrategia Mobile First. Antes, las organizaciones tenían departamentos de desarrollo separados para plataformas móviles y empleados que participaban en el desarrollo del área móvil. Ahora las nuevas funciones aparecen inmediatamente en los teléfonos inteligentes, pero a veces no se transfieren a las PC”, escribe Evans.

Según el inversor, en 2016 cada vez más empresas adoptarán el paradigma Mobile Native. “Esta es una evolución del principio Mobile First. ¿Qué pasa si simplemente te olvidas de las PC y los teléfonos móviles baratos? Si nos centramos exclusivamente en los 2.500 millones de teléfonos inteligentes y omitimos por completo el mercado de dispositivos de gama baja. ¿Se puede construir una gran empresa?

Según Evans, los desarrolladores que elijan una estrategia nativa móvil deberían considerar primero algunos puntos clave:

"El último punto que me gustaría hacer es pensar en cuántas tecnologías diferentes están involucradas en dichas aplicaciones y por qué tales servicios no eran posibles en la PC", señala Evans.

Es sorprendente cómo los teléfonos inteligentes son más complejos y más fáciles de usar que las PC, y esto es especialmente cierto en el caso de Internet móvil.

El inversor afirma que con un teléfono móvil los usuarios pueden hacer muchas cosas que el sistema, que incluía el propio ordenador, teclado y ratón, no les permitía hacer. Esto abre nuevas oportunidades tanto para los propietarios de teléfonos inteligentes como para los desarrolladores. “Toda una generación ya ha crecido y está preparada para el paradigma Mobile Native. Y las aplicaciones que habrían sido interesantes en 2007 ahora parecen completamente simples”.

“Los desarrolladores finalmente pueden ir más allá del paradigma Mobile First y aplicar sus habilidades para aprovechar al máximo los dos mil millones de teléfonos inteligentes que existen en el planeta. Esto me recuerda la transición a la Web 2.0 hace unos nueve años. Entonces todos los desarrolladores dijeron: "Sabes, no tenemos que pensar en Lynx, scripts CGI y conexiones de acceso telefónico. Hemos superado el punto en el que el uso de la etiqueta IMG parecía controvertido y podemos pensar en cómo crear interfaces y proporcionar a los usuarios nuevos servicios", concluye Evans.

Vamos a crear una navegación del sitio sencilla y responsiva. Nuestra solución nos ayudará a centrarnos en contenido nuestra página, que quizás sea la máxima prioridad a la hora de desarrollar para dispositivos móviles. No habrá ningún JavaScript involucrado aquí, pero lo cubriremos utilizando un enfoque Mobile First.

Navegación móvil

Un diseño responsivo perfectamente aceptable, pero en tamaños de visualización móviles estándar (320 x 480 píxeles), todo lo que realmente ves es el menú de navegación. Seguramente, con solo abrir la página principal, me gustaría ver algo más que esto. London & Partners no son los únicos que tienen este problema; esta práctica se observa en muchos diseños responsivos en toda la web.

Entonces, ¿cuáles son las soluciones?

Ya conocemos algunas formas de solucionar este problema, como confiar en jQuery para ayudarnos a resolverlo. Tome la explicación de Chris Coyier sobre el menú desplegable Cinco pasos simples.

Pantalla grande, pantalla pequeña.

Con jQuery, se crea un menú duplicado como una lista desplegable, inicialmente oculto a la vista mediante CSS. Cuando las consultas de medios detectan una pantalla más pequeña, hacen visible el menú desplegable y la navegación original invisible. Esto es ideal para dispositivos móviles porque los menús desplegables ocupan un espacio mínimo y utilizan la interfaz de usuario dedicada del dispositivo (como el desplazamiento del iPhone).

Alternativamente, puede ocultar su navegación pero ingresar al modo de visualización cuando presione el botón "menú". Puedes ver este efecto en acción en el último Bootstrap de Twitter.

Las pantallas más pequeñas ocultan enlaces de navegación y muestran un ícono de "lista" (que rápidamente se percibió como un "menú") que muestra la navegación cuando se hace clic. Nuevamente, a los visitantes móviles se les presenta la mayor cantidad de contenido posible y tienen opciones de navegación disponibles si así lo desean.

Solución CSS pura

Usaremos la técnica que discutió Luke, que implica el uso de CSS y un enfoque Mobile First. ¿Qué queremos decir con el término “enfoque Mobile First”? En pocas palabras, vamos a desarrollar un diseño centrado en dispositivos móviles y luego mejoraremos gradualmente el diseño para pantallas más grandes. Usaremos consultas de medios que detectan tamaños de pantalla cada vez mayores, agregando gradualmente estilo y funcionalidad.

Esto significa que al visualizar un diseño en un dispositivo móvil, solo se cargará el mínimo de CSS y recursos. Esto también significa que las versiones anteriores de IE (que no reconocen consultas de medios) se presentarán en la versión móvil del sitio. Consulte Leaving Old Internet Explorer Behind de Joni Korpi para obtener más información al respecto.

1.Marcado

Explicaré las ideas detrás de esta solución a medida que avancemos, así que por ahora esbocemos algunas marcas, comenzando con un documento HTML5 en blanco.

Navegación móvil primero responsiva

Una vez hecho esto, agreguemos algo de estructura de página. Puntos directamente necesarios y todo para los fines de nuestra demostración. Utilicé el relleno de texto Monty Python de Holy Grail (gracias Chris Valleskey), que es una buena manera de poner una sonrisa en tu cara mientras trabajas :)

Azul marino. No, amarillo...

¡Callarse la boca! ¡¿Te callarás?! Pero estás vestido como tal… ¡Camelot! No se vota por reyes.

¡¡Queremos un arbusto!!

¡Mira mi mentira! ¡Callarse la boca! Pero estás vestido como tal...

• ¿La nariz?
• ¡Shh! Caballeros, les doy la bienvenida a su nuevo hogar. ¡Vámonos a Camelot!
• ¡Mira mi mentira!

¡Ayuda, ayuda, estoy siendo reprimido!

¿Por qué? Escuchar. Mujeres extrañas tumbadas en estanques distribuyendo espadas no son base para un sistema de gobierno. El poder ejecutivo supremo deriva de un mandato de las masas, no de alguna ridícula ceremonia acuática. ¡Tranquilizarse! ¡¿Un tritón?!--envoltorio final-->

2.Diseño de navegación

Hemos creado una página HTML básica, así que ahora es el momento de la atracción principal; nuestra navegación principal..

• portafolio
• Acerca de mí
• Disparates
• Servicios
• Contacto
• Arriba

Sí, viste todo correctamente; lo agregamos en la línea 68. despuésúltimo artículo. No olvides que actualmente estamos desarrollando para dispositivos móviles, más adelante veremos la versión de escritorio. Colocamos la navegación en la parte inferior de nuestra página, lo que parece bastante extraño. Ahora vamos a colocar un enlace en la parte superior de nuestra página para que los usuarios puedan encontrar la navegación si lo desean.

Navegación Menú

3.Restablecer CSS

Dependiendo de cómo inicie normalmente los proyectos web, este paso puede diferir de su flujo de trabajo normal. Siempre he sido de la opinión de que el reinicio de Eric Meyer es un buen punto de partida, especialmente porque lo revisó recientemente. Agregaremos sus reglas de reinicio a la hoja de estilo para iniciar nuestro CSS:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTA: TRABAJO EN CURSO UTILIZAR CON PRECAUCIÓN Y PRUEBA CON ABANDONO */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , acrónimo, dirección, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centrar , dl, dt, dd, ol, ul, li, conjunto de campos, formar, etiqueta, leyenda, mesa, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, figcaption, figura, pie de página , encabezado, grupo h, menú, navegación, sección, resumen, hora, marca, audio, video (margen: 0; relleno: 0; borde: 0; contorno: 0; tamaño de fuente: 100%; fuente: heredar; vertical- align: baseline; ) /* Restablecimiento de la función de visualización HTML5 para navegadores antiguos */ artículo, aparte, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, navegación, sección ( display: block; ) cuerpo ( line-height: 1; ) ol, ul ( estilo de lista: ninguno; ) blockquote, q ( comillas: ninguna; ) blockquote:antes, blockquote:después, q:antes, q:después ( contenido: ""; contenido: ninguno; ) / * ¡recuerde resaltar las inserciones de alguna manera! */ ins (decoración de texto: ninguna;) del (decoración de texto: línea directa;) tabla (colapso de borde: colapsar; espaciado de bordes: 0;)

4.Estilos básicos

Por el momento nuestra página parece bastante aburrida.

Entonces, mejoremos la situación agregando un estilo simple.

/*comienza nuestros estilos*/ body ( fuente: 16px/1.4em "PT Sans", sans-serif;; color: #1c1c1c; ) p, ul ( margen: 0 0 1.5em; ) ul ( estilo de lista: disco ; relleno: 0 0 0 20px; ) a ( color: #1D745A; ) h1 ( ) h2 ( familia de fuentes: "PT Serif", serif; tamaño de fuente: 32px; altura de línea: 1,4 em; margen: 0 0 .4em; peso de fuente: negrita; ) /*diseño*/ .wrapper ( ) artículo ( borde inferior: 1px sólido #d8d8d8; relleno: 10px 20px 0 20px; margen: 10px 0; ) /*encabezado*/ encabezado ( fondo: #1c1c1c; relleno: 15px 20px; ) /*clearfix más corto http://nicolasgallagher.com/micro-clearfix-hack/*/ encabezado:antes, encabezado:después (contenido:""; pantalla:tabla;) encabezado :después ( clear:both; ) /* Para IE 6/7 (activador hasLayout) */ encabezado ( zoom:1; ) h1.logo a ( color: #d8d8d8; decoración de texto: ninguna; peso de fuente: negrita; transformación de texto: mayúsculas; tamaño de fuente: 20px; altura de línea: 22px; flotante: izquierda; espacio entre letras: 0,2em; ) a.to_nav (flotante: derecha; color: #fff; fondo: #4e4e4e; texto- decoración: ninguna; relleno: 0 10px; tamaño de fuente: 12px; peso de fuente: negrita; altura de línea: 22px; altura: 22 píxeles; transformación de texto: mayúsculas; espacio entre letras: 0,1 em; -webkit-border-radio: 2px; -moz-border-radio: 2px; radio del borde: 2px; ) a.to_nav:hover, a.to_nav:focus ( color: #1c1c1c; fondo: #ccc; )

Estos son todos los conceptos básicos (fuentes, alturas de línea, colores, etc.), pero lo realmente importante es que dibujé el botón "menú" a la derecha, dentro de , exactamente donde esperarías que estuviera.

Si pasa el cursor sobre él, verá un estado congelado; por supuesto, esto no es necesario para los dispositivos con pantalla táctil, pero un comportamiento similar se trasladará a las versiones incompatibles de Internet Explorer. Que nosotros determinado Como beneficio para los usuarios de dispositivos móviles, esto es state:focus. Esto es lo mismo que el estado :hover, pero ofrecerá información importante para los dispositivos con pantalla táctil. Nuestros usuarios descubrir que lograron el éxito tocando el botón de menú.

De cualquier manera, haz clic en él y accederás a la navegación: genial.

Ahora vamos a darle un pequeño estilo al menú.

5.Estilos de navegación

De hecho, diseñaremos nuestra navegación principal como la de London & Partners que se muestra arriba, excepto que estará explícitamente en la parte inferior de la página.

/*navegación*/ #primary_nav ul (estilo de lista: ninguno; fondo: #1c1c1c; relleno: 5px 0; ) #primary_nav li a ( pantalla: bloque; relleno: 0 20px; color: #fff; decoración de texto: ninguno ; peso de fuente: negrita; transformación de texto: mayúsculas; espacio entre letras: 0,1 em; espacio entre letras: 0,1 em; altura de línea: 2 em; altura: 2 em; borde inferior: 1 px sólido #383838; ) #primary_nav li :last-child a ( border-bottom: none; ) #primary_nav li a:hover, #primary_nav li a:focus ( color: #1c1c1c; fondo: #ccc; ) /*footer*/ footer ( font-family: " PT Serif", serif; estilo de fuente: cursiva; alineación de texto: centro; tamaño de fuente: 14px; )

Mucho mejor. Hicimos que los enlaces del menú fueran bonitos y grandes (lea el blog Touch Target Sizes de Luke Wroblewski para obtener más detalles) y redefinimos el estado: enfoque para recibir comentarios de los usuarios.

6.Hacerse grande

Bien, hemos trabajado con nuestra plantilla móvil simple, pero ahora es el momento de realizar mejoras más avanzadas. Usaremos consultas de medios para determinar cuándo nuestro diseño móvil ya no es adecuado.

¿Pero en qué momento llega a serlo? Hay muchas formas de abordar las consultas de medios, pero trabajaremos sobre la base de que la ventana gráfica móvil sea de 320 x 480 píxeles. Tiene 320 píxeles de ancho cuando se ve en orientación "vertical", y 480 píxeles de ancho cuando se ve en orientación "paisaje", por lo que tiene sentido si configuramos nuestra primera consulta de medios para especificar cualquier pantalla de más de 480 píxeles.

Sin embargo, el siguiente paso probablemente sea una tableta. El iPad tiene una resolución de 980 px x 768 px, por lo que podemos asumir con seguridad que cualquier tamaño inferior a 768 px es adecuado para el diseño de nuestro móvil. Cualquier tamaño superior a 768 px puede funcionar con el diseño de navegación de escritorio, versión "de escritorio".

Ahora podemos comenzar a agregar reglas, así que configuremos una consulta de medios:

/*consultas de medios*/ @pantalla solo de medios y (ancho mínimo: 768 px) ( )

Esta consulta de medios activará todos los estilos que contiene si el valor de ventana gráfica más pequeño es 768 píxeles. Tenga en cuenta la inclusión el único palabra clave que garantiza que Internet Explorer 8 no se confunda e intente procesar la solicitud. Para obtener información más detallada consulte.

Comencemos nuestro trabajo haciendo desaparecer el botón "menú":

Pantalla solo @media y (ancho mínimo: 768 px) (a.to_nav (display: none;))

Cuando el navegador sea un poco más ancho, el botón de menú ya no aparecerá.

7.Mover navegación

Ahora necesitamos mover nuestra navegación principal a la parte superior de la página. Haremos esto eliminándolo del flujo de documentos y colocándolo en la parte superior.

Pantalla solo @media y (ancho mínimo: 768 px) ( a.to_nav ( display: none; ) .wrapper ( posición: relativa; ancho: 768 px; margen: auto; ) #primary_nav ( posición: absoluta; arriba: 5 px; derecha : 10px; fondo: ninguno; ) #primary_nav li ( display: inline; ) #primary_nav li a ( float: left; border: none; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius : 2px; radio del borde: 2px; ) )

Para que esto sea posible, primero debemos colocar correctamente su padre (.wrapper). Podemos hacerlo aquí en la consulta de medios o podemos definirlo al principio de nuestra hoja de estilo.

Una vez que el menú esté completamente instalado, debemos eliminar algunos elementos de anclaje. No necesita hacer nada especial, solo necesita hacer que la lista de productos se muestre linealmente, eliminar bordes y espacios grandes. Los estados de desplazamiento de los que hablamos antes son, por supuesto, fantásticos, por lo que no es necesario cambiarlos.

8. Y por último...

Si ha estado prestando atención, habrá notado que todavía tenemos un enlace "volver al principio" en la navegación; no lo necesitamos ahora, ¿verdad?

Podemos eliminarlo de varias maneras, pero para tener claro lo que está pasando, primero agreguemos una clase al elemento de la lista:

Arriba

Y luego podemos deshacernos de él en nuestra consulta de medios:

#primary_nav li.top (pantalla: ninguna;)

Conclusión

¡Eso es todo! Hay muchas formas de implementar esta idea (el ícono de lista es solo una de ellas) y, por supuesto, puede continuar agregando consultas de medios para trabajar en pantallas más grandes. Espero que ahora tengas una razón para hacerlo. Creamos una navegación táctil simple y receptiva utilizando un enfoque móvil primero, enfocándonos en el contenido y la usabilidad. ¿Quién necesita algo más?

Recursos adicionales

Aquí hay algunos enlaces útiles mencionados en este artículo, compilados en una lista conveniente:

• Lucas Wroblewski
• Chris Coyier