Content
- Disseny per a la incògnita
- Un enfocament pragmàtic del disseny
- Es converteix en un disseny agnòstic
- Codificació progressiva
- Bussejar en el marcador
Sembla que tothom parla actualment de disseny web sensible i amb una bona raó; a mesura que el nombre de dispositius habilitats per Internet continua creixent, cadascun amb funcions i funcions diferents, ja no és raonable crear llocs web d’amplada fixa.
La veritat és que mai ho va ser. Tot i això, fins ara es considerava la millor pràctica per dissenyar experiències que suposessin una sèrie de suposicions, ja sigui sobre la resolució de la pantalla, l’amplada de banda o el mètode d’entrada. Si alguna vegada heu dissenyat un lloc web de 960 px d’amplada, només per visualitzar-lo a la netbook de pantalla petita d’un amic (i sí, escric per experiència dolorosa aquí), entendreu per què no era un enfocament especialment intel·ligent. Ara, amb els telèfons intel·ligents i les tauletes llançats a la barreja, és evident que els nostres mètodes tradicionals ja no són adequats per al propòsit.
Afortunadament, l’aparició de consultes de mitjans CSS i un reconeixement creixent que el web és un mitjà per si mateix significa que estem començant a adoptar la veritable naturalesa de la plataforma, acceptant que la seva universalitat és un punt fort, no una debilitat.
Durant els propers cinc dies, us guiaré a través d’una tècnica que reconeixi aquest fet: disseny web sensible. Desenvolupat per Ethan Marcotte, combina dissenys fluids, imatges flexibles i consultes multimèdia per ajudar-nos a crear llocs que s’adaptin amb gràcia a qualsevol entorn que es trobin.
Demostraré aquest enfocament mostrant-vos com construir una galeria de mitjans senzilla. En els meus exemples, crearé un petit lloc web per documentar un viatge per carretera recent que vaig fer pels Estats Units, però no dubteu a personalitzar el codi i dissenyar-lo segons les vostres necessitats.
Disseny per a la incògnita
Gran part d’aquest tutorial se centrarà en l’aspecte de desenvolupament del disseny sensible. Però abans d’explorar qualsevol codi, dediquem-nos un moment a pensar com podríem dissenyar un lloc web que possiblement pugui tenir dissenys infinits.
Ara tinc la sort de poder dissenyar interfícies i desenvolupeu el codi frontal que els fa reals. Per descomptat, això no és una habilitat única: si treballeu per vosaltres mateixos, probablement sou el mateix. Però, sens dubte, és avantatjós entendre com el contingut es pot adaptar i reflotar quan s’elaboren dissenys fluids.
També treballo com a part d’un equip més gran on el meu paper és més especialitzat. En aquest entorn, el dissenyador visual pot centrar-se únicament en la traducció de marcs de filferro en atractius, atractius (tancats de sessió, perfectes per a píxels). I no és estrany que els desenvolupadors es localitzin per separat, traduint aquests dissenys en un marcatge i CSS senzills i eficients.
Tanmateix, aquests fluxos de treball lineals i segregats es descomponen ràpidament un cop comencem a avaluar com s’adaptaran els dissenys a diferents entorns. Tant com qualsevol nova eina o tecnologia, també hauríem de considerar formes de treballar més col·laboratives i àgils. Molts dels problemes més complicats que es produeixen en dissenyar llocs web sensibles es poden resoldre simplement mitjançant la conversa, l’experimentació i la iteració.
Un enfocament pragmàtic del disseny
Això no vol dir que els dissenyadors no puguin pensar en com pot funcionar un disseny fora dels límits d’un dispositiu en particular.
A Clearleft, iniciem el disseny visual des de la perspectiva de l’escriptori. Comencem definint un llenguatge de disseny i una estètica visual generals, sovint basant-nos en exploracions inicials al voltant d’un contingut bàsic. Per exemple, si dissenyem un lloc per a menjar, començarem amb una pàgina de receptes; per a un lloc de notícies, una pàgina de notícies.
No només és una pàgina important del lloc, sinó que probablement inclou prou contingut estructurat perquè puguem crear una paleta tipogràfica. També pensarem com es pot adaptar el disseny, fins i tot en aquest moment.
Una manera útil de provar l'estrès d'un disseny és agafar aquesta pàgina i adaptar-la a una pantalla més estreta (~ 320 px d'ample). Probablement descobrirà que caldrà repensar alguns aspectes del disseny perquè funcionin a aquesta amplada. Aquests són alguns exemples:
- Tipografia: Els encapçalaments grans poden funcionar bé en dissenys més amplis, però en pantalles més petites poden ocupar molt espai vertical i, per tant, requereixen desplaçament addicional. A mesura que canvien les longituds de la línia, també heu de tenir en compte les altures de la línia i altres tractaments tipogràfics.
- Enllaços: Com funcionarà el vostre disseny en dispositius amb pantalla tàctil? Tot i que encara no tenim una manera fàcil de detectar-los (és a dir, hauríem de tenir en compte el contacte en tots els aspectes del nostre disseny), dissenyar per a una pantalla més estreta ens pot donar l’oportunitat de pensar les àrees objectiu dels enllaços i altres elements interactius. . Les directrius d'iOS recomanen que siguin com a mínim de 44 píxels / punts quadrats, cosa que és una bona xifra per a la qual es pretén.
- Navegació: Probablement aquest serà el component més incòmode de qualsevol disseny responsiu, especialment si el vostre lloc té moltes seccions i una jerarquia profunda. Brad Frost ha escrit un resum d'alguns enfocaments diferents de la navegació que s'estan considerant actualment.
- Contingut superflu: No cal un contingut? Només cal mostrar altres continguts en determinats escenaris? No defenso amagar contingut en funció del dispositiu que faci servir un usuari, però tècniques com la càrrega condicional (que veurem més endavant aquesta setmana) ens poden ajudar a publicar pàgines més petites que només carreguin contingut complementari quan sigui necessari.
Dissenyar dos dissenys contrastats reforça la idea que un disseny s’adaptarà, tot planificant els possibles problemes inicials. Tot i que això sembla un treball duplicat, tingueu en compte que no dissenyem totes les pàgines amb una precisió perfecta per a píxels. En canvi, ens centrem en la creació d’un llenguatge de disseny escalable, que evolucionarà a mesura que comencem a implementar-lo en codi, i que es basa en mòduls i components individuals.
Es converteix en un disseny agnòstic
No és sorprenent que per a una indústria que hagi tractat històricament el web com a impressió, els dissenys d’amplada fixa han impregnat molts dels lliuraments que produïm. A mesura que comencem a dissenyar un mitjà adaptable, es plantegen nous enfocaments que ens permetin resoldre problemes i comunicar idees tot reconeixent la naturalesa fluida del mitjà. Aquests són alguns dels meus preferits:
- Diagrames de descripció de la pàgina: Tot i que els wirefrram sovint poden implicar el disseny (i, per tant, suposar un determinat tipus de dispositiu), els diagrames de descripció de la pàgina eliminen aquest supòsit i descriuen els components individuals, ordenats al document en termes de prioritat.
- Rajoles d'estil: En comunicar idees de disseny amb els clients, ens podem trobar presentant "quadres de llocs web". Si no anem amb compte, els clients demanaran amb raó conceptes que demostrin com quedarà un disseny també en altres dispositius. Això ens pot obligar a una situació insostenible de produir diverses pàgines per a diversos dispositius. Samantha Warren ha pensat en aquest problema i ha elaborat rajoles d’estil. Aquests se situen en algun lloc entre un tauler d’ànim (però menys imprecís) i les realitzacions completament realitzades (però menys precisos), i ens ajuden a comunicar tipografia, estils de botons i tractaments de masthead. També fomenten un nivell de discussió més madur amb els nostres clients.
- Joc de disseny Mobilify: Aquest exercici pot funcionar molt bé durant els tallers de disseny col·laboratiu. En aquest exercici, tothom anota a Post-it els elements que poden aparèixer en una pàgina determinada. Aquests s'enganxen a la paret per ordre d'importància, com si apareguessin linealitzats en un telèfon mòbil. El debat resultant pot generar conclusions sorprenents. Per exemple, us podeu adonar que la navegació no és el component més important de la pàgina. Això podria seguir fins al disseny, on un enllaç de salt a la part superior de la pàgina enllaça amb la navegació al peu de pàgina.
Per descomptat, encara hi ha espai per a les eines que ja fem servir, però quan dissenyem un lloc web en termes generals, hem de tenir en compte que el disseny ja no és conegut.
Codificació progressiva
Afortunadament, no hem de preocupar-nos pel disseny visual de l’exemple en què estem treballant, ja que ens hem treballat molt. En canvi, ens podem concentrar a codificar el nostre disseny en un lloc web totalment sensible.
Una cosa més abans de començar. És important recordar un principi fundacional del mitjà amb què treballem: la universalitat. Això significa no només construir els dispositius web d’avui en dia, sinó també garantir la compatibilitat amb els d’ahir i demà. John Allsopp va descriure per què aquest principi importa al seu post The Next 6 Billion:
"Els sis mil milions següents són nens de l'Índia rural, l'Àfrica, la Xina, on l'accés al poder i a les xarxes poden ser intermitents. És algú de Sumatra que té una caixa Wintel d'una dècada. És gent que parla centenars d'idiomes diferents, amb desenes de sistemes d’escriptura. Són les persones que són les primeres de la seva família a saber llegir i escriure. És el 20% de les persones de tot el món que no saben llegir ni escriure.’
Podem rastrejar la nostra comprensió del web mirant les diferents modes (per falta d’una paraula millor) que s’han consolidat entre la nostra professió: estàndards web, accessibilitat, JavaScript discret ... totes són variants del mateix tema: millora progressiva. El mateix passa amb el disseny web sensible. Per construir un veritablement El lloc web sensible consisteix a crear un lloc que no només sigui compatible amb les versions anteriors, sinó que també sigui compatible amb el futur.
Bussejar en el marcador
D’acord, prou preàmbul, és hora d’obrir un editor de text.El nostre dissenyador ens ha proporcionat un disseny orientat a l’escriptori i ha tingut l’amabilitat de proporcionar exemples de com això podria aparèixer també en una finestra més reduïda.
Pot ser temptador codificar-los per separat, però us proposaré un enfocament diferent. En col·locar els components separats (o patrons) que formen el disseny en una sola pàgina, podem crear una cartera de patrons. Això ens permet desenvolupar components fora dels límits de qualsevol disseny de pàgina i ens donarà alguna cosa a referir-nos més endavant per a qualsevol prova de regressió. Vegem el marcador inicial en uns quants dispositius diferents:
Consulteu la nostra cartera de patrons marcats
Bé, estaré maleït: ja tenim un lloc web responsiu. El nostre contingut s’adapta als límits de cada dispositiu, ja sigui un iPad nou de luxe o un telèfon amb funcions descartades. Fins i tot funciona en un navegador només de text com Lynx.
Gràcies als principis subjacents de la universalitat, el web ho és responsive per defecte. És fantàstic, però també vol dir que tot el que fem al codi a partir d’ara pot comprometre aquesta adaptabilitat nativa.
Demà: Trepitjarem amb cura i començarem a aplicar el primer aspecte del disseny sensible: la tipografia i les quadrícules fluides.
