Pronto, agora temos uma fonte mais rica de informação do que somente os links do sidebar aqui do lado. →
E aguardem! Temos mais planos para esta recém-inaugurada página. Breve acabaremos com o suspense...
Nosso filhote está crescendo e se tornando um homenzinho! :)
Há pouco mais de uma semana eu e o Leandro redesenhamos a página inicial do Be on the Net e ela ficou assim:
Para efeito de comparação, antes ela era assim:
Na nossa opinião, a página inicial do Be on the Net melhorou muito com este exercício. Mas, meu objetivo aqui não é falar tanto sobre o resultado final, mas sim sobre o exercício que nos conduziu a ele. Experimentamos uma técnica que nunca tínhamos usado e deu certo.
A estrutura do exercício
Para simplificar e acelerar a conversa, desenhei um retângulo no quadro branco que seria usado para experimentar idéias para a nova página. Do lado esquerdo dele, coloquei três palavras que resumem a essência da mensagem que queríamos transmitir, ao lado de tópicos importantes que também deveriam ser tratados. Em seguida, imprimi as páginas iniciais de vários sites que consideramos interessantes. Elas foram coladas no quadro, com fita crepe, em torno do retângulo que mencionei antes. Veja:
Talvez fique mais fácil identificar cada parte com as legendas abaixo:
Em busca de inspiração
As imagens acima mostram o exercício já em sua fase mais avançada. No início o retângulo que chamei acima de área de trabalho estava vazio.
Começamos o exercício analisando os sites que havíamos impresso. É importante mencionar que não estávamos interessado no conteúdo completo da página inicial dos sites. Só queríamos projetar aquela parte da página que aparece à primeira vista, assim que entramos em um site. É uma área de aproximadamente 960 x 630 px, considerando-se uma resolução de 1024 pixels e as devidas perdas com barra de rolagem, barra de programas etc.
Avançando de página em página dos demais sites, eu e o Leandro nos perguntávamos: o que há de bom no design dessa página? O que não funcionou bem? Por que?
Um detalhe importante é que estávamos acomodados em puffs bem confortáveis, a uma distância de uns três metros do quadro. Isso era o suficiente para não conseguirmos ler cada detalhe do que estava escrito nas páginas. Em princípio, isso seria ruim, mas logo revelou-se uma das melhores partes do exercício, praticamente por acaso.
Efeitos inesperados
Logo que começamos o exercício, percebemos que os tamanhos das fontes importam bastante, além do posicionamento dos elementos. Quando olhávamos para sites que tinham muito texto na primeira página, a única coisa que conseguíamos ver era um borrão onde havia o texto. Se a fonte fosse suficientemente grande, como em um título, por exemplo, a gente conseguia ler o título. Caso contrário, era apenas um borrão.
Isso acontecia com a própria página do Be on the Net que estávamos tentando mudar. Olhando à distância, ela ficava assim:
Logo me dei conta que isso não acontece apenas quando olhamos a página à três metros de distância. Efeito semelhante tende a acontecer assim que o visitante entra no site pela primeira vez. Nos primeiros três segundos, a pessoa tem uma impressão geral da página que está visitando. Dependendo dessa impressão, ela fica um pouco mais ou simplesmente navega para outro site.
Três segundos é pouquíssimo tempo (se é que chega a tanto). Então a pessoa só passa o olho. Na parte em que o texto é pequeno e abundante, tudo o que ela vê é um borrão. Portanto, esse texto é inútil nesses primeiros segundos. Pior, ele é um desperdício de espaço, que poderia ser melhor aproveitado.
Construção do texto
As percepções que obtivemos na primeira parte do exercício, quando analisamos cada um dos sites na nossa frente, nos ajudaram a compreender que é necessário eliminar tanto texto quanto possível e focar apenas no essencial. Daí começou a parte mais difícil, que foi escrever o texto zilhões de vezes, eliminando cada vez mais, até que não tivéssemos mais o que tirar.
O texto final, que pode ser visto se você desabilitar o CSS, ficou assim:
"Seu negócio encontrado, adorado, disputado. Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas. Só R$ 99 por mês. Peça o seu."
É óbvio que há muito mais a se explicar sobre o Be on the Net. Mas, essa é a essência. Repare que a maior frase é:
"Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas."
Para facilitar a leitura e dar destaque às partes, criamos quadrados coloridos, nos quais colocamos cada parte da frase. Jogando com spans e CSS, eliminamos as pontuações da frase. Embora elas possam ser vistas normalmente, se o CSS não estiver habilitado. Com isso, o site transmite a mensagem adequadamente, mesmo quando o CSS não está presente.
De um modo geral, procuramos utilizar fontes em tamanho grande, justamente para evitar que o texto ficasse "borrado" se visto de longe ou na correria. Isso só foi possível porque reduzimos absurdamente a quantidade de texto.
Finalização
O redesign consumiu pouco mais de dois dias. No primeiro, fizemos esse exercício no quadro que nos ajudou a alcançar a idéia rapidamente. O Leandro foi para o Photoshop e montou uma imagem representando o que viria a ser a página.
Depois do primeiro dia, o Leandro consumiu outro dia e meio para fazer o CSS e, voilà, agora temos uma página inicial bem melhor!
O que aprendemos
Mais uma vez, percebemos o poder de um quadro branco bem utilizado. Colocar tanta informação quanto possível na nossa frente, em um quadro ou uma parede, ajuda muito. Além disso, fazer a modelagem de uma solução em conjunto com outra pessoa ou outras pessoas, acelera bastante as coisas.
Olhando os demais sites pudemos perceber a importância de cada detalhe e isso nos levou a uma preocupação maior com os detalhes do que estávamos construindo. Isso é particularmente verdadeiro no que diz respeito ao texto. É possivelmente a parte mais difícil: encontrar as palavras certas, na medida certa.
Gostamos muito do exercício e voltaremos a usá-lo outras vezes para aprimorar as demais partes do site, incluindo o restante da página inicial.
Se o Be on the Net fosse um recém-nascido feliz e saltitante, ele se pronunciaria mais ou menos assim:
Nas próximas semanas, todos os dias o site do Be on the Net vai ganhar uma pequena melhoria de design.
Pois é. Nesta 38ª iteração do Sistema Be on the Net, estamos começando também a uma segunda fase de design do site. Nas próximas semanas, todos os dias o site do Be on the Net vai ganhar uma pequena melhoria de design. Um ícone novo, um alinhamento melhorzinho, um sombreado estiloso aqui, uma tipografia aprimorada ali.
Por isso convidamos você a visitar o site do Be on the Net uma vezinha todo dia, e ir curtindo as novidades. Quem sabe você não fica com água na boca e adquire o seu? :)
Publicado por Vinicius Manhães Teles há
aproximadamente 1 ano.
Compramos templates imediatamente por R$ 500. E essa é só uma das 4 formas de se dar bem com o Be on the Net!
Há duas semanas descrevemos como designers poderiam trabalhar conosco para viabilizar os sites que começarão a ser criados sobre o Be on the Net a partir de dezembro. De lá para cá, conversamos com inúmeros designers que não só se interessaram pela proposta, mas também deram muito feedback útil.
Com base nas conversas, percebemos que o modelo inicial que havíamos idealizado não seria dos melhores. Aproveitando o feedback recebido e ponderando mais sobre o assunto, definimos uma nova forma de atuação que nos parece melhor e ao mesmo tempo mais simples. Conversas com designers nos últimos dias confirmaram que este caminho é mais promissor. Então, vejamos as quatro formas de se dar bem com o Be on the Net, caso você seja um designer.
Estamos comprando templates. Até o dia primeiro de dezembro, aquele que estiver a fim de criar um template para o Be on the Net poderá fazê-lo e nos enviar. Se gostarmos (e queremos muito gostar), iremos comprar seu template pelo valor de R$ 500,00. Se você fizer vários e nós gostarmos, compraremos todos eles, cada um ao preço de R$ 500,00. Detalhes operacionais virão mais abaixo.
O acordo para a compra de um template implica que ele será disponibilizado para os clientes do Be on the Net como Creative Commons Atribuição 2.5 Brasil. Assim, eles poderão adotar o template que preferirem para seu site e não terão que pagar nenhuma taxa de setup ou adesão para começarem a usar o Be on the Net. Basta escolher o template e colocar o site no ar. Sendo que há um detalhe essencial. Seu template, uma vez comprado por nós, ficará exposto no site do Be on the Net e o seu nome estará lá, como autor do template. Isso não é tudo. Seu nome terá um link para o seu site, blog, ou onde quer que você exponha seu trabalho. Queremos que todos saibam quem fez cada template e tenham condições de chegar até você facilmente. Em suma, queremos promover seu trabalho!
Quando um cliente do Be on the Net escolher seu template e o site dele for ao ar, seu nome aparecerá na parte inferior de cada uma das páginas do site como responsável pela criação daquele layout. Mais uma vez, seu nome estará com um link para a sua página na internet. Não precisa dizer que o objetivo, de novo, é te promover. Detalhe importante é que seu page rank no Google tenderá a subir, já que haverá um link para o seu site em cada uma das páginas de cada um dos sites que usarem seu template. E, quanto melhor o template, mais clientes do Be on the Net tenderão a usá-lo. Só para dar idéia dos números, o Be on the Net só será lançado mês que vem e a fila de espera já tem quase 200 pessoas!
Este é um pouco mais de médio prazo, mas é importante saber desde já. Dentro de alguns meses lançaremos planos de revenda. Através deles, você poderá fazer sites para seus clientes usando a infra-estrutura do Be on the Net, mas com condições especiais para você. Com isso, você poderá se livrar da parte técnica de fazer um site para um cliente, dedicar-se apenas ao design e ainda faturar uma grana através de mensalidades. Detalhes sobre a forma de operacionalizar isso virão em um futuro próximo, mas acreditamos que esta modalidade pode vir a se tornar uma forma fabulosa de gerar receita para designers em todo o Brasil. E o que é melhor, receita repetível, através de mensalidades.
Não queremos que clientes e designers tenham que se preocupar com a infra-estrutura de um site, por isso cuidamos desta parte.
Nossa visão do Be on the Net segue algumas premissas bem definidas:
Não queremos que clientes e designers tenham que se preocupar com a infra-estrutura de um site, por isso cuidamos desta parte.
A melhor forma de produzir sites bonitos e funcionais é atraindo os melhores designers para formarem um ecossistema em torno do Be on the Net. Para isso, é essencial que eles possam se beneficiar tanto quanto possível do Be on the Net e possam se promover através dele.
A Improve It deve fornecer uma alternativa simples e rápida para que os clientes do Be on the Net coloquem um site no ar. O uso de templates é importante neste sentido. Mas, é essencial que clientes do Be on the Net e designers tenham liberdade para interagir e fechar acordos de serviço entre si, para que os clientes interessados em layouts personalizados possam tê-los. Nada melhor que fazer com que estes clientes tenham acesso fácil às pessoas que bolaram os templates que estão no Be on the Net, as quais, portanto, já conhecem o modelo de trabalho e sabem o que precisa ser feito.
Tá interessado? Quer saber quais os próximos passos?
Se você se interessou, há três coisas a fazer.
Entre em contato conosco para nos informar que você tem interesse em preparar um template para o Be on the Net. Ao fazer isso, envie-nos todas as informações de contato que você tiver. Para nós é particularmente importante, além do email e telefone, o seu usuário no Skype. Se não tiver um, por favor crie e assegure-se de ter um alto-falante e microfone conectados ao computador. Skype é uma de nossas formas de comunicação preferida, por ser bastante eficaz e não ter nenhum custo. É essencial que você envie seus contatos, para que nós também possamos te enviar os nossos emails, Skype, GTalk etc. Queremos que você nos encontre facilmente para tirar qualquer dúvida que apareça.
Você precisará conhecer os HTMLs que compõem um site típico no Be on the Net. Para isso, criamos um projeto no GitHub, onde você encontrará os arquivos e instruções necessárias. Se você não sabe o que é o GitHub, não se preocupe, basta fazer o download dos arquivos. Mas, se você sabe usar o GitHub, acompanhe o projeto e faça um clone dele.
Mãos à obra. Lembre-se de que precisamos receber os templates até primeiro de dezembro. É possível que aceitemos novos templates após esta data, mas a prioridade é primeiro de dezembro.
Neste momento já há um grupo de designers que está trabalhando na criação de templates. São aqueles com os quais conseguimos conversar nas últimas duas semanas. Nosso objetivo é ter o máximo de templates possível até primeiro de dezembro. Pode parecer que trata-se de uma concorrência, dada a quantidade de pessoas que já têm interesse nisso e as próximas que terão a partir deste post. Entretanto, o objetivo não é criar uma competição. Não queremos que ninguém seja eliminado. Pelo contrário. Queremos, tanto quanto possível, aproveitar o trabalho de todos.
Isso não significa que vamos aceitar trabalhos que estejam aquém do que desejamos, mas sim que iremos dar o máximo de orientação a vocês para que compreendam o que estamos buscando. Se alguém nos submeter algo que não aprovarmos, não iremos simplesmente rejeitar. Vamos explicar o que pode ser feito para chegar onde desejamos. Vamos ajudar cada uma de vocês ao máximo para que o trabalho chegue ao ponto de ser aprovado e seja incorporada na base de templates do Be on the Net. Acredite, se você quiser participar disso, você pode e nós vamos ajudar no que for necessário.
Até pouco tempo atrás eu acreditava fortemente que o Be on the Net poderia fazer uma enorme diferença nos negócios dos nossos clientes. Mas, cada vez mais, percebo que isso também vale para os designers que embarcarem neste projeto, sobretudo os que fizerem isso logo. Acreditem, vocês terão muitos, muitos, muitos negócios pela frente! E, no que depender de nós, faremos o que estiver ao nosso alcance para que isso aconteça. Então, mãos a obra!
Publicado por Leandro Mello há
aproximadamente 1 ano.
Estamos procurando um grupo de excelentes designers com quem possamos manter um relacionamento duradouro. E você pode ser um deles.
Nosso produto em desenvolvimento, Be on the Net, está avançando rumo a seu lançamento.
Se depender do número de pessoas interessadas nele, podemos dizer que já somos um potencial sucesso: hoje, mais de cento e cinqüenta pessoas aguardam ansiosamente em nossa lista de espera para terem um site lindão só seu.
Assim que o Be on the Net for lançado, atenderemos estas pessoas uma a uma, para dar a elas layouts simples, belos e personalizados. Para a fila fluir, vamos adotar a seguinte prática: o cliente da vez vai passar dois maravilhosos dias em contato conosco para, todos juntos, darmos saída ao design lindão dele. Mas só isso: dois expedientes. Depois disso, venha o próximo da fila. Para ela fluir, como dissemos.
Puro CSS
Para a fila fluir mais ainda, é aí que você entra. Be on the Net é um aplicativo web que já tem HTML e JavaScript prontinhos para o usuário, só precisando de seu CSS para deixar o site com a cara do cliente. Portanto, estamos a partir de agora convocando webdesigners de todo o Brasil para faturar dindim com o que sabem fazer de melhor: puro CSS.
A dinâmica e as possibilidades
Funciona assim: os designers desse Brasil — você, por exemplo — vão oferecer, assim como nosso designer, um freela de dois dias para uma pessoa da nossa lista de espera. Ao final de dois expedientes, o cliente sai com design pronto, paga um troquinho atraente para ele, você sai com grana e a Improve it, com uma comissãozinha simbólica. Simples assim.
E é aí que entram as possibilidades! Há várias maneira de você fazer grana com o Be on the Net!
Você pode:
Passar seu mês ajudando-nos com design:
Se você é um freelancer que tem bastante tempo disponível para pequenos sprints de dois dias, pode faturar com a quantidade de layouts por mês — supondo que você trabalhe dois dias da semana, passe um dia fazendo a faxina e passe os últimos dois dias com o cliente seguinte, são dois clientes por semana, oito por mês. Um único layout dá um troquinho, mas oito dão uma grana! Dá para basicamente viver de CSS para Be on the Net.
Virar uma máquina de produzir design:
Se você se considera uma máquina superpoderosa de design, pode realizar a proeza de completar um layout em um único dia. Neste caso, acontecem mais coisas boas: o cliente leva um desconto, mas você não recebe menos: recebe a mesma coisa que em dois dias. E em vez de oito layouts por mês, pode conseguir até dezesseis. Fatura o dobro.
Revender Be on the Net para seus clientes:
Seja você freelancer ou empregado numa agência de imagem ou design, você pode incorporar à sua carteira de clientes o Be on the net. Ou seja, faz (ou refaz) os sites para seus clientes com seu CSS bonitão sobre nossa estrutura. Neste caso, você nos paga as mensalidades dos Be on the Net’s de seus clientes e faz lucro com o seu preço de revenda. E não precisa ficar que nem um tarado fazendo um layout por dia.
Se você e seu cliente entrarem em comum acordo de ceder o design como Creative Commons e o dispolibilizar como template para futuros clientes no site do Be on the Net, vocês dois são recompensados e saem ganhando ainda mais (detalhes adicionais nas próximas semanas).
Estas são as formas mais básicas de ganhar dinheiro. Mas há mais possibilidades! E se você faz vários layouts por mês em um dia cada um, e seus clientes todos concordam em ceder como Creative Commons? Putz, enxurrada de dinheiro! E por aí vai.
Que poderes você deve ter
Simples: os poderes que qualquer ninja teria. :-) O Be on the Net funciona sobre um código XHTML 1.0 Strict válido e um JavaScript impecável. Para você figurar entre nosso grupo seleto de designers, gostaríamos que tivesse o mesmo carinho com seu design, orientando-o plenamente aos web standards. O que você precisa:
Usar CSS3 válido;
Esquecer tabelas. O HTML já vem pronto, totalmente tableless, para você estilizar com a fluidez que quiser;
Esquecer Flash. Flash é muito, muito lindo, e só. O Be on the Net não usa Flash, só puro CSS;
Fazer um design totalmente cross-browser. IE6 e 7, Safari, Firefox, Opera, Flock, Chrome, Camino, Konqueror, e por aí vai (mas fique à vontade para fazer firulas não-essenciais nos que forem standards-compliant, hehe!);
E claro, ter um layout final de dar água na boca. Esquema de cores agradável, tipografia legível, diagramação de encher os olhos, e a bela e sempre bem-vinda simplicidade. Que beleza.
Para terminar... por enquanto
Ainda há muito a decidirmos sobre dindim. O preço que o cliente vai pagar nestes dois dias de setup, o desconto que ele vai levar se terminar em um dia, o que você vai ganhar a cada trabalho e o que vamos ou não receber como comissão, isso tudo ainda está em definição.
O que buscamos é alinhar interesses — o que o cliente paga é leve e bem atraente; ele ganha o Be on the Net dele logo, sai feliz o quanto antes e colhe os lucros de seu novo site em pouco tempo; o tempo curto inspira-o a pensar em simplicidade e a se preparar para ajudar você, no melhor estilo “menos é mais”; você recebe uma baita grana associando criatividade de ação, qualidade e quantidade — se você é bom, queremos você por perto como freela mais vezes, ora! :) —; ganha nome em nosso site; e nós multiplicamos nossas mãos ganhando um montão de parceiros — e todos nós garantimos o leitinho das crianças no processo! ;)
Vamos adorar lucrar fazendo da web um lugar melhor. E seu cliente vai adorar você pelo site lindão.
Espalhe (bem) a notícia, divulgue por todos os meios: estamos procurando um grupo de excelentes designers com quem possamos manter um relacionamento duradouro. E você pode ser um deles. Se estiver interessado(a), entre em contato — links para seus melhores trabalhos serão muito bem-vindos!
Publicado por Leandro Mello há
aproximadamente 1 ano.
Basicamente, o tapa na cabeça que faz o IE se comportar direitinho é o display: block. Depois dessa, você põe a margem que quiser no <hr />.
Sou dos que usa a tag <hr /> para dividir seções. É semanticamente mais coerente do que separar usando as próprias bordas dos divs, fica melhor quando se vê o HTML sem CSS, essas coisas que já se discute à beça por aí. Aprendi a apreciar sua utilidade.
Mas o fato é que é enjoado dar estilo a esta tag. Para cada browser devem-se editar atributos diferentes para se alcançar um mesmo efeito. Enfim, com algum jeitinho, deixa-se o <hr /> com a mesma cara em todos os browsers.
O que mata mesmo, o que deixa fóruns de cabelo em pé é a tal margem que fica em volta do <hr /> no IE. A margem no IE é teimosa, indestrutível, incontrolável, inestilizável. Por todo lugar que eu procurasse, as pessoas decidiam seguir com as margens mesmo, e os mais persistentes chegavam ao ponto de inserir o <hr /> num <div> para conseguir dar o estilo que quiserem. Ou seja, uns desistiam muito fácil, outros recorriam a medidas desesperadas para fazer a coisa de qualquer jeito.
Um dia encontrei dois posts que se aproximavam da solução. Sozinho, nenhum dos dois resolvia o caso. Mas juntando os dois funcionava! Fiz os testes e, de fato, misturando os dois raciocínios eu conseguia a medida que eu quisesse em qualquer browser que fosse — até zero. Mas, numa jogada um tanto infeliz, não salvei os posts nos favoritos, nem salvei o arquivo de testes. Uma resposta bastante procurada, e eu a perdi de bobeira...
Este artigo é sobre o meu caso: eu queria usar o <hr /> livre de divs sem sentido, e com margem zero; até no IE. E, sobretudo, o artigo é para deixar a resposta num lugar seguro e ao alcance de todos. Agora que eu lembrei a solução, não perco mais.
“Pescotapa”
Depois que perdi de vista os posts e as semanas se passaram, tudo o que eu lembrava é que o Internet Explorer precisava de um tapa na cabeça: era um atributo nada intuitivo e totalmente inesperado, que surpreendentemente o fazia acordar para a realidade. Basicamente, o tapa na cabeça que faz o IE se comportar direitinho é o display: block. Depois dessa, você põe a margem que quiser no <hr />.
Vai entender. O <hr /> já é um elemento em bloco. Tem toda a cara de elemento em bloco. Pula linha em cima, pula linha embaixo, não tem nada de inline. E é por isso que os fóruns tanto rodam atrás de uma solução: poucos suspeitariam que é necessário lembrar a ele que de fato é um bloco. Dizer display: block seria redundante e desnecessário. Mas o danado do IEca faz questão disso para se dar conta de que “ah, é, é verdade...”.
Como aconteceu comigo:
Vamos ao meu caso. Eu pretendia inserir umas tags <hr /> no site da fotógrafa Patricia Figueira, como experimento para implementação futura no próprio site e em nosso produto em desenvolvimento, o beonthe.net.
O primeiro passo foi inserir tags <hr /> nos espaços entre cabeçalho, conteúdo principal e rodapé. Vamos ao HTML:
E logo surgiu a linha cinza entre os divs. Ficou assim:
Safari:
Opera:
Firefox:
Internet Explorer 7:
Internet Explorer 6:
(Ah, o IE...)
Linhas inseridas, eu queria que cada divisória tivesse as seguintes características:
Quebrasse possíveis floats;
Não ocupasse qualquer espaço vertical;
Fosse invisível.
A primeira tarefa é simples. Na folha de estilos application.css, usamos:
hr {
clear: both;
}
Nota: Depois vi que, para limpar de fato os floats do div#main_content, foi necessário pôr os hr’s dentro do #main_content, em suas extremidades, e não adjacentes a ele. Mas isto é papo para toda uma outra discussão e, para efeito de ilustração, vou continuar exibindo os hr’s como se estivessem entre o #main_content e o #header.
Agora vem a segunda tarefa: limpar os espaços que a linha gera no IE. Mas, como dito antes e tantas vezes blogs afora, a margem do hr no IE é turrona, implacável, indelével, inoxidável. Tem gente tentando de tudo: margin: 0, padding: 0, line-height: 0, font-size: 0, até overflow: hidden. Zerar as margens até ajuda com os browsers que seguem os padrões, mas nada acaba com o espaçamento no IE.
Então, em nosso application.css, cuidemos dos browsers inteligentes para garantir que não haja margens:
hr {
clear: both;
margin: 0;
}
A explicação para as margens insistentes do IE é a seguinte: o IE renderiza o <hr /> com uma margem vertical de 7px a mais do que os outros browsers. Ou seja, se você escreve...
hr {
clear: both;
margin: 7px 0;
}
... Você tem num browser decente o esperado:
E no IE, uma soma do que você inseriu mais a margem nativa:
“Ora”, posso pensar, “Então é só escrever margens negativas para o IE”. Seria o intuitivo, mas o IE não trata de coisas como “o intuitivo”. Não funciona: o IE tira a margem superior, mas jamais elimina a margem inferior! Veja:
O pulo do gato
Entra na nossa folha de estilos application.css o atributo display: block:
hr {
clear: both;
margin: 0;
display: block;
}
Este é o último atributo em que eu pensaria para eliminar margens. Não sei explicar por que dá certo. É contra-intuitivo. É redundante. É idiota. E mesmo assim (ou talvez por isso mesmo) faz o IE acordar.
Agora sim, podemos repensar a questão das margens negativas. Então corrigimos o application.css:
Ela serve para chamar uma folha de estilo com regras específicas para o Internet Explorer: application_ie.css.
Nesta nova folha application_ie.css, aplicamos as margens negativas que tínhamos até então:
hr {
margin: -7px 0;
}
E pronto. Esta é a única regra que diferencia o <hr /> nos browsers inteligentes e no Internet Explorer. Agora podemos zerar as margens no nosso application.css:
hr {
clear: both;
margin: 0;
display: block;
}
E o resultado é: consenso! Nos browsers inteligentes:
... e no IE:
Acabamento
Resta a terceira tarefa, que é deixar invisíveis as linhas divisórias. Isso é fácil com visibility: hidden:
O que vai fazer com que o <hr /> fique invisível, mas ainda ocupando o espaço que ocupava antes, de modo que fica uma lacuna de 2 pixels entre o cabeçalho e o conteúdo principal:
Nota: Usar display: none não é útil neste caso porque cancela o atributo clear: both. E nós queremos que ele quebre os floats. Neste caso, é melhor ficar com visibility: hidden.
Nos browsers decentes, esta lacuna é devida à espessura da borda. Bordas de 1px em volta de um elemento com altura zero resultam em 2px de altura total. Um aributo de borda deve resolver:
No Firefox resolve. Mas no IE a lacuna, em vez de sumir, fica reduzida a 1px (Ah, o IE...). Isso porque nele as bordas não são definidas pelo atributo border, mas pelo atributo color (já mencionei que o IE não trata de coisas como “o intuitivo”?). Como não dá para “zerar” a cor para sumir com a lacuna, o jeito é retocar as margens que deixamos no application_ie.css, contribuindo para as margens negativas com 1px em cima ou em baixo:
hr {
margin: -8px 0 -7px 0;
}
E eis o resultado final:
Conclusão
Este foi o meu caso bem específico com a tag <hr />. Se você for uma das pessoas que se descabelavam por causa das margens teimosas no IE, saiba que há solução. Não é preciso desistir e adaptar seu precioso layout para se conformar com as margens, nem é preciso inserir a tag num <div> só para ela. Boas práticas já!
Espero ter contribuído para diminuir sua dor de cabeça. A resposta está agora aqui, para todo o mundo. E breve você a verá implementada no site da Patricia Figueira e no beonthe.net. Mas se este post não resolver o seu caso específico, escreva. Vamos juntos pensar em soluções para dominar o <hr /> — e, quem sabe, só quem sabe, o Internet Explorer.
Publicado por Leandro Mello há
aproximadamente 1 ano.
Na internet, mesmo que você não consiga mostrar uma imagem, ainda consegue dizer as mil palavras.
Hoje descobri um detalhe no meu método de escrever CSS que pretendo adotar como "best practice" pra mim em todo projeto futuro: a única folha de estilo que, num projeto que abranja tela/impressão/mobile, deve levar atributo media="all". Eu a chamo de "typography.css".
Inspiração de fora da web
Cheguei a esta prática aplicando no webdesign um tanto do modus operandi adotado por publicitários e designers fora da web.
Em design e publicidade, costuma-se lidar separadamente com layout e tipografia. Isso porque o design aplicado ao texto carrega por si só uma personalidade tão forte, que merece atenção à parte. Há aos montes empresas dedicadas exclusivamente à tipografia, que passam dias, semanas, para criar uma única fonte, completa e bela. O visual do texto tem um poder só seu.
Na web, sofremos sérias restrições à tipografia. Não é possível usar fontes realmente únicas em um site porque elas podem não existir no computador do usuário. O uso de imagens com texto bonitão apresenta alguns riscos à acessibilidade, e a prática de incluir as próprias fontes no código tem suas próprias complicações. Em resumo, paciência: o jeito é usar o rozfejão mesmo e saber brincar com ele. O que é bom, já que este texto não trata mesmo de tipografia, mas do que podemos aprender com o hábito de separá-la do layout.
Consistência e identidade visual
O bom do CSS é que ele garante a consistência das páginas do seu site. Uma mudança num seletorzinho qualquer e pronto, milhares de páginas são atualizadas de uma vez só, que beleza! Isso tem tudo a ver com o que chamamos identidade visual.
Uma empresa que respeita a própria identidade visual faz questão de que, no mínimo, sua tipografia seja consistente em todos os meios de comunicação, tanto em impressos como em eletrônicos, tanto quanto for possível. O layout é muito mais sujeito a pequenos ajustes aqui e ali por causa da variedade de suportes a que pode ser aplicado, mas o modo como o texto é apresentado tem que respeitar uma consistência ainda mais globalizada — o designer um dia pode se ver tendo que fazer uma peça que confie unicamente na tipografia, e as pessoas têm que reconhecer que tal peça pertence a tal empresa. E na web esta situação é bastante recorrente.
O denominador comum
Imagine que seu site é poderosão, pode ser impresso, visto em mobiles, transformado numa transparência etc. Agora tire todos os luxos. Imagens, firulas de layout e tudo mais. O que sobra? Texto. Na internet, mesmo que você não consiga mostrar uma imagem, ainda consegue dizer as mil palavras. E de quebra transmiti-las para as outras mídias. Então por que não criar uma folha de estilo que lide só com o que tem a ver com texto?
Como aconteceu comigo
À medida que os projetos em que eu trabalho cresciam, ficava complicado navegar pelo mar de seletores. Como eu escrevo CSS de modo incrivelmente regular, com todas propriedades aparecendo sempre na mesma ordem (ok, podem me chamar de maníaco) percebi que as propriedades que regiam o texto vinham sempre antes do grupo que controlava o layout. Para diminuir o tamanho de arquivo, resolvi pegar as propriedades de texto e jogar todas num arquivo separado, a que chamei typography.css.
... dividiu-se em um trecho que foi para o typography.css:
.rss_links a,
.podcast_files h4 a {
font-size: 80%;
text-transform: uppercase;
text-decoration: none;
}
... e outro que permaneceu no original application.css:
.rss_links a,
.podcast_files h4 a {
padding: .3em 1em;
background: #F7F7F7 url(/images/background/gradient_light_to_dark.png) repeat-x bottom left;
border: 1px outset #F7F7F7;
}
E assim por diante, com todos seletores. A cisão foi bem fácil. A decisão de fazer a divisão e o nome que arranjei para a nova folha de estilos foi mais guiada pelo meu velho hábito de designer gráfico — e por uma leve esperança de que isso tornasse menores os arquivos — do que por alguma noção de onde isso ia dar. Mal sabia que ia ter resultados bem interessantes.
Ora, em um ponto chega a hora de fazer um CSS de impressão e um para mobile. Em minha primeira experiência desde que resolvi usar o método typography, resolvi expandir a dobradinha para o print e o handheld, criando assim as folhas de estilo application_print e typography_print, e application_handhled e typography_handheld.
Minha pasta "stylesheets" então ficou assim:
application.css;
application_handhled.css;
application_print.css;
typography.css.
typography_handheld.css;
typography_print.css;
Que beleza! Mas pô... seis folhas de estilo só por um capricho de designer de separar o layout da tipografia? "Tem que ter um jeito de fazer melhor", pensei. E tinha. Com a sacação sutil, já dita lá em cima, de que a tipografia tem que ser global.
Refatoração, resultados e vantagens
Percebi que os seletores dos três arquivos de tipografia eram muito similares. Assim, misturei tudo o que eu tinha no typography, typography_handheld e typography_print em um único arquivo typography.css. Fim da duplicação: ele passou a cuidar de tudo — tamanho da fonte, cor da letra, itálicas, negritos, maiúsculas e tudo mais. No CSS de impressão, como geralmente as pessoas preferem imprimir textos em preto, foi só escrever html * { color: #000; } que tudo foi resetado para preto (sobra meia dúzia de seletores teimosos, é só fazer o mesmo).
Por último, no head do HTML, atribuí ao typography.css media="all". E só a ele. As outras folhas de estilo que se preocupassem com suas mídias específicas. Todas estas outras folhas herdariam as mesmas propriedades de texto e, assim, estaria garantida a consistência não só entre as páginas de um mesmo site, mas entre as várias mídias que uma empresa e seu site disponibilizam. Identidade visual, caro leitor!
Outras vantagens que este método me trouxe:
Com todas as minhas preocupações com texto voltadas para uma única folha de estilos, pude concentrar esforços de design no layout específico de cada mídia, o que me salvou de um trabalhão extra, e mostrou ser para mim um jeito bem mais gostoso de trabalhar layout;
A proliferação das folhas de estilo ficou bem mais controlada. Agora, se eu tenho CSS para n mídias diferentes, em vez de ter 2n folhas de estilo como antes, passo a ter sempre n+1, sendo este "1" o nosso amigo typography;
O peso total da soma dos arquivos, em conseqüência, diminuiu. Leveza é o que há!
E o mais importante de tudo: as folhas de estilo não mais viram um oceano gigantesco de seletores, ficam legíveis para todos na equipe, eu encontro o que quero fácil, altero o que preciso bem fácil, e volto para casa no fim do expediente sem fazer hora extra! ;D
Enfim, a nova prática tem-me rendido bons resultados. Há ressalvas, claro: num projeto pequeno, que não se pretende imprimir ou ver em mobile, não vale a pena separar typography de application. Por sua vez, um projeto gigantesco, ainda que bom candidato a ganhar um typography.css, tem muito mais chances de ter folhas de estilo auxiliares que provavelmente jogariam por terra minha contagem "n+1" de folhas. Mas no todo, meu trabalho com CSS tem sido bem mais bacana tendo que me preocupar com uma coisa de cada vez. É algo que com certeza vou adotar como best practice nos meus trabalhos... até aparecer uma prática melhor! :)
Este foi meu primeiro post no blog da Improve It. Espero que as informações sejam úteis de alguma forma, e inspirem boas práticas em designers e programadores por aí. Até onde experimentei, foi dos métodos que mais facilitou o trabalho por aqui. Claro que, ou eu não li o suficiente sobre CSS, ou esse assunto de separar tipografia já cansou de ser discutido lá fora, ou as duas coisas. Por isso, convido meus caros compadres designers a participarem da discussão. Quem sabe até onde esta metodologia pode ser aprimorada?
Publicado por Vinicius Manhães Teles há
mais de 3 anos.
Ontem tivemos a satisfação de iniciar um novo projeto de desenvolvimento. Provavelmente falaremos mais sobre ele daqui por diante, afinal, nada melhor que um projeto XP, usando Ruby on Rails!
Por enquanto, quero dar as boas vindas aos novos profissionais que compõem nossa equipe. Já havia comentado antes sobre o Felipe e o Bernardo. Agora é hora do Leandro.
Teoricamente ele é nosso designer. Na prática, é a prova de que especialização é para insetos. Leandro é um excelente ilustrador. É dele o desenho que está na página inicial do site, bem como muitos dos desenhos que compõem nossas apresentações em palestras e treinamentos.
Além de designer e ilustrador, Leandro é um ótimo redator e vem se tornando um exímio animador. Como se não bastasse, também atua como repórter/entrevistador nas mais badaladas festas de casamento do Rio de Janeiro e Niterói. Dizem que de vez em quando ele dorme. Mas, talvez seja lenda...
Abaixo uma foto da equipe, tirada ontem, quando pedi que fizessem cara de alce. Da esquerda para a direita: Tapajós, Leandro, Felipe e Bernardo.
Como se pode observar, ninguém sabia fazer cara de alce, a não ser nosso versátil designer-ilustrador-repórter-animador-redator:
