De acordo com Brandweek , "as marcas são o check-out expresso para as pessoas vivendo suas vidas a uma velocidade cada vez maior. Este artigo mostra como e por que, para adicionar "app"-como ícones para seus sites para vários displays browser móvel e desktop, de forma clara e elegante identificar o seu site com um ícone que se destaca da multidão.

Logo Presentation And The Nine Básico Movimentos Ballet

Quando eu era um garoto crescendo na América rural, nós só temos quatro canais na televisão, todas as filiais locais das quatro redes nacionais (sim, quatro, você está esquecendo PBS, que eu só assisti quando eles fizeram promoções de dinossauro). As estações ABC e CBS veio em bastante claro, se você ajustou o "orelhas de coelho" antenas apenas para a direita, e envolveu tinfoil neles.

Não muito longe do que sentado na nossa sala de estar. (Crédito da foto: David E. Bowman ., usado com permissão)
Estação NBC veio dentro sobre os novos canais de moda e de certa forma incompreensível UHF - tivemos que realmente mexer um mostrador que parecia um rádio velho seletor para sintonizar-lo dentro Esse canal sempre foi carregado de estática, e exigiu não só de papel alumínio sobre o coelho ouvidos, mas às vezes precisava do meu irmão ou me de ficar ao lado da TV, com cuidado agarrar uma das orelhas de coelho, e, nas palavras da minha esposa anos mais tarde, assume uma das nove posições básicas do ballet. (O pai dela fez a mesma coisa com ela, até que ele ficou com raiva de alguma coisa, disse o presidente Johnson e chutou para fora o tubo de imagem. História verdadeira.) Se fizemos o grand plié apenas para a direita, o canal NBC viria em bom e claro, no pelo menos até que Don Meredith caiu de volta para a passagem do touchdown eo sinal iria sair.
A televisão também foi um trabalho em preto-e-branco.
Assim, dado que todos os estáticos e falta de cor, a falta de uma tela e da incapacidade de quem não tinha atirador qualidade de visão para discernir o que era o número no mostrador pequeno canal de plástico do outro lado da sala, como se fôssemos sabe o canal que estávamos assistindo à primeira vista?
Resposta curta, não o fizemos. Resposta mais longa, dependia-se as redes, ou a estação local, para nos dizer. Que envolveu o uso de um logotipo, na escolha das redes de identificar-se - parte de sua marca.

A versão 1960 do logotipo da rede ABC. (Crédito da foto: Kris Trexler ., usado com permissão)
Naqueles dias de baixa, de baixa resolução em preto-e-branco sinais, às vezes tinha que depender de o logos da rede para determinar o que estação estávamos assistindo. Eu não tinha idade suficiente para ver o logotipo ABC utilizado na década de 1950 (as letras stenciled em cinza claro no lado de uma câmera de televisão, muito ilegível), mas eu me lembro a versão 1960: três menores caso letras em cores RGB (pareciam diferentes tons de cinza para nós) em um círculo preto. Fácil de ver e entender. ABC ainda usa uma variante desse logotipo.

A versão 1960 do logotipo da rede NBC. (Crédito da foto: Fanpop .)
NBC flaunted seu abraço de cor, colando uma cor-bedazzled pavão na tela. Isso nos deu um bloco de texto em vez undistinctive na parte inferior da tela, e não podíamos ver as cores, por isso não transmitir tão fortemente (além disso, ninguém queria assistir a programas NBC se isso significasse que você tem que ficar pelas antenas na posição alongamento por mais de alguns minutos). O pavão sobrevive, de uma forma muito mais estilizado, hoje.

A versão 1960 do logotipo da rede CBS. (Crédito da foto: Navigator Solar .)
CBS usou o "Olho de Hórus" (eles ainda usam uma versão dele) ladeado por três letras bem serifed em um arranjo de cores RGB diferentes - mais uma vez, facilmente identificáveis.

Auto-identificação e Navegador discagens rápidas

Esta explosão do passado estática crivado veio à mente quando eu instalei o Opera 11.10 (codinome Barracuda no melhor Opera de espionagem nada dupla nomeação tradição) na minha máquina a outra semana. Eu não instalá-lo o dia, ou da semana, ele saiu, em parte porque eu sou preguiçoso e em parte porque eu gosto de ler um pouco sobre como as iterações novo navegador estão fazendo antes de eu jogar meu portas abertas e convidá-los dentro eu instalei-o hoje, ou mais precisamente Opera cansei de me ignorando-o e instalou-se, e eu imediatamente notou uma mudança.
Eu uso o recurso Speed ​​Dial do Opera para a minha página inicial, e duas coisas eram diferentes. Um deles, havia mais (e menores) docas ícone, exigindo-me para encher a tela com alguns sites mais marcada (não pode ter manchas por preencher, é assimétrica e meu TOC não gostaria que ele). Além disso, notei que alguns sites não usou a habitual meia-random screenshots para servir como seus ícones. Em vez disso, alguns deles, como SitePoint e Google Imagens , parecia agora spiffy esporte, iPad-como ícones (menos o overlay brilhante). Iterações anteriores do Opera apenas deu de captura de tela "ícones".

Uma parte da minha área de trabalho atual no Opera 11. As variações no ícone exibe são óbvias.
Era óbvio o quão útil são os pequenos ícones. O chunky SitePoint azul / laranja estilizada "S", por exemplo, é imediatamente perceptível, como é o colorido Google Images "logo" (como CBS, eles usam um bom gosto suave serif, juntamente com uma variedade de cores brilhantes Crayola). Por outro lado, alguns sites não usando os ícones não se saíram tão bem. Meu, por exemplo. Eu tenho um screenshot quase aleatório do meu LinkedIn e ícones contato Twitter, quase inútil para a identificação de qualquer coisa. A página do Facebook que eu visito regularmente tem transformado em um mush borrada, como o programa squished toda a página para baixo em um tiro de miniaturas quase imperceptíveis. O screengrabs para Six Revisions e Smashing Magazine não fazê-lo quente, seja, sem os blocos de texto no fundo dos ícones, eu não poderia facilmente dizer que a página foi (embora logotipo Smashing é mais perceptível do que Six Revisions é). E quem quer contar com um bloco de texto para identificar alguma coisa?
Assim, com Googling alguns minutos, descobri que os ícones são totalmente controlável a partir do final do cliente - em outras palavras, assim como o Apple iPad / iPod / iPhone ícones que também podemos usar em nosso site (Apple chama Webpage ícones ; browser móvel Android usa algo similar), podemos adicionar um ícone que irá destacar-se em Dial usuários Opera 'Speed. Eu também achei que, se preferir, podemos usar Speed ​​Dial específicos CSS ou conteúdo, e até mesmo adicionar um Soupcon de bondade HTML 5.
Em outras palavras, que controlam a aparência. Eu não sei sobre você, mas neste dia e idade de não racional sendo capaz de projetar sites que aparecem pixel-idênticos de navegador para navegador, eu vou tomar um pouco de controle sobre a aparência e apresentação a qualquer hora posso obtê-lo . E, como veremos em breve, o efeito não é limitado a Dial do Opera Velocidade desktop, mas se traduz em muitos displays móveis também.
E não é mesmo parecido com uma tela de área de trabalho móvel? Mais sobre isso mais tarde.
(Não sabe como obter o Opera para mostrar Discagem rápida como a home page? Online Como dá um passo a passo rápido e fácil , embora, como observa o artigo, o Opera 11 usa discagem rápida como padrão para a selecção de home page. Veja como mudar velocidade ícones Dial no seu, e só o seu browser,. E se você é novo para toda a ideia do Speed ​​Dial, Opera nos deu um liso, curto vídeo do YouTube para folhear.)

