Gegroet, toevallige bezoekers en vaste lezers van de blogsite!

Tijdens het bestaan ​​van deze site heb ik de sjabloon verschillende keren gewijzigd en zelfs mijn eigen sjabloon helemaal opnieuw gemaakt.
Een van de belangrijkste taken bij het kiezen van een nieuwe sjabloon is de adaptieve lay-out van de site voor alle schermresoluties.

Korte schets van het artikel:

In een eerder artikel schreef ik al waarom en waarom het nodig is. Maar hoe bereik je dit aanpassingsvermogen?

Hiervoor is er verschillende manieren. Sommigen gebruiken javascript, sommigen gebruiken iets anders. Maar ik geloof dat de eenvoudigste en de juiste manier is een adaptief met behulp van CSS.

Hoe u een responsieve website-indeling kunt maken

Ten eerste, als u een responsief website-ontwerp wilt maken, tussen de tags plak de volgende code:

Wat een dwaas was ik dat ik dit niet meteen deed toen ik probeerde een adaptieve website-indeling te maken!!!
Het probleem met mobiele browsers is de schaalvergroting van de website-indeling, zelfs adaptieve browsers.

Stel je voor, ik teken een ontwerp, noteer vervolgens alle benodigde stijlen en vragen en controleer wanneer de site kan worden aangepast verschillende resoluties. Alles lijkt in orde te zijn! Maar als ik mijn blog op mijn smartphone open, zie ik dat de site simpelweg gekrompen is. Het paste zich niet aan het mobiele apparaat aan, maar verkleinde eenvoudigweg de grootte van het lettertype, afbeeldingen, enz.

Hoe zo? Ik begon alle stijlen nogmaals te controleren om te zien of ik de klassen correct had geschreven, en kwam uiteindelijk op het punt waarop ik de breedte van het browservenster in px controleerde met behulp van javascript. Ik was geschokt. Bij het controleren op een laptop kreeg ik een resultaat van 1024px, en ik kreeg ongeveer hetzelfde resultaat bij het openen van de site op een smartphone!

Maar dit kan niet zo zijn!

Blijkt, als je de code die ik hierboven heb aangegeven niet schrijft, begrijpt de mobiele browser niet dat de site responsief is en probeert eenvoudigweg de sitepagina te verkleinen zodat deze erin past klein scherm mobiele telefoon

Door mijn domheid en incompetentie verloor ik veel tijd. Maar nu herinner ik het voor altijd))).

Adaptieve lay-out CSS-mediaquery's

Om het responsief te maken met CSS, moet je mediaquery's gebruiken.

Hoe is dat? Ja, heel simpel. IN CSS-bestand je moet queries schrijven zoals:

@mediascherm en (min. breedte: 1440px) en (max. breedte: 1599px)( )

Deze code betekent dat stijlen tussen “()” werken voor schermen met een minimale breedte van 1440px en een maximum van 1599px.

Dat wil zeggen dat de stijlen van site-elementen die afhankelijk van de schermresolutie moeten worden aangepast, voor elke mogelijke schermbreedte afzonderlijk moeten worden geschreven.

De belangrijkste schermresoluties voor adaptieve lay-out

• 320px- Mobiele apparaten (portretoriëntatie);
• 480px- Mobiele apparaten (liggende oriëntatie);
• 600px- Kleine tabletten;
• 768px- Tablets (portretoriëntatie);
• 1024px- Tablets (liggend)/netbooks;
• 1280 px of meer- PC.

Het zijn deze toestemmingen die benadrukt en gegeven moeten worden speciale aandacht met adaptieve lay-out. Dit zijn de meest voorkomende soorten schermresoluties.

bootstrap-responsief ontwerp

Zeer handig in gebruik voor het maken van adaptieve bootstrap-indeling. Het gemak is dat alle stijlen voor het aanpassen van blokken, knoppen, tabellen etc. zijn al geregistreerd in bootstpap. U hoeft alleen maar uit te zoeken welke klasse u aan welk element wilt toewijzen.

Om aan de slag te gaan, downloadt u de nieuwste versie van bootstrap en koppelt u deze aan uw site. Houd er rekening mee dat het verbinden van stijlen en scripts met WordPress zijn eigen kenmerken heeft.

De lay-out op bootstrap verschilt doordat de breedte van het blok of scherm wordt gedeeld door 12 gelijke delen. En door een bepaalde klasse aan een blok toe te kennen, kun je de breedte van het blok gelijkstellen aan het benodigde aantal onderdelen.

Met dit ontwerp kunt u bijvoorbeeld één breed blok toewijzen voor inhoud van 8 delen breed en één smal blok voor een zijbalk van 4 delen breed:

De breedte van de blokken wordt automatisch berekend, afhankelijk van de breedte van het scherm. En wanneer ze op een mobiel apparaat worden bekeken, zullen deze blokken onder elkaar verschuiven.

Ook kunt u de afstand van het blok tot de rand weer aanpassen aan het benodigde aantal onderdelen. Dit ontwerp bijvoorbeeld:

Er wordt een blok van 10 delen breed gemaakt met een linkerinspringing van 1 deel van het scherm.

Als je ernaar kijkt, maakt het werken met bootstrap het werk erg snel. Bovendien werken deze stijlen zeker correct en zal er niets scheef op de site staan.

In de toekomst ben ik van plan verschillende lessen te plaatsen over het werken met bootsrap. Daarom raad ik je aan dit moment niet te missen.

Aanpasbaarheid van de website controleren

Maar de vraag rijst: hoe controleer je het aanpassingsvermogen van de website? Nu heb je mediaquery's in CSS geschreven, bootstrap verbonden en de nodige klassen gebruikt. Hoe kun je controleren of de site zich correct aanpast bij alle schermresoluties?

Zeer nauwkeurig en vooral gratis dienst, dat respect en dankbaarheid verdient van webmasters en lay-outontwerpers die zich ermee bezighouden adaptieve indeling sites.

Nou, wat vind je van het artikel? Is alles duidelijk? Zo niet, schrijf dan in de reacties, dan komen we er samen wel uit.

Ja, om een ​​responsief website-ontwerp te maken, moet je hard werken. Maar deze inspanningen zullen worden beloond met een positieve houding ten opzichte van uw site van zoekmachines, en vooral van bezoekers van uw site.

Moderne webontwikkelaars en marketeers geven steeds vaker de voorkeur aan responsief ontwerp, waardoor ze een pagina kunnen maken die op elk apparaat kan worden bekeken. En hoewel deze aanpak redelijk goed is vanuit het oogpunt van Google, die responsieve sites ‘houdt’, is het verre van de enige optie die zich kan aanpassen aan de behoeften van de gebruiker.

Het zogenaamde adaptieve ontwerp verscheen niet gisteren, maar mensen begonnen er pas onlangs serieus over te praten, dankzij de verbeteringen die het kan brengen in de gebruikerservaring.

