O que é Twitter Bootstrap e porque usar em seu site

Web designers e programadores – podem ir ler para outro lado. Ao contrário da maioria dos textos sobre o Bootstrap, este artigo é para quem realmente USA o produto final criado por esse framework: empresas que possuem websites. Muitas delas já ouviram falar sobre tal plataforma e até mesmo a exigem. Outras, contudo, ainda sofrem com customizações sem sentido criadas em CSS sem padrão, e pagam o caro preço da falta de organização futuramente.

O Bootstrap não é o único framework CSS competente usado atualmente na construção de sites, templates e temas. Outros mais, como o ZURB Foundation ou o Bulma ganham espaço e possuem funcionalidades sensacionais. No entanto, em termos de popularidade e comunidade, o Bootstrap é, de longe, o benchmark para qualquer um que trabalhe com a construção de websites.

Bootstrap – para que serve?

Para perceber qual a utilidade do Bootstrap e outros frameworks no web design, primeiro precisa-se compreender como funciona um website, sob a óptica do usuário. Qualquer website utiliza, na sua visualização no browser, uma tríade de fatores:

  1. O HTML, uma linguagem de tags que fornece ao navegador uma espécie de esqueleto, com quadros e subquadros, que determinam a hierarquia dos elementos e do conteúdo que é inserido.
  2. O CSS, pois o esqueleto não tem qualquer formatação. O HTML apenas oferece a estrutura, mas é o CSS que determina onde cada elemento vai, em que cores e padrões será exibido, com que fontes, efeitos mínimos, tamanhos, etc. O CSS responde pela formatação do conteúdo e da estrutura da página.
  3. O Javascript, que processa os elementos, aplica efeitos, interage com o usuário e seu comportamento e responde por outras aplicações que podem ser desenvolvidas durante a exibição de um site – como a gravação de cookies no navegador, por exemplo, ou a validação de campos em um formulário de contacto ou pagamento.

Os frameworks, como o Bootstrap, compreendem uma série de “regras” padronizadas, que são capazes de organizar e formatar um site minimamente a partir do HTML fornecido, sem que haja necessidade de criar um CSS do zero. Os frameworks mais desenvolvidos inclusive já possuem também ferramentas integradas para validar formulários, ativar recursos a partir de cliques e ações do usuário e, literalmente, “dar vida” à formatação.

Elementos HTML como títulos, tabelas, botões, quadros, menus e imagens já possuem uma formatação base quando usa-se o Bootstrap. Além disso, frameworks desse tipo favorecem a distribuição desses elementos, usando uma lógica de grelha para ecrãs. Isso não apenas permite que designers coloquem os elementos exatamente onde pretendem, mas também automatiza as mudanças quando o ecrã muda de tamanho, ou o usuário abre o site em outro dispositivo, como o telemóvel.

Bootstrap 4

Lógica de grelhas – frameworks como o Bootstrap aplicam ao CSS uma lógica de divisão do ecrã,. Com isso, posicionar elementos em um site, independentemente das medidas do ecrã, torna~se algo mais rápido e obedece sempre a um mesmo padrão, podendo inclusive variar conforme o dispositivo de acesso ao site.

Bootstrap – sistema universal

Popular e usado no mundo inteiro, em qualquer linguagem, plataforma ou aplicação, mesmo em aplicativos e softwares, o Bootstrap é um sistema universal. Para o empresário, isso significa que qualquer que seja o profissional ou prestador de serviços de desenvolvimento ou web design que ele venha a contratar no futuro, saber-se-á lidar com seu site ou aplicação. Muitos empresários têm de recomeçar sites do zero em alguns casos, pois plataformas e programação utilizados por web designers anteriores são destituídos de qualquer organização ou lógica.

Claro, muitos web designers produzem peças excelentes, de forma muito organizada. Contudo, o uso do Bootstrap reduz monstruosamente as chances de que um site tenha de ser completamente descartado em modernizações ou atualizações.

O resumo da ópera? O Bootstrap dá liberdade ao proprietário do website. Ele pode contratar quem desejar, quando desejar e até mesmo estudar e lidar com o web design e montagem de páginas por si próprio, uma vez que o sistema do framework é universalmente e muito bem documentado.

Bootstrap – custos menores

Muitos web designers dirão o contrário, mas é mentira. Ao usar sistemas como o Bootstrap, o trabalho de um web designer é simplificado sobremaneira – e ele PODE cobrar mais barato. Isso não significa que ele o fará, mas implica que, ao saber que determinada proposta envolve esse framework, o empresário pode argumentar para chegar a valores mais justos e em linha com o emprego de tal tecnologia.

O custo de manutenção é igualmente menor – o Bootstrap é atualizado de forma constante e a cada versão ganha novas correções e funcionalidades, o que permite maior flexibilidade e até mesmo evolução dos websites, para acompanhar novas tendências tecnológicas e de design.

E, para terminar, o fato de um site ser criado em WordPress, Drupal, Opencart ou qualquer outra plataforma não implica, de maneira alguma, que o Bootstrap não possa ser utilizado. Os CMS, como os sistemas citados, são gestores de conteúdo e aplicações que funcionam em um alojamento ou servidor – eles “montam” de forma dinámica as páginas de um site e enviam para o navegador do usuário. Mas ali, no ponto final, o site continua a ser exibido em HTML, CSS e Javascript.

Em outras palavras: se vosso web designer diz que não pode utilizar o Bootstrap ou outra tecnologia de web design por conta da plataforma de criação ou outro motivo qualquer, sua empresa está a ser enganada…

M-commerce e vendas em telemóveis

7 coisas que todo e-commerce precisa ter

