Olá Diogo! Só me referi ao uso das tags de HTML5, por se estar a falar num site responsive, ou seja estar-se a falar das tecnologias modernas em front end, embora o responsive ja tenha 4 ou 5 anos, mas só agora nos ultimos é que os clientes tem acordado para a realidade.
Quanto a CSS inline, deixo aqui um artigo (entre vários, que se pode encontrar online) em como refere que não é de todo boa pratica usar CSS inline:
Quanto às tabelas, percebo, embora como acho que isto seja um tutorial sobre uma “tecnologia” moderna e recente, que se tente focar no recente, e não voltar ao passado com as tabelas. nada de mais aqui.
Para esclarecer @Sara e @Diogo, acerca da metatag viewport, após mais uns testes realizados pude comprovar que não depende única e exclusivamente dessa metatag para poder passar o teste do Google, desde já as minhas desculpas, e com efeito ficam abaixo alguns testes que fiz:
As minhas desculpas se não está de acordo, mas foi apenas no sentido de demonstrar como se faria utilizando tabelas. Uma vez que já tinha feito o mesmo acima, sem utilizar tabelas.
Isto em vídeo, feito por alguém do pplware semanalmente era brutal, isso e um canal de gameplays e reviews de componentes 😉
Não querendo estar a complicar, permitam-me discordar, mas não existem breakpoints standard. Isso é uma falácia.
Isso não é uma prática recomendável, porque defines em função de pré-definições de dispositivos e o problema é que depois os dispositivos que não se encaixam nesses breakpoints (ex: qualquer Android com densidade XXHDPI ou até o iPhone 6) ficam com um layout que não é o ideal.
Portanto a minha sugestão é: comecem do mais pequeno e vão redimensionando o vosso browser até o conteúdo ficar uma treta. E a regra é: se fica uma treta, há um breakpoint a criar. Para além de criares um layout muito bem adaptado a dispositivos com ecrã mais pequeno, começas a tomar decisões relativamente ao teu conteúdo que depois te vão ser úteis em termos de performance, complexidade, etc.
Eu apenas referi isso porque existe quem seja a favor dessa metodologia e por isso, eu decidi referir.
Desculpa insistir na questão das tabelas, mas estas não devem mesmo ser utilizadas para dispor elementos num layout. Estas têm valor semântico e devem apenas ser utilizadas para apresentar informação num formato de tabular, tais como informações com relações entre si. Estas são lidas por tecnologias assistivas (tais como leitores de ecrã) de uma forma própria.
A recomendação de utilizar tags da especifição HTML 5 é muito válida e penso qur deve ser tida em consideração em artigos futuros. Eu ainda iria mais longe e diria que se deveria utilizar os landmarks roles para as ARIA para marcar secções lógicas do site.