Designers versus Bootstrap

Bootstrap

Bootstrap

Embora eu não seja um web designer por formação, estou muito interessado na disciplina. Como tal, eu leio livros e blogs com foco em design.

Ocasionalmente, percebo que determinados temas provocam fortes emoções na comunidade. Temas como “Flat design: uma boa ideia ou a melhor ideia de todos os tempos”, “Qual é a punição correta para um CEO que redesenha o logotipo de sua empresa durante um final de semana?”.

Um desses tópicos de debate é se é uma boa ideia usar um framework front-end, como Bootstrap ou Foundation, em vez de construir um você mesmo. Como eu sou um grande fã desses frameworks, fiquei curioso quanto às razões de por que usar um seria uma má ideia.

Até onde eu posso dizer, a oposição aos frameworks front-end decorre das seguintes crenças:

Frameworks forçam você a uma marcação “não-semântica”

Marcação semântica é sobre HTML limitando apenas aquelas marcas necessárias para expressar o conteúdo da página, ao contrário de seu layout. Por isso, coisas como “container divs” são malvistas.

Bem, Bootstrap, de fato, faze uso liberal de elementos apenas de layout, como este:


1 <div class="container">
2   ...
3 </div>

 

 

Frameworks são muito super valorizados

Outra queixa comum é que em sua busca para ser todas as coisas para todas as pessoas, frameworks front-end possuem coisas das quais você pode nunca precisar. Por exemplo, Bootstrap permite várias maneiras de estruturar os links de navegação: como abas ou pills, com ou sem menus suspensos, fixos ou não, verticais ou horizontais. Se o seu site precisa de apenas um (ou talvez dois) deles, por que suas folhas de estilo incluem todos esses estilos estranhos?

Frameworks fazem tudo para parecer muito igual

Frameworks front-end te dão um conjunto de opções padrão para construir seus sites. Portanto, não é uma grande surpresa quando as pessoas constroem seus sites usando essas opções. O efeito colateral disso é que você olha e vê “Bootstrap” em todos os lugares.

Então Bootstrap não é bom?

Agora que eu já construí um bom espantalho com os argumentos da oposição, eu sou obrigado a tacar fogo no espantalho.

Marcação semântica onde faz sentido

Em primeiro lugar, vamos direto ao ponto de marcação semântica. Sim, na medida em que uma página HTML é um documento, ela deveria incluir o conteúdo e um pouco mais. A boa notícia é que para toda uma classe de páginas HTML este é um ajuste natural: blogs, sites de marketing, revistas, e assim por diante.

No entanto, a web está cheia de páginas HTML que servem a um propósito bem diferente: a de um contêiner de aplicativos. Para todos os clientes de e-mail, editores de documentos, formulários de pedidos de compra, análise de dashboards e assim por diante, a pureza semântica é legal, mas receber o app para expor corretamente é muito mais agradável.

Bootstrap, com todos os seus “container” divs, ajuda a resolver o problema de layout para aplicativos. Além disso, se a pureza semântica é uma preocupação forte, ele te fornece as ferramentas para gerenciar layouts sem violá-los.

Cheio de features, mas com features demais

Sim, Bootstrap tem uma tonelada de classes CSS nele, provavelmente milhares e milhares. No entanto, é 107k são minificados e altamente armazenávies em cache. Para efeito de comparação, uma simples adição de imagem do New York Times de hoje tem 20K.

Claro, existem sites para os quais vale a pena salvar entre 30-50K extras por pedido inicial. E nesses casos, pelo amor de qualquer coisa que você queira, personalize todos fora do CSS. Caso contrário, considere se o esforço extra vale a pena.

Ele só parece o mesmo se você deixar

A razão pela qual muitos sites construídos com Bootstrap parecem ser semelhantes é porque elas são feitas por desenvolvedores e não designers. A maioria dos desenvolvedores tem pouco interesse/habilidade de personalizar de forma eficaz os aspectos visuais de um site e, assim, usar o que já parece ser bom: o tema padrão.

Claro que, para aqueles que podem (ou querem) ajustar o visual, há muito que pode ser feito.

Algo mais?

Existem mais dois benefícios do uso de frameworks front-end que tenho que mencionar. O primeiro é o suporte para design responsivo. O Bootstrap 3.0 tem várias opções para fazer suas páginas parecerem agradáveis em diversos tipos de dispositivos. E mesmo que demore um pouco para envolver sua mente nessa abordagem, ela pode ser muito eficaz.

Em segundo lugar está o suporte para navegadores mais antigos (ou seja, IE8). IE8 é o grande devorador de tempo de desenvolvimento web. Ele pode levar horas e horas de ajustes e correções até que o seu layout que funciona muito bem em todos os outros navegadores finalmente fique decente. Embora não seja perfeito, o suporte do Bootstrap para IE8 é muito bom.

Reflexão final

Alguns designers dizem que nenhum designer que se preze usaria um framework que não criou. Eles temem perder o controle sobre o seu projeto, sem o benefício aparente suficiente para compensar essa perda. Eu costumava ter uma opinião similar sobre o uso de frameworks de desenvolvimento, mas aí eu superei isso e comecei a fazer o que tinha que ser feito.

—–

Artigo de Alex Tatiyants, publicado no iMasters.

DialHost
DialHost

Contamos com nosso DataCenter no Brasil de alta qualidade, estabilidade e confiança para hospedar seu site. Utilize poderosas ferramentas para otimizar o uso do seu serviço e seja sempre atendido de forma rápida e clara pelo nosso atendimento 24h.

Aumente a visibilidade do seu e-mail marketing com um design responsivo

E-mail marketing responsivo

Imagem ilustrativa: E-mail marketing responsivo

Não é de hoje que as empresas investem massivamente na comunicação com os clientes divulgando suas novidades e promoções por e-mail marketing. No entanto, nos últimos anos os dispositivos móveis cresceram expressivamente e, desta forma, os desktops e os notebooks deixaram de ser as únicas formas de acesso dos usuários.

Segundo um estudo realizado pela F/Nazca, em parceria com o Datafolha, mais de 43 milhões de pessoas acessam a internet pelo celular no Brasil. Elas não esperam mais chegar em casa ou na mesa do trabalho para checar seus e-mails, fazer contatos e até mesmo realizar compras. Sendo assim, para aumentar a visibilidade do e-mail marketing, é preciso ir além de um conteúdo atraente, inovador e direcionado: é necessário que você se preocupe com a experiência do usuário em todos os canais de acesso, principalmente, neste contexto, no mobile.

Para isso, é preciso estar atento ao desenvolvimento de suas campanhas com um design responsivo. Ou seja, que possa ser acessado e bem visualizado em qualquer plataforma, independentemente do tamanho das telas e das resoluções dos gadgets. Confira as dicas para aumentar a visibilidade do seu e-mail marketing e, consequentemente, os retorno sobre o investimento em suas campanhas:

Entenda as necessidades do mobile

Não é por que um conteúdo abre no dispositivo móvel que ele está totalmente adequado à plataforma utilizada. É preciso que a acessibilidade e a usabilidade sejam pensadas com foco nestes meios de comunicação. A facilidade de abrir e compreender a mensagem de um e-mail marketing no smartphone, por exemplo, deve ser a mesma quando visualizada através de um notebook. Além disso, sua leitura e uso devem ser confortáveis ao usuário, principalmente no que compreende aos botões de Call to Action.

Facilite o acesso e abertura dos e-mails

Com a correria do dia a dia, é nos dispositivos móveis que as pessoas fazem o primeiro contato com seus e-mails. O que normalmente ocorre é que elas recebem as mensagens, visualizam e, caso possua interesse, deixam para visualizá-las novamente em outro momento. Portanto, se a mensagem não abre corretamente nestes dispositivos ou é muito pesada, é bastante provável que ele vá para a lixeira e não seja visto novamente.

Defina tamanhos adequados de fonte

Uma fonte muito grande ou pequena pode impactar negativamente na experiência dos usuários, fazendo com que eles desistam de ler seu e-mail. Alguns aparelhos já possuem funções específicas para ajustar o tamanho da letra, no entanto, para não correr este risco, o ideal é planejar o conteúdo para uma leitura agradável.

Monitore o engajamento dos usuários

Existem diversas formas de mensurar quanto e de que forma o seu e-mail marketing tem atingido seu público-alvo. Desta forma, é possível fazer ajustes e melhorias conforme as necessidades diagnosticadas garantindo, assim, uma maior assertividade e maior retorno sobre o investimento.

Muitas empresas ainda estão engatinhando na questão do design responsivo, mas as que já apostam nessa tendência saem expressivamente na frente garantindo bons retornos por meio dos dispositivos móveis. A realidade é que cada vez mais as pessoas farão seus acessos por dispositivos mobile e, por isso, é fundamental que você desenvolva campanhas com design responsivo.

Agora que você já conhece as vantagens do design responsivo para o desempenho de suas campanhas de e-mails marketing, que tal começar a utilizá-lo? Caso você tenha ficado com dúvidas, deixe seu comentário abaixo!

Texto de André Metzen, publicado originalmente no iMasters.

DialHost
DialHost

Contamos com nosso DataCenter no Brasil de alta qualidade, estabilidade e confiança para hospedar seu site. Utilize poderosas ferramentas para otimizar o uso do seu serviço e seja sempre atendido de forma rápida e clara pelo nosso atendimento 24h.

Conselhos essenciais em HTML5, CSS, Responsivo e SEO

Imagem ilustrativa

Imagem ilustrativa

Um dos grandes desafios em trabalhar com web é acompanhar as novidades tecnológicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. Há tantas ferramentas e plataformas que se multiplicam todos os dias que é difícil conhecer todas (talvez humanamente impossível também). Mas estar atento às dicas essenciais já basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multidão de novidades:

HTML 5

01. Escolha um estilo de código

O HTML5 permite que a marcação seja escrita em maiúsculas, minúsculas ou uma mistura delas. Além disso, ninguém é obrigado a criar todos os atributos em elementos como <img>. Você pode até omitir o atributo type quando usar <style>, <link> ou <script>. O estilo é uma escolha sua, mas se está trabalhando com uma equipe, verifique se todos estão em sintonia. E ainda há um número de elementos e atributos que estão ultrapassados em HTML5, como<big>, <center> e <font>. Melhor deixá-los para lá.

02. Leia as specs

As especificações são uma parte importante. A versão de HTML5 é mantida tanto pela WHATWG (o principal padrão de especificação e a W3C (HTML5). Se você não tem certeza sobre qual especificação ler, o especialista Oli Studhilme escreveu um pouco sobre o assunto no HTML5 Doctor (leia aqui). Ler as specs é a única maneira de entender, de fato, alguns elementos e APIs. Elas também contribuem para uma leitura rápida sobre os fundamentos para projetar HTML5.

03. Planeje sua marcação

Depois de ler as especificações, você entenderá melhor a estrutura de um documento, com os Document Outlines (saiba mais aqui). Pense neles como o equivalente às visualizações de documentos do Microsoft Word. Usar o conceito de documento outline vai ajudar a criar uma marcação bem estruturada. No processo de criação do design, é possível criar uma lista alinhada à página, o que vai obrigá-lo a pensar os níveis de títulos que devem ser usados e quais elementos serão colocados em cada lugar. Por isso, ter blocos de conteúdo organizados faz toda a diferença.

04. Escolha o elementos certo

Falamos antes sobre elementos que estão ultrapassados na quinta versão do HTML. Mas não se preocupe, ainda há 30 novos elementos que foram adicionados e muitos outros que ainda serão definidos. Por isso, pode ser difícil escolher o elemento certo para cada projeto. Para resolver voltamos à premissa de usar um elemento para descrever o significado do conteúdo, e não a sua aparência. Pense com cuidado sobre o significado disso antes de adicionar elementos. Consulte de novo o HTML5 Doctor para ajudar a escolher os certos.

05. Guerra de codecs

Você já deve ter ouvido falar que o HTML5 vai matar o Flash. Isso tem se espalhado largamente por conta do vídeo e áudio em HTML5. Não ter que depender de plug-ins para executar conteúdo de mídia é um grande passo para uma web aberta, mas ter que lidar com tecnologias competitivas não é. Quando criar conteúdo multimídia para o seu site codifique seus arquivos múltiplas vezes e inclua opções para browser com capacidades inferiores. Um artigo de Kroc Camen chamado ‘Video for Everybody” (Vídeo para todos) é um ótimo começo sobre como lidar com isso (acesse o artigo aqui).

CSS

01. Crie soluções independentes

Desenvolva qualquer efeito de CSS, 3D, rolagens ou transições fora do documento principal. Assim, é possível criar uma solução individual e organizada que poderá até ser usada depois em outros projetos. Fazer experimentos desorganizados dificulta a verificação caso alguma coisa não esteja funcionando como esperado.

02. Ordem relevante

Todo mundo sabe que tentar editar códigos CSS de outra pessoa é complicado. Sempre use múltiplas linhas CSS com as declarações ordenadas por relevância. Dessa forma, seu código poderá ser entendido por você ou qualquer outro envolvido no projeto.

03. Saiba seu papel

Mantenha classes bem focadas nas suas funções. Cada classe deve ter uma única responsabilidade, totalmente contida dentro dela. Deixe todos os atributos envolvidos nessa função em vez de tentar atribuir múltiplas responsabilidades.

04. Nomes

Use hífen nos seletores de nomeação. Por exemplo: isto-eh-bom{}, isto_eh_ruim{}, istoEhMuintoRuim{}. Isso ajuda a manter o seletor de nome legível e geralmente mais simples.

05. Prefixos

Os prefixos de fabricantes de navegadores devem desaparecer quando o CSS3 se tornar um padrão e for adotado pelos browsers. Por enquanto, use todos os prefixos onde são aplicáveis. Sempre termine com uma declaração genérica, sem prefixo.

Responsivo

01. Significado

Por definição, um web site responsivo usa layouts flexíveis e media queries para moldar e adaptar-se ao seu ambiente de visualização. É importante notar que o web design responsivo não é nem um nem outro. Você deve encontrar harmonia em ambas as técnicas e quando o fizer, irá criar layouts responsivos da melhor maneira.

02. Media queries

Os seus breakpoints de media query devem ser escolhidos de acordo com as necessidades do seu site. Há muitas resoluções de telas e não se deve incluir os breakpoints para todas as variações existentes. Há muitas resoluções de telas na tentativa de realizar isso. Comece com resoluções bem básicas de dimensões e adicione a elas breakpoints de acordo com as necessidades do seu projeto.

03. Mobile-first

Em resumo, mobile first significa desenvolver para telas pequena primeiro e depois para desktops. Isso vai contra a abordagem tradicional no qual web designers precisam ter um site no desktop e depois cortar alguns bits para conseguir um site mobile. As restrições de plataforma fazem com que você trabalhe a hierarquia do conteúdo, então essa abordagem é perfeita para design responsivo.

04. Derrube pixels

Elimine atributos com declarações fixas de pixel em HTML e no seu CSS. Imagens, em particular, precisam carregar e a melhor forma de fazer isso é declarar a porcentagem de tamanho no elemento <img>. Também é sábio criar classes CSS com tamanho em percentual, então você pode simplesmente incluir <img> ou outras tags  HTML.

05. Confie no JavaScript

Às vezes você tem pouco controle sobre a marcação do seu site. Isso só não acontece quando você está construindo um tema para CMS como WordPress, por exemplo. Escrever um script para remover um tamanho fixado ou atributos de estilo de tags HTML é fácil e rápido em um jQuery. Use e abuse. Isso vai garantir que o seu conteúdo será fluído.

SEO

01. Tags únicas

Use tags de títulos únicos e descrições para cada página do seu website, o que é óbvio para muita gente, mas é importante. Tente incluir suas palavras-chave de SEO enquanto cria textos. Mantenha as tags de títulos com no máximo 70 caracteres e as descrições cm pelo meno 155. Não use meta palavras-chave, elas ajudam concorrentes a encontrarem suas palavras.

02. 301 redirecionamentos

Se mudar para um novo websites ou URL use o recurso 301 redirecionamentos para novas páginas. O mesmo vale para quem tem múltiplos domínio: use apenas um como principal e redirecione os outros. Isso vai gerar backlinks e evitar a duplicação. Serviços com o Open Site Explorer ou Majestic SEO podem ajudar.

03. Link interno

Faça bom uso de links internos. Quando se cria um bom visual para um site, às vezes, esquecemos quais páginas são importantes e como referenciá-las. Garanta que seus links internos irão suportar as páginas mais importantes.

04. Use microdata

Tire vantagem de cada pedaço do Google usando microdados. Já viu estrelas de classificação em uma lista orgânica? Esse é um exemplo ótimo que pode melhorar suas taxas de cliques. Você pode acompanhar estimativas, vídeos, pessoas, produtos e muitas outras coisas. Viste schema.org para saber mais.

05. Pensamento social

Mecanismo de busca estão valorizando sinais sociais, então abuse de redes sociais. Tenha certeza de que sue conteúdo será fácil de compartilhar e promover. Concentre-se em conseguir compartilhamento e retuítes, em vez de apenas conseguir mais seguidores e “curtir”.

Texto de Isabella Sánchez, publicado originalmente no iMasters.

DialHost
DialHost

Contamos com nosso DataCenter no Brasil de alta qualidade, estabilidade e confiança para hospedar seu site. Utilize poderosas ferramentas para otimizar o uso do seu serviço e seja sempre atendido de forma rápida e clara pelo nosso atendimento 24h.

Aparelhos touchscreen: Design para a web mobile – parte 2

Mobile touchscreen

Imagem ilustrativa: Ipad mini e Galaxy s3

Continuando com a série sobre o design para a web mobile. Hoje vou falar sobre a interação com aparelhos touchscreen e como lidar com o conteúdo em telas menores, sem perder acessibilidade e usabilidade.

Quebrando mitos dos mobiles

A primeira fase para se desenvolver uma interface para mobile é quebrar os falsos paradigmas que foram introduzidos a este assunto. Abaixo listo com base em 2 artigos uma série de considerações que podem tornar o seu design mobile frustrante para o usuário.

Vou reduzir o conteúdo assim ficará mais simples para o usuário interagir.

Este ledo engano pode ocorrer inúmeras vezes em um projeto mobile. A limitação das pequenas telas induz ao designer querer fazer uma versão com menos funcionalidade ou conteúdo. Porém para um usuário que procura determinada informação, não encontrá-la se torna extremamente frustrante. E de fato é muito difícil saber o que realmente seu usuário vai buscar. Por isso é importante organizar a informação de forma a ficar agradável para o usuário e não removê-la.

A internet móvel é lenta e o usuário está na rua com pressa

Isso pode em alguns casos ser verdade. Mas podemos ver através de uma pesquisa do Google que a maior parte das pessoas acessam a internet de casa, onde está disponível uma internet de maior velocidade. Além disso em casa muitas vezes têm-se disponível um computador para acessar a versão desktop.

Ok. Vou criar uma versão mobile separada que se adéqua aos mobiles.

Isso pode até ser um começo, mas o ideal é que na mesma URL seja encontrada de forma agradável todo o conteúdo e funcionalidade, seja estando no mobile ou no desktop. Não importa se você utiliza técnicas responsivas ou só a versão mobile, o importante é facilitar o acesso completo ao seu site ou aplicativo web.

As telas touchscreen

Com os problemas acima resolvidos, vamos tratar da interação com os dispositivos touchscreen. Sejam eles smartphones, tablets e etc, é importante pensar que estes dispositivos contam com inúmeras formas de interação, mas nota-se como principal: o uso do toque e gestos, para realização de determinadas ações. Sendo assim, toda interação deve ser planejada para ser agradável e intuitiva ao realizá-la com as pontas dos dedos.

Humm… ponta dos dedos. Ao contrário dos desktops que possuem mouse para fazer interações visuais, o mobile interage com os dedos e estes são bem mais largos que a seta do seu mouse e sua precisão também é prejudicada. Ou seja, é necessário pensar em botões, formulários e links que se adequem à essa nova realidade.

Estados de toque

Mostre ao seu usuário que ele está tocando ou focando uma área interativa através de mudança de cor ou iluminação. Mostre de forma clara os resultados de um gesto e que ações estão habilitadas ou desabilitadas.

Em gestos, como o de arrastar um item, mostre o que está sendo arrastado e para onde ele pode arrastar. Guie seu usuário à uma ação correta através da sua interface.

Formulários com touchscreen

Formulários difíceis possivelmente serão abandonados. Isto não é exclusividade do mobile, mas o formulário se torna ainda pior, já que a digitação em teclados virtuais causam muito mais erros que em um teclado convencional. Por isso tente simplificar o máximo e busque opções de preenchimento. O HTML5 possibilita algumas facilidades, como tipos de input de texto que definem teclados somente de números, letras etc. Radios e check boxes podem ser simulados como botões que ligam e desligam possibilitando um tamanho maior ao item.

Se possível utilize de comandos por gestos ou comando de voz para agilizar a navegação. O comando de voz para preenchimento de formulário facilita muito a vida dos usuários de aparelhos touchscreen.

Concluindo

O pensamento para mobile deve ser diferente mas não restritivo. O público está migrando para esse novo modo de interagir e a menos que você queira ficar para trás é bom começar a pensar nesta nova mídia.

Referências

http://tableless.com.br/mitos-sobre-dispositivos-moveis/#.UWxUn7XFUwA
http://developer.android.com/design/style/touch-feedback.html

Veja também

https://blog.dialhost.com.br/design/design-para-a-web-mobile-parte-1/

DialHost possui estrutura com servidores prontos para hospedar seu site ou aplicativo web.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.

Design Thinking e a colaboração

Design Thinking

Imagem: Ilustração Design Thinking e Colaboração

Há uns dias atrás, publiquei o post O Design e a empatia, onde falo um pouco sobre um dos pilares do Design thinking, a empatia. Hoje sigo falando um pouco mais sobre o assunto abordando o segundo pilar, a colaboração no processo de criação e inovação de produtos e serviços.

A Colaboração trabalha com o desenvolvimento em conjunto, onde cada colaborador ajuda ao outro dando ideias e sugerindo formas de resolver um problema. É importante dentro do processo de Design e no pensamento de um serviço não tentar adivinhar o que o seu cliente espera, ou necessita. Pergunte a ele, interaja com seu público, com as pessoas que trabalham em outros setores da empresa, fornecedores, parceiros e etc. Quanto mais pontos de vista forem abordados mais ampla é a visão do problema e as possíveis soluções.

Como podemos ver a colaboração é um ato em grupo, social, e envolve muitas vezes uma cocriação. A cocriação nada mais é do que criar em conjunto. É uma criação que envolve a colaboração de muitas pessoas, sejam elas do planejamento, da produção, da gerência ou o cliente. Esta metodologia se torna extremamente eficaz pois engaja as pessoas que participam do processo, afinal qual pai não defende seus filhos. A criação colaborativa cria a sensação de que um determinado produto é meu também.”Eu participei, o resultado obtido só foi possível por que teve o meu envolvimento”.

O engajamento causado pelo ato de se trabalhar de forma colaborativa, pode ser visto pelo sucesso de projetos como o Fiat Mio. O projeto teve milhares de contribuições de diversas pessoas, e foi responsável por desenvolver um carro conceito baseado na estrutura do Creative Commons. Para fechar o post com chave de ouro, deixo os links de uma entrevista dada pela Professora e consultora, Denise Eler. Os vídeos falam sobre o conceito de cocriação.

Benefícios da Cocriação – Emprego e Renda – Parte 1

httpv://youtu.be/s-EspowY1lQ

Benefícios da Cocriação – Emprego e Renda – Parte 2

httpv://youtu.be/maE3CbpEySI

Deixo também a referência para o Blog da Denise Eler, onde podem encontrar muito mais sobre esse assunto:
http://www.eler.com.br/

Hospedagem DialHost, qualidade e desempenho com planos a partir de R$9,90/mês.

Felipe Moraes
Felipe Moraes

Gerente de desenvolvimento na DialHost, Designer Gráfico formado pela Universidade FUMEC, Minas Gerais e Pós graduando em Branding pelo Centro Universitário UNA, possuo interesse em design de interação e interfaces. Trabalha com programação e criação para web, desde 2006. Apreciador de Bacon, Pudim e music Tag.