Fiz um design responsivo de um webapp de leilão de Haras/Fazendas, que provavelmente será usado numa disciplina do mestrado.
Estrutura da pasta
/css - arquivos css
/img - imagens, inclusive os protótipos de tela desktop e mobile (layout-desktop.png e layout-mobile.png)
/js - javascript utilizado no menu versão mobile
/scss - arquivos scss
index.html - arquivo principal do projeto
Estrutura HTML 5
Utilizei as tags padrões do html 5 para estruturar o arquivo html: <header> <nav> <main> <section> <article> <footer>
Breakpoints responsivos
Criei 5 breakpoints: os 4 padroes (acima de 1200px, entre 1200 e 768, entre 768 e 576, entre que 576 e 480) e 1 breakpoint a parte (menor que 480px) pois achei necessário para minha aplicação se adaptar melhor a resoluções menores de celular.
Os breakpoints ficaram assim:
- maior que 1200px (desktop grandes)
- entre 1200px e 768px (desktop)
- entre 768px e 576px (tablet)
- entre 576px e 480px (celular)
- menor que 480px (celular) - achei necessário criar esse para de adaptar melhor à resoluções menores de celular
Css e outros
Dividi em 2 arquivos css: um geral para toda a pagina e outro só para o menu versão mobile.
Utilizei a biblioteca css Font Awesome.
Navegadores
Testei mais no Chrome.