Tag Archives: internet

Mobile web design – dicas, boas práticas, usabilidade, tendências…

cellphone A Smashing Magazine publicou no começo da semana um artigo muito bom titulado Mobile Web Design Trends For 2009.

O artigo é bem completo e trata de vários pontos cruciais em desenvolvimento para mobile web.
É comentado sobre o crescimento da velocidade da internet para os dispositivos móveis e com isso a maior liberdade de uso de imagens e até vídeos….
Também se fala um pouco do uso de sub-domínios como m. ao invés do .mobi (assunto bem discutido pelo Eric Santos [Que endereço escolher para o meu mobile site?] e pelo Beto Toledo [Qual o domínio certo para um site mobile?])
Traz as dificuldades que os designers têm com a variedade de tamanhos de telas e o celular como novo meio e mídia….
Mostra algumas dicas técnicas e não-técnicas para o desenvolvimento de mobile sites como o bom uso da linguagem até conhecer seu público-alvo. Mais sobre isso, recomendo também a leitura do meu post sobre “Criação de mobile sites com uma boa arquitetura da informação”.
Para fechar, recomendações sobre testar sua criação em várias ferramentas e validadores mostram como é importante dar valor a todas boas práticas para garantir o sucesso na maioria de aparelhos.

O que sempre digo: criar mobile sites não é um bicho de 7 cabeças, apenas é necessário conhecer as limitações desse mundo e sempre ter em mente todas boas práticas.

Ainda hoje li dois bons artigos da Talita Pagani no Outrolado: Websites para mobile não são miniaturas dos sites convencionais – parte 1 e parte 2. Fica a dica…

[update]
Três sugestões do Guy:
Effective Design for Multiple Screen Sizes
Mobile App Design: Getting to the Point – Part I
Mobile App Design: Getting to the Point – Part II

[enquete] Usabilidade: rolar a página (scroll) ou navegar em links (click)?

Muitos sites têm bastante conteúdo para entregar aos seus visitantes, sejam estes conteúdos do mesmo assunto ou de diferentes.
Agora, qual a melhor opção para ver estes conteúdos? Ficar rolando a página para baixo e lendo muitos parágrafos ou ir navegando em páginas??

Estou criando uma enquete para essa questão de usabilidade. Não estou me referindo a links do tipo “leia mais” muito utilizado em blogs, mas sim separação de capítulos por exemplo.


Para ter/ver mais conteúdo de um site, você prefere:

ficar rolando a página para baixo.
navegar e clicar em vários links.

Votar
resultado parcial…

Com uma pesquisa rápida no google, achei dois textos interessantes sobre a questão:
A Convergência das Mídias: Estudos de usuários (estudos sobre clicar vs rolar no meio da página)
Usabilidade & Arquitetura da Informação: Clique vs Scroll: “Leia Mais” em Blogs (Parte 2 de 4)

Deixem seus comentários sobre o que acham melhor!

Novidades… pedrobachiega.com… novo tema…

Leitores, amigos…
Alguns já perceberam que as coisas estão mudando por aqui.

Comprei o meu domínio pedrobachiega.com que está hospedado na DreamHost. Deu bastante rolo mas depois explico tudo que fiz e deixo as dicas.

Criei e implementei um novo layout para meu blog com o tema sunset.
Por ter algumas particularidades de CSS3, algumas coisas ainda não funcionam no IE, por isso recomendo acessar pelo Firefox ou pelo Safari para uma melhor visualização.
Não sou designer mas me esforcei e espero que gostem!

Quero agora voltar a trabalhar no meu plugin para versão mobile do wordpress e corrigir bugs, implementar melhorias…

Pretendo criar/implementar outras melhorias para o blog, como colocar microformats, novos plugins…

Tenho algumas páginas do meu domínio para fazer também, colocar meus projetos, etc.

E além de tudo isso, mas não menos importante, quero voltar a escrever com mais frequência por aqui.
Então, fiquem ligados no blodd

Criação de mobile sites com uma boa arquitetura da informação

mobile site styles

Alguns fatores como telas maiores e acesso a rede WiFi, tornaram o acesso à Internet por dispositivos móveis bem mais comum nos dias de hoje e o número dos sites para esses dispositivos também têm aumentado. Mas acesso desktop e acesso mobile são bens diferentes e não podemos simplismente miniaturizar nossos sites.

Com o lançamento do iPhone e sua revolução na interface dos celulares, telas touch screen mais presentes, o avanço nas tecnologias dos mini-bowsers, melhores planos de dados pelas operadoras, redes WiFi mais presente e até mesmo a 3G começando no Brasil, a necessidade do acesso a Internet e sua vasta gama de serviços a qualquer momento e em qualquer lugar agora pode ser resolvido com seu companheiro 24hs, seu celular!
Mas você pensa: “Acessar com meu celular? Acessar meus blogs favoritos, meu e-mail e muito mais?? Ta louco… isso vai ser muito ruim (‘caso seu celular não seja tão novo e ainda tenha tela pequena’), demorado e caro!!!”
E é nessa hora, que quem desenvolve serviços e conteúdos na internet, tem que pensar em como disponibilizar isso para os celulares. Estudar seu caso, seu serviço, seu site e seu público já faz parte da criação de websites, mas muito também tem que ser analisado para versões acessíveis por outros dispositivos além dos browsers desktop.

Criação de interfaces
Você está criando seu website e tem que fazer uma versão mobile. É simples, não? só fazer um CSS diferente, com o conteúdo em uma coluna só e está pronto certo? Ao menos que seu site tenha poucos páragrafos de conteúdo e uma ou outra imagenzinha só, não é tão fácil não.
Imagine na dificuldade de leitura e navegação por celular em um site com um monte de conteúdo. Imagine nos gastos para baixar várias imagens e até mesmo vê-las tendo que navegar para o lado e para baixo se forem grandes.

No mercado existem vários modelos de celular com tamanhos diferenciados de telas, e, dependendo do seu conteúdo, você precisa adequá-lo conforme as restrições destes tamanhos.

mobile screens area and size

Muitas soluções existem para vários problemas relacionados a esse tema.

# Descobrindo as características do celular que está visitando seu site (vou abordar esse tema outro dia), você pode simplesmente apresentar seu site com uma coluna de conteúdo e sem imagens para celulares com telas pequenas ou posicionar melhor os elementos para telas maiores.
# Muitos celulares usam navegadores nativos, mas os mais modernos usam versões mais sofisticadas de mini-browsers do Opera, Safari e Internet Explorer. Geralmente esses mini-browsers tem sua própria renderização do conteúdo para adequar ao tamanho da tela, mas isso muitas vezes é apenas um zoom out ou uma minituarização do site. Pode também ser preciso descobrir esses casos para fornecer versões diferenciadas.
# Celulares geralmente tem problemas com cores e até imagens em background, assim como restrições totais ou parciais de tipos de conteúdo e Javascript, então sempre é recomendado aplicar estilos simples tomando cuidado com tonalidades de cores e usar o mínimo de Javasript ou mesmo descartá-lo.

Seu conteúdo e seu público
Você pode ter deste um pequeno site pessoal com algumas informações até um portal provedor de notícias e serviços, e cada caso tem seu conteúdo e seu público. Analisar quem você atinge e com o quê traz a necessidade de diferentes versões mobile de seu site.

Ao menos que acesse via WiFi ou tenha planos de dados, infelizmente acessar a internet pelo celular é caro e ainda lento. Sites para dispositivos móveis devem ser pequenos/leves, diretos e com boa navegação/usabilidade.
<< Sites com pouco conteúdo
Tente especificar/separar seu conteúdo e ter uma lista das opções para um acesso rápido e direto.
<< Sites de notícias, blogs
Minimize o tamanho das páginas com listas das categorias e dos itens do seu conteúdo. Apresente resumos pequenos antes de mostrar todo o texto.
<< Serviços
Selecione poucas (e simples) funcionalidades possíveis para o celular. Deixe de forma direta ações frequentes como por exemplo buscas ou filtragens.

Os usuários agem diferentes dependendo do ambiente ou contexto que estejam e seu site/serviço pode ser muito dependente disso para ter sucesso.
>> Visitante casual
Uma pessoa pode estar navegando em seu site para conhecê-lo ou obter informações a respeito, pode simplesmente estar passando. Se você não precisa prendê-lo ao site, dê a ele uma boa experiência e boas informações.
>> Visitante frequente
Caso tenha um blog ou um serviço de notícias por exemplo, você deve analisar o caso dos visitantes que sempre vão voltar, e para eles você tem que fornecer uma boa navegação e uma apresentação leve para não cansarem e deixar de acessar seu site.
>> Visitante apressado
Imagine uma pessoa que precise de uma definição de uma palavra, ou um telefone em 5 minutos. A versão mobile do seu site/serviço deve facilitar e agilizar o acesso ao o que o usuário precisa.

Pela limitação de recursos, para criar um site acessível por dispositivos móveis é preciso estudar o seu caso e ter uma boa noção de arquitetura de informação. Nunca pense que é simplesmente “minituarizar” seu site!

Apesar de ter ficado grande o texto, não me aprofundei muito no assunto. Tem muita coisa sobre esse tema ainda. Em breve escreverei mais sobre isso.
Adoraria ter um discussão construtiva sobre o assunto, então deixe o seu comentário.
Quem quiser saber mais também, eu tenho vários links bons sobre o assunto.

FriendFeed – rede social de lifestreaming

FriendFeed

FriendFeed é mais um serviço da Web 2.0 que faz lifestreaming dos seus conhecidos e amigos. Conheça ele e o meu.

OK, vamos por partes.
O conceito de lifestreaming vem da idéia de concentrar todas as atividades e conteúdo produzidos por uma pessoa. O Wasabi foi um serviço que tentou fazer isso há um bom tempo atrás mas não era sua hora ainda. Hoje, tanto Facebook como Orkut, já fazem isso mostrando as atualizações dos usuários.
O Tiago Dória falou bem sobre no futuro seguiremos pessoas e não apenas blogs, vale uma pasada por lá.

Ta certo, então, juntar conteúdo gerado por pessoas?
Blogs, RSS’s estão crescendo tanto na Internet que é impossível de acompanhar o fluxo tão grande de informações. Para resolver isso, tentamos agrupar os que mais nos interessam em agregadores, como Netvibes, e facilitar um pouco. Mas, ainda sim, não temos 6 horas diárias livres para ler tudo (ou vocês têm??? 🙄 ).

Todos temos conhecidos, amigos, companheiros de trabalho que muitas vezes tem os mesmos interesses de leitura, seguem os mesmos blogs, etc, então é bem mais fácil ver o que eles estão lendo e recomendando, ou seja, já filtraram os conteúdos.
Então, com ferramentas agregadoras de feed’s, como Google Reader e Netvibes, podemos ir publicando o que nos interessa para compartilhar com outras pessoas.

Mas, a Internet tem muitos mais… Daí, com o FriendFeed, você cadastra suas contas de del.icio.us, Flickr, twitter, blogs, Last.fm, Youtube e muitos outros serviços para mostrar ao mundo o que anda fazendo, lendo, vendo.
E, encontrando seus amigos, você vê o que eles estão fazendo…
O serviço está crescendo bastante e muitas outras ferramentas para ele estão surgindo.

Pessoalmente só tem uma coisa que não gosto nele: não dá pra filtrar serviços que eu não queira ver. Por exemplo, o pessoal escreve muito no twitter e isso polui muito o conteúdo, fica ruim de acompanhar…

Pessoal que já falou e está no FriendFeed:
Elcio Ferreira
Luiza Voll
Fábio Seixas
Terence Reis
Tiago Dória
muitos outros…

É isso aí pessoal, a Internet vai engolir a gente ainda com tanta coisa (ou já engoliu?).

Links
FriendFeed Pedro Bachiega
Atividades do Netvibes Pedro Bachiega
Netvibes Pedro Bachiega

Serviços de rádios online, playlists e players de mp3

Um dos posts que mais tiveram acesso aqui no blog foi o do MP3 playlist com Ivoon.
Nele eu falei do Ivoon que é um diretório de músicas que os usuários mandam e podem adicionar em suas playlists.
No começo o serviço deu um boom e teve alguns problemas de escalabilidade, mas superou e muitas melhorias foram feitas, por exemplo, organizar a ordem de sua playlist.
[update] A galera criou um script mais completo para distribuir e publicar o player da galera. Ele gera código pra WordPress, Netvibes, TypePad, MySpace, Facebook, Orkut e outros…

ivoon

Clique para ampliar

Bom, mas estou aqui pra falar de outros serviços dessa vez.

Primeiro tem o Musicovery e o musicmesh. Dois serviços que trazem como carro chefe a relação entre os tipos músicais dos artistas e bandas.
Musicovery tem uma interface bem bacana.
musicmesh traz algumas informações e vídeos das músicas que estão rolando.

Depois tem o Spool.fm, que traz mais o conceito de rádio online. Bem bacana as informações que ele traz e parece que cruza-as com o Last.fm, incrementado mais ainda seu poder. Tem uma coisa legal também de você passar um link pra um amigo e ele escutar o que você está escutando.

Tem também o eSnips, que é uma rede de comunidades, tanto de playlists e músicas como imagens, vídeos e outros…
Não mexi muito ainda, mas a Orli do Go2Web2.0 escreveu um post muito bom do serviço e do compartilhamento pelos usuários dele. O serviço dá 5GB de espaço free para compartilhar mp3’s, vídeos, fotos e afins.

A Orli sempre dá altas dicas de serviços estilo ‘Web2.0’.
Pro contexto, tem por exemplo essa lista de serviços relacionados a música e mp3.

E vocês, usam o que? Alguma rádio online, serviço de compartilhamento ou ficam no Winamp com músicas locais mesmo?? Deixem seu comentário.

Encontro de blogueiros de Florianópolis – I Blog Boteco Floripa

Poxa, fiquei muito contente quando o Tiago, me mandou o link do I Blog Boteco Floripa, encontro de blogueiros da ilha…

O evento será no Chopp do Gus, no sábado 08/03, mas infelizmente não vai dar pra eu ir…

Tem um pessoal confirmado já, e acho que vai ser bem bacana… Quem puder ir, não perca.
Espero as notícias depois…

Saiba mais sobre o encontro.