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.
