Cross-browser é a expressão utilizada para um site que funciona em todos os navegadores em diferentes versões. Ao decorrer do tempo, surgimento de novos browsers, novas versões betas e oficiais sendo lançadas para novos suportes e correção de bugs, essa tarefa costuma ser um pouco difícil.

Já fiz um post referenciando alguns plugins e programas para auxiliar nesse trabalho. Entretanto neste post quero sugerir que visite a ferramenta online Adobe BrowserLab, que tem funcionalidades excelentes.

Adobe BrowserLab

O funcionamento é simples, você escolhe quais browsers quer testar, executa a url e recebe os prints na mesma tela. Existem diversos serviços similares, como o Browsershots. Para justificar o uso do Adobe BrowserLab, veja algumas opções que me interessaram:

• Apesar de lento, por precisar esperar gerar o printscreen nos browsers selecionados, é mais veloz que a maioria dos serviços online deste gênero.
• É possível fazer comparação das imagens no modo split.
• Exibição de réguas para auxiliar na identificação de possíveis bugs causados por browsers (devia nem chamar de browser, resumindo, problemas do Internet Explorer) de CSS.
• Para os mais perfeccionistas tem a opção Onion Skin, na qual duas telas são mescladas para verificar pixel por pixel.

É uma excelente opção principalmente para usuários Mac, que tem dificuldade em testes dos navegadores para Windows. A recomendação ideal para estes usuários é a instalação de uma máquina virtual com Windows. Sugiro a utilização do aplicativo VMWare, que utilizo no dia a dia. Também tem o Parallels, mas entre ambos o VMWare apresentou um melhor desempenho, exigindo menos memória ram da minha máquina.

Favicon: de origem Favorito+Ícone, é o ícone em formato 16×16 pixels utilizado para representar seu site tanto quando o mesmo for adicionado aos favoritos de um browser, quanto para aparecer ao lado da sua url.

Embora considerado inútil por muitos, é ideal que você tenha o costume como padrão de qualidade de usar favicon em todos os seus projetos web.

Criando o Favicon

Basta criar uma imagem no formato 16×16 no formato .ico. Boa parte dos designers utilizam o programa Photoshop, entretanto o mesmo não tem como opção original salvar o arquivo na extensão .ico, para isso basta instalar um plugin de acordo com o sistema operacional que você utiliza.

O plugin realmente funciona, mas tem um defeito ruim para quem está preocupado com a performance. O arquivo é salvo nas dimensões 64×64, tornando o tamanho do arquivo maior, dessa forma, prejudicando alguns milésimos de segundos no carregamento de sua página.

Existem diversas maneiras de gerar favicons em tamanho comprimido e de forma ideal, a minha predileta é o www.favicon.cc, que permite a criação e conversão também de outro formato de imagem.

favicon.cc

Caso queira mais opções, segue uma pequena lista:

• http://www.256pixels.com/
• http://favicon2dots.com/
• http://converticon.com/
• http://www.favicontool.com/
• http://www.webscriptlab.com/favicongenerator.php
• http://www.flavicon.com/
• http://www.favicon.co.uk/
• http://www.favicongenerator.com/
• http://www.dagondesign.com/tools/favicon-generator-tool/
• http://www.favicon.ru/en
• http://www.faviconsfor.us/
• http://www.degraeve.com/favicon/
• http://www.antifavicon.com/
• http://www.html-kit.com/favicon/
• http://www.favicon.jp/
• http://tools.dynamicdrive.com/favicon/
• http://www.faviconprime.com/
• http://shaheeilyas.com/favicon/
• http://www.faviconfactory.com/

Usando o Favicon

Por muito tempo na web era necessário a utilização de uma meta tag para que o navegador identificasse o favicon. Felizmente isso mudou, agora basta você inserir o seu favicon.ico no diretório raiz do seu site. Bom proveito.

Sabe aquele trabalho que você precisa o tempo todo editar imagens que acabou de encontrar na internet? Sabe aquela chatice de botão direito, copia, abre photoshop, cria novo arquivo, cola? O Add-On Open With Photoshop (Abrir com o Photoshop) para o Firefox resolve isso para você.

Após instalar o add-on basta apenas clicar com o botão direito e clicar na opção Open With Photoshop. Parece algo bobo, mas quem trabalha em projetos grandes, ou até mesmo na edição de conteúdo para web, sabe o quanto isso aumenta a produtividade.

Abrir com Photoshop

Quem cuida de um blog, site ou portal costuma usar o Google Analytics para saber como anda seu tráfego, sua origem, número de visitantes, taxa de rejeição, páginas mais vistas, dentre muitos outros detalhes importantes. Sem dúvida alguma a ferramenta de análise da Google é a mais utilizada em todo o mundo, com um potencial desconhecido por alguns.

Se em algum momento você já teve interesse de testar outras ferramentas e não sabia por onde começar, eis algumas alternativas a serem usadas além do Google Analytics. É até uma boa forma de comparar dados e conseguir novos resultados a partir dos mesmos.

Mint

Mint

O Mint é um aplicativo online muito referenciado fora do Brasil para análise de dados. Sua maior vantagem em meu ponto de vista é a exibição dos dados em tempo real (fator inexistente no Google Analytics, que tem um delay de várias horas). Foi desenvolvida por Shaun Inman e o valor é de US$ 30,00 por site.

Clicky

Clicky

Apesar de pecar em um dos quesitos que considero importante, o design, a ferramenta Clicky oferece suporte a maioria dos dados também oferecidos pelas outras ferramentas, também exibe informações em tempo real e tem planos gratuitos e pagos, de acordo com a necessidade e condição financeira de cada cliente.

Woopra

Woopra

Mais uma alternativa gratuita. Woopra tem uma abordagem diferente, onde o usuário precisa baixar um cliente desktop para monitor os dados, que também são exibidos em tempo real. Também com sua versão disponível para iPhone e com suporte via chat online, acaba se tornando um grande diferencial.

Reinvigorate

Reinvigorate

Análise em tempo real, visitantes online, aplicativo para desktop e acilidade de uso incrível. Infelizmente não possui versão gratuita, apenas plano de US$ 10,00 mensais, mas convenhamos, é um valor muito pouco para dados tão importantes. Vale a pena (14 dias para teste).

Piwik

Piwik

É adepto de ferramentas open source? Pois esta é a ferramenta ideal para você. Entre suas grandes vantagens, como também oferecer análise em tempo real, tem versões para iPhone e Android, essencial para quem faz muitas viagens ou nem sempre está disponível para seu browser. A única diferença é que você precisa hospedar a ferramenta.

Minimalismo, não se trata apenas de não ter design em um site, se trata de fazer um design excepcional sem precisar de exageros, se baseando apenas no receptor da informação de forma sutil e confortável.

Características de um site minimalista

• Pouca quantidade de elementos
• Plano de fundo de cor chapada
• Máximo de 2 fontes no layout
• Textos utilizam de 2 a 3 cores (contando com a cor atribuida a links) e bem combinadas, claro
• Utilização de grandes espaços em branco para dividir conteúdo
• Não possui uma arte gráfica que ocupe uma área completa como o topo do site
• Objetividade para facilitar a vida do usuário (não os faça pensar)

Bons exemplos de minimalismo

Mais um dia em busca de utilidades para designers e encontrei um post muito legal no Pelfusion. São 10 ferramentas online para gerar backgrounds dos mais diversos tipos. Lembrei automaticamente do início da minha carreira que não tinha muita técnica para fazer os planos de fundo da maneira que eu imaginava. Confira abaixo e bom trabalho:

1. Striped Backgrounds

Striped Backgrounds

2. BG Patterns

BG Patterns

3. Pattern Cooler

Pattern Cooler

4. Stripemania

Stripemania

5. Dotted Background Generator

Dotted Background Generator

6. Background Maker

Background Maker

7. TartanMaker

TartanMaker

8. Tile Machine

Tile Machine

9. ColourLovers

ColourLovers

10. Stripe Generator

Stripe Generator

Lembre-se que essas ferramentas tem como objetivo lhe ajudar e não trabalhar por você. Nada substituirá sua criatividade e mão de obra. Aprenda a fazer, descubra e reinvente.

Criar um layout atraente é uma tarefa que nunca deixará de ser difícil, por mais experiente que seja o profissional. A atraência em um site não provém apenas de um botão bonito, ou um topo bem caprichado. Também envolve a fácil assimilação do usuário, a usabilidade e acessibilidade, dentre muitos outros fatores.

Muitos iniciantes tem uma dificuldade de progredir na criação de um layout por sempre achá-lo estranho. Uma dos fatores que pode influenciar esta impressão são os “buracos” deixados por um layout sem conteúdo. Muitas vezes somos desafiados a desenvolver sites para empresas de ramos que não temos domínio completo do produto, por consequente, menos ainda de textos e explicações sobre o mesmo. Nem sempre ao iniciar um layout o cliente terá um texto pronto para copiarmos e colarmos, por isso a necessidade absoluta de utilizar textos padronizados para que possamos ter uma real noção do resultado final do layout.

No mundo todo, milhares de designers utilizam o Lorem Ipsum como padrão. Caso queira buscar novas opções, confira 5 ferramentas para gerar textos para utilizar na produção do seu novo site.

Fillerati.com

Fillerati

Lorizzle.nl

Lorizzle

Text|Generator

Text | Generator

Fillerama

Fillerama

Corporate Ipsum

Corporate Ipsum

Enganam-se quem pensam que basta inserir um texto “nononononono no no nono“. Isso prejudicará muito o layout e consequentemente a avaliação do cliente sobre o seu trabalho.

A web cresce, fica mais rápida, mais fácil, se renova, INOVA e sugere. Já parou para analisar o que tem mudado durante os últimos tempos? Hoje pela manhã li uma notícia no iMasters: “Google Images ganha reformulação no design”. Esta notícia me lembrou de várias coisas boas para serem analisadas e discutidas.

Google Images com novas funcionalidades

O novo Google Images elimina a paginação, carregando novas imagens apenas ao descer a barra de rolagem. Essa é uma das tendências que mais tem ganhado espaço no meu ponto de vista, e como usuário tenho adorado. Nada mais prático do que não recarregar informações desnecessárias como marca do site, menus, etc. Sabemos da tecnologia de cache que armazena informações no navegador, porém mesmo assim gera alguns segundos de lentidão a mais.

Google Images

As informações das imagens como largura e altura serão exibidas quando o usuário passar o mouse sobre elas. Confira mais detalhes sober o novo Google Images na matéria do Imasters.

Lembrei muito do Add-On do Firefox Cooliris, que é antigo e já permitia a visualiação dos resultados de imagens do Google e de outros sites apenas prosseguindo com a rolagem, agora essas funcionalidades estão sendo aplicadas diretamente nos sites. O add-on também tem alguns efeitos visuais bem bacanas. Download do Cooliris (eu recomendo).

Cooliris

Essa tecnologia de carregamento de conteúdo permite melhor agilidade para carregar e facilita ao usuário rever conteúdos anteriores. Já aconteceu com você de após chegar em uma 5 página de resultado de busca ou de blog você querer voltar algumas páginas? Carregar tudo de novo?

Tendência

O Google já adotou há alguns meses essa forma de carregamento através do Orkut, no bloco de comunidades e amigos não é necessário passar páginas, os usuários carregam a medida que baixar a barra de rolagem.

Um exemplo similar? Twitter, para ver mais posts no microblog basta clicar em um único botão: “more”.

Futuro

A minha pergunta é: Será que o Google também vai adotar o carregamento de mais conteúdo a partir da barra de rolagem nos resultados da web? Eu espero que sim, vai causar uma grande mudança para os profissionais que trabalham com SEO além de fazer um bom movimento no mercado de marketing de busca.

