A l’hora de dissenyar el lloc web, és important assegurar-se que tingui un aspecte fantàstic en qualsevol dispositiu, independentment de la mida i la forma de la pantalla. Els llocs web responsius estan dissenyats per tenir un bon aspecte en tot tipus de dispositius moderns, com ara ordinadors, telèfons, tauletes, televisors, equips portables i fins i tot pantalles de cotxes. Per fer que un lloc web sigui sensible, haureu de modificar el codi CSS i HTML per redimensionar automàticament els seus elements en funció de les condicions específiques. Aquest wikiHow us ensenya a planificar i implementar el disseny web responsiu bàsic.
Passos
Mètode 1 de 3: Planificació del disseny sensible
Pas 1. Esbrineu com el vostre públic utilitza el vostre lloc web
Actualment, la majoria de les persones que naveguen per Internet ho fan des de telèfons mòbils i tauletes. Perquè un lloc tingui capacitat de resposta, heu d’assegurar-vos que es mostri correctament, independentment d’on es visualitzi. Si el temps i els diners són essencials, concentreu-vos en els tipus de dispositius més populars entre els vostres usuaris (si hi ha aquesta informació disponible) i en com utilitzen el vostre lloc. Feu servir el vostre programari d’anàlisi o alguna altra forma d’investigació:
- Quins tipus de dispositius utilitzen més sovint per veure el lloc web, prestant especial atenció a les marques de telèfons mòbils / tauletes / ordinadors i a les mides de pantalla / resolució.
- Quins navegadors són més populars entre els vostres usuaris. Pel que fa a les estadístiques globals, Google Chrome és el navegador web més popular a tot el món, però Safari és un segon.
- Com fan servir els vostres visitants el vostre lloc web, com ara el temps que passen visualitzant, on el visualitzen i quin contingut és el més popular. Això us pot ajudar a determinar quin tipus de contingut és important incloure i quin es pot ometre.
Pas 2. Dissenyeu diferents dissenys per a diferents dispositius
Podeu utilitzar una combinació de CSS i JavaScript per detectar el dispositiu d’un usuari, així com les seves capacitats (si admet Java, Flash, etc.) i mostrar una versió concreta del vostre lloc en conseqüència. Les consultes de suports CSS són particularment útils per determinar la mida / resolució del dispositiu.
Pas 3. Compte amb diferents tipus d’interaccions
El vostre visitant podria interactuar amb el vostre lloc web mitjançant un ratolí, un teclat, una pantalla tàctil o fins i tot un lector de pantalla per a persones amb discapacitat visual. Tenint en compte això, el vostre lloc web hauria de respondre als clics del ratolí, a les tecles del teclat (Tabulador, Retorn, Retorn, etc.) i als dits de la pantalla.
Els efectes de sobrevol no funcionen amb res excepte amb un ratolí. En lloc d’utilitzar aquests efectes, podeu fer que el visitant faci clic a un botó o a una icona per mostrar tot el que es mostrava prèviament en un cursor del ratolí
Pas 4. Penseu a utilitzar un sistema de gestió de contingut (CMS)
Una manera senzilla d’assegurar-vos que el disseny del vostre lloc respon és utilitzar un CMS amb un tema de resposta predefinit. L’ús d’un CMS com Joomla, Drupal o Wordpress us permet assegurar-vos que el vostre lloc web té un aspecte fantàstic en tots els dispositius sense haver de codificar vosaltres mateixos els elements responsius. Consulteu amb el vostre proveïdor d’allotjament web per veure quines eines CMS estan disponibles amb el vostre servei.
Pas 5. Utilitzeu eines en línia per provar el vostre lloc web
Ara que el disseny web sensible ha augmentat en popularitat, hi ha diverses eines gratuïtes que podeu utilitzar per provar el vostre lloc web. Si ja heu codificat el lloc web, utilitzeu aquestes eines per provar el seu aspecte en diverses condicions i així sabreu on heu de millorar la capacitat de resposta:
- Prova de Google per a mòbils: us permet saber si el vostre lloc funciona tan bé en dispositius mòbils com en pantalles d'ordinador.
- resizeMyBrowser: us permet veure el vostre lloc amb diferents resolucions.
- Responsable: mostra el vostre lloc en diferents pantalles de dispositius en diferents dissenys (de costat o de costat a dalt).
Mètode 2 de 3: fer que el disseny de pàgina sigui sensible
Pas 1. Penseu en un marc de fulls d'estil sensible i gratuït
Un framework és un conjunt preescrit d’HTML, CSS i / o JavaScript que podeu utilitzar com a esquelet per al vostre lloc. Els marcs estan provats i optimitzats per funcionar amb tots els navegadors, de manera que tot el que heu de fer és inserir el vostre contingut, afegir les preferències de color i suports i publicar el vostre lloc. Alguns marcs populars són:
- Bootstrap
- Esquelet
- Fundació
Pas 2. Configureu la finestra gràfica amb una metaetiqueta
Si no utilitzeu un framework, voldreu començar amb l'aspecte més important de la codificació d'un lloc web sensible: el Viewport. La finestra gràfica és la part del lloc web visible per a l'usuari. La clau per fer que el vostre lloc es mostri correctament independentment de la mida de la pantalla és escalar la mida de la finestra a l’etiqueta META. Per fer-ho, incloeu aquesta etiqueta a la part superior de cada pàgina del lloc:
Pas 3. Especifiqueu la mida del text en relació amb la finestra gràfica
Un cop configurada la finestra gràfica, el text de la vostra pàgina s'ampliarà perquè s'adapti a la pantalla. Tanmateix, els tipus de lletra poden mostrar-se massa grans o massa petits si no s’especifiquen les mides en relació amb la finestra gràfica. Podeu fer-ho definint la mida de la font com a percentatge específic de la finestra gràfica amb la unitat vw. Aquest exemple indica a les capçaleres H1 que es mostrin al 10% de l'amplada de la finestra, independentment de la seva mida:
wikiHow
Pas 4. Utilitzeu consultes multimèdia per mostrar estils diferents per a mides de pantalla diferents
Les consultes de suports us permeten escollir si voleu mostrar determinats elements CSS en funció de la mida de la pantalla. Podeu especificar els detalls de la vostra consulta multimèdia al fitxer CSS. En aquest exemple, el color de fons del cos es tornarà vermell si la mida de la pantalla de l'usuari és de 480 px o més:
wikiHow
Pantalla @media i (amplada mínima: 480 px) {body {background-color: aqua; }}
Mètode 3 de 3: fer que les imatges siguin sensibles
Pas 1. Utilitzeu la propietat CSS width per escalar imatges
En lloc d’establir l’amplada de la imatge en una quantitat específica de píxels (per exemple, 500 px), utilitzeu un percentatge (per exemple, 100%) perquè la imatge miri l’amplada del pare i s’ajusti en conseqüència. Establir l'amplada d'una imatge al 100% obliga a escalar la imatge cap amunt i cap avall en funció de la mida de la pantalla del visualitzador. Per fer-ho en línia:
Pas 2. Utilitzeu la propietat d'amplada màxima per limitar l'escala de la mida real de la imatge
Si utilitzeu la propietat ample al pas anterior per escalar una imatge al 100%, la imatge creixerà o es reduirà fins a ajustar-se al 100% del contenidor, independentment de la mida. Això significa que si la imatge es troba al costat més petit, augmentarà més que la seva mida original i tindrà un aspecte de menys qualitat. Per evitar que això passi, utilitzeu l’amplada màxima per establir la mida d’escala màxima de la imatge al 100% (la seva mida real). A continuació s’explica com:
Pas 3. Utilitzeu l'element d'imatge HTML per mostrar diferents imatges en diferents mides de pantalla
Si voleu crear imatges de mida personalitzada per mostrar en pantalles de diferents mides, podeu especificar quines fotos es mostraran al vostre codi HTML. Creeu les imatges de diferents mides i, a continuació, utilitzeu aquest codi com a exemple per especificar quina imatge voleu utilitzar a les pantalles d'amplada de 600 px i 1500 px:
