As estruturas da Web, como Bootstrap ou HTML5, oferecem alguma coisa a um designer (não desenvolvedor)?


27

Observe que se trata de design muito mais que desenvolvimento.

Eu construo sites do zero com CSS e HTML completamente escritos à mão.

Conheço alguns modelos de CSS pré-compilados, como o Bootstrap ou o HTML5 Boilerplate, há algum tempo. Eu olhei para eles brevemente no passado, mas nunca pulei para usá-los de verdade. Não tenho problemas ao redefinir o CSS, incluir o javascript quando necessário ou configurar para viewports.

Esta noite, eu codifiquei uma página HTML5 / CSS básica. Nada realmente impressionante em termos de layout. Simplesmente um ponto de partida. Depois, decidi dar um giro no Bootstrap com o mesmo layout. É uma coluna bastante padrão de 960px, 3 com página de imagem de herói.

página

Ao alterar o Bootstrap, ocorreu-me que 80% ou mais do meu tempo estava sendo gasto aprendendo qual classe ou ID era aplicada a alguma coisa, e depois encontrei isso no CSS para ajustar. Ficou claro que o Bootstrap não iria me salvar a qualquer momento. De fato, o Bootstrap aumentaria bastante o tempo de produção devido ao CSS * excessivamente modelado.

* ( por "excessivamente modelado"), quero dizer que existe uma grande quantidade de CSS que eu provavelmente não usaria para nenhum site. Não que exista CSS desnecessário no geral. )

Entendo que, se eu estivesse familiarizado com o Bootstrap, estaria familiarizado com os nomes de classe / ID e com a localização geral nas folhas de estilo. Então, estou disposto a me curvar um pouco sobre o tempo que estava me levando, percebendo que parte disso era devido ao meu próprio desconhecimento.

No entanto, não posso deixar de me perguntar se Bootstrap et. al. são apenas muletas que são designers incapacitantes, alimentando-os com sua própria marca de código. Assim, trava uma base de consumidores que depende inteiramente de uma solução de terceiros e sua funcionalidade para tudo, ou pelo menos para a maioria. Isso me lembra aqueles que só podem criar um site se puderem usar o Dreamweaver. E o céu proíbe se eles não tiverem acesso ao Dreamweaver e for necessária uma alteração.

Quando crio um site, uso meu próprio conjunto de nomes de classe e ID padrão. Estruturo CSS como é intuitivo para mim. Eu tenho meu próprio conjunto de modelos de pré-compilação para configuração rápida. Portanto, qualquer site que eu construo eu posso editar rapidamente. Usar qualquer um dos pacotes front-end pré-configurados significa simplesmente que preciso aprender suas convenções de nomenclatura e sua estrutura, em vez de confiar sozinho.

  • Alguém pode me elogiar as grandes virtudes de sistemas de modelos como o Bootstrap ou o HTML5 Boilerplate ?
  • O que os torna valiosos para você?
  • Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?
  • Você poderia criar um site sem eles, se precisasse?

2
+1 boa pergunta Eu tenho curiosidade sobre isso, mas não tenho nem perto da quantidade de experiência que você faz. então eu estava abordando isso como alguém começando querendo saber as vantagens para um novato. ao fazer referência ao Dreamweaver, você está falando sobre o método de codificação ou WYSIWYG para usá-lo? Eu uso o Dreamweaver, mas apenas o editor de código e nada automatizado, se eu puder ajudá-lo.
Brnnnrsmssn 4/13/13

Eu estava me referindo principalmente àqueles que usam a visualização Design do DW. Código é código e não importa se é isso que você usa. Embora, apesar do marketing, o DW ainda reescreva o código na minha experiência.
Scott

11
O recurso ONE e ONLY killer que o Dreamweaver possui é a capacidade de selecionar um número arbitrário de arquivos locais em profundidade aleatória e arbitrária da árvore e enviá-los para um site remoto. Procurei muito e muitas vezes um programa de FTP com uma visualização em árvore similar com arquivos e diretórios integrados, o que faz isso.
horatio 15/05

11
@horatio Transmitir no Mac. Não posso dizer sobre o Windows.
1516 Scott

@horatio Filezilla é o que eu recomendaria para FTP. Vistas em árvore e arquivos simples de arrastar e soltar de e para o servidor.
John

Respostas:


6

Estive pesquisando bastante estruturas no último mês. Na verdade, não mergulhei em nenhuma das soluções, mas algumas alternativas de estrutura que estão na minha lista restrita são Foundation , Intuit e YAML e Base .

O bom disso é que eles não têm a aparência de 'Bootstrap' e parecem incentivar os designers a trabalharem (design), enquanto cuidam da capacidade de resposta.

Aqui está uma grande lista de estruturas e mais informações neste artigo .

Como mencionado, eu fiz o trabalho da pesquisa, mas ainda não comecei a testá-los; portanto, qualquer comentário que defenda qualquer uma das estruturas seria útil.


Alguns meses depois - eu realmente criei meu próprio 'framework' (na verdade, é apenas um arquivo css com atributos de layout comuns). Comecei com Base (link acima), mas adicionei muita personalização. O bom do Base é que era muito simples descobrir e se referir como um começo sólido.
John

11

As vantagens tendem a ser principalmente:

  • Prototipagem rápida (ou seja, velocidade)
  • Consistência entre navegadores incorporada

Se você precisa criar uma grade, e a grade que você precisa criar se encaixa na estrutura CSS pré-criada, a lógica é que você está no meio do caminho usando a estrutura.

Tudo isso dito, eu tendem a concordar com você. As estruturas CSS, IMHO, são como modelos de design visual, pois se atendem a 90% do seu objetivo, são ótimas, mas se não atendem, você está gastando muito mais tempo e esforço modificando o padrão do que apenas construindo seu próprio zero.

TERMO ADITIVO:

Devo acrescentar mais um benefício potencial:

  • é um sistema documentado

Em um ambiente corporativo, onde você pode ter vários desenvolvedores de front-end e o projeto pode durar vários anos com várias equipes diferentes de desenvolvedores de front-end, ter uma estrutura de camada de apresentação subjacente documentada pode ajudar.

Isso não quer dizer que sua própria estrutura construída em casa não possa ser documentada; é apenas que a documentação geralmente não é uma prioridade.


11

Estou familiarizado com o Boilerplate HTML5, mas estou mais familiarizado com o Bootstrap, então vou falar sobre isso. Lembre-se de que ambos são voltados para duas tarefas diferentes (o H5BP é um modelo normalizado responsivo, o Bootstrap é uma coleção de widgets HTML / CSS / JS e uma grade responsiva.) Na verdade, eles podem ser usados ​​juntos .

No entanto, não posso deixar de me perguntar se Bootstrap et. al. são apenas muletas que são designers incapacitantes, alimentando-os com sua própria marca de código. Assim, trava uma base de consumidores que depende inteiramente de uma solução de terceiros e sua funcionalidade para tudo, ou pelo menos para a maioria. Isso me lembra aqueles que só podem criar um site se puderem usar o Dreamweaver. E o céu proíbe se eles não tiverem acesso ao Dreamweaver e for necessária uma alteração.

A analogia falha aqui porque você tem acesso total à fonte do Bootstrap. Se você não gosta de como algo funciona, pode alterá-lo. Para mim, é o oposto de uma muleta - você pode usar o código-fonte para aprender técnicas de CSS.

Não concordo que "criar um site" precise estar tão próximo do metal quanto acredito que os codificadores C precisam ter um conhecimento íntimo da linguagem assembly. Embora até essa analogia seja insuficiente, porque o ajuste de HTML / CSS é simplesmente uma questão de estender os seletores e adicionar o que você precisa.

Alguém pode me elogiar as grandes virtudes de sistemas de modelos como o Bootstrap ou o HTML5 Boilerplate?

O recurso matador do Bootstrap, para mim, é o consistente e fácil de aplicar o estilo do widget e os componentes Javascript. Quer um link parecido com um botão? Adicione uma classe '.btn'. Quer uma mesa? Adicione uma classe '.table'. Quer um elemento de navegação? Configure uma lista não ordenada e adicione classes de navegação.

Dropdowns, popovers, alertas etc. são facilmente adicionados a elementos com atributos de dados. O Bootstrap inclui um conjunto de ícones muito bonito que pode ser facilmente integrado aos widgets.

O que os torna valiosos para você?

  • Prototipar sites rapidamente
  • Toda a depuração do CSS entre navegadores e plataformas foi feita para mim.
  • CSS facilmente personalizado com uma ampla seleção de variáveis para que eu possa experimentar e criar protótipos de layouts rapidamente.
  • Widgets de navegação padrão
  • Código-fonte aberto e gratuito, posso sujar as mãos e personalizar o LESS se precisar de um novo mixin ou alterar o comportamento da maneira que preciso.

Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?

Um dos maiores recursos do Bootstrap é a excelente documentação . Eu posso navegar com facilidade e os seletores de css são intuitivos e fáceis de lembrar.

Você poderia criar um site sem eles, se precisasse?

Sim, mas é claramente mais trabalho. Posso me concentrar nos layouts de UX e protótipos rapidamente, com widgets com boa aparência e funcionalidade consistente.


"Se você não gosta de como algo funciona, pode mudar." <- Com isso, você quer dizer que é forçado a bifurcar o projeto (e manter seu bifurcação exclusivo) ou inchar seu CSS final, desmarcando todas as coisas que você não deseja. "você pode usar o código fonte para aprender técnicas css" <- Aprenda muitas técnicas CSS ruins .
Cimmanon

@ cimmanon Inchando o CSS desmarcando? Não, não seja ridículo! Você pode compilar seu próprio código de inicialização, incluindo apenas os componentes necessários. Eu ficaria muito interessado em saber quais técnicas CSS que a equipe de bootstrap está usando são "ruins". Quaisquer detalhes, ou você está apenas reclamando e geralmente tem preconceito contra estruturas CSS?
ghoppe

@ghoppe Você acabou de pular tudo o que eu disse? Você deve optar por cortar as coisas que não deseja (e não me refiro apenas a módulos inteiros que não deseja, mas a estilos específicos em elementos específicos) ou substituí-los. Promover o uso do <i>elemento para "ícones" é bastante terrível. Nomes de classe não semânticos. Classite. Usando pixels para tamanhos de fonte. Realmente, eu poderia continuar. Eles estão literalmente indo contra todas as melhores práticas sobre as quais todos pregam na última década.
Cimmanon 03/07/2014

11
@cimmanon O <i>elemento foi uma péssima idéia, e é por isso que eles pararam de fazer isso com a versão 3. Sim, a grade não é semântica, mas você não precisa usá-lo ou pode usar LESS / SASS para pré-processar o seu próprio seletores semânticos com os estilos de grade. Há muita discussão sobre por que os px / em foram escolhidos. Com a maneira como os navegadores modernos escalam as páginas da Web, o problema não é tão simples quanto costumava ser. Toda estrutura CSS requer estilos de substituição, o que é um bom motivo para usar pré-processadores CSS.
21414 Ghoppe

11
@cimmanon Certamente há espaço para críticas, mas para mim o bom supera o ruim e, para muitos sites, é uma boa base inicial de resposta para se basear.
58568 Ghoppe

7

O bom de modelos de sistemas e estruturas é que eles podem economizar muito tempo se você trabalhar da maneira que eles querem. Portanto, com o Bootstrap, depois de aprender sua semântica para fazer um carrossel JS, é quase criminalmente simples de implementar. Além disso, o Bootstrap parece ficar muito mais simples se você rodar o seu próprio antes de começar ou usar algo como bootstrap-sass no Rails para alterar essas variáveis ​​rapidamente; isso evitará que você mude tudo mais tarde.

O DA01 fala sobre a consistência do navegador ... esse é um grande fator para mim. É por isso que eu uso o jQuery, embora várias pessoas na SO o lembrem de que adicionar uma grande biblioteca apenas para fazer algumas coisas é um desperdício de recursos. Sei que quando uso o jQuery, ele funciona em um certo conjunto de navegadores e, mesmo que eu consiga obter uma solução mais leve por conta própria, achei mais benéfico aprender como o jQuery quer que eu escreva JavaScript e, em seguida, faça do seu jeito.

No final, eu costumo achar estruturas HTML / CSS restritivas; Sou maníaco por controle o suficiente e ainda gosto de codificar manualmente quando posso. Mas, eu respeito o fato de que pessoas mais inteligentes e avançadas do que eu gastaram muito tempo para configurar esses modelos / estruturas.


11
Bom ponto de rolar o seu próprio. Da mesma forma, eu sei menos ou menos, mas preferia lidar com variáveis ​​em CSS via php. Então .. então eu não quero pular para Ruby por nada. Não quero invadir o lado "desenvolvimento" muito, só quero fazer minha vida mais fácil :)
Scott

@ Scott - Gotcha. Eu mencionei apenas Ruby porque tentei o Bootstrap pela primeira vez em um ambiente Rails e gostei que você pudesse alterar as variáveis ​​mestras rapidamente, sem precisar remontar uma nova versão.
Brendan

2
@ Scott Pode ser um caso de "se tudo o que você tem é um martelo, tudo parece um prego" - certamente você pode usar o php para lidar com variáveis ​​CSS, mas está sofrendo um desempenho desnecessário. Você pode pré-compilar as variáveis ​​com LESS ou SASS. Acho MENOS mais fácil de ler do que o PHP apimentado. :)
ghoppe

@ghoppe Entendido :) Mas uma lista de variáveis ​​na parte superior de uma página PHP para cores, e o simples uso dessas variáveis ​​nos seletores CSS torna a vida muito mais fácil do que LESS ou SASS na minha experiência. E sim, percebo que o php apresenta desempenho para estruturas maiores, mas posso cuspir um arquivo .css padrão para usar, se necessário (uma espécie da minha própria arquitetura LESS). Acho MENOS um pouco mais difícil de ler, sendo essencialmente uma nova marcação. HTML / CSS / PHP é muito familiar aqui.
Scott

@ Scott Estou totalmente convencido de aprender uma nova marcação. É por isso que eu gosto de SASS. É essencialmente apenas uma extensão do CSS, você não precisa aprender uma nova sintaxe, apenas os novos recursos que você precisa (como variáveis ​​ou mixins). Super fácil.
precisa saber é o seguinte

6

Por interesse, algum de vocês trabalha em uma grande equipe para uma grande empresa?

Estruturas como o bootstrap são fantásticas para criar um padrão consistente de código em um projeto, também significa que, ao recrutar para novos desenvolvedores, aqueles com experiência em uma estrutura popular já estarão familiarizados com a sintaxe e podem se tornar produtivos muito mais rapidamente ... ótimas notícias para grandes empresas.

Além disso .. com estruturas como o bootstrap, eles estão constantemente mantendo-o atualizado, suportando mais tamanhos de tela, mais dispositivos e melhores recursos, para uma empresa como a nossa (onde usamos o bootstrap), isso se resume essencialmente ao dinheiro economizado.

Lendo algumas das respostas até agora, elas parecem ter uma mente muito estreita, presumo que a maioria das respostas seja de pessoas acostumadas a trabalhar sozinhas ou em equipes muito pequenas e em projetos menores, onde esse tipo de coisa normalmente não é um problema. .


Veja minha resposta. :)
DA01 15/05

.. e foi por isso que perguntei. Não trabalho em um ambiente de desenvolvimento amplo. Eu suspeito que minhas opiniões seriam diferentes se eu fizesse.
15763 Scott

4

Além do que foi dito nas ótimas respostas anteriores, outra vantagem desses modelos seria a consistência entre dispositivos . As grades integradas facilitam o design de qualquer sistema operacional.

Ainda prefiro escrever meu próprio código, pelos seguintes motivos:

  • Familiaridade com o que eu já escrevi. Se preciso mudar alguma coisa, sei exatamente onde está;

  • Estrutura centrada no projeto. Cada novo site / aplicativo terá necessidades diferentes das anteriores, portanto, arquivos e recursos podem precisar ser organizados separadamente.

  • Visualizações personalizadas para diferentes dispositivos.

A menos que você esteja criando uma página muito restrita, acabará adicionando cada vez mais estilos a novos elementos e substituindo os existentes.

Como gosto de trabalhar com designs responsivos, a principal razão pela qual não os utilizaria é porque prefiro projetar cada etapa responsiva "separadamente" e como um todo. E esses modelos geralmente funcionam com uma grade mais ou menos rígida que você não pode ajustar completamente.


11
Isso faz parte do que eu estava pensando. E por que eu decidi dar uma facada no Bootstrap. A capacidade de resposta do sistema pode ser benéfica. Mas parece quase superado pela curva de aprendizado da estrutura. Brenden apresenta um bom ponto em sua resposta no que diz respeito à estrutura "rolando o seu próprio".
Scott

4

A maior vantagem é que você pode experimentar o redimensionamento, em vez de apenas especular como as coisas seriam.

Eu tenho uma abordagem de desenvolvimento muito "primeiro o conteúdo", na qual codifico a navegação e adiciono o conteúdo do texto. Isso tende a expô-lo a coisas que você não esperava quando estava na fase de design.

Usando uma estrutura como o Twitter Bootstrap, você pode realmente testar as páginas enquanto ainda está no design e até descobrir problemas de usabilidade e outros desafios da Experiência do Usuário. As estruturas têm muitas classes reutilizáveis ​​com as quais você se familiarizará e economizará tempo.

Você mencionou que codifica muito do zero. Quando tenho algo que precisa ser muito personalizado ou muito leve, eu vou com o Skeleton


Obrigado. Estou achando o Skeleton muito bom e útil em comparação com alguns outros. Apenas o suficiente para ajudar na capacidade de resposta sem realmente projetar algo para você.
21313 Scott

3

Durante anos, eu costumava codificar tudo, mas hoje em dia eu uso o Bootstrap. Por que eu faço isso?

  1. Recebo um layout responsivo com muito pouco trabalho. Em alguns sites em que eu estava trabalhando, eram necessários apenas alguns pequenos ajustes para obter um layout otimizado para tablet e celular. A barra de navegação responsiva é um dos meus componentes favoritos de inicialização.
  2. Os controles padrão não são consistentes entre os navegadores e o SO, sem mencionar que todos são invariavelmente feios, independentemente do SO ou navegador que você estiver usando. Com o bootstrap, você obtém uma aparência decente e consistente e sente pouco trabalho. Se você deseja alterar o estilo de todos os controles de qualquer maneira, sim, o Bootstrap não economizará muito tempo, mas, na minha experiência, na maioria das vezes você não teria tempo suficiente para mudar o estilo de todos os controles, mas ainda se sente irritado com o padrão feio. controles.
  3. Isso limita o que você deseja fazer, o que é uma coisa boa, porque, ao trabalhar com CSS puro, você tende a ajustar todos os detalhes (cor, espessura da borda, gradiente, sombra, raio da borda, transições, e a lista continua), embora individualmente levem pouco tempo, no geral é um grande sumidouro de tempo. Ao trabalhar em projetos com prazo, você deseja limitar o que pode ou não fazer; o uso de estruturas permite que você pense em componentes de granulação mais grossa, em vez de quais propriedades CSS ajustar.
  4. Algumas estruturas do lado do servidor têm integração com o bootstrap. Por exemplo, ao usar o django-bootstrap, você pode fazer isso apenas {{ form|as_bootstrap }}para obter formulários com estilo de inicialização, incluindo destaque em vermelho nas mensagens de erro, etc.

Ao alterar o Bootstrap, ocorreu-me que 80% ou mais do meu tempo estava sendo gasto aprendendo qual classe ou ID era aplicada a alguma coisa, e depois encontrei isso no CSS para ajustar.

É aí que você entende errado. Se você deseja se beneficiar do Bootstrap, não deve personalizar muito; você desiste da flexibilidade de precisar e pode ajustar tudo ao usar componentes pré-construídos. Você não deve gastar tempo vendo ou esculpindo tábuas de madeira ao decorar uma sala com os componentes da IKEA.

O Bootstrap é bom quando você precisa corrigir rapidamente um site em funcionamento a partir de componentes pré-construídos; seus componentes se destacam como um dedão dolorido se você os colocar em sites com designs sofisticados, por isso geralmente uso o Bootstrap para esse tipo de projeto.

Usar qualquer um dos pacotes front-end pré-configurados significa simplesmente que preciso aprender suas convenções de nomenclatura e sua estrutura, em vez de confiar sozinho.

Essa é realmente uma vantagem do uso de um pacote popular. É mais fácil entregar um projeto a outro desenvolvedor quando os dois sabem o que "btn-group", "btn btn-large" faz, com estruturas pessoais, eles precisariam aprender suas peculiaridades (ou, mais comum, eles apenas cascateariam) seu css com as alterações deles, e não se preocupe em tentar decifrar ou modificar seu código).

Você está apenas familiarizado com o sistema que usa, para poder navegar com facilidade ou ainda precisa procurar itens?

Os mais comuns, como btn, tabela, linha *, extensão *, etc, seriam naturais. Mas para o html dos principais componentes, é muito mais rápido copiar e colar dos exemplos em vez de digitá-los.

Você poderia criar um site sem eles, se precisasse?

Estive lá, fiz isso muitas vezes.


Sinto muito, mas considero esta resposta essencialmente "Projetos de bootstrap para mim, em vez de criar um site". Como designer, é exatamente onde sinto que o Bootstrap falha. Se você está confiando no Bootstrap para estilizar tudo, está confiando no Bootstrap para projetar para você. Essencialmente, você está criando o layout da página, não o design.
Scott

@ Scott: Isso está correto, eu não sou designer gráfico; Eu me preocupo com um site que funcione e com a capacidade de construí-lo rapidamente, e menos com o fato de ele ser pintado da cor exata que eu queria que ele tivesse.
Lie Ryan

Justo. (mas, dado o nome deste site ...), não estou perguntando sobre desenvolvimento. Estou perguntando sobre design. Entendo usar o Bootstrap como seu "designer". No entanto, se você é um designer, o Bootstrap apenas oferece estrutura. Estou achando difícil ver o valor em uma estrutura pré-empacotada, simplesmente reescrevendo para melhorar a aparência enlatada. É realmente fácil criar sua própria classe .btn e estilizá-la. Há pouco valor na aparência CSS dos itens como designer.
Scott

Você age como se pudesse escrever o Bootstrap em uma hora. :)
deizel

Não, não mesmo. Mas prefiro gastar mais tempo com uma aparência personalizada do que usar um pacote enlatado em que todos os sites acabam parecendo iguais. Não espero que todos os desenvolvedores "entendam" isso. E para o registro, Bootstrap não é que os envolvidos ou complexo. É apenas personalizado, o que requer o aprendizado das convenções de nomenclatura dos Twitters.
Scott

2

eles são bons apenas para:

  1. designers que não são familiarizados com a codificação, mas desejam uma solução para trazer seus designs para um site.
  2. uma maneira de transmitir produção de linha para alguém que não deseja criar sua própria estrutura.

pessoalmente, tenho meus próprios métodos e não desejo seguir esse caminho, porque já aprendi a codificar CSS, HTML e jQuery. Eu vejo um benefício nisso para pessoas que não têm idéia e estão tentando aprender a codificar. Teria sido bom ver algo assim há cerca de cinco anos. Além disso, como você declarou, levaria mais tempo para implementar isso em seus métodos de produção atuais.

EDIT: não tentando aumentar o seu thread, mas também estou me perguntando a mesma coisa, mas no que diz respeito ao WordPress. Usei levemente o WordPress, mas não sei se uma estrutura é benéfica. Planejei seguir o caminho antiquado até encontrar um grande benefício.


3
O WordPress é benéfico para quem não conhece PHP, quer uma arquitetura plug-in para o PHP ou deseja o sistema de usuário / segurança. Vejo muito mais benefícios nos sistemas CMS do que nos modelos CSS. Usar o Wordpress não é sobre front-end, é sobre back-end.
Scott

0

O Bootstrap é bom como ponto de partida para um layout responsivo. Mas no que diz respeito ao design, acho que falta bastante. Ele tem uma aparência meio 'bootstrappy', que por ser um modelo é extremamente usada.

Mas você deve ter em mente para que o bootstrap foi criado, para trazer consistência aos aplicativos internos criados pelo twitter, e se você usá-lo para isso, ou mesmo se é um desenvolvedor que deseja aprimorar rapidamente a Web aplicativo sem muita reflexão, talvez como um mvp ou protótipo seja uma ferramenta realmente ótima.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.