Chrome com extensão Speed ​​Dial, em um screenshot de dezembro de 2009. (Crédito da foto: Technobuzz .)
Firefox tem uma extensão de discagem rápida que eu comecei a usar depois que eu comecei estragado por recurso próprio Opera. O Firefox também oferece uma extensão similar chamado Fast Dial , mas parece ter alguns problemas de funcionalidade . Chrome também tem uma extensão que dá a seus usuários uma discagem rápida , e de forma algo semelhante ao Opera, que permite o uso de logos site como ícones de marcação, embora sem a personalização.
Internet Explorer 9 tem o seu próprio recurso integrado de Speed ​​Dial que é semelhante ao do Chrome, no entanto, não parece particularmente personalizável (eu não uso IE9, por isso não posso dizer com autoridade). Usuários de Mac têm uma razão para alisar, como Safari fez Discagem rápida por anos, talvez já em 2003 , embora eu entendo que é um aplicativo on-line e não necessariamente a inclusão de um navegador (eu não uso Macs, ou, então alguém aqui pode me corrigir). Michael PCMag de Muchmore reivindicações Opera fez o Speed ​​Dial primeiro , para o que que vale a pena.

Going Mobile: Roubar A March On The Future

A questão do "por que se preocupar?" É válido. Afinal, navegador de desktop do Opera tem menos de uma quota de mercado de 5%, não importa qual números que você aceitar, e eu tenho certeza a maioria dos usuários de outros navegadores não usam suas instalações de discagem rápida. Mas isso não é o negócio inteiro. Opera é conhecido como um navegador de ponta cujos melhores características, muitas vezes encontrar seu caminho em outros browsers mais populares abaixo da estrada. (A lista de inovações Opera voltando a 1994 está disponível no Wiki do Opera, se você estiver interessado. Opera introduziu recursos como tela de zoom, user-defined CSS, gestos do mouse, pop-ups, e navegação por voz, e é Speed ​​Dial tinha desde a versão 9,20 em 2007.)
Eu não vou começar a tentar vender o Opera para você, você usar qualquer navegador de sua preferência, mas se Opera está fazendo isso hoje, Firefox e Chrome eo restante provavelmente vai fazê-lo amanhã. Assim, fazer um ícone de discagem rápida para o seu site agora só poderia encantar o percentual muito pequeno de usuários que usam essa facilidade para agora, mas as chances são de que o ícone, ou uma variante da mesma, virá a calhar para tomar própria de outro browser no Speed ​​Dial no futuro próximo. Melhorias de desktop do Opera muitas vezes passar para o Opera Mobile e Mini navegadores, que no último exame tem mais de 100 milhões de usuários entre eles . Isso é uma parte significante do usuário. E, como veremos ao longo do caminho, a mesma técnica pode ser usada para colocar seu logotipo no celular da Apple, aparelhos touch-screen.
Dials de velocidade são nada de novo, certamente. Mas a capacidade de personalizá-los, agora para o Opera e quase certamente para outros navegadores no futuro próximo, é algo bastante diferente.

