50 fantàstiques eines per al disseny web sensible

Autora: Monica Porter
Data De La Creació: 17 Març 2021
Data D’Actualització: 17 Ser Possible 2024
Anonim
50 fantàstiques eines per al disseny web sensible - Creatiu
50 fantàstiques eines per al disseny web sensible - Creatiu

Content

Tal com va introduir / encunyar Ethan Marcotte tant en el seu article "Disseny web responsiu" com en el seu llibre més venut, es necessiten tres elements perquè un lloc sigui sensible:

  1. Una xarxa flexible / fluid
  2. Imatges sensibles
  3. Consultes de mitjans

Hi ha molts altres articles fantàstics que tracten motius, conceptes i tècniques relacionats amb el disseny web responsiu, de manera que mantenirem el focus d’aquest article en algunes eines principals que us ajudaran a respondre de manera responsable.

Eines per començar

Abans de començar a construir el vostre lloc, és millor esbossar com s’adaptaran els elements de la pàgina per adaptar-se a les diferents mides del navegador dels diferents dispositius en què es veuran i evitar la desconnexió que sovint es deriva de pensar principalment el disseny d'escriptori i la resta d'iteracions sensibles com a reflexió posterior (vegeu especialment el comentari de Stephanie (Sullivan) Rewis).

01. Fulls de croquis de disseny web sensible

Aquest conjunt de fulls de croquis sensibles, de Jeremy P Alford, és un gran punt de partida per començar a traçar com es canviaran les seccions de pàgina en diferents resolucions.


02. Quadern de dibuixos de disseny sensible

Si preferiu guardar tots els vostres esbossos en un sol lloc, és possible que vulgueu considerar aquest llibre de 50 fulls de croquis sensibles de la companyia App Sketchbook.

03. Wireframes sensibles

Una de les dificultats per crear llocs web responsius és utilitzar wireframes per mostrar com funcionarà el disseny sensible. James Mellers, d’Adobe, ha elaborat aquesta eina experimental per mostrar com pot funcionar l’emmagatzematge de cables de dissenys complexos.


04. Patrons de disseny de dispositius múltiples

Quan planifiqueu un disseny sensible, és útil veure com altres persones s’hi han apropat abans que vosaltres, de manera que els patrons de disseny multidispositiu de Luke Wroblewski, que inclou patrons populars amb enllaços a exemples, són un bon lloc per començar.

05. Rajoles d’estil

Les rajoles d'estil de Samanatha Warren proposen una nova tècnica per al disseny en l'era de resposta; en lloc de maquetes de disseny d’amplada fixa, són com a mostres o moodboards que mostren l’enfocament general del disseny sense entrar en detalls granulars.

Eines per a una xarxa flexible / fluida

Com s’ha dit anteriorment, el primer component necessari per al disseny sensible és una xarxa flexible / fluida.Ja estan pre-construïts els elements següents: només els heu de descarregar i ràpidament anireu cap a un lloc més sensible.


06. Sistema Golden Grid

Joni Korpi, que també va desenvolupar Less Framework, ha llançat recentment aquesta nova versió d’un sistema de quadrícula fiable per al disseny sensible. Considerat "plegable", ja que s'adapta fàcilment de 16 a vuit a quatre columnes, el sistema Golden Grid també inclou una petita superposició del navegador que exposa la quadrícula de les vostres pàgines per provar-les.

07. Foldy960

Els senyors amb talent de Paravel, Inc. han publicat la quadrícula modificada de 960.gs que utilitzen com a base per als seus projectes sensibles.

08. SimpleGrid

SimpleGrid, de Conor Muirhead, es va crear amb capacitat de resposta, de manera que és fàcil posar-se en marxa amb el vostre projecte de lloc web responsiu.

09. La quadrícula CSS de 1140px

Un altre gran sistema de quadrícula sensible és la xarxa de 1140 píxels CSS Grid del dissenyador de Melbourne Andy Taylor, que va des d'una àmplia resolució d'escriptori fins a mòbils.

10. Sistema de quadrícula CSS columnal

El sistema de quadrícula Columnal, creat per Pulp + Pixels, també conegut com a director creatiu Nick Gorsline, es basa en el sistema de quadrícula de 1140px, però amb alguns avantatges addicionals, com ara un kit de disseny amb fulls de croquis i plantilles d’emmarcament de filferro, així com estils de depuració CSS

11. Sistema de quadrícula semàntica

