Hallo allemaal! Toen ik onlangs naar de statistieken van een van mijn projecten keek, realiseerde ik me dat het tijd was om te leren hoe je een adaptief website-ontwerp kunt maken, dat wil zeggen een ontwerp dat er goed uit zal zien op zowel desktopcomputers zowel laptops als mobiele apparaten Oh. Kijk zelf maar, hint Metrica.

Wat vind jij van deze foto? Misschien in sommige onderwerpen het percentage mobiel verkeer Het zal minder zijn, in andere zal het meer zijn, maar bezoekers die je uitlezen vanaf een smartphone of tablet kun je in ieder geval niet meer negeren.

Weet u hoe gebruikers van mobiele apparaten uw website zien? Gelukkig is er een uitstekende service om dit te controleren: responsinator.com

Alles is hier waanzinnig eenvoudig: u voert het siteadres in en ziet hoe het eruit ziet op mobiele apparaten. Laten we een voorbeeld nemen van een blog die iedereen waarschijnlijk kent.

Bij Alexander Borisov mooi sjabloon, het is meteen duidelijk dat er veel geld is geïnvesteerd in het ontwerp en de indeling. Het lezen van een blog vanaf een telefoon is echter erg lastig, en het zou mij niet verbazen als het foutpercentage onder gebruikers van mobiele apparaten veel hoger is dan onder degenen die de site vanaf een computer bezoeken.

Wat te doen? Er zijn twee uitwegen: alles laten zoals het is en kijken hoe andere projecten het uwe omzeilen in de zoekresultaten van zoekmachines, of het ontwerp van uw website adaptief maken.

Wat is responsief ontwerp

In eerste instantie zag ik het verschil niet tussen adaptieve en ‘vloeiende’ lay-out, waarbij de blokgroottes veranderen afhankelijk van de schermbreedte. Er is echter een verschil.

Responsief ontwerp rekt of krimpt niet alleen in de breedte, het past zich aan de schermgrootte aan, waardoor de stijl van de blokken soms volledig verandert.

Het eenvoudigste voorbeeld: het inhoudsgebied wordt over de gehele breedte van het scherm uitgerekt en de zijbalk wordt naar beneden verplaatst of verdwijnt volledig van de pagina. Of het menu verandert van een normaal horizontaal menu in een vervolgkeuzelijst.

Hoe u een responsief ontwerp voor uw website maakt

Afhankelijk van uw budget en kennis van CSS/HTML kunnen er meerdere opties zijn.

Bestel adaptieve lay-out bij een freelancer

De meest correcte optie is naar mijn mening ook de meest impopulaire. Omdat plezier niet goedkoop is. En toch, als het geld het toelaat en er geen wens is om de fijne kneepjes van de lay-out te begrijpen, is het beter om een ​​studio of freelancer te vinden die je sjabloon voor mobiele apparaten zal aanpassen of een nieuwe zal maken. En u weet al hoe u de werking ervan kunt controleren op apparaten met verschillende resoluties - responsinator.com kan u helpen.

Zoek een kant-en-klaar ontwerp

IN de laatste tijd Bijna alle ontwerpers proberen hun sjablonen aan te passen voor mobiele apparaten. Een kant-en-klaar ontwerp kunt u bijvoorbeeld hier zoeken:

• www.templatemonster.com - een van de meest populaire collecties betaalde sjablonen voor verschillende CMS en alleen HTML-sites.
• www.templatemo.com - veel gratis opties modern ontwerp.

Deze optie is geschikt voor degenen die niet op zoek zijn naar een exclusief ontwerp of die hun eigen wijzigingen in de code kunnen aanbrengen om de sjabloon uniek te maken.

Gebruik kaders

Kader - je zou kunnen zeggen het raamwerk van de sjabloon, de hoofdbestanden en een raster van blokken. Ontwerpers houden ervan vanwege hun gebruiksgemak en tijdbesparing, omdat u met een kant-en-klare "vis"-sjabloon geen tijd aan routine hoeft te verspillen. Als je weet hoe je met raamwerken moet werken, gebruik ze dan om te creëren adaptief ontwerp- een uitstekende oplossing.

Op Habré vindt u een enorme lijst met adaptieve raamwerken voor elke smaak. Maar de meeste zijn vrij moeilijk te gebruiken en hebben een groot volume. Daarom raad ik voor degenen die van minimalisme houden, nog een lijst met lichtgewicht adaptieve raamwerken van Beloweb.ru aan. Kijk tegelijkertijd eens goed naar de blog, er zijn veel nuttige ‘goodies’ voor ontwerpers en lay-outontwerpers.

