Construção de um site responsive de inicio ao fim

47 views
Skip to first unread message

edgaroli...@gmail.com

unread,
Jul 5, 2016, 7:53:44 PM7/5/16
to Livro A Web Mobile
Olá a todos,

Comprei hoje o livro Web Mobile e estou adorar :) Já vou na página número 100! O objectivo da compra é aprender/conseguir construir um site totalmente responsive.
Adorei a abordagem que o Sérgio defende. Ajustar os media queries ao nosso tipo de conteúdo/design. Umas das coisas que sempre me faz confusão foi a variedade de dispositivos no mercado! Por isso a pergunta, que o Sérgio tanto fala, mas para qual tamanho eu vou preparar a minha página! :) Isso sempre me deu um nó no estômago e fez ficar com a boca seca! :P

Parabéns pelo livro e que venham mais capítulos! ;)

Mas a minha questão é esta: O que devo ler para me orientar na construção de um site responsive? De início ao fim!
Estava à espera de um passo a passo neste livro! Este livro tem bastante cultura geral e tópicos técnicos que, para mim, são de extrema importância. Desta vez estou a gostar dos pixes e dos pixes do CSS :P
Mas falta-me a parte prática. Ainda não acabei o livro, talvez daí a minha questão. Mas como devo pensar no layout? Concordo em começar pelo mobile - agrade-me bastante a ideia. Mas E depois!? :P

À dois dias aprendi a fazer o grid system! Para quem tinha dores de barriga ao ver o site a ficar todo maluco no mobile, quando aprendi o grid e como ele funciona tive um orgasmo! :P Mas mesmo assim começo a ter problemas quando a estrutura começa a ficar complexa. Tenho que continuar a estudar :)

Agora a ler este livro vi que dá para fazer o mesmo sem o grid, através das percentagens. Por isso tenho um dúvida a berrar na cabeça! "O sistema grid deve ser aplicado!?"

Desculpem o testamento :) Parabéns e que a versão número três seja ainda este ano! :)
Bons códigos!

Sérgio Lopes

unread,
Jul 6, 2016, 11:53:36 AM7/6/16
to edgaroli...@gmail.com, Livro A Web Mobile
Oi Edgar!

Obrigado pelo feedback, fico muito feliz que esteja gostando!

Realmente o livro não é um passo a passo de projeto. Tá mais pra topicos diversos no assunto de web e mobile. O outro livro da casa do codigo, "Web Design Responsivo" do Tarcio Zemel tem um projeto mais pratico. Talvez te ajude nisso.

Eu tenho tbm um curso sobre Web Design Responsivo na Alura que tem um projeto simples do inicio ao fim, mais pratico que meu livro. Se interessar: https://www.alura.com.br/curso-online-web-design-responsivo

Sobre os grids prontos, acho questão de gosto. Eu pessoalmente não uso. Vou mais pra linha do meu CSS com porcentagens simples e pronto. Mas sei de bastante gente que gosta de frameworks de grids e se dá bem com eles. Nada contra :)

Abraco!

Edgar Oliveira Dev

unread,
Jul 6, 2016, 12:21:39 PM7/6/16
to Sérgio Lopes, Livro A Web Mobile

Olá Sérgio,

Já estou a ler o livro do Tarcio Zemel! ;) e estou adorar! Ainda hoje espero começar a desenvolver o web site institucional com base em layout fluido, elementos responsives e media queries!

Estou com um nó na cabeça em como definir e quando definir os breakpoints :/ mas vamos que vai! :)

Em relaçao ao grid acho que sou da mesma opnião! Gosto de metodologia mas prefiro a abordagem via porcentagem!

Vou analisar o curso! Obrigado

edgaroli...@gmail.com

unread,
Jul 8, 2016, 5:31:35 AM7/8/16
to Livro A Web Mobile
Ola a todos,

Talvez este fim de semana consiga partilhar o projecto via github, apenas para motivar o autor a escrever os próximos volumes :) hehe

Estou aprender bastante com o seu livro e com o livro do Tárcio Zemel. Comecei a construir um website, bem báscio, a partir do ecra 320x480 e fui aumentado e ver quando começava a quebrar. Tenho que treinar o meu olho, pois coloquei duas colunas de artigos num 360 pois me parecia que já ficava bem! Conclusão, no smartphone até que fica bem, mas se fica-se uma coluna ficava melhor!

Tentei duas abordagens, uma delas foi a que falei em cima, a outra foi abrir um programa de mockups e construir, tentar, todos os layouts possiveis. Achei uma seca e tive alturas que fiquei às escuras, pois não dá para fazer a mais pequena ideia como as coisas ficaram na realidade.
A minha questão é! Você reúne os requisitos do web site e começa pelos 320 e vai abrindo e arranjando ou faz alguns esboços, pormenorizados ou não, de como as coisas irão ficar nas medidas mais standards?
Porque antes de construir já temos uma ideia de quais os requisitos do website. Relembrando que devemos manter todos os requisitos em todas as resoluções pois a web é única (apoio totalmente este pensamento). Mas a minha questão prende-se ao facto se você é daqueles "pintores" que pega no pincel e sai pintando ou se primeiro faz um esboço e até vai ao pormenor de alguns elementos do site.

Obrigado

Sérgio Lopes

unread,
Jul 8, 2016, 7:28:07 AM7/8/16
to edgaroli...@gmail.com, Livro A Web Mobile
Boa pergunta!

Eu faço um esboço de criação num programa de desenho primeiro. Costumo fazer versão mobile (~360), uma versão tablet (~768) e uma versão Desktop (~1200). Servem de guia depois na hora da implementação.
Reply all
Reply to author
Forward
0 new messages