Design Responsivo Realmente Fácil
Não é nenhum segredo que muitos acreditam que a web responsiva é o futuro. Criar um site responsivo significa que ele é capaz de se adaptar aos diversos navegadores e tamanhos disponíveis. Se eu quiser ter certeza de que meu site que criei na minha área de trabalho pode ser visto em um tablet com rolagem mínima e zoom, estou interessado em criar um site responsivo.
Uma razão pela qual os sites responsivos se tornaram populares é porque isso faz sentido. É mais barato do que criar um ou mais sites extras para celulares e tablets. Também garante que haja uma experiência de visualização consistente entre dispositivos e telas de área de trabalho. Não é divertido aumentar o tamanho da sua janela ou rolar horizontalmente para ver um site inteiro.
Embora a criação de projetos da Web responsivos esteja se tornando mais fácil, existem algumas maneiras de fazê-lo funcionar ainda mais rapidamente. Graças a alguns CSS e HTML, podemos codificá-lo diretamente em nossos sites. Outros elementos exigem um pouco mais de trabalho. De qualquer maneira, criamos uma lista para ajudar você a reunir seu site responsivo com o mínimo de barulho e o máximo de resultados.
plugins jQuery
Isótopo
Isotope é um plugin jQuery que pretende criar layouts mágicos que não podem ser criados por CSS e HTML. Ele tem a capacidade de reorganizar os elementos dentro de um contêiner para que eles se ajustem a ele à medida que são redimensionados. Você também pode usar o Isotope para filtrar e ordenar itens por categorias e tal.
Breakpoints.js
Breakpoint foi feito com desenvolvedores e designers em mente. É um plugin que permite criar pontos de interrupção para diferentes tamanhos de navegadores. Quando seu navegador é redimensionado para um desses tamanhos, os elementos podem se encaixar na tela.
FitText.js
Este é um dos meus plugins jQuery favoritos, porque é para fontes. Com muita frequência, no web design responsivo, as pessoas não levam em consideração que as manchetes devem ser responsivas em vez de comprimidas em um determinado espaço. FitText permite que você faça exatamente isso, mas lembre-se de usá-lo somente para manchetes!
Response.js
Se você gosta da ideia do Breakpoint.js, mas quer mais personalização, o Response.js é a resposta. É realmente ótimo para quem conhece jQuery melhor que CSS e HTML e precisa criar sites responsivos. Você usa seus pontos de interrupção, mas há muito mais personalização, como tamanho do dispositivo, rações de pixel e a capacidade de carregar origens diferentes para tamanhos diferentes.
TinyNav.js
TinyNav é um plugin jQuery leve que permite que você altere qualquer item de menu usando listas para transformar em menus suspensos quando o navegador é redimensionado. Você pode especificar os tamanhos e os menus que mudam. Não é tão amplo em função, mas é muito eficaz para o que faz.
Estruturas e sistemas populares
Sistema de Rede Responsivo
Este sistema alega não ser um clichê ou framework, mas apenas um sistema para tornar seus projetos responsivos. Parece ser um dos mais flexíveis, uma vez que não o restringe a um determinado tamanho ou a uma determinada grade. Eles usam classes CSS diferentes que podem flutuar e criar suas próprias colunas.
Sistema de Grade Dourado
O GGS também é um sistema e não um 'framework'. Eles gostam de se referir a si mesmos como um ponto de partida ou diretriz para aqueles que querem usar uma certa quantidade de grades em seu web design. Você recebe 18 colunas na tela, mas 16 para usar em seu design. Você faz as suas próprias larguras e calhas para usar e essencialmente ir a partir daí.
1140 Grid System
Por um tempo, muitos designers usavam designs de web com 960 pixels de largura. Então isso se tornou pequeno e eles subiram. Agora muitos designs estão sendo desenvolvidos usando uma largura de 1140px. Este 1140 Grid System permite que você crie 12 colunas para usar em um design web de largura ampla.
Twitter Bootstrap
O Bootstrap é um dos frameworks mais populares disponíveis. É uma estrutura de grade 12 que se tornou utilizável em vários navegadores (incluindo o Internet Explorer 7) e pode ser usada de maneira responsiva em dispositivos portáteis. Ele vem com vários componentes de estilo, tipografia e JavaScript para usar e criar sites elegantes e intuitivos.
SimpleGrid
O SimpleGrid pega a ideia de grades e simplifica isso. Com a maioria dos sistemas de grade e estruturas, você tem essas classes desconhecidas e colunas desconhecidas. Grade simples tem classes que especificam quais colunas são primeiro, intermediárias e últimas. Além disso, você pode adicionar 'slots' diferentes às colunas para parecer que há mais colunas. É um framework muito simples e direto.
Outras ferramentas responsivas
Folhas de rascunhos responsivos para web design
Muito parecido com qualquer designer ou desenvolvedor, você provavelmente esboça seus projetos antes de realmente fazê-los. Espero que você faça. Se não, talvez você deva começar usando essas folhas de rascunho RWD. Eles vêm com dispositivos de diferença e tamanhos de desktop para que você possa planejar tudo.
Sketchbook de design responsivo
Se você gosta da ideia do desenho no papel, mas quer ter todos os seus rabiscos juntos, você pode considerar começar o caderno de desenho responsivo. Ele vem com 50 páginas, encadernadas em espiral com vários tamanhos de tela em cada página. Todas as grades e matemática já estão feitas para você, então esta é uma ótima ferramenta para iniciantes e especialistas em design responsivo.
Telhas do estilo
Este é um ótimo recurso para os designers da Web, estejam eles procurando algo para um design responsivo ou não. É um PSD que permite obter a essência de um site adicionando títulos (tipografia), logotipos, cores e outros elementos. A razão pela qual isso funciona para web design responsivo é porque não implica em nenhuma dimensão, apenas uma ideia digital sem restrições.
Calculadora Responsiva
Há uma tonelada de matemática envolvida na criação de designs responsivos perfeitos em pixels. É necessário que sua matemática também esteja correta, porque você estará lidando com diferentes porcentagens, larguras e tamanhos de navegador. Para ajudar, aqui está uma calculadora que lhe dá a matemática correta e o CSS para acompanhá-la.
Conclusão
É imperativo que tomemos conhecimento do que a Web responsiva está fazendo. Muitos clientes desejam ter seus sites disponíveis para vários dispositivos, e é mais econômico criar sites responsivos. Além disso, a maioria de seus frameworks e outros recursos para design responsivo realmente ajudam a cultivar websites padrão organizados e de alta qualidade.
Quais são as suas formas favoritas de iniciar designs responsivos? Perdemos um recurso em que você confia? Deixe-nos saber nos comentários.