Responsief ontwerp of mobiele versie. Welke optie is waarvoor geschikt? Wat is responsief ontwerp

Het thema van deze maand is website-responsiviteit, dus hebben we besloten om dieper in te gaan op wat responsive webdesign is, waarom het nodig is en wat de basisprincipes zijn. responsief webdesign.

Adaptief webontwerp is een vrij nieuwe richting in het ontwerp van webbronnen, maar nu is het een van de belangrijkste indicatoren voor websitekwaliteit. In dit artikel zullen we het hebben over wat responsive webdesign is en wat het kan zijn.

Wat is responsive webdesign

Responsive webdesign (in de Engelse taal"Responsive webdesign" is het ontwerp van webpagina's die een uitstekende kijkervaring bieden op verschillende apparaten die met internet zijn verbonden.

Dit betekent dat dezelfde site het meest bekeken kan worden verschillende apparaten ah, ongeacht de resolutie en het schermformaat - smartphones, tablets, laptops, enz. Tegelijkertijd zal het bekijken voor alle formaten even handig zijn - gebruikers van mobiele apparaten hoeven bijvoorbeeld geen afzonderlijke delen van de site uit te breiden om de gewenste link niet te missen.

Responsive design heeft tot doel webpagina’s en de weergave van de inhoud ervan passend te maken voor het apparaat waarop ze worden bekeken.

Waarom heb je responsive webdesign nodig?

1) Een grote verscheidenheid aan apparaten waarmee u toegang hebt tot internet. Momenteel zijn er veel apparaten die mensen gebruiken, ook om toegang te krijgen tot internet. Al deze apparaten variëren in schermgrootte, resolutie en dus hoe een website erop kan worden weergegeven. Daarom is het belangrijk dat uw site er goed uitziet en correct wordt weergegeven voor elke gebruiker, ongeacht welk apparaat hij gebruikt.

2) De populariteit van mobiele apparaten met internettoegang en de toename van mobiel internetverkeer. Met de groeiende populariteit van mobiele apparaten is het aantal gebruikers dat websites bezoekt merkbaar toegenomen, dus je kunt ze niet langer simpelweg negeren - dit zijn niet één of twee mensen elke zes maanden, dit is een aanzienlijk deel van je publiek. en ze moeten zich op hun gemak voelen bij het gebruik van uw website (anders zullen ze het niet doen).

3) Dringende informatie. Als uw bron nieuws/ urgente informatie, en er is een grote kans dat de gebruiker deze informatie van de telefoon moet lezen (omdat hij geen ander apparaat bij de hand heeft) in dit moment tijd, moet ervoor worden gezorgd dat hij daartoe de gelegenheid heeft.

Het verschil tussen een responsive website en een mobiele versie (applicatie) van een website

Mobiele versies van websites en mobiele applicaties, speciaal ontworpen voor verschillende mobiele apparaten, lossen ook het probleem van het gemak van het bekijken van de website op, maar hebben enkele nadelen.

1) Voor elk type besturingssysteem je hebt een eigen applicatie/website versie nodig. Dit vergt extra middelen, zowel tijd als geld.

2) De noodzaak om de applicatie te downloaden. Om uw app te kunnen gebruiken, moeten gebruikers deze downloaden. Dit vergt wat extra inspanning van gebruikers, en velen zullen dit niet doen tenzij ze er absoluut zeker van zijn dat ze de applicatie echt nodig hebben en van plan zijn deze regelmatig te gebruiken.

3) Verkeersscheiding. Vanuit het oogpunt van websitepromotie is een mobiele applicatie niet handig omdat deze al het bronverkeer opsplitst in websiteverkeer en applicatieverkeer, wat eruit zal zien als minder websiteverkeer.

4) De noodzaak om sitematerialen te integreren. In het geval van een mobiele applicatie moet u de site synchroniseren met de applicatie (extra bronnen), of dat doen dubbel werk over het vullen van de site en applicatie met materialen.