Om te begrijpen welke van de twee soorten ontwerpen het beste bij u past, moet u de voor- en nadelen van beide methoden duidelijk begrijpen en weten welke de meest gunstige zijn. optimale oplossingen Voor verschillende soorten sites en apparaten.

Responsief webdesign

Responsief webontwerp is het schalen van de interface naar het apparaat van de gebruiker met behulp van mediaquery's of een CSS3-module waarmee u de verschillende stijlen(of zelfs stylesheets) afhankelijk van de schermresolutie, schermgrootte en andere kenmerken.

Het gebruik van deze methode is beter geschikt voor locaties met een flexibele of “rubberen” structuur. Anders zullen ontwikkelaars veel tijd en middelen besteden aan het opnieuw ontwerpen van de site voor een tablet en mobiele telefoon om het bestaande gebrek aan flexibiliteit te compenseren.

Naast de veranderende structuur heeft responsive design nog een aantal andere voordelen:

1. Identieke verschijning van de bron in verschillende browsers en aan verschillende platforms
2. De site heeft dezelfde URL, wat bijdraagt ​​aan SEO-optimalisatie
3. Ontwikkelaars hoeven slechts één site te onderhouden, waardoor er minder tijd wordt besteed aan ontwerp en inhoud

En hoewel positieve aspecten Hoewel responsive design voor de hand ligt, kent deze methode een aantal nadelen. De grootste is de laadsnelheid, die aanzienlijk wordt verlaagd vanwege de hoge resolutie van afbeeldingen en andere visuele elementen die nodig zijn voor het ontwerp verschijning bron.

Kies je voor een responsive aanpak, dan zullen je ontwerpers hier altijd door beperkt worden, aangezien complexe visuele elementen de laadtijd kunnen vertragen. mobiele apparaten Oh.

Responsief webdesign

Responsive design werkt iets anders. Het segmenteert gebruikers in categorieën op basis van het apparaat waarop ze de site bekijken.

Hoewel sites die zijn gemaakt met responsieve ontwerptechnologie er hetzelfde uitzien, ongeacht de apparaatgrootte, detecteert een responsieve bron vanaf welk apparaat de gebruiker de site bezoekt en wordt de versie weergegeven die specifiek voor dat type apparaat is ontworpen.

In plaats van een kleinere kopie van de bron weer te geven, identificeert de responsieve ontwerpsiteserver het apparaattype van de gebruiker en geeft een vereenvoudigde versie van de blog weer met alleen de belangrijkste inhoud. noodzakelijke elementen interface en afbeeldingen zijn van lagere kwaliteit.

Met andere woorden: de server doet al het zware werk in plaats van de site te dwingen zichzelf te optimaliseren. Een van de voordelen adaptief ontwerp het volgende kan worden onderscheiden:

1. Afbeeldingen laden veel sneller omdat ze worden gecomprimeerd en aangepast aan het apparaat van de gebruiker
2. De site laadt sneller omdat de server het apparaattype van de gebruiker bepaalt en de bijbehorende programmacode laadt
3. Ontwikkelaars genieten van creatieve vrijheid omdat ze kunnen creëren verschillende versies sites en pas deze aan de juiste apparaattypen aan om ze handiger te maken voor mobiele gebruikers.

De aantrekkingskracht van deze methode wordt overschaduwd door het feit dat het maken van een responsieve website niet zo eenvoudig is. Door de aanpassing van het ontwerp aan verschillende apparaten neemt de tijd die aan ontwikkeling wordt besteed aanzienlijk toe. Bovendien, als u wijzigingen aan de site moet aanbrengen, moet u wijzigingen aanbrengen in alle versies ervan. Daarom, als u een klein budget heeft en niet over een team van specialisten beschikt die een responsieve website zullen ondersteunen, is het beter om dit idee voorlopig te laten varen.

Welke optie is waarvoor geschikt?

Zelfs als je de voorkeur geeft aan een van de twee beschreven ontwerpen, is het belangrijk om te beseffen dat je eerst en vooral aan de gebruikerservaring moet denken.

Als het voor uw gebruikers handiger is om te communiceren met een bron die op alle apparaten dezelfde structuur heeft, kies dan voor responsief ontwerp. Als uw gebruikers meer technisch onderlegd zijn en u een goede basis wilt leggen voor de toekomst, dan is responsive design de optimale oplossing.

Internetgebruikers surfen op websites verschillende apparaten met schermen verschillende maten. Schermformaten veranderen voortdurend, dus het is belangrijk dat de site zich aan elk van deze formaten aanpast. Er zijn twee hoofdbenaderingen voor het maken van websites die zich gemakkelijk aanpassen aan verschillende soorten apparaten:

Responsief ontwerp (RWD) — responsief ontwerp— het ontwerpen van een site met bepaalde eigenschapswaarden, bijvoorbeeld een flexibel lay-outraster, waardoor één lay-out op verschillende apparaten kan werken;

Adaptief ontwerp (AWD)— adaptief ontwerp of dynamische weergave — het ontwerpen van een site met omstandigheden die veranderen afhankelijk van het apparaat, gebaseerd op verschillende lay-outs met vaste breedte.

1. Responsieve ontwerptechnieken

De filosofie achter responsive webdesign is om de site gemakkelijk te bekijken op elk apparaat, ongeacht de schermgrootte. Zin responsief ontwerp werd in 2011 uitgevonden door Ethan Marcotte. Belangrijkste kenmerk responsief webontwerp - dankzij het vloeiende raster reageert de lay-out automatisch op veranderingen in de schermgrootte, die opblaast of samentrekt als een ballon.

Responsief ontwerp(Engels) Responsief webdesign) combineert drie methoden - flexibele indeling mesh-gebaseerd, flexibele afbeeldingen En mediavragen.

Flexibiliteit in lay-out op basis van gebruik relatieve eenheden afmetingen in plaats van vaste pixelwaarden, waardoor de breedte kan worden aangepast aan de beschikbare ruimte.

Flexibiliteit van tekstinhoud wordt bereikt door de lettergroottes te berekenen in verhouding tot de standaard lettergrootte van de browser van 16px, b.v. vaste maat lettergrootte: 42px relatieve grootte is 42px / 16px = 2.625em .

Probleem flexibele afbeeldingen opgelost met behulp van de img-regel (breedte: 100%; max-width: 100%;) voor alle afbeeldingen op de site. Deze regel zorgt ervoor dat afbeeldingen nooit breder zijn dan hun containers en nooit hun werkelijke afmetingen overschrijden grote schermen.

Mediavragen verander stijlen op basis van apparaatkenmerken die verband houden met de weergave van inhoud, inclusief schermtype, breedte, hoogte, oriëntatie en resolutie. Mediaquery's creëren een responsief ontwerp dat de juiste stijlen toepast op elk schermformaat.

Rijst. 1. Responsief ontwerp

Aanvullende responsieve ontwerptechnieken

Schaalbaar vectorafbeeldingen - gebruik SVG-afbeeldingen die naar elk formaat kunnen worden geschaald zonder kwaliteitsverlies en die er goed uitzien op Retina-displays.

Kaartinterfaces- gebruik zogenaamde kaartinterfaces - rechthoekige vormen met afgeronde hoeken die containers voor inhoud vertegenwoordigen. Dergelijke blokken zijn op zichzelf staande interface-eenheden en zijn gemakkelijk door de lay-out te verplaatsen.

Rijst. 2. Pinterest, op kaarten gebaseerde lay-out

Laat alleen de essentiële zaken achter- een goede techniek, vooral voor responsive design. Creëer responsieve en gebruiksvriendelijke, minimalistische interfaces die tegenwoordig steeds populairder worden.

Rijst. 3. Hotellook, minimalisme in webdesign

Prioriteer inhoud en verberg deze op de juiste manier- gebruik verborgen elementen bedieningselementen, vooral voor apparaten met kleine schermen. Pop-upvensters, tabbladen, off-canvas-menu's en andere soortgelijke technieken helpen het aantal elementen op de pagina te verminderen. Ruimte vrijmaken van onnodige elementen, maakt u de interface handig en gebruiksvriendelijk.

Creëer een grote klikbare ruimte voor knoppen— hoe groter het actieve gebied van de knop, hoe gemakkelijker het voor de gebruiker is om ermee te communiceren.

Voeg interactiviteit toe aan uw interfaces- maak als reactie op een gebruikersactie een responsactie - een animatie die werkt wanneer u over een element beweegt op desktopapparaten en wanneer u een element aanraakt op mobiele apparaten.

2. De viewport aanpassen met behulp van de viewport-metatag

Naar mobiele browsers voor operatiekamers Android-systemen en iOS heeft het formaat van sitepagina's niet automatisch aangepast, er wordt een speciale tag gebruikt met het name="viewport" attribuut. Met deze tag kunt u een specifieke waarde instellen breedteparameters en initiële schaal:

— initial-scale=1 betekent dat de paginagrootte in de browser gelijk is aan 100% van de viewportgrootte. Dat wil zeggen dat de verhouding tussen de fysieke pixel en de CSS-pixel 1:1 zal zijn;

— breedte=apparaatbreedte betekent dat de paginabreedte gelijk is aan 100% van de breedte van het venster van elke browser. Dat wil zeggen dat de breedte van de sitepagina overeenkomt met de breedte van het apparaat, dus deze hoeft niet te worden geschaald.

IN in dit voorbeeld de inhoud in het browservenster zal 2 keer groter zijn in vergelijking met de fysieke grootte.

Ook taggen kan worden gebruikt om te bepalen hoeveel gebruikers de paginabreedte kunnen vergroten of verkleinen:

Met deze code kunt u de paginabreedte vergroten tot een waarde die gelijk is aan drie keer de breedte van het apparaatscherm en deze verkleinen tot de helft van de breedte van het apparaatscherm.

U kunt gebruikers de mogelijkheid ontzeggen om te schalen met behulp van het door de gebruiker schaalbare attribuut:

3. Universele sjablonen

De meeste lay-outs die worden gebruikt om responsief webontwerp te maken, vallen in een van de vijf patrooncategorieën die zijn gedefinieerd door Luke Wroblewski:
Meestal vloeibaar(Meest rubberachtig)
Kolom laten vallen(Kolommen onder elkaar),
Lay-outverschuiver(Bewegende lay-out),
Kleine aanpassingen(Kleine veranderingen)
Van canvas(Buiten scherm).
In sommige gevallen kan een pagina een combinatie van sjablonen gebruiken, zoals Column Drop en Off Canvas.

3.1. Meestal vloeibaar

Een populaire lay-out die voornamelijk bestaat uit rubberen gaas. Op grote of middelbrede schermen blijft de grootte meestal ongewijzigd; op grote schermen worden alleen de marges aangepast. Op kleine schermen het rubberen raster zorgt ervoor dat de lay-out opnieuw wordt berekend voor de hoofdinhoud en dat de kolommen onder elkaar worden geplaatst. Het voordeel van de sjabloon is dat er slechts één controlepunt nodig is tussen kleine schermen en grote schermen.

3.2. Kolom laten vallen

Kolommen worden één voor één verticaal geplaatst als de breedte van het venster niet alle inhoud kan weergeven. Hierdoor komen de kolommen verticaal onder elkaar te staan. De keuze van de breekpunten voor dit lay-outsjabloon is afhankelijk van de inhoud en wordt voor elke ontwerpoptie afzonderlijk bepaald.

3.3. Lay-outverschuiver

De meest responsieve sjabloon, omdat deze meerdere controlepunten biedt voor schermen van verschillende breedtes. Het belangrijkste verschil met deze lay-out is dat in plaats van de renderboom opnieuw te berekenen en kolommen onder elkaar te plaatsen, de inhoud wordt verplaatst. Vanwege aanzienlijke verschillen tussen de belangrijkste controlepunten, is het onderhouden van deze lay-out een grotere uitdaging en zult u waarschijnlijk niet alleen de algehele lay-out van de inhoud, maar ook de elementen ervan moeten veranderen.

3.4. Kleine aanpassingen

De sjabloon brengt kleine wijzigingen aan in de lay-out, zoals het aanpassen van de lettergrootte, het wijzigen van het formaat van afbeeldingen of het verplaatsen van inhoud. Het werkt goed in lay-outs met één kolom, zoals sites en artikelen met één pagina een groot aantal tekst.

3.5. Van canvas

Content die zelden wordt gebruikt, zoals navigatie-elementen of app-menu’s, wordt buiten beeld geplaatst en alleen getoond als de schermgrootte dit toelaat. Op kleinere schermen wordt de inhoud met één klik geopend.

4. Responsief ontwerp

In tegenstelling tot responsief ontwerp, responsief ontwerp(Adaptive Web Design) richt zich op apparaatgroottes. Het gebruikt meerdere statische lay-outs voor verschillende soorten apparaten (mobiele apparaten, tablets, desktopcomputers), gebaseerd op controle(keer)punten. Dat wil zeggen dat lay-outs worden geladen bij bepaalde browservenstergroottes van apparaten, en dat overgangen tussen lay-outs eerder abrupt dan vloeiend plaatsvinden.

Normaal gesproken hebben responsieve lay-outs zes lay-outopties, afhankelijk van de schermbreedte:
320
480
760
960
1200
1600.

IN adaptieve lay-outs Functionaliteit speelt de hoofdrol, dat wil zeggen dat bij het maken van een ontwerp rekening wordt gehouden met de kenmerken van apparaten, bijvoorbeeld aanraakbediening voor mobiele apparaten of grote ruimtes voor desktopmonitors.

Basis responsieve ontwerptechnieken

