Simplificando o meu entendimento do flexbox e css grid

 Simplificando o meu entendimento do flexbox e css grid

Depois de criar o layout do site ou blog. Precisamos definir alguns parametros.
Imagine que o layout seja do formato abaixo em Desktop:

Precisaremos agora definir o que?
Imaginemos que o site basicamente será acessado por três dispositivos que tenham diferentes tamanhos de tela.

Já vimos qual vai ser o formato em uma tela.
Mas qual deverá ser o formato na segunda tela levando em conta o tamanho da tela do dispositivo?
Imagine a tela de um tablet?
Seria como a tela abaixo:

A imagem acima foi obtida por meio da minha ferramenta de desenho Inkscape, e redimensionei a largura apenas visto que assim será no mundo real, não precisamos levar em conta a altura ao desenvolver para disposivos móveis.

Agora veja o que poderia ser o melhor ajuste para a tela do tablet:

Nós notamos nesse ajuste quais as diferentes ferrametas vamos precisar usar.

FLEXBOX

O Flexbox trabalha no conceito de container pai com itens filhos.
O pai recebe algumas propriedades que irão influir na direção em que os filhos (itens) fluirão.
Exemplos:
Será em linha ou colunas?
Qual a direção a partir da esquerda ou direita?
Quando comecei a estudar flexbox veio uma idéia, e se eu pudesse colocar flexbox container dentro de flexbox contaner? Não cola.
Então prefiro definir os elementos usando grid e flexbox.
Mas como aplicar os dois conceitos nesse caso que está sendo examinado?
Preciso me lembrar que anda tenho que selecionar o problema da tela para dispositivos menores. Como tornar melhor a visualização em dispositivo até 400 px?
Veja a atual disposição dos elementos na nova tela na imagem abaixo feita no Inkscape:

Agora estamos descobrindo que a melhor opção para dispositivos menores que 400 px seria dispor os elementos em coluna. Beleza?
Veja agora como ficou:

Ainda temos outros detalhes para melhorar a visualização e a experiência do usuário.
Visto que teremos dois espaços para widget, qual será a melhor posição?
Seria a que facilitasse o uso ou acessibilidade? Com certeza.
Tenho outros conceitos para colocar em prática nesse template blogger.
Se o usuário for cego, ou precisar usar um leitor de tela. E se ele tiver dislexia?
Quais seriam as melhores cores para quem possue alguma deficiência relacionada.

Nós notamos também ao redimensionar o layout que a largura da coluna poderia ser melhor apresentável em dispositivo diferente. Usaremos o grid para ajustar esse detalhe.
Qual o melhor tipo de cor a ser usada para o conteúdo.
Essa será a meta da próxima semana no desenvolvimento. O resultado será postado aqui, se quiser ver como vai ficar essa brincadeira. Vou compartilhar no linkedin, facebook e twitter.