Dicas: Layout Responsivo - Passo 1

Antes de começar a escrever sobre qualquer dica relacionada a construção de layouts responsivos, preciso esclarecer dois pontos:

1- As dicas que darei são baseadas em minhas experiências e em meus estudos (tem muita referência boa por ai).

2- Apresentarei esses posts em formato de passo a passo, porém será com o intuito de organizar as ideias, pois você poderá pular algumas etapas e/ou acrescentar outras - apesar de eu não aconselhar...

Pois bem, pingos nos "is" colocados, vamos por a mão na massa!

Analise o contexto do site a ser feito, qual é sua área de atuação, quais serão os conteúdos que mais aparecerão, exemplo: imagens e textos ou mais vídeos. Enfim, ter uma primeira conversa com o cliente e colher dele essas informações é primordial para a elaboração de um layout bem estruturado e que contenha informações bens distribuídas, inclusive quando ocorrerem as quebras (caso você não sabe o que é isso, falaremos mais tarde).

Vá para a primeira reunião com o cliente, munido de perguntas elaboradas de forma a conseguir extrair dele todas as informações possíveis sobre o site. Preparar um briefing o ajudará muito nesse momento.

Atente-se a cumprir bem essa primeira etapa do projeto, afinal não queremos ter retrabalho, por não ter pensado nesses "detalhes" antes de iniciar o projeto.

Saiba Mais: Design Responsivo

Até pouco tempo atrás, pouco se pensava em responsividade de layouts, adaptação do conteúdo em diferentes resoluções de telas ou na experiência do usuário que iria acessar seu site em dispositivos móveis. O máximo que tínhamos, em alguns casos, era o redirecionamento de tela mediante o auxílio do JavaScript e a elaboração de um template exclusivo para mobile.

Quem nunca entrou num site www.exemplodesite.com, pelo computador, mas pelo celular era m.exemplodesite.com?

Entretanto, hoje em dia, não podemos mais pensar em construir layouts e elaborar templates sem pensarmos (e muito!) em como ele agirá ao ser exibido nas mais diferentes resoluções disponíveis.

Existe uma série de medidas que podemos tomar para deixar nosso trabalho mais fácil, mas se você preferir poderá pular algumas etapas e partir direto para a codificação.

Seja qual metodologia de trabalho utilizar, o importante é que o resultado final seja um site charmoso e responsivo.

Deixarei as dicas de criação responsiva para nossa sessão de "Dicas". E elas virão quentes!

É ela quem manda: W3C

Você sabe o que é a W3C? Para que serve e o que essa sigla significa?

 

Caso você não trabalhe com desenvolvimento web ou não cursou/esteja cursando algum curso relacionado ao tema, talvez esse nome não lhe seja familiar. Mas para quem está na área, W3C é algo conhecido. Afinal, falou-se em Web, falou-se em W3C.

 

Por quê?

 

Porque é ela quem regulamenta todos os padrões utilizados na internet, todos os cursos (leia-se também faculdades) focados em web, todas as boas práticas de web design, enfim, toda a websfera.

 

Para dar-lhes maiores detalhes, talvez seja mais fácil vocês lerem a própria descrição feita por eles, em que explica, de forma sucinta, o que é e quais são os objetivos desse consórcio.

 

 

                                  "O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo."

Fonte: http://www.w3c.br/Sobre

 

 

Principalmente para quem está iniciando a carreira de desenvolvimento ou de design para a web, perceba que a W3C será uma companheira sua (nossa) em toda jornada de trabalho, afinal é com base em suas diretrizes que iremos criar nossos projetos. Aproveite para conhecer mais os padrões estabelecidos!

Saiba mais: Tableless

Tableless é o termo utilizado para dar nome a páginas que são feitas em HTML, mas que não utilizam a tag <table></table> para definir as formas de um layout.

 

Até há algum tempo, muitos designers utilizam as marcações de tabela para definirem as medidas que cada elemento de uma página iria utilizar, porém esse não era uma boa prática, principalmente segundo a W3C. Pois muitos browsers demoravam a interpretar os códigos e consequentemente havia demora no carregamento dos conteúdos.

 

Hoje, as tabelas somente são utilizadas para dados tabulares - ou pelo menos deveria ser. Para definirem os espaços em um layout, os web designers fazem uso do CSS e criam divs, que realizam essa demarcação e não pesam na hora de carregar.

Cada div recebe um nome de identificação

 

Se você está começando a atuar na criação de sites, atente-se a entender como as divs funcionam e crie páginas em tableless, ou seja, sem tabelas.