Acúmulo de informações, redes sociais, notícias, feeds, blogs, emails, mensagens instantâneas, são apenas algumas das informações que recebemos todos os dias. Muitas vezes é difícil conciliar trabalho com tanta informação. A todo momento uma carga de novidades chega aos nossos olhos sendo ponto forte para distração e redução da produtividade.

O que deve-se fazer é buscar ferramentas para melhorar a produtividade, permitindo uma melhor execução dos seus trabalhos e consequentemente tendo mais tempo para absorver tanto conteúdo. Reuni alguns aplicativos e dicas úteis para melhorar a produtividade de web designers.

Programa: Focus Booster

Focus Booster

O aplicativo Focus Booster ajuda o profissional caso necessite trabalhar um determinado tempo em um único projeto. O aplicativo funciona facilmente, basta definir quanto tempo irá trabalhar naquele projeto e quanto tempo de intervalo. Como se estivesse ligando um cronômetro. Assim que o tempo acabar você será avisado através de um alerta do programa.

Pre-requisito: Adobe Air
Sistemas: Windows / Mac / Linux

Programa: Klok

Klok

Um dos melhores aplicativos para projetos web. Com o Klok é possível criar pastas para cada projeto, separadas pelas etapas naturais (briefing, design, html, programação), definir quais horários do dia você executará projeto x ou y. Poderia comparar com uma agenda voltada a projetos. Além de anotações, o aplicativo gera um gráfico mostrando quantas horas você trabalhou em cada projeto.

Pre-requisito: Adobe Air
Sistemas: Windows / Mac / Linux

Programa: Fences

Fences

Um programa muito útil para usuários Windows. Através dele é possível organizar o Desktop, criando blocos de conteúdo e rotulando-os. Assim você pode criar as categorias de atalhos de acordo com sua necessidade. Exemplo: trabalho, jogos, pessoal, internet. Para não poluir sua área de trabalho, o programa permite personalização completa dos blocos.

Sistemas: Windows

Site: Remember the Milk

Remember The Milk

Remember te Milk é um site node você registrar suas tarefas. Através do site é possível separar as tarefas nas categorias estudo, pessoal e trabalho, além de definir prioridades. Caso algum do trabalho envolva outros profissionais também é possível compartilhar informações de suas tarefas.

Pre-requisito: Acesso a Internet
Sistemas: Windows / Mac / Linux

Hora para tudo

Quantos feeds de blogs e sites você assina? Já analisou quanto tempo gasta lendo? Essa leitura tem um horário reservado ou é paralela aos seus trabalhos? É importante que ao trabalhar você saiba distinguir qual melhor momento para ler todo o conteúdo de seu interesse e limpar a caixa de entrada do seu email.

Um web designer durante o processo de criação de um layout gasta pelo menos 30% do seu tempo em busca de sites como referência, ícones que se adaptem corretamente ao design, etc. Ou seja, todo o momento você está conectado a internet, cercado de conteúdo. Separe um ou dois horários fixos para checar seus emails, matérias interessantes, conteúdo para estudar. Uma boa dica é sempre favoritar uma página interessante, o que geralmente acontece quando passamos o dia no Twitter. Quando chegar o horário que você separou ou tiver concluído todos os trabalhos, abra a lista de favoritos e aproveite.

Mantenha o foco

Querer abraçar 5 trabalhos simultâneos na tentativa de gerar um melhor faturamento não é uma opção interessante. Ao manter toda sua atenção em um único trabalho a execução do mesmo ocorre de forma mais rápida e eficiente. Sendo assim a probabilidade de concluir 5 projetos, trabalhando apenas 1 de cada vez, será bem maior do que trabalhar simultaneamente.

Lembre-se que a linha de raciocínio interfere muito em soluções de um site. Evite quebrar essa linha de raciocínio a todo custo.

Conhece outros programas ou tem dicas para melhorar a produtividade de um profissional web? Compartilhe, comente.

Sempre que um novo projeto está começando a ser desenvolvido na web são feitos muitos questionamentos no briefing e no decorrer do processo criativo. Anteriormente publiquei um artigo chamado “Design Versus Conteúdo” que é um dos debates feitos na hora de decidir o foco para determinado produto ou serviço a ser vendido.

Você já ouviu falar sobre experiência do usuário? Sabe qual sua verdadeira utilidade e importância? Essas e outras perguntas surgem frequentemente entre desenvolvedores e designers.

Experiência do usuário é a maneira na qual os visitantes do seu site (usuários web) conseguem acessar, navegar e assimilar seu conteúdo, produto e informação, ou seja, para uma boa experiência de usuário é importante que você tenha um site rápido no carregamento e de fácil compreenssão.

Para conseguir um site que proporcione uma boa experiência de usuário o primeiro passo é pesquisar cases de sucesso, conhecer de perto o produto ou serviço a ser vendido e identificar o público-alvo do seu site. O design é peça chave, sendo assim, dependendo do grau de instrução e praticidade que o usuário tiver na web, será possível fazer um layout mais arrojado ou minimalista.

Conseguir fazer com que o usuário não precise pensar também é uma ótima escolha, desde que não torne informações repetidas e por algumas vezes inúteis.

Design

Não é preciso ser um desenvolvedor web para saber que um design atraente colabora muito para o sucesso. Isso ocorre todos os dias em nossas vidas, ao comprar uma roupa, ao escolher um carro, etc. A escolha de um produto envolve a sua função, importância e beleza, de maneira que possamos nos sentir satisfeitos em todos os aspectos.

Boas referências:

• Checklist Melhores Práticas de Design para Web (em Inglês)
• Planos de Fundo em Design para Web (em Inglês)

Usabilidade

A experiência do usuário também está diretamente ligada a usabilidade de um site.

Boas referências:

• Introdução e 6 Fatores para Aumentar a Usabilidade do Site
• Como melhorar a usabilidade de um site?
• Melhore a legibilidade do seu site com margens

O exemplo: Google

Seja no buscador ou em uma de suas dezenas de produtos, a Google relaciona seu design baseado em dados para obter melhores resultados. Várias pessoas dizem: “o Google é feio”. A empresa Google prioriza o design minimalista, com informações claras e navegação fácil.

Por mais que não hajam elementos gráficos surpreendentes, o buscador Google cumpre o que promete. Seja um usuário web antigo ou alguém que acaba de colocar internet em casa, nunca presenciei alguma história de alguém que não conseguisse navegar pelo Google. O mesmo se repete aos outros produtos, obviamente que cada um com seu nicho e tipo de usuário específico.

Recentemente o buscador tem passado por fases de teste de um novo design, com alguns elementos mais atraentes, confira site da Info.

Novo design do Google

É um privilégio acompanharmos essa transição para entendermos como o comportamento dos usuários da internet tem se comportado.

Testes

Fazer o teste de um novo site é uma tarefa simples, porém trabalhosa. Procure pessoas próximas a você com diferentes níveis de experiência em navegação. Pessoas mais jovens e mais velhas, se possível com diferente grau de instrução. O resultado será mais satisfatório para um determinado grupo de pessoas e no outro grupo estarão pessoas que não conseguiram navegar bem ou até mesmo entender como adquirir seu serviço ou produto.

Após selecionar tais pessoas, pesquise com elas os objetivos que foram atingidos:

• Compreensão do produto ou serviço
• Conseguir navegar diante das informações sem se sentir “perdido”
• Encontrar uma informação específica sugerida por você (que não esteja em muita evidência)

Caso a maior parte das pessoas selecionadas consigam compreender e gostar de navegar no site, parabéns, você está no caminho certo. Deverá então analisar as falhas, as críticas que surgiram e os resultados que não foram atingidos.

Além dos testes com usuários, que são o principal foco, também é importante fazer testes em sites de validação de códigos e padrões web como o W3C.

Trabalho Contínuo

Não basta apenas conseguir um bom resultado de início, a cada mudança mínima no seu design é necessário analisar todos os resultados novamente. Um único bloco de informação ou alteração de cores pode fazer total diferença nesse momento. Acompanhe diariamente cada resultado obtido e não tenha medo de tentar diversas estratégias várias vezes.