in tegenstelling tot mobiele applicaties, adaptief ontwerp– dit is één siteadres, één ontwerp, één managementsysteem en site-inhoud.

Natuurlijk heeft adaptief ontwerp ook zijn nadelen, waarvan de belangrijkste de relatieve nieuwheid van de technologie is en, als gevolg daarvan, het gebrek aan goede specialisten en kennis over het ontwerpen van responsieve websites.

Principes van responsief ontwerp

Ontwerp begint met een responsieve versie van de website voor mobiele apparaten. In dit stadium streven ontwerpers ernaar om de betekenis en de belangrijkste ideeën correct over te brengen klein scherm en slechts één kolom. Indien nodig wordt de inhoud verkleind, waardoor onnodige wordt verwijderd informatie blokken en de belangrijkste dingen achterlaten.

• Ontwerpen voor mobiele apparaten vanaf de basis vroege stadia("mobiel eerst");
• Gebruik maken van een flexibele, op rasters gebaseerde lay-out;
• Gebruik flexibele afbeeldingen(flexibele afbeeldingen);
• Werken met mediaquery's;
• Stapsgewijs verbeteren toepassen.

Soorten responsieve lay-outs

Het artikel over Habrahabr presenteert de belangrijkste soorten adaptieve lay-outs die momenteel bestaan.

1) Rubber

Eenvoudig te implementeren en duidelijk voor het gebruikerstype van de sitepresentatie. De hoofdblokken worden gecomprimeerd tot de breedte van het scherm van het mobiele apparaat, waar dit onmogelijk is: ze worden herschikt tot één lange tape.

2) Blokken overbrengen

Een voor de hand liggende manier voor een site met meerdere kolommen: door de schermbreedte te verkleinen extra blokken(zijbalken) worden naar de onderkant van de lay-out verplaatst.

3) Wissel van lay-out

Deze methode is het handigst bij het lezen van een site vanaf verschillende apparaten: voor elke schermresolutie wordt een aparte lay-out ontwikkeld. De methode is arbeidsintensief en daarom minder populair dan de vorige twee.

4) Aanpassingsvermogen “met weinig bloed”

Een zeer eenvoudige methode die geschikt is voor eenvoudige sites. Bereikbaar door simpelweg afbeeldingen en typografie te schalen. Niet erg populair, omdat... mist flexibiliteit.

5) Panelen

Een methode die afkomstig is van mobiele applicaties, waar extra menukaart kan verschijnen wanneer u horizontaal of verticaal tikt. Het grootste nadeel is dat de acties niet duidelijk zijn voor de gebruiker: het is zeer ongebruikelijk om te zien mobiele navigatie op de website. Maar na verloop van tijd kan de methode behoorlijk populair worden.

Er moet aan worden herinnerd dat de hierboven gepresenteerde lay-outs dat niet zijn universele oplossingen- voor elk project is het noodzakelijk om de meest geschikte methode te kiezen voor behoeften en mogelijkheden.

Meer recentelijk, letterlijk tien jaar geleden, lieten webontwerpers zich bij het maken van websites leiden door een bepaalde gemiddelde schermbreedte van de monitoren van gebruikers. Aanvankelijk was de meest voorkomende resolutie 800*600, daarna groeide deze uit tot 1024*768. Op internet kun je de volgende woorden tegenkomen: “De site is geoptimaliseerd voor die en die resolutie.” Met de toename van het aantal schermformaten is het populair geworden Rubberen lay-out sites, waarover ik schreef in Dankzij dit type lay-out was het mogelijk om sites op monitoren met verschillende resoluties te bekijken.

Echter, binnen afgelopen jaren De rubberen lay-out is niet langer een “wondermiddel”. Aan de ene kant verschenen monitoren met enorme schermformaten, aan de andere kant vond er een mobiele revolutie plaats: het aantal verbindingen met internet van mobiele apparaten (laptops, smartphones, tablets) nam toe meer nummer desktop computers. Het mobiele verkeer groeit en er is behoefte aan juiste weergave site op schermen groot nummer verschillende apparaten. Het maatbereik is te breed.

Als de site er op kleine schermen slecht uitziet, verlaat de bezoeker deze eenvoudigweg, neemt het verkeer af en worden gedragsfactoren verergerd.

Om te controleren hoe uw website er op verschillende apparaten uitziet, kunt u de dienst gebruiken Schermvlieg. Om dit te doen, voert u het siteadres in en selecteert u het gewenste apparaat uit een vrij grote lijst. Het zou kunnen desktop computer en tabletten verschillende types en mobiele telefoons. U kunt de schermoriëntatie wijzigen van liggend naar staand en omgekeerd.

Hoe het probleem van normale websiteweergave op verschillende apparaten oplossen? Er zijn twee uitwegen:

• Gebruik twee versies van de site, de reguliere versie voor desktop computers en mobiel.
• Gebruik responsief ontwerp.

Welke van deze opties moet worden toegepast, is uiteraard aan de eigenaar of klant van de site. Als de site lang geleden is gemaakt en een handgetekend ontwerp heeft dat deel uitmaakt van het merk, dan is het misschien de moeite waard om er een mobiele versie van te maken en de oude te laten staan. Bij nieuwe websites kies je uiteraard voor een responsive design.

Wat is responsief ontwerp?

Wat voor soort ontwerp is dit en hoe verschilt het van rubber?

Het rubberen sjabloon verandert niet van structuur wanneer de schermbreedte verandert, maar verandert alleen de afmetingen. Een webpagina heeft bijvoorbeeld drie kolommen: aan de linkerkant staat een menu met een breedte van 25% van de vensterbreedte, in het midden is de inhoud – 50%, aan de rechterkant is een zijbalk – 25%. Met een vensterbreedte van 1000 px hebben ze respectievelijk een grootte van 250, 500 en 250 px, wat heel normaal is. Maar als je gebruikt mobiele telefoon met een klein scherm van 320 px breed, worden de kolommen kleiner tot 80, 160, 80 px en worden ze onleesbaar.

Wat is de oplossing? Het gaat om het radicaal veranderen van de webpagina. Deze verandering bestaat uit het feit dat na een geleidelijke afname van de breedte van de kolommen de paginastructuur opnieuw wordt opgebouwd - deze wordt uitgerekt tot één kolom. Maar dit is niet het enige verschil.

Responsieve ontwerpvereisten

• Past zich aan de schermgrootte en -oriëntatie aan, van grote desktopmonitors tot mobiele telefoons.
• Pas het formaat van afbeeldingen aan bij het wijzigen van de schermresolutie. Zelfs op sites met een ‘vloeiend’ ontwerp veranderen de afbeeldingsformaten niet, en bij een bepaalde schermbreedte horizontale streep scroll om ze te bekijken. Bij gebruik van responsief ontwerp ‘passen’ afbeeldingen zich ook aan de schermgrootte.
• Onbelangrijke sjabloonelementen verwijderen. Ze kunnen zijn als decoratieve elementen en software die niet werkt op mobiele apparaten.
• Hoge downloadsnelheid. Snelheid mobiel internet is nog steeds relatief klein, en hiermee moet rekening worden gehouden bij het ontwikkelen van een site die bedoeld is voor weergave op mobiele apparaten.
• Gebruik is relatief grote knoppen. Mobiele apparaten maken gebruik van aanraakinvoer en bij het ontwikkelen van het ontwerp moet rekening worden gehouden met de afwezigheid van een cursor.
• Werk met mobiele functies bijvoorbeeld geolocatie.

Hoe responsief ontwerp tot stand komt

Dit ontwerp is gebaseerd op met behulp van CSS mediavragen Dankzij deze verzoeken worden eerst de parameters bepaald van het apparaat dat de bezoeker gebruikt, en afhankelijk van deze keuze wordt de juiste stijl verbonden, dat wil zeggen dat bij adaptief ontwerp één site wordt gebruikt met een reeks stijlen voor verschillende apparaten. Als een bezoeker bijvoorbeeld de site bezoekt met gewone computer, één stylesheet is verbonden en hij ziet een site met een grote kleurrijke header, horizontale menukaart, verschillende kolommen met inhoud, en bij gebruik van de iPad wordt een andere stijl toegepast, en in plaats van een enorme koptekst wordt een klein logo weergegeven, verandert het menu in een verticale lijst en wordt de inhoud in één kolom getrokken.

Responsieve sjablonen

Is het mogelijk om opnieuw te maken bestaande sjabloon website onder adaptieve versie? Dat kan uiteraard als je voldoende kennis hebt van HTML en CSS. Maar als u een contentmanagementsysteem gebruikt - WordPress, Joomla!, Drupal, dan is het beter om het te vinden kant-en-klaar sjabloon, Nu adaptieve sjablonen er is veel ontwikkeld. Trouwens, in mijn artikel zou ik nu nog een item moeten toevoegen “Het sjabloon controleren op aanpassingsvermogen”.

We kunnen dus zeggen dat responsief ontwerp dat wel is momenteel Het is het meest op een moderne manier website ontwikkeling en, ondanks dat relatieve complexiteit, de toekomst ligt achter hem. De vooruitgang staat niet stil, er verschijnen nieuwe, complexere apparaten, en software het wordt voor hen ook moeilijker.

Trouwens, ik kwam net opdagen unieke cursus Andrej Kudlaya. Gebruik makend van Bootstrap-framework, vandaag de dag kunt u een website maken met een mooi, prettig en professioneel ontwerp, en hoeft u geen professional te zijn op het gebied van lay-out. Met behulp van frameworks kan zelfs de meest beginner in het bouwen van websites een pagina opmaken, een website van één pagina of een landingspagina maken. Bovendien zal de site behoorlijk professioneel zijn en is de tijd die aan het maken ervan wordt besteed minimaal.

Dit is allemaal heel serieus, maar om even te pauzeren, stel ik voor om puzzels te maken en naar een ander schilderij van mijn landgenoot, People's Artist of Russia N.P.

Schrijf uw mening over responsief ontwerp in de opmerkingen.

Van de auteur: responsive website-ontwerp is absoluut nieuwe aanpak design krijgt steeds meer aandacht, maar gegeven hoe verschillend het is van traditionele ontwikkelmethoden, kan het in eerste instantie onbetaalbaar lijken voor nieuwe webontwerpers en -ontwikkelaars. In dit artikel ga ik er enkele behandelen de belangrijkste punten gerelateerd aan de ontwikkeling en implementatie van responsive webdesign en maak uw leven, vrienden, een beetje gemakkelijker.

De klassieke aanpak voor het maken van een website ziet er ongeveer zo uit: een ontwikkelingsblok, een webontwerpblok, een lay-outblok, enz. De laatste paar jaar is alles echter dramatisch veranderd: de term ‘webdesign’ wordt geleidelijk terwijl ‘adaptief ontwerp’ zijn positie verraderlijk versterkt en geleidelijk verschuivingen teweegbrengt in het bewustzijn van specialisten.

Door over het algemeen mag webdesign niet zo ondubbelzinnig worden opgevat, en de snelle ontwikkeling van adaptief ontwerp, dat als bijna een industriële standaard wordt beschouwd, heeft een hele carrousel met zich meegebracht diverse instrumenten en platforms.

Concept van aanpassingsvermogen

“Wat is responsive design en waar past het zich aan aan?” - kan een onwetend persoon vragen. Ik zal je antwoorden: op het type apparaat dat wordt gebruikt. Responsief ontwerp zorgt voor een goede weergave van webpagina's op verschillende gadgets die met internet zijn verbonden.

Dezelfde website moet er geweldig uitzien op laptops, smartphones, tablets, etc., ongeacht het gebruikte schermformaat en de gebruikte resolutie. Tegelijkertijd moet het voor gebruikers even gemakkelijk zijn om webpagina's voor alle formaten te bekijken, zonder de noodzaak om bijvoorbeeld afzonderlijke blokken uit te breiden om niets te missen de gewenste knop.

Vanwege het feit dat elk adaptief project individueel en iteratief is, is het vrij moeilijk om alle processen te analyseren om oplossingen voor alle situaties te bieden en de werkefficiëntie te verbeteren. Er zijn echter algemene succesvolle strategieën en technieken voor het implementeren, verbeteren en creëren van responsief websiteontwerp die in vrijwel elke situatie kunnen worden toegepast.

Mobile First-strategie

Deze strategie De ontwikkeling werd in 2009 voorgesteld door Luke Wroblewski, auteur van boeken en artikelen over webdesign, directeur sociaal netwerk Bagcheck, dat slechts negen maanden na de oprichting werd overgenomen door Twitter Inc.

De door Luke Wroblewski voorgestelde ontwikkelingsaanpak heette " Mobiel eerst"("Mobile First") om drie redenen:

de mobiele omgeving stelt u in staat zich te concentreren en zich te ontdoen van de rommel die ontstaat als gevolg van het "rommelen" van een grote hoeveelheid ruimte op het scherm;

mobiele markt heeft de neiging zich in een razend tempo te ontwikkelen;

De mobiele omgeving wordt geassocieerd met vele mogelijkheden (camera, multi-touch gebaren, GPS, versnellingsmeter, geolocatie).

Sindsdien is webdesign gestaag in de richting van deze aanpak verschoven. Veel webontwerpers en webontwikkelaars denken eerst na over hoe ze een responsief ontwerp kunnen maken voor de mobiele versie van de site, en gaan vervolgens aan de slag met desktopontwikkeling.

De ‘Mobile First’-strategie begint met het creëren van de structuur en inhoud van een mobiele versie die werkt in internetomgevingen met lage snelheid, en beweegt zich richting belangrijke breekpunten met hogere snelheden. snelle verbinding, terwijl de vereenvoudigde versies worden verbeterd en geoptimaliseerd.

Moderne tendensen en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

Dit zorgt voor innovatief en effectief werk alle soorten apparaten. Website-ontwikkelaars richten zich op de behoeften van gebruikers, creëren geoptimaliseerde en snelle pagina's en besteden aandacht aan belangrijke inhoud. Overigens hanteert zelfs Google de ‘Mobile First’-aanpak.

Contentstrategie “Content uit”

Het doel van het creëren van responsief ontwerp is om de beste bruikbaarheid in elke context te bieden. Dit is een uitstekende gelegenheid om inhoud te analyseren en deze op alle soorten apparaten gemakkelijk toegankelijk en leesbaar te maken.

Velen die geen Mobile First-strategie gebruiken, geven de voorkeur aan een Content First-strategie. Dit is natuurlijk het juiste om te doen, maar je moet deze oproep niet letterlijk nemen en denken dat je pas moet beginnen met het ontwikkelen van een ontwerp als alle inhoud klaar is.

Er moet voortdurend inhoud worden gemaakt en besproken, zowel in de fase van het maken van een responsief websiteontwerp als na voltooiing ervan! Zoals de bekende ontwerper Cennydd Bowles zei: “design en inhoud moeten hand in hand gaan.” Ze moeten elkaar aanvullen.

De strategie ‘Contentstructuur eerst’ is een heel andere zaak. Allereerst moet je duidelijk zijn over de missie van de site, wat deze de wereld probeert te vertellen. En denk pas dan zorgvuldig na over de structuur van de inhoud, de creatiemethoden, de typen en het doel van elk element, terwijl de gebruiker op de voorgrond moet worden geplaatst.

