Como construir um site fixo em menos de um di

by Justin Garrett

Como construir um site fixo em menos de um dia

Introdução: por que construir com a fixação?

O Internet Explorer 9 introduz recursos de Sites Fixos como favicons, notificações, listas de atalhos, e barras de ferramentas de miniaturas. Esses recursos ajudam a estender o site para fora do navegador e torná-lo mais parecido a uma aplicação nativa do Windows. A fixação põe o site em um lugar altamente visível, onde 87% dos usuários iniciam suas aplicações na barra de tarefas do Windows. Os sites fixados pelos usuários tem um aumento médio de 50% no tráfego e na utilização dos serviços

Veja alguns exemplos:

  • Gilt (compras) — aumento de 39% na frequência das visitas, 160% no número de itens adicionados ao carrinho e 45% no número de vendas realizadas
  • hi5 (jogos sociais) — aumento de 200% na quantidade de solicitações sociais (amigos, jogos, notificações) respondidas
  • Business Insider (notícias) — aumento de 57% no número de páginas lidas e 95% no tempo gasto pelos usuários no site
  • Flixster (entretenimento de mídia) — aumento de 34% no número de páginas lidas e 57% no tempo gasto pelos usuários no site
  • Huffington Post (notícias) — os usuários passam 49% mais tempo no site
  • The Killers (música) — aumento de 65% no número de páginas lidas e 103% no tempo gasto pelos usuários no site
  • DocStoc (compartilhamento de documentos) — aumento de 229% na quantidade de páginas visualizadas e 650% na probabilidade de pesquisa de documentos

Como aumentar o ROI em seu site

Você pode aumentar o tráfego (e seus negócios na web) usando os Sites Fixos. Aprenda em 5 minutos acessando BuildMyPinnedSite.com e andPinMyWebsite.com. É uma decisão que pode gerar ou aumentar o ROI (return on investment - retorno do investimento) do seu site. Os novos recursos ajudam o desenvolvedor a inovar na web:

  • Valor por usuário – Crie experiências agradáveis que estimulem a lealdade e a frequência das visitas do usuário ao site. Nossos dados de telemetria indicam que os usuários visitam um único site fixo, em média, 30 vezes por mês. Isso corresponde a mais de 40% das visitas de um usuário comum a todos os sites da web por mês. Mais de 12.000 sites grandes que alcançaram 1 bilhão de usuários, como Facebook, Yahoo, e ESPN usaram esse recurso; WordPress.com disponibilizou a fixação a uma rede de mais de 20 milhões de blogs.
  • Número de visitantes – Alcance milhões de usuários em plataformas como o IE9 e o Windows 7, que tem mais de 25% de participação no mercado dos EUA e 18% no mundo todo. Você pode usar essas ferramentas para trazer novos clientes para as suas experiências através de promoções, ofertas e descoberta de recursos.
  • CCusto da implementação – Facilidade para projetar, construir, testar e se manter em uma plataforma estável. Deve ser medido em minutos ou horas, não em dias

O custo de implementação é uma parte fundamental da sua decisão de desenvolvimento. Os únicos limites são o número de horas do dia, sua criatividade e as ferramentas que você possui (como estruturas e bibliotecas). Existem ainda outras prioridades a considerar, como o design das páginas mais recentes, o mecanismo de conteúdos, os recursos do navegador, a versão, a tecnologia e o suporte estendido a um número crescente de dispositivos (como celulares). Todos os recursos são de alta prioridade, portanto o custo é medido pelo design, pela construção e pelos testes, e a sustentação se torna essencial.

Os recursos de Sites Fixos foram projetados para possibilitar implementações de baixo custo com base em um site já construído, não em uma plataforma nova. Aprendemos algumas práticas com parceiros e desenvolvedores que podem facilitar ainda mais a construção:

Se você tiver 5 minutos... (prefira a simplicidade)

