Html5-boilerplate: Há alguma necessidade de 6 ícones diferentes de toque da maçã quando apenas um vai funcionar?

Criado em 30 mai. 2013  ·  28Comentários  ·  Fonte: h5bp/html5-boilerplate

Apenas um png apple-touch-icon, definido para 144x144px, será usado em dispositivos mais antigos também (reduzido automaticamente), portanto, não vejo a necessidade de criar 6 versões diferentes.

Comentários muito úteis

"A desvantagem é que esses dispositivos carregam a imagem grande de alta qualidade, enquanto um arquivo muito menor funcionaria tão bem."
Portanto, apenas se alguém clicar em "Adicionar à tela inicial", um PNG um pouco mais pesado terá que carregar (maior apenas por alguns kilobytes) ... isso é perfeitamente aceitável no que me diz respeito, e muito melhor do que criando 6 ícones de tamanhos diferentes ... e especialmente melhor se você estiver incluindo o HTML na página para carregar todos os seis.

Todos 28 comentários

"A desvantagem é que esses dispositivos carregam a imagem grande de alta qualidade, enquanto um arquivo muito menor funcionaria tão bem."
Portanto, apenas se alguém clicar em "Adicionar à tela inicial", um PNG um pouco mais pesado terá que carregar (maior apenas por alguns kilobytes) ... isso é perfeitamente aceitável no que me diz respeito, e muito melhor do que criando 6 ícones de tamanhos diferentes ... e especialmente melhor se você estiver incluindo o HTML na página para carregar todos os seis.

Neil,
Se você precisa de uma maneira simples de criar esses ícones, posso sugerir o repositório H5BP Multi-Layer FavIcons . Eu sei que é um plug sem vergonha, mas usei-o novamente hoje e terminei todas as 7 imagens, incluindo o favicon de várias camadas, em menos de 10 minutos.

Espero que ajude!

Ok, obrigado. Mas ainda não concordo que a criação de vários gráficos específicos para cada dispositivo individual seja a abordagem certa (não é uma abordagem muito "responsiva"). Criar uma imagem ainda é mais rápido / fácil e mais limpo, e não vejo nenhum problema em entregá-la a dispositivos mais antigos quando não está adicionando peso ao carregamento da página (só está sendo carregado após a 'solicitação' de adição à página inicial tela) e estamos falando apenas de alguns k na diferença entre essas imagens.

Se ele só for baixado quando adicionado à tela inicial, posso ver o que você quer dizer. Pessoalmente, também vou pela rota do ícone único.

+1 para um ícone único (e um favicon.ico) sem abordagem de links html.

@mathiasbynens obrigado pela explicação completa dos ícones de toque. Eu tive que rir quando li o resumo. Não por causa de suas sugestões, mas por causa do motivo pelo qual odeio BS proprietário. Deixe-me resumir seu resumo.

  • Para oferecer suporte total ao Android, você deve usar as tags html proprietárias da apple.
  • Se você só se preocupa com o iOS, não precisa usar as tags html proprietárias da apple.
  • A abordagem “preguiçosa” é fazer exatamente o que a apple.com faz.

Para recapitular, há duas razões principais pelas quais ter muitos ícones de toque diferentes é a melhor solução:

  • Desempenho / limitação do uso do plano de dados: evite carregar imagens desnecessariamente grandes ao adicioná-las à tela inicial.
  • Direção de arte: na minha experiência, os designers geralmente não gostam de depender do redimensionamento automático e, em vez disso, fornecem os próprios ícones nas dimensões apropriadas.

Dito isso, sou preguiçoso e também uso a solução de um único ícone. Mas isso não significa que deva ser a solução certa IMHO.

@ryanswedal : D

Se os links HTML estiverem incluídos na página, alguém sabe se eles são chamados no carregamento da página? Nesse caso, esse é um argumento ainda maior para a abordagem de um ícone ... e para não incluir o link HTML.

Quando pesquisei isso, meus testes do IIRC confirmaram que os ícones de toque não eram solicitados no carregamento da página, nem mesmo com <link> .

Bom saber. Obrigado!

