Share
Ha pasado casi un año desde que la tableta de Apple, el iPad, fue lanzada a multitudes de amantes de los gadgets. Steve Jobs realizó una muy apreciada visita a San Francisco recientemente para presentar la segunda generación de este dispositivo en medio de un barco cargado de tabletas con Android, como Xoom de Motorola y Galaxy Tab de Samsung. Estos dispositivos están llegando a las manos de millones de usuarios y se están convirtiendo rápidamente en dispositivos con un gran potencial de navegación..
En un artículo anterior aquí en Webdesigntuts +, discutimos el tema del "nuevo pliegue" y cómo la ola de nuevos dispositivos (desde teléfonos móviles a tabletas y televisores de alta definición) ha hecho un hueco en la noción de un entorno de pantalla única que los diseñadores web pueden plan para.
En el lado de la computadora de escritorio / computadora portátil (también conocido como PC), los monitores comenzaron a aumentar significativamente hace algunos años. y el diseño web comenzó a reflejar esto en 2009-2010 con grandes diseños de paisajes, imágenes de gran formato y fondos con texturas ricas. Podemos llamar a este movimiento la "ampliación" del diseño web para la pantalla grande..
Nota: A los efectos de este artículo, vamos a referirnos a todas las computadoras de escritorio que tienen monitores dedicados (ya saben, esos grandes gigantes que se sientan en los escritorios de las personas) como PC. Sí, incluso las computadoras de escritorio de la marca Apple se llamarán "PC" mientras dure este artículo. Esta bien, puedes respirar ahora.
Sin embargo, desde principios de 2010, la diversidad de pantallas también comenzó descendiendo proceso. Los fabricantes de dispositivos comenzaron a incorporar una gran cantidad de nuevas resoluciones de pantalla en la mezcla, la mayoría de ellas más pequeñas. Como vimos con la tendencia cuando los monitores se hicieron grandes, también vemos una tendencia similar para estos nuevos dispositivos más pequeños; Como tal, el diseño web ha cambiado significativamente, ya que los nuevos tamaños de pantalla con nuevos métodos de entrada se están convirtiendo radicalmente en actores principales en las fuerzas impulsoras de las tendencias de diseño web.
En este artículo analizaremos algunos de los cambios más importantes que los diseñadores web han tenido que hacer para obtener compatibilidad con la tableta y cómo puede hacer lo mismo. También veremos algunos ejemplos excelentes de estos sitios amigables con "tabletas".
Consigamos uno de los puntos evidentes de la experiencia del usuario: cuando navegas en una pantalla táctil, debes usar un dedo. Al navegar en una computadora, uno puede tener la precisión de un mouse.
La principal diferencia en el diseño de un experiencia útil Para cualquiera de las dos plataformas es proporcional. ¿La navegación en una tableta debe ser más fácil y más grande que en una PC? lo que significa que los diseñadores deben llegar a ese "punto medio" (ser lo suficientemente grande como para navegar fácilmente en una tableta, pero no demasiado grande para que parezca una tontería en una computadora) o tener un sitio separado dedicado a la tableta que use una hoja de estilo diferente (e incluso una diseño) en conjunto.
¿La mayoría de los usuarios de PC tienen una de las pocas resoluciones comunes en monitores de alrededor de 15? - ¿24? Algunas tienen venas mucho más grandes, pero muy pocas tienen más pequeñas. El iPad, en marcado contraste, tiene un 9.7? La pantalla a una resolución de 1024x768 y la mayoría de las tabletas Android vienen en 7?.
Sin embargo, las resoluciones 1024px no son extremadamente infrecuentes para tabletas o PC. La diferencia real que debemos tener en cuenta es la ?de cualquier manera es la manera correcta? Actitud de las tabletas con acelerómetros incorporados. El iPad maneja este cambio bastante bien reduciendo los diseños de ancho fijo para adaptarse al ancho de 768px o, naturalmente, reajustar los de ancho fluido para que coincidan con las nuevas dimensiones.
Aún así, el diseñador web promedio tiene un problema único de no poder predecir el entorno en el que alguien va a ver su sitio a través de.
La pregunta es: ¿cuál es la solución a este problema?? Métodos de diseño adaptativo. son la solución principal ya que los desarrolladores emplean CSS adaptable para mostrar solo si un dispositivo es de una determinada marca, navegador o resolución.
El problema es que no hay una resolución adicional agregada a la mezcla. Hay una plétora de ellos. Los métodos de CSS / JavaScript adaptativos funcionan bien para algunos dispositivos, pero es un método engorroso que dudo que la mayoría de los desarrolladores quieran emplear. Quiero decir, ¿desearía diseñar su sitio web veinte veces antes del lanzamiento para todos los diferentes dispositivos disponibles? Sé que no lo haría.
Como tal, lo más probable es que los diseños fluidos se vuelvan más comunes también, ya que se adaptan automáticamente a las nuevas resoluciones que se les presentan sin la molesta necesidad de múltiples hojas de estilo.
Como dijimos anteriormente, los acelerómetros incorporados significan que la pantalla de una tableta no tiene una resolución definida. Gracias a su resolución cambiante con poco esfuerzo y los nuevos mecanismos de desplazamiento inercial, no existe un pliegue definitivo..
Que es el pliegue? El pliegue es básicamente el punto de corte entre lo que el usuario puede ver y lo que no puede antes de desplazarse. Este fue un término derivado de la idea de periódico doblado y se ha utilizado en el diseño web como una definición de visibilidad. Los usuarios pasan un juicio sobre lo que pueden ver y qué tan rápido lo perciben.
Sin embargo, el problema es que hay demasiados navegadores para considerar. La siguiente tabla se usó en el artículo de Shaun Cronin en el pliegue para mostrar la amplia gama de resoluciones que se utilizan para visitar WebDesignTuts +. Como puede ver, hay más navegadores que posibles de considerar en un flujo de trabajo normal, y los dispositivos móviles han contribuido al número.
El problema radica en que el pliegue es adaptable en cada dispositivo a medida que el dispositivo gira. Es una historia muy similar a la anterior en fluidos y anchos..
Probablemente has escuchado: a Apple no le gusta Flash. Ninguno de los dispositivos con iOS de Apple tiene Adobe Flash incorporado, ni es posible instalarlo. Esto significa que partes de la web son simplemente incompatibles con un iPad.
Hay que decir que el uso generalizado de los sitios web de Flash es poco común hoy en día, pero los elementos del sitio web todavía utilizan el estándar. Muchos videos en sitios web semi-populares, por ejemplo, no están disponibles en el iPad. Sin embargo, los sitios de videos más populares, como YouTube, están integrando lentamente HTML5. Esta es la solución preferida de Apple para Adobe Flash. La quinta revisión de HTML trae una selección de nuevos elementos que pueden ofrecerse como alternativas a los usos principales de Flash, como la distribución de audio y video. Y gracias a la implementación de sitios como YouTube y CNET, está claro que esta transición está ocurriendo.
La mayoría de las personas pueden sacudirse esto como no es necesario. Pero después de solo un año en manos públicas, el iPad ya ha ganado una gran participación en el mercado de navegación, por lo que es cada vez más importante que considerar a los usuarios de IE 6.
?Es casi como si el tamaño no importara en las tabletas..?
El iPad ejecuta el navegador Safari con webkit, en forma móvil. Como vimos en la sección anterior, Safari para iPad es muy compatible con HTML5, pero cae en algunas áreas. La tipografía es una cosa, aunque el iPad admite la representación SVG, no es compatible con otros servicios de representación de texto que utilizan Flash de Adobe o incluso Cufon.
Las pseudo clases populares no se pueden usar para crear efectos como pasar sobre los enlaces debido a la falta de cursor.
Sin embargo, el iPad rompe las barreras entre el usuario y el contenido, ya que acercarse y alejarse es mucho más fácil. Es casi como si el tamaño no importara en las tabletas..
Diga adiós a las aplicaciones web: Alejémonos del ejemplo específico del iPad por un momento. En su lugar, veamos la imagen más grande. Hay cientos de miles de aplicaciones en la App Store, de las cuales más de 65,000 son específicas para iPad. Un número similar de aplicaciones está disponible en el mercado de Android (muchas de las cuales son aplicaciones copy-cat de las versiones de iApp). Si bien es obvio que no habrá una disminución de los sitios web, es muy posible que haya una disminución de aplicaciones basadas en web a cambio de aplicaciones que residen únicamente en un dispositivo.
¿Qué significa esto? Significa que la aplicación web que una vez usaste al navegar por un sitio web en particular probablemente desaparecerá o se volverá redundante; en su lugar habrá una aplicación real en tu dispositivo. Su navegador dejará de ser la principal forma de acceder a la información..
Diga adiós a la interfaz de usuario centrada en el ratón: Probablemente habrá un cambio de la navegación vertical de precisión a los tipos relajados e informales. Todas aquellas aplicaciones web que requieren la precisión de un cursor están siendo reemplazadas por contrapartes nativas que funcionan mucho más suavemente en una tableta. Pero para las marcas más pequeñas, existe una mayor posibilidad de que simplemente rediseñen su aplicación web para adaptarse mejor a las dimensiones de una tableta..
Las tabletas están introduciendo una categoría completamente nueva de dispositivos para que los diseñadores web consideren. Algunos solo están alcanzando el aumento en la búsqueda de teléfonos inteligentes y ahora tienen cinco o seis nuevas resoluciones a considerar. Los navegadores de estos dispositivos son ciertamente algo a tener en cuenta y mi predicción es que, en un año o dos, los sitios no tendrán una versión para iPad, sino que veremos sitios universales al igual que las aplicaciones..
Saluda a la interfaz de usuario de App-Centric: No voy a decir que el dedo será el nuevo factor de conducción en todo el diseño web porque, bueno, los ratones (¿ratones?) No irán a ningún lado pronto. Claro, en una generación o dos podríamos estar controlando sitios web con nuestros dedos, globos oculares e incluso ondas cerebrales. pero hasta entonces, el mouse / cursor seguirá siendo la herramienta principal que la mayoría de las personas interactúa con los sitios web..
Lo que diré en cambio es que los sitios web comenzarán a tomar cada vez más influencia de su diseño en el diseño de la aplicación; esto significa botones más grandes, tipografía más grande, uso significativo de gradientes y texturas, y diseños menos complicados. Sin más demora, veamos los elementos principales de los diseños efectivos de tabletas:
La mayoría de los puntos principales que vamos a presentar aquí se pueden resumir en una declaración brillante:
Si el diseño web es Lego, el diseño del iPad debe ser Duplo.
- Oliver Reichenstein
Si alguna vez has jugado con Legos (¡¿y el diseñador web no ?!), este mensaje seguramente llegará a casa. Diseñar para tabletas es un poco como diseñar papel cuadriculado para niños pequeños que usan esos lápices gigantes para dibujar, es decir, que quieres mantener la cosa simple y GRANDE.
Tipo pequeño (y me refiero al tipo de bitty itty que solíamos amar en 2005) no es legible en una tableta. Claro, ¿puedes hacer zoom? pero si la longitud de la línea es demasiado larga, el texto sigue siendo bastante difícil de leer a menos que vaya a desplazar cada línea de texto.
Del mismo modo, el texto grande también puede ser un apagón en las tabletas. El texto que es demasiado grande obliga a los usuarios a desplazarse más a menudo de lo que podrían necesitar. La respuesta es un texto que es "justo" como lo pueden poner los Ricitos de Oro. Sin embargo, esto no solo significa encontrar el tamaño de fuente perfecto; Significa encontrar la combinación perfecta de fuente, tamaño, altura de línea y longitud de línea..
Estoy seguro de que podremos dividirlo en un artículo completo en el futuro, pero por ahora, su guía debe ser crear un esquema de tipografía que sea fácil de leer y divertido de leer..
No hace falta decirlo, pero esos pequeños íconos de 16px por 16px no lo cortarán en una tableta cuando el dedo promedio puede hacer clic fácilmente en un espacio de aproximadamente 20px. Sin embargo, al igual que el tipo, esto no significa que los botones deban ser geniales para poder usarse. Los buenos botones deben ser fáciles de presionar con un dedo, pero no deben hacer sentir a los usuarios de PC como si estuvieran usando un mouse Playskool.
Hubo un período a mediados de la década del 2000 en el que los diseñadores comenzaron a usar texturas solo porque podían. Todo eso está bien, pero en realidad no alcanza una puntuación alta cuando se trata de usabilidad..
Cuáles son significativo texturas y degradados? En pocas palabras, son efectos visuales que enfatizan y apoyan la usabilidad de un sitio. Por ejemplo, un botón puede tener un gradiente sutil sobre él para que se vea "presionable". Una textura de fondo puede sentirse como fibra de carbono oscura para hacer que el primer plano salte más. Este es otro caso en el que podríamos escribir un artículo completo sobre este único tema, pero usar el sentido común. Si una textura o degradado no ofrece ningún valor significativo, probablemente pueda deshacerse de él..
Tendré cuidado con este porque los diseños "menos complicados" no significan menos columnas, menos variedad o menos grillas interesantes. Dicho esto, si alguna vez ha intentado usar el sistema backend de WordPress en un iPad, sabrá exactamente de qué estoy hablando. Los diseños complicados requieren que el usuario aumente constantemente la información en particular para poder leerla (y mucho menos usarla).
Mejores diseños significa un enfoque más atento al diseño de su sitio. Si su sitio no tiene una miniatura para cada publicación de blog, ¿no se moleste en intentar forzar un diseño basado en imágenes? y, a la inversa, si su sitio utiliza muchas imágenes, use un diseño que complemente ese lado de su contenido en lugar de tratar de ajustar siempre el extracto de 40 palabras al lado de cada imagen.
Diseños menos complicados significa deshacerse de los metadatos innecesarios que han llegado a saturar nuestros sitios hoy en día. en lugar de enumerar fecha, etiquetas, categorías, iconos de redes sociales, autor y cualquier otra cosa puede pensar, simplemente haga más espacio para lo que es realmente importante: su contenido central!
Ahora que sabemos qué hace que un sitio esté optimizado para tabletas, echemos un vistazo a un puñado de sitios que ya lo han hecho. Los sitios debajo de cada uno funcionan bien en un iPad, ya sea su uso en vertical u horizontal, o el uso de elementos HTML5.
Accentsconagua