Una mirada al diseño para dispositivos móviles
Cuando se lanzó el primer iPhone, tomó el mundo tecnológico por asalto. Desde entonces, han pasado casi 5 años y el mercado de teléfonos inteligentes ha crecido en popularidad, incluso con Microsoft ha entrado en la competencia con su sistema operativo Windows 7 y sus socios. Hoy en día, con tantos usuarios de Internet en su teléfono inteligente, es de sentido común esperar que el número de sitios web móviles aumente agresivamente.
Sin embargo, diseñar para la web móvil es una operación completamente diferente con el diseño web común. Nuestros sitios web están diseñados para pantallas gigantes, pero el tamaño de la pantalla del teléfono inteligente es demasiado pequeño en comparación con eso, lo que conlleva problemas de uso molestos.. Nuevos estándares de diseño y prácticas. son muy necesarios para un mejor diseño de sitio móvil con una experiencia de usuario fluida.
En esta guía buscaremos diseñar un sitio fácil de usar para los navegadores móviles de teléfonos inteligentes. Hablaré sobre las mejores prácticas y la útil herramienta de desarrollo para que diseñe un mejor sitio web móvil, así que entremos en él después del salto.!
Planificación de experiencia de usuario fuerte
Cuando construyes un sitio web móvil es importante Ten en cuenta a tus usuarios en todo momento., En última instancia, su sitio web está siendo diseñado y creado para que los usuarios lo disfruten. Es ciertamente común que los usuarios esperen que un sitio web móvil se comporte de manera similar al entorno de escritorio, por lo que manteniendo la experiencia del usuario amigable debe ser su enfoque principal al construir un sitio móvil exitoso.
Hay muchos conceptos de usabilidad a considerar para sus usuarios. Estas consideraciones incluyen tamaño de pantalla, imágenes en línea, hipervínculos, tamaños de letra, y navegación de página. Hemos escrito sobre el diseño de usabilidad móvil para que usted cree su sitio web para una mejor usabilidad. Además de la guía, siempre hay que mantente alerta para nuevas ideas para mejorar tu sitio.
Planear una experiencia de usuario sólida también significa que usted debe considere cómo un usuario interactuará con su sitio web. En un escritorio, su sitio web puede interactuar con un mouse y un teclado, pero en un teléfono inteligente los usuarios tapping, sacudiendo, y deslizar su camino alrededor de su sitio. Probablemente necesite diseñar el sitio de la forma en que los usuarios pueden Accede a la información del sitio fácilmente con estos movimientos físicos..
Mantenga las páginas cortas y dulces
La carne y las patatas de cualquier sitio web es la contenido de página. Cada una de tus páginas web. contiene cantidades significativas de información útil para sus usuarios, como texto, fotos o videos. También encontrará artículos de noticias y publicaciones de blog que se publican en algunas páginas, lo que puede ayudar a dividir el texto, pero no se recomienda para dispositivos móviles como técnica. requiere más carga de páginas, lo que significa más tiempo de espera en el lado del usuario.
A menos que sea absolutamente necesario lo recomiendo. mantener el contenido de tu página corto. También deberías considerar hacer que se vea dulce por Estilo de la fuente a un tamaño mucho más grande y tal vez moviendo imágenes a un lado. Con su contenido en pantalla completa, naturalmente atrae la atención, sin mencionar que la optimización en realidad hace que el escaneo de las páginas sea mucho más simple. Esta es también la razón por la cual un diseño de una sola columna encaja a la perfección perfectamente.
En la mayoría de los casos, los navegadores móviles no van a cargar las páginas web tan rápido como los navegadores de escritorio y esto podría molestar a sus lectores, por eso es necesario Optimiza el contenido y el sitio web. para carga de contenido de alta velocidad. Tu también puedes Acortar el artículo manteniendo el contenido completo., o simplemente eliminar imágenes innecesarias. Ponga su atención en la simplicidad en lugar de la belleza..
Su navegación principal es el salvavidas para sus visitantes que buscan moverse entre páginas. En un dispositivo móvil, los enlaces de pantalla aparecerán mucho más pequeños por naturaleza, por lo tanto, mucho más difíciles de tocar. Un pellizco esencial para resolver este problema es Maximiza la fuente y el espacio para tus enlaces de navegación., Tal vez ocupando toda el área del bloque. Alternativamente puedes Diseñe la barra de navegación para que sea similar a la barra de pestañas de la aplicación real de iPhone, como la que se muestra arriba.
Construyendo estilos CSS móviles
Ahora que sabemos cómo optimizar el sitio web móvil para una mejor legibilidad y facilidad de uso, sería bueno hablar sobre los estilos CSS. Cada hoja de estilo CSS contiene muchos selectores con propiedades relacionadas con fuentes, tamaños, posicionamiento y configuración de pantalla. Cuando se trata de móviles debes prestar atención a cómo tus bloques caen en su lugar.
(Fuente de la imagen: Smashing Magazine)
Un área para comenzar es restablecer los anchos de envoltura de su sitio en porcentaje. Es común usar píxeles como la unidad para posicionamiento, altura de línea, tamaño de fuente y ancho de div, pero cuando se trata de dispositivos móviles querrá que sus páginas estén Fluido y transición entre cada dispositivo de forma natural.. La configuración de divs de contenedor al 100% de ancho permitirá que el contenido se llena fácilmente entre el modo retrato / paisaje sin fluir por el borde.
Si eres una de las personas que buscan reestructurar todo tu diseño, asegúrate de golpear todo con una Reiniciar. también Los párrafos, encabezados y enlaces de navegación deben estar configurados para bloqueo de pantalla; para que tenga esa sensación de estilo de impresión lineal. Vuelva a colocar los márgenes y el relleno para eliminar la hinchazón de su diseño. Evitar mesas Si es posible, ya que estos tienden a generar resultados con errores entre dispositivos..
Las imágenes grandes también son una molestia entre los dispositivos. La mayoría de las imágenes de su sitio web representarán más de 480 px y es posible que no desee que rompan el contenedor. La primera opción es establece su ancho al 100% para que las imágenes puedan redimensionarse naturalmente. Ciertamente es posible Crea diferentes conjuntos de imágenes para tu sitio web. y los representa de forma diferente según el agente del navegador, pero honestamente esto solo agrega más trabajos a su lado, así que intente Usa la técnica solo cuando sea realmente necesaria..
Diseño de sitios web para iPhone
La cuota de mercado móvil es bastante grande y está dividida, pero Apple tiene una gran parte del pastel con sus iDevices. Tanto el iPhone como el iPad son dispositivos móviles listos para Internet con funcionalidad de pantalla táctil incorporada. Cuentan con el mismo navegador web predeterminado, Safari y una gran cantidad de otras opciones.
Para sitios web específicos para iPhone, deberás apuntar al tamaño de la pantalla. El tamaño de pantalla fijo se establece en 320px por 480px para modelos de iPhone más antiguos y 640px por 960px para iPhone 4 y iPhone 4S.
Las pantallas de iPhone están limitadas al espacio. Deberías Un bloque de contenido que se extiende durante el tiempo que sea necesario.. Mantener los elementos en una sola columna. te ahorrará dolores de cabeza y permitir un diseño fluido para “llenar” modos de retrato y paisaje. Para esto, es probable que necesite desarrollar otra plantilla y encontrar una manera de verificar si sus visitantes están usando un iPhone. El pequeño fragmento de código de PHP a continuación debería funcionar bien:
Básicamente la lógica tira de nuestro global. $ _SERVER variable para el agente HTTP y comprueba si la palabra “iphone” aparece en cualquier lugar. ¡Si es así, sabemos que nuestro visitante está utilizando un iPhone y desde allí podemos colocar un HTML ligeramente diferente o incluso un diseño de plantilla completamente nuevo! Esto también podría ser usado para incluir una hoja de estilo específica para iPhone, cambia los títulos de tus páginas, elimina imágenes o casi cualquier efecto dinámico.
Cuando se trata de servir nuevos estilos hay una forma más fácil. Como se mencionó anteriormente, el tamaño máximo de pantalla para iPhone es de 960px de ancho. Por lo tanto, con las nuevas consultas de medios CSS3 puede agregar estilos directamente en la hoja de estilos principal de su sitio que solamente mostrar en el iPhone. A continuación se muestra un pequeño código de ejemplo:
Pantalla @media y (ancho de dispositivo máximo: 960px) / * iPhone css * /
Esto funciona porque CSS ahora puede detectar agentes de navegación y sus propiedades. El ancho máximo de la pantalla es una de las propiedades que también se puede detectar..
El sitio web completo para dispositivos iPhone para iPhone no es demasiado difícil de diseñar, hay demasiados ejemplos para referirse, es decir, iPhone de CSS. Mantente ocupado estudiando y no tengas miedo de Experimentar con nuevas técnicas en diseño de interfaces de usuario..
Mobile jQuery Scripting
La mayoría de los desarrolladores web front-end están familiarizados con la biblioteca jQuery. Ofrece algunas funciones abreviadas fantásticas para codificar efectos, animaciones, menús desplegables y muchas otras funciones en el navegador, y se vuelve más impresionante con el anuncio de jQuery Mobile. Es No se recomienda saltar directamente a la tecnología. y cargue su sitio web con efectos en todas partes, pero para propósitos de prueba, la funcionalidad avanzada puede jugar muy bien.
jQuery Mobile es un poco diferente de jQuery regular, ya que le brinda un entorno completo para construir. Cuando trabajas con sus archivos, no solo son JavaScript, sino también estilos CSS para botones, enlaces y efectos de transición. Todavía estás escribiendo páginas web en código HTML, pero el equipo de jQuery Mobile tiene suministró una gran cantidad de características de diseño de interfaz de usuario opcionales. Hay mucho que podemos hacer con este marco pero desde el marco todavía está en beta, sigamos con efectos simples.
Un pequeño tutorial en el blog DevGrow proporciona algunos ejemplos asombrosos. El sitio oficial también ofrece demostraciones para que pruebes. Tenga en cuenta que estamos usando el atributo HTML, transición de datos para agregar efectos de animación con cualquiera de los valores predefinidos. Estos incluyen diapositivas, pop, flip, fade, etc. Echa un vistazo al pequeño ejemplo de DevGrow para conocer estos efectos..
Los efectos y las transiciones son bastante nítidos, y el hecho de que pueda construir una interfaz móvil completa estrictamente con jQuery también es un gran paso adelante para esta plataforma, pero con la plataforma solo en versión beta, no recomendaría construir todo su sitio móvil con su biblioteca, especialmente con el hecho de que es No es compatible con todos los principales teléfonos inteligentes al momento de escribir (particularmente Windows Phone 7), pero seguramente mejorará con el tiempo.
En última instancia, recomiendo familiarizarse con este nuevo marco móvil. antes de despliegue en vivo en cualquier proyecto.
Herramientas útiles para desarrolladores
Los desarrolladores móviles no solo buscan recursos de codificación y diseño. También existe una gran demanda de herramientas de software e IDE, por no mencionar los potentes marcos móviles. El desarrollo web es una tarea difícil que requiere un poco de dedicación, pero utilizar herramientas adicionales hará que su trabajo sea mucho más fácil.
Opera Mobile Emulator
¿Está buscando una forma de comprobar cómo se está mostrando su sitio web móvil? Esto puede ser un gran dolor si no tiene un teléfono inteligente con acceso a Internet. O simplemente no desea utilizar su teléfono inteligente para probar el sitio cada vez que se inserta una actualización en su servidor. Bueno, Opera Mobile Emulator es un software fantástico para probar tu sitio web móvil..
El emulador soporta alrededor 20 perfiles móviles como Samsung Galaxy S, HTC Desire e incluso tabletas como Motorola Xoom. También es posible configurar el resolución personalizada y densidad de pixeles para pruebas intensivas. Lo mejor de todo es que no necesita hacer demasiado trabajo de configuración, solo haga unos pocos clics y listo..
La descarga es completamente gratuita y el software se ejecuta tanto en Mac OS X como en Windows. Sus desarrolladores están trabajando duro para crear estándares web adecuados y ajustar su motor de representación móvil. Recomiendo sus otras herramientas de desarrollo si buscas herramientas adicionales para ayudarte en el camino.
PhoneGap
No se han desarrollado muchas API sobre HTML5 para crear aplicaciones móviles sólidas. Cabe destacar que el panorama móvil ha carecido de este tipo de sitios web, que es exactamente la razón por la que PhoneGap llena el nicho tan bien. Su plataforma te permite fácilmente. construye aplicaciones basadas en HTML5 como aplicaciones nativas en 6 plataformas diferentes.
El proceso funciona al comprimir primero su código y pasarlo a través del marco de la aplicación de PhoneGap. Desde allí, sus aplicaciones pueden llegar a una gran parte del mercado móvil, como Android, iOS, Windows Phone 7 y BlackBerry..
Si estás un poco confundido no te preocupes demasiado. Sus páginas de soporte resumen claramente el proceso y ofrecen enlaces a recursos útiles. Las aplicaciones que ya se han desarrollado se han compilado en una hermosa cartera estilo biblioteca. Echa un vistazo a su colección completa de aplicaciones que luego puedes ordenar por dispositivos con capturas de pantalla..
Estudio aptana
El sitio web de Aptana es la ubicación principal para aprender sobre sus herramientas de desarrollo. La última versión de la suite, Aptana 3.0.3, presenta un IDE totalmente integrado para el desarrollo web, los estilos CSS y el anidamiento de etiquetas HTML, y la mejor parte: Aptana es completamente gratis ¡descargar! Ofrecen paquetes para los 3 principales sistemas operativos (incluido Linux), lo cual es una gran comodidad para los desarrolladores..
Lo que hace que Aptana sea especial es la rapidez con la que puede desarrollar una pequeña aplicación web y probar su diseño. La suite estudio le permite Desarrolle y pruebe rápidamente una aplicación web que se ejecuta en Ruby on Rails, PHP, Python o simplemente HTML / CSS, y sus características de resaltado de código se han mejorado recientemente para incluye nuevas bibliotecas de etiquetas HTML5 y CSS3. También viene con integración Git, un terminal incorporado, depurador de código y un puñado de otras características ingeniosas.
Kits e iconos de GUI móvil
¿Cuál sería la web sin regalos por ahí? Para los diseñadores web, la importancia de la interfaz de usuario está por encima de todo lo demás. Las interfaces gráficas de usuario simples son difíciles de encontrar y solo los diseñadores más creativos han encontrado soluciones de trabajo.
Sin embargo, hay muchos recursos gratuitos pero de calidad disponibles para que los pruebe su diseñador web. Estos kits de GUI están diseñados principalmente para Adobe Photoshop o Fireworks, donde puede mover elementos y exportarlos como archivos de imagen planos..
Los iconos son un recurso muy útil para tener. Los diseñadores crean conjuntos gratuitos y los ofrecen en línea con más frecuencia que nunca. Uno de estos sitios web Glyphish tiene una muestra de iconos gratuitos y profesionales. Estos diseños se basan en un solo tema para ser utilizado en plantillas móviles y diseños de aplicaciones.
Nuestra colección de plantillas de creación de prototipos para dispositivos móviles será de gran ayuda para usted en el viaje de desarrollo de aplicaciones y sitios web. No debe comenzar a codificar hasta que tenga una interfaz gráfica sólida y estos kits web lo ayudarán a comenzar por el camino correcto.
Kit de GUI para iOS 5
iPhone UI elementos vectoriales
Kit de iconos de la aplicación para iPhone
Imanes de alambre (kit de bricolaje)
Interfaz de Android GUI
