Què és el Disseny Web Responsive?

Taula de continguts:

Anonim

Us heu preguntat: "Quin és el disseny web sensible?" El disseny web responsable és un enfocament pel qual un dissenyador crea una pàgina web que "respon" o es redimensiona segons el tipus de dispositiu a través del qual es veu. Això podria ser un monitor d'ordinador d'escriptori de grans dimensions, un portàtil o dispositius amb pantalles petites, com ara telèfons intel·ligents i tauletes.

El disseny web sensible s'ha convertit en una eina essencial per a qualsevol persona amb presència digital. Amb el creixement de telèfons intel·ligents, tauletes i altres dispositius informàtics mòbils, més persones fan servir pantalles més petites per veure pàgines web.

$config[code] not found

Aquests llocs web també han de tenir en compte el primer índex mòbil que acaba d'anunciar Google l'abril de 2018. A mesura que més empreses petites augmenten la seva presència al mòbil, el seu lloc web, comerç electrònic, pàgina de Google Business, pàgines de xarxes socials i altres actius han de ser fàcilment accessibles a tots els països. dispositius.

Què és el Disseny Web Responsive?

El propòsit del disseny sensible és tenir un lloc, però amb diferents elements que responguin de manera diferent quan es vegin en dispositius de diferents mides.

Prenguem un lloc web "fix" tradicional. Quan es visualitza en un equip d'escriptori, per exemple, el lloc web pot mostrar tres columnes. Però quan veieu aquest mateix format en una tauleta més petita, pot obligar-vos a desplaçar-vos horitzontalment, cosa que els usuaris no els agrada. O els elements poden estar ocults de la vista o mirar distorsionats. L'impacte també és complicat pel fet que es poden veure moltes tauletes orientades verticalment o bé cap als costats per visualitzar el paisatge.

En una petita pantalla de telèfon intel·ligent, els llocs web poden ser encara més difícils de veure. Les imatges grans poden "trencar" el disseny. Els llocs web poden trigar a carregar-se en els telèfons intel·ligents si són grans.

Tanmateix, si un lloc utilitza un disseny atractiu, la versió de la tauleta es pot ajustar automàticament per mostrar només dues columnes. D'aquesta manera, el contingut és llegible i fàcil de navegar. En un telèfon intel·ligent, el contingut pot aparèixer com una única columna, potser apilada verticalment. O, possiblement, l'usuari tindria la possibilitat de passar per veure altres columnes. Les imatges es redimensionaran en lloc de distorsionar el disseny o quedar-se tallat.

El punt és: amb un disseny atractiu, el lloc web s'ajusta automàticament segons el dispositiu que l'espectador el veu.

Com funciona el disseny web de resposta?

Els llocs responsables utilitzen xarxes fluides.Tots els elements de pàgina es dimensionen per proporcions, en comptes de píxels. Per tant, si teniu tres columnes, no diria exactament quina amplitud cadascuna hauria de ser, sinó l'amplitud que han de tenir en relació amb les altres columnes. La columna 1 ha d'ocupar la meitat de la pàgina, la columna 2 hauria d'ocupar el 30% i, per exemple, la columna 3 haurà de tenir un 20%.

Els mitjans de comunicació com ara imatges també es canvien de mida. D'aquesta manera, una imatge pot romandre dins de la seva columna o element de disseny relatiu.

Problemes relacionats

Mouse v. Touch: El disseny per a dispositius mòbils també planteja el problema del ratolí contra el tacte. A les computadores d'escriptori, l'usuari normalment té un ratolí per navegar i seleccionar elements. En un telèfon intel·ligent o tauleta, l'usuari utilitza principalment els dits i toca la pantalla. El que pot semblar fàcil de seleccionar amb un ratolí pot ser difícil de seleccionar amb un dit en un petit lloc en una pantalla. El dissenyador web ha de tenir en compte el "tacte".

Gràfics i velocitat de descàrrega: A més, hi ha el problema de gràfics, anuncis i velocitat de descàrrega. En els dispositius mòbils, és aconsellable mostrar menys gràfics que les visualitzacions d'escriptori perquè el lloc no es carregui per sempre per a un telèfon intel·ligent. És possible que hagueu d'intercanviar mides d'anuncis més grans per obtenir anuncis més petits.

Aplicacions i "versions per a mòbils": En el passat, podríeu haver pensat en crear una aplicació per al vostre lloc web, per exemple, una aplicació per a iPad o una aplicació per a Android. O tindria una versió per a mòbils específicament per a BlackBerry.

Però amb tants dispositius diferents avui en dia, es fa cada vegada més difícil crear aplicacions i versions diferents per a cada dispositiu i plataforma operativa.

Per què les petites empreses necessiten passar al disseny web sensible

Més persones fan servir dispositius mòbils. Un estudi Pew recentment, el 77% dels nord-americans posseeixen telèfons intel·ligents el 2018, que va passar del 35% a la primera enquesta de propietat de smartphone de Pew Research Center realitzada el 2011.

Comproveu el vostre trànsit i us sorpreneu el nombre de visitants que arriben al vostre lloc web a través de dispositius mòbils. (A Google Analytics, seleccioneu "Audiència" al costat esquerre i, a continuació, "Mòbil" per veure quina proporció del trànsit és de dispositius mòbils. Fins i tot podeu analitzar quins dispositius envien el trànsit.)

Les plantilles de disseny sensibles es troben ara a tot arreu, per comprar. Si, per exemple, teniu un lloc de WordPress, podeu visitar una galeria de plantilles respectable com ThemeForest i cercar "temes de WordPress sensibles". Compreu un per menys de $ 50. El vostre desenvolupador web pot personalitzar-lo per al vostre logotip i marca.

Nota de l'editor: aquí, a les tendències de petites empreses, estem treballant en un nou disseny sensible. No?

Foto a través de Shutterstock

Més informació a: Màrqueting de contingut, Què són els comentaris de 95?