50 ferramentas fantásticas para web design responsivo

Autor: Monica Porter
Data De Criação: 17 Marchar 2021
Data De Atualização: 17 Poderia 2024
Anonim
50 ferramentas fantásticas para web design responsivo - Criativo
50 ferramentas fantásticas para web design responsivo - Criativo

Contente

Conforme apresentado / cunhado por Ethan Marcotte em seu artigo "Responsive Web Design" e em seu livro mais vendido, são necessários três elementos para tornar um site responsivo:

  1. Uma grade flexível / fluida
  2. Imagens responsivas
  3. Consultas de mídia

Existem muitos outros artigos excelentes que cobrem motivos, conceitos e técnicas relacionadas ao design responsivo da web, portanto, manteremos o foco deste artigo em algumas das principais ferramentas que o ajudarão a se tornar responsavelmente responsivo.

Ferramentas para começar

Antes de começar a construir seu site, é melhor esboçar como os elementos na página se adaptarão para caber nos diferentes tamanhos de navegador dos vários dispositivos em que serão visualizados e para evitar a desconexão que muitas vezes surge ao pensar principalmente sobre o design da área de trabalho e o resto das iterações responsivas como uma reflexão tardia (veja especialmente o comentário de Stephanie (Sullivan) Rewis).

01. Folhas de esboço de web design responsivo

Este conjunto de folhas de esboço responsivas, de Jeremy P Alford, é um ótimo ponto de partida para começar a mapear como as seções da página mudarão em diferentes resoluções.


02. Sketchbook de design responsivo

Se você preferir manter todos os seus esboços em um só lugar, considere este livro encadernado com 50 folhas de esboço responsivas da empresa App Sketchbook.

03. Wireframes responsivos

Uma das dificuldades de construir sites responsivos é usar wireframes para mostrar como o design responsivo funcionará. James Mellers, da Adobe, criou esta ferramenta experimental para mostrar como a wireframe responsiva de layouts complexos pode funcionar.


04. Padrões de layout de vários dispositivos

Ao planejar um design responsivo, é útil ver como outras pessoas o abordaram antes de você, portanto, o Multi-Device Layout Patterns de Luke Wroblewski, que lista padrões populares com links para exemplos, é um ótimo lugar para começar.

05. Azulejos de estilo

Os blocos de estilo de Samanatha Warren propõem uma nova técnica de design na era responsiva; em vez de maquetes de design de largura fixa, são como amostras ou moodboards que mostram a abordagem geral do design sem entrar em detalhes granulares.

Ferramentas para uma grade flexível / fluida

Conforme afirmado anteriormente, o primeiro componente necessário para o design responsivo é uma grade flexível / fluida.Os itens a seguir já estão predefinidos: você só precisa baixá-los e você estará rapidamente no caminho para um site mais responsivo.


06. Golden Grid System

Joni Korpi, que também desenvolveu o Less Framework, lançou recentemente esta nova versão de um sistema de grade confiável para design responsivo. Considerado "dobrável" por se adaptar facilmente de 16 a oito a quatro colunas, o Golden Grid System também apresenta uma pequena sobreposição de navegador que expõe a grade em suas páginas para teste.

07. Foldy960

Os talentosos senhores da Paravel, Inc. lançaram a grade 960.gs modificada que eles usam como base para seus projetos responsivos.

08. SimpleGrid

SimpleGrid, de Conor Muirhead, foi desenvolvido com capacidade de resposta incorporada, por isso é fácil de colocar em funcionamento com seu projeto de site responsivo.

09. A grade CSS de 1140px

Outro grande sistema de grade responsivo é o CSS Grid de 1140px do designer de Melbourne Andy Taylor, que vai desde uma ampla resolução de desktop até o móvel.

10. Sistema de grade CSS em coluna

O sistema de grade colunal, criado por Pulp + Pixels também conhecido como diretor criativo Nick Gorsline, é baseado no sistema de grade de 1140px, mas com alguns benefícios extras, como um kit de design com planilhas de esboço e modelos de wireframing, bem como estilos de depuração CSS.

11. Sistema de grade semântica

Extensões CSS pré-processadas como Sass e LESS estão se tornando cada vez mais populares, e o sistema de grade semântica de Tyler Tate as usa para efeito máximo neste sistema de grade que afirma não usar classes ou elementos desnecessários. Leia mais em coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Como o sistema de grade semântica, o SUSY da Oddbird criou um sistema de grade que não usa marcação extra ou classes especiais, mas o SUSY é voltado apenas para usuários do Sass (e sua extensão, Compass).