A Apple iPad área de trabalho, em uma imagem a partir de Abril de 2010. (Crédito da foto: Pat Moorhead .)
Também está se tornando evidente que se você está projetando para o futuro (mesmo que esse futuro está próximo mês), você está projetando para celular. Se você não está projetando para celular, você não está servindo seus clientes. Autor e especialista em Luke Wroblewski UI lembra que a tendência para mobile já é grande e crescendo aos trancos e barrancos, e cita as estatísticas para apoiá-la.
A empresa de pesquisa fez uma previsão ousada em dezembro de 2009 que, por algum tempo em 2012, os embarques globais de smartphones ultrapassaria embarques globais de desktops, notebooks e laptops combinados. Isso aconteceu no final de 2010, quase dois anos. A diferença continuará a aumentar. Desde 2008, o uso da casa de PCs caiu 20%, e continuará a encolher, como os consumidores dependem cada vez mais seus smartphones para navegar na Internet.
Em 2011, as vendas de PCs no mundo caiu mais de 3% e vai continuar a cair, as remessas dos EUA caiu mais de 10%. Muitos compradores que teriam comprado um PC estão comprando comprimidos, como o iPad. 22-25% dos americanos e britânicos usuários de internet móvel não se incomodam com um computador desktop em tudo para navegar na Internet. Em novembro de 2010, o número de visitantes a sites web-based e-mail diminuiu em 6%, enquanto, ao mesmo tempo o número de usuários que acessam seus e-mails por seus dispositivos móveis cresceu 36%. E dos dispositivos móveis lá fora, Smashing Magazine autor Nick Francis diz-nos que metade dos smartphones vendidos hoje executado no iPhone OS , e metade do restante executado no sistema operacional Android. O tablet da Apple iPad é vendido como um louco .
Além de fazer-me sentir velho (? Como sobre você), as estatísticas dizem-me que se eu estou projetando para um cliente e ignorando as suas necessidades móveis - e particularmente não focar a necessidade de abordar os dispositivos de seus usuários Apple - eu estou não servir os seus interesses. O cliente não pode mesmo saber que você não está dando a eles o que eles precisam, mas é no designer e desenvolvedor de saber que precisa existir, não pelo cliente. Sabemos que mais e mais usuários de nossos clientes ainda podem estar usando um desktop ou notebook para acessar a Internet de hoje, mas amanhã eles vão estar usando um smartphone, e se não for amanhã, então volte na semana que vem, porque eles ter feito a troca. Além disso, eles pensam de sites cada vez menos como "sites" e mais como "apps" (apesar de sabermos os termos não são intercambiáveis ​​).
As técnicas que irá aprender aqui se aplicam agora à Opera de discagem rápida para o PC e para a telas sensíveis ao toque da Apple. Amanhã eles se aplicam a mais dispositivos, provavelmente o Opera Mobile e talvez o Mini. E, acredito, outros desktop / laptop (acho que "fixa" os computadores, embora o termo não é muito preciso), assim: Eu tenho uma sensação de que daqui a um ano, ou talvez dois, um monte de browsers 'home-page exibe vai empregar alguma versão de uma instalação de Dial-celulares como Speed. Vamos roubar uma marcha sobre o futuro (e sobre os nossos concorrentes) e ver como ele funciona.

Primeiro Passo: Como personalizar o seu site Para Dial do Opera Velocidade

[Y] ou pode oferecer [um ícone] que pode ser exibido no [touch screen da Apple] tela de dispositivos 'Home usando o recurso de clipe de web. - Alexander Dawson, Six Revisions

O novo [Opera] aplicação também permite que desenvolvedores de sites para escolher o que aparece nas entradas dos usuários de discagem rápida para seus sites. - Michael Muchmore, PC Magazine

Tiffany Dev Opera Brown escreveu uma rápida e bem detalhado como-ao guia para bater para fora um ícone do Opera de discagem rápida para o seu browser, ou para personalizar o seu ícone de marcação via CSS ou outro conteúdo. Brown confirma que, se você não fizer nada de especial, Dial do Opera velocidade só vai usar a captura de tela de costume, e já sabemos o quão mal que pode girar para fora para você.
Sem surpresa, o processo começou com a idéia do "favicon", ou o ícone do marcador. Fomos incorporando os já em 1999, quando Microsoft rolou com todos nós, com sua inclusão no IE 5 . Eles não fazem parte do HTML 4 especificações, mas isso não impediu que muitas pessoas, e os vendedores de browser não nomeado Microsoft não esperar muito para adicionar suporte para icon como um valor para o rel atributo da link elemento. A Apple construído sobre a idéia do favicon para seu toque do dispositivo ícones através da apple-touch-icon de valor. HTML 5 e acrescentou icon como um valor válido e padronizado para o rel atributo, a menos que mudá-la próxima terça-feira.
(Nota: O Opera não vai pegar um favicon para marcadores de discagem rápida Se não encontrar algum tipo de ícone dedicado ao propósito - Opera não exige que o Opera-específica de codificação, mas exige. link rel codificação especificamente para um ícone. Não será o padrão para exibir o favicon, mas dará aos usuários uma captura de tela como um "ícone".)

O Código Basic Icon

