Conselhos para criar um gráfico fluido e responsivo

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.

Nesta manhã, a Smashing Magazine publicou um artigo sobre o foco em parte de uma imagem ao dimensionar para dispositivos móveis: Escolhendo uma solução de imagem responsiva (role para baixo até a seção "O problema da direção de arte"). Com a foto da estrada em seu site, certifique-se de mostrar a estrada, em oposição às árvores, ao reduzir a escala porque a estrada reforça a ideia de "Estamos a caminho".

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?

Depende dos outros elementos na página. Se você estiver usando imagens em primeiro plano, aderir a um fundo de cor única que não concorra com as fotos permitirá que os olhos se concentrem naturalmente nas imagens em primeiro plano.

Como posso criar um padrão de repetição que funcione e seja relevante para o assunto e o design?

Um padrão repetitivo de uma caixa reforçaria o conceito de movimentação e armazenamento.

Se eu usar uma imagem flutuante em primeiro plano, você acha que ela deve parecer realista, como no clip-art?

O clip-art pode ser complicado. Existem algumas imagens vetoriais bem projetadas e ilustrações rastor que se qualificariam como clip-art, mas ainda são feitas com bom gosto. Se você usasse um no formato SVG, ele seria bem dimensionado nos dispositivos de exibição de retina. Apenas verifique se a imagem que você escolhe é boa e consistente com o clima que está criando. Posso imaginar um belo desenho de caixas que ficaria bem, mas também posso imaginar um clip-art de baixa qualidade que ficaria ruim. Se não tiver certeza, as fotos geralmente são uma escolha segura.

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?

Nos três blocos de texto horizontais, eu os dimensionaria e preencheria para que você tivesse de 4 a 5 palavras por linha. Quando você chega ao tamanho de dispositivos móveis ou janelas realmente estreitas, eu alterava a exibição para bloquear, para que cada bloco de texto ocupasse sua própria linha.

Confira estes artigos:

• 10 princípios para tipografia legível na Web
• Cinco etapas simples para melhorar a tipografia

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

Concordo. As fotos com foco em uma área com o restante do fundo menos proeminente ou desfocado (os fotógrafos chamam de desfoque "bokeh") funcionariam bem aqui. Consulte também a foto da árvore no artigo da revista Smashing que eu liguei acima.

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?)

As imagens existem para reforçar o texto. O texto é o fator mais importante, portanto, você deseja garantir que as imagens sejam colocadas com capacidade de suporte. O texto deve ser destacado, mas não bloquear a parte importante da imagem.

A proximidade é a chave. O texto deve estar próximo da imagem e mais afastado de outras imagens. Se você tiver a imagem 1 com algum texto abaixo, deseja ter menos espaço entre a imagem e o texto de suporte do que entre esse texto e a próxima imagem. Por exemplo, digamos que você tenha a imagem 1 com o texto abaixo, depois a imagem 2 abaixo e mais o texto abaixo da imagem 2. Você deseja ter mais espaço em branco entre a legenda da imagem 1 e a parte superior da imagem 2 do que você ' d tem entre a imagem 1 e sua legenda.

Um ótimo livro sobre esse tópico é o The Non-Designer's Design Book

Verifique também o Guia do desenvolvedor da Apple sobre princípios de interação: princípios de interface humana . Muitas coisas boas aqui.

As opções parecem simples.

• Use vários tamanhos de imagem, cada um chamado através de consultas de mídia, para corresponder aos 4 tamanhos básicos de tela.
• Use a background-size:propriedade para alterar dinamicamente qualquer imagem de plano de fundo
• use a overflow: hidden;propriedade para ocultar simplesmente imagens maiores em uma div à medida que a largura da página diminui. Isso exigiria que você lembre-se do que é visível em várias larguras de página.

As perguntas que você faz são um tanto ambíguas .... mas ....

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?

Altamente dependente do padrão. Se é um padrão sutil que não concorre visualmente com o texto acima dele, um padrão pode funcionar. Eu me inclinaria para uma cor sólida ou gradiente sutil. A cor simples tornará o texto mais legível.

Como posso criar um padrão de repetição que funcione e seja relevante para o assunto e o design?

Essa é a sua decisão. Você está pedindo que outras pessoas projetem algo para você?

Se eu usar uma imagem flutuante em primeiro plano, você acha que ela deve parecer realista, como no clip-art?

Novamente, isso é entre você e o cliente. O "humor" ou "mensagem" a ser transmitida pelo site determinaria o estilo das imagens a serem usadas.

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?

A consistência é melhor para o design. A consistência dá uma impressão de estabilidade. Se o primeiro bloco de texto for uma única linha de texto, tentarei manter uma única linha de texto para todos os blocos de texto subsequentes. A largura pode mudar um pouco, mas mover de uma única linha de texto para várias linhas de texto exigirá elementos móveis. Quando os elementos se movem, você perde o senso de consistência.

Usando CSS3 Media Queries, podemos tornar as imagens responsivas.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Se você quiser mais explicações, consulte este link, http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries