Hoe maak je een responsive design. Responsieve blogsjabloon voor WordPress

Responsieve lay-out verandert het paginaontwerp op basis van gebruikersgedrag, platform, schermgrootte en apparaatoriëntatie en is een integraal onderdeel van moderne webontwikkeling. Hiermee kunt u aanzienlijk geld besparen en niet tekenen. nieuw ontwerp voor elke resolutie, maar verander de grootte en positie van afzonderlijke elementen.

Dit artikel gaat over de basiselementen van een website en hoe deze aan te passen.

De schermresolutie aanpassen

In principe kun je apparaten in verschillende categorieën indelen en voor elk afzonderlijk zetten, maar het duurt te lang en wie weet welke normen over vijf jaar zijn? Bovendien hebben we volgens de statistieken een hele reeks verschillende verschillende resoluties:

Het wordt steeds duidelijker dat we niet voor elk apparaat apart kunnen blijven coderen. Maar wat te doen dan?

Deeloplossing: alles flexibel maken

Dit is natuurlijk geen ideale manier, maar het elimineert meest problemen.

Ethan Marcotte heeft een eenvoudig sjabloon gemaakt om het gebruik van een flexibele lay-out te demonstreren:

Op het eerste gezicht lijkt het misschien dat alles gemakkelijk is, maar dat is het niet. Kijk eens naar het embleem:

Als u de hele afbeelding verkleint, worden de labels onleesbaar. Om het logo op te slaan, wordt de afbeelding daarom in twee delen verdeeld: het eerste deel (afbeelding) wordt gebruikt als achtergrond, het tweede (logo) wordt proportioneel verkleind.

Het h1-element bevat de afbeelding als achtergrond en de afbeelding wordt uitgelijnd met de achtergrond van de container (header).

Flexibele afbeeldingen

Werken met afbeeldingen is een van de grootste uitdagingen bij het werken met responsieve ontwerpen. Er zijn veel manieren om het formaat van afbeeldingen te wijzigen, en de meeste zijn vrij eenvoudig te implementeren. Een oplossing is om max-width in CSS te gebruiken:

Img (max-breedte: 100% ;)

De maximale breedte van een afbeelding is 100% van de breedte van het scherm of browservenster, dus hoe kleiner de breedte, hoe kleiner de afbeelding. Merk op dat max-width niet wordt ondersteund in IE, dus gebruik width: 100%.

De gepresenteerde methode is een goede optie voor het maken van responsieve afbeeldingen, maar door alleen de grootte te wijzigen, laten we het afbeeldingsgewicht hetzelfde, daarom is de laadtijd voor mobiele toestellen ah zal toenemen.

Een andere manier: responsieve afbeeldingen

De techniek, gepresenteerd door de Filament Group, verkleint niet alleen afbeeldingen, maar comprimeert ook de resolutie van afbeeldingen op kleine schermen om laadtijden te versnellen.

Deze techniek vereist verschillende bestanden die beschikbaar zijn op Github. Eerst nemen we een JavaScript-bestand ( rwd-images.js), het dossier .htaccess en rwd.gif(beeldbestand). Vervolgens gebruiken we een beetje HTML om de grote en kleine resoluties aan elkaar te koppelen: eerst kleine afbeelding met het voorvoegsel .R(om te laten zien dat de foto responsive moet zijn), dan een link naar Grote foto met behulp van data-fulsrc:

Voor elk scherm breder dan 480 px, wordt een afbeelding met een hogere resolutie geladen ( largeRes.jpg), en op kleine schermen zal het laden ( smallRes.jpg).

De iPhone en iPod Touch hebben een speciaal kenmerk: een ontwerp dat is gemaakt voor grote schermen, krimpt eenvoudigweg in een browser met een kleine resolutie zonder te scrollen of extra mobiele lay-out. Afbeeldingen en tekst zijn echter niet zichtbaar:

Om dit probleem op te lossen, wordt de metatag gebruikt:

Als de beginschaal gelijk is aan één, wordt de breedte van de afbeeldingen gelijk aan de breedte van het scherm.

Aanpasbare paginalay-outstructuur

Voor significante wijzigingen in het paginaformaat kan het nodig zijn om de lay-out van de elementen in het algemeen te wijzigen. Het is handig om dit te doen via apart bestand met stijlen of, efficiënter, via een CSS-mediaquery. Dit zou geen probleem moeten zijn, aangezien de meeste stijlen hetzelfde zullen blijven en slechts enkele zullen veranderen.

Je hebt bijvoorbeeld hoofdbestand met stijlen die zijn gespecificeerd door #wrapper, #content, #sidebar, #nav samen met kleuren, achtergronden en lettertypen. Als uw hoofdstijlen de lay-out te smal, kort, breed of hoog maken, kunt u dat definiëren en nieuwe stijlen opnemen.

stijl.css (hoofd):

/ * Basisstijlen die moeten worden overgenomen door de onderliggende stylesheet * / html, body (achtergrond ... lettertype ... kleur ...) h1, h2, h3 () p, blockquote, pre, code, ol, ul () / * Structurele elementen * / #wrapper (breedte: 80%; marge: 0 auto; achtergrond: #fff; opvulling: 20px;) #content (breedte: 54%; zwevend: links; marge-rechts: 3%;) # zijbalk-links (breedte: 20%; zwevend: links; marge-rechts: 3%;) # zijbalk-rechts (breedte: 20%; zwevend: links;)

mobiel.css (kind):

#wrapper (breedte: 90%;) #content (breedte: 100%;) # zijbalk-links (breedte: 100%; duidelijk: beide; / * Extra stijlen voor het nieuwe ontwerp * / border-top: 1px effen #ccc ; margin-top: 20px;) # sidebar-right (breedte: 100%; clear: both; / * Extra styling voor onze nieuwe lay-out * / border-top: 1px solid #ccc; margin-top: 20px;)

Op breedbeeld links en rechts zijpanelen zit lekker aan de zijkant. Op smallere schermen bevinden deze blokken zich onder elkaar voor meer gemak.

CSS3-mediaquery's

Laten we eens kijken hoe u CSS3-mediaquery's kunt gebruiken om responsieve ontwerpen te maken. min-width specificeert de minimale breedte van het browservenster of scherm waarop bepaalde stijlen worden toegepast. Als een waarde onder de minimumbreedte ligt, worden stijlen genegeerd. max-wid doet het tegenovergestelde.

@media-scherm en (min-breedte: 600px) (.hereIsMyClass (breedte: 30%; zwevend: rechts;))

De mediaquery werkt alleen als de minimale breedte groter is dan of gelijk is aan 600 px.

@media scherm en (max-breedte: 600px) (.aClassforSmallScreens (clear: both; font-size: 1.3em;))

In dit geval is de klasse ( aClassforSmallscreens) werkt wanneer de schermbreedte kleiner is dan of gelijk is aan 600 px.

Hoewel min-width en max-width van toepassing kunnen zijn op zowel de schermbreedte als de browservensterbreedte, hoeven we mogelijk alleen met de apparaatbreedte te werken. Bijvoorbeeld om browsers die in een klein venster worden geopend te negeren. Je kunt hiervoor min-device-width en max-device-width gebruiken:

@media scherm en (max-device-width: 480px) (.classForiPhoneDisplay (font-size: 1.2em;)) @media screen en (min-device-width: 768px) (.minimumiPadWidth (clear: both; margin-bottom : 2px solide #ccc;))

Vooral voor de iPad hebben mediaquery's de eigenschap oriëntatie, waarvan de waarden kunnen zijn: landschap(horizontaal) of portret(verticaal):

@mediascherm en (oriëntatie: liggend) (.iPadLandscape (breedte: 30%; zwevend: rechts;)) @mediascherm en (oriëntatie: staand) (.iPadPortrait (helder: beide;))

Ook kunnen de waarden van mediaquery's worden gecombineerd:

@media scherm en (min-breedte: 800px) en (max-breedte: 1200px) (.classForaMediumScreen (achtergrond: # cc0000; breedte: 30%; zwevend: rechts;))

Deze code werkt alleen voor schermen of browservensters met een breedte van 800 tot 1200 px.

Laad een specifiek blad met stijlen voor verschillende betekenissen mediaquery's kunnen als volgt worden gedaan:

JavaScript

Als uw browser geen CSS3-mediaquery's ondersteunt, kan de vervanging van stijlen worden georganiseerd met jQuery gebruiken:

Optionele inhoudsweergave

De mogelijkheid om elementen te verkleinen en te verwisselen zodat ze op kleine schermen passen, is geweldig. Maar het is niet de beste manier... Voor mobiele apparaten is er meestal een bredere reeks wijzigingen: eenvoudigere navigatie, meer gerichte inhoud, lijsten of rijen in plaats van kolommen.

Dit is onze opmaak:

Linker zijbalk inhoud | Inhoud rechterzijbalk

stijl.css (hoofd):

#content (breedte: 54%; zwevend: links; marge-rechts: 3%;) # zijbalk-links (breedte: 20%; zwevend: links; marge-rechts: 3%;) # zijbalk-rechts (breedte: 20 %; float: left;) .sidebar-nav (display: geen;)

mobiel.css (vereenvoudigd):

#content (breedte: 100%;) # zijbalk-links (weergave: geen;) # zijbalk-rechts (weergave: geen;). zijbalk-nav (weergave: inline;)

Als de schermgrootte wordt verkleind, kunt u bijvoorbeeld een script of een bestand met een alternatieve stijl gebruiken om de witruimte te vergroten of de navigatie voor meer gemak te vervangen. Met de mogelijkheid om elementen te verbergen en weer te geven, het formaat van afbeeldingen, elementen en nog veel meer te wijzigen, kunt u het ontwerp aanpassen aan elk apparaat en scherm.

Internetgebruikers bladeren door sites op verschillende apparaten met schermen verschillende maten... Schermformaten veranderen voortdurend, dus het is belangrijk dat de site zich aan elk van hen aanpast. Er zijn twee hoofdbenaderingen voor het maken van sites die gemakkelijk kunnen worden aangepast voor: verschillende soorten apparaten:

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

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

1. Responsieve ontwerptechnieken

Filosofie responsive webdesign ligt in het feit dat de site gemakkelijk te bekijken was vanaf elk apparaat, ongeacht de schermgrootte. Uitdrukking reagerend ontwerp werd uitgevonden door Ethan Marcotte in 2011. Het belangrijkste kenmerk van responsive webdesign is dat door het vloeiende raster de lay-out automatisch reageert op schermgrootte, zwelling of vernauwing als een ballon.

Reagerend ontwerp(eng. Responsief webdesign) combineert drie technieken - flexibele lay-out rastergebaseerd, flexibele afbeeldingen en mediaquery's.

Lay-outflexibiliteit is gebaseerd op het gebruik van relatieve meeteenheden in plaats van vaste pixelwaarden, waardoor de breedte kan worden aangepast aan de beschikbare ruimte.

Flexibiliteit van tekstinhoud wordt bereikt door lettergroottes te berekenen ten opzichte van de standaard lettergrootte van de browser van 16px, bijvoorbeeld voor: vaste maat font-size: 42px relatieve grootte is 42px / 16px = 2.625em.

Probleem flexibele afbeeldingen opgelost door de regel img (breedte: 100%; max-breedte: 100%;) voor alle afbeeldingen op de site te gebruiken. Deze regel zorgt ervoor dat afbeeldingen nooit breder zijn dan hun containers en nooit groter zijn dan hun ware grootte op grote schermen.

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

Extra responsieve ontwerptrucs

schaalbaar vectorafbeeldingen - Gebruik svg-afbeeldingen die naar elk formaat kunnen worden geschaald zonder kwaliteitsverlies en er goed uitzien op Retina-displays.

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

Laat alleen het essentiële achter Is een goede truc, vooral voor responsieve ontwerpen. Creëer responsieve en vriendelijke minimalistische interfaces die tegenwoordig aan populariteit winnen.

Prioriteer en verberg inhoud correct- gebruik maken van verborgen items bedieningselementen, vooral voor apparaten met kleine schermen. Pop-ups, tabbladen, menu's buiten het canvas en soortgelijke trucs kunnen helpen om het aantal elementen op de pagina te verminderen. Ruimte vrijmaken van onnodige elementen, maak je de interface gebruiksvriendelijk en gebruiksvriendelijk.

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

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

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

Tot mobiele browsers voor besturingssystemen Android en iOS hebben de grootte van de sitepagina's niet automatisch aangepast, er wordt een speciale tag gebruikt met de attribuutnaam = "viewport". V deze tag het is toegestaan ​​om een ​​specifieke waarde in te stellen voor de parameters voor breedte en beginschaal:

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

- breedte = apparaatbreedte betekent dat de paginabreedte gelijk is aan 100% van de vensterbreedte van elke browser. Dat wil zeggen, de breedte van de sitepagina komt overeen met de breedte van het apparaat, dus het hoeft niet te worden geschaald.

V dit voorbeeld de inhoud in het browservenster zal 2 keer de fysieke grootte zijn.

Tag ook kan worden gebruikt om te bepalen hoeveel gebruikers de paginabreedte kunnen vergroten of verkleinen:

Deze code vergroot de paginabreedte tot 3 keer de schermbreedte van het apparaat en verkleint deze tot de helft van de schermbreedte van het apparaat.

U kunt voorkomen dat gebruikers schaalbaar zijn door het kenmerk user-scalable te gebruiken:

3. Algemene sjablonen

De meeste lay-outs die worden gebruikt om responsieve webontwerpen te maken, vallen in een van de vijf sjablooncategorieën zoals gedefinieerd door Luke Wroblewski:
Meestal Vloeistof(De meest rubberachtige)
Kolom neerzetten(kolommen onder elkaar)
Lay-outverschuiver(Bewegende lay-out)
Kleine aanpassingen(Kleine veranderingen)
Uit canvas(Uit scherm).
In sommige gevallen kan een pagina een combinatie van sjablonen gebruiken, zoals Column Drop en Off Canvas.

3.1. Meestal Vloeistof

De populaire lay-out bestaat voornamelijk uit een rubberen gaas. Op grote of middelgrote schermen blijft het meestal even groot, op grote schermen worden alleen de marges aangepast. Op kleine schermen het vloeiende raster zorgt ervoor dat de lay-out opnieuw wordt berekend voor de hoofdinhoud en de kolommen onder elkaar worden gestapeld. Het mooie van de sjabloon is dat er maar één breekpunt tussen kleine en grote schermen nodig is.

3.2. Kolom neerzetten

Kolommen worden één voor één verticaal geplaatst als de breedte van het venster niet alle inhoud kan weergeven. Hierdoor worden de kolommen verticaal onder elkaar gepositioneerd. Keuze controle punten voor deze sjabloon is de lay-out inhoudsafhankelijk en wordt deze voor elke ontwerpoptie afzonderlijk gedefinieerd.

3.3. Lay-outverschuiver

Meest responsieve sjabloon omdat het meerdere onderbrekingspunten voor schermen biedt verschillende breedtes... Het belangrijkste verschil met deze lay-out is dat inhoud wordt verplaatst in plaats van de renderboom opnieuw te berekenen en kolommen onder elkaar te plaatsen. Vanwege de aanzienlijke verschillen tussen de belangrijkste breekpunten, is het een grotere uitdaging om deze lay-out te onderhouden en moet u mogelijk niet alleen de algehele lay-out van de inhoud, maar ook de elementen ervan wijzigen.

3.4. Kleine aanpassingen

De sjabloon brengt kleine wijzigingen aan in de lay-out, zoals het aanpassen van de lettergrootte, het vergroten of verkleinen van afbeeldingen of het verplaatsen van inhoud. Het werkt goed op lay-outs met één kolom, zoals sites met één pagina en artikelen met grote hoeveelheid tekst.

3.5. Uit canvas

Inhoud die zelden wordt gebruikt, zoals navigatie- of app-menu's, wordt buiten het scherm geplaatst en alleen weergegeven als de schermgrootte dit toelaat. Op kleine schermen wordt inhoud met één klik geopend.

4. Responsief ontwerp

In tegenstelling tot responsief ontwerp, adaptief ontwerp(Adaptive Web Design) richt zich op apparaatformaten. Het gebruikt verschillende statische lay-outs voor verschillende soorten apparaten (mobiele apparaten, tablets, desktops) op basis van breekpunten. Dat wil zeggen, lay-outs worden geladen op een bepaalde grootte van het browservenster van het apparaat, en overgangen tussen lay-outs vinden met grote sprongen plaats in plaats van vloeiend.

Responsieve lay-outs hebben doorgaans zes lay-outopties op basis van de schermbreedte:
320
480
760
960
1200
1600.

Bij responsieve lay-outs speelt functionaliteit een grote rol, dat wil zeggen dat bij het maken van een ontwerp rekening wordt gehouden met de kenmerken van apparaten, bijvoorbeeld aanraakbediening voor mobiele apparaten of grote ruimtes voor desktopmonitoren.

Basistechnieken voor responsief ontwerp

Blijf bij consistentie- elke site moet een vertrouwensrelatie met de gebruiker creëren, zodat hij zich op zijn gemak voelt bij het navigeren en interactie met hem. Een consistent ontwerp betekent dat wanneer een gebruiker naar een andere pagina op een site navigeert, de gebruiker niet het gevoel heeft op een andere site te zijn. Let op kleine details, bouw een visuele hiërarchie, belangrijke elementen stoutmoedig. Gebruik een consistent kleurenschema op uw hele site, hergebruik dezelfde elementen voor verschillende situaties, zoals hetzelfde toastontwerp.

Gebruik een raster- een structuur met 12 kolommen heeft de voorkeur voor het regelen van de breedte van kolommen en de onderlinge afstand.

5. Wat is het verschil tussen responsief en responsief webdesign?

Responsieve lay-outs gebruiken mediaquery's en de relatieve grootte van de rasteritems, gespecificeerd met%. Bij responsief ontwerp bepalen server-side scripts eerst het type apparaat dat een gebruiker gebruikt om toegang te krijgen tot een site (desktop, telefoon of tablet), en laden vervolgens precies de versie van de pagina die het meest is geoptimaliseerd voor die site. Aan rasterelementen worden vaste px-formaten toegewezen.

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

6. Handige diensten en tools

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

Een PHP-script dat op elke website wordt uitgevoerd, detecteert de schermgrootte en past de afbeelding aan zodat deze past, wat resulteert in een kleine afbeeldingsgrootte op kleine schermen.

Correspondentietabellen fysieke afmetingen apparaat css-waarden voor hoogte en breedte, evenals de pixelverhoudingswaarde voor mobiele apparaten.

Een verzameling websites die mediaquery's en responsive webdesign gebruiken.

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

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

Responsief ontwerp van een moderne website is een van de belangrijkste indicatoren van de kwaliteit ervan.

Het is geen geheim dat het aandeel mobiele apparaten dat wordt gebruikt om toegang te krijgen tot internet voortdurend groeit. Deze tendens is typerend voor zowel het hele internet als voor 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 tablet tot smartphone.

In aanvulling, zoekmachines rang mobielvriendelijke sites loyaler. Dit geldt met name voor de PS van Google, die dergelijke eisen rechtstreeks aan sites oplegt.

Wat is responsive website-ontwerp?

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

De belangrijkste criteria voor het beoordelen van het kijkgemak zijn:

1. Weergavegebied.
2. Inhoud breedte.
3. Grootte van lettertypen, afbeeldingen, videovensters.
4. Actieve elementen.

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

Hoe u uw website responsive maakt

Om de responsiviteit van de site te garanderen voor weergave op apparaten met: verschillende resoluties scherm, zijn er verschillende manieren. 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 maken van een responsive template is. Twee andere methoden lossen dit probleem ook op, maar ze zijn merkbaar inferieur aan de eerste methode.

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

Maar tijdens het gebruik worden acties toegevoegd om de relevantie van de mobiele versie van de site te behouden, informatie te synchroniseren met de hoofdsite. En voor SEO-promotie extra vragen met duplicaten worden toegevoegd, enz.

De voordelen van de mobiele versie zijn dat alles wordt verwijderd onnodige items, effecten, advertenties, abonnementen, enz. De site wordt niet alleen correct weergegeven op mobiele apparaten, maar laadt ook zo snel mogelijk. Dit is het belangrijkste voordeel.
Dergelijke versies staan ​​zichzelf grote portals, sites toe sociale netwerken, grote bedrijfssites ...

Het installeren van de applicatie op mobiele apparaten is helemaal niet van jou afhankelijk. Ten eerste kan niet elk apparaat het implementeren. Ten tweede vereist het extra kennis en acties, en niet alle gebruikers zullen het eens zijn met het extra gedoe.

Dergelijke applicaties worden meestal geïnstalleerd door gebruikers die de auteur vertrouwen en een nieuwe van hem verwachten. bruikbare informatie... Dit is enigszins vergelijkbaar met een e-mailabonnement.

Samenvattend kunnen we concluderen: het maken van een responsief ontwerp voor uw site zal het meest zijn een winstgevende oplossing voor een kleine tot middelgrote site.

Responsieve site-indeling

Om een ​​responsief ontwerp te maken, moet u uw toevlucht nemen tot technologie adaptieve lay-out... De essentie ervan is als volgt:
Maak de sjabloon "rubberachtig"

Dat wil zeggen, bind niet strak aan de breedte van de pagina, maar gebruik relatieve eenheden... Dat wil zeggen, maak uw sjabloon proportioneel samendrukbaar, dat wil zeggen "rubber".

Om dit te doen, wordt de paginabreedte ingesteld door de max-width css-eigenschap in plaats van door de breedte, en ten opzichte van deze waarde wordt de breedte van andere elementen geselecteerd in procent (%).

Definieer "breekpunten" van schermbreedte

Het is noodzakelijk om de controlepunten (CT) van de schermbreedte te bepalen om verdere acties te plannen.

Bijvoorbeeld.
De maximale schermbreedte is 1000 pixels. Breedte tabletscherm - 800 pixels, smartphone - 420 pixels.

Deze controlepunten (CT's) kunnen verschillend zijn voor: verschillende soorten plaatsen. Soms is één voldoende, bijvoorbeeld 600 pixels, en wordt de weergavekwaliteit bij lagere resoluties geleverd door de "rubberigheid" van de sjabloon.

De schermlay-out plannen voor elke CT

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

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

Voor meer informatie over het oplossen van dergelijke problemen kunt u kennis maken met de gratis cursus responsive design van het WebFormMySelf team.

Mediaquery's

Om onderbrekingspunten in te stellen, moet u mediaquery's gebruiken. Deze richtlijnen zijn de CSS3-standaarden voor het regelen van de weergave van de inhoud van de sitepagina's voor verschillende schermresoluties.
Deze richtlijn ziet er als volgt uit:

@media only-scherm en (max. breedte: 520px)(.art-Header-jpeg (hoogte: 80%; weergave: geen;) .art-Logo (positie: vast; top: 10px;) .art-Logo-tekst (weergave: geen;) ...... ..... css-statements .....)

Responsieve blogsjabloon voor WordPress

Een responsieve sjabloon voor uw WordPress-blog kan op verschillende manieren worden geleverd.

1. Installeer de juiste plug-in.
2. Koop kant-en-klare responsieve sjabloon.
3. Aanpassen bestaande sjabloon zelf of bestel een service bij een specialist.

Besloten om met de tijd mee te gaan, begon ik ook met de voorbereidingen voor het aanpassen van mijn blog. Er is veel gedetailleerde informatie over plug-ins voor het aanpassen van WordPress-thema's op internet. Ik maakte kennis met het werk en de vereisten van populaire plug-ins en besloot dat het gebruik ervan niet de beste oplossing zou zijn voor mijn blog.

Het is ook vrij eenvoudig om een ​​moderne responsieve sjabloon op internet te kopen, als u alleen maar geld heeft. 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.

Zelf responsive WordPress-sjabloon

Nadat ik mezelf vertrouwd had gemaakt met de principes van het aanpassen van ontwerp voor mobiele apparaten, ging ik stoutmoedig aan de slag, maar ik voelde dat mijn kennis van html, css, php niet genoeg was.

En ik begon al te neigen naar het kopen van een kant-en-klaar sjabloon, maar op dat moment kreeg ik informatie over het verloop van twee Andreev Bernatsky en Kudlai "WordPress-Master van persoonlijke blog naar de Premium-sjabloon ". Een 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 de nieuwe moderne responsieve sjabloon. En ik besloot dit bedrag te besteden aan het kopen van een cursus en kennis opdoen in plaats van een kant-en-klaar sjabloon. I denk. Dat de investering terecht was en zichzelf volledig rechtvaardigde.

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

Ik wil graag nog enkele diensten kort beschrijven. maar kwam een ​​verstandig gedetailleerd artikel tegen en besloot niet te spannen, maar om je er een link naar te geven - http://habrahabr.ru/post/189726/.

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

Meer recent, letterlijk 10 jaar geleden, lieten webdesigners zich bij het maken van websites leiden door een bepaalde gemiddelde breedte van het beeldscherm van de gebruiker. Aanvankelijk was de meest voorkomende resolutie 800 * 600, daarna groeide deze naar 1024 * 768. Op internet zou men de volgende woorden kunnen tegenkomen: "De site is geoptimaliseerd voor die en die resolutie." Met de toename van het aantal schermformaten is populair geworden Rubberen lay-out sites, waarover ik schreef in het artikel met dezelfde naam. Dankzij dit type lay-out was het mogelijk om sites te bekijken op monitoren met verschillende resoluties.

Echter, in afgelopen jaren vloeiende lay-out is niet langer een "wondermiddel". Aan de ene kant zijn er monitoren met enorme schermformaten verschenen, aan de andere kant is er een mobiele revolutie geweest - het aantal internetverbindingen van mobiele apparaten (laptops, smartphones, tablets) is meer nummers stationaire computers. Mobiel verkeer groeit en de behoefte ontstaat juiste weergave site op schermen een groot aantal verschillende apparaten. Het maatbereik is te groot.

Als de site er op kleine schermen slecht uitziet, verlaat de bezoeker hem gewoon, de opkomst daalt, verslechtert gedragsfactoren.

Om te controleren hoe uw site eruitziet wanneer deze op verschillende apparaten wordt bekeken, kunt u de service gebruiken Schermvlieg. Voer hiervoor het siteadres in en selecteer het gewenste apparaat uit een vrij grote lijst. Het zou kunnen stationaire computer, en verschillende soorten tablets, en mobiele telefoons. U kunt de schermoriëntatie wijzigen van liggend naar staand en vice versa.

Hoe het probleem van de normale weergave van de site op verschillende apparaten op te lossen? Er zijn twee manieren om eruit te komen:

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

Welke van deze opties u toepast, is natuurlijk aan de eigenaar of klant van de site om te beslissen. Als de site lang geleden is gemaakt, een met de hand getekend ontwerp heeft dat deel uitmaakt van het merk, dan is het misschien de moeite waard om er een mobiele versie voor te maken en de oude te verlaten. Voor nieuwe sites kies je natuurlijk voor een responsive design.

Wat is responsive design?

Wat is dit ontwerp en hoe verschilt het van het rubberen exemplaar?

De rubberen sjabloon verandert niet van structuur wanneer de breedte van het scherm verandert, maar verandert alleen de afmetingen. Een webpagina heeft bijvoorbeeld drie kolommen: aan de linkerkant - een menu 25% van de breedte van het venster, in het midden - inhoud - 50%, aan de rechterkant - een zijbalk - 25%. Met een vensterbreedte van 1000 px zijn ze respectievelijk 250, 500 en 250 px, wat heel normaal is. Maar als je een mobiele telefoon gebruikt met een klein scherm met een breedte van 320 px, dan krimpen de kolommen naar 80, 160, 80 px en worden ze onleesbaar.

Wat is de uitweg? Hij is in een radicale verandering in 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 strekt zich uit tot één kolom. Maar dit is niet het enige verschil.

Vereisten voor responsief ontwerp

• Past zich aan de schermgrootte en oriëntatie aan, variërend van grote desktopmonitoren tot mobiele telefoons.
• Het formaat van afbeeldingen wijzigen bij het wijzigen van de schermresolutie. Zelfs op sites met een "rubberen" ontwerp veranderen de afmetingen van de afbeeldingen niet en bij een bepaalde schermbreedte verschijnt er een horizontale schuifbalk om ze te bekijken. Responsive design past ook afbeeldingen aan zodat ze op het scherm passen.
• Het verwijderen van irrelevante sjabloonelementen. Ze kunnen zijn zoals decoratieve elementen en software die niet werkt op mobiele apparaten.
• Hoge downloadsnelheid. De snelheid van mobiel internet is nog relatief laag en hiermee moet rekening worden gehouden bij het ontwikkelen van een site die bedoeld is voor weergave op mobiele apparaten.
• Gebruik relatief grote knoppen... Mobiele apparaten gebruiken aanraakinvoer en bij het ontwerpen moet rekening worden gehouden met het ontbreken van een cursor.
• Werk met mobiele functies bijvoorbeeld geolocatie.

Hoe een responsief ontwerp wordt gemaakt

Dit ontwerp is gebaseerd op het gebruik van CSS-mediaquery's. Dankzij deze verzoeken worden eerst de parameters bepaald van het apparaat dat de bezoeker gebruikt en, afhankelijk van deze keuze, wordt de juiste stijl gekoppeld, dat wil zeggen, bij een responsief ontwerp wordt één site gebruikt met een reeks stijlen voor verschillende apparaten. Als een bezoeker de site bijvoorbeeld bezoekt met: gewone computer, een stylesheet is verbonden, en hij ziet een site met een grote kleurrijke header, horizontaal menu, meerdere kolommen met inhoud, en bij gebruik van iPada wordt een andere stijl toegepast, en in plaats van een enorme kop, 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 een ​​bestaande websitesjabloon opnieuw te maken onder adaptieve versie? Natuurlijk kan dat, als je vaardig bent in HTML en CSS. Maar als u een contentbeheersysteem gebruikt - WordPress, Joomla!, Drupal, dan is het beter om een ​​kant-en-klaar sjabloon te vinden, nu zijn er veel responsieve sjablonen. Trouwens, in mijn artikel "Hoe een sjabloon voor WordPress te kiezen" zou ik nu nog een item moeten toevoegen "Controleer de sjabloon op reactievermogen".

We kunnen dus stellen dat responsive design momenteel het meest populair is op een moderne manier website-ontwikkeling en, ondanks zijn relatieve complexiteit, voor hem de toekomst. De vooruitgang staat niet stil, er verschijnen nieuwe, complexere apparaten en software ook voor hen wordt het ingewikkeld.

Trouwens, net verschenen unieke cursus Andrey Kudlaya. Gebruik makend van Bootstrap-framework, vandaag kun je een website maken met een mooi, aangenaam, professioneel ontwerp, en je hoeft geen professional te zijn in lay-out. Met behulp van frameworks kan zelfs de meest beginner in het bouwen van sites een pagina opmaken, een site van één pagina of een bestemmingspagina maken. Bovendien zal de site behoorlijk professioneel zijn en de tijd die aan de creatie ervan wordt besteed, is minimaal.

Dit is allemaal heel serieus, en om mezelf af te leiden, stel ik voor om puzzels te verzamelen en een andere foto te zien van mijn landgenoot, People's Artist of Russia N.P. Eryshev.

Schrijf uw mening over responsive design in de comments.

Vertaling van het uiterst waardevolle artikel "Responsive Web Design Techniques, Tools and Design Strategies" van de populaire online publicatie voor ontwikkelaars Smashing Magazine.

In januari publiceerden we een artikel over responsief ontwerp, "Responsive webdesign: wat het is en hoe het te gebruiken". Responsief webdesign blijft veel aandacht trekken, maar als je bedenkt hoe verschillend het is van traditionele methoden voor websiteontwikkeling, kan het overweldigend moeilijk lijken voor ontwerpers en ontwikkelaars die het nog niet hebben geprobeerd.

Om deze reden hebben we een overzicht samengesteld van bronnen die handig zijn bij het maken van responsieve sites. De beoordeling omvatte gedetailleerde handleidingen, benaderingen, hulpmiddelen, artikelen met: praktisch advies nodig om uw eigen responsive website te maken.

Responsieve webontwerptechnieken

Elliot Jay Stocks beschrijft de methode voor het combineren van CSS Media Queries en CSS-overgangen. De hoofdgedachte is als volgt: bij het ontwikkelen van een responsive website met met behulp van media Bij zoekopdrachten verandert u voortdurend de breedte van uw browser om te zien hoe de site zich daarbij gedraagt. Maar elke keer dat een van uw mediaquery's wordt uitgevoerd, ziet u een harde overgang tussen stijlen (de eerste bijvoorbeeld voor desktops, de tweede voor tablets). Waarom geen CSS-overgangen gebruiken om die harde overgangen met animatie glad te strijken?

Responsieve afbeeldingen en video's

Rubberachtige afbeeldingen zijn een van de centrale thema's in responsive webdesign. Het artikel van Ethan Marcotte biedt: gedetailleerde beoordeling ze maken met het klassieke codefragment img (max-breedte: 100%;), evenals alle benodigde onderdelen die nodig zijn om aan de slag te gaan.

Responsieve e-mails

Om grote e-mails te bekijken, heb je vaak nodig: horizontaal scrollen, vooral als er een grote afbeelding aan de brief is toegevoegd. In dit onderzoek legt Campaign Monitor uit hoe: e-mails kan worden geoptimaliseerd voor mobiel gebruik Mediavragen en stelde enkele nuttige methoden en codefragmenten voor om in de praktijk te gebruiken.

Responsieve webontwerptools

Dit is een snelle en lichtgewicht Polyfill (een codefragment dat functionaliteit toevoegt die niet door de browser wordt ondersteund) gemaakt door Scott Jehl om de eigenschappen min-width en max-width van CSS3 Media Queries in IE6-IE8 en hoger te ondersteunen.

Gebruik de informatie in deze kleine tool om een ​​responsieve website te maken.

Een tool voor rapid prototyping van responsive design. U kunt CSS ontwerpen voor een verscheidenheid aan populaire schermformaten, oriëntaties en browsers, of het nu gaat om telefoons (BlackBerry Torch, Google-nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy-tabblad, Dell Streak), monitoren of tv's (720p, 1080p).

U kunt de ontwerpresultaten direct in de browser bekijken en de ontwikkeltools gebruiken waarmee u vertrouwd bent, zoals Firebug. Probeer ook de alternatieve tool ScreenFly.

De tool 320 en hoger is gebaseerd op het principe: mobiel eerst (mobile first), waarbij eerst ontwerpen worden gemaakt voor mobiele schermen en vervolgens worden uitgebreid naar tablets, desktops en grote schermen. Het werkt goed als een add-on voor de HTML5-boilerplate en als een stand-alone.

Dit zijn aanpasbare sjablonen voor het maken van functierijke, hoge prestaties mobiele webapplicaties... U krijgt compatibiliteit tussen verschillende browsers voor klasse A-smartphones en goede ondersteuning voor oudere BlackBerry, Symbian en IE Mobile. En een groot aantal van verschillende optimalisaties voor mobiele browsers.

Kaders voor responsief ontwerp

1140 CSS Grid is geoptimaliseerd om te werken op schermen van mobiele apparaten tot monitoren van 1280px breed. Het is een eenvoudig en flexibel raster dat gebruik maakt van Mediavragen.

Dit CSS-framework - goede basis voor het ontwikkelen op kleine schermen (zoals telefoons) en kleine schermen (zoals tablets) direct uit de doos met minimale inspanning. Daarnaast is er een generator om zelf een vloeiend CSS-framework te creëren.

Flurid is een rubberen net met 6, 7, 8, 9, 10, 12 en 16 kolommen.

FluidGrids - generator modulair raster die lay-outs maakt met 6, 7, 8, 9, 10, 12 of 16 kolommen.

CSS-framework voor het maken van responsieve lay-outs. Het bevat 4 basislay-outs en 3 typografiesets.

Een vloeiend kader met de nadruk op typografie.

Tiny Fluid Grid helpt je bij het maken van je eigen rubberen raster met 12, 16 of 24 kolommen, hun maximale en minimale breedte en inspringing in procent in te stellen.

Responsieve ontwerpstrategieën

Luke Wroblewski gaf een brief aan Ethan Marcotte's presentatie over de toepassing van responsieve webontwerpprincipes op het herontwerp van de website van een toonaangevende krant. Ethan legt onder meer uit hoe hij de ontwerpmethodologie van responsive webdesign benadert en hoe prototyping eruitziet in de context van responsive webdesign.

Luke Wroblewski maakte aantekeningen op de Breaking Development Conference tijdens Stephen Hay's lezing over de realiteit van het ontwerpen voor verschillende apparaten.

Discussies en verschillende perspectieven op responsive webdesign

Een uitstekende introductie tot responsive design als een manier van denken, niet als een tool of techniek. Jeremy Keith stelt dat responsive webdesign kan niet zomaar als stap worden toegevoegd aan een bestaande workflow. In plaats van te streven naar pixelperfectie, moeten we streven naar proportionele perfectie.

Publiceren is een combinatie van filosofie en strategie voor het verzamelen van best practices op het gebied van responsive design.

Een regelmatig bijgewerkte verzameling websites die Media Queries gebruiken.

In aflevering 9 van The Big Web Show nodigden Jeffrey Zeldman en Dan Benjamin Ethan Marcotte uit om over responsive design te praten.

Een mooie aanvulling op dit artikel is een blog over responsive design, waar ontwikkelaars hun ervaringen delen en reviews schrijven over responsive tools.