Había una vez, a una hora de distancia de donde vivo actualmente, un diseñador web que amaba sus composiciones de Photoshop y sus diseños de ancho fijo. Y bueno, no quiero estropear el final, pero ese diseñador era yo.
Luego, mientras me ocupaba de mi propio negocio, la comunidad creativa basada en la web se volvió loca por este nuevo concepto llamado "diseño receptivo". Como haría cualquier profesional joven, de ojos brillantes y cola tupida, investigué. Después de todo, lo más nuevo y lo último siempre debe tener al menos un vistazo.
Lo que descubrí, sin embargo, me dejó consternado. Una malvada mente maestra llamada Ethan Marcotte había desatado una plan cobarde para hacer que los diseñadores web trabajen más! Su libro dejó a la gente despotricando y delirando sobre cómo necesitamos "considerar a los usuarios de dispositivos móviles" y "hacer que nuestros sitios web trabajen en tantas plataformas como sea posible" ... los paganos.
Por supuesto, me resistí todo lo que pude. Luché duro y valientemente contra esta marea de buen sentido y negocios inteligentes; pero fue todo por nada. Luego, recurrí a excusas: "¡Pero no tengo ningún dispositivo móvil para probar!" Y eso, querido lector, es el punto. Resulta que no necesitas absolutamente uno.
Con el tiempo, he llegado a unas pautas básicas que, en caso de que se encuentre sin un teléfono móvil o una tableta, le ayudarán a diseñar sitios web que hagan que las cosas se vean bien en la mayoría de los navegadores móviles de todos modos.
... estás construyendo algo más grande que un pequeño sitio web basado en contenido. Los sitios web grandes y los sitios impulsados por aplicaciones definitivamente deberían probarse en plataformas móviles reales. Quiero decir, seguro, probablemente podrías fingir, pero no lo aconsejaría.
Cuando trabajas con variables desconocidas, tu mejor opción es mantener las cosas estúpidamente simples. Sí, estoy invocando la regla de KISS casi cliché, porque funciona.
Sin un estante lleno de teléfonos inteligentes, etc., debe confiar en lo que otras personas saben. Afortunadamente, se ha dedicado mucho tiempo y energía a examinar las capacidades de los navegadores móviles más populares que existen y cómo se comparan entre sí.
Averigüe cuál es su público objetivo y luego descubra qué tipo de navegadores están usando. Como siempre, Google es tu amigo. Entonces, todo lo que tienes que hacer es diseñar para las estadísticas.
Si la mayoría de su mercado objetivo móvil usa Android / iOS de una forma u otra, ¡está de enhorabuena! Sus navegadores predeterminados (y las alternativas más populares, como Firefox) son modernos en su mayor parte. Técnicas de diseño avanzadas, efectos básicos de CSS3, jQuery ... probablemente todo se procesará razonablemente bien.
Sin embargo, si su público objetivo usa otras plataformas, deberá hacer más investigaciones específicas sobre ellas y descubrir qué pueden y qué no pueden hacer.
Ahora, ¿qué haces si tienes poca o ninguna información sobre tus usuarios? Intenta por lo menos descubrir dónde están. La mayoría de los sitios web tienen, al menos, una región general de la que provienen la mayoría de sus usuarios. Obtén las estadísticas de esa región.
Si falla todo eso, diseñe para el peor de los casos.
Para hacer su trabajo un poco más fácil, encontré un sitio web con una comparación bastante detallada de lo que los navegadores móviles más populares hacen y no admiten. Compruébalo en mobilehtml5.org .
Y, por supuesto, está el siempre popular caniuse.com
Sé que algunos diseñadores juran al crear código personalizado específico para cada proyecto, pero cuando trabajas a ciegas, por así decirlo, reinventar la rueda no es una opción práctica. Los marcos que ya han sido probados en plataformas móviles eliminan las conjeturas del proceso.
La conjetura es mala. Evítalo.
Ahora, obviamente, no he probado o probado personalmente cada marco, así que tendrás que encontrar uno que haga lo que quieres que haga e investigarlo, comparándolo con las capacidades de tu plataforma móvil deseada. Aún así, hay algunos con los que podrías comenzar:
Estos son los que probablemente puedas nombrar de la parte superior de tu cabeza. Se caracterizan por su gran complejidad. Traen los sistemas de diseño, los elementos de la interfaz de usuario y los complementos de jQuery juntos en un paquete potente.
Los más famosos de estos son Oreja y Fundación . No me molestaré en compararlos aquí, así que adelante y busque "Bootstrap vs. Foundation" en Google si necesita más detalles. Todo lo que necesita saber por ahora es que en cada marco, cada componente ha sido ampliamente probado por una base de admiradores bastante grande y está listo para dispositivos móviles.
Estos no intentan hacer todo por ti, sino que simplemente te dan lo suficiente para comenzar. Esto hace que la personalización de las cosas sea un poco más fácil, pero la creación y / o el estilo de los elementos más complejos de UI depende de usted.
Esta categoría incluye Esqueleto , MENOS Marco 4 y así…
Esta es en realidad mi categoría favorita personal. Prefiero comenzar con una pantalla en blanco y un sistema de diseño listo, lo que me permite crear el tipo de sitio web que quiero sin tener que sobreescribir una gran cantidad de CSS, o intentar extraer partes específicas de un marco determinado.
Estos marcos, en su mayoría, no parecen preocuparse por el diseño o la estructura de la página. Están diseñados para proporcionar una manera fácil de agregar elementos de interfaz de aplicaciones sofisticadas y compatibles con dispositivos móviles (léase: widgets).
Solo he probado uno, pero mi investigación dice que los tres mejores (o al menos, más populares) marcos en esta categoría son jQuery Mobile , KendoUI y Wijmo .
Resulta que la accesibilidad no es solo para los daltónicos o los completamente ciegos. Muchos de los navegadores móviles más antiguos tienen capacidades tan limitadas que es casi como navegar con todos los CSS y Javascript desactivados.
Su mejor opción, en este caso, es asegurarse de que su sitio web se pueda utilizar en estas condiciones. Desactive todas esas cosas bonitas y asegúrese de que aún sea posible que los usuarios logren los objetivos del sitio web sin ellas.
Por lo general, los emuladores de dispositivo no son cien por ciento precisos, pero puede probar las cosas más importantes, como el diseño, etc. Los errores que he encontrado son a menudo cosas más pequeñas, como las fuentes web que no se procesan. No te preocupes, deberían funcionar bien en el hardware real.
Pero, ¿qué emuladores deberías estar usando?
Éste funciona un poco lento, pero funciona como un encanto. Tienes que descargar todo el kit de desarrollo, pero vale la pena tener un programa que imita no solo el navegador predeterminado de Android, sino todo el sistema operativo. Además, puede probar su sitio en una variedad de "dispositivos" virtuales.
Otro eso funciona básicamente como se anuncia. Lo descargas, escoges tu "dispositivo" y listo.
Firefox tiene varias opciones para probar tu contenido móvil. El primero es un emulador simple que imita la funcionalidad de renderizado del proyecto móvil de Mozilla Firefox, nombre clave: Fennec.
No es demasiado complicado, ya que le proporciona una ventana simple y de tamaño variable, por lo que le corresponde a usted configurar manualmente el tamaño de pantalla que desea probar.
los segunda opción es un complemento para la versión de escritorio de Firefox. Apodado Firefox OS Simulator, le ofrece una plataforma completa para jugar, no solo el navegador (al igual que el SDK de Android).
No pude probar este emulador , ya que requiere la instalación de un SDK muy grande, y la instalación fue interceptada, al menos para mí. Aún así, está disponible para que lo pruebe a su propia discreción.
Blackberry ofrece una serie de simuladores para BB10. Tal vez soy yo, pero no he tenido mucho éxito al ejecutar ninguno de ellos. Me encantaría saber de alguien que logre que funcionen.
Por último, pero ciertamente no menos importante, Apple proporciona una simulador gratuito de iOS que se puede usar para probar dispositivos Apple como parte de Xcode. Desafortunadamente, como es parte de Xcode, solo es Mac.
Si tienes el presupuesto (o puedes probar muy rápido, ya que su tiempo libre es limitado en el tiempo) no puedes equivocarte demasiado con BrowserStack . Le permitirán probar en muchos escritorios y una gran variedad de teléfonos móviles. No tan receptivo como el real, te mostrarán problemas con cosas como el diseño.
Los navegadores móviles tienden a jugar con la configuración de zoom, o al menos mi experiencia ha sido. Si desea que su sitio web se vea como lo hace cuando reduce la ventana de su navegador a tamaños móviles, use esta hermosa pieza de HTML en el encabezado de su documento:
Permítanme reformular eso: el minimalismo oscila en el móvil. La estética minimalista se adapta bien a los tamaños de pantalla más pequeños con menos ajustes y ajustes, ahorrándome mucho tiempo. Tal vez esto parezca algo obvio para algunos de ustedes, pero no puedo enfatizar lo suficiente.
Este collage de información es solo la punta del iceberg, por supuesto, y no tiene rival para probar realmente sus sitios web en un hardware móvil real, pero debería permitirle comenzar, y con suerte ganar lo suficiente del diseño móvil para permitirse el laboratorio del dispositivo. tan merecidamente.
Imagen / miniatura destacada, imagen de dispositivo móvil a través de Shutterstock.