Observações sobre design responsivo

A plataforma Ion pode ser usada para criar e lançar páginas responsivas que ficam ótimas em desktops, celulares e tablets!

Introdução

O Ion interactive fornece alguns dos recursos mais sofisticados disponíveis e flexibilidade de design responsivo, e esses são mais bem aproveitados quando você aprender sobre os fundamentos dos layouts responsivos. Esses fundamentos não são específicos da plataforma Ion, mas são princípios gerais de web design responsivo. Antes de criar suas primeiras páginas responsivas, recomendamos que você estude como funciona o design responsivo. Compilamos alguns recursos de terceiros para ajudar você.

O artigo de design responsivo seminal foi publicado por Ethan Marcotte em maio de 2010, e recomendamos começar com ele.
Segundo a Wikipedia, Responsive web design (RWD) é uma abordagem de web design que visa criar experiências para fornecer uma visualização ideal — leitura e navegação fáceis com um mínimo de redimensionamento, panorâmica e rolagem —, em uma ampla gama de dispositivos (de dispositivos móveis a monitores de computadores de mesa).
Para ver o design responsivo em ação, aqui está um artigo que mostra 50 exemplos da web.
Sua plataforma interativa Ion usa a Bootstrap grid para o layout da página. Essa é uma estrutura de grid comum usada por muitos sites responsivos. Se você é um desenvolvedor e designer que deseja aprender mais sobre a Bootstrap grid, verifique a Bootstrap 3 grid introduction.

Diretrizes para mockups de design responsivo

Esperamos que as experiências de design na plataforma Ion sejam tão flexíveis que você não precise mais fazer mockups de página fora da plataforma. Recomendamos uma abordagem de criação em primeiro lugar, em que a página ganha vida diretamente na plataforma Ion. No entanto, se o seu processo requer que você comece com mockups (normalmente feitos no Photoshop) antes de publicar na plataforma Ion, é muito importante que você leia nosso post de suporte que inclui PSDs para a Bootstrap grid. Para ter acesso a PSDs que ajudarão você a começar com a Bootstrap grid, clique aqui.

Outras coisas para se ter em mente

IE8 e versões mais antigas do Internet Explorer não suportam design responsivo.
Páginas do Ion vão renderizar em uma janela de visualização média para visitantes que acessem uma página responsiva no IE8 ou anterior.
Para ver estatísticas de uso do Internet Explorer, clique aqui.

Introdução à Princípios do design

O tamanho das suas imagens pode mudar dependendo do tamanho da tela que está sendo usada. Imagens maiores retêm qualidade quando são reduzidas, enquanto imagens menores tendem a se tornar pixeladas quando são aumentadas. Com isso em mente, é recomendável usar imagens maiores para garantir a melhor qualidade possível.
Ao fazer ajustes no conteúdo de sua página, defina seus ajustes em porcentagens ou EM em vez de pixels, para que suas alterações sejam feitas em relação à largura da sua página/coluna em vez de fazer ajustes em unidades fixas de medida. Isso ajudará a manter a flexibilidade do design responsivo, enquanto permite que você faça ajustes consistentes em diferentes tamanhos de tela.
É especificamente recomendado que você use EM para tamanho de fonte, preenchimento, margens e porcentagens ao definir larguras.
Navegadores diferentes vão processar os seus ajustes de maneira diversa, conforme observado neste artigo no WebMonkey. Com isso em mente, se você fizer ajustes nas suas páginas, recomendamos um teste completo do navegador para garantir que sua página seja bem renderizada em diferentes navegadores e dispositivos.
Se você é um desenvolvedor, é recomendável não criar classes com larguras fixas, pois isso terá um impacto negativo na capacidade de resposta da sua página.
Projetar suas páginas primeiro para dispositivos móveis é uma ótima maneira de ajudar a encontrar o que é mais importante na sua experiência. Também tende a ser mais fácil expandir para fora de um espaço pequeno do que tentar condensar uma grande página da web em um espaço móvel menor. Para obter mais informações sobre isso, leia Mobile First, de Jeffrey Zeldman.