Opinião no desenvolvimento de sites

[rikaschmitt 54]

Boa tarde.

 

Gostaria de discutir com vocês sobre desenvolvimento de sites e pedir uma colinha de como vocês geralmente estruturam os mesmo, desde css até html, jquery, etc.

 

1. Estou lendo bastante sobre sites responsivos e sites líquidos. Neste link dá pra ter uma noção bem detalhada e bem explicada de como começar a utilizar a unidade "em" no lugar de "px", que para mim, está sendo bem interessante. Só tenho uma dúvida referente a isso: quando utilizar "em" e quando utilizar "%"?

 

 

2. Outra coisa que gostaria de discutir com vocês é sobre como construir um layout responsivo. Li e reli sobre as tais grids, mas aquilo pra mim ainda é um bicho de 7 cabeças. Eu entendi como funciona na teoria, mas na prática achei muito complicado. Preferi continuar criando as minhas divs normais e alterando quando for preciso.

 

 

3. Sobre as @media query, como usá-las da forma correta?

Atualmente estou usando mais ou menos assim:

<div class="box">Lorem ipsum</div>

@media only screen and (max-width: 1600px) { .box { width:200px; } }
@media only screen and (max-width: 1440px) { .box { width:130px; } }

Tá certa a forma que estou usando para determinar o estilo de algum objeto? Claro que também pensei em usar um "display:none" nos elementos que eu não quero que apareçam em determinadas resoluções (o que acredito que seja correto).

 

 

4. Quais navegadores, de fato, suportam o HTML 5?

Digo, as novas tags e estruturações, como:

<header>
<section>
<nav>
<article>
etc..

Por fim, gostaria de pedir que analisem se o código abaixo que estou usando, é logicamente correto.

<div id="header">
   <div class="wrapp">
      conteudo aqui
   </div>
</div>
<div id="content">
   <div class="wrapp">
      conteudo aqui
   </div>
</div>
<div id="footer">
   <div class="wrapp">
      conteudo aqui
   </div>
</div>

#header { width:100%; height:30em; }
.wrapp { width:90em; margin:0 auto; }

Geralmente utilizo assim nos meus sites:

- Existe uma div pai com id, que geralmente preenche a largura total da página;

- Existe uma div "wrapp", que define a largura máxima do conteúdo (neste caso entraria as @media, para definir essa largura máxima de acordo com cada resolução);

- Dentro da "wrapp" viriam os conteúdos.

 

 

Valeu gente.

[William Bruno 1501]

5. Depende do layout. O seu layout pede que o elemento tenha 100% de largura ?

se não, vc deveria fazer apenas:

<div id="header" class="wrap">

e já que vc perguntou de html5, que tal:

<header id="header" class="wrap">

?

 

4. Depende do que. As tags html5, todos eles, menos os IEs muito antigos. (6,7)

As novas apis, ai vc tem que olhar uma por uma.

 

3. Não cara, não use display: none; isso vai contra toda a idéia de responsivo e Mobile First.

Se não deveria aparecer em tal resolução, pq aparece em outra ? será q na verdade não deveria aparecer em nenhuma ?

A sintaxe está correta.

 

2. Eu utilizo uma grid que desenvolvi. Ela possui uma largura máxima e trabalha com quebras de colunas e liquidez.

https://github.com/wbruno/column.gs

Mas geralmente desenvolvo testando como está ficando, e insiro breakpoints nas resoluções em que preciso mexer em alguma coisa.

 

1. Gosto de em para tamanhos de fontes. Além disso, acho completamente desnecessário e complicado.

Use % quando quiser que fique líquido.

Use px quando quiser ter um controle perfeito do seu elemento.

[rikaschmitt 54]

Poisé William, ele precisa que fique com 100%, pq geralmente tem umas imagens de fundo e cores e tal.

 

Sobre o display:none, tua lógica está certa.. o problema é que o site tem muito conteúdo(imagens, textos, etc). Se for fazer para aparecer tudo em mobile, a tela vai ficar muito poluída e com textos bem pequenos.

 

E sobre os seus grids.. interessante.. mas.. como que usa isso? Não entendo como funciona.. aonde que coloco os meus códigos, como funciona...

[William Bruno 1501]

Tem um "demo" lá:

 

http://wbruno.github.io/column.gs/

 

E este site eu fiz utilizando ele:

http://strudelfolhadinho.com.br

 

Note que "nem tudo" o grid resolve. Então o responsivo do menu eu fiz "na mão".

Tipo, os GRIDs irão facilitar a estruturação do seu site. A idéia deles é padronizar tamanhos de elementos e espaçamentos.

 

Assim, você tem q pensar em GRID desde o wire/psd.

Olhando o site do 960.gs dá para você ter uma boa idéia disso:

http://960.gs

 

Veja que todos os elementos se encaixam nas linhas. Não tem nada com uma largura "irregular". Fica tudo padronizado.

Talvez valha a pena um novo tópico ou um artigo apenas sobre grids. Vou escrever de noite

[rikaschmitt 54]

Mas para fazer um site responsivo, nao necessariamente precisa usar grid..?

[William Bruno 1501]

Não, não necessariamente. Vc pode fazer tudo na mão.

 

Só que irá utilizar muito mais código, não irá se beneficiar da padronização, e terá muito mais trabalho para fazer tudo na mão o que os grids já te entregam de graça.

[rikaschmitt 54]

Poiseh.

Existe algum grid de 1200px de largura? Ou se eu editar o width maximo de qualquer grid pronto, ele automaticamente vai se ajustar?

 

Outra dúvida...

Como no seu grid, existe vários tamanhos de colunas... e pelo css\html, notei que há bastante div pra cada coluna. Pergunto: eu uso apenas a classe que eu quiser?

 

Digamos que eu tenho um banner que deve ocupar a largura de uma coluna média, e ao lado desse banner tem 2 links que devem ocupar 1 coluna cada.. eu uso:

<div class="linha">
    <div class="coluna media"> banner </div>
    <div class="coluna pequena"> link 1 </div>
    <div class="coluna pequena"> link 2 </div>
</div>

certo?

[William Bruno 1501]

Utilizando o meu sistema de grid, ficaria:

 

<div class="column-full content cf">
    <div class="column-half"> banner </div>
    <div class="column-quarter"> link 1 </div>
    <div class="column-quarter"> link 2 </div>
</div>

ou:

<div class="column-full content cf">
    <div class="column-two-thirds"> banner </div>
    <div class="column-sixth"> link 1 </div>
    <div class="column-sixth"> link 2 </div>
</div>

sei lá, depende do quão pequena vc quer as outras duas.

Eu trabalho com frações, cada linha deve somar um inteiro.

 

 

Sim, a maioria você pode apenas editar a largura máxima. O meu é um deles.

Outros não é possível.

[rikaschmitt 54]

Vou utilizar o seu, então.. posso?

 

E, naquele "demo", como sei qual classe é de cada coluna?

<div class="column-full content cf">
  <div class="column-half"> banner </div>
  <div class="column-quarter"> link 1 </div>
  <div class="column-quarter"> link 2 </div>
</div>

Neste exemplo, digamos que o site seja reduzido, automaticamente as divs irão se adaptar a resolucao? Ficando uma embaixo da outra..?

[William Bruno 1501]

Pode usar sim.

Sim, irão se adaptar sim.

 

Depende do que vc quer cara. =)

Lê o css. Pensa assim, qual o tamanho da coluna que vc quer ?

 

metade da tela ? -> column-half (coluna metade)

um terço ? -> column-third (coluna um terço)

dois terços ? -> column-two-thirds (coluna dois terços)

 

.. e por ai vai.

[rikaschmitt 54]

Pode usar sim.

Sim, irão se adaptar sim.

 

Depende do que você quer cara. =)

Lê o css. Pensa assim, qual o tamanho da coluna que você quer ?

 

metade da tela ? -> column-half (coluna metade)

um terço ? -> column-third (coluna um terço)

dois terços ? -> column-two-thirds (coluna dois terços)

 

.. e por ai vai.

 

Sim.

Estou fazendo aqui e está ficando show... até com lágrimas nos olhos eu estou. HAHAHAHA

 

Bem fácil mesmo... eu pensava que era mais complicado.

 

Só tenho que fazer alguns ajustes, mas valeuzão mesmo!!