13. Gridpak

Gridpak, da Erskine Design, é um dos mais novos geradores de grade responsivos do mercado. Ele permite que você defina suas colunas e calhas em vários pontos de interrupção e, em seguida, produza arquivos CSS, JavaScript e PNG para que toda a sua equipe trabalhe do mesmo ponto de partida.

14. Gridset

Ainda há um pouco de mistério sobre o Gridset, já que, no momento em que escrevo isso, ele ainda não foi lançado. Mas a ferramenta de Mark Boulton Design promete sistemas de grade sob medida, não prescritivos, e uma maneira de salvar e gerenciar suas grades online.

15. Uma grade de Photoshop melhor para RWD

Elliot Jay Stocks propõe abandonar o antigo padrão de grade de fato de 960px e trabalhar a partir de uma base de 1000px, tornando todos os cálculos de porcentagem mais fáceis de trabalhar. Se você concorda, ele fez um PSD para você começar a trabalhar.

16. Redes de Fluidos

Se o seu design é altamente especializado e você precisa criar sua própria grade personalizada, você pode fazer isso com a calculadora de grade fluida do brilhante candidato a novato do .net Awards, Harry Roberts.

17. Calculadora responsiva

Calculadora de mais pixels para porcentagens, mas esta de Stu Robson vai um passo além dos outros, gerando todas as regras CSS para você, o que significa que você pode simplesmente copiar e colar em suas folhas de estilo.

Ferramentas para imagens responsivas (e texto)

Outro componente crucial do web design responsivo são as imagens fluidas. Embora a técnica para obter imagens fluidas seja direta, otimizar o desempenho e o carregamento da página para diferentes dispositivos parece ser um dos maiores desafios no design responsivo da Web. Aqui estão alguns recursos para abordar o problema.

18. Imagens responsivas

O Filament Group desenvolveu uma maneira de enviar uma imagem de tamanho apropriado com base na resolução da tela. Este experimento com imagens que priorizam dispositivos móveis que são dimensionadas de forma responsiva e responsável exige que duas imagens de tamanhos diferentes sejam referenciadas.

19. Imagens adaptativas

Matt Wilcox se inspirou na ferramenta Responsive Images para criar Adaptive Images, que usa PHP e um pouco de JavaScript para servir imagens apropriadas ao dispositivo do usuário sem exigir nenhuma marcação extra.

20. Sencha.io Src (anteriormente Tinysrc)

Sencha fornece um serviço de nuvem que envia versões otimizadas de imagens hospedadas para o tamanho do dispositivo que as solicita. Para saber como usá-lo, consulte docs.sencha.com/io/src/.

21. FitText

Outra joia da Paravel, Inc é o FitText.js, um plug-in jQuery para tornar o tipo de título da web responsivo ao design e ao dispositivo. Para obter detalhes, consulte trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Inspirado no FitText e no algoritmo SlabType, o slabText de Brian McAllister é um plug-in jQuery que cria blocos de texto em negrito que redimensionam responsivamente, mantendo uma largura definida.

Ferramentas para consultas de mídia

Agora que você tem uma ideia de como seu layout vai mudar para diferentes dispositivos, uma grade fluida e imagens fluidas, você precisa de consultas de mídia para mudar os elementos da página para um estado de responsividade.

23. Respond.js

O único problema com o design responsivo é que os navegadores que não podem ler consultas de mídia são deixados para trás. Isso pode não ser um problema para o seu público-alvo, mas ainda é uma boa prática acomodar usuários em navegadores mais antigos. Respond.js, de Scott Jehl, oferece suporte apenas às propriedades min-width e max-width.

Para obter mais informações, consulte filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, de Wouter van der Graaf, permite que versões mais antigas do IE e outros navegadores testem e apliquem com eficácia todos os tipos de consultas de mídia.

25. Adapt.js

Nathan Smith, autor do sistema de grade 960.gs original, escreveu Adapt.js, um script que detecta as dimensões do navegador e serve apenas as folhas de estilo necessárias - como consultas de mídia, mas sem consultas de mídia, o que significa que também funciona em navegadores mais antigos.

26. Categorizr

Esta é a detecção de dispositivos abordada do ângulo oposto - o script Categorizr de Brett Jankord presume que os dispositivos são móveis, a menos que sejam detectados de outra forma como desktop ou tablet, permitindo que você forneça recursos aos navegadores de maneira simpática.

Boilerplates de design responsivo (e móvel)

