Dani Guerrato

Palestra – Design & Desenvolvimento Responsivo

Por | Comentários: 7

A PopUp recentemente realizou um treinamento sobre design responsivo para a equipe de desenvolvimento do Cyber Cook, em Santos – SP. Tivemos um dia muito divertido com direito a café, comidinhas e um bate-papo descontraído sobre layouts, wireframes, media queries, grids, navegação, densidade de pixels… No final tivemos um hands-on onde desenvolvemos na prática um pequeno projeto responsivo. A experiência foi tão bacana que resolvemos compartilhar com vocês alguns slides da palestra! :)

Slides

Programa completo:

I. Introdução

Problemática, o que é design responsivo, origens, comparação com outras técnicas de desenvolvimento (mobile, adaptável e layouts liquidos) e Vantagens de utilização.

II. Design

Resoluções de Tela e Breakpoints, Pensando em blocos, Wireframes, Grids, Guias de Estilo, Redesign, Design para telas sensíveis ao toque e Imagens em alta resolução (SVG e Retina).

III. Desenvolvimento

Medidas Relativas (Pixel vs Porcentagem vs Em), Formula estrutural (objeto : Contexto = Resultado), Texto, margens e Espaçamentos, Imagens, Media Queries, Densidade de Pixels, Viewport, Grids Simples, uma introdução ao LESS, Grids Responsivos, navegação, Compatibilidade, Fallbacks, Principais problemas (e soluções possíveis).

IV – Extras

Cases, Ferramentas Úteis e Sugestões de Leitura.

V – Hands-on!

Desconstrução do layout da empresa com possíveis caminhos de desenvolvimento. Desenvolvimento prático passo-a-passo de uma página responsiva simples utilizando as técnicas apresentadas (demo) baseadas nas estruturas identificadas. Resolução de dúvidas. Conclusão.

Veja esta palestra ao vivo!

Se você também quiser ter uma palestra / treinamento personalizado da PopUp na sua empresa, escola, grupo de estudos ou ajuntamento de desenvolvedores malucos por café mande um e-mail para contato@popupdesign.com.br.

Até a próxima!

Tags: > , , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Itarcio Lima

    Dani, seus artigos são ótimos, bem detalhados, gostei tanto que tô divulgando para colegas de faculdade e e profissão.
    Sou designer e estou estudando CSS, mas tenho dificuldade com float e position, faz um post de como utilizar no CSS a grid do bootstrap, me disseram ser mais fácil e melhor do que o float.

    • Oi Itarcio!
      Fico feliz que você esteja curtindo os artigos. Se quer a minha opinião, utilizar o Bootstrap (bem como qualquer outro Framework) não elimina a necessidade de estudar os conceitos básicos do CSS. Se foque em aprender direitinho a desenvolver um layout do zero sem este tipo de muleta, para só então mergulhar mais fundo no estudo do Bootstrap. Não dá pra correr antes de andar. :)
      Um abraço!

      • Itarcio Lima

        Tem razão. Estou tentando estudar, até paguei 3 meses no Campus Tableless, rs, mas a falta de tempo não me deixa. Obrigado.

  • Alexandre

    Olá Dani, mais uma vez estou aqui, mas dessa vez para parabenizar pela iniciativa da palestra, dei uma olhada nos slides e os temas abordados são bem atuais e refletem a novas tendencias… show!!!

  • Daniel Farias

    Oi, Dani e Leandro. Sou novo no blog e gostei muito do conteúdo. Parabéns! Contudo, já estou procurando uma resposta há bastante tempo e não vejo (ou pelo menos não encontrei) ninguém falando sobre minha dúvida. E gostaria de saber se vocês poderiam me ajudar. A dúvida é a seguinte: Tem alguma forma de uma div não ser carregada quando acessada pelo celular? Eu não estou falando em escondê-la com CSS, mas sim de não carregar o HTML. Ou seja, em vez de dar um “display:none” no CSS, evitar seu carregamento com algo tipo “div hidden=@media screen and (min-width:964px)” e evitar com que seu conteúdo seja carregado economizando, assim, a transferência de dados no celular. Desde já agradeço pela ajuda.

    • Olá Daniel, tudo certo? Que legal que curtiu o nosso conteúdo. Ficamos muito felizes ao saber que está sendo útil.

      Então: para que um conteúdo não seja carregado em celular, você pode usar JavaScript ou PHP para fazer uma consulta de User Agent, e oferecer apenas um determinado conteúdo dependendo de qual dispositivo que ele está acessado. No entanto, eu não recomendo que faça isso. Como vem crescendo bastante o uso de dispositivos híbridos, as vezes uma dessas consultas pode ser confusa. Ou, como no exemplo do Firefox OS, já vi alguns casos que quando a pessoa acessava o site usando o navegador Firefox ele carregava como Firefox OS.

      Acredito que a melhor solução é repensar nesta div e uma maneira dela se integrar com o layout mobile. Eu não acredito que exista duas internets, uma Desktop e uma Mobile, que mereçam dois conteúdos diferentes. Acredito que a internet é uma só e deve ser 100% disponível para o usuário, independente da maneira com que ele acessa o conteúdo. Por isso que curto muito design responsivo: o segredo não é esconder conteúdo, mas organizar para sempre ter a melhor organização / apresentação e experiência, independente do meio.

      Claro que existem casos onde você não tem controle total sobre o projeto e precisa realmente não carregar algo. Para isso, da uma olhada em User Agents. Existe como você usar Javascript ou PHP para isso.

      Abraço

      • Daniel Farias

        Oi, Leandro. Muito obrigado pela resposta e principalmente pela rapidez. Você me ajudou muito. Já fazia tempo que procurava sobre o assunto. Mas lendo sua resposta, vou repensar o projeto e ver se realmente preciso dessa div ou se posso mantê-la na versão mobile. Obrigado.

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.