A Web para dispositivos móveis deve simplesmente funcionar para todos
Atualização de 4/8/2014 - Os desenvolvedores agora podem visualizar essas atualizações ingressando no Windows Phone Preview para desenvolvedores ou baixando o Emulador de Atualização do Windows Phone 8.1. Os detalhes sobre as alterações de plataforma descritos nesta postagem podem ser encontrados no MSDN. Também publicamos uma atualização das práticas recomendadas sobre como atualizar sites adaptados para dar suporte aos padrões.
A Atualização do Windows Phone 8.1 inclui centenas de melhorias do Internet Explorer 11 que aumentam muito a compatibilidade com a Web para dispositivos móveis.
Com base em seus comentários, buscamos uma experiência da Web para usuários do IE consistente com o que está disponível em dispositivos iOS e Android, mesmo onde isso significava que estaríamos adicionando recursos de plataforma da Web fora do padrão. Acreditamos que esta seja uma abordagem mais pragmática para executar a Web para dispositivos móveis menos padronizada de hoje em dia.
Testamos mais de 500 dos principais sites da Web para dispositivos móveis e descobrimos que a atualização do IE11 aprimora a experiência em mais de 40% deles.
Por exemplo, se você visitasse www.twitter.com com o IE11, veria:
Windows Phone 8.1
Aqui está o que você vê no IE11 com a atualização, no Firefox OS e em um iPhone:
Atualização do Windows Phone 8.1
Firefox OS
iPhone com iOS7
Semelhantemente, se você visitar www.baidu.com com o IE11 e o Firefox OS, verá:
Windows Phone 8.1
Firefox OS
Aqui está o que você vê no IE11 com a atualização e em um iPhone:
Atualização do Windows Phone 8.1
iPhone com iOS7
Analisando os sites da Web mais populares
Ao contrário da Web para computadores desktop, em sua maioria baseada em padrões, muitas páginas da Web para dispositivos móveis modernas foram projetadas e criadas para o iOS e o iPhone. Isso faz com que os usuários de outros dispositivos frequentemente tenham uma experiência inadequada.
Há algumas semanas, falamos sobre nossa visão e prioridades para a Web. Acreditamos que "A Web deve simplesmente funcionar para todos: usuários, desenvolvedores e empresas". Começamos pesquisando o que seria preciso para fazer a Web para dispositivos móveis "simplesmente funcionar" para os nossos clientes.
Conforme investigamos os sites da Web para dispositivos móveis mais populares em todo o mundo, começamos a ver padrões comuns causando problemas. Era comum encontrarmos sites que usavam um código de detecção de navegador escrito precariamente, pois ofereciam a experiência de sites feitos para computadores desktop em um Windows Phone. Os sites para desktop tendem a ser maiores e mais lentos de carregar, o que aumenta o consumo do plano de dados de um usuário. Esses sites ficam com texto minúsculo e gasta-se muito tempo tentando ampliar e fazer movimento panorâmico para ler o conteúdo. Eles também esperam que você esteja usando um mouse, portanto, os menus e os formulários são difíceis de usar.
Quando o Windows Phone 8.1 chegou ao RTM, ele incluía o mesmo mecanismo de navegador do IE11, rápido e baseado em padrões, usado na versão para PC do IE. Nos últimos anos, temos falado sobre como fornecer a mesma marcação para todos os navegadores usando a detecção de recurso e menos degradação. Embora continuemos a ver sites para desktop quebrados e que não seguem essa orientação de vez em quando, a situação melhorou. Temos uma situação muito diferente na Web para dispositivo móvel. Muitos sites usam recursos por meio de um prefixo de fornecedor herdado específico sem suporte a uma versão padrão sem prefixo ou apenas dão suporte a prefixos de fornecedor de determinados dispositivos. Outros sites usam APIs proprietárias fora do padrão que funcionam apenas com o Safari ou o Chrome. Claro, também existem bugs ou recursos ausentes no IE que se tornaram particularmente aparentes em sites móveis projetados especificamente para os navegadores de nossos concorrentes.
Atualizando o Internet Explorer na Atualização do Windows Phone 8.1
Coletamos todos estes dados de compatibilidade e, em seguida, começamos a planejar quais alterações devemos fazer no IE. O restante desta postagem de blog discute algumas das alterações mais importantes e o motivo de as termos feito. Os problemas que afetam os sites da Web para dispositivos móveis se enquadram principalmente em cinco principais categorias:
- Detecção de navegador imprecisa que não reconhece o IE como um navegador móvel e oferece a experiência para desktop
- Uso de recursos prefixados de webkit antigos que foram substituídos por padrões
- Uso de recursos prefixados de webkit proprietários para os quais não há padrão
- Uso de recursos aos quais o IE não dá suporte sem fallback adequado
- Bugs de interoperabilidade e diferenças de implementação no IE
Alterando a cadeia de caracteres de agente de usuário
Um dos problemas mais significativos que vimos estava relacionado aos sites não detectarem que o IE no Windows Phone é um navegador móvel e, portanto, oferecer o conteúdo para desktop. Isso frequentemente resulta em sites exibidos com texto mínimo que você precisa ampliar para ler e, em seguida, fazer movimento panorâmico. Isso também significa frequentemente que mais dados sejam transmitidos por conexão de dados telefônica porque o conteúdo móvel não é otimizado. As imagens são grandes e muito mais anúncios são baixados e mostrados.
Existem muitas formas diferentes de os sites tentarem detectar se devem oferecer a experiência móvel. Aqui está uma verificação desse tipo que encontramos em um site real:
window.mobileCheck = function() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; }
Atualizamos a cadeia de caracteres de agente de usuário no IE no Windows Phone para aumentar o número de sites que ofereceriam corretamente o melhor conteúdo móvel. Isso continua a ser um padrão infeliz com o qual todos os navegadores devem lidar e a maioria dos desenvolvedores da Web têm que enfrentar. Por exemplo, existe uma discussão interessante desde 2006 em um bug de WebKit chamado o "Safari mente. Apresenta-se como Mozilla, Gecko e KHTML também." Quando lançamos o IE11 no desktop, adicionamos o token "como o Gecko" à cadeia de caracteres porque isso aprimorou significativamente a compatibilidade com os sites para desktop. Chrome e Opera que dizem ser como o Gecko e o Safari para serem compatíveis com o conteúdo da Web.
Visite www.hawaiianairlines.com com o IE11 e o Firefox OS e veja a experiência para desktop:
Windows Phone 8.1
Firefox OS
Aqui está o que você vê no IE11 com a atualização e em um iPhone:
Atualização do Windows Phone 8.1
iPhone com iOS7
Se você vista www.nytimes.com com o IE11 e o Firefox OS, também vê a experiência para desktop:
Windows Phone 8.1
Firefox OS
Aqui está o que você vê no IE11 com a atualização e em um iPhone:
Atualização do Windows Phone 8.1
iPhone com iOS7
Em geral, nosso conselho é desenvolver um site dinâmico que possa se adaptar aos recursos de dispositivos diferentes. Se você optar por criar uma experiência móvel específica, então, recomendamos procurar a subcadeia "móvel" na cadeia de caracteres de agente de usuário para determinar quando oferecer conteúdo otimizado móvel:
function isMobile() { return navigator.userAgent.toLowerCase().indexOf("mobile")>=0; }
Mapeando recursos prefixados de webkit herdados para implementação do IE
Depois de alterarmos a cadeia de caracteres de agente de usuário para que o IE receba o mesmo conteúdo que outros navegadores de telefone, poderíamos começar a analisar os problemas que estavam prejudicando as experiências móveis. O primeiro problema importante que identificamos foi que muitos sites móveis somente enviam conteúdo prefixado de webkit para gradientes CSS, flexbox, transições e animações. Esses são recursos a que o mecanismo baseado em padrões da Web do IE11 já dão suporte em sites com marcação de navegador cruzado. Como a Mozilla descobriu, a WebKitCSSMatrix é usada comumente em dispositivos móveis. O IE dá suporte à MSCSSMatrix. Muitos sites também usam window.orientation em vez do padrão emergente screen.orientation. O segundo problema que descobrimos é que os sites também usam frequentemente sintaxe antiga em seu código. Por exemplo, usar a sintaxe de gradiente antiga em vez da abordagem atualizada baseada em padrões.
Na Atualização do Windows Phone 8.1, adicionamos um mapeamento de APIs prefixadas de webkit ao suporte baseado em padrões que já faz parte do IE11. Isso significa que os sites que apenas enviam código WebKit são convertidos em código baseado em padrões conforme a página é carregada. Não estamos planejando dar suporte a todas as APIs prefixadas de webkit. Adicionamos mapeamentos para aquelas que são tão importantes em sites móveis que a Web não funcionará sem elas.
Se você visitar www.macys.com com o IE11, verá:
Windows Phone 8.1
Aqui você pode ver os gradientes exibidos corretamente no IE11 com a atualização e um iPhone:
Atualização do Windows Phone 8.1
iPhone com iOS7
Se você visitar www.answers.com com o IE11, verá:
Windows Phone 8.1
Aqui você pode ver o site exibido corretamente no IE11 com a atualização e um iPhone:
Atualização do Windows Phone 8.1
iPhone com iOS7
Adicionando suporte a recursos proprietários fora do padrão
Encontramos um pequeno número de recursos fora do padrão popularizados pela Apple no iPhone usados amplamente. Esses recursos não estão no momento em um controle de padrões, mas os navegadores que não dão suporte a eles não podem fornecer uma boa experiência para os sites principais na Web para dispositivo móvel. Um exemplo é -webkit-appearance, que permite que uma página modifique o estilo de um elemento para corresponder a aplicativos nativos. Como a Mozilla indica, "esse recurso não apenas é fora do padrão, mas seu comportamento muda de um navegador para outro." Infelizmente, sem algum nível de suporte a esses recursos proprietários fora do padrão, os sites são mais difíceis de usar.
Novos recursos com suporte no IE
Existem vários recursos baseados em padrão os quais o IE11 não dava suporte que são usados de vez em quando em sites para desktop, mas são usadas comumente na Web para dispositivo móvel. Quando fizemos o IE11 receber mais conteúdo móvel, determinamos que precisaríamos adicionar esses recursos. Por exemplo, window.locationbar é definido em HTML5 mas raramente usado em sites para desktop. Priorizamos a implementação de vários novos recursos com base nos sites móveis que eles habilitam.
Um dos maiores problemas relacionados a APIs que afetam a compatibilidade com sites móveis é o suporte a toque. No IE10, lançamos o suporte a Eventos de Ponteiro, que agora é uma Recomendação de Candidato no W3C, e atualizamos a implementação no IE11 para incorporar alterações na especificação. Usar Eventos de Ponteiro oferece mais vantagens de desempenho e funcionais para os sites que devem usar mouse, toque, caneta ou outras entradas de ponteiro e continuamos a recomendar essa como a melhor API para sites que funcionam para os usuários em todos os seus dispositivos.
Na Web para dispositivo móvel, muitos sites foram codificados para usar o modelo mais antigo de Eventos de Toque e os usuários esperam que esses sites simplesmente funcionem. Na atualização do IE11, adicionamos suporte a eventos de toque para que esses sites funcionem corretamente. Nossa pesquisa mostrou que na Web para dispositivo móvel, habilitar eventos de toque em um dispositivo que também dá suporte a um mouse (como tablets com Windows e dispositivos 2 em 1) causa mais problema. Por exemplo, descobrimos que o suporte a mouse e a trackpad não funciona em cerca de 10% dos sites principais quando os Eventos de Toque são habilitados. Muitos sites não esperam ser capazes de receber eventos de toque e eventos de mouse e apenas dão suporte a um e a outro. Nós nos juntamos a outros fornecedores de navegador no Grupo da Comunidade de Eventos de Toque W3C para trabalharmos nesses problemas da Web em grande escala. Publicamos mais detalhes sobre os eventos de ponteiro e de toque nesta postagem.
Corrigindo os problemas de interoperabilidade mais impactantes
Conforme continuamos a investigar a marcação em sites que não estavam funcionando corretamente no Internet Explorer, descobrimos alguns problemas de interoperabilidade peculiares. Por exemplo, elementos <button> e <label> dentro de links <a> são independentemente clicáveis em outros navegadores, embora esse comportamento não esteja claramente documentado aqui. Outro exemplo é o suporte à atualização de <meta>. A especificação HTML5 espera que a cadeia de caracteres "URL=" seja parte do conteúdo do elemento para redirecionar para uma URL diferente. Outros navegadores não requerem isso e, quando usadas incorretamente dessa forma, as páginas no IE pareceriam se atualizar constantemente.
Finalmente, também identificamos vários bugs no mecanismo Trident que impactaram particularmente os principais sites móveis e incluímos correções para esses problemas nesta atualização. Por exemplo, corrigimos alguns problemas de navegação com location.hash e alguns problemas de layout CSS que estavam afetando sites móveis populares.
O que você pode fazer?
Muitas dessas alterações que fizemos são especificamente direcionadas ao consumo de conteúdo prefixado de fornecedor ou herdado nesses sites. Não é a nossa meta dar suporte a todas as APIs prefixadas de fornecedor de -webkit. Embora continuemos nossos esforços de atendimento para encorajar esses sites a adotarem marcação baseada em padrões, o suporte que adicionamos é necessário hoje em dia para a Web para dispositivo móvel simplesmente funcionar. Você também pode ajudar aqui se vir sites usando código não padrão: estamos colaborando com a Mozilla em webcompat.com para registrar sites quebrados. Esses sites frequentemente causam problemas em vários navegadores, incluindo o Firefox e o IE e é fácil você relatar sites problemáticos.
Se você for um desenvolvedor da Web, execute o seu site por meio da ferramenta do scanner em http://modern.ie. Essa ferramenta identificará problemas de codificação comuns, incluindo problemas com prefixos de fornecedor e ajuda você a corrigir seu código.
Quando consideradas juntas, as alterações que fizemos no IE na Atualização do Windows Phone 8.1 aprimoraram significativamente a compatibilidade com os sites móveis mais populares. A atualização é distribuída para aqueles que já estão no Windows Phone 8.1 Preview para desenvolvedores e será distribuída para consumidores com dispositivos que executam o Windows Phone 8.1 nos meses subsequentes. Também publicamos uma lista abrangente de todas as alterações no Guia do Desenvolvedor do IE no MSDN.
Se você tiver dúvidas, conecte-se conosco no Twitter @IEDevChat. O próximo #AskIE chat por tweet é hoje (31 de julho) de 10h ao meio dia PDT. Certifique-se de incluir #AskIE em suas dúvidas.
Adrian Bateman
gerente de programas, Internet Explorer
Frank Olivier
gerente de programa, Internet Explorer