No espírito de um fluxo de trabalho responsivo eficiente, os boilerplates facilitam o processo de mover designs para o navegador mais cedo ou mais tarde. A maioria desses padrões combinam o melhor das ferramentas mencionadas acima em um pacote elegante: uma grade flexível aprimorada com scripts, enquanto implementa as filosofias de saída de conteúdo primeiro para dispositivos móveis.

27. 320 e superior

O 320 and Up de Andy Clarke é um padrão móvel que se integra a muitas outras ferramentas modernas de web design, como LESS e Bootstrap (consulte o nº 30). É uma maneira leve e ágil de colocar um site em funcionamento rapidamente. Confira também nossa entrevista com Andy, na qual ele nos conta mais sobre a nova versão.

28. Sem grade

Gridless é um padrão HTML5 e CSS3 que pode servir como base para seus designs responsivos, com foco em tipografia e compatibilidade cross-browser incorporada.

29. Esqueleto

Ao contrário dos dois boilerplates anteriores, cujo ponto de partida é com a menor resolução, o kit de desenvolvimento Skeleton, criado por Dave Gamache, é baseado no sistema de grade 960.gs e pode ser escalado até o mobile. O Skeleton também possui uma ótima estrutura de estilo para os desenvolvedores criarem estilos sobre ela.

30. Bootstrap

Construído pelo Twitter e agora com código-fonte aberto, o Bootstrap é uma estrutura e uma série de componentes para colocar um site online rapidamente e, a partir da versão dois, todas as suas partes principais funcionam responsivamente.

Plugins, shims e polyfills

Embora os navegadores e softwares modernos tendam a ser preparados para serem responsivos, às vezes precisamos usar ferramentas extras para fornecer uma experiência consistente.

31. Plugin responsivo

Marios Lublinski escreveu um plug-in WordPress que promete transformar qualquer tema WP atual em um ágil. Como isso funciona, eu ainda não sei, já que não foi lançado no momento em que este livro foi escrito, mas se cumprir o que prometeu, será muito útil.

32. Derrubar

O gerenciamento de estouro de conteúdo funciona bem em navegadores de desktop, mas os navegadores móveis mais antigos lidam com isso de maneira inconsistente. O polyfill Overthrow do industrious Filament Group adiciona degradação graciosa consistente em todos os dispositivos, garantindo que todos os usuários móveis tenham a melhor experiência possível.

33. MediaTable

O plugin jQuery de Marco Pegoraro, MediaTable, funciona com Respond.js para ajudá-lo a contornar o problema de como exibir grandes tabelas de dados em dispositivos de tela pequena, criando colunas responsivas e adicionando uma alternância mostrar / ocultar quando adequado.

"Testando, testando: 1-2-3 ..."

Outro aspecto do fluxo de trabalho responsivo é conhecer seus dispositivos de destino e resoluções e, em seguida, testá-los.

34. resizeMyBrowser

resizeMyBrowser, do desenvolvedor de front-end Chen Luo, tem várias dimensões predefinidas para a janela do seu navegador para testar páginas projetadas responsivamente ou criar uma nova predefinição se você não conseguir encontrar aquela que se adapta às suas necessidades.

35. responsivepx

Muito parecido com resizeMyBrowser, responsivepx, construído por Remy Sharp, carrega suas páginas em uma janela onde você pode testar a largura e a altura para determinar o quão bem suas consultas de mídia estão disparando e onde os pontos de interrupção estão no design.

36. Teste de Design Responsivo

Uma ferramenta incrivelmente útil do designer e desenvolvedor Matt Kersley: basta inserir a URL do seu site responsivo em Teste de Design Responsivo para ver como ele é renderizado em vários tamanhos de navegador.

37. O Responsável

Insira um URL e o Responsinator mostrará como ele é exibido em muitos tamanhos de dispositivos comuns - com uma eficiência robótica implacável. Tama Pugsley e Andy Hovey são os responsáveis ​​por este.

38. Responsive.is

Outro emulador de dispositivo in-page, Responsive.is permite que você digite uma URL e a redimensiona rapidamente entre uma variedade de predefinições diferentes. É feito pela equipe por trás do próximo aplicativo Typecast.

39. Screenqueri.es

Mais uma ferramenta de dimensões do navegador, mas Screenqueri.es da Mandar Shirke se diferencia por ter um extenso conjunto de predefinições para celulares e tablets, bem como uma grade e réguas que tornam a medição precisa muito mais fácil.

40. Aptus

Outro aplicativo para testar sites em vários tamanhos definidos, mas o Aptus é nativo do Mac. Está disponível através da Mac App Store, e ser nativo traz recursos extras, como capturas de tela fáceis e suporte offline.

