Resoluções - Design Responsivo

[mtsalcova]

Galera,

Em um projeto responsivo, o designer entrega o layout em quantas resoluções pra vocês? E entrega em .psd ou utiliza outra ferramenta?

Trabalho em uma agência e as vezes costuma sair uns projetos com apenas 2 resoluções (640 e 1152), aí o resto fica pro dev ajustar.

Valeu!

[rubenmarcus]

aqui na Printi foi duas pro site novo,320 e 1366, eu que me vire pro resto kkkkkkkkkkk e como o novo site vai ter muita coisa dinamica, gera muito retrabalho, fiz a grid na mão, mas direto muda escopo, isso em cima apenas de 1366 + q é o que eu to fazendo agora, quando tornar responsivo pra menos, até chegar no 320 com certeza vai ter muito mais

alias as duas não estão em todos os psds... só nos principais de uns 40 psds, só uns 15 tem...

Pela proporção da meio que pra sacar no que vai ficar.. mas enfim

[rberts]

Cara, isso é uma dúvida que eu tenho também, porque na teoria, deveria ter um layout pra desktop hd, desktop, tablet, mobile. Mas qual porcentagem das pessoas trabalham dessa forma? E dependendo do layout talvez não tenha necessidade de ter muitas "diferenças" entre as telas. Enfim, qual a opinião de vocês sobre isso?

[mtsalcova]

@rubenmarcus, eita cara, que complicado em! Então entre 320 até 1366, você vai imaginando como vai ficar o posicionamento dos elementos ou mantém sempre um contato com o design para cada breakpoint que você encontrou entre essas resoluções, pra ele verificar se está bom ou não?

@istiu, encontrei essa imagem em um artigo. Seria muito bom receber assim, mas isso requer mais tempo e as vezes não é possível pelo prazo do projeto etc. Enfim, alguém já recebeu o layout em várias resoluções parecido com a imagem?

[felipefialho]

Então, está ai uma questão que depende de vários fatores além da boa vontade dos profissionais envolvidos no projeto.

O mais correto é sempre a solução ser pensada desde o inicio como "Mobile First" e escalar para telas maiores, isso ajuda em diversos fatores, como estabelecer o que é realmente importante no conteúdo e evitar gambiarras de "esconder" no mobile.

Mas infelizmente, geralmente essa abordagem só vai ser usada em projetos com um bom prazo e orçamento, e na maioria das vezes vamos receber telas de Desktop, quando muito, com algumas variações para mobile (quase sempre se limitando a blocar os grids).

Sendo assim, cabe ao Desenvolvedor conversar com o Designer sobre qualquer dúvida em determinada resolução. Dificilmente vai ter uma versão "tablet" para o layout, então se você não souber o que fazer em determinada resolução, sente junto do Designer e resolvam juntos.

[rubenmarcus]

pra fazer um visual mobilefirst bom tem que ser MUITO bom, o layout do Terra eu acho um coco kkkkkkkkkk

@mateusalcova Não é que eu vou imaginando, eu escalo conforme a proporção só isso.. em 1366 ele tem um container de 1200 pixels se não me engano, pois bem, vou vendo nas próx resoluções e ajustando...

Mas esse não foi o pior que eu peguei, e sim de clientes freela wordpress, que queriam responsivo e adaptado e tinham uns layout totalmente skeumorfiscos, cheio de efeito etc q no mobile é foda kkk

[aleUX]

Geralmente entrego os layout nas media queries que serão usadas no projeto, aqui dentro usamos XS>480px, SM>768px, MD>992px, LG>1200px, XLG>1600px dá bastante trabalho, mas economiza muito tempo lá na frente. Geralmente o style guide ajuda muito nessa hora.

Mesmo assim na hora da programação e testes ficam alguns ajustes pra fazerem. Nessa hora a melhor coisa é o Designer e desenvolvedor estarem lado a lado para deixarem o projeto uma belezinha!!!

[felipefialho]

Mas só para servir de base, esses são os breakpoints que utilizo na maioria dos projetos

//
// 3. Media Queries
// --------------------------------------------------

$screen-xs   = 520px  // Extra small screen / phone
$screen-sm   = 768px  // Small screen / tablet
$screen-md   = 992px  // Medium screen / desktop
$screen-lg   = 1200px // Large screen / wide desktop
$screen-xlg  = 1400px // Extra Large screen / wide desktop
$screen-xxlg = 1900px // Extra Large screen / wide desktop

// Rupture Settings
rupture.mobile-cutoff  = $screen-sm
rupture.tablet-cutoff  = $screen-md
rupture.desktop-cutoff = $screen-lg
rupture.hd-cutoff      = $screen-xlg

rupture.scale          = 0 $screen-xs $screen-sm $screen-md $screen-lg $screen-xlg $screen-xxlg
rupture.scale-names    = '0' 'xs' 'sm' 'md' 'lg' 'xlg' 'hd'
rupture.anti-overlap   = -1px