Aanpasbare webwerf-ontwerp is 'n gerieflike stelsel om dieselfde webwerf op verskillende soorte toestelle aanlyn te vertoon. In eenvoudige terme is dit die vermoë om een webbladsy op 'n skootrekenaar, slimfoon en ander toerusting te bekyk.
Webresponsiwiteit het 'n noodsaaklikheid geword vandat mense internet-geaktiveerde toestelle van verskillende formate gekry het. Maatskappye, aanlynwinkels en selfs net insiggewende werwe streef daarna om hul gehoor te behaag, en pas op elke moontlike manier daarby aan. Responsiewe ontwerp los die probleem van gerief op, daarom is dit 'n onontbeerlike werkitem.
Kenmerke van responsiewe webontwerp
Die gerief van ontwerp word gekenmerk deur verskeie hoofkriteria.
- Grootte. Responsiewe webwerf-ontwerp moet geringe verskille hê wanneer die bladsy op verskillende toestelle vertoon word, so die groottes van prente, teks en ander elemente wat bekyk word, moet ooreenstem met die groottes van die toestelle self. Om dit te doen, pas webontwikkelaars die ontwerp aan sodat dit verskeie weergawes het.
- Inhoudaanpassing. Materiaal wat die webwerf vul (prente, video'sen ander multimedia-elemente) moet ook by die vereiste skermresolusies pas sonder om die kwaliteit van die skerm te verloor.
- Ontwerp buigsaamheid. Insluiting in die ontwikkeling van elemente wat jou toelaat om die ontwerp van die webwerf vinnig aan te pas wanneer jy die webblad wat jy bekyk verander. Die gebruiker blaai byvoorbeeld die bladsy op en af, navigeer deur verskillende afdelings, of verander die skermposisie van vertikaal na horisontaal en omgekeerd.
- Vereenvoudig items volgens toestel vir beter bruikbaarheid.
- Versteek onbelangrike blokke op kleiner skerms.
Basies
Webwerfbou hou beslis verband met programmeertale, want jy kan eenvoudig nie daarsonder klaarkom nie. Deur HTML en CSS te gebruik, herken die blaaier die samestelling en volgorde van voorwerpe (tekste, illustrasies, video's) - dit is hoe die webwerf gevorm word.
CSS is verantwoordelik vir kleur, style, groottes, lettertipes, belynings, opvulling, agtergrondelemente, vorms, ens. HTML is verantwoordelik vir die algehele inhoud en struktuur van die webwerf. Dus word 'n webhulpbron gebou in die samestelling van die twee belangrikste beskrywingsmetodes.
CSS, aan die ander kant, is 'n onontbeerlike ontwerphulpmiddel. Het 'n groot stel kenmerke wat beter is as HTML:
- Verskaf ontwerpkonsekwentheid oor veelvuldige bladsye, werfvoorkoms, en beheer die vertoon van HTML-dokumente.
- Gee jou die geleentheid om ontwerp en inhoud op dieselfde tyd te doen.
- Pas veelvuldige style toe en die vermoë omkyk op verskillende toestelle.
- Neem komplekse ontwerpbesluite.
- Gekenmerk deur hoë spoed.
Om 'n webwerf te ontwikkel, moet jy 'n paar basiese konsepte ken.
'n CSS-kieser word aangedui deur die naam van 'n styl wat eienskappe en formateringopsies definieer. Dit vertel die blaaier op watter spesifieke element die eienskappe van toepassing is.
'n Eiendom is 'n strukturele eenheid. Dit definieer eksterne parameters (grootte, ligging, kleur, vorm, ens.) en word in 'n spesifieke kode uitgedruk.
Daar is 'n stel gedefinieerde CSS-eienskappe wat 'n enkele voorwerp in voorkoms en ligging beskryf.
Saam vorm hierdie elemente die volgende skema:
Selekter { eiendom1: waarde; eiendom2; waarde }.
Uitleggroottes en resolusies
Ontwerpontwikkeling begin met die voorbereiding van die uitleg in Photoshop of ander grafiese programme. Vir gerief word spesiale merke van die modulêre rooster in die doek ingebring, spesiale inkepings word waargeneem. Dus, die webontwerper wys die uitlegontwerper die beginsels van die strukturering van die toekomstige webwerf en die korrekte rangskikking van webelemente.
Responsiewe webontwerpresolusies en -groottes vir hooftoesteltipes:
- Hierdie ontwerp voldoen aan die beginsel om met mobiele toestemming te begin werk. Die uitleg vir die slimfoon is geskep in die grootte van 460 × 960 px.
- Tabletuitleggrootte is 768 × 1024.
- Notaboekgrootte is 1280 × 802.
- PC-grootte is 1600 × 992.
In die mobiele weergawe van die webwerfmoet so vereenvoudig as moontlik wees, terwyl al die hooffunksies behou word. As die uitleg voorberei word vir 'n aanlyn winkel, met al die vereenvoudiging in gebruik, moet dit 'n hoofbeskrywing, 'n produkkatalogus, 'n bestelopsie, 'n inkopiemandjie, ens. hê - al die nodige elemente vir volwaardige funksionering, soos met volformaat kyk op 'n rekenaar. Die gerief van die mobiele weergawe is dat jy hier ekstra bladsye kan vermy om tyd te bespaar wanneer jy laai.
In aanpasbare inhoud, met behulp van html-kode, kan jy sommige elemente versteek wat nie regtig nodig is nie. Byvoorbeeld, teen hoë resolusie vertoon die webwerf 'n produkkaart met sy beskrywing, prys, afleweringsinligting en die vermoë om by die "mandjie" te voeg. In mobiele resolusie word die proses vereenvoudig tot 'n foto, 'n prys en 'n koopknoppie.
Medium en minimum resolusies vir responsiewe ontwerp moet die gemak van lees en kyk deur die gebruiker in ag neem.
uitleg
Die doel van aanpasbare ontwerp-uitleg is om 'n buigsame uitleg te skep, of soos dit ook gebruiklik is om te sê: "rubber sjabloon". Die onderste lyn is nie in enkelsyfer-bladsygroottes nie, maar in die proporsionele saamdrukbaarheid van die sjabloon vir maklike besigtiging op alle toestelle.
Dit is hoofsaaklik op CSS gebou. Tydens ontwikkeling word beheerpunte van skermafmetings bepaal. So word die breedte van die oorblywende voorwerpe bepaal. Om dit te doen, word die breedte van die bladsy gestel deur die css max-width eienskap, afhangende van hierdie kriteria, word die grootte van ander elemente as 'n persentasie gekies. Byvoorbeeld, die blok grootte op die hoofbladsy is 600px, en die breedte van die sybalkblok (werfsybalk) is onderskeidelik 400px, die inhoudwydte sal 60% wees, en die sybalkwydte 40%.
Daar is verskeie tipes responsiewe uitlegte. Elkeen word individueel gekies, afhangend van die kenmerke en konstruksie.
Views:
- 'n Uitlegtipe wat blokke toelaat om te draai wanneer skermresolusie verminder word. Op multikolomwerwe word bykomende blokke na die onderkant van die skerm geskuif.
- Wanneer 'n aparte patroon vir elke toestemming uitgewerk word. Hierdie tipe responsiewe ontwerp neem langer, maar is die leesbaarste.
- 'n Eenvoudige tipe ontwerp wat daarop gemik is om alle elemente te skaal. Dit is nie buigsaam nie.
- Die paneeltipe is gerieflik vir gebruik in mobiele toepassings, wanneer bykomende funksies verskyn wanneer die posisie van die skerm self verander word.
Die skep van responsiewe lae is slegs een deel van die werk. Aanpasbare beelde is 'n aparte geval, wat sy eie probleme en metodes het om dit op te los.
Enkel beeld moet duidelik by verskillende skermresolusies vertoon word. Hier is 'n probleem - hoe om seker te maak dat die prentjie altyd dieselfde bly, ongeag die verandering in resolusie. Om 'n eenvoudige CSS-kode in te voer in hierdie geval sal nie genoeg wees nie.
Voorbeeld: img {max-width: 250px;} - hier moet jy 'n metode toepas waarin die grootte van die houer wat die prent bevat, beperk is, en nie die prent self nie. Dit sal iets soos volg lyk: div img {max-width: 250px;}. Hierdie metode los die probleem opuitleg van klein prente, maar nie geskik vir groot illustrasies nie.
Daarom verkies baie ontwikkelaars om javascript-tale te gebruik wat jou toelaat om enige beeld aan te pas sonder om die bediener te oorlaai. Javascript bied 'n groot aantal alternatiewe skrifte.
Voor- en nadele van responsiewe uitleg
Positiewe:
- Stoor die ligging van alle elemente. Dit is gerieflik wanneer die gebruiker gewoond is aan die volledige weergawe van die webwerf.
- Stoor domeine en adresse.
- Volledige aanpassing vir ander toestemmingformate.
Negatiewe:
- Funksionele buigsaamheid is verlore
- Enige insiggewende oorlading is belaai met 'n lang bekendstelling van 'n webhulpbron, wat baie gebruikers dwing om na vinniger opsies oor te skakel.
Skep 'n webwerf
Die werfstruktuur is in verskeie afdelings en blokke verdeel. Tradisioneel bestaan die uitleg uit die boonste deel van die webwerf (kopskrif), logo, spyskaart, inhoudblok en die laaste deel van die webwerf (byvoorbeeld gedetailleerde kontakinligting). Kom ons kyk hoe om 'n responsiewe webwerf-ontwerp van 'n eenvoudige sjabloon te maak.
Hulpmerkers vir skryf:
- wrapper - merker wat alle sjabloonelemente kombineer;
- header h1 - logo;
- header - kopskrif vir spyskaart en ander belangrike elemente;
- inhoud - blok;
- colLeft - inhoudgrootte;
- colRight - sybalk (sykolom);
- voetskrif - die laaste deel van die webwerf;
- mediaskerm - stelleverlangde resolusie.
Wanneer 'n webwerf geskryf word, kan hierdie elemente in 'n ander volgorde beweeg, afhangende van die behoefte. Byvoorbeeld, by hoë resolusies kan die spyskaart vertikaal vertoon word. In die mobiele weergawe kan die uitleg so gebou word dat die spyskaart in 'n horisontale posisie sal uitgly.
- viewport - 'n merker wat jou toelaat om die grootte van die teks in 'n kleiner weergawe van die ontwerp te stoor. Dit is geleë tussen die merkers.
- max-width - om die werf te optimaliseer om te verhoed dat dit strek teen resolusies van meer as 1000 pieksels.
Wanneer jy die uitleg implementeer, help die jQuery-biblioteek baie wanneer jy die styl en struktuur van die blokke moet verander.
Wat is die verskil tussen responsiewe en mobiele ontwerp
Vir 'n volledige begrip, oorweeg 'n paar illustratiewe voorbeelde, aangesien verwarring tussen hierdie twee konsepte nie ongewoon is nie.
Jy moet verstaan dat die mobiele weergawe 'n analoog is van die primêre werf met 'n subdomein. Die eksterne aanbieding van die webwerf herhaal die styl en funksionaliteit heeltemal, terwyl die struktuur en inhoud daarvan van die hoofweergawe kan verskil, aangesien die weergawe afgesny is tot die nodige elemente.
Responsiewe ontwerp is optimaal vir alle toestelresolusies. Dit is skaalbaar en lewer korrek weer ongeag kyktoestande.
Hierdie is twee verskillende aanbiedings van die webwerf, waaroor dispute onvermoeid woed watter een is beter. Daar moet kennis geneem word dat geen definitiewe besluit nog geneem is nie. Iemand prys hierdie ontwerp en wys die modetendens en baie voordele uit. Die mobiele weergawe het ook verskeie voordele wat responsiewe ontwerp nie het nie. Daarom, om mee te begin, moet jy die basiese behoeftes verstaan.
Voordele
Hoe is responsiewe ontwerp beter as selfoon?
Veelsydigheid. In ons tyd, met so 'n waansinnige groei van die mark, is dit eenvoudig nodig om inligting op 'n ander manier aan te bied, wat die wense van verbruikers bevredig. Responsiewe ontwerp los hierdie probleem op.
Doeltreffende promosie in soekenjins. Wat kan nie toegeskryf word aan die belangrikste voordele van 'n aanpasbare toestel nie. Soekenjins verkies om gebruikers responsiewe webwerwe te gee.
Gebruikbaarheid. Responsiewe ontwerp word gewoonlik in die beste ontwerpoplossings ontwerp, wat 'n lekker geskenk is vir die visuele persepsie van gebruikers.
Gemak en eenvoud in beide die implementering van die projek en in die gebruik daarvan.
Goeie sukseskoerse. Aangesien daar met aanpasbare ontwerp meer geleenthede vir vertoon is, neem die omskakeling self toe.
Ekonomie. Dit is relatief goedkoper as om 'n aparte mobiele weergawe te skep en te bevorder.
Voor- en nadele van die mobiele weergawe
Om 'n responsiewe mobiele ontwerp te skep, vereis veelsydigheid en konsekwentheid. Eerstens word dit aanbeveel om die verwysingsvoorwaardes in detail uit te skryf, wat natuurlik sal help om onnodige werk te vermy en tyd te bespaar, asook om die kenmerke van die bediener waarop die webwerf gehuisves sal word, in ag te neem..
Daar is sekere voordele en nadele aan mobiele responsiewe ontwerp.
Voordele:
- As jy 'n klaargemaakte webwerf het, hoef jy nie van nuuts af 'n ontwerp vir die mobiele weergawe te ontwikkel nie. Slegs 'n paar veranderinge kan gemaak word, wat hierdie uitleg bevry van onnodige funksionaliteit.
- Weens allerhande vereenvoudigings word die mobiele weergawe as vinniger beskou wanneer dit afgelaai word.
- Die gebruiker sien die belangrikste stukkie inligting in alle inhoud.
- Vinnige implementering. Daar is inproppe waarmee jy mobiele aanpassing kan implementeer, selfs al ken jy nie merkers en kodes nie.
- Soekenjinkeuses bevoordeel aanpasbare weergawes omdat dit minder tyd neem om te ontleed.
Nadele:
- Nie alle mobiele weergawes mag ooreenstem met mobiele toestel-resolusies nie. Die webwerf sal natuurlik oopmaak, maar die skermresolusie stem nie altyd ooreen met die uitleg nie. Soms kan 'n goed ontwerpte slimfoonontwerp anders lyk wanneer dit as 'n tablet oopgemaak word.
- Mobiele weergawes vereis aparte betaalde domeine.
- Daar is 'n paar klein probleme met die plasing van inhoud. As daar verskeie weergawes gelyktydig is, moet die inhoud gelyktydig vir alle formate aangepas word. Om nuwe materiaal op die hoofwebwerf in te dien en dit na die mobiele weergawe te kopieer, kan as steel beskou word. Om hierdie probleem te vermy, moet jy dalk die verbinding van hulpbronne bewys.
metodes van implementering
Belangrikste implementeringsmetodes:
- Nadat die ontwerp van uitlegte en uitleg geskep is, word dit na die vereiste afmetings gelaai met behulp vanoperateur webwerf en hoofkode. Dit is 'n klassieke metode wat gebruik word wanneer medium en klein weergawes geskep word (tablette, slimfone, ens.).
- BootStrap is 'n eenvoudige en duidelike stel aanpassingshulpmiddels. Geskik vir die skep van weergawes vir Landing Page en ander nie baie komplekse webprojekte nie. Dit gee 'n goeie geleentheid om baie verskillende style in koppelvlakfunksies toe te pas.
- Responsive Grid System is 'n gewilde stel veelsydige gereedskap. Maklik om toe te pas en vereis nie diepgaande kennis nie. Sluit 'n wye verskeidenheid infografika in.
- GUMBY - 'n CSS-raamwerk wat spog met buigsame reaksie en uitstekende gereedskap.
- Koekies - laat jou toe om responsiewe beelde te implementeer. Vergesel outomaties lêers wat deur die blaaier versoek is.
- ExpressionEngine is nog 'n manier om responsiewe beelde te skep. Bepaal of die toestel mobiel is en in staat is om beelde na die vereiste resolusie te verander.
- ProtoFluid - Verskaf vinnige prototipering. Geskik vir alle soorte toestelle.