Não toma muito tempo ou esforço para codificar um novo ícone para si mesmo. Brown dá-nos a sujeira-simples código necessário para a cabeça do seu documento:
Ela não fica muito mais fácil do que (você pode até mesmo deixar de fora o type="image/png" , como o PNG tipo MIME é assumido). Você pode ver a rel diferença a partir do código Apple-específicos utilizados para os ícones de toque da Apple:
Os ícones em si são um pouco diferentes dos ícones da Apple dedicado, e pode exigir que você tome uma corrida através do Photoshop, GIMP, ou o seu editor de gráficos de escolha. As especificações são simples. O tamanho mínimo é de 114px por 114px (os menores, como o da Apple de tamanho 57 × 57 ícones PNG, serão ignorados, embora os dispositivos da Apple usará quase qualquer ícone de tamanho razoável, reduzir a escala para 57 × 57, e adicionar seus próprios cantos arredondados - mais sobre isso em um bit) eo máximo é 256px de largura por 160px de altura. (Tamanhos de exibição pode ser alterado na opera:config do menu de seu navegador, mas isso só funciona para você e não o usuário Ópera em Katmandu.) O arquivo deve ser no formato PNG, JPG, GIF ou - não SVGs.
(Web desenvolvedor Mathias Bynens criticou a Apple por não "implementar [ndo] o padrão <link rel=icon> e [chegando] com uma relação mais detalhada ligação de propriedade em seu lugar. "Eu tenho que concordar.)

Usando vários ícones

Se você usar uma imagem animada, somente o primeiro quadro será usado, por isso não se incomode. Mas, você pode usar vários ícones. Qual é a diferença? Ele vai deixar você dar aos usuários um ícone para marcar uma página e um segundo para o seu Speed ​​Dial. Você terá que decidir se este é um plus agradável ou uma fonte de confusão em potencial - nós gostamos geralmente algum grau de uniformidade entre as apresentações nosso logotipo, para fins de identificação.
Se você quer ir por esse caminho, não é muito mais difícil do que o primeiro. Veja como:
O maior deles será escolhido por Discagem rápida como seu ícone, independentemente se ele vem em primeiro lugar ou em segundo lugar na lista. Se ambos os ícones são do mesmo tamanho, Speed ​​Dial usará o primeiro eo segundo será o favicon.
Até agora tem sido fácil. A próxima parte é, assim, fácil demais, mas permite a personalização um bom bocado mais, se você optar por implementá-lo.

Usando o modo de visualização: minimizados

Opera é view-mode recurso de mídia permite que você especifique estilos por modo de visualização. Se você usar view-mode: minimized , você pode fazer mais do que apenas fornecer um favicon maior, badalada para Dial seus visitantes 'Speed. View-mode funciona como outros recursos de mídia, como device-width . Você provavelmente já sabia que a consulta de mídia precisa ser dentro de um @media bloco. Aqui está o código:
Este ainda tem Opera usar um screengrab como o seu "ícone", mas personaliza a aparência: neste caso, alterar a fonte e cores de fundo.
Se preferir, você pode ligar a uma folha de estilo externa (vamos debate os prós e contras desse método em outra ocasião), e defina o valor do atributo mídia (view-mode: minimized) :
Se você usar (view-mode: minimized) , vai desencadear um Speed ​​Dial viewport que é de 256 pixels de largura por 160 pixels de altura. Isso pode não ser um problema para você, mas é algo a saber.
O que você definitivamente precisa saber é que se você usar view-mode: minimized CSS, Speed ​​Dial, que usará como primeira prioridade, sobre um ícone mais genericamente fornecido.

Outras possibilidades

Brown dá exemplos de várias outras facilidades: servir uma URL diferente através de uma solicitação HTTP, andar de bicicleta através de um número de pré-selecionados usando ícones auto-reload, usando mod_rewrite para redirecionar solicitações de discagem rápida, e usando uma linguagem server-side como PHP para servir conteúdo diferente na mesma URL. Se você encontrar estes interessante, eu vou deixá-lo a rever seu artigo , se você quiser explorar os aspectos do Speed ​​Dial.

Extras

Os usuários visual entre nós pode apreciar o passo a passo YouTube Opera nos dá. Opera Mobile, muito popular no Android e Symbian, também usa de discagem rápida , assim como o Opera Mini , embora versões nem móveis, nem permitir a Mini do lado do cliente a personalização ainda. (Firefox e Chrome versões móveis têm suas próprias versões do Speed ​​Dial, assim como o browser móvel Dolphin.) Se você estiver a fim de tomar um breve passeio no mato, o Dev Opera tem um forum de discussão sobre o artigo de Brown. E planejamento do Opera em adicionar extensões para o Speed ​​Dial na versão desktop novo.

Galeria de Websites "App" Ícones

Um antigo Opera screenshot Dial speel de início de 2011. (Crédito da foto: Martin Brinkmann e Ghacks.net ., usado com permissão)
Você viu como o meu computador se parece com o Speed ​​Dial nova ativado. Para fins de comparação, este é como o Speed ​​Dial do Opera olhou antes Opera 11 em um monitor de área de trabalho sem o uso do spiffy novos ícones personalizados. Não é ruim, mas você pode ver como algumas das capturas de tela não se destacam muito bem. Mesmo quando eu ampliar o gráfico, não posso dizer o que todos os locais screengrabs representam. O ponto? "Ícones app" muitos sites "ainda têm a mesma aparência no Speed ​​Dial atualizado. Mas, eles não precisam.

Opera Mobile screenshot início de 2011. Crédito da foto: Dev.Opera , usado sob licença Creative Commons.
Para fins de comparação, aqui está o que o Speed ​​Dial parece em um navegador móvel Opera. Obviamente, todos os "ícones" são agarra tela. Espero Opera irá atualizar a sua instalação móvel Dial de Velocidade para ser customizável em um futuro próximo.
Vamos encontrar alguns ícones da velocidade spiffy nova Dial e ver como eles se parecem individualmente. Aqui está um grupo deles do meu desktop:

Quatro não tão aleatoriamente ícones velocidade selecionada Dial do meu desktop, por volta de abril de 2011.
Eu só escolhi quatro que representam a idéia do ícone personalizável ou o screenshot bem selecionados: Imagens Google, SitePoint, Yahoo Mail e Media Matters. SitePoint usa o apple-touch-icon em seu valor de codificação, e os outros ou usar uma codificação mais genérica ou apenas deixar o browser do seu screengrab sem qualquer intervenção. (A borda azul em torno de alguns dos ícones é desencadeada por foco do mouse, e vem de eu ser um pouco desleixado como eu selecionei os ícones para screenshotting. Deixei as fronteiras de alguns dos tiros porque eu racionalizada que precisamos ver o que o ícones parecem tanto com e sem fronteiras, mas principalmente porque eu estava com preguiça de refazê-las.)
Os benefícios visuais são aparentes. Google Images e Yahoo usam seu texto colorido como sua identidade de marca. O Media Matters logotipo mostra claramente, mas é evidente que o "ícone" é um bem, e por acaso, pedaço selecionado do quadrante superior esquerdo de sua tela (você pode ver a fatia de barra de navegação no ícone, embora eu não acho que diminui o impacto visual forte da apresentação da marca). SitePoint, com o uso de seu ícone da Apple exibindo na tela Discagem rápida , provavelmente faz o maior impacto. Muito limpo e forte, e imediatamente reconhecível.

Opera.com 's ícone de discagem rápida.
Aqui está um atalho para o próprio ícone do Opera Speed ​​Dial. Não surpreendentemente, eles vão com suas "O" grande logo, embora eu perca a sombra (aparentemente desatualizado) inclinada para trás a carta. Tal como acontece com todos os ícones de discagem rápida, o texto é agarrado desde o título da página, explicando porque ele exibe como "testas Opera ..." Podemos, é claro, o controle que, com nossos próprios sites, se queremos truncar ou manipular nossos títulos para dar um curto, exibir texto ágil, e os usuários podem configurar o seu texto para dizer o que quiserem para o ícone.

Apple.com 's ícone de discagem rápida.
Este é um tiro de Apple.com 's ícone de discagem rápida. Quem esperava isso? Eu estava esperando alguma versão da "maçã" logo . Destaca-se muito bem do bloco, eo título, a única palavra "Apple", é eficaz, embora eu não tenho certeza que a foto do iPad faz o truque para fins de identificação.

IPhone da Apple e ícones Dial iPad Speed.
Surpreendentemente, nem website iPhone da Apple, nem o seu local de iPad usar um ícone dedicado e não use o apple-touch-icon de codificação. A captura de tela para o site iPhone é bastante notável, porque o iPad, talvez menos. Talvez a Apple não espera que os usuários móveis visitam estes sites?

Microsoft.com 's ícone de discagem rápida.
Aqui está o ícone do Microsoft Speed ​​Dial. Ou o Opera screengrab que usa para o ícone. Obviamente, a Microsoft não está a tentar cumprir com os requisitos do Opera ou da Apple para essa matéria. Como "ícone" quase todo mundo está lá fora, é uma captura de tela a partir do canto superior esquerdo da home page da Microsoft. É útil, e que sobre tudo o que tem indo para ele.

Velocidade de ícones Dial WordPress.com e páginas de Facebook.
Aqui estão screencaptured "ícones" de um blog WordPress e uma página de Facebook que eu trabalho com. Você pode ver o quão satisfatório estes servem o propósito de ícones da marca. Eles são apenas duas imagens de conteúdo extremamente comprimido. Mesmo os blocos de texto identificando não ajudam muito.

Velocidade ícones Dial do Six Revisions e Smashing Magazine.
Estes são os screencaptured "ícones" do meu marcadores para Six Revisions e Smashing Magazine (mostrando então atual conteúdo da página frontal). Embora eles não são tão ruins como os dois exemplos acima, e logo Smashing é claramente visível, eles não são particularmente agradáveis. Six Revisions parece um site WordPress, porque o dia que eu fiz a ficha, o site estava apresentando um artigo sobre ajuste fino WordPress para fins de SEO . E artigo Smashing sobre alcançar a perfeição do pixel no Photoshop desde há muito tem saído na primeira página, embora uma fatia do título permanece em meu ícone. Esses ícones não mostram novos conteúdos, e não fazer justiça para os sites que eles representam

NBC.com 's ícone de discagem rápida.
E terminando onde começamos ... Enquanto os outros dois principais redes de televisão deixe Opera fazer um screengrab para os seus "ícones", NBC nos dá a versão do século 21 do pavão venerável. Eles código de um JPG mais amplamente aplicável para servir ao propósito.

Etapa dois: Apple Além disso Opera Igual uma mudança radical na Navegação

Uma primeira versão de uma página "app" homemade casa. (Crédito da foto: Geniosity ., usado com permissão)
A idéia de uma home page como uma coleção de "apps", ou mais precisamente links para uma variedade de sites selecionados pelo usuário, não foi introduzida com um Safari ou Opera Dial de Velocidade em primeiro lugar. Computador maven John Dvorak teve uma versão de sua "home page pessoal portal" disponíveis desde 1999; todas as suas iterações usar links de texto apenas, sem ícones, pois o tempo de carregamento mais rápido. Mais recentemente, um desenvolvedor que blogs em Geniosity escreveu sobre sua própria artesanais, texto do link-driven home page que ele criou para a sua cópia do Firefox (imagem à esquerda). O autor me diz que ele ainda usa uma versão deste para a sua casa page.There são outros exemplos lá fora, para o Googling.
Acho que a idéia, à espreita, pois tem nas bordas das convenções navegador para mais de uma década, está prestes a passo para a frente. Se isso acontecer, será porque os usuários móveis querem seu desktop, laptop, notebook e navegador exibe a funcionar da mesma forma como seus desktops móveis - como uma coleção de pessoal selecionado, baseado em ícones links para sites que usam em uma base regular . Este será um dos primeiros exemplos de móveis convenções navegação de uma alteração importante na procura de computadores "fixos".
Acredito firmemente (sem qualquer prova concreta, deve-se notar) que em algum momento no futuro próximo, desktop / laptop os usuários vão querer mudar para um Speed ​​Dial-como interface do navegador que replica o que eles têm em seus dispositivos móveis. Eu vejo isso como uma mudança radical na navegação: em vez de desktop / laptop navegadores condução navegadores móveis que são capazes de fazer, o inverso vai acontecer. Em vez do tradicional desktop "home page", os usuários vão querer uma interface multi-app, como eles usam em seus celulares e tablets.
Se isso acontecer, então designers / desenvolvedores que chegar à frente da curva vai estar preparado quando as mudanças descer a pique. Já teremos nossos sites, e sites de nossos clientes, pronto para mostrar bem no "desktop interface do app" futuro próximo recurso do navegador. (E se isso não acontecer, vamos ter gasto uma quantidade muito pequena de tempo na preparação, com nenhum dano aos nossos sites. Não há realmente nenhuma desvantagem para isso, como você pode equipar um site para esta nova função na menos tempo do que leva o adolescente local para entregar-lhe uma pizza.)
Então, se eu não tenho provas concretas para mostrar a você, como eu posso convencê-lo? Talvez eu não possa. Eu posso bem estar errado. Mas eu não penso assim. Anos, escritor de ficção científica Robert Heinlein escreveu: "barcos a vapor quando é hora de barco a vapor." (A referência histórica é simples: enquanto inventor Robert Fulton é creditado com a "inventar" o barco a vapor, havia uma dezena de caras em três continentes trabalhando simultaneamente sobre uma variante do barco a vapor ou a outra coisa mesmo com o telefone;. enquanto você e eu aprendi que Alexander Graham Bell "inventou" a engenhoca, havia um monte de caras que trabalham em um aspecto ou outro da voz-driven comunicação através de . um fio Era o momento adequado no desenvolvimento tecnológico da sociedade ocidental de barcos a vapor e telefones; a necessidade estava lá, e os dispositivos de "criação e disseminação eram inevitáveis).
A onda do futuro é a computação móvel, e um dos aspectos mais fundamentais da computação móvel é o desktop app-laden. A idéia de abrir um navegador para uma única home page está rapidamente se tornando obsoleto, eu me sinto. Comecei a usar discagem rápida na minha browsers (todos eles, exceto IE) mais de um ano atrás, e eu não iria voltar para um prato de brownies da vovó. A utilidade ea conveniência de ter (no caso do meu Opera "home page") 25 "apps" no meu desktop, assim que eu abro meu navegador me impede sempre de voltar para uma única home page novamente.
Ainda não está convencido? Ok, abra seu navegador de desktop e olhar para qualquer home page que você escolheu. Agora flip aberto o seu dispositivo móvel e olhar para a variedade de aplicativos e sites pronto para ser acessado. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company's or department's home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn't make sense to have a “home page” full of icons to different sites when they will always go to the same site first.)

The Future Is Now

[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won't even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine

For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple's touch-screen devices and Opera's Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple's touch-screen HTML code. I'd say create a PNG icon of 114×114 or larger, not forgetting Opera's maximum size requirement of 256×160, and use the apple-touch-icon coding:
Another viable option is to use two strings of code:
to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one's individual characteristics.
The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple's iOS4.2 to use multiple icons for different device resolutions, if you're interested.)
Here's the proof in that particular pot of pudding: a before-and-after pairing of my site's icon in Opera's Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple's touch-screen devices as well as in Opera's Speed Dial.

Comparison of my site's old and new Speed Dial icons.
The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an <h1> site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!
You guys could do it in less, I'm sure. I'm not entirely happy with it; it's smaller than the bookmark canvas, the corners arent't rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn't matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys .
Side note : There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Não faça isso. Keep the icon edges sharp and don't include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:
allowing you to add your own effects as you desire.
Bynens writes: “I'd recommend to always use precomposed icons. It gives you full control over your icon, and it's the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry's OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I'll pass along:
Opera 11.10 supports precomposed icons as well as the Apple Touch icons.

Conclusão

Right now this works on Apple's touch-screen devices and on Opera's desktop browser. It's my educated guess that within a matter of months, it will work on Opera's Mobile browser and at a later time on the Mini as well. It wouldn't surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it's never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.