41. Bookmarklet de design responsivo

Victor Coulon fez um bookmarklet muito simples, mas eficaz; quando você o ativa em qualquer página da web, ele adiciona uma barra de ferramentas que permite alternar entre quatro dimensões de tela comuns para que você possa ver como seu site é renderizado em tamanhos diferentes.

42. Bookmarklet de teste de design responsivo

Este bookmarklet de Benjamin Keen permite mais personalização, permitindo que você defina os tamanhos de seus próprios dispositivos e quantos desejar. Quando ativado, ele mostra o site em todos os tamanhos selecionados, lado a lado para facilitar a comparação.

43. Screenfly

Screenfly, da QuirkTools, permite que você teste um site em diferentes resoluções no desktop, tablet, celular e televisão. O teste de desktop está atualmente limitado ao Safari, enquanto o tablet e celular têm mais opções para dispositivos e navegadores. A televisão está limitada ao Opera.

44. Indicador de consulta de mídia

Johan Brook oferece uma maneira CSS pura de testar quando uma consulta de mídia é acionada pelo navegador. O Media Query Indicator é outra boa ferramenta para testar e brincar com os pontos de ruptura do design.

45. Shim

Uma das ferramentas usadas no redesenho do Boston Globe, o garoto-propaganda do movimento RWD, Shim é um aplicativo Node.js que executa uma página da web em vários dispositivos na mesma rede Wifi, tornando o teste entre dispositivos muito mais fácil .

46. ​​Drive-In

Se você não tem um servidor Node.js para executar o Shim, Scott Jehl criou uma versão mais simples chamada Drive-In, que funciona fundamentalmente da mesma maneira, mas usando PHP, Apache e um arquivo .htaccess.

47. Adobe Shadow

A Adobe continua seu avanço nas tecnologias da web com esta ferramenta de depuração remota. Instale o Shadow e a extensão do Chrome no Mac ou Windows, além do cliente Shadow no Android ou iPhone, e você pode compartilhar páginas da web entre muitos dispositivos diferentes.

48. Opera Mobile Emulator + Remote Debug

Uma maneira mais fácil de depurar páginas móveis é instalar o Opera e o Opera Mobile Emulator e conectar os dois com sua opção de Depuração remota. Simples e rápido de configurar e tem o benefício adicional de testar em mais do que o WebKit.

Inspiração adicional

Quer ter uma ideia de como outras pessoas estão tornando seus designs responsivos?

49. MediaQueri.es

Se você ainda não viu, o site Mediaqueri.es tem um número cada vez maior de sites que passaram para o lado responsivo.

50. @RWD

Ethan Marcotte mantém uma conta no Twitter que traz as últimas notícias, ferramentas e mostruários do mundo do RWD.

Denise Jacobs adora ser palestrante, autora, instrutora de web design e evangelista de criatividade, enquanto Peter Gasston é o autor de The Book of CSS3 e um desenvolvedor web veterano que tem um blog no Broken Links.

Gostou disso? Leia isso!

  • Dicas profissionais para criar um site para celular
  • Principais técnicas de CSS e JavaScript
  • Como construir um aplicativo
  • As melhores fontes da web gratuitas para designers
  • Descubra o que vem por aí em Realidade Aumentada
  • Baixe texturas grátis: alta resolução e pronto para usar agora
Artigo Anterior

O guia profissional para criar cartões de visita memoráveis
Próximo Artigo

5 regras de ouro para garantir uma marca consistente
Preso Hoje
5 grandes tendências de design de logotipo para 2020
Consulte Mais Informação

5 grandes tendências de design de logotipo para 2020

Poderia 2024
Um do maiore problema em e crever artigo obre tendência de de ign de logotipo é que todo o ano , o leitore e peram ouvir algo novo e ine perado. No último quatro ou cinco ano , poré...
Os fatores negativos dão a você o dobro da diversão do aplicativo
Consulte Mais Informação

Os fatores negativos dão a você o dobro da diversão do aplicativo

Poderia 2024
Como de igner, você provavelmente e depara com tela em abundância diariamente. eja em eu computador, telefone ou tablet, olhar para uma tela em branco pode er uma per pectiva a u tadora. Fel...
6 dicas para criar um vídeo viral matador
Consulte Mais Informação

6 dicas para criar um vídeo viral matador

Poderia 2024
É difícil re i tir ao encanto de um vídeo viral atraente. Já reunimo 10 do melhore vídeo virai para você aproveitar, ma e e você qui er fazer o eu próprio? iga ...