Hoje, com o crescimento do acesso por meio de dispositivos móveis, é necessário encontrar formas de tornar o conteúdo de seu site acessível por meio de smartphones. A partir daí nasceu o web design adaptativo e responsivo.
Aprimoramento Progressivo
A cada mudança de dispositivo móvel (o breakpoint) o Progressive Enhancement adiciona funcionalidades ao site dependendo da capacidade do hardware. Um exemplo é: Em um celular você não poderia jogar com todos os plugins jquery, mas em um tablet você pode jogar mais e em um Desktop você é ‘deus’. Tecnicamente, você mantém seu projeto principal limpo e funcional em todos os dispositivos.
Degradação Graciosa
Foi quando fizemos um site focado apenas em desktop e adicionamos suporte móvel depois. Usando o Graceful Degradation, estamos removendo recursos até chegarmos ao celular.
Mobile First
Primeiro pensamos no mobile e vamos adicionando funcionalidades até chegar ao desktop, segue o mesmo caminho do Progressive Enhancement com um nome curto.
Layout
A base do seu projeto é a Grade, e lembre-se de que você está começando a usar apenas uma coluna para dispositivos móveis e continuar crescendo para 2 ou 3 no tablet e 4 para 12 no Desktop.
Mantenha tudo adaptável
A partir das imagens do seu site. Lembre-se: as imagens devem ser enormes, mas não pesadas! e tente fazer alinhar os textos. Baseie seu layout em% ao obter a visualização do Tablet e mantenha-o no celular.
Unidades: EMs, PXs e%
Isso é importante! Os EMs são escaláveis, não perdem qualidade e são adaptáveis. Os PXs são fixos, não é uma boa ideia quando você fez algo responsivo. e% são escaláveis, nem adaptativos.
Desenvolvimento
O segredo está em brakpoints (o tamanho da tela), há muitos frameworks que você pode usar para isso, como: Zurb Foundation e Twitter Bootstrap. Ou desenvolva um novo como eu: Scrath Framework .
Responsivo e SEO
Usando as boas práticas de um código limpo seguindo os padrões de SEO em seu projeto, você terá um bom PageHank. Você deve pensar sobre isso no início do projeto! usando as palavras corrigidas no texto e organizando tudo.
Para mais dicas e tutoriais: www.kuklinski.com.br
Para conferir este post em português do Brasil: O que é necessário para fazer um site responsivo