Houd het consistent- elke website zou moeten creëren vertrouwende relatie met de gebruiker, zodat hij zich op zijn gemak voelt bij het navigeren en communiceren met hem. Consistent ontwerp betekent dat de gebruiker, wanneer hij naar een andere pagina op een site gaat, niet het gevoel heeft dat hij zich op een andere site bevindt. Besteed aandacht aan kleine details, bouw een visuele hiërarchie op, belangrijke elementen vetgedrukt markeren. Gebruik serieel kleurenschema op de hele site kunt u dezelfde elementen hergebruiken verschillende situaties, bijvoorbeeld hetzelfde ontwerp van pop-upmeldingen.

Gebruik een raster— een structuur met twaalf kolommen heeft meer de voorkeur voor het regelen van de breedte van de kolommen en de opvulling daartussen.

5. Wat is het verschil tussen responsief en adaptief webdesign

Rijst. 4. Responsief en adaptief ontwerp op verschillende apparaten

Gebruik mediaquery's en om responsieve lay-outs te maken relatieve maten rasterelementen gespecificeerd met % . Bij responsief ontwerp bepalen server-side scripts eerst het type apparaat waarop de gebruiker toegang probeert te krijgen tot de site (desktop, telefoon of tablet) en laden vervolgens precies de versie van de pagina die daarvoor het meest is geoptimaliseerd. Rasterelementen krijgen vaste px-groottes.

Het belangrijkste verschil tussen deze technieken is daarom responsief ontwerp: één lay-out voor alle apparaten, adaptief ontwerp: één lay-out voor elk type apparaat.

6. Handige diensten en tools

Android-emulator voor Windows, Linux en Mac OS X. iOS-simulator is alleen beschikbaar voor Mac-gebruikers OS X en maakt deel uit van het Xcode-pakket (het kan gratis worden gedownload via de Mac App Store).

Een PHP-script dat op elke website draait, detecteert de schermgrootte en past de afbeeldingsgrootte aan, wat resulteert in een kleine afbeeldingsgrootte op kleine schermen.

Correspondentie tabellen fysieke afmetingen apparaten css hoogte- en breedtewaarden, evenals pixelverhoudingswaarde voor mobiele apparaten.

Een verzameling websites die gebruik maken van mediaquery's en responsief webdesign.

CSS-framework gebaseerd op een lay-out met 12 kolommen, maximaal 960px. Ondersteund door Chrome, Safari, Firefox, IE 7 en hoger, mobiele versies van browsers.

Een set tools voor het ontwikkelen van webapplicaties. MINDER taalgebruik, adaptieve lay-out met 12 kolommen, ondersteuning voor mobiele apparaten, tablets en monitoren, veel componenten, knoppen, vervolgkeuzemenu's, eigen stijl invoervelden, lijsten, koppen, labels, pictogrammen, waarschuwingen, tabbladen, voortgangsbalken, tooltips, accordeon, carrousel, enzovoort, verschillende Javascript-plug-ins, Scaffolding-ondersteuning, inclusief de toepassing van Bootstrap-stijl op reeds gegenereerde HTML.

Tegenwoordig hebben de meeste mensen toegang tot internet via mobiele gadgets- tablets, telefoons, in dit opzicht omvat site-optimalisatie ook nieuw niveau. Als een gebruiker binnenkomt en ziet dat de site niet is geoptimaliseerd voor mobiele apparaten: de afbeelding kan niet worden bekeken, de knoppen zijn verplaatst, de lettertypen zijn klein en onleesbaar, het ontwerp is scheef - 99 van de 100%, dat zal hij wel doen vertrek en ga op zoek naar een andere, handiger. En het zal het vakje aanvinken dat de bron niet relevant is, dat wil zeggen dat deze niet overeenkomt met de zoekopdracht. Daarom moet het pagina-ontwerp worden aangepast aan verschillende mobiele apparaten. Wat is er gebeurd mobiele versie site, hoe maak je deze en welke methode kun je het beste gebruiken? Lees meer in dit artikel.

Het zijn er dus vier belangrijkste manieren de site aanpassen voor een mobiele versie.

Methode één: responsief ontwerp

Bij adaptieve sjablonen wordt het websitebeeld gewijzigd afhankelijk van de schermgrootte. In de regel zijn ze standaard ingesteld op 1600, 1500, 1280, 1100, 1024 en 980 pixels. Voor de implementatie worden query's gebruikt. Het verandert zichzelf niet.

De voordelen van deze methode zijn onder meer:

• gemakkelijke ontwikkeling, omdat de structuur zelf zich aanpast aan de schermparameters en voor elke update geen volledig nieuw ontwerp vereist is, volstaat het om de CSS en HTML te corrigeren;
• een URL-adres- de gebruiker hoeft niet meerdere namen te onthouden, er is geen noodzaak voor een omleiding (omleiding van het ene adres naar het andere), wat het werk van een webmaster kan bemoeilijken, en het is gemakkelijker voor een zoekmachine om een ​​bron te sorteren en te rangschikken met één adres.

Natuurlijk hebben adaptieve templates ook hun nadelen, die overigens zwaarder wegen dan de voordelen. Veel ontwikkelaars houden zich echter aan dit concept, bijvoorbeeld Google-bedrijf, de mobiele versie van de site heeft een responsief ontwerp. Dus de nadelen:

• Responsief ontwerp ondersteunt niet dezelfde taken op een mobiel apparaat als op een desktop. Als dit bijvoorbeeld een mobiele versie van de website van een bank is, waarbij de gebruiker hoogstwaarschijnlijk informatie nodig heeft over wisselkoersen of geldautomaten in de buurt, dan is dit ontwerp voldoende. Maar als het een complex gestructureerde bron is met veel secties en subsecties, is het onwaarschijnlijk dat deze bezoekers zal aanspreken.
• Langzaam laden verandert uw favoriete site in een gehate site. Dit geldt vooral voor bronnen met een overvloed aan animaties, video's, pop-ups en andere. actieve elementen. Vanwege het grote gewicht zal de pagina gewoon "vertragen", de gebruiker zal boos worden en weggaan, en zoek posities plaats - vallen.
• Het onvermogen om de mobiele versie uit te schakelen is een ander belangrijk nadeel. Als een element door een dergelijke lay-out verborgen is, kun je niets doen om het te openen, in tegenstelling tot sites waar je het kunt uitschakelen en naar een regulier domein kunt overschakelen.

Niettemin kunt u met een dergelijke mobiele versie van de site snel, zonder speciale vaardigheden en kosten, de bron aan elk gadget aanpassen. Maar gezien de genoemde tekortkomingen is het geschikt voor kleine, eenvoudige bronnen met een minimum aan informatie en multimedia, zonder complexe navigatie en animatie. Voor een complexe site zijn 2 andere methoden geschikt.

Methode twee - een aparte versie van de site

Deze methode is heel gebruikelijk en maakt een site vaak met succes gebruiksvriendelijker op een mobiel apparaat. De essentie ervan is om een ​​aparte versie van de pagina te maken, ontworpen voor de applicatie en gelegen op een aparte URL of subdomein, bijvoorbeeld m.vk.com. Tegelijkertijd blijft de hoofdfunctionaliteit behouden, het siteontwerp ziet er gewoon anders uit. De voordelen van deze methode liggen voor de hand:

• handige gebruikersinterface;
• het is gemakkelijk om wijzigingen aan te brengen en bewerkingen uit te voeren, omdat de versie afzonderlijk van de hoofdbron bestaat;
• door het lage gewicht werkt een aparte versie van de site veel sneller dan responsieve sjabloon;
• Meestal is het mogelijk om vanaf de mobiele versie naar de hoofdversie van de pagina te schakelen.

Maar dit is niet zonder nadelen:

• Verschillende adressen - desktop- en mobiele versies van de site. Hoe zorg ik ervoor dat de gebruiker twee opties onthoudt? Webmasters gaan vaak over van de desktopversie naar de mobiele versie, maar als deze pagina niet bestaat in de mobiele versie, krijgt de gebruiker een foutmelding. Hier ontstaan ​​problemen met zoekmachines, die het moeilijk vinden om twee identieke bronnen te rangschikken, en dit heeft rechtstreeks invloed op de promotie.
• De mobiele versie van de site vanaf een computer zal, als een gebruiker deze per ongeluk bezoekt, er belachelijk uitzien, wat ook van invloed kan zijn op het verkeer.
• Deze versie is vaak erg uitgekleed, desktop, waardoor de gebruiker zeer beperkte functionaliteit krijgt. Maar tegelijkertijd kan de bezoeker terecht als er iets ontbreekt volledige versie pagina's.

Over het algemeen rechtvaardigt een aparte mobiele site zichzelf en is dit de meest gebruikelijke manier om een ​​bron aan te passen voor mobiele apparaten. Hij is populair onder grote online winkels bijvoorbeeld Amazon.

De derde manier is RESS-ontwerp

De Google-zoekmachine ondersteunt deze richting van mobiel ontwerp actief. Dit is de moeilijkste, kostbaarste maar effectiefste methode om een ​​website aan te passen voor een telefoon of tablet. Het heet RESS. Dit richt zich op een bron in een mobiele applicatie die voor elk apparaat afzonderlijk kan worden gedownload. Voor Android - van GooglePlay en voor Apple - van iTunes.

Dergelijke applicaties zijn snel, gratis, handig en kunnen worden gehost verschillende soorten informatie, terwijl het telefoongeheugen en het internetverkeer niet zo veel verbruiken als bij het bezoeken van een site via een browser. Ze zijn gemakkelijk toegankelijk, omdat de link altijd op het scherm aanwezig is en het niet nodig is om een ​​complexe naam in te voeren adresbalk browser.

Natuurlijk zitten hier ook nadelen aan, zoals complexiteit in de ontwikkeling, hoge kosten werk groot aantal programmeurs, de noodzaak om verschillende lay-outopties te maken. Soms wordt het mobiele apparaat niet herkend door de applicatie. Normaal technische ondersteuning, correctie van tekortkomingen. Niettemin wordt deze optie beschouwd als de beste van de drie voorgestelde opties vanwege de productieve, ononderbroken werking ervan.

De goedkoopste manier om een ​​mobiele website te maken

Alle bovenstaande methoden vereisen, hoewel niet altijd lang en complex, maar toch betaald werk voor de webmaster. Als u geen dringende behoefte aan een dergelijke ontwikkeling ziet, zal een eenvoudige en gratis mobiele versie van de site bij u passen. Wat is de gemakkelijkste manier om dit te doen?

Download speciale sjablonen (plug-ins) voor responsief ontwerp. Bijvoorbeeld WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile en anderen. Ze helpen u de site correcter weer te geven op uw telefoon en u krijgt verschillende tips over wat u moet corrigeren om de pagina beter aan te passen aan de mobiele versie.

Zeker, deze methode nauwelijks geschikt voor serieuze hulpbronnen. Het is eerder zo gratis kans Bedoeld voor kleine en eenvoudige sites, blogs, nieuwsfeeds. Dat mogen wij ook niet vergeten Google-zoekmachine, net als Yandex, stelt tegenwoordig serieuze eisen aan mobiele versies, dus de kans is groot dat u met deze methode uw positie verlaagt.

Met deze methode worden advertenties en pop-upbanners hoogstwaarschijnlijk afgesneden, maar wordt de pagina snel en zonder vertraging geladen.

Principes voor het maken van mobiele versies

Het maakt niet uit of de mobiele versie van de site gratis is gemaakt of met de hulp van een team van webmasters, of deze is gemaakt met behulp van het RESS-systeem of met behulp van een adaptief sjabloon. Het belangrijkste is dat je, om effectief te kunnen werken, je aan een aantal extreem moet houden belangrijke principes. Hoe zou de mobiele versie van de site eruit moeten zien? Hoe maak je het productief, efficiënt en productief?

Wij verwijderen alles wat overbodig is

Minimalisme is waar een ontwikkelaar van een mobiele versie van een website naar moet streven. Stel je voor hoe moeilijk het is om informatie waar te nemen die vol zit met kleuren, knoppen, banners en waar je eindeloos doorheen moet scrollen op zoek naar het juiste materiaal. Mobiel ontwerp moet eenvoudig en schoon zijn. Kies 2-3 kleuren om de ruimte te verdelen (bijvoorbeeld merkkleuren). Het is beter als een van hen wit is. Verdeel de kleine schermruimte in duidelijke en leesbare gebieden. Virtuele sleutels moet zichtbaar zijn zodat de gebruiker duidelijk weet waar hij moet klikken en ziet - hier is het product, hier is het formulier voor het invullen van de gegevens, hier is de informatie over levering en betaling.

Alle extra opties die nuttig zouden zijn in de desktopversie en het leven van de gebruiker gemakkelijker zouden maken, zullen hier alleen maar complicaties met zich meebrengen. Laat alleen de belangrijkste elementen achter. Animatie, reclamebanners, multimedia zal hoogstwaarschijnlijk de werking van de site of applicatie alleen maar vertragen en de aandacht afleiden van het belangrijkste.

Uitlijning

De kwestie van de uitlijning is niet minder urgent, want als het verkeerd wordt gedaan, krijgt de gebruiker alleen de uitgangen van belangrijke woorden te zien. Het is algemeen aanvaard om links en verticaal uit te lijnen. Stel je voor dat je aan het scrollen bent nieuwsfeed aan de telefoon. Dit doe je van boven naar beneden, maar niet naar links of rechts.

Vereniging

Als er geen mogelijkheid is voor een lange keten van transities, probeer dan meerdere stappen in één te combineren. Een site vereist bijvoorbeeld dat gegevens in verschillende fasen worden ingevoerd: een naam en vervolgens een adres, waarbij in elke afzonderlijke cel een apart huis, straat, appartement, enz. staat. Om de gebruiker niet te dwingen te proberen in veel kleine cellen, vraag hem om slechts 2 in te vullen: naam en adres.

En ontkoppeling

