Cómo construir un sitio anclado en menos de

Por Justin Garrett

Cómo construir un sitio anclado en menos de 5 minutos

Introducción: ¿por qué construir con anclado?

Internet Explorer 9 presentó características de Sitios Anclados tales como favicons, notificaciones, Listas de navegación, y barras de herramientas con miniaturas. Estas herramientas le dan la posibilidad de extender su sitio web fuera del explorador y hacerlo más como una aplicación nativa de Windows. El anclado pone su sitio en un lugar bien visible desde el que 87% de los usuarios arrancan sus aplicaciones en la barra de tareas de Windows. El resultado es que usted recibe, en promedio, un 50% más de tráfico en el sitio e involucramiento de los usuarios que anclan.

A continuación encontrará algunos ejemplos:

  • Gilt (compras) — visitas 39% más frecuentes, agregó 160% más artículos al carrito de compras, completó 45% más ventas
  • hi5 (juegos sociales) — responden a 200% más solicitudes sociales (como amigos, juegos, notificaciones)
  • Business Insider (noticias) — lectura de 57% más páginas, se invirtió 95% más tiempo en el sitio
  • Flixster (entretenimiento en medios) — lectura de 34% más páginas, se invirtió 57% más tiempo en el sitio
  • Huffington Post (noticias) — se invirtió 49% más tiempo en el sitio
  • The Killers (música) — lectura de 65% más páginas, se invirtió 103% más tiempo en el sitio
  • DocStoc (compartición de docs) — se vieron 229% más páginas y 650% más de probabilidades de buscar documentos

Cómo lograr un retorno de inversión para su sitio

Puede incrementar su tráfico (y sus negocios en línea) utilizando Sitios Anclados. Es fácil comenzar en alrededor de 5 minutos utilizando BuildMyPinnedSite.com y PinMyWebsite.com. Pensamos en esta decisión para desarrollar un retorno de inversión para su sitio, cuando con nuevas características, los desarrolladores obtienen herramientas que innovan en la web:

  • Valor por Usuario – Cree convincentes experiencias en el sitio que logren conseguir compromiso y lealtad. Con base en nuestros datos de telemetría, sabemos que los usuarios visitarán un sitio anclado, en promedio, 30 veces al mes . Lo que representa más del 40% de las visitas de un usuario a todos los sitios de la web al mes. Más de 12.000 sitios en primer lugar de búsquedas llegando a 1000 millones de usuarios , como Facebook, Yahoo, y ESPN lo han logrado; WordPress.com hizo que el anclado fuera posible para su red de más de 20 millones de blogs.
  • Número de usuarios que visitan – - llegar a millones de usuarios en una creciente plataforma como IE9 y Windows 7, que tiene más de un 25% de la cuota de los Estados Unidos y el 18% de todo el mundo. Puede utilizar estas herramientas para atraer nuevos clientes con sus experiencias a través de la promoción, ofertas, y el descubrimiento de las funciones.
  • Costo de implementación – será fácil de diseñar, construir, probar y mantener en una plataforma estable. Debe ser medido en minutos u horas, no días.

El costo de implementación es una parte clave de su decisión de desarrollo. Está únicamente limitado por el número de horas en un día, su creatividad y las herramientas que tiene que utilizar (como marcos y bibliotecas). También hay otras prioridades competitivas a considerar como una página de último diseño, motor de contenido, características del explorador, versión, tecnología o soporte ampliado para el creciente número de dispositivos como los teléfonos móviles. Cada una de las características ya es de alta prioridad, por lo que el costo de diseño, construcción, prueba y mantenimiento es crítico.

Las características de los sitios ampliado están diseñadas para ser una implementación de bajo costo basada en su sitio web si ya se ha construido, pero no para una plataforma totalmente nueva. Hemos aprendido algunas de las mejores prácticas de los socios y desarrolladores que pueden hacer que sea más fácil para usted construir el suyo:

Si tiene 5 minutos… (conserve la simplicidad)

El mayor beneficio proviene de su sitio cuando tiene un favicon de alta resolución y una Lista de Navegación. Utilice las nuevas funciones de PinMyWebsite.com para mejorar su sitio sin tocar nada de código. Si usted es titular de un sitio o un diseñador, puede importar su logotipo del sitio y completar el formulario y dar sólo una línea de código en su equipo de desarrollo. El proceso es similar a esto:

Paso 1: Utilice X-Icon Editor al igual que The Killers

Paso 2: Cree sus Listas de navegación usando el asistente de PinMyWebsite.com

Paso 3: Agregar algunas características avanzadas como su blog feed y notificaciones

Paso 4: Pegue el código

Paso 5: Vea las bondades

Antes: Su sitio estaba enterrado bajo el logotipo de Internet Explorer como todos los demás sitios.

Después: Su sitio puede ser anclado a la barra de tareas de Windows para tener acceso con un clic. Un clic del botón derecho proporciona nuevas formas para que los usuarios profundicen en el contenido de tu sitio.

Si tiene una hora… (hay muchas opciones)

Usted es un desarrollador y es posible que desee opciones que vayan de acuerdo a como programa y los marcos que utiliza. Quiere algunas opciones que sean más personalizables para su diseño de sitio y fáciles de probar:

1. Use metadatos HTML – normalmente se necesitan menos de 15 líneas de código. Use el el fragmento de código en BuildMyPinnedSite o revise la guía MSDN sobre anclado de metadatos

  • Nombre del Sitio – este aparece cuando el usuario pasa el ratón por encima de la barra de tareas
  • Tip de herramientas – este aparece cuando el usuario sitúa el ratón por encima del menú inicio o en el escritorio
  • Dirección URL de inicio – se puede determinar dónde va a iniciar siempre el sitio anclado, como una página principal
  • Tamaño de la ventana – puede especificar el tamaño de la ventana
  • Navegación en Color – haga que el navegador luzca como su sitio
  • La listas de navegación estáticas – adentran a los usuarios cada vez más en su sitio

2. Utilice jQuery – hágalo todo con el plugin pinify de jQuery en un solo paso. El código sólo se ejecuta cuando los usuarios navegan con IE9 y Windows 7, ahora no hay ningún impacto en el rendimiento del sitio para los usuarios de otros navegadores. El plug-in es también una manera más limpia para probar y mejorar su sitio en muchos navegadores.

Si tiene un día… (una experiencia única)

Quieres hacer algo que realmente aproveche las características de anclado (y que cree una nueva experiencia única para sus usuarios). Se tarda un poco más de tiempo en construir su sitio pero ahora tiene la capacidad de hacerlo que se sienta como una aplicación nativa. Revise varias de las ideas y el código en BuildMyPinnedSite.com que más se parezcan a su sitio:

Hemos recopilado algunas de las mejores ideas de los socios y los desarrolladores. Comparten sus opiniones respecto a lo que debe tener presente al trabajar en su sitio:

Paso 1: Convierta una vieja idea en una nueva

Empiece por evaluar lo que ya tiene en la página web. Ya sabe lo que sus usuarios hacen más a menudo. Explore alternativas y decida qué es lo más valioso para ellos y para su sitio. Después de que un usuario ha anclado el sitio, el valor de las funciones como las notificaciones y listas de navegación dinámicas reside en que pueden llevar al usuario hacia la experiencia basada en lo que usted diseñe.

Ideas de juegos en redes sociales

Veamos un ejemplo de un sitio de juegos en redes sociales. Si consigue que los usuarios interactúen socialmente entre sí, al final esto se traduce en vistas de anuncios. Eso difiere mucho de un modelo de sitio de compras o subastas, en el que las compras en si son mucho más importantes. Por lo tanto, si un sitio web ya está creado para aprovechar las ventajas de cómo un usuario se traduce en valor, su Sitio Anclado debería hacer lo mismo.

Un sitio de juegos en redes sociales puede configurarse de tres formas diferentes (con diferentes objetivos) para optimizar el potencial de Sitios Anclados:

  1. Estatus en el juego – muestran lo que está pasando en el juego sin que usted las controle
  2. Interacción social – alientan respuesta social y compras dentro del juego
  3. Estatus / Rango Personal – aumentar la fidelidad al mostrar lo que han logrado y lo que sigue

hi5 construyo su experiencia de juego social para maximizar la oportunidad de interacción social. Puede apreciar como se tradujo la idea en diseño a continuación.