O site gera mais benefícios quando tem um favicon de alta resolução e uma lista de atalhos. Use os novos recursos do PinMyWebsite.com para aprimorar seu site sem mexer com código algum. Se você é proprietário ou designer de sites, basta importar o logotipo do seu site, preencher o formulário e fornecer uma única linha de código à sua equipe de desenvolvimento. O processo é assim:

Passo 1: Use o X-Icon Editor como o The Killers fez

Passo 2: Crie suas listas de atalhos usando o assistente disponível no PinMyWebsite.com

Passo 3: Adicione recursos avançados como blog feeds e notificações

Passo 4: Cole o código

Passo 5: Veja os resultados

Antes: Seu site está enterrado sob o logotipo do Internet Explorer, como todos os outros sites.

Depois: Seu site pode ser fixado à barra de tarefas do Windows e ser acessado com um só clique. Um clique com o botão direito mostra ao usuário novas formas de se aprofundar no conteúdo do seu site.

Se você tiver uma hora... (são muitas opções)

Os desenvolvedores querem opções que combinem com seus códigos e estruturas. Devem ser opções de design mais personalizáveis e fáceis de testar:

1. Use os Metadados HTML – Normalmente são menos de 15 linhas de código. Use o trecho de código disponível no BuildMyPinnedSite ou consulte o guia do MSDN sobre fixação de metadados.

  • Nome do site – aparece quando o usuário passa o mouse sobre o site na barra de tarefas
  • Dica de ferramenta – aparece quando o usuário passa o mouse sobre a área de trabalho ou o menu Iniciar
  • URL inicial – você pode determinar onde o Site Fixo será iniciado, como uma home page
  • Tamanho da janela – especifique o tamanho da janela
  • Cores da navegação – deixe o navegador com a mesma aparência do seu site
  • Listas de atalhos estáticas – faça o usuário se aprofundar no seu site

2. Use o jQuery – Faça tudo com o plug-in jQuery Pinify em um único passo. O código só é executado quando o usuário navega com o IE9 e o Windows 7, portanto não há impacto no desempenho do site para usuários de outros navegadores. O plug-in também é uma forma mais "limpa" de testar e aprimorar o site em vários navegadores.

Se você tiver um dia... (experiência única)

Você quer algo que realmente aproveite as vantagens da fixação (e crie uma experiência nova e única para seus usuários). Leva um pouco mais de tempo para construir, mas os recursos farão o site parecer uma aplicação nativa. Procure ideias e códigos no BuildMyPinnedSite.com que se pareçam mais com o seu site:

Reunimos algumas das melhores ideias de parceiros e desenvolvedores. Eles compartilham opiniões sobre o que deve ser enfatizado em cada site:

Passo 1: Transforme uma ideia antiga em uma ideia nova

Comece avaliando o que o site já tem. Você sabe o que os usuários fazem com mais frequência. Explore alternativas e decida o que é mais valioso para eles e para o site. Quando um usuário fixa o site, o valor de recursos como as notificações e as listas de atalhos dinâmicas aumenta muito, porque eles podem atrair o usuário para a experiência com base no seu design.

Ideias de jogos sociais

Vamos usar um exemplo de um site de jogos sociais. A interação social dos usuários em um site acaba gerando exibições de anúncios. É bem diferente de um site de compras ou leilões, onde a compra em si é muito mais importante. Então, se os sites já estão predeterminados a tirar proveito de como o usuário se converte em valor, seu Site Fixo deve fazer o mesmo.

Um site de jogos sociais pode ser configurado de três maneiras (com objetivos diferentes) para otimizar o potencial dos Sites Fixos:

  1. Status do jogo – Mostre o que está acontecendo no jogo e traga o usuário para dentro
  2. Interação social – Estimule as respostas sociais e as compras dentro dos jogos
  3. Status pessoal / Classificação – Construa lealdade mostrando o que você já alcançou e o que vem a seguir

O hi5 construiu uma experiência de jogos sociais para maximizar as oportunidades de interação social. Veja abaixo como a ideia foi transformada em design.

