Content
- Imatges sensibles
- Rendiment
- Càrrega condicional i mandrosa
- Tipografia sensible
- Consultes multimèdia a JavaScript
- Millora progressiva
- Disseny
- Disseny de quadrícula CSS
- Finalment
El disseny web sensible sona increïblement senzill. Opteu per quadrícules flexibles per al disseny, utilitzeu suports flexibles (imatges, vídeo, iframes) i apliqueu consultes de suports per actualitzar aquestes mesures per organitzar millor el contingut en qualsevol finestra. A la pràctica hem après que no és tan fàcil. Els petits problemes que apareixen durant cada projecte ens fan gratar el cap i, de tant en tant, fins i tot tallar trinxeres d’ungles als nostres escriptoris.
Des que vaig començar a curar el butlletí setmanal Responsive Design Week, he tingut la sort de parlar amb molts membres de la comunitat web i escoltar les seves experiències. Volia saber exactament què volia aprendre realment la comunitat, així que vaig distribuir una enquesta als lectors. Aquests són els millors resultats:
- Imatges sensibles
- Millora del rendiment
- Tipografia sensible
- Consultes multimèdia a JavaScript
- Millora progressiva
- Disseny
Amb aquests temes en ment, vaig dirigir una sèrie de podcasts demanant els seus pensaments a alguns dels nostres líders de la indústria. En les seves respostes, un punt va ser unànime: centrar-se en obtenir els conceptes bàsics just abans de començar a preocupar-se per tècniques avançades i excitants. Si tornem a allò bàsic, podem crear una interfície robusta per a tothom, que ajudi les funcions quan el context del dispositiu o de l’usuari ho permeti.
‘Llavors ... i aquestes tècniques avançades?’ T’escolto preguntar-te. Crec que Stephen Hay ho va resumir millor quan va dir: ‘La tècnica definitiva de la RWD és començar sense utilitzar cap tècnica avançada de RWD. Comenceu amb contingut estructurat i construïu el vostre camí. Afegiu un punt d’interrupció només quan el disseny es trenqui i el contingut ho dicti i ... ja està. '
En aquest article, començaré amb els conceptes bàsics i afegiré capes de complexitat segons la situació ho permeti, per completar aquestes tècniques avançades. Comencem.
Imatges sensibles
Els mitjans fluids van ser una part clau de RWD quan va ser definit per primera vegada per Ethan Marcotte. amplada: 100%; , amplada màxima: 100%; encara funciona avui en dia, però el panorama de la imatge sensible s’ha complicat molt. Amb un nombre creixent de mides de pantalla, densitat de píxels i dispositius compatibles, desitgem un control més gran.
Les tres principals preocupacions van ser definides pel grup comunitari Responsive Images (RICG):
- La mida de kilobytes de la imatge que estem enviant a través del cable
- La mida física de la imatge que estem enviant a dispositius DPI elevats
- La imatge es retalla en forma de direcció artística per a la mida particular de la finestra gràfica
Yoav Weiss, amb l’ajut d’Indiegogo, ha realitzat la major part del treball en la implementació de Blink, la bifurcació de WebKit de Google, i quan llegiu això, s’enviarà a Chrome i Firefox. Safari 8 s'enviarà srcset, tot i que l'atribut Dimensions només és en versions nocturnes i la imatge> encara no està implementada.
Amb l'arribada de qualsevol novetat al nostre procés de desenvolupament web, pot ser difícil començar. Examinem un exemple pas a pas.
img! - Declareu la imatge alternativa de tots els navegadors que no admetin imatges -> src = "horse-350.webp"! - Declareu totes les mides d'imatges a srcset. Incloeu l’amplada de la imatge mitjançant el descriptor w per informar al navegador de l’amplada de cada imatge .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Les mides informen al navegador del disseny del nostre lloc. Aquí estem dient que per a qualsevol finestra de visualització que tingui 64 o més dimensions, utilitzeu una imatge que ocupi el 70% de la finestra gràfica -> sizes = "(min-width: 64em) 70vw,! - Si la finestra gràfica no és aquesta gran, doncs, per a qualsevol finestra de visualització de 37,5 m o més, utilitzeu una imatge que ocupi el 95% de la finestra de visualització -> (amplada mínima: 37,5 em) 95 vw,! - i si la finestra de visualització és més petita que aquesta, utilitzeu una imatge que ocupa el 100% de la finestra gràfica -> 100vw "! - sempre té text alternatiu .--> alt =" Un cavall "/>
Des del punt de vista del rendiment, no importa si utilitzeu l'amplada mínima o l'amplada màxima a l'atribut de mides, però sí que importa l'ordre font. El navegador sempre utilitzarà la primera mida coincident.
A més, recordeu que estem codificant els atributs mides per definir-los directament en funció del nostre disseny. Això pot provocar problemes avançant. Per exemple, si redissenyeu el vostre lloc, haureu de tornar a revisar tots els img> o imatges> i redefinir les mides. Si utilitzeu un CMS, això es pot superar com a part del procés de compilació.
WordPress ja té un complement per ajudar-vos. Defineix el srcset en varietats d'imatges estàndard WP i us permet declarar mides en una ubicació central. Quan la pàgina es genera a partir de la base de dades, canvia les mencions a img> i les substitueix per la marca de la imatge.
Bàsic
- Penseu si realment cal incloure una imatge. El contingut bàsic de la imatge és decoratiu? Una imatge menys significarà un temps de càrrega més ràpid
- Optimitzeu les imatges que necessiteu incloure mitjançant ImageOptim
- Definiu les capçaleres de caducitat de les vostres imatges al servidor o al fitxer .htaccess (vegeu els detalls a "Rendiment")
- PictureFill proporciona suport per a omplir imatges
Avançat
- Lazy carrega les teves imatges mitjançant el connector Lazy Load de jQuery
- Utilitzeu HTMLImageElement.Sizes i HTMLPictureElement per a la detecció de funcions.
- El connector avançat PictureFill WP, que es troba a Github, us permetrà definir valors d'amplada i mida de la imatge personalitzats
Rendiment
Per obtenir el rendiment més ràpid percebut a les nostres pàgines, necessitem tot l'HTML i CSS necessaris per representar la part superior de la nostra pàgina dins de la primera resposta del servidor. Aquest nombre màgic té 14 KB i es basa en la mida màxima de la finestra de congestió durant el primer temps d’anada i tornada (RTT).
Patrick Hamann, cap tècnic de frontend a The Guardian, i el seu equip han aconseguit trencar la barrera dels 1000 ms mitjançant una barreja de tècniques de frontend i backend. L’enfocament de The Guardian és assegurar-se que el contingut requerit (l’article) es lliura a l’usuari el més ràpidament possible i dins del nombre màgic de 14 KB.
Vegem el procés:
- L’usuari fa clic en un enllaç de Google a una notícia
- S'envia una sol·licitud de bloqueig única a la base de dades de l'article. No es demanen històries ni comentaris relacionats
- Es carrega l'HTML que conté CSS crítics
- al cap>
- Es realitza un procés de "Tallar la mostassa" i es carreguen els elements condicionals basats en les funcions del dispositiu de l'usuari
- Qualsevol contingut relacionat o que doni suport al propi article (imatges d’articles relacionats, comentaris d’articles, etc.) queda carregat al seu lloc
Si optimitzeu el camí crític de representació d'aquesta manera, el cap> té 222 línies. Tanmateix, el contingut crític que l'usuari va arribar a veure encara es troba dins de la càrrega útil inicial de 14 kb quan es comprimeix. Aquest procés ajuda a trencar aquesta barrera de renderització de 1000 ms.
Càrrega condicional i mandrosa
La càrrega condicional millora l’experiència de l’usuari en funció de la funció del dispositiu. Eines com Modernizr us permeten provar aquestes funcions, però tingueu en compte que el fet que un navegador digui que ofereix assistència, no sempre significa suport complet.
Una tècnica consisteix a deixar de carregar alguna cosa fins que l'usuari mostri la intenció d'utilitzar aquesta funció. Això es consideraria condicional. Podeu retenir la càrrega a les icones socials fins que l'usuari passegi el cursor per sobre o toqui les icones, o bé podeu evitar carregar un iframe Google Map en finestres més petites on és probable que l'usuari prefereixi enllaçar a una aplicació de mapes dedicada. Un altre enfocament és "Tallar la mostassa": consulteu la caixa superior per obtenir més informació.
La càrrega mandrosa es defineix com una cosa que sempre teniu intenció de carregar a la pàgina (imatges que formen part de l’article, comentaris o altres articles relacionats), però que no és necessari que l’usuari comenci a consumir el contingut.
Bàsic
- Activeu el gzipping per als fitxers i configureu les capçaleres de caducitat per a tot el contingut estàtic (netm.ag/expire-260)
- Utilitzeu el connector jQuery Lazy Load. Això carrega les imatges quan us acosteu a la finestra gràfica o després d'un període de temps determinat
Avançat
- Configureu Fastly o CloudFlare. Les xarxes de lliurament de contingut (CDN) proporcionen el vostre contingut estàtic als usuaris més ràpidament que el vostre propi servidor i tenen alguns nivells gratuïts
- Activeu SPDY per als navegadors habilitats amb http2 per aprofitar les funcions http2, com ara sol·licituds http paral·leles
- El recompte social permet la càrrega condicional de les vostres icones socials
- L'ús de l'API Static Maps us permetrà canviar Google Maps interactiu per imatges. Mireu l’exemple de Brad Frost a netm.ag/static-260
- Ajax Include Pattern carregarà fragments de contingut d’un atribut data-before, data-after o data-replace
Tipografia sensible
La tipografia consisteix en facilitar la digestió del vostre contingut. La tipografia sensible ho amplia per garantir la llegibilitat en una àmplia varietat de dispositius i finestres gràfiques. Jordan Moore admet que aquest tipus és una cosa que no està disposat a canviar. Deixeu caure una o dues imatges si ho necessiteu, però assegureu-vos que en teniu un de fantàstic.
Stephen Hay suggereix establir la mida del tipus de lletra HTML al 100% (llegiu: deixeu-ho tal com està) perquè cada fabricant de navegadors o dispositius estableix un valor per defecte llegible per a una resolució o dispositiu concret. Per a la majoria de navegadors d’escriptori, això té 16 px.
D'altra banda, Moore utilitza la unitat REM i la mida de la lletra HTML per establir una mida de lletra mínima per a determinats elements de contingut. Per exemple, si voleu que la línia contínua d'un article sigui sempre de 14 px, configureu-la com a font-size base a l'element HTML i configureu .byline {font-size: 1rem;}. En escalar el cos: font-size: per adaptar-se a la finestra gràfica, no afectareu l'estil .by-line.
També és important una bona longitud de la línia de lectura: apunteu-vos entre 45 i 65 caràcters. Hi ha un bookmarklet que podeu utilitzar per comprovar el vostre contingut. Si admeteu diversos idiomes amb el vostre disseny, la longitud de la línia també pot variar. Moore suggereix utilitzar: lang (de) article {max-width: 30em} per cobrir qualsevol problema que hi hagi.
Per mantenir el ritme vertical, configureu marge-fons contra blocs de contingut, ul>, ol>, blockquote>, table>, blockquote>, etc., al mateix que l'altura de línia. Si el ritme s’interromp amb la introducció d’imatges, podeu solucionar-ho afegint Baseline.js o BaselineAlign.js.
Bàsic
- Baseu la vostra font al 100% del cos
- Treballar en unitats relatives
- Estableix els marges a l’alçada de la línia per mantenir el ritme vertical al disseny
Avançat
- Milloreu el rendiment de la càrrega de tipus de lletra amb Enhance.js o la càrrega de tipus de lletra diferida
- Utilitzeu Sass @includes per als encapçalaments semàntics.
- Sovint hem d’utilitzar l’estil h5 en un widget de la barra lateral que requereix un marcatge h2. Utilitzeu els Mixins tipogràfics de Bearded per controlar la mida i mantenir-vos semàntic amb el codi següent:
.sidebar h2 {@include heading-5}
Consultes multimèdia a JavaScript
Des que hem estat capaços de controlar el disseny en una gran varietat de finestres mitjançant consultes de mitjans, hem buscat una manera de relacionar-ho amb l’execució del nostre JavaScript. Hi ha algunes maneres d’activar JavaScript en determinades amplades, alçades i orientacions de la finestra gràfica, i algunes persones intel·ligents han escrit alguns connectors natius de JS fàcils d’utilitzar com Enquire.js i Simple State Manager. Fins i tot podeu crear-ho vosaltres mateixos mitjançant matchMedia. Tanmateix, teniu el problema que necessiteu duplicar les vostres consultes multimèdia al vostre CSS i JavaScript.
Aaron Gustafson té un truc elegant que significa que no haureu de gestionar i fer coincidir les vostres consultes sobre suports al CSS i al JS. La idea va sorgir originalment de Jeremy Keith i, en aquest exemple, Gustafson l'ha portat a una implementació completa.
Mitjançant getActiveMQ (netm.ag/media-260), injecteu div # getActiveMQ-watcher al final de l’element del cos i amagueu-lo. A continuació, dins del CSS, configureu # getActiveMQ-watcher {font-family: break-0;} a la primera consulta de suports, font-family: break-1; al segon, font-family: break-2; al tercer i així successivament.
El script utilitza watchResize () (netm.ag/resize-260) per comprovar si la mida de la finestra gràfica ha canviat i, a continuació, torna a llegir la família de tipus de lletra activa. Ara podeu utilitzar-ho per connectar millores JS, com afegir una interfície amb pestanyes a un dl> quan la finestra gràfica ho permeti, canviar el comportament d'una caixa de llum o actualitzar el disseny d'una taula de dades. Consulteu el getActiveMQ Codepen a netm.ag/active-260.
Bàsic
- Oblideu-vos de JavaScript per a diferents finestres gràfiques. Proporcioneu contingut i funcions de llocs web als usuaris de manera que puguin accedir-hi a totes les finestres. Mai no hauríem de necessitar JavaScript
Avançat
- Amplieu el mètode de Gustafson utilitzant Breakup com a llista predefinida de consultes de suports i automatitzant la creació de la llista de famílies de tipus de lletra per a getActiveMQ-watcher
Millora progressiva
Una idea errònia habitual sobre la millora progressiva és que la gent pensa: "Bé, no puc fer servir aquesta nova funció", però realment és el contrari. La millora progressiva significa que podeu oferir una funció si només és compatible amb un navegador o fins i tot amb cap navegador i, amb el pas del temps, la gent tindrà una experiència millor a mesura que arribin les noves versions.
Si mireu la funció bàsica de qualsevol lloc web, podeu lliurar-lo com a HTML i fer que el servidor faci tot el processament. Pagaments, formularis, m'agrada, compartició, correus electrònics, taulers: tot es pot fer. Un cop construïda la tasca bàsica, podem posar cap a sobre les tecnologies increïbles, ja que tenim una xarxa de seguretat per atrapar les que cauen. La majoria dels enfocaments avançats que hem parlat aquí es basen en una millora progressiva.
Disseny
El disseny flexible és senzill de dir, però té molts enfocaments diferents. Creeu dissenys de quadrícula senzills amb menys marcatge mitjançant el selector nth-child ().
/ * declareu el primer ample mòbil de la quadrícula * / .grid-1-4 {float: left; amplada: 100%; } / * Quan la finestra de visualització tingui un mínim de 37,5 em, configureu la quadrícula al 50% per element * / @media (amplada mínima: 37,5 em) {.grid-1-4 {ample: 50%; } / * Esborreu el flotador cada segon element DESPRÉS del primer. Això s'orienta al 3r, 5è, 7è, 9è ... de la graella. * / .Grid-1-4: enèsim de tipus (2n + 1) {clear: left; }} @media (amplada mínima: 64em) {.grid-1-4 {ample: 25%; } / * Elimina l'esborrat anterior * / .grid-1-4: enèsim de tipus (2n + 1) {clar: cap; } / * Esborreu el flotador cada quart element DESPRÉS del primer. Això s'orienta al 5è, al 9è ... a la graella. * / .Grid-1-4: enèsim de tipus (4n + 1) {clear: left; }}
Adéu a l’ús de la posició i el flotador per als dissenys. Tot i que ens han servit fins ara, el seu ús per al disseny ha estat un hack necessari. Ara tenim dos nens nous que ens ajudaran a solucionar tots els nostres problemes de disseny: Flexbox i Grids.
Flexbox és ideal per a mòduls individuals, controlant el disseny de les peces de contingut dins de cadascun dels mòduls. Hi ha dissenys que intentem oferir que es poden aconseguir amb més facilitat mitjançant Flexbox, i això és encara més cert amb els llocs responsius. Per obtenir més informació al respecte, consulteu la guia de CSS Tricks sobre Flexbox o el Flexbox Polyfill.
Disseny de quadrícula CSS
La quadrícula és més adequada per al disseny de nivell macro. El mòdul de disseny de quadrícula us ofereix una manera fantàstica de descriure el vostre disseny dins del vostre CSS. Tot i que encara es troba en fase d’esborrany, us recomano aquest article sobre el disseny de la graella CSS de Rachel Andrew.
Finalment
Aquests són només alguns consells per ampliar la vostra pràctica de resposta. Quan us acosteu a qualsevol nova obra sensible, feu un pas enrere i assegureu-vos que encerteu els conceptes bàsics. Comenceu amb el contingut, l'HTML i les experiències millorades de la capa i no hi haurà cap límit per on podeu portar els vostres dissenys.
Aquest article va aparèixer originalment al número 260 de revista net.