Ideas para sitio financiero

Los sitios Web de Banca y Finanzas se centran principalmente en la creación de una forma cómoda para que sus clientes lleven a cabo una transacción. También podrían estar interesados en entregar nuevos servicios o promociones. Conceptualmente, se podría ampliar su experiencia de Sitios Anclados de estas formas:

  1. Notificaciones – Configure recordatorios e informe a los usuarios de la actividad (como saldo bajo, cobros, actividad)
  2. Promociones – Muestre la forma en que los usuarios podrían ahorrar dinero a través de ofertas
  3. Estado de la cuenta – muestra los saldos o cambios (probablemente después de un inicio de sesión para proteger la seguridad)

Idea de sitio de viajes

Los sitios Web de viajes capturan la atención del usuario al destacar hermosos destinos con grandes ofertas. Similar a las compras, la conversión de compras es la máxima prioridad, pero dado que la planificación de vacaciones es compleja, queremos hacerla lo más fácil posible:

  1. Su perfil – Vea su itinerarios, viajes, saldo de cuenta/kilometraje o preferencias de viaje
  2. Los destinos más solicitados – Cree ofertas temáticas o específicas por destino
  3. Ofertas específicas – de viaje - El usuario ya ha reservado un viaje. Ahora puede personalizar las ofertas.

Estas son algunas de nuestras ideas y otras que hemos captado escuchando lo que es posible. Vea todas en BuildMyPinnedSite.com. Piense en la conjunción de la experiencia actual de web con lo que desea que los usuarios hagan más a menudo. Ese debería ser el diseño que probablemente brindara mayor beneficio y es el más fácil de desarrollar.

Paso 2: Construir una nueva experiencia a partir de una anterior

Conecte las características de Sitio Anclado que usted desea (como listas de exploración dinámicas o notificaciones) utilizando el código que ya tiene a través de JavaScript. Los Sitios Anclados requieren muy poco desarrollo para ampliar la página original.


Tomemos un sitio de noticias, por ejemplo Huffington Post. Que usa JavaScript para publicar noticias que se producen en su sitio web cada 15 minutos. La actualización se produce automáticamente cuando los editores quieren publicar sin la ayuda del programador. Dado que los Sitios Anclados también usan JavaScript, se refieren al mismo código para crear las Listas de navegación dinámicas. Debido a que el sitio web ya incluye la fecha, las palabras clave y enlaces, los desarrolladores del sitio podrían referenciar este código y extenderlo a las Listas de navegación. El resultado fue un diseño minimalista que amplió su visión de noticias personalizadas relevantes.

Usted puede aprender todo acerca de cómo los Sitios Anclados utilizan JavaScript con ejemplos de código aquí.

Conclusión

Los Sitios Anclados son características que le dan la posibilidad de extender su sitio web fuera del explorador y hacerla más como una aplicación nativa de Windows. Esto es parte de nuestros enfoque sitios en el centro para Internet Explorer 9. Es una oportunidad para obtener un retorno de inversión con el que los sitios obtienen en promedio un 50% más participación de los usuarios que anclan. El costo de implementación también es bajo. Dado que IE9 en Windows 7 tiene más del 25% de la cuota de los Estados Unidos y el 18% de todo el mundo, los millones de usuarios que anclan sigue creciendo. Decida qué es lo que funciona mejor en su sitio y a comparta con nosotros sus ideas.

Vínculos relacionados

  • MSDN Pinned Sites: Aprenda más acerca de estas características y comience a desarrollar
  • BuildMyPinnedSite: Consiga ideas de anclado y código en 5 minutos
  • PinMyWebsite: Use un asistente basado en formularios asistente para generar código JavaScript para anclar su sitio
  • IE prueba Unidad: Pruebe las demostraciones de Sitios Anclados y los códigos de ejemplo
  • @IE en Twitter: Obtenga respuesta a sus preguntas hoy
  • Explorando IE Blog: Vea ejemplos de grandes experiencias y guías para el desarrollador
  • Belleza de la Web: Navegue en una galería de sitios y características de IE9

Deje un comentario...


Videos presentados

Otros recursos

Recursos HTML5 recientes

Temas de HTML5 en Slashdot

Webcasts presentados