Maak zelf de indeling

Deze methode is voor degenen die niet op zoek zijn naar gemakkelijke manieren en alles zelf willen uitzoeken. Om uw sjabloon responsief te maken, moet u in wezen twee dingen gebruiken:

Meta- viewport-tag
Deze bepaalt het type apparaat waarmee de bezoeker de site heeft bezocht en stelt de juiste schermbreedte in. Kopieer deze code gewoon naar de kop van uw site.

@mediaregel
Dankzij welke we kunnen schrijven verschillende stijlen voor dezelfde blokken in uw CSS-bestand. Het ziet er ongeveer zo uit:

#left( breedte: 600px; zwevend: links; marge-rechts: 10px; ) #right( breedte: 400px; zwevend: rechts; ) @media-scherm en (max. breedte: 1010px)( #left, #right( breedte : 98%; zwevend: geen; marge: 10px automatisch;

In dit voorbeeld het blok #links heeft een breedte van 600 pixels en bevindt zich links van het blok #rechts 400 pixels breed. Maar als de monitorresolutie minder dan 1010 pixels bedraagt, verwijderen we de verpakking van beide blokken en strekken we ze uit tot 98% van de schermbreedte.

En zo moet je regels schrijven voor de volgende schermformaten:

• 320px voor iPhone 3-5 in verticale positie
• 480px voor iPhone 3-4 in horizontale positie
• 568px voor iPhone 5 horizontaal
• 384px voor smartphone in verticale positie
• 600px voor smartphone in horizontale positie
• 768px voor iPad horizontaal
• 1024px voor iPad in verticale positie

Een volledige lijst met resoluties kunt u vinden op responsinator.com of in het Yandex.Metrica-rapport voor uw site (sectie Technologieën/Beeldschermresoluties). Kortom, voor degenen die bekend zijn met de lay-out van websites zal het niet moeilijk zijn om dit probleem te begrijpen.

Weet je, ik geef zelden links naar betaalde cursussen(omdat ik nooit iets aanbeveel dat ik zelf nog nooit heb gebruikt), maar dit is werkelijk het beste trainingsmateriaal over lay-out dat ik ooit heb bekeken. Het is dankzij Mikhail dat mijn blogsjabloon nu niet alleen is aangepast aan verschillende schermresoluties, maar ook lichter is geworden vorige versie en beter geoptimaliseerd voor zoekmachines.

Trouwens, als je het artikel vanaf een mobiele telefoon leest, schrijf dan of alles aanwezig is, is alles handig? Dat is alles voor vandaag. Als je vragen of aanvullingen hebt, welkom bij de reacties, ze staan ​​open voor iedereen.

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 zodat deze op het apparaat van de gebruiker past met behulp van mediaquery's, of een CSS3-module waarmee u verschillende stijlen (of zelfs stylesheets) kunt instellen, afhankelijk van de schermresolutie, de grootte 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 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 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 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 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 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 wordt responsive design dat optimale oplossing.

Responsief modern websiteontwerp is een van de belangrijkste indicatoren voor de kwaliteit ervan.

Het is geen geheim dat het aandeel van het gebruik van mobiele apparaten voor toegang tot internet voortdurend toeneemt. Deze trend is typerend voor zowel het hele internet als voor de Runet in het bijzonder.

En als we onze bezoekers, lezers en potentiële kopers, dan moet u ervoor zorgen dat uw site correct en leesbaar wordt weergegeven op mobiele apparaten, van tablets tot smartphones.

Bovendien beoordelen zoekmachines sites die zijn aangepast voor mobiele apparaten gunstiger. Dit geldt vooral voor de PS van Google, die dergelijke eisen rechtstreeks aan sites oplegt.

Wat is responsive website-ontwerp

De betekenis van adaptief ontwerp is de mogelijkheid om op zijn hoogst geplaatst materiaal op de site comfortabel te bekijken en te lezen verschillende apparaten.

De belangrijkste criteria voor het beoordelen van kijkgemak zijn:

1. Kijkgebied.
2. Breedte inhoud.
3. Grootte van lettertypen, afbeeldingen, videovensters.
4. Actieve elementen.

Met andere woorden: de tekst moet leesbaar zijn, afbeeldingen en video's moeten duidelijk zichtbaar zijn, menu-items en links moeten zichtbaar, toegankelijk en begrijpelijk zijn.

Hoe u uw website responsief kunt maken

Er zijn verschillende manieren om ervoor te zorgen dat uw site reageert op weergave op apparaten met verschillende schermresoluties. De belangrijkste zijn:

• Adaptieve websitesjabloon.
• Mobiele versie van de site.
• Installatie speciale toepassing op het apparaat van de gebruiker.

De ervaring leert dat creëren de meest optimale oplossing is adaptieve sjabloon. De andere twee methoden lossen dit probleem ook op, maar zijn merkbaar inferieur aan de eerste methode.

Bij gebruik van de mobiele versie van de site is de hoeveelheid arbeid, geld en tijd die wordt besteed vergelijkbaar met het maken en voltooien van een adaptieve sjabloon.

Maar tijdens de werking worden er acties toegevoegd om de relevantie van de mobiele versie van de site te behouden en informatie met de hoofdsite te synchroniseren. Ja en voor SEO-promotie zijn toegevoegd aanvullende vragen met duplicaten enz.

De voordelen van de mobiele versie zijn dat alles verwijderd is onnodige elementen, effecten, advertenties, abonnementen, etc. De site wordt niet alleen correct weergegeven op mobiele apparaten, maar laadt ook zo snel mogelijk. Dit is het belangrijkste voordeel.
Grote portalen en websites kunnen dergelijke versies betalen sociale netwerken, grote bedrijfssites...

Het installeren van de applicatie op mobiele apparaten is helemaal niet van u afhankelijk. Ten eerste kan het niet op elk apparaat worden geïmplementeerd. Ten tweede vereist dit extra kennis en actie, en niet alle gebruikers zullen het eens zijn met de extra rompslomp.

Dergelijke applicaties worden meestal geïnstalleerd door gebruikers die de auteur vertrouwen en nieuwe informatie van hem verwachten. nuttige informatie. Dit lijkt enigszins op een e-mailabonnement.

Samenvattend concluderen we: het creëren van een responsief ontwerp voor uw website zal de meest winstgevende oplossing zijn voor een kleine of middelgrote website.

Adaptieve website-indeling

Om een ​​responsief ontwerp te maken, zul je je toevlucht moeten nemen tot technologie adaptieve indeling. De essentie ervan is als volgt:
Maak de sjabloon "rubberachtig"

Dat wil zeggen, houd u niet strikt aan de paginabreedte, maar gebruik relatieve eenheden. Dat wil zeggen, maak uw sjabloon proportioneel samendrukbaar, dat wil zeggen "rubber".

Om dit te doen, wordt de paginabreedte ingesteld css-eigenschap max-with in plaats van breedte, en relatief ten opzichte van deze waarde wordt de breedte van andere elementen geselecteerd als een percentage (%).

Schermbreedte definiëren "controlepunten"

Het bepalen van de controlepunten (CP) van de schermbreedte is noodzakelijk voor het plannen van verdere acties.

Bijvoorbeeld.
De maximale schermbreedte is 1000 pixels. De schermbreedte van een tablet is 800 pixels, een smartphone is 420 pixels.

Deze controlepunten (CT) kunnen verschillend zijn verschillende soorten sites. Soms is één voldoende, bijvoorbeeld 600 pixels, en wordt de kijkkwaliteit bij kleinere resoluties gegarandeerd dankzij het “rubberachtige” van de sjabloon.

Het plannen van de schermindeling voor elke CT-scan

Regel volgens deze controlepunten de locatie van individuele blokken op de site zo dat ze correct worden weergegeven op mobiele apparaten.

Om dit te doen, zullen sommige blokken, bijvoorbeeld een zijbalk, onder het hoofdinhoudsblok moeten worden geplaatst, en secundaire blokken zoals advertenties, sliders en screensavers kunnen volledig worden verlaten.

U kunt meer gedetailleerde informatie krijgen over het oplossen van dergelijke problemen door een gratis cursus responsief ontwerp te volgen van het WebFormMySelf-team.

Mediavragen

Voor de taak controlepunten je moet mediaquery's gebruiken. Deze richtlijnen zijn CSS3-standaarden voor het regelen van de weergave van sitepagina-inhoud verschillende resoluties scherm.
Deze richtlijn ziet er ongeveer zo uit:

Alleen @media-scherm en (max. breedte: 520px)( .art-Header-jpeg( hoogte: 80%; weergave: geen; ) .art-Logo( positie: vast; boven: 10px; ) .art-Logo-text( weergave: geen; ) ...... ..... css-operatoren ..... )

Responsieve WordPress-blogsjabloon

Er zijn verschillende manieren waarop u een responsieve sjabloon voor uw WordPress-blog kunt maken.

1. Installeer de juiste plug-in.
2. Koop een kant-en-klaar adaptief sjabloon.
3. Aanpassen bestaande sjabloon zelf of bestel een dienst bij een specialist.

Omdat ik besloot om met de tijd mee te gaan, begon ik ook met de voorbereidingen om mijn blog aan te passen. Er is veel op internet te vinden over thema-aanpassingsplug-ins voor WP. gedetailleerde informatie. Ik raakte bekend met het werk en de vereisten van populaire plug-ins en besloot dat het gebruik ervan niet de meest optimale oplossing voor mijn blog zou zijn.

Het kopen van een modern adaptief sjabloon op internet is ook vrij eenvoudig, als je maar het geld had. Maar je moet de sjabloon zelf leuk vinden en aan al je wensen voldoen.

Kortom, ik koos voor de derde optie en besloot mijn sjabloon zelf aan te passen.

Responsieve template voor WordPress zelf

Nadat ik bekend was geraakt met de principes van het aanpassen van ontwerp voor mobiele apparaten, ging ik vrolijk aan de slag, maar voelde dat mijn kennis van html, css en php niet voldoende was.

En ik ben al geneigd om te kopen kant-en-klaar sjabloon, maar op dat moment kreeg ik informatie over de cursus van twee Andreev Bernatsky en Kudlay “WordPress-Master van Persoonlijke blog naar Premium-sjabloon". Eén van de blokken van deze cursus bevatte lessen over het aanpassen van een kant-en-klaar sjabloon voor mobiele apparaten.

De prijs van de cursus was vergelijkbaar met de prijs van een nieuwe, moderne responsieve template. En ik besloot dit bedrag te besteden aan de aanschaf van een cursus en kennis opdoen in plaats van een kant-en-klaar sjabloon. Ik denk. Dat de investering correct en volledig gerechtvaardigd was.

Google-service voor het controleren van de laadsnelheid van websites voor mobiele apparaten en desktopapparaten - https://developers.google.com/speed/pagespeed/insights/
Hier krijgen we aanbevelingen over maatregelen om het laden van uw site te versnellen.

Ik wilde nog een paar diensten kort beschrijven. maar ik kwam een ​​goede tegen gedetailleerd artikel en besloot niet te belasten, maar je een link ernaar te geven - http://habrahabr.ru/post/189726/.

Als je deze publicatie leuk vond, deel hem dan met je vrienden op sociale netwerken.
U kunt uw opmerkingen aan het artikel toevoegen.

Termen als responsive en adaptive design worden de laatste tijd nogal vaak gebruikt. Het blijkt dat deze twee concepten voor sommige mensen vrijwel identiek zijn. In dit artikel zullen we het hebben over wat responsief en adaptief ontwerp is en wat het verschil daartussen is.

Vanaf het moment tabletcomputers en smartphones beschikbaar zijn geworden voor het grote publiek, worden websites steeds vaker bekeken via aanraakgestuurde apparaten met kleine schermen. Veel internetbronnen bleken totaal ongeschikt voor gebruik door de bezitters van dergelijke apparaten.
Er zijn twee fundamenteel verschillende benaderingen ontstaan ​​voor het maken van websites voor mobiele apparaten: adaptief webontwerp en responsief webontwerp. Laten we ze allemaal afzonderlijk bekijken en vervolgens hun toepassingen en functies vergelijken.

Wat is responsief ontwerp

Responsive webdesign (RWD) is een ontwerpbenadering waarbij een website zo eenvoudig mogelijk te gebruiken is: handig bekijken website met een minimum aan formaatwijzigingen en onnodig scrollen - op de meest uiteenlopende apparaten. Responsief ontwerp heeft de volgende kenmerken:

• Bij het maken van een responsief ontwerp worden alleen HTML en CSS gebruikt - zonder JavaScript-verbindingen om de “responsiviteit” van ontwerpelementen te bepalen.
• Een responsieve lay-out bepaalt hoe website-elementen eruit zullen zien verschillende apparaten; deze elementen worden echter niet verborgen/vervangen door andere, en hun gedrag, evenals de functies die ze uitvoeren, veranderen niet.
• Drie kernprincipes van responsief ontwerp:
  1. opstelling van alle elementen binnen het modulaire raster;
  2. alle lay-outelementen en mediabestanden (inclusief afbeeldingen) zijn “flexibel” - hun afmetingen zijn afhankelijk van de schermgrootte;
  3. werken met mediaquery's - een CSS3-module waarmee u verschillende stijlen (of zelfs stijlbladen) kunt instellen, afhankelijk van de schermresolutie, de grootte en andere kenmerken.
• Responsief ontwerp wordt gemaakt met behulp van responsieve markup (niet te verwarren met responsief ontwerp). Adaptieve lay-out houdt in dat er op de site verschillende stijlen worden gemaakt, met opties voor de rangschikking van elementen modulair raster en verschillende ontwerpelementstijlen. Deze opties vervangen elkaar naarmate de schermgrootte verandert en er bepaalde overgangspunten tussen worden gevormd verschillende soorten site-indeling/stijlen.
• Bij responsive design is het niet nodig om met objectmodel elementen op de pagina impliceert geen verandering in de hiërarchie/nesting van blokken en objecten wanneer het type opmaak verandert.

Wat is responsief ontwerp

Adaptief webontwerp (AWD) is een ontwerp dat verschillende site-indelingen of lay-outs manipuleert om het beste gebruik op specifieke, vooraf bepaalde apparaten en schermresoluties te garanderen.

• In het geval van adaptief ontwerp kunnen site-elementen worden verborgen en vervangen door andere; Het gedrag en de functionaliteit van individuele website-elementen kunnen veranderen.
• Responsief ontwerp maakt uitgebreid gebruik van JavaScript om het gedrag en de functionaliteit van objecten op een site te controleren.
• Adaptief ontwerp vereist het werken met het objectmodel van elementen op de pagina en omvat het wijzigen van hun hiërarchie/nesten op verschillende apparaten.
• Is dat niet het geval? verplichte bepaling hetzelfde uiterlijk van de site en de functionaliteit ervan in verschillende browsers. Het is mogelijk om nieuwe technologieën te gebruiken die niet worden ondersteund door oudere versies van programma's - omdat het ontwerp, zoals hierboven vermeld, zich aanpast aan bepaalde soorten apparaten.

Definitie verwarring

In RuNet zijn de concepten responsief en adaptief ontwerp vrijwel identiek aan elkaar. Het is de moeite waard om te begrijpen dat deze benaderingen voornamelijk verschillen in de taken waarvoor ze worden gebruikt.

Responsieve markup en responsief ontwerp zijn totaal verschillende dingen. Adaptieve website-indeling omvat het veranderen van de stijlen van elementen op verschillende apparaten en wordt gebruikt in responsief ontwerp. Adaptief ontwerp is een aparte benadering voor het ontwerpen en creëren van de front-end van websites.

Kenmerken van de benaderingen

Sommige belangrijke aspecten, waarin responsieve en adaptieve ontwerpen radicaal verschillend zijn:
Websitesnelheid. Een site die is gemaakt volgens de principes van adaptief ontwerp kan meerdere keren sneller worden geladen, omdat de gebruiker alleen die delen van het ontwerp van de server hoeft te downloaden die nodig zijn om de site op zijn apparaat te laten werken. Bij responsive design zal de gebruiker gedwongen worden te wachten tot alle stijlen en afbeeldingen zijn geladen, ongeacht het apparaat dat de bezoeker gebruikt.
Complexiteit van ontwikkeling. Het maken van een website met responsive design vergt een hoger niveau van de ontwikkelaar professioneel niveau. Met name gedegen ervaring met JavaScript.
SEO-aspect. Het gerucht gaat dat Google responsieve websites veel meer accepteert dan adaptieve websites.

In de praktijk

In de praktijk komt Responsive design vrij vaak voor, in tegenstelling tot adaptief design. Dat is duidelijk: de eerste is immers gemakkelijker te implementeren en te beheersen. De meeste sjablonen die op marktplaatsen worden verkocht, zijn responsief en niet adaptief.
Adaptief ontwerp wordt vaker toegepast bij serieuze en multifunctionele producten. De meest voor de hand liggende voorbeelden: in mobiele versie Vkontakte-netwerk, e-mail van Google.

P.S. Als u goed oplet, zult u merken dat de lay-out van onze site een voorbeeld is van responsive design. Om dit te verifiëren, probeert u op uw computer de breedte van het browservenster te wijzigen. U zult merken hoe de lay-outstijl van de site geleidelijk verandert in een mobiele weergave.

De laatste tijd zijn technologieën en verschillende apparaten (tablets, smartphones, monitoren) waarmee sites worden bekeken steeds verder ontwikkeld.

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 op verschillende apparaten die met internet zijn verbonden en zich dynamisch aanpast 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 sommige blokken zijn mogelijk verborgen;
• 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

De viewport-metatag wordt gebruikt om de browser te vertellen hoe de pagina-afmetingen moeten worden weergegeven en de schaal ervan kan worden gewijzigd. 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.