Les extensions CSS processades prèviament, com Sass i LESS, són cada vegada més populars, i el sistema de quadrícula semàntica de Tyler Tate les utilitza amb el màxim efecte en aquest sistema de quadrícula que afirma no utilitzar cap classe ni element innecessari. Llegiu més a coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Igual que el sistema de quadrícules semàntiques, el SUSY d'Oddbird va crear un sistema de quadrícula que no utilitza marques addicionals ni classes especials, però SUSY s'adreça només als usuaris de Sass (i la seva extensió, Compass).

13. Gridpak

Gridpak, d’Erskine Design, és un dels més nous generadors de xarxa sensibles al voltant. Us permet establir les vostres columnes i canalons en diversos punts d'interrupció i, a continuació, emet fitxers CSS, JavaScript i PNG perquè tot l'equip treballi des del mateix punt de partida.

14. Reixeta

Encara hi ha un lleuger aire de misteri a Gridset ja que, en el moment d’escriure això, encara no s’ha llançat. Però l’eina de Mark Boulton Design promet sistemes de quadrícula a mida, no prescriptius, i una manera de guardar i gestionar les vostres xarxes en línia.

15. Una millor graella de Photoshop per a RWD

Elliot Jay Stocks proposa abandonar l’antic estàndard de facto de 960 px de facto i treballar des d’una base de 1000 px, cosa que facilita el treball de tots els càlculs percentuals. Si hi esteu d’acord, ha creat un PSD perquè pugueu començar a treballar.

16. Xarxes de fluids

Si el vostre disseny és altament especialitzat i necessiteu crear la vostra pròpia quadrícula personalitzada, podeu fer-ho amb la calculadora de quadrícula fluida de Harry Roberts, el brillant candidat a nouvingut de .net Awards.

17. Calculadora sensible

Una altra calculadora de píxels a percentatges, però aquesta de Stu Robson va un pas més enllà d’altres generant totes les regles CSS, és a dir, només podeu copiar-les i enganxar-les als vostres fulls d’estil.

Eines per a imatges (i text) sensibles

Un altre component crucial del disseny web sensible són les imatges fluides. Tot i que la tècnica per aconseguir imatges fluides és senzilla, l'optimització del rendiment i la càrrega de la pàgina per a diferents dispositius sembla ser un dels majors desafiaments en el disseny web responsiu. Aquests són alguns recursos per abordar el problema.

18. Imatges sensibles

El grup Filament va idear una manera d’enviar una imatge de mida adequada basada en la resolució de la pantalla. Aquest experiment amb imatges per a mòbils que escalen de forma responsable i responsable requereix tenir dues imatges de diferents mides per fer referència.

19. Imatges adaptatives

Matt Wilcox es va inspirar en l'eina Responsive Images per crear imatges adaptatives, que utilitza PHP i una mica de JavaScript per publicar imatges adequades al dispositiu de l'usuari sense necessitat de cap marcatge addicional.

20. Sencha.io Src (abans Tinysrc)

Sencha proporciona un servei al núvol que envia versions optimitzades de les imatges allotjades per a la mida del dispositiu que les sol·licita. Per esbrinar com utilitzar-lo, consulteu docs.sencha.com/io/src/.

21. FitText

Una altra joia de Paravel, Inc és FitText.js, un complement jQuery per fer que el tipus de web titular respongui al disseny i al dispositiu. Per obtenir més informació, consulteu trentwalton.com/2011/05/10/fit-to-scale/.

22. text de la llosa

Inspirat per FitText i l'algorisme SlabType, el slabText de Brian McAllister és un complement jQuery que fa blocs de text en negreta que redimensionen de forma ràpida mantenint un ample definit.

Eines per a consultes multimèdia

Ara que ja teniu una idea de com canviarà el vostre disseny per a diferents dispositius, una quadrícula fluida i imatges fluides, necessiteu consultes multimèdia per canviar els elements de la pàgina a un estat de resposta.

23. Respond.js

L’únic problema del disseny sensible és que els navegadors que no poden llegir consultes sobre suports es queden enrere. Pot ser que això no sigui un problema amb el vostre públic objectiu, però no deixa de ser una bona pràctica allotjar els usuaris de navegadors antics. Respond.js, de Scott Jehl, només admet propietats d'amplada mínima i màxima d'amplada.

Per obtenir més informació, consulteu 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, permet que versions anteriors de IE i altres navegadors provin i apliquin eficaçment tot tipus de consultes de suports.

25. Adapt.js

Nathan Smith, autor del sistema de quadrícules original 960.gs, ha escrit Adapt.js, un script que detecta les dimensions del navegador i serveix només als fulls d’estil requerits, com ara consultes multimèdia, però sense consultes multimèdia, el que significa que també funciona en navegadors antics.

26. Categorizr