U moet over een strategie beschikken die ervoor zorgt dat u elke gebruiker in elke fase van zijn reis op uw bron van de benodigde inhoud voorziet. De structuur van de site moet gebaseerd zijn op onderzoek naar uw gedrag en behoeften. doelgroep.

Als u uw inhoud in de beginfase van de ontwikkeling van de website goed structureert, kunt u deze in de toekomst eenvoudig overbrengen naar andere platforms en apparaten. Het kan natuurlijk geen kwaad om een ​​voorbeeld van responsief ontwerp als referentie voor u te hebben.

Neem de tijd om te schetsen en prototypen te maken

Beslissen voor welke resoluties responsief ontwerp moet worden gemaakt, moet beginnen met het creëren van een georganiseerde lay-out - schetsen, die in de toekomst gemakkelijk kan worden geschaald.

De verscheidenheid aan apparaten met hun mogelijkheden, resoluties en schermformaten betekent een groot aantal van lay-outs. Het maken van een schets legt de basis voor een toekomstig prototype van het project. Het kan gebruikt worden om een ​​discussie ter sprake te brengen verschillende ideeën Maak ruwe schetsen die de basis zullen vormen voor het raamwerk van de site.

Zodra de schets gereed is, kunt u doorgaan met het maken van een werkende conceptversie van de website of HTML-sjabloon. Dit proces wordt prototyping genoemd en omvat minimaal visueel ontwerp, om de interactie en functionaliteit te verbeteren.

Deze strategie zal u helpen uw hele aanpak voor het creëren van responsief ontwerp te heroverwegen. In plaats van het ontwikkelen van “mobiele sites” en “websites”, zult u zich nu concentreren op het ontwikkelen van flexibele systemen met een reeks regels die bepalen hoe inhoud wordt geleverd en geleverd op basis van context.

Ik hoop dat dit artikel nuttig was voor zowel ervaren als beginnende webontwerpers.

En tot slot de traditionele afscheidswoorden: maak de site nuttig, handig en vertrouwd, ongeacht het apparaat waarop deze wordt bekeken. Tot ziens, vrienden!

P.S.: heb jij je al geabonneerd op onze blogupdates?

Moderne trends en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

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 ook weten waarvoor de meest optimale oplossingen bestaan. 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.

Sollicitatie deze methode 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 tablets en mobiele telefoons 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 op 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 desondanks positieve kanten Hoewel responsive design voor de hand ligt, kent deze methode een aantal nadelen. De grootste is de laadsnelheid, die hierdoor aanzienlijk wordt verlaagd hoge resolutie afbeeldingen en andere visuele elementen die nodig zijn voor het ontwerp verschijning bron.

Als u kiest voor een responsieve aanpak, zullen uw ontwerpers altijd door deze factor worden beperkt, omdat complexe visuele elementen het laden op mobiele apparaten kunnen vertragen.

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 behulp van 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 een responsieve siteserver het apparaattype van de gebruiker en geeft een vereenvoudigde versie van de blog weer, die alleen de meest noodzakelijke interface-elementen en afbeeldingen van lagere kwaliteit bevat.

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

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 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.

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 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 goede weg 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 en schrijf alles op vereiste stijlen en verzoeken, controleer ik het aanpassingsvermogen van de site wanneer 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 komt het? 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, mobiele browser begrijpt 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 resoluties waarop u zich moet concentreren en waar u speciale aandacht aan moet besteden bij het maken van adaptieve lay-outs. Dit zijn de meest voorkomende soorten schermresoluties.

bootstrap-responsief ontwerp

Het is erg handig om bootstrap te gebruiken voor het maken van een adaptieve lay-out. 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 bij het bekijken op mobiel apparaat deze blokken zullen 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? Je hebt dus mediaquery's in CSS geschreven, bootstrap aangesloten en gebruikt vereiste lessen. 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? 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.