Então, estou criando um site totalmente responsivo, com o objetivo de usar o menor número possível de consultas de mídia e números mágicos. Depois de várias tentativas, descobri que usar o conteúdo para criar o layout é de longe o melhor curso de ação.
Meu cliente solicitou que um slideshow / carrossel de imagens estivesse visível na página inicial e possivelmente em todas as páginas principais. Eu criei um layout que funciona e eles estão felizes com isso. Você pode vê-lo aqui .
Agora eu tenho um novo desafio, como faço para criar uma apresentação de slides atraente, que responda a uma mídia e tenha uma boa aparência? Deixe-me expandir ..
Tenho poucas restrições, o que é mais um fardo do que um alívio neste caso.
- A imagem deve ter 400 px de altura.
- A largura pode variar entre 300 px e 2000 px.
- Posso criar algumas camadas, dependendo dos detalhes, que podem ser movidas pela própria página da Web para responder ao tamanho da tela.
- As imagens e o design provavelmente permanecerão os mesmos por um longo tempo, enquanto o texto mudará com bastante frequência.
Então, o que estou pensando e tentando atualmente é:
Use uma imagem de plano de fundo com um link direto para o assunto e uma ou duas fotos interessantes e relevantes do tipo clip-art que possam ser exibidas dependendo do tamanho da tela.
Em seguida, permita que o texto se posicione, com a ajuda de margens / preenchimento e consultas de mídia.
No momento desta edição, tomei a opção fácil, segura e chata usando fotos amplas e óbvias.
Estou procurando conselhos sobre a abordagem a ser adotada ao criar gráficos que respondem ao meio em que são exibidos.
Perguntas originais (não tão) relevantes para isso:
Um gradiente de uma cor, gradiente simples ou fundo muito suave seria melhor do que um padrão de repetição ou um com detalhes?
Como posso criar um padrão de repetição que funcione e seja relevante para o assunto e o design?
Se eu usar uma imagem flutuante em primeiro plano, você acha que ela deve parecer realista, como no clip-art?
Melhores tópicos de consideração:
- Do ponto de vista do design (conheço o lado técnico), que condições posso usar para decidir como dimensionar o texto para cima / para baixo e ainda ter uma boa aparência? ie o texto não deve ser maior que um determinado tamanho, dependendo da largura do seu contêiner?
- Que tipo de imagens são melhores para um fundo com uma largura altamente variável? Meu palpite é que as imagens têm um único ponto de interesse âncora com alguns detalhes sem importância no restante da imagem
- Quais são as coisas mais importantes a considerar em relação à natureza não fixa / flutuante das imagens e do texto em primeiro plano? (espaço em branco, embalagem e mais alguma coisa?)
Quaisquer posts, artigos ou relatórios relevantes para isso são bem-vindos e muito apreciados.