Adaptief website-ontwerp is een handig systeem om dezelfde website op verschillende soorten apparaten online weer te geven. In eenvoudige bewoordingen is dit de mogelijkheid om één webpagina te bekijken op een laptop, smartphone en andere gadgets.
Webresponsiviteit is een noodzaak geworden sinds mensen internet-enabled gadgets van verschillende formaten hebben gekregen. Bedrijven, online winkels en zelfs alleen maar informatieve sites streven ernaar om hun publiek te plezieren en passen zich er op alle mogelijke manieren aan aan. Responsief ontwerp lost het gemaksprobleem op, daarom is het een onmisbaar werkitem.
Kenmerken van responsive webdesign
Het gemak van design wordt gekenmerkt door verschillende hoofdcriteria.
- Maat. Responsief website-ontwerp moet kleine verschillen vertonen bij het weergeven van de pagina op verschillende apparaten, dus de afmetingen van afbeeldingen, tekst en andere elementen die worden bekeken, moeten overeenkomen met de afmetingen van de apparaten zelf. Om dit te doen passen webontwikkelaars het ontwerp aan zodat het meerdere weergaveversies heeft.
- Contentaanpassing. Materiaal dat de site vult (afbeeldingen, video'sen andere multimedia-elementen) moeten ook overeenkomen met de vereiste schermresoluties zonder de kwaliteit van het scherm te verliezen.
- Ontwerpflexibiliteit. Opname in de ontwikkeling van elementen waarmee u het ontwerp van de site snel kunt aanpassen wanneer u de webpagina die u bekijkt, wijzigt. De gebruiker bladert bijvoorbeeld op en neer door de pagina, navigeert door verschillende secties of verandert de schermpositie van verticaal naar horizontaal en vice versa.
- Vereenvoudig items per apparaat voor betere bruikbaarheid.
- Verberg onbelangrijke blokken op kleinere schermen.
Basis
Websites bouwen is zeker gerelateerd aan programmeertalen, want je kunt gewoon niet zonder. Met behulp van HTML en CSS herkent de browser de samenstelling en volgorde van objecten (teksten, illustraties, video's) - zo wordt de site gevormd.
CSS is verantwoordelijk voor kleur, stijlen, formaten, lettertypen, uitlijningen, opvulling, achtergrondelementen, formulieren, enz. HTML is verantwoordelijk voor de algehele inhoud en structuur van de site. Zo wordt een webresource opgebouwd uit het geheel van de twee belangrijkste beschrijvingsmethoden.
CSS daarentegen is een onmisbare ontwerptool. Heeft een groot aantal functies die superieur zijn aan HTML:
- Biedt ontwerpconsistentie over meerdere pagina's, het uiterlijk van de site en regelt de weergave van HTML-documenten.
- Geeft u de mogelijkheid om tegelijkertijd ontwerp en inhoud te doen.
- Past meerdere stijlen toe en de mogelijkheid ombekijken op verschillende apparaten.
- Maakt complexe ontwerpbeslissingen.
- Gekenmerkt door hoge snelheid.
Om een website te ontwikkelen, moet je enkele basisconcepten kennen.
Een CSS-selector wordt aangeduid met de naam van een stijl die eigenschappen en opmaakopties definieert. Het vertelt de browser op welk specifiek element de eigenschappen van toepassing zijn.
Een eigendom is een structurele eenheid. Het definieert externe parameters (grootte, locatie, kleur, vorm, enz.) en wordt uitgedrukt in een specifieke code.
Er is een reeks gedefinieerde CSS-eigenschappen die een enkel object beschrijven in uiterlijk en locatie.
Samen vormen deze elementen het volgende schema:
Selector { eigenschap1: waarde; eigendom2; waarde }.
Lay-outformaten en resoluties
Ontwerpontwikkeling begint met de voorbereiding van de lay-out in Photoshop of andere grafische programma's. Voor het gemak worden speciale markeringen van het modulaire raster in het canvas geïntroduceerd, speciale inkepingen worden waargenomen. Zo toont de webdesigner de lay-outontwerper de principes van het structureren van de toekomstige site en de juiste opstelling van webelementen.
Responsieve webontwerpresoluties en -formaten voor de belangrijkste apparaattypen:
- Dit ontwerp voldoet aan het principe om met mobiele toestemming aan het werk te gaan. De lay-out voor de smartphone is gemaakt in de grootte van 460 × 960 px.
- De grootte van de tabletlay-out is 768 × 1024.
- De grootte van het notebook is 1280 × 802.
- PC-grootte is 1600 × 992.
In de mobiele versie van de sitemoet zo vereenvoudigd mogelijk zijn, met behoud van alle hoofdfuncties. Als de lay-out wordt voorbereid voor een online winkel, met alle vereenvoudiging in gebruik, moet deze een hoofdbeschrijving, een productcatalogus, een besteloptie, een winkelwagentje, enz. hebben - alle noodzakelijke elementen voor een volwaardige werking, zoals bij weergave op volledig formaat op een pc. Het gemak van de mobiele versie is dat je hier extra pagina's kunt vermijden om tijd te besparen bij het laden.
In adaptieve inhoud kunt u met behulp van html-code enkele elementen verbergen die niet echt nodig zijn. In hoge resolutie toont de site bijvoorbeeld een productkaart met de beschrijving, prijs, leveringsinformatie en de mogelijkheid om toe te voegen aan het "mandje". In mobiele resolutie is het proces vereenvoudigd tot een foto, een prijs en een koopknop.
Gemiddelde en minimale resoluties voor responsief ontwerp moeten rekening houden met het gemak van lezen en bekijken door de gebruiker.
Lay-out
Het doel van adaptieve ontwerplay-out is om een flexibele lay-out te creëren, of zoals het ook gebruikelijk is: "rubbersjabloon". De bottom line is niet in eencijferige paginagrootte, maar in de proportionele samendrukbaarheid van de sjabloon voor gemakkelijke weergave op alle apparaten.
Het is voornamelijk gebouwd op CSS. Tijdens de ontwikkeling worden controlepunten van schermafmetingen bepaald. Zo wordt de breedte van de overige objecten bepaald. Om dit te doen, wordt de breedte van de pagina bepaald door de css max-width eigenschap, afhankelijk van deze criteria wordt de grootte van andere elementen geselecteerd als een percentage. Bijvoorbeeld de blokgrootte op de mainpagina is 600px en de breedte van het zijbalkblok (sitezijbalk) is respectievelijk 400px, de inhoudsbreedte is 60% en de zijbalkbreedte 40%.
Er zijn verschillende soorten responsieve lay-outs. Elk wordt afzonderlijk geselecteerd, afhankelijk van de kenmerken en constructie.
Views:
- Een lay-outtype waarmee blokken kunnen worden teruggelopen wanneer de schermresolutie wordt verlaagd. Op sites met meerdere kolommen worden extra blokken naar de onderkant van het scherm verplaatst.
- Wanneer voor elke toestemming een apart patroon wordt uitgewerkt. Dit type responsief ontwerp duurt langer, maar is het meest leesbaar.
- Een eenvoudig type ontwerp dat erop gericht is alle elementen te schalen. Het is niet flexibel.
- Het paneeltype is handig voor gebruik in mobiele toepassingen, wanneer extra functies verschijnen bij het wijzigen van de positie van het scherm zelf.
Het maken van responsieve lagen is slechts een deel van het werk. Adaptieve afbeeldingen zijn een apart geval, dat zijn eigen problemen en methoden heeft om ze op te lossen.
Enkele afbeelding moet duidelijk worden weergegeven bij verschillende schermresoluties. Er is hier een probleem - hoe ervoor te zorgen dat het beeld altijd hetzelfde blijft, ongeacht de verandering in resolutie. Het invoeren van een eenvoudige CSS-code is in dit geval niet voldoende.
Voorbeeld: img {max-width: 250px;} - hier moet u een methode toepassen waarbij de grootte van de container die de afbeelding bevat, beperkt is, en niet de afbeelding zelf. Het ziet er ongeveer zo uit: div img {max-width: 250px;}. Deze methode lost het probleem oplay-out van kleine afbeeldingen, maar niet geschikt voor grote illustraties.
Daarom geven veel ontwikkelaars de voorkeur aan javascript-talen waarmee je elke afbeelding kunt aanpassen zonder de server te overbelasten. Javascript biedt een groot aantal alternatieve scripts.
Voor- en nadelen van een responsieve lay-out
Positieven:
- Sla de locatie van alle elementen op. Dit is handig wanneer de gebruiker gewend is aan de volledige versie van de site.
- Bewaar domeinen en adressen.
- Volledige aanpassing voor andere machtigingsformaten.
Negatieven:
- Functionele flexibiliteit gaat verloren
- Elke informatieve overbelasting gaat gepaard met een lange lancering van een webbron, waardoor veel gebruikers gedwongen worden over te schakelen naar snellere opties.
Een website maken
De sitestructuur is verdeeld in verschillende secties en blokken. Traditioneel bestaat de lay-out uit het bovenste deel van de site (header), logo, menu, inhoudsblok en het laatste deel van de site (bijvoorbeeld gedetailleerde contactgegevens). Laten we eens kijken hoe we een responsief website-ontwerp kunnen maken op basis van een eenvoudige sjabloon.
Extra tags voor schrijven:
- wrapper - tag die alle sjabloonelementen combineert;
- header h1 - logo;
- header - koptekst voor menu en andere belangrijke elementen;
- content - blokkeren;
- colLeft - inhoudsgrootte;
- colRight - zijbalk (zijkolom);
- footer - het laatste deel van de site;
- mediascherm - setsgewenste resolutie.
Bij het schrijven van een site kunnen deze elementen in een andere volgorde worden verplaatst, afhankelijk van de behoefte. Bij hoge resoluties kan het menu bijvoorbeeld verticaal worden weergegeven. In de mobiele versie kan de lay-out zo worden gebouwd dat het menu horizontaal naar buiten schuift.
- viewport - een tag waarmee u de grootte van de tekst in een kleinere versie van het ontwerp kunt opslaan. Het bevindt zich tussen de tags.
- max-width - om de site te optimaliseren om uitrekken te voorkomen bij resoluties van meer dan 1000 pixels.
Bij het implementeren van de lay-out helpt de jQuery-bibliotheek veel wanneer je de stijl en structuur van de blokken moet veranderen.
Wat is het verschil tussen responsief en mobiel ontwerp
Beschouw voor een volledig begrip een paar illustratieve voorbeelden, aangezien verwarring tussen deze twee concepten niet ongewoon is.
Je moet begrijpen dat de mobiele versie een analoog is van de primaire site met een subdomein. De externe presentatie van de site herha alt volledig de stijl en functionaliteit, terwijl de structuur en inhoud kunnen verschillen van de hoofdversie, aangezien de versie is teruggebracht tot de noodzakelijke elementen.
Responsief ontwerp is optimaal voor alle apparaatresoluties. Het is schaalbaar en wordt correct weergegeven, ongeacht de kijkomstandigheden.
Dit zijn twee verschillende presentaties van de site, waarover onophoudelijk wordt gediscussieerd over welke beter is. Opgemerkt moet worden dat er nog geen definitieve beslissing is genomen. Iemand prijst dit ontwerp en wijst op de modetrend en veel voordelen. De mobiele versie heeft ook een aantal voordelen die responsive design niet heeft. Daarom moet u om te beginnen de basisbehoeften begrijpen.
Voordelen
Hoe is responsive design beter dan mobiel?
Veelzijdigheid. In onze tijd, met zo'n waanzinnige groei van de markt, is het gewoon nodig om informatie op een andere manier te presenteren, om aan de wensen van de consument te voldoen. Responsief ontwerp lost dit probleem op.
Effectieve promotie in zoekmachines. Wat niet kan worden toegeschreven aan de belangrijkste voordelen van een adaptief apparaat. Zoekmachines geven gebruikers de voorkeur aan responsieve websites.
Gebruiksgemak. Responsief ontwerp wordt meestal ontworpen in de beste ontwerpoplossingen, wat een leuk cadeau is voor de visuele perceptie van gebruikers.
Gemak en eenvoud, zowel bij de uitvoering van het project als bij het gebruik.
Goede conversiepercentages. Omdat er met adaptief ontwerp meer mogelijkheden zijn voor weergave, neemt de conversie zelf toe.
Economie. Het is relatief goedkoper dan het maken en promoten van een aparte mobiele versie.
Voor- en nadelen van de mobiele versie
Het maken van een responsief mobiel ontwerp vereist veelzijdigheid en consistentie. Allereerst wordt aanbevolen om de referentievoorwaarden in detail uit te schrijven, wat natuurlijk zal helpen om onnodig werk te voorkomen en tijd te besparen, evenals rekening te houden met de functies van de server waarop de site zal worden gehost.
Er zijn bepaalde voor- en nadelen aan mobiel responsief ontwerp.
Voors:
- Als je een kant-en-klare site hebt, is het niet nodig om helemaal opnieuw een ontwerp voor de mobiele versie te ontwikkelen. Er kunnen slechts een paar wijzigingen worden aangebracht, waardoor deze lay-out wordt bevrijd van onnodige functionaliteit.
- Door allerlei vereenvoudigingen wordt de mobiele versie als sneller beschouwd bij het downloaden.
- De gebruiker ziet het belangrijkste stukje informatie in alle inhoud.
- Snelle implementatie. Er zijn plug-ins waarmee je mobiele aanpassingen kunt doorvoeren, ook als je geen tags en codes kent.
- Zoekmachinekeuzes geven de voorkeur aan adaptieve versies omdat ze minder tijd nodig hebben om te analyseren.
Nadelen:
- Niet alle mobiele versies komen mogelijk overeen met de resoluties van mobiele apparaten. De site wordt natuurlijk wel geopend, maar de schermresolutie komt niet altijd overeen met de lay-out. Soms kan een goed ontworpen smartphone-ontwerp er anders uitzien als het als tablet wordt geopend.
- Mobiele versies vereisen aparte betaalde domeinen.
- Er zijn enkele kleine problemen met het plaatsen van inhoud. Als er meerdere versies tegelijk zijn, moet de inhoud voor alle formaten tegelijk worden aangepast. Het indienen van nieuw materiaal op de hoofdsite en het kopiëren naar de mobiele versie kan als stelen worden beschouwd. Om dit probleem te voorkomen, moet u mogelijk de verbinding van bronnen bewijzen.
Implementatiemethoden
Belangrijkste implementatiemethoden:
- Na het maken van het ontwerp van lay-outs en lay-out, wordt het geladen tot de vereiste afmetingen met behulp vanoperator site en hoofdcode. Dit is een klassieke methode die wordt gebruikt bij het maken van middelgrote en kleine versies (tablets, smartphones, enz.).
- BootStrap is een eenvoudige en duidelijke set aanpassingstools. Geschikt voor het maken van versies voor Landing Page en andere niet erg complexe webprojecten. Het biedt een goede mogelijkheid om veel verschillende stijlen toe te passen in interfacefuncties.
- Responsive Grid System is een populaire set van veelzijdige tools. Eenvoudig toe te passen en vereist geen diepgaande kennis. Bevat een breed scala aan infographics.
- GUMBY - Een CSS-framework met flexibele responsiviteit en geweldige tooling.
- Cookies - hiermee kunt u responsieve afbeeldingen implementeren. Vergezelt automatisch bestanden die door de browser worden aangevraagd.
- ExpressionEngine is een andere manier om responsieve afbeeldingen te maken. Bepa alt of het apparaat mobiel is en afbeeldingen kan wijzigen in de vereiste resolutie.
- ProtoFluid - Biedt snelle prototyping. Geschikt voor alle soorten apparaten.
