El disseny adaptatiu de llocs web és un sistema convenient per mostrar el mateix lloc web en diferents tipus de dispositius en línia. En termes senzills, aquesta és la possibilitat de veure una pàgina web en un ordinador portàtil, telèfon intel·ligent i altres aparells.
La capacitat de resposta al web s'ha convertit en una necessitat des que la gent va tenir gadgets habilitats per a Internet de diversos formats. Les empreses, les botigues en línia i fins i tot els llocs informatius s'esforcen per complaure el seu públic, adaptant-s'hi de totes les maneres possibles. El disseny responsive resol el problema de la comoditat, per tant és un element de treball indispensable.
Característiques del disseny web responsive
La comoditat del disseny es caracteritza per diversos criteris principals.
- Talla. El disseny del lloc web responsive hauria de tenir diferències menors a l'hora de mostrar la pàgina en diferents dispositius, de manera que les mides de les imatges, el text i altres elements visualitzats haurien de correspondre a les mides dels propis dispositius. Per fer-ho, els desenvolupadors web adapten el disseny perquè tingui diverses versions de visualització.
- Adaptació de contingut. Material que omple el lloc (imatges, vídeosi altres elements multimèdia) també han de coincidir amb les resolucions de pantalla requerides sense perdre la qualitat de la pantalla.
- Flexibilitat de disseny. Inclusió en el desenvolupament d'elements que permetin ajustar ràpidament el disseny del lloc quan canvieu la pàgina web que esteu visualitzant. Per exemple, l'usuari desplaça la pàgina cap amunt i cap avall, navega per diferents seccions o canvia la posició de la pantalla de vertical a horitzontal i viceversa.
- Simplifica els elements per dispositiu per a una millor usabilitat.
- Amaga els blocs sense importància en pantalles més petites.
Nocions bàsiques
La creació de llocs web està definitivament relacionada amb els llenguatges de programació, perquè simplement no podeu prescindir d'ells. Amb HTML i CSS, el navegador reconeix la composició i l'ordre dels objectes (textos, il·lustracions, vídeos) - així és com es forma el lloc.
CSS és responsable del color, estils, mides, tipus de lletra, alineacions, farciment, elements de fons, formularis, etc. HTML és responsable del contingut i l'estructura generals del lloc. Així, un recurs web es construeix en l'agregat dels dos mètodes de descripció més importants.
CSS, en canvi, és una eina de disseny indispensable. Té un gran conjunt de funcions que són superiors a HTML:
- Ofereix coherència de disseny a diverses pàgines, l'aspecte del lloc i controla la visualització de documents HTML.
- T'ofereix l'oportunitat de fer disseny i contingut al mateix temps.
- Aplica diversos estils i la capacitat de fer-hovisualització en diferents dispositius.
- Preneu decisions de disseny complexes.
- Caracteritzat per l' alta velocitat.
Per desenvolupar un lloc web, cal conèixer alguns conceptes bàsics.
Un selector CSS s'indica amb el nom d'un estil que defineix propietats i opcions de format. Indica al navegador a quin element específic s'apliquen les propietats.
Una propietat és una unitat estructural. Defineix paràmetres externs (mida, ubicació, color, forma, etc.) i s'expressa en un codi específic.
Hi ha un conjunt de propietats CSS definides que descriuen un únic objecte en aparença i ubicació.
Junts, aquests elements formen l'esquema següent:
Selector { propietat1: valor; propietat2; valor }.
Mides i resolucions de disseny
El desenvolupament del disseny comença amb la preparació del disseny a Photoshop o altres programes gràfics. Per comoditat, s'introdueixen marques especials de la graella modular al llenç, s'observen sagnies especials. Així, el dissenyador web mostra al dissenyador de maquetació els principis d'estructuració del futur lloc i la correcta disposició dels elements web.
Resolucions i mides de disseny web responsius per als principals tipus de dispositius:
- Aquest disseny s'adhereix al principi de començar a treballar amb permís mòbil. El disseny del telèfon intel·ligent es crea amb una mida de 460 × 960 píxels.
- La mida del disseny de la tauleta és de 768 × 1024.
- La mida de la llibreta és 1280 × 802.
- La mida de l'ordinador és de 1600 × 992.
A la versió mòbil del llocs'hauria de simplificar al màxim, conservant totes les funcions principals. Si s'està preparant el disseny per a una botiga en línia, amb tota la simplificació en ús, hauria de tenir una descripció principal, un catàleg de productes, una opció de comanda, un carretó de la compra, etc. - tots els elements necessaris per al funcionament complet, com amb la visualització en format complet en un ordinador. La comoditat de la versió mòbil és que aquí podeu evitar pàgines addicionals per estalviar temps en carregar.
En el contingut adaptatiu, amb codi html, podeu amagar alguns elements que realment no són necessaris. Per exemple, en alta resolució, el lloc mostra una targeta de producte amb la seva descripció, preu, informació de lliurament i la possibilitat d'afegir-la a la "Cistella". En resolució mòbil, el procés es simplifica a una foto, un preu i un botó de compra.
Les resolucions mitjanes i mínimes per al disseny responsiu haurien de tenir en compte la facilitat de lectura i visualització per part de l'usuari.
Disposició
El propòsit del disseny adaptatiu és crear un disseny flexible, o com també s'acostuma a dir: "plantilla de goma". La línia de fons no és en mides de pàgina d'un sol dígit, sinó en la compressibilitat proporcional de la plantilla per a una visualització fàcil en tots els dispositius.
Està construït principalment en CSS. Durant el desenvolupament, es determinen els punts de control de les dimensions de la pantalla. Així, es determina l'amplada dels objectes restants. Per fer-ho, l'amplada de la pàgina s'estableix mitjançant la propietat css max-width, en funció d'aquests criteris, la mida dels altres elements es selecciona com a percentatge. Per exemple, la mida del bloc a la part principalpàgina és de 600 píxels i l'amplada del bloc de la barra lateral (barra lateral del lloc) és de 400 píxels, respectivament, l'amplada del contingut serà del 60% i l'amplada de la barra lateral del 40%.
Hi ha diversos tipus de dissenys responsius. Cadascun es selecciona individualment, depenent de les característiques i la construcció.
Vistes:
- Un tipus de disseny que permet embolicar els blocs quan es redueix la resolució de la pantalla. Als llocs amb diverses columnes, els blocs addicionals es mouen a la part inferior de la pantalla.
- Quan s'elabora un patró independent per a cada permís. Aquest tipus de disseny responsiu triga més temps, però és el més llegible.
- Un tipus de disseny senzill que pretén escalar tots els elements. No és flexible.
- El tipus de panell és convenient per utilitzar-lo en aplicacions mòbils, quan apareixen funcions addicionals quan es canvia la posició de la pantalla.
La creació de capes sensibles és només una part de la feina. Les imatges adaptatives són un cas a part, que té els seus propis problemes i mètodes per resoldre'ls.
La imatge única s'ha de mostrar clarament a diferents resolucions de pantalla. Aquí hi ha un problema: com assegurar-se que la imatge sempre segueix sent la mateixa, independentment del canvi de resolució. En aquest cas, introduir un codi CSS senzill no serà suficient.
Exemple: img {amplada màxima: 250px;} - aquí hauríeu d'aplicar un mètode en què la mida del contenidor que conté la imatge sigui limitada, i no la imatge en si. Es veurà com això: div img {amplada màxima: 250px;}. Aquest mètode resol el problemadisseny d'imatges petites, però no apte per a il·lustracions grans.
Per tant, molts desenvolupadors prefereixen utilitzar llenguatges javascript que permeten adaptar qualsevol imatge sense sobrecarregar el servidor. Javascript ofereix un gran nombre d'scripts alternatius.
Pros i contres del disseny responsive
Positius:
- Desa la ubicació de tots els elements. Això és convenient quan l'usuari està acostumat a la versió completa del lloc.
- Desa els dominis i les adreces.
- Personalització completa per a altres formats de permís.
Negatius:
- S'ha perdut la flexibilitat funcional
- Qualsevol sobrecàrrega informativa està plena d'un llançament llarg d'un recurs web, que obliga molts usuaris a canviar a opcions més ràpides.
Creació d'un lloc web
L'estructura del lloc es divideix en diverses seccions i blocs. Tradicionalment, el disseny consta de la part superior del lloc (capçalera), logotip, menú, bloc de contingut i la part final del lloc (per exemple, informació de contacte detallada). Vegem com crear un disseny web responsiu a partir d'una plantilla senzilla.
Etiquetes auxiliars per escriure:
- embolcall: etiqueta que combina tots els elements de la plantilla;
- capçalera h1 - logotip;
- capçalera: capçalera del menú i altres elements importants;
- contingut - bloqueja;
- colLeft - mida del contingut;
- colRight - barra lateral (columna lateral);
- peu de pàgina: la part final del lloc;
- pantalla multimèdia - conjuntsresolució desitjada.
En escriure un lloc, aquests elements es poden moure en un ordre diferent, segons la necessitat. Per exemple, en altes resolucions, el menú es pot mostrar verticalment. A la versió mòbil, el disseny es pot crear de manera que el menú es llisqui en posició horitzontal.
- viewport: una etiqueta que us permet desar la mida del text en una versió més petita del disseny. Es troba entre les etiquetes.
- amplada màxima: per optimitzar el lloc per evitar l'estirament a resolucions superiors a 1.000 píxels.
Quan implementeu el disseny, la biblioteca jQuery ajuda molt quan necessiteu canviar l'estil i l'estructura dels blocs.
Quina diferència hi ha entre el disseny responsiu i el disseny mòbil
Per a una comprensió completa, considereu uns quants exemples il·lustratius, ja que la confusió entre aquests dos conceptes no és estranya.
Heu d'entendre que la versió mòbil és un anàleg del lloc principal amb un subdomini. La presentació externa del lloc repeteix completament l'estil i la funcionalitat, mentre que la seva estructura i contingut poden diferir de la versió principal, ja que la versió es redueix als elements necessaris.
El disseny responsive és òptim per a totes les resolucions del dispositiu. És escalable i es renderitza correctament independentment de les condicions de visualització.
Aquestes són dues presentacions diferents del lloc, al voltant de les quals disputen incansablement quina és la millor. Cal tenir en compte que encara no s'ha pres cap decisió definitiva. Algú elogia aquest disseny, assenyalant la tendència de la moda i molts avantatges. La versió mòbil també té diversos avantatges que no té el disseny responsive. Per tant, per començar, hauríeu d'entendre les necessitats bàsiques.
Avantatges
Com és millor el disseny responsiu que el mòbil?
Versatilitat. En el nostre temps, amb un creixement tan frenètic del mercat, simplement cal presentar la informació d'una altra manera, satisfent els desitjos dels consumidors. El disseny responsive soluciona aquest problema.
Promoció efectiva als motors de cerca. El que no es pot atribuir als principals avantatges d'un dispositiu adaptatiu. Els motors de cerca prefereixen oferir als usuaris llocs web responsius.
Usabilitat. El disseny responsive normalment es dissenya amb les millors solucions de disseny, que és un bon regal per a la percepció visual dels usuaris.
Fàcil i senzillesa tant en la implementació del projecte com en el seu ús.
Bones taxes de conversió. Com que amb el disseny adaptatiu hi ha més oportunitats per a la visualització, la conversió en si augmenta.
Economia. És relativament més barat que crear i promocionar una versió per a mòbils independent.
Pros i contres de la versió mòbil
Crear un disseny mòbil responsiu requereix versatilitat i coherència. En primer lloc, es recomana escriure els termes de referència amb detall, cosa que, per descomptat, ajudarà a evitar treballs innecessaris i estalviar temps, així com a tenir en compte les característiques del servidor on s'allotjarà el lloc..
El disseny responsiu per a mòbils té certs avantatges i desavantatges.
Avantatges:
- Si teniu un lloc ja fet, no cal que desenvolupeu un disseny per a la versió mòbil des de zero. Només es poden fer uns quants canvis, alliberant aquest disseny de funcionalitats no requerides.
- A causa de tot tipus de simplificacions, la versió mòbil es considera més ràpida en baixar.
- L'usuari veu la informació més important de tot el contingut.
- Implementació ràpida. Hi ha connectors amb els quals podeu implementar l'adaptació mòbil, encara que no conegueu les etiquetes i els codis.
- Les opcions del motor de cerca afavoreixen les versions adaptatives perquè triguen menys temps a analitzar-se.
Contres:
- No totes les versions mòbils poden coincidir amb les resolucions dels dispositius mòbils. El lloc, per descomptat, s'obrirà, però la resolució de la pantalla no sempre coincideix amb el disseny. De vegades, un disseny de telèfon intel·ligent ben dissenyat pot semblar diferent quan s'obre com a tauleta.
- Les versions per a mòbils requereixen dominis de pagament separats.
- Hi ha alguns problemes menors amb la publicació de contingut. Si hi ha diverses versions alhora, el contingut s'ha d'ajustar per a tots els formats alhora. L'enviament de material nou al lloc principal i copiar-lo a la versió mòbil es pot considerar robatori. Per evitar aquest problema, potser haureu de demostrar la connexió dels recursos.
Mètodes d'implementació
Mètodes d'implementació principals:
- Després de crear el disseny de dissenys i maquetació, es carrega a les dimensions requerides mitjançantlloc de l'operador i codi principal. Aquest és un mètode clàssic utilitzat per crear versions mitjanes i petites (tauletes, telèfons intel·ligents, etc.).
- BootStrap és un conjunt senzill i clar d'eines d'adaptació. Apte per crear versions per a Landing Page i altres projectes web poc complexos. Ofereix una bona oportunitat per aplicar molts estils diferents a les funcions d'interfície.
- Responsive Grid System és un popular conjunt d'eines versàtils. Fàcil d'aplicar i no requereix coneixements profunds. Inclou una gran varietat d'infografia.
- GUMBY: un marc CSS que ofereix una capacitat de resposta flexible i una excel·lent eina.
- Cookies: us permet implementar imatges sensibles. Acompanya automàticament els fitxers sol·licitats pel navegador.
- ExpressionEngine és una altra manera de crear imatges sensibles. Determina si el dispositiu és mòbil, capaç de canviar les imatges a la resolució requerida.
- ProtoFluid - Proporciona prototips ràpids. Apte per a tot tipus de dispositius.
