Creeu un lloc sensible en una setmana: consultes multimèdia (part 4)

Content

• 01. Afegir consultes multimèdia
• 02. Anatomia d'una consulta de mitjans
• 03. Una cosa més ...
• 04. Tria dels punts d'interrupció
• 05. Ajustar les nostres miniatures
• 06. No només amplada

• Coneixements necessaris: CSS i HTML intermedis
• Requereix: Editor de text, navegador modern, programari gràfic
• Hora del projecte: 1 hora (5 hores en total)
• Fitxer de suport

Una part relativament nova de l’especificació CSS, les consultes de mitjans són, sens dubte, l’aspecte més emocionant del disseny web sensible i una àrea preparada per a experimentacions posteriors.

Després d’haver acceptat la necessitat de dissenys adaptatius, alguns han vist les consultes de mitjans com un mitjà per adaptar els dissenys adaptatius als llocs d’amplada fixa existents. Entre els que han adoptat dissenys responsius, molts ho han fet des de la perspectiva de l'escriptori, ocultant contingut i funcions a mesura que es redueix la finestra.

Al llarg d’aquest tutorial, hem adoptat un enfocament alternatiu, primer mòbil. Ara, quan volem incloure consultes de mitjans, podem pensar-hi afegint funcions a mesura que augmenta la propietat immobiliària de la pantalla, segur que sabem que l’etiquetatge i el disseny que sustenten el nostre lloc proporcionen una línia de base respectable.

Avui superarem la nostra cartera de patrons i crearem les pàgines individuals necessàries per al nostre lloc web. En fer-ho, veurem com es construeixen les consultes de mitjans i les implementarem d’una manera realment sensible.

01. Afegir consultes multimèdia

Amb els components de la nostra cartera de patrons complets i que funcionen fora dels límits de qualsevol disseny, és hora de traslladar-los a les diferents pàgines que formen el nostre lloc.

Començarem per la nostra pàgina d'inici. Des del disseny orientat a l’escriptori, podem veure que en finestres més àmplies el nostre disseny hauria d’aparèixer de la següent manera:

Prenent mesures del nostre disseny, podem descriure l'àrea del document en CSS de la següent manera:

.document {
encoixinat: 0 5%;
}
.principal {
amplada: 74,242424242424%; / * 784/1056 * /
flotador: esquerra;
}
.complementari {
amplada: 22,727272727273%; / * 240/1056 * /
flotador: dret;
}

Tal com hem après a la segona part d’aquest tutorial, utilitzem la fórmula següent per calcular l’amplada percentual d’aquestes columnes:

(objectiu / context) * 100 = resultat

Quan redimensionem el navegador, veurem que el disseny de l’escriptori passa de la pantalla de mida més petita a la més gran. Per descomptat, en mides petites, les columnes són massa estretes i les línies són tan curtes que el contingut és difícil de llegir. Només volem aquest disseny quan hi hagi prou espai disponible perquè funcioni.

Aquí és on intervenen les consultes multimèdia. Suposant que aquest disseny només hauria de tenir efecte quan el navegador tingui més de 768 px, podem afegir el CSS següent:

.document {
encoixinat: 0 5%;
}
Pantalla @media i (amplada mínima: 768 px) {
.principal {
amplada: 74,242424242424%; / * 784/1056 * /
flotador: esquerra;
}
.complementari {
amplada: 22,727272727273%; / * 240/1056 * /
flotador: dret;
}
}

Ara, quan la finestra gràfica sigui més estreta que 768 px, s'ignorarà tot el contingut de la consulta multimèdia. Qualsevol navegador que no admeti consultes multimèdia també l’ignorarà.

02. Anatomia d'una consulta de mitjans

Per entendre què passa aquí, vegem com es construeix una consulta de mitjans. El podem dividir en dues parts:

• @media pantalla: La primera part d 'una consulta de mitjans és tipus de suport. Podeu reconèixer aquesta sintaxi si alguna vegada heu inclòs estils d'impressió al vostre CSS. També podeu reconèixer el nom del tipus a mitjans de comunicació atribut al fitxer enllaç> element. Això es deu al fet que tots dos accepten el conjunt de tipus de suports aprovats que es troben a l'especificació CSS ​​2.1.
• (amplada mínima: 768 px): La segona part és la consulta. Això inclou el fitxer característica a consultar (en aquest cas l'amplada mínima de la finestra) i el corresponent valor per provar (768 px).

Quan parlem de disseny web sensible, hi ha una tendència a centrar-se en l’amplada, però també hi ha altres funcions que podem comprovar:

• (mínim | màxim) amplada i (mínima | màxima) alçada: Aquests ens permeten consultar l'amplada i l'alçada de la finestra gràfica (és a dir, la finestra del navegador).
• (mínim | màxim) amplada del dispositiu i (mínim | màxim) alçada del dispositiu: Això ens permet consultar l’amplada de tota la pantalla. Segons la meva experiència, sol ser més raonable basar els dissenys en la finestra gràfica en lloc de la pantalla.
• orientació: Aquí podeu pensar immediatament en les possibilitats; penseu en aplicacions que mostren contingut diferent en funció de l'orientació del vostre telèfon; el mateix és possible al web.
• (min- | max-) relació d'aspecte: Això ens permet adaptar els dissenys en funció de la proporció de la finestra del navegador ...
• (mínim | màxim) relació-aspecte del dispositiu: ... i això ens permet fer el mateix en funció de la relació d'aspecte del dispositiu. Owen Gregory va escriure l'any passat un meravellós article que explora com podem utilitzar aquesta consulta per lligar els nostres dissenys als dispositius en què apareixen.
• (min- | max-) monocrom: També podem provar si un dispositiu té una pantalla monocroma o no. Imagineu el útil que seria si els dispositius Kindle de tinta electrònica d’Amazon no mentissin i informessin de les seves pantalles en color.

La part final de la nostra consulta és possiblement la més útil. Mitjançant l'ús de i, podem provar diverses funcions en una consulta. Per exemple:

Pantalla @media i (amplada mínima: 768 px) i (orientació: horitzontal) {
...
}

Com podeu veure, les consultes multimèdia ens poden ajudar a construir experiències força convincents, i només he tocat la superfície. Si esteu buscant una lectura lleugera a l’hora d’anar a dormir, podríeu fer pitjor que llegir l’especificació de la consulta multimèdia del W3C que descriu totes les funcions que podem provar.

03. Una cosa més ...

Tot i que hem inclòs consultes multimèdia al nostre CSS, si veiem el nostre lloc en un dispositiu mòbil, notareu que el nostre lloc encara es renderitza com si la pantalla fos més gran que 768 px.

Per entendre per què passa això, hem de fer una breu lliçó d’història.

Quan es va anunciar l’iPhone original el 2007, un dels seus grans punts de venda era la possibilitat de navegar pel “web real”, fins i tot si això volia dir que els llocs orientats a l’escriptori d’amplada fixa havien de ser reduïts per adaptar-se a la seva petita pantalla. L'iPhone va poder fer això informant que la seva pantalla tenia una amplada de 980 px, abans de reduir les pàgines web per ajustar-la a la pantalla de 320 px d'ample.

Però l'iPhone es va introduir abans de l'aparició del disseny sensible. Ara que els autors dissenyen llocs dissenyats per a mòbils, aquesta funció és menys útil. Afortunadament, Apple va incloure un mitjà per evitar aquest comportament i, des que ha estat adoptat per altres fabricants, s’ha convertit en gairebé un de facto estàndard. Simplement implica afegir-ne un de senzill meta element del nostre marcatge:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Això indica als navegadors que tenen coneixement de la finestra que no s’ha de reduir la mida d’un lloc web i que l’amplada de la finestra del navegador s’ha de tractar igual que l’amplada general del dispositiu. Un cop hàgim afegit aquesta línia, el nostre lloc web apareixerà amb el disseny previst:

04. Tria dels punts d'interrupció

Tornem a la nostra consulta sobre mitjans:

Pantalla @media i (amplada mínima: 768 px) {
...
}

Els valors en què s’adapta un disseny s’anomenen habitualment punts d’interrupció. Si recordeu, a la segona part he dit que l’ús de píxels és una indicació d’un pensament que no respon, però aquí he triat 768 px, probablement perquè té l’amplada d’un dispositiu familiar.

En lloc d’escollir els punts d’interrupció en funció de les característiques dels dispositius populars, pot ser més eficaç mirar els valors derivats del nostre contingut, per exemple, longituds de línia còmodes per llegir o la mida màxima d’una imatge.

Amb la mida del nostre tipus mitjançant ems, sembla raonable que les nostres consultes de mitjans també facin servir ems. De fet, fer-ho té un avantatge addicional. Quan un usuari redimensiona el text del navegador, les pàgines s’adaptaran per utilitzar punts d’interrupció més petits. El nostre lloc web no només s’adaptarà en funció de la mida de la finestra gràfica, sinó també de la mida del tipus de lletra. De fet, només quan vaig veure a Jeremy Keith demostrar consultes mediàtiques basades en em em vaig adonar del poderós que podien ser.

Tot i que el nostre disseny pot proporcionar alguna indicació de possibles punts d’interrupció, sovint la millor manera d’escollir-los és mitjançant l’experimentació. En ajustar l’amplada de la finestra del navegador, he decidit que 800 px és una bona amplada per canviar a un disseny més complex.

Però, com expressem 800 px en ems? Una vegada més, podem utilitzar la nostra fórmula, però quin és el context? Quan es calculen ems per a consultes multimèdia, el context sempre és la mida de lletra predeterminada del navegador independentment de si aquest valor s'ha substituït al vostre CSS. Aquest valor per defecte sol ser de 16 px, cosa que ens dóna:

800 / 16 = 50

Ara podem actualitzar la nostra consulta multimèdia així:

Pantalla @media i (amplada mínima: 50em) {/ * 800px * /
...
}

05. Ajustar les nostres miniatures

Recordareu que a la part 2 vam dissenyar les nostres miniatures perquè tinguessin resposta. Tanmateix, un cop les imatges d’aquestes miniatures arriben a l’amplada completa, apareix una àrea d’espai en blanc a la dreta de cada imatge. Una vegada més, les consultes de mitjans ens permeten solucionar-ho.

Aquí teniu el nostre CSS original:

ol.media li.media-item {
color de fons: #fff;
marge: 0 4,16666666667% 4,16666666667% 0;
amplada: 47,91666666667%;
flotador: esquerra;
}
ol.media li.media-item: nth-child (2n) {
marge-dreta: 0;
}

El punt en què apareix aquest espai en blanc és quan el navegador s’amplia que els 560 px.Triarem aquest valor per canviar-lo per mostrar tres miniatures per fila. Ho podem fer afegint el següent CSS:

Pantalla @media i (amplada mínima: 35em) {
.media-item {
amplada: 30,612244897959%; / * 240/784 * /
marge: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
marge-dreta: 0;
}
}

Tingueu en compte que no cal que reescriviu tots els estils necessaris per a la miniatura dins d’aquesta consulta multimèdia, només les parts que volem adaptar.

Si veieu aquest canvi al navegador, notareu que no hi ha cap marge a la dreta de cada segona miniatura. Això es deu al fet que la següent regla CSS continua activa:

ol.media li.media-item: nth-child (2n) {
marge-dreta: 0;
}

Hem de modificar el CSS dins de la nostra consulta multimèdia per restablir aquest valor:

Pantalla @media i (amplada mínima: 35em) {
.media-item {
amplada: 30,612244897959%; / * 240/784 * /
marge: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
marge-dreta: 4,081632653061%;
}
.media-item: nth-child (3n) {
marge-dreta: 0;
}
}

Quan creeu consultes multimèdia, tingueu sempre en compte els problemes d’herència com aquest.

06. No només amplada

És important pensar en les consultes de mitjans no només en termes d’amplada, sinó també d’altres variables. Per exemple, el vídeo de la nostra pàgina d'elements multimèdia s'oculta parcialment quan l'alçada de la finestra gràfica disminueix. Disposem de la tecnologia:

.media-object-wrapper {
fons de farciment: 56,25%;
amplada: 100%;
alçada: 0;
posició: relativa;
}
Pantalla @media i (alçada màx: 35em) i (orientació: paisatge) {/ * 560px * /
.media-object-wrapper {
amplada: 60%;
fons de farciment: 33,75%;
}
}

Fins i tot he inclòs una consulta d’orientació per perfeccionar aquest comportament.

Podem seguir un enfocament similar per a la resta de parts del nostre disseny, canviant una versió més gran de la capçalera i movent els enllaços de navegació a la part superior de la pàgina un cop l’espai estigui disponible.

• Consulteu la nostra pàgina d'inici responsiva
• Consulteu la nostra pàgina d’elements multimèdia responsius

I aquí ho tenim! Hem creat un lloc web sensible i amb un dia lliure. Bé, no del tot. Dissenys flexibles, imatges i consultes multimèdia només són l’inici del procés de disseny sensible.

Demà: A la part final d’aquest tutorial, anirem més enllà del disseny web sensible i veurem com podem crear llocs web realment sensibles.

Paul és un dissenyador d’interaccions amb seu a Brighton, Anglaterra. És el més feliç quan crea interfícies senzilles però atractives que són natives del web.