Montar uma loja online é algo cada vez mais fácil. Dezenas de aplicações na web, tais como o Shopkit, para quem está em Portugal, permitem que se crie uma loja simples em poucos minutos. Mas há determinadas coisas que todo e-commerce precisa ter. Ao não possui-las, uma empresa colocará em risco suas vendas, sua marca e até mesmo a sobrevivência de seu negócio.

Suponhamos que uma marca em Viana do Castelo decide colocar online um site de e-commerce. Trata-se de uma cidade de menor porte, longe dos maiores centros urbanos portugueses, como Lisboa, Porto e apenas razoavelmente próximo de Braga. O comércio português, tradicionalmente, possui um foco regionalista muito grande. Apelar para essa característica na internet é um erro. Contudo, para garantir que vendas resultem em nível nacional (ou mesmo internacional), todo site de e-commerce precisa ter algumas características peculiares.

1. Priorização

Ao ler folhetos e cartazes de empresas em Portugal, podemos em geral estabelecer algo em comum entre eles todos: a falta de priorização. Parece-nos que comerciantes desejam ocupar todo o espaço possível em um pedaço de papel, metendo ali o maior número possível de produtos e informações. Como já abordamos, o excesso de informação pode levar ao desinteresse. A maioria dos consumidores possui desejos simples e necessidades imediatas – induzi-los a muitas opções é algo que afasta o impulso. E isso não queremos.

Foco e destaque naquilo que é mais importante – sem “chuva de produtos”.

Lojas online e sites de e-commerce podem possuir bancos de dados sem fim de produtos e serviços. Entretanto, as páginas de entrada desses sites precisam de um foco. Prioridade em poucas linhas de produtos e em diferenciais, não simplesmente na quantidade. A grande maioria dos sites de e-commerce do mundo, e isso inclui gigantes como a Amazon, têm 95% de suas vendas concentradas em não mais do que 10% de sua oferta total de produtos.

2. Design

Ninguém quer entrar em um estabelecimento aos pedaços. Quando vemos uma loja em estado de abandono nas ruas, evitaremos comprar ali qualquer coisa que seja. Agora pense – por que diabos um cliente compraria produtos em um site que também parece abandonado? Um site funciona como a fachada de um estabelecimento e suas páginas iniciais como uma boa montra. E, do mesmo modo que nas ruas, uma fachada tem apenas alguns segundos para captar a atenção de um possível consumidor – ou afastá-lo para todo o sempre.

Vistoso, apelativo e direto – páginas iniciais têm de funcionar como uma boa montra

Um design caprichoso e uma boa apresentação não são pormenores no marketing digital. Um e-commerce precisa de um design inteligente, que possa resultar e maravilhar. E, se estamos dispostos a investir ao colocar produtos à vista em nossa loja, por que não iríamos querer o mesmo para nossa versão digital?

3. Formas de pagamento

Estamos na era digital. Exigir que vosso cliente efetue pagamentos apenas por transferência bancária não apenas é ridículo, mas reduzirá suas vendas. Claro que, uma vez que estamos em Portugal, transferência e alternativas como o Multibanco são uma necessidade, mas é preciso oferecer hipóteses de pagamento com o uso de cartões de crédito em geral (mesmo internacionais) e sistemas como o PayPal. Lembre-se de que a cada alternativa não oferecida, está a dar um convite para que seus clientes procurem produtos noutro canto.

4. Entregas em e-commerce

Cobrar  fortunas para entregar produtos é coisa do passado. Além disso, há que considerar o valor médio de seus produtos. Lojas online que possuam itens mais caros, como eletrodomésticos, eletrónicos ou móveis, podem cobrar pela entrega, até porque os fretes têm valores muito abaixo daqueles pagos em seus produtos. Entretanto, já pudemos verificar que algumas das grandes marcas em Portugal praticam preços exorbitantes de fretes – recentemente tivemos o exemplo de uma cadeira para secretária, cujo preço com IVA incluso atingir não mais do que € 60, mas cuja entrega custaria € 45 (do Porto para Viana do Castelo). Obviamente, procurámos noutro lugar.

5. Visualização em telemóvel

Metade dos consumidores acede à internet via telemóvel, mas sua loja apenas possui boa visualização em computadores. Resultado? Irá perdê-los todos para sites que sejam “responsivos”. Desenvolver hoje um site de e-commerce que não possua suporte para acesso e visualização em telemóvel é um absurdo. Melhor seria nem investir, nesse caso. Garanta, ao contratar um web designer, que sua loja possua bom suporte para telemóveis e outros dispositivos, como tablets.

Versões otimizadas para telemóvel não são apenas uma “mais-valia”, mas sim uma obrigação

6. Atendimento no e-commerce

Sites de e-commerce ainda geram imensa desconfiança no público português. A razão é muito simples: a maioria deles possui pouco ou nenhum atendimento. É preciso dispor de linhas telefónicas de atendimento, canais via e-mail que realmente funcionem e sistemas de atendimento imediato, por chats e sistemas de mensagens, como o Whatsapp ou Facebook Messenger. Especialmente clientes que acedem vossos serviços e produtos em telemóveis precisam de atenção imediata.

7. SEO

Explicaremos mais a fundo esse tópico em outros artigos, mas o SEO é algo fundamental em lojas online. A otimização para mecanismos de busca é o que faz com que seu site apareça de forma mais frequente para o público e seja de facto encontrado por possíveis clientes quando estes buscam por palavras que têm a ver com vossos produtos. O SEO é um conjunto de técnicas relacionadas ao marketing digital, e colocar sites em linha com esses parâmetros exige algum investimento. Soluções “home made” ou “low cost” podem custar o sucesso de seu negócio.