Soms is het daarentegen ook nodig om de verbinding te verbreken groot aantal informatie. In het vervolgkeuzemenu heb je bijvoorbeeld een lijst met meer dan 80 steden waar bezorging plaatsvindt. Groepeer ze per regio, zodat de gebruiker niet door deze enorme lijst hoeft te scrollen. Wanneer hij de cursor verplaatst regionaal centrum of regio, verschijnt er een andere lijst met steden.

Lijsten

Trouwens, over de lijsten. Er zijn er twee: vastgelegd in alfabetische of andere volgorde en met vervanging. Hun keuze hangt af van wat er zal worden vermeld.

Vast is handig als de gebruiker precies weet waar hij naar op zoek is. Bijvoorbeeld plaats, nummer of datum. De tweede optie is geschikt voor lange, complexe namen of voor gevallen waarin er veel variaties op dezelfde naam bestaan, en elke variant brengt de gebruiker een stap dichter bij het doel. De automatische vervangingsoptie wordt vaker gebruikt wanneer een bezoeker hulp nodig heeft. Een breiwebsite biedt bijvoorbeeld aan om breinaalden te kopen. Gebruiker komt binnen zoekopdracht“Metalen breinaalden”, maar in de tooltip ziet hij “5 mm breinaalden”, “4,5 mm breinaalden”, etc.

Automatisch aanvullen

Dit punt is vooral van toepassing op sites waar ze online iets verkopen en dat je moet invullen standaardformulieren betaling, bezorging, enz. Als iemand een aankoop doet vanaf zijn telefoon, heeft hij hoogstwaarschijnlijk geen tijd om naar de computer te gaan, wat betekent dat het aankoopproces zo snel en gemakkelijk mogelijk moet worden uitgevoerd.

Om dit te doen, kunnen de formulieren reeds ingevulde gegevens bevatten; u kunt uw toevlucht nemen tot de meest populaire antwoorden. Voer bijvoorbeeld de datum van vandaag, contante betaalmethode, stad in als u in dezelfde regio werkt. Ze kunnen worden gewijzigd, maar als u het doel raakt, wordt de tijd van de gebruiker bespaard.

Alles wordt gelezen, alles wordt bekeken

Houd er bij het maken van het ontwerp van de mobiele versie van de site rekening mee dat ieders telefoon anders is, en dat geldt ook voor hun visie. Uw site wordt waarschijnlijk op een klein scherm bekeken, dus lettertypen moeten eenvoudig en leesbaar zijn, knoppen moeten groot genoeg zijn om op te klikken zonder dat ze naar een andere pagina worden geleid, en afbeeldingen moeten apart en groot worden geopend, vooral als waar we het over hebben over de online winkel.

Enkele statistieken

Als we het hebben over het aanpassen van een website aan mobiele apparaten, kunnen we niet anders dan onze toevlucht nemen tot statistieken om te begrijpen hoe belangrijk dit proces is voor online promotie.

De cijfers zijn als volgt. Tegenwoordig gebruikt 87% van de bevolking gadgets, blijkbaar met uitzondering van de jongste kinderen en enkele ouderen. Economen voorspellen dat de mobiele handel de komende vijf jaar honderdvoudig zal groeien. Slechts 21% van de sites is echter aangepast om met mobiele apparaten te werken. Dit betekent dat het internetverkeer en de e-commercemarkt slechts voor een klein vijfde deel in beslag worden genomen.

Denk eens na over deze cijfers. Heeft het zin om uw middelen aan te passen? Natuurlijk ja. Bovendien, terwijl het er zo veel zijn vrije ruimte in deze markt kun je je eigen segment daarin meenemen.

Waar is de mobiele versie nodig?

Het is raadzaam om de mobiele versie te gebruiken voor elk platform dat wil ontvangen hoge waardering. Dit heeft tenslotte een directe impact op de gebruiker en creëert voor hem comfortabele omstandigheden om op uw site te blijven.

Het volgende kan niet bestaan ​​zonder een mobiele versie:

• nieuwsportals, aangezien dit is wat de meeste mensen bekijken vanaf hun telefoon op weg naar hun werk of school;
• sociale netwerken - om dezelfde reden, plus de factor online communicatie, wat betekent dat hiervoor een handige, begrijpelijke chat moet worden gecreëerd;
• naslagwerken, sites met navigatie, enz., waar mensen terechtkomen als ze iets zoeken;
• online winkels zijn een kans om klanten aan te trekken die geen tijd verspillen met winkelen, maar alles via mobiel internet kopen.

In plaats van een conclusie

Vandaag mobiele technologieën zich in een fase van actieve groei en ontwikkeling bevinden, daarom moet elk bedrijf, bij het streven naar marktleiderschap, ervoor zorgen dat zijn internetbronnen aan de vereisten voldoen. Vanwege de groeiende verzoeken van gebruikers moeten websites voortdurend worden gemoderniseerd en aangepast voor verschillende apparaten. Het is duidelijk dat als een persoon het lastig vindt om op een bepaalde bron te zijn, hij daar geen informatie over een product of prijs kan krijgen, een bestelling kan plaatsen, meer te weten kan komen over de levering, dan zal hij de site vinden waar dit allemaal mogelijk zal worden. Om de competitie te winnen is het daarom belangrijk om over een flexibele, handige, functionele en interessante hulpbron te beschikken.

De mobiele versie van de site Android of iOS helpt u hierbij. Om dit te doen, moet u een van de bovenstaande herontwerpmethoden kiezen: een adaptieve sjabloon, een nieuwe site op een subdomein maken en ernaartoe gaan door om te leiden, met behulp van gratis sjablonen of creatie mobiele applicatie, met behulp waarvan de gebruiker gemakkelijker de pagina kan betreden en erop kan blijven.

IN de laatste tijd Technologieën en verschillende apparaten (tablets, smartphones, monitoren) waarmee sites worden bekeken, ontwikkelen zich steeds verder.

Op dit gebied krijgen we een grote verscheidenheid aan verschillende schermresoluties, wat het op zijn beurt moeilijk maakt om informatie van sites te verkrijgen. Om ervoor te zorgen dat de informatie op de meeste apparaten gemakkelijk te lezen en te bekijken is, is adaptieve ontwerptechnologie ontwikkeld.

Het doel van responsief ontwerp is het ontwikkelen van een universeel websiteontwerp, waarmee u de bron vanaf verschillende apparaten kunt bekijken en ermee kunt communiceren.

En ook deze technologie omvat het ontwikkelen van één versie van een website voor alle apparaten, in plaats van meerdere.

Responsief webdesign(Engels: Adaptive Web Design) - webpagina-ontwerp dat zorgt voor de juiste weergave van de site verschillende apparaten, verbonden met internet en zich dynamisch aanpassend gegeven afmetingen browservenster.

Basisprincipes van responsief ontwerp:

• Responsieve websitesjabloon, het vermogen van de sjabloon om zich aan te passen aan verschillende schermresoluties van apparaten, van computermonitors tot smartphones;
• Inhoudsblokken aanpassen en verplaatsen, het vermogen van inhoudsblokken om de vereiste afmetingen aan te nemen, afhankelijk van de schermresolutie van het apparaat, evenals de mogelijkheid om naar een andere positie in de lay-out te gaan;
• Beeldaanpassing, de mogelijkheid om afbeeldingen van grootte te veranderen afhankelijk van de schermresolutie of om meer te laden aangepast beeld met minder gewicht en afmetingen;
• Gebruik flexibel gaas , hiermee kunt u het lay-outontwerp snel wijzigen;
• Minder belangrijke blokken verbergen, op kleine schermen kunnen sommige blokken verborgen zijn;
• Herwerken van de bruikbaarheid van navigatie-elementen, aangezien navigatie-elementen op mobiele apparaten vanwege de lage resolutie minder klikbaar worden, zijn ze opnieuw ontworpen, waardoor ze handiger in gebruik zijn;
• Een aantal elementen op een webpagina vereenvoudigen zijn sommige elementen vereenvoudigd voor gebruik op mobiele apparaten;
• Aanpassing van video-inhoud moet ook rekening worden gehouden met video-adaptatie;
• Mediaquery's gebruiken(mediaquery), waarmee u een adaptieve lay-out kunt maken;
• Mobiel eerst(mobile first), het ontwerpen van een responsief ontwerp begint met een lay-out voor mobiele apparaten.

Over laatste punt of dit goed of fout is, is een moeilijke vraag, ten minste Velen beweren dat het nodig is om een ​​lay-out te ontwikkelen met een versie voor mobiele apparaten. Ik heb een iets andere mening; het is voor mij gemakkelijker om een ​​lay-out voor te ontwikkelen maximale resolutie met een doordacht gaas en volledige functionaliteit, en pas het dan pas aan aan andere resoluties.

Responsieve ontwerplay-outafmetingen

Er was eens in 2012 een kort artikel over welke je moest kiezen bij het ontwikkelen van een ontwerp: een lay-out voor een vaste site. Dit artikel kreeg grote belangstelling onder de lezers, zo blijkt deze vraag interesseert veel beginnende ontwerpers en ontwikkelaars. In verband hiermee heb ik besloten deze kwestie ook in dit artikel onder de aandacht te brengen.

Puur vanuit mijn visie schets ik dus het principe en de dimensies waarvoor de inrichting ontwikkeld moet worden.

Als u het principe van mobile first volgt, zullen er resolutiegroottes zijn waarvoor u een lay-out moet ontwikkelen 320px / 480px / 768px / 1024px / 1280px Misschien hangt het meer van de taken af.

De afbeelding ziet er ongeveer zo uit, maar vaak is het niet nodig om een ​​lay-out te maken voor bepaalde resoluties, bijvoorbeeld 480px. als de lay-out daartussen niet breekt 768 - 320px.

Uiteraard maken we een canvas in Photoshop, waarbij we rekening houden met de opvulling, schuifbalk en al het andere, net als bij een gewone lay-out. voor gemakkelijke ontwikkeling en een sneller lay-outontwerp. Veel mensen gebruiken raamwerken in hun werk en vertrouwen daarom op het raster van het raamwerk waarop ze zich ontwikkelen.

Hierdoor kunnen we de lay-outontwerper laten zien hoe de lay-out zich zal gedragen op verschillende schermresoluties en apparaten. Als voorbeeld heb ik een kleine layout geschetst, deze kun je zien in onderstaande screenshot.

Mediaquery en viewport in responsief ontwerp

Meta wordt gebruikt om de browser te vertellen hoe pagina-afmetingen moeten worden weergegeven en de schaal ervan kan worden gewijzigd. viewport-tag. Deze metatag is geschreven in plaats. Hiermee kunnen ontwikkelaars de schermbreedte voor apparaten instellen, die is geschreven in CSS.

De viewport-metatag is als volgt geschreven:

• breedte=apparaatbreedte— betekent dat de breedte van de sitepagina is ingesteld zodat deze overeenkomt met de breedte van het apparaatscherm.
• initiële schaal = 1,0- dit attribuut zal de browser vertellen de pixelschaal in te stellen op 1:1, wat betekent dat niet moet worden geschaald.

Links zonder metatag, rechts met de viewport-metatag.

Voor de metatag kunnen ook andere attributen en parameters worden ingesteld.

Mediavragen

CSS3 speelt een grote rol bij de ontwikkeling van responsieve websites mediavragen(mediavragen). Mediaquery's omvatten het mediatype (printers, smartphones, schermen, tv's, projectoren, enz.) en omstandigheden, die op hun beurt waar of onwaar kunnen zijn (waar, onwaar). Afhankelijk van of het mediatype correct is en of aan de voorwaarde is voldaan, worden verschillende css-stijlen toegepast. Als het waar is, worden de stijlen die in dit mediaverzoek zijn opgegeven, toegepast, maar als het niet waar is, worden de gebruikelijke CSS-stijlen toegepast.

Dankzij dergelijke verzoeken worden er verschillende sitedisplays gemaakt voor mobiel-, tablet- en monitorschermen. Ondersteund door alle moderne browsers.

Het is als volgt geschreven:

@mediascherm en (max-breedte: 1000px) ( .class ( eigenschap: waarde; ) )

• @media– media – verzoek;
• scherm– media – type (ook wel mediatype genoemd);
• maximale breedte: 1000px– een voorwaarde waaraan moet worden voldaan (in ons geval worden stijlen toegepast als de vensterbreedte kleiner is dan 1000px);
• . klas– de bijbehorende selectors (klassen, id) worden geschreven waarin nieuwe waarden aan de eigenschappen worden toegewezen.

In de meeste gevallen worden de volgende mediafuncties gebruikt om adaptief ontwerp te ontwikkelen.

• maximale breedte: breedte— betekent dat als de breedte van het browservenster kleiner is dan de opgegeven breedte, aan de voorwaarde wordt voldaan en de juiste stijlen worden toegepast (bijvoorbeeld: max-width: 768px, betekent dat als de breedte van het browservenster kleiner is dan 768px , dan moeten de stijlen worden gebruikt die zijn opgegeven in de mediaquery).
• min-breedte: breedte- betekent dat als de breedte van het browservenster groter is dan de opgegeven breedte, aan de voorwaarde wordt voldaan en de opgegeven stijlen in het verzoek worden toegepast (bijvoorbeeld: min-width: 480px).

Maar er kunnen ook andere functies worden gebruikt: kleur, apparaatbreedte, raster, hoogte, oriëntatie: liggend, oriëntatie: portret, resolutie en andere.

Waarden die in mediafuncties worden gebruikt, worden ook wel genoemd breekpunten(keerpunten of controlepunten). Op deze controlepunten verandert, zoals u al vermoedde, het ontwerp van de site.

• 320px- mobiel
• 480px- mobiel
• 768px- tabletten
• 1024px- tablets, netbooks
• 1280px en meer - personal computers.

Controlepunten zijn mogelijk niet strikt gebonden aan een bepaalde schermresolutie, omdat ze kunnen worden gemaakt met andere parameters in die waarden waar de lay-out zichtbaar breekt, niet correct wordt weergegeven of niet langer correct wordt weergegeven.