Es tracta de la detecció de dispositius des de l’angle oposat: l’escriptura Categorizr de Brett Jankord presumeix que els dispositius són mòbils tret que es detecti el contrari com a escriptori o tauleta, cosa que us permetrà publicar recursos als navegadors d’una manera simpàtica.

Calderes de disseny sensible (i mòbil)

Amb l'esperit d'un flux de treball eficient i sensible, les calderes faciliten el procés de trasllat de dissenys al navegador més aviat que tard. La majoria d’aquestes calderes combinen la millor de les eines esmentades anteriorment en un únic paquet: una quadrícula flexible millorada amb seqüències d’ordres, alhora que s’implementen les primeres filosofies de contingut mòbil.

27. 320 i posteriors

El 320 and Up d'Andy Clarke és una caldera que s'inicia amb un mòbil que s'integra amb moltes altres eines modernes de disseny web, com ara LESS i Bootstrap (vegeu el número 30). És una manera lleugera i àgil d’activar ràpidament un lloc. Consulteu també la nostra entrevista amb Andy, en què ens explica més sobre la nova versió.

28. Sense graella

Gridless és una caldera HTML5 i CSS3 que pot servir de base per als vostres dissenys responsius, amb especial atenció a la tipografia i a la compatibilitat de navegadors creuats.

29. Esquelet

A diferència de les dues calderes anteriors, el punt de partida és amb la resolució més petita, el kit de desenvolupament Skeleton, creat per Dave Gamache, es basa en el sistema de quadrícula 960.gs i es redueix fins al mòbil. Skeleton també compta amb un marc d'estil fantàstic perquè els desenvolupadors puguin crear estils.

30. Bootstrap

Construït per Twitter i ara de codi obert, Bootstrap és un marc i una sèrie de components per aconseguir ràpidament un lloc en línia i, a partir de la versió dos, totes les seves parts bàsiques funcionen de forma responsiva.

Connectors, calces i polillenats

Tot i que els navegadors i el programari moderns tendeixen a estar adaptats per respondre, de vegades hem d’utilitzar eines addicionals per proporcionar una experiència constant.

31. Complement responsiu

Marios Lublinski ha escrit un complement de WordPress que promet convertir qualsevol tema actual de WP en un de resposta. Encara no sé com funciona això, ja que no s’ha publicat en aquest moment, però si compleix la promesa hauria de ser molt útil.

32. Derruir

La gestió del desbordament de contingut funciona bé als navegadors d’escriptori, però els navegadors mòbils més antics ho gestionen de manera inconsistent. El polilloc Overthrow del treballador Filament Group afegeix una degradació elegant i coherent entre els dispositius, assegurant-se que tots els usuaris de mòbils tinguin la millor experiència possible.

33. MediaTable

El connector jQuery de Marco Pegoraro, MediaTable, funciona amb Respond.js per ajudar-vos a solucionar el problema de com mostrar taules de dades grans en dispositius de pantalla petita, crear columnes sensibles i afegir un commutador de mostrar / ocultar quan sigui adequat.

"Proves, proves: 1-2-3 ..."

Un altre aspecte del flux de treball responsiu és conèixer els vostres dispositius i resolucions de destinació i provar-los.

34. resizeMyBrowser

resizeMyBrowser, del desenvolupador de frontend Chen Luo, té diverses dimensions predeterminades per a la finestra del navegador per provar les pàgines dissenyades de manera responsiva o crear un predefinit nou si no trobeu la que s'adapti a les vostres necessitats.

35. responsivepx

Igual que resizeMyBrowser, responsivepx, creat per Remy Sharp, carrega les vostres pàgines en una finestra on podeu provar l’amplada i l’alçada per determinar fins a quin punt s’activen les vostres consultes de suports i on es troben els punts d’interrupció en el disseny.

36. Prova de disseny sensible

Una eina increïblement útil pel dissenyador i desenvolupador Matt Kersley: només cal que introduïu l'URL del vostre lloc responsiu a Responsive Design Testing per veure com es rendeix a diverses mides del navegador.

37. El responsable

Introduïu un URL i The Responsinator us mostrarà com es mostra en moltes mides de dispositius habituals, amb una implacable eficiència robòtica. Tama Pugsley i Andy Hovey en són els responsables.

38. Responsive.is

Un altre emulador de dispositius a la pàgina, Responsive.is, us permet escriure una URL i canviar-ne la mida ràpidament entre diversos intervals predefinits. L’ha fet l’equip que hi ha darrere de la propera aplicació Typecast.

39. Screenqueri.es

Una eina més de dimensions del navegador, però Screenqueri.es de Mandar Shirke es diferencia per tenir un ampli conjunt de presets de mòbils i tauletes, així com una quadrícula i regles que faciliten molt la mesura fina.

40. Aptus

Una altra aplicació per provar llocs de diverses mides definides, però Aptus és nativa de Mac. Està disponible a través de la Mac App Store i ser natiu aporta funcions addicionals, com ara captures de pantalla fàcils i suport fora de línia.

41. Bookmarklet de disseny sensible

Victor Coulon ha fet un bookmarklet molt senzill però eficaç; quan l'activeu a qualsevol pàgina web, afegeix una barra d'eines que us permet canviar entre quatre dimensions de pantalla comunes per veure com es visualitza el vostre lloc a diferents mides.

42. Bookmarklet de prova de disseny sensible

Aquest bookmarklet de Benjamin Keen permet més personalitzacions, ja que us permet definir les mides dels vostres dispositius i tantes o poques com vulgueu. Quan està activat, mostra el lloc a totes les mides seleccionades, un al costat de l’altre per facilitar la comparació.

43. Screenfly

Screenfly, de QuirkTools, us permet provar un lloc amb diferents resolucions en ordinadors, tauletes, mòbils i televisors. Actualment, les proves d’escriptori es limiten a Safari, mentre que la tauleta i el mòbil tenen més opcions per a dispositius i navegadors. La televisió es limita a Opera.

44. Indicador de consulta de suports

Johan Brook ofereix una forma CSS pura de provar quan el navegador ha activat una consulta de suports. Media Query Indicator és una altra bona eina per provar i jugar amb els punts de ruptura del disseny.

45. Shim

Una de les eines utilitzades en el redisseny del Boston Globe, el poster del moviment RWD, Shim és una aplicació Node.js que executa una pàgina web en diversos dispositius de la mateixa xarxa Wifi, cosa que facilita molt la prova entre dispositius. .

46. ​​Drive-In

Si no teniu un servidor Node.js per executar Shim, Scott Jehl ha creat una versió més senzilla anomenada Drive-In que funciona fonamentalment de la mateixa manera, però utilitzant PHP, Apache i un fitxer .htaccess.

47. Adobe Shadow

Adobe continua impulsant les tecnologies web amb aquesta eina de depuració remota. Instal·leu Shadow i l'extensió Chrome a Mac o Windows, a més del client Shadow a Android o iPhone, i podeu compartir pàgines web entre molts dispositius diferents.

48. Opera Mobile Emulator + Depuració remota

Una manera més senzilla de depurar pàgines mòbils és instal·lar Opera i l’Opera Mobile Emulator i connectar-les amb l’opció de depuració remota. De configuració senzilla i ràpida, té l'avantatge addicional de provar en més de WebKit.

Més inspiració

Voleu fer-vos una idea de com els altres responen els seus dissenys?

49. MediaQueri.es

Si encara no ho heu vist, el lloc Mediaqueri.es té un nombre cada vegada més gran de llocs que han passat al costat sensible.

50. @RWD

Ethan Marcotte té un compte de Twitter que aporta les últimes novetats, eines i aparadors del món de la RWD.

Denise Jacobs adora ser conferenciant, autora, formadora de disseny web i evangelista de la creativitat, mentre que Peter Gasston és l'autor de The Book of CSS3 i un veterà desenvolupador web que fa blocs a Broken Links.

T'ha agradat això? Llegiu-los!

  • Consells professionals per crear un lloc web per a mòbils
  • Principals tècniques CSS i JavaScript
  • Com es crea una aplicació
  • Les millors fonts web gratuïtes per a dissenyadors
  • Descobriu el següent per a la realitat augmentada
  • Descarregueu textures gratuïtes: d'alta resolució i llestes per utilitzar ara
Article Anterior

Infografia: com està canviant el món laboral
Article Següent

Scott Jehl al lloc de resposta del Boston Globe
Va Aparèixer Avui
Es van revelar les diferències entre dissenyador i client
Descobrir

Es van revelar les diferències entre dissenyador i client

Ser Possible 2024
Tothom, de del director creatiu mé experimentat fin a un po tgrau en di eny gràfic acabat de ortir de la univer itat, ap que el creatiu i el client no empre veuen el ull a ull. Tot i que el ...
La guia professional per crear targetes de visita memorables
Descobrir

La guia professional per crear targetes de visita memorables

Ser Possible 2024
Una targeta de vi ita ben di enyada é mé que una imple exten ió de la vo tra marca. É una oportunitat per cau ar una impre ió duradora amb po ible client , generar nove conver...
Revisió de Livedrive
Descobrir

Revisió de Livedrive

Ser Possible 2024
Una bona opció i nece iteu emmagatzematge d’alta capacitat a baix co t, però no é la millor plataforma d’emmagatzematge al núvol en general. E pai d'emmagatzematge de còpi...