Ideias para sites financeiros

Sites de operações bancárias e financeiras se concentram em criar meios convenientes de realizar transações. Talvez se interessem também em oferecer novos serviços e promoções. Conceitualmente, podem estender sua experiência de Sites Fixos destas formas:

  1. Notificações – Configure lembretes e informe as atividades (taxas, saldo baixo, etc.) aos usuários
  2. Promoções – Mostre como o usuário pode economizar através das ofertas
  3. Status da conta Status – Mostre saldos e alterações (provavelmente após o logon, para proteger a segurança)

Ideias para sites de viagens

Os sites de viagens chamam a atenção do usuário destacando os destinos mais bonitos com bons negócios. A conversão para a compra é uma prioridade, mas como o planejamento de uma viagem é complexo, facilite o máximo possível:

  1. Seu perfil – Mostre itinerários, viagens, saldos de conta/milhagem e preferências de destinos do usuário
  2. Destinos especiais –Crie ofertas temáticas ou específicas para cada destino
  3. Ofertas específicas para uma viagem – Quando o usuário já reservou a viagem. Agora você pode personalizar as ofertas relacionadas.

Essas são algumas de nossas ideias e das que aprendemos ouvindo as possibilidades. Veja todas elas em BuildMyPinnedSite.com. Combine a experiência web atual com o que você quer que os usuários façam com mais frequência. Provavelmente é o design que gera mais benefícios e é mais simples de desenvolver.

Passo 2: Construa uma nova experiência a partir de uma antiga

Conecte os recursos de Sites Fixos que quiser (como listas de atalhos dinâmicas ou notificações) usando o código que você já tem através do JavaScript. Os Sites Fixos requerem pouquíssimo desenvolvimento para estender o site original.


Vejamos o caso de um site de notícias, por exemplo: Huffington Post. Eles usam o JavaScript para publicar artigos de última hora no site a cada 15 minutos. As atualizações ocorrem automaticamente quando os editores querem publicar sem suporte dos desenvolvedores. Como os Sites Fixos também usam JavaScript, se basearam no mesmo código para criar as listas de atalhos dinâmicas. O site já expõe dados, palavras-chave e links, então os desenvolvedores puderam usar esse código e estendê-lo para a lista de atalhos. Com um esforço mínimo no design, eles expandiram sua visão de notícias relevantes e personalizadas.

Saiba como os Sites Fixos usam o JavaScript com exemplos de código aqui.

Conclusão

Os recursos de Sites Fixos ajudam a estender o site para fora do navegador e torná-lo mais parecido a uma aplicação nativa do Windows. Fazem parte da abordagem de sites em foco do Internet Explorer 9. É uma oportunidade de obter retorno do investimento, já que os sites fixados pelos usuários têm um aumento médio de 50% na quantidade de vendas/contratações de serviços. O custo da implementação também é baixo. Como o IE9 no Windows 7 tem uma participação de mais de 25% no mercado dos EUA e 18% no mundo todo, já são milhões de usuários fixando os sites, e o número continua crescendo. Decida o que funciona melhor no seu site e compartilhe suas ideias conosco.

Links relacionados

  • Sites Fixos no MSDN: Saiba mais sobre esses recursos e comece a desenvolver
  • BuildMyPinnedSite: Encontre códigos e ideias para a fixação em 5 minutos
  • PinMyWebsite: Use um assistente baseado em formulários para gerar o código JavaScript para o seu site fixo
  • IE Test Drive: Veja demonstrações de sites fixos e exemplos de código
  • @IE on Twitter: Tire suas dúvidas agora mesmo
  • Exploring IE Blog: Veja exemplos de ótimas experiências de sites e instruções passo-a-passo de desenvolvedores
  • Beauty of the Web: Navegue em uma galeria de sites e recursos do IE9

Deixe um comentário...


Outros recursos em destaque

Tweets recentes sobre o HTML5

Tópicos do HTML5 no Slashdot