Mediaquery's gebruiken ook logische operatoren zoals:

• En– logische AND, gebruikt om verschillende voorwaarden te combineren (bijvoorbeeld: @media print en (kleur) ( ... )).
• niet– logisch NOT, gebruikt om een ​​voorwaarde te ontkennen (bijvoorbeeld: @media not all en (color) ( … )).
• alleen– gebruikt voor oudere browsers die geen mediaquery's ondersteunen (bijvoorbeeld: @media only screen en (max-width: 1300px) ( … )).

Mediaquery's worden aan het einde van het stijlbestand geschreven, na alle belangrijke CSS-stijlen.

Hoe maak je een responsive website-ontwerp vanuit een vaste lay-out

Stel dat u een werkend sitethema met een vaste grootte heeft dat u wilt behouden en er een responsieve lay-out van wilt maken, maar u weet niet waar u moet beginnen. Vervolgens zal ik u vertellen hoe u dit kunt doen, of het überhaupt mogelijk is, wat er moet gebeuren en waar u moet beginnen.

1. Allereerst maken we een reservekopie van de sjabloon (thema), voor het geval dat.
2. Vervolgens hebben we een programma nodig voor het bewerken van CSS. Dit kan elke code-editor zijn, bijvoorbeeld haakjes van Adobe, die gratis is, of Notepad++.
3. En ook de Google Chrome-browser, met zijn code-inspecteur (opgeroepen door de F12-toets).

Laten we vervolgens beginnen met bewerken; u kunt de sjabloon overbrengen naar Denver (lokale server) of naar een subdomein, afhankelijk van wat het handigst voor u is, zodat gebruikers niet alle bewerkingen zien die in de lay-out zullen plaatsvinden. Laten we eerst de viewport-metatag toevoegen, ik heb er hierboven over geschreven in de aanbevolen vorm.
Vervolgens moeten we alle statische meeteenheden omzetten in relatieve meeteenheden.

Dit zijn px, je moet ze converteren naar% en de lettertypen instellen op em. Het gaat hierbij vooral om breedtes en lettertypen.

Laat de breedte van de hoofdcontainerwraper (max-width: 960px;) ongewijzigd als de breedte is geschreven, wijzig deze dan in max-width. Voor de overige containers veranderen we de breedte naar de %-verhouding. We zullen vertalen met behulp van de formule:

Containergrootte (px) / grootte van de hoofdcontainer (ouder) in (px) * 100% = resultaat (%)

Als de hoofdcontainer van een statische site bijvoorbeeld 720 px is, de grootte van de hoofdcontainer (de bovenliggende container), bijvoorbeeld de standaard 960 px, krijgen we de volgende 720/960*100=75% .

Zo zullen we onze statische lay-out transformeren in een vloeiende lay-out. Vervolgens zullen we onze lettertypen vertalen, als ze aanwezig zijn px V em Hiervoor gebruiken we opnieuw de formule:

Lettergrootte (px) /16px (standaardgrootte) = lettergrootte (em)

De lettergrootte is bijvoorbeeld 32px en vervolgens 32/16=2em.
Vervolgens maken we onze afbeeldingen adaptief. Om dit te doen, zullen we de volgende eigenschappen en waarden in css schrijven.

Img( max. breedte:100%; hoogte: auto; )

Deze methode past afbeeldingen goed aan, het enige is dat het gewicht van de afbeeldingen niet wordt verminderd, wat betekent dat afbeeldingen met een groot gewicht op mobiele apparaten worden geladen. Om dit te voorkomen, is het noodzakelijk om verschillende afbeeldingen te laden, afhankelijk van de schermgrootte.

Als u na het aanbrengen van al deze wijzigingen alles correct hebt gedaan, zou er niets moeten veranderen op de site, maar als u probeert het browservenster kleiner te maken, zouden het ontwerp en de afbeeldingen moeten krimpen.

Welnu, onze basis is klaar, nu moeten we de controlepunten bepalen waarop de lay-out opnieuw zal worden opgebouwd, nadenken over hoe de blokken zich zullen gedragen, wat we zullen verbergen en dit allemaal opschrijven in mediaquery's. Deze keerpunten zullen wij bepalen met behulp van de Google Chrome browser.

Laten we onze lay-out erin openen, druk op de toets F12 en we zullen de grootte van het browservenster verkleinen. In de rechterbovenhoek schrijven we de afmetingen van het venster; we zijn geïnteresseerd in de eerste waarde, deze geeft de breedte aan. Het is noodzakelijk om te comprimeren totdat het ontwerp niet langer correct wordt weergegeven. Op het formaat waar de lay-out er niet correct uitziet, zullen we een controlepunt creëren.
Nadat we het eerste keerpunt hebben bepaald, zullen we het helemaal aan het einde in het style.css-bestand schrijven, na alle hoofdstijlen. Laten we zeggen dat onze lay-out een linkerzijbalk en een inhoudsgedeelte met aankondigingen heeft, en dat de site bij 910px onjuist wordt weergegeven. In dit geval zullen we de volgende mediaquery schrijven.

@media only screen and (max-width: 910px)( /* we maken het inhoudsgedeelte over de volledige breedte, annuleren de uitlijning */ sectie ( breedte: 100%; float: geen; ) /* we maken ook de zijbalk over de volledige breedte, uitlijning annuleren*/ opzij( breedte: 100%; zwevend: geen; ) )

Als deze blokken marges hebben (marge, opvulling), moeten deze op nul worden gezet of moet er rekening mee worden gehouden bij het schrijven van de breedte. Bijvoorbeeld, vulling: 2%; dan wordt de breedte als volgt geschreven breedte: 96%;.

Daarom hebben we onze lay-out aangepast naar een resolutie van minder dan 910px. Als het browservenster kleiner is dan 910px, wordt de inhoud over de volledige breedte en komt de zijbalk onder het inhoudsgedeelte te staan ​​en ook over de volledige breedte.

Met hetzelfde principe creëren we andere controlepunten, vinden de breedte waarop de lay-out breekt (ziet er niet correct uit), nemen een mediaverzoek op, maken er stijlen voor, stellen de breedte van de blokken in, we kunnen minder belangrijke blokken verbergen ( weergave: geen).

Zoals u heeft opgemerkt, zijn de controlepunten in dit voorbeeld niet strikt gebonden aan schermgroottes, wat op zijn beurt een goede weergave van de site op verschillende apparaten garandeert, ongeacht hun resolutie.

Je zult hard moeten werken, maar het resultaat zal niet lang op zich laten wachten en je zult zelfstandig een adaptief website-ontwerp kunnen maken vanuit een vaste lay-out.

Nou, dat lijkt alles te zijn wat ik in dit artikel wilde vertellen, ik wilde iets schrijven over responsief ontwerp, maar het bleek behoorlijk uitgebreid te zijn, ik hoop dat het materiaal nuttig voor je zal zijn.