Sim, +1 para a abordagem de ícone único. Os ícones de toque não são autodocumentados, portanto, ter 6 na raiz sem a capacidade de documentar uma ferramenta para sincronizá-los é confuso e exige muita manutenção.

Eu concordo com o problema de manutenção se você tiver todos os ícones na raiz. Não vejo uma boa solução a não ser adicionar as tags <link> (os links simbólicos não resolvem realmente esse problema).

Mas não acho que devemos aumentar a marcação do index.html com essas tags no momento. O Mobile Boilerplate faz isso.
De qualquer forma, tenho certeza de que é fácil descobrir como mover os ícones para outra pasta. Temos até uma pequena seção sobre esse tópico em nossos documentos .

A partir do iOS 7, o tamanho do ícone de toque recomendado para iPhones com tela Retina aumentou de 114 × 114 pixels para 120 × 120 pixels. Minha postagem foi atualizada para refletir isso.

Podemos encontrar uma solução aqui? Queremos deixar como está ou passar para a abordagem de um ícone?

Bem, meu voto certamente seria pela abordagem de um ícone

Na quarta-feira, 24 de julho de 2013, Hans Christian Reinl escreveu:

Podemos encontrar uma solução aqui? Queremos deixar como está ou mudar para o
abordagem de um ícone?

-
Responda a este e-mail diretamente ou visualize-o em Gi tHubhttps: //github.com/h5bp/html5-boilerplate/issues/1367#issuecomment -21507073
.

Neil Creagh

Enviado do celular: 087 2174891

http://www.fuel.ie

Quanto menos, mais simples, melhor. Se apenas um é suficiente e funciona, por que não iríamos com ele?

+1 para um!

Eu também gostaria de usar uma maneira simples e ágil, mas para ícones costumava haver uma exceção: ícones em diferentes escalas podem requerer um redesenho para ficarem claros naquele tamanho.

Se você tiver um ícone complexo de, digamos, 120x120 e quiser usá-lo em 32x32, ele pode se tornar irreconhecível. Dimensionar um ícone pequeno para um muito maior não é um problema com o formato vetorial, mas o designer pode querer adicionar mais detalhes.

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module -67936509

Role várias páginas do link acima para ver os ícones em 32x32 e 16x16 ... talvez não seja tão próximo a este tópico, mas acho que é o que deve ser considerado quando se trata de ícones em vários tamanhos.

OMI, na maioria das situações, um ícone é suficiente. Fornecer um único ícone H5BP grande com uma nota nos documentos sobre a criação de ícones menores para otimizar a clareza e o tamanho do arquivo seria uma boa solução.

Dito isso, o H5BP é semi-opinativo, então tudo o que for considerado o método "correto", independentemente da simplicidade, deve estar no repo.

Fiz uma solicitação de pull que remove cinco dos seis ícones do Apple Touch no # 1425.
Feedback muito apreciado.

Por favor, mantenha a discussão principal dentro desta questão.

+1

: +1:

+1

Tudo bem se eu admitir que nunca soube por que havia seis em primeiro lugar e estou feliz que haverá um, então não vou me sentir preguiçoso por não saber o "por quê?"

A perfeição é alcançada, não quando não há mais nada a acrescentar, mas quando não há mais nada a tirar.
- Antoine de Saint-Exupéry

: +1:

Eu não tive tempo para torná-lo mais curto.
- Blaise Pascal
:afirmativo:

Estou correndo há um tempo apenas com uma única imagem. Uma desvantagem é que muitos navegadores móveis solicitarão os outros arquivos. Não há necessidade de referenciá-los com uma tag de link no HTML, mas voltei a incluir arquivos de diretório raiz para todos os tamanhos em normal e pré-composto apenas para evitar que meu log esteja cheio de erros 404 para essas solicitações.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

sideshowbarker picture sideshowbarker  ·  5Comentários

coliff picture coliff  ·  14Comentários

greenchili picture greenchili  ·  20Comentários

roblarsen picture roblarsen  ·  5Comentários

Vincent2015 picture Vincent2015  ·  7Comentários