Hoe responsief ontwerp te maken. Responsieve template voor WordPress zelf

Het thema van deze maand is website-responsiviteit, dus hebben we besloten om er meer over te vertellen. responsief webdesign, waarom het nodig is en wat de basisprincipes zijn van responsive 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 even handig zijn voor alle formaten - gebruikers mobiele toestellen Het is bijvoorbeeld niet nodig om 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 mobiele navigatie op een website te zien. 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.

Dag Allemaal! Nadat ik onlangs de statistieken van een van mijn projecten had bekeken, besefte ik dat het tijd was om te leren hoe je een responsief website-ontwerp kunt maken, dat wil zeggen een ontwerp dat er goed uit zal zien, zowel op desktopcomputers en laptops als op mobiele apparaten. Kijk zelf maar, hint Metrica.

Wat vind jij van deze foto? Misschien zal bij sommige onderwerpen het percentage mobiel verkeer minder zijn, bij andere meer, maar bezoekers die je lezen 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 manier om dit te controleren goede service— 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 moeten we 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 kunt maken

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-klaar "vis"-sjabloon geen tijd aan routine hoeft te verspillen. Als je weet hoe je met frameworks moet werken, is het gebruik ervan om responsief ontwerp te maken een geweldige 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:

Viewport-metatag
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 dan de vorige versie en beter is 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.

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 te bekijken verschillende resoluties.

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 de mobiele revolutie plaats: het aantal verbindingen met internet van mobiele apparaten (laptops, smartphones, tablets) is toegenomen 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 structuur van de pagina 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 een ​​kant-en-klaar sjabloon te vinden nu er veel adaptieve sjablonen zijn 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 moeilijkheid, de toekomst ligt achter hem. De vooruitgang staat niet stil, er verschijnen nieuwe, complexere apparaten en ook de software daarvoor wordt complexer.

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.

Tegenwoordig hebben de meeste mensen toegang tot internet via mobiele gadgets- tablets, telefoons, in dit opzicht omvat site-optimalisatie ook nieuw level. 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 een mobiele versie van een website, 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. Niettemin houden veel ontwikkelaars zich aan dit specifieke concept, bijvoorbeeld Google Corporation, wiens mobiele versie van de site een responsief ontwerp heeft. 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 eenvoudigweg "vertragen", de gebruiker zal boos worden en weggaan, en zoek posities plaats - vallen.
• Onvermogen om uit te schakelen mobiele versie- nog een 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 het zal wel lukken, gezien genoemde tekortkomingen, tot 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 een adaptief template;
• 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. Het is populair bij grote online winkels zoals Amazon.

De derde manier is RESS-ontwerp

De Google-zoekmachine ondersteunt deze richting van mobiel ontwerp actief. Dit is het moeilijkste en duurste, maar effectieve methode de site aanpassen 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 verschillende soorten informatie hosten, terwijl het telefoongeheugen en internetverkeer niet zoveel worden verbruikt als wanneer een site via een browser wordt bezocht. 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 prijs arbeid van een groot aantal programmeurs, de noodzaak om verschillende lay-outopties te maken. Soms wordt het mobiele apparaat niet herkend door de applicatie. Normaal technische hulp, 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 benodigde 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 zones. 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 toegevoegde opties, wat handig zou zijn in de desktopversie en het leven van de gebruiker gemakkelijker zou maken, zal hier alleen maar complicaties met zich meebrengen. Laat alleen het meeste over belangrijke elementen. Animatie, reclamebanners, multimedia zal hoogstwaarschijnlijk de werking van de site of applicatie alleen maar vertragen en de aandacht afleiden van het belangrijkste.

Uitlijning

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

Een associatie

Als er geen mogelijkheid is voor een lange keten van transities, probeer dan meerdere stappen in één te combineren. Een website vereist bijvoorbeeld gegevensinvoer in verschillende fasen: naam, vervolgens adres, waar in elke fase aparte cel huis, straat, appartement, etc. bevinden zich afzonderlijk. Om de gebruiker niet te dwingen in veel kleine cellen te komen, vraagt ​​u hem slechts 2 in te vullen: naam en adres.

En ontkoppeling

Soms is het daarentegen ook nodig om de verbinding te verbreken een groot aantal van 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 over een regionaal centrum of regio beweegt, verschijnt er een nieuwe 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”, enz.

Automatisch aanvullen

Dit punt is vooral van toepassing op sites waar ze iets online verkopen en je standaardformulieren moet invullen voor 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 de procesaankopen zo snel en gemakkelijk mogelijk moeten worden gedaan.

Om dit te doen, kunnen de formulieren reeds ingevulde gegevens bevatten; u kunt uw toevlucht nemen tot de meest populaire antwoorden. Invoegen bijvoorbeeld de datum van vandaag, betaalwijze contant, plaats, indien 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 afzonderlijk en groot worden geopend, vooral als we praten over 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 groei mobiele reclame 100 keer in de komende 5 jaar. 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. 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, waardoor comfortabele omstandigheden worden gecreëerd waarin hij op uw site kan blijven.

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

• nieuwsportals, aangezien dit is wat de meeste mensen op hun telefoon bekijken 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 toenemende verzoeken van gebruikers moeten sites voortdurend worden gemoderniseerd en aangepast 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.

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 website 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 Google PS, die dergelijke eisen rechtstreeks aan sites oplegt.

Wat is responsive website-ontwerp

De betekenis van adaptief ontwerp is de mogelijkheid om op verschillende apparaten geplaatst materiaal op de site op een comfortabele manier te bekijken en te lezen.

De belangrijkste criteria voor het beoordelen van kijkgemak zijn:

1. Weergavegebied.
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:

• Responsieve sjabloon plaats.
• Mobiele versie van de site.
• Installatie speciale toepassing op het apparaat van de gebruiker.

De ervaring leert dat de meest optimale oplossing het creëren van een adaptief sjabloon is. 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 bijkomende 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. bruikbare informatie. Dit lijkt enigszins op een e-mailabonnement.

Om het samen te vatten concluderen we: het creëren van een adaptief ontwerp voor uw website is het meest winstgevende oplossing voor een kleine of middelgrote site.

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 deze 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 (CP's) kunnen voor verschillende soorten locaties verschillend zijn. Soms is één voldoende, bijvoorbeeld 600 pixels, en wordt de kijkkwaliteit bij kleinere resoluties gewaarborgd dankzij de “veerkracht” 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 controle punten 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-tekst( 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. Pas zelf een bestaand sjabloon aan 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 mobiel en stationaire apparaten— 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 ​​verstandig, gedetailleerd artikel tegen en besloot mezelf niet te belasten, maar je er een link naar 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.