Amb mòbil d'ús a l'alça: un lloc web responsive és gairebé obligatori! Ja que no és suficient que els llocs web es veu bé només quan són vistos a l'ordinador, també han de respondre als usuaris de tablets, portàtils, 2-a-1 i diversos models de telèfons intel · ligents.

Responsive Web Design ofereix la solució ideal per a aquest repte. Llegir i explorar aquest enfocament per actualitzar el seu lloc web utilitzant un disseny responsive.

L'experiència de l'usuari

L'enfocament de disseny receptiu ofereix una experiència d'usuari superior a la gent accedir a llocs web de telèfons intel·ligents, ordinadors portàtils 2-en-1, i ordinadors d'escriptori. Per l'eliminació de la necessitat de crear per separat llocs web amb fulls d'estil en cascada (CSS) per a cada un, els dissenys receptiu assegurar que veuen els usuaris d'un lloc web idèntics independentment del dispositiu que s'utilitza per accedir-hi.

El lloc web responsive amb moltes de les mateixes característiques que es poden trobar a les pàgines web d'escriptori, incloent mides de lletra, i flexibles que redimensiona automàticament segons la mida de la pantalla. A més a més, els dissenys receptiu permetre que els dissenyadors per amagar determinats continguts o funcions en dispositius petits per proporcionar una experiència d'usuari personalitzat basat en el dispositiu. Això pot incloure amagar elements irrellevants per els usuaris de telèfons mòbils o per a adaptar dissenys que s'hagin dissenyat específicament per a telèfons intel·ligents aprofitant les habilitats especials com la capacitat de la càmera.

Per tenir una web responsive web amb dissenys adaptables i versàtil és un repte. Canviar la mida de les imatges per a diferents mides de pantalla, podeu fer-los aparèixer borrosa o fora de focus si són exportats amb resolucions insuficient; Els dissenyadors sensible pot evitar aquest problema mitjançant l'ús de CSS mitjans de consultes que permeten especificar exactament què l'amplada de les imatges apareixeran.

Els dissenyadors receptiu pot resoldre aquest repte optimitzar les imatges per reduir el temps de càrrega i a adaptar-los a la pàgina web sensible, de manera que apareixen per l'estètica de la gran varietat de mides de navegador i pantalla, alterant el seu disseny, contingut i l'estil de contingut dinàmicament com van canviant a mida.

Un altre repte del disseny és la resposta és trobar un bon disseny. És important canviar la mida de les imatges per assegurar-se que disposa de la corresponent resolució, mentre que també s'ha de tenir en compte altres consideracions, com ara la priorització dels continguts i la consistència de la navegació. Per superar aquest obstacle, es recomana fer una prova de desenvolupament del teu lloc web responsive abans del seu llançament al mercat.

Disponible

El disseny és la resposta té com a objectiu mantenir la uniformitat visual a través de totes les plataformes per adaptar el contingut i el disseny com a resposta a canvis en la grandària de la pantalla, fent-ho més fàcil per als usuaris a llegir i navegar per llocs web en els ordinadors, les tauletes i dispositius mòbils, independentment de la configuració de l'orientació o de la resolució. Algunes lloc web responsive tenen un disseny únic en totes les plataformes, mentre que altres poden fer modificacions significatives en el disseny o el contingut de cada plataforma.

Una manera d'aconseguir aquest objectiu és a través de l'ús de sistemes de grid flexible i proporcional dissenys. Un sistema de quadrícula permet als dissenyadors per crear dissenys que són automàticament ajustada segons la mida del navegador o per la pantalla de l'usuari, l'estalvi de temps i esforços en el disseny d'aquest tipus de llocs.

CSS (fulls d'estil en cascada) és un altre aspecte clau del disseny web és la resposta, que controla com es mostrarà a HTML en diverses pantalles. Una web responsive amb un conjunt de codi HTML per als usuaris de mòbils i d'escriptori, sinó que s'aplica a diferents conjunts de CSS instruccions en conseqüència, l'eliminació de la necessitat de desenvolupar per separat versions per a cada plataforma, i l'actualització simultàniament múltiples conjunts de HTML.

Rally Interactiva es destaca com un excel·lent exemple de lloc web sensible, ja que ofereix als seus visitants una resposta coherent i experiència d'usuari a equips d'escriptori i dispositius mòbils. El disseny es va mantenir constant en tots els dispositius, amb una galeria d'imatges, i una carta d'hamburgueses similar a l'utilitzat per a la navegació a enllaços en la barra de navegació a mòbils. A més a més, el lloc web de la prova Interactiva inclou un enllaç per baixar l'aplicació mòbil gratuïta que permet als clients l'accés a actualitzacions de notícies i blog articles directament en el seu telèfons intel·ligents.

Una web responsive hauria de garantir que totes les imatges estan dimensionats correctament per a diferents mides de pantalla de configuració de la seva amplada com un percentatge de la mida de la pantalla o a la finestra de gràfics, utilitzant una tècnica de fluid grid que s'adapta a les mides de pantalla de l'espectador, i les finestres del navegador.

Desenvolupadors optimitzar el codi css de la pàgina websabem que les unitats CSS vw i vh pot ajudar els dissenyadors per crear dissenys en fluid més fàcilment en relació amb l'alçada o l'amplada de la vista actual, proporcionant un major control sobre les alineacions com els canvis de disseny a mida. Els desenvolupadors Web també ha de fer servir unitats relatives a la font de l'escala del tipus de lletra com canvia la mida, assegurant que el text segueix sent llegible, independentment de la mida de la pantalla.

El contingut ha de ser adaptables a un lloc web responsive

Un dels reptes més importants associats amb el disseny sensible és per allotjar el contingut. Això és especialment crucial a l'hora de dissenyar per a dispositius mòbils com ara telèfons intel·ligents i tauletes, on pàgines web, pot ser difícil per a navegar en comparació a un escriptori monitor. El disseny és sensible resol aquest problema per prioritzar els continguts de manera que els elements importants, sent visible en totes les pantalles i al mateix temps per fer tota la informació necessària i és fàcilment accessible als usuaris.

Media queries proporcionar un mitjà eficaç per prioritzar els continguts a establir diferents punts de ruptura per diferents amplades de pantalla, com ara telèfons mòbils, horitzontal (576 px), comprimits (768 px), ordinadors portàtils (992 px) i l'escriptori pantalles extra large (1200 px). Quan ho feu, el vostre lloc pot ser optimitzat per a cobrir els dispositius i mides de pantalla que són més populars.

Creació de continguts també hauria d'implicar assegurar-se que tot el text i les imatges que són a la grandària adequada, per garantir la màxima llegibilitat en una gran varietat de dispositius i pantalles tàctils. Quan el text s'usa com a base per al càlcul de la mida, la utilització de les unitats em/rem en comptes de píxels assegura que les fonts són sempre fàcil de llegir, fins i tot en petits! A més a més, les imatges també han de ser dimensionats correctament de manera que es pot tocar fàcilment amb la punta d'un dit.

Prova dissenys receptiu a tants dispositius possible és de vital importància, especialment amb els telèfons mòbils que es basen en la inestable connexions a la connectivitat. Plenament valorar com el disseny de treballs receptiu a entorns del món real, on pot haver-hi problemes de connectivitat inconsistent.

Atès que el trànsit de mòbils ha superat el trànsit escriptori, és més important que mai que els visitants arribar a gaudir de una visualització atractiva i una experiència interactiva, independentment del dispositiu que s'utilitza per visitar el seu lloc web. Un responsive web design és importantperquè és una manera de proporcionar una visualització i interacció dels usuaris amb el vostre lloc web per als visitants de mòbils; hem de Prendre el temps i l'esforç necessaris per desenvolupar la seva responsive web design, i la potenciació del seu mòbil visitants una experiència inoblidable!

Navegació

Quan la gent va començar a utilitzar els telèfons mòbils per accedir a la web, que no són mai garantida la lectura de determinats llocs web, que sovint tenen un petit text, navegació difícil i/o enviats de tornada a usuaris directament a una versió per a mòbils està limitat a menys contingut i les funcions. No obstant això, gràcies al disseny sensible, ara els usuaris tenen una experiència de visualització ininterrompuda en tots els dispositius sense haver de lidiar amb les redireccions frustrant o la visualització d'experiències reduït.

Tot i que el principal èmfasi en el disseny és la resposta, que es troba en els dissenys i imatges, inclou també activitats com els llocs web de respondre a diferents mides de pantalla i resolucions. Una tècnica comunament utilitzat per dissenyadors, lloc web responsive és l'ús de trencar punts punts en el codi CSS que altera l'aparició d'un lloc web, sovint s'estableix amb valors d'amplada mínima, i l'amplada màxima dels elements.

Tenint en compte el disseny és la resposta, és vital que a l'inici del procés de desenvolupament es porta a terme un extens assaig de la pàgina web responsive tant en ordinadors d'escriptori i dispositius mòbils amb diferents connexions a internet; es podria portar en un viatge fora de l'oficina, on hi ha la mala recepció conegut, per a comprendre com funcionen. És important avaluar el seu rendiment en el món real de les condicions i de conèixer de manera precisa experiència de com la pàgina web serviran a la seva audiència.

Una manera eficaç de visualitzar com es va aparèixer a un lloc web responsive és l'ús d'eines com ara LT, Navegador, que simula la manera de veure els llocs web a una gran varietat de dispositius i resolucions de pantalla. LT Navegador pot proporcionar-vos informació sobre la manera de veure el disseny; això sovint és més útil que la wireframing només i també estalvia temps durant el desenvolupament. A més a més, les eines modernes de transferència de disseny com Zeplin, Sympli, Meravellar-se i InVision permet la col·laboració entre dissenyadors i desenvolupadors en elements que són responsabilitat compartida.