Design responsivo para iniciantes

O que é um design responsivo?

Responsive Web Design ( RWD ) é uma abordagem para web design que visa a elaboração de sites para fornecer uma óptima visualização e interação experiência fácil leitura e navegação com um mínimo de redimensionamento. Créditos: Wikipédia.

O Design responsivo é redimensionado para mudar de tamanho em várias das diferentes tamanhos de telas em um site: Se você estiver no celular será apropriado para o tamanho do celular, se você estiver no tablet será apropriado para o tamanho do tablet e se vocêestiver no computador será apropriado para o tamanho do computador.

Tenho uma conta no Blogger, posso deixar meu layout responsivo através dos códigos?
Olha, o Blogger já tem a opção de habilitar o layout responsivo automáticamente, você pode desabilitar e começar um do zero, mas não vejo necessidade.

Como faço um design responsivo?
Há várias maneiras de se fazer um layout responsivo, você pode fazer usando a folha de estilos em css que é bem mais recomendada, eu comecei a utilizar ela e uso até hoje. Deve levar em conta também o tamanho do layout e o design em cada tipo de tamanho e deve ser bem planejado para o design do blog não deixar a desejar. Preste atenção nos tamanhos da fontes e principalmente nas larguras das caixinhas, excesso de links juntos em letras pequenas ... Tudo isso interfere.

Para quem nunca soube deixar o layout responsivo, recomendo que assistam o vídeo abaixo, não fui eu quem fiz mas eu gostei muito e pelo menos quem tem um pouco de conhecimento em css e html não se perderá tanto no tutorial. Não precisa ter em mente um CSS e HTML avançado como o CSS3 e HTML5, mas é bom...

Deixo os códigos de importar essa folha de estilos no padrão responsivo,copie e cole os três:

 <link href="small.css" rel="stylesheet" media="screen and (min-width:0px)" type="text/css">

  <link href="medium.css" rel="stylesheet" media="screen and (min-width:1000px)" type="text/css">

  <link href="large.css" rel="stylesheet" media="screen and (min-width:1350px)" type="text/css">

Para celulares bem pequenos, largura mínima definida.

Para tablets pequenos ou celulares um pouco maiores.

Para computadores, notebooks e netbooks. É a largura padrão.