Verschillende schermresoluties. De beste tools voor het testen van een responsieve lay-out

Ik werd geconfronteerd met de noodzaak om de site op verschillende schermresoluties te bekijken. Met de ontwikkeling van smartphones en de opkomst van velen verschillende maten schermen is het handig om te zien hoe uw site er op een bepaald apparaat uit zal zien. Er zijn verschillende opties om dit probleem op te lossen. Om de site op uw computer te bekijken met een lagere resolutie dan uw monitor, gaat u gewoon naar de scherminstellingen en selecteert u de gewenste waarde.

Er is ook een mogelijkheid om bijvoorbeeld browserplug-ins te gebruiken Webontwikkelaar voor Firefox, dat ook bestaat voor Google Chrome. Met de optie Formaat wijzigen kunt u de grootte van de browser aanpassen aan de gewenste grootte.

Deze methoden zijn de eenvoudigste, maar nu zijn ze niet langer voldoende: het bekijken van de site op grotere schermresoluties of zien hoe deze eruit zal zien vanaf een mobiele telefoon zal niet werken. Ik herinner me dat ik onlangs naar een project keek waarmee sites in alle browsers konden worden getest. Het is uiterst handig voor het testen van de cross-browser lay-out op verschillende besturingssystemen en browsers, maar er waren daar niet veel schermresoluties. Bovendien moest je je registreren om er gebruik van te kunnen maken. Vandaag zal ik een paar eenvoudigere en beschikbare diensten Voor snelle kijk site op verschillende schermresoluties.

Diensten voor het bekijken van een website met verschillende schermresoluties

Bij sommige projecten kunt u alleen de schermresolutie wijzigen, terwijl bij andere dat wel het geval is extra functies. Ik zal ze niet in detail bekijken, ik noem ze gewoon in de recensie, misschien vind je ze nuttig.

Trouwens, het domein quirktools.com verbergt nog een paar interessante eenvoudige services:

Smaps - plattegronden maken of gewoon een hiërarchisch diagram.
Wires is een cool ding waarmee je webpagina-indelingen kunt maken met behulp van verschillende functionele blokken (tekst, tabbladen, formulieren, knoppen, enz.)

De eenvoudigst mogelijke service voor het bekijken van verschillende schermresoluties. Er is ook een lijst met de meest populaire apparaten waaruit u de uwe moet kiezen.

Het project heeft een zeer mooi ontwerp.

Deze service is vergelijkbaar met CrossBrowserTesting, omdat u hiermee bovendien uw site kunt evalueren verschillende browsers en besturingssysteem. Bovendien vereist het ook registratie en heeft het betaalde functies. Hoewel dit niet nodig is om verschillende schermresoluties te bekijken, ga je naar het menu-item Responsive.

Qua ontwerp en functionaliteit is alles erg cool, het vermelden waard is de mogelijkheid voor smartphones om de weergaveopties Portret en Landschap te selecteren. Ja, andere services hebben een Rotate-functie, maar op deze manier ziet alles er veel helderder uit. Trouwens, als ik het goed begrijp, kun je na registratie gebruik maken van de optie van live interactief testen in realtime.

Service in de geest van minimalisme. Er is een veld voor het invoeren van de naam van de site + de mogelijkheid om schermformaten te selecteren om te bekijken.

Nog een uiterst eenvoudig project. Naast het siteadres en de formaten worden voor uw gemak de populairste schermresoluties weergegeven.

Als je goed naar de onderkant van de foto kijkt, zie je dat de InfoByIp-service de aanwezigheid van een onderste schuifbalk laat zien met een resolutie van 1024x768. Als u de monitorresolutie handmatig wijzigt, ziet u dat daar geen schuifbalk is. Dergelijke onnauwkeurigheden in sommige services zijn een beetje deprimerend; je zult geen liniaal gebruiken om de betrouwbaarheid van het weergegeven resultaat te meten. Daarom raad ik je aan om de site op verschillende schermresoluties te bekijken, waarbij je er een paar gebruikt verschillende diensten voor de zekerheid.

Goede dag allemaal, mijn Lieve vrienden en gasten van mijn blog. Ik herinner me dat ik nog maar drie jaar geleden nog nooit van een dergelijk concept als adaptieve lay-out of mobiele versie had gehoord. Maar vandaag de dag lijkt elke site zonder deze incompleet. Stel je voor: je gaat vanaf een mobiele telefoon naar een website en deze is daar op volledige grootte en met een klein lettertype.

Dat wil zeggen dat je constant moet inzoomen en scrollen, wat vreselijk onhandig is. En de mobiele versie of adaptieve lay-out neemt al deze problemen weg. Ik herinner me dat zelfs nadat ik het had gezet responsieve sjabloon voor mijn eerste project, toen raakte ik geïnteresseerd in hoe de site eruit ziet verschillende apparaten. Om dit te doen, heb ik een geweldige service gebruikt. En vandaag zal ik je erover vertellen.

Maar over het algemeen is dit ding ook nodig, zodat u naar de lay-out van uw bron kijkt en alle stijlen ziet. Omdat op de reguliere en mobiele versies alles goed kan zijn, maar op tablets kan alles waardeloos zijn. Daarom moeten dergelijke controles ook worden gebruikt wanneer u uw resource aanmaakt.

Ik heb het destijds niet gebruikt, maar toen bleek dat er enkele problemen zijn met de weergave van verschillende gadgets. Nu moeten we ons tot andere lay-outontwerpers wenden voor hulp.

Quirktools.com

Waarschijnlijk de meest populaire service waarmee u kunt zien hoe een site zich gedraagt, is quirktools.com. Ga ernaartoe en je ziet een eenvoudige service met intuïtieve interface. Zorg ervoor dat u zich op het tabblad Screenfly bevindt.

Voer nu het adres van uw site in een speciale regel in, waarna u uw bron in uw ziet normale conditie. Nou, dan begint de pret. Bovenaan staan verschillende pictogrammen die verschillende apparaten vertegenwoordigen: computers, tablets, tv's, telefoons. Door op een pictogram te klikken, wordt een vervolgkeuzemenu geopend met bepaalde machtigingen en modellen die daarmee corresponderen.

Ik wil bijvoorbeeld zien hoe mijn geesteskind eruit zal zien op een Samsung Galaxy S3-telefoon met een resolutie van 360*440. Ik ga naar het telefoonpictogram en selecteer vereiste resolutie. Trouwens, hier wordt de standaard genomen Galaxy-lijn S, dus ik heb mijn model gekozen.

En nu is alles goed verlopen. En natuurlijk moet je jezelf niet beperken tot één resolutie. Laten we overal controleren waar we kunnen. En trouwens, er is nog een interessante knop in het menu: Roteren. Dankzij dit kunnen we weten hoe onze site eruit ziet als het scherm 90 graden is gedraaid.

ami.responsivedesign.is

Een andere verificatieservice die ik erg leuk vond, is http://ami.responsivedesign.is/. Ga naar de site en voer in het speciale veld het adres in van de bron die u zoekt en klik vervolgens op GAAN. Hierdoor zie je maar liefst vier verschillende displays voor vier apparaten.

Het bijzondere aan deze dienst is dat er slechts vier populaire apparaatresoluties zijn, maar dat ze allemaal tegelijkertijd worden weergegeven, zodat je het grote geheel kunt zien. Geweldig, toch?

deviceponsive.com

deviceponsive.com lijkt erg op degene die hierboven is beschreven, maar er zijn twee keer zoveel verschillende schermopties. Ga dus gewoon naar de site, schrijf de jouwe in de rij en blader vervolgens door de pagina's om deze te bekijken.

Het voordeel van deze dienst is, net als de vorige, dat u niet alleen naar het scherm kijkt, maar dat u ook het werk op deze apparaten kunt emuleren, bijvoorbeeld door te scrollen, te klikken, enz.

Tester voor mobiel/responsief webontwerp

En natuurlijk kan ik het niet laten om een browserextensie te noemen. In veel gevallen is het inderdaad veel handiger om ermee te werken dan met welke dienst dan ook.

Voor onze doeleinden raad ik u aan een extensie in Google Chrome te installeren genaamd Tester voor mobiel/responsief webontwerp. Na de installatie ziet u bovenaan een overeenkomstig pictogram, als u erop klikt, kunt u een van de beschikbare resoluties selecteren (de meest populaire modellen mobiele telefoons en tablets), en stel ook uw eigen instellingen helemaal onderaan in de sectie in "Aangepaste gebruikersagent/oplossing".

Overigens is deze methode, van alles wat ik hierboven heb beschreven, de enige die naast de adaptieve lay-out ook aparte mobiele versies (vk.com) weergeeft, dus houd daar rekening mee.

Werken met een raam

En natuurlijk kan ik het niet laten om de meeste te noemen klassieke versie cheques. Om te zien hoe de site er bij verschillende resoluties uit zal zien, hoeft u deze alleen maar in de venstermodus te openen, en niet op volledig scherm, en dit venster vervolgens geleidelijk te verkleinen.

Door dit venster te verkleinen, zal de inhoud van onze bron zich aanpassen aan de grootte van dit venster. Het is zo simpel.

Maar er kleven uiteraard nadelen aan deze methoden. Ze laten niet zien hoe websites met een aparte mobiele versie in plaats van een responsieve versie eruitzien. Bijvoorbeeld vk.com en ok.ru. Wanneer we ze openen vanaf een apparaat, worden we overgezet naar de mobiele versie van m.vk.com en m.ok.ru.

En dit is waar het grootste probleem zich voordoet. Het enige dat dergelijke sites weergeeft, is de browserextensie die ik hierboven heb beschreven. Hier werkt alles duidelijk. Trouwens, als je favoriete methoden hebt, zal ik ze graag zien. Dus schrijf in de reacties).

Met vriendelijke groet, Dmitry Kostin.

Stop met het aanpassen van het formaat van uw browservenster, stop met het verkrachten ervan! Ik wed dat je dit meer dan eens hebt gehoord. Oké, misschien heb je er nog nooit van gehoord. Maar als je professioneel responsieve websites ontwikkelt, weet je wat ik bedoel: elke DOM-wijziging of CSS-bewerking, en je begint opnieuw de rand van de browser heen en weer te trekken, de wijzigingen te testen en te kijken of er iets kapot is.

Het doel van je bewegingen is om de schermen van verschillende apparaten te imiteren.

In een bedrijfsomgeving heeft u vaak een verscheidenheid aan gadgets ter beschikking van het bedrijf om te testen. Op mijn werk heb ik een iPad, iPod, andere tablets, laptops en desktopmonitors tot mijn beschikking. Als je die luxe niet hebt, moet je gebruik maken van wat voorhanden is.

Gelukkig is er een indrukwekkende set online hulpmiddelen simuleren verschillende diagonalen apparaten. Natuurlijk heeft elk van hen zijn eigen voor- en nadelen, we zullen verschillende van deze tools bekijken.

Voor het testen heb ik gekozen voor de echt responsieve website PajamasOnYourFeet.com, de site is gebouwd op basis van een HTML5-sjabloon die gratis wordt verstrekt door EGrappler.

Reageer ik?

Am I Responsive, een zeer eenvoudige tool waarmee u snel uw site op maximaal 4 apparaten kunt bekijken. Ze zijn allemaal iOS en de ontwikkelaar legt dit uit als een kenmerk van de site. Over het algemeen geen instellingen, geen keuze, maar heel eenvoudig en duidelijk.

Beschikbare maten:

desktopmonitor - 1600 x 992px;
laptop - 1280 x 802px;
tablet - 768 x 1024px;
mobiele telefoon - 320 x 480px.

Om de ontwikkelaar te citeren: “Dit is geen testtool, het is uiterst belangrijk om op te testen echte apparaten. A dit hulpmiddel Hiermee kun je snel een screenshot maken en de klant laten zien wat je bedoelt.”

Er zijn twee leuke features: de mogelijkheid om apparaten over je scherm te slepen, en de mogelijkheid om een link naar een sitetest te delen.

apparaat positief

deviceponsive lijkt sterk op Am I Responsive, in die zin dat het net zo eenvoudig is, met een minimum aan instellingen en opties. Alle beschikbare apparaten worden in één keer weergegeven lange pagina. Van alle beschikbare opties is dit de mogelijkheid om de koptekstachtergrond te bewerken en daar uw logo toe te voegen, wat handig zal zijn als u besluit een screenshot te delen.

Apparaten en beschikbare schermresoluties.

Macbook - 1280 x 800
iPad staand - 768 x 1024
iPad staand - 1024 x 768
Kindle-portret - 600 x 1024
Kindle landschap oriëntatie- 1024 x 600
iPhone-portret - 320 x 480
iPhone liggend - 480 x 320
Melkwegportret - 240 x 320
Melkweglandschap - 320 x 240

Zoals bij de meeste vergelijkbare tools worden schuifbalken weergegeven die op echte apparaten niet aanwezig zouden zijn. Dit is een noodzakelijke stap om scrollen op niet-aanraakapparaten mogelijk te maken.

responsieve proef

Net als deviceponive geeft de responsieve test uw site weer verschillende apparaten. Maar in plaats van iedereen tegelijk te laten zien, kies jij vereiste apparaat V topmenu Pagina's. Overigens werkt het schalen hier correct, waardoor je een hogere resolutie op een kleinere kunt testen.

30 verschillende resoluties beschikbaar op de site, variërend van een enorme desktopmonitor tot wat zij een "waardeloze Android" noemen (om eerlijk te zijn, er is ook een normale Android).

Betreft Firefox-browser, dan werkt het niet een beetje correct met deze site. Houd er rekening mee dat de schermafbeelding niet de schuifregelaar tussen de groene koptekst en het witte achtergrondinhoudsgebied laat zien.

responsive.is

Zeer vergelijkbaar met de vorige twee tools, maar er is één ding dat responsive.is onderscheidt van de andere. Dit vloeiende animatie bij het verplaatsen van het ene apparaat naar het andere, evenals een semi-transparant gebied dat het echte gebied van de site laat zien dat niet in het weergavegebied valt.

Beschikbare apparaatopties zijn automatisch (de manier waarop u de site ziet), desktopcomputer, tablet in liggende en staande richting, smartphone in staande en liggende stand. Helaas is het niet mogelijk om willekeurige formaten in px in te stellen.

Schermquery's

Maar hier zijn de mogelijkheden Beschikbare opties onderscheid Screenqueries van eerdere services. Hier zijn 14 telefoons en 12 tablets te zien, met aparte opties om te schakelen tussen portret- en landschapsmodi. De resultaten worden weergegeven op een raster met linialen. Het is ook mogelijk om een aangepaste resolutie in te stellen door de rechter- of onderrand te slepen.

Een interessant kenmerk van deze site is dat er voor een aantal apparaten een ‘Trueview’-optie is die uw site in de eigen browser van het apparaat toont.

Helaas kon Firefox de schuifregelaar hier ook niet weergeven. Je hoeft mij niet de schuld te geven, Firefox is mijn favoriete browser, maar zo is het.

Schermvlieg

Screenfly is misschien wel het meest functionele van allemaal. 9 meer dan tabletapparaten beschikbaar - van 10" laptops tot 24" monitoren, 5 tablets, 9 telefoons, 3 televisie resoluties, evenals willekeurige resolutie. Voeg hier een aparte schakelaar voor portret- en landschapsmodus toe, evenals een optie om scrollen weer te geven. Ook kun je met één knop een link naar de test delen.

Voor elk apparaat wordt zowel in het menu als rechts de schermgrootte in px aangegeven bovenste hoek De werkelijke grootte van uw browservenster wordt weergegeven.

Alle bovengenoemde voordelen stellen ons in staat leiderschap te claimen, al is het maar om één ding (citaat van de ontwikkelaar): “Screenfly kan een proxyserver gebruiken om apparaten te imiteren terwijl u uw site bekijkt. De proxy bootst de user-agentstring na, maar niet het gedrag van deze apparaten." Screenfly is de enige service op de lijst die testen mogelijk maakt op basis van de user-agentstring.

Gebruikt u de gepresenteerde hulpmiddelen in uw praktijk? Deel uw geheimen over het ontwikkelen van responsieve websites in de reacties.

P.S. Meld eventuele fouten met betrekking tot de vertaling via PM.

Er zijn steeds meer apparaten beschikbaar voor consumenten, mensen hebben steeds vaker toegang tot internet vanaf tablets en smartphones. Zoekmachines letten op sites die ‘vriendelijk’ zijn met verschillende schermresoluties, en niet alleen op desktops. Een ontwerp dat op elk apparaat correct wordt weergegeven, wordt als responsief beschouwd.

In oktober 2016 kondigde Google wijzigingen aan in de zoekresultaten. Voorheen werden responsieve sites met een apart pictogram in de zoekresultaten gemarkeerd als mobielvriendelijk. De komende maanden zal de scheiding tussen mobiel (smartphones, tablets) en desktop (van computers en laptops) beginnen. Zoekresultaten. Als een aanzienlijk deel van uw doelgroep mobiele apparaten gebruikt, loopt u het risico een aantal apparaten kwijt te raken zoekverkeer, als het siteontwerp niet geschikt is voor smartphones en tablets.

Waarom controleren hoe een website eruit ziet op mobiele apparaten?

In 2015 heeft TNS Web Index een oriënterend onderzoek uitgevoerd. Ze ondervroegen 60.000 Russen in de leeftijdscategorie van 12 tot 64 jaar en ontdekten dat 64% van de internetgebruikers ook toegang heeft vanaf mobiele apparaten. 15% van dit aantal mensen doet het zonder computers. En hier zijn de Yandex-gegevens.

Meest gezocht naar informatie en inhoud: boeken, muziek, games, etc. Daarom is het raadzaam dat informatie- en entertainmentsites een responsive ontwerp hebben. En commercieel, als je last-minute diensten levert: een sleepwagen of slotenmaker bellen, noodopening van sloten, pizza- of sushibezorging.

Virtuele websitehosting voor populair CMS:

Aanpassingsvermogen zal voor geen enkele hulpbron overbodig zijn, omdat het mobiele publiek groeit en er geen daling wordt verwacht. Volgens hetzelfde onderzoek doen sommige gebruikers het al zonder desktops. A zoek robots ze verlagen ‘niet-rubber’-sites in de zoekresultaten. Uitzondering: bronnen met een laag aandeel mobiel verkeer.

Er zijn andere manieren om gebruikers van verschillende apparaten aan te spreken, bijvoorbeeld door een mobiele versie van de site te maken. Dit is handig voor bezoekers omdat de site niet wordt overladen met onnodige afbeeldingen en inhoud. Als de webmaster aanzienlijke wijzigingen in de code aanbrengt, heeft dit geen invloed op de hoofdsite. Maar er zijn ook aanzienlijke nadelen.

De lay-out van de tweede site zal veel duurder zijn dan het aanpassen van de oude sjabloon.
Verschillende adressen van de mobiele en standaardbron splitsen het verkeer in twee stromen.
Het kost meer tijd en geld om twee projecten te ondersteunen.

Doen mobiele versie de moeite waard als de overgrote meerderheid van het verkeer afkomstig is van telefoons en tablets: als u sociaal netwerk of entertainmentportaal. In andere gevallen - adaptief ontwerp.

Hoe controleer je hoe een website eruit ziet op een tablet of smartphone?

De tools van de online diensten Yandex.webmaster en Google omvatten speciale nutsvoorzieningen, die de site analyseren en aangeven waar u op problemen moet letten.

U kunt met eigen ogen zien hoe de site er in totaal uitziet voor eigenaren van mobiele apparaten populaire browsers. Voor Firefox wordt weergave aangeroepen met de sneltoets Ctrl+Shift+M.

IN Google Chrome Druk op F12 om te bekijken. We rekken het venster uit met de muis of stellen de gewenste resolutie in met cijfers.

Als u op zoek bent naar hosting voor een bepaald systeem contentbeheer – kijk eens op onze pagina.

Online diensten waarmee u kunt controleren hoe een website er bij verschillende resoluties uitziet.

U kunt controleren hoe de site eruitziet bij verschillende schermresoluties van gebruikers met behulp van online services.

Mobiel - 320x480px;
Tablet - 768x1024px;
Laptop - 1280x802px;
PC - 1600x992px.

Vergeleken met de eerste service is de functionaliteit beter. Toont machtigingen:

10 mobiel;
9 tabletten;
hetzelfde aantal pc's en laptops;
Als de gewenste optie nee, we stellen de parameters in via het toetsenbord.

Zorg ervoor dat je kijkt vanaf een mobiele telefoon, op verschillende versies van Android.

Soortgelijke diensten slechts een imitatie. Het komt voor dat er geen ontwerpproblemen op zitten, maar op Android-apparaat indeling zweeft. Lettertypestatistieken, knopgroottes en weergave van sommige css\html-tags zijn specifiek voor verschillende besturingssystemen en browsers.

Het is absoluut noodzakelijk om te kijken hoe de site er op echte apparaten uitziet en of het mogelijk is om er gerichte acties op uit te voeren. Het komt voor dat de site er geweldig uitziet, maar het bestelformulier werkt niet.

Maar niet altijd bij de hand noodzakelijke hulpmiddelen- niet iedereen op het werk krijgt een iPad, iPhone en een paar Android-apparaten. Je hoeft niet alles te doorzoeken mogelijke opties, maar het is beter om dit in ieder geval te controleren op de apparaten waarop u het vaakst wordt bezocht.

Als er geen zijn, vraag het dan vereiste model van een vriend of test het in uw plaatselijke winkel. Anders loopt u het risico een aanzienlijk deel van uw verkeer te verliezen. We verkrijgen informatie over het publiek van de site, de meest populaire resoluties en besturingssystemen met behulp van dezelfde Yandex.metrics.

Gebruikstarieven mobiele browsers dagelijks groeien. Volgens statistieken is ongeveer 32% van het internetverkeer afkomstig van mobiele telefoons tabletcomputers. Dit betekent ook dat de verwachtingen van de consument ten aanzien van mobiele websites toenemen.

Artikelnavigatie:

Het testen van een site vóór de lancering is uiterst belangrijk noodzakelijke stap vanwege de enorme verscheidenheid aan mobiele apparaten waarover consumenten beschikken. En zelfs het gebruik van een dergelijke flexibele methodologie neemt deze noodzaak niet weg. Mobiele apparaten vervangen geleidelijk de desktopcomputers. Zie onderstaande grafiek, zie hoeveel mobiel verkeer de afgelopen twee jaar is gegroeid?

Er zijn verschillende manieren om mobiele sites te controleren. Hieronder staan de vijf belangrijkste testmethoden, gerangschikt van meest effectief tot minst geprefereerd.

1. Testen op echte mobiele apparaten

Het is het beste om de site op echte apparaten te testen, omdat veel van de nuances van interactie niet kunnen worden geëmuleerd. De gebruikerservaring (UX) wordt beïnvloed door hele lijn factoren: onstabiele netwerkverbinding, pixeldichtheid, relatieve grootte van actieve elementen op de pagina en echte tijd pagina aan het laden. Idealiter zou de site voor iedereen gecontroleerd moeten worden mobiele toestellen.

Van nature, volledige testen praktisch onuitvoerbaar omdat het veel tijd en middelen vergt. De optimale oplossing zou zijn om meerdere mobiele apparaten aan te schaffen voor de zogenaamde testkit, wat vooral belangrijk is voor klantgerichte bedrijven. De testset bestaat meestal uit de meest populaire apparaten die worden gebruikt voor surfen op het web. Deze aanpak laat je uitvoeren fysieke testen in reële omstandigheden en bekijk de site door de ogen van de gebruiker. Als het kopen van mobiele telefoons voor een testkit niet in het projectbudget past, gebruik dan eigen smartphone. Hoogstwaarschijnlijk draait uw smartphone op iOS, wat u in ieder geval een idee geeft van hoe de meeste gebruikers de geanalyseerde site zien. Ontdek welke mobiele apparaten uw familieleden, collega's en vrienden hebben, zodat u de site ook op andere apparaten kunt bekijken.

2. Gebruik van een iOS-simulator en Android-emulator

Echte hardware kan niet worden vervangen, maar bij gebrek aan iets beters zullen software-emulators het wel doen. Emulators voor iOS en Android zijn voornamelijk ontworpen voor het testen van native applicaties. Ze bieden echter standaardbrowsers op mobiele apparaten die de site redelijk nauwkeurig reproduceren zoals deze eruit zou zien op een echt apparaat. Laten we de zin heel precies benadrukken, aangezien emulators geen rekening houden met de status van de netwerkverbinding, de laadsnelheid van de pagina, de relatieve grootte van actieve elementen en andere nuances die alleen in reële omstandigheden kunnen worden waargenomen. De visualisatietools zijn echter functioneel gelijkwaardig aan echte apparaten en kunnen de compatibiliteit tussen browsers goed controleren.

iOS-simulator geleverd in een geïntegreerde omgeving Xcode-ontwikkeling, simuleert de weergave van de site op iPhone en iPad

De iOS-simulator is opgenomen in de geïntegreerde Xcode-softwareontwikkelomgeving. Installeer eerst Xcode van App-platforms Winkel. Ga naar het Xcode-menu en selecteer Xcode > Open Developer Tool > iOS Simulator. Helaas is de tool alleen compatibel met Mac OS, dus Windows-gebruikers of Linux zal naar een andere optie moeten zoeken.

De Android-emulator wordt geleverd met de Android SDK-applicatie-ontwikkelomgeving. gedetailleerde informatie over Android-emulator gelegen.

3. Browsertesten

Als u geen testkit kunt samenstellen of de software niet begrijpt iOS-emulators en Android kunt u andere methoden gebruiken.

De online service BrowserStack simuleert desktop- en mobiele apparaten voor het testen van websites; het is een handige online tool voor het testen van websites op verschillende apparaten en in verschillende browsers.

4. Responsinator-service

Het testen van websites moet plaatsvinden op echte mobiele apparaten of met behulp van hoogwaardige emulators. Als de opgegeven methoden om welke reden dan ook niet kunnen worden geïmplementeerd, wordt de webmaster geconfronteerd grote hoeveelheid andere opties, aangezien testen in wezen neerkomt op eenvoudige verandering browservenstergroottes. Er zijn veel slimme tools ontwikkeld om dit probleem op te lossen, maar Responsinator wordt als de meest effectieve beschouwd.

Responsinator past de grootte van de site aan volgens gegeven parameters. De tool is handig om snel het gedrag van een responsief ontwerp te testen, maar is geen vervanging voor testen op echte apparaten.

Ga naar de site en voer de URL in van de site die wordt geanalyseerd. De service geeft uw website weer zoals deze er op populaire apparaten uit zou zien met verschillende schermresoluties. Het hulpmiddel kan nuttig zijn voor een snelle oppervlaktecontrole. Het is echter niet in staat om volledige tests op echte apparaten en zelfs software-emulatie te vervangen, omdat de tool op de grafische engine van de actieve browser draait. Met andere woorden: de service bevat geen mobiele browser-engines voor het weergeven van sites. Eigenlijk is het resultaat precies hetzelfde als bij handmatige wijziging browservenstergroottes.

5. Het formaat van het browservenster wijzigen

Wanneer ontwerpers en ontwikkelaars aan een site op een desktopcomputer werken, testen ze vaak het gedrag van responsieve ontwerpelementen door de browservenstergrootte te wijzigen. Deze actie is zo elementair dat de taal het niet ‘testen’ durft te noemen, maar het heeft geen zin om het te weigeren. Tijdens het werken aan codefragmenten gerelateerd aan adaptief ontwerp, snelle check type "geschakeld - gekeken - teruggeschakeld" helpt bij het evalueren veranderingen gemaakt. Deze techniek kan echter niet eens vergeleken worden met andere testmethoden: groottefouten, verschillende grafische motoren, gebrek aan netwerksignaalvertraging, enz. Deze methode heeft te veel nadelen om een gelijkwaardige vervanging te zijn voor andere testopties.

Hoe voer je testen uit?

Mensen die betrokken zijn bij de ontwikkeling van websites moeten meestal testen hoe de lay-out van de site wordt weergegeven op verschillende schermresoluties en in webbrowsers. Het is moeilijk om de weergave van een website op verschillende apparaten met verschillende schermresoluties te volgen. Gelukkig bieden sommige online sites een geweldig hulpmiddel voor het controleren van de pagina-indeling bij verschillende schermresoluties.

Deze websites worden weergegeven voorbeeld webpagina door de site-URL in te voeren. Als u wilt zien hoe uw webpagina er in verschillende schermresoluties uitziet, kunt u deze proberen gratis middelen, waarmee u eenvoudig de compatibiliteit met verschillende schermformaten kunt controleren.

Sommige van deze sites bieden een breed scala aan populaire resoluties voor desktops, laptops, tv's, tablets en mobiele apparaten, terwijl andere de mogelijkheid bieden om de resolutie handmatig in te voeren en de pagina-indeling met een specifieke resolutie te testen.

Hoewel alle tools eenvoudig en gemakkelijk te gebruiken zijn, hebben ze hun eigen voordelen in vergelijking met elkaar.

De eerste plaats kan worden ingenomen - heel erg Goede service voor het online testen van een site in verschillende resoluties die duidelijk en aantrekkelijk is gebruikersomgeving. Op de site vindt u verschillende schermresolutieopties, waaronder desktopcomputers, netbook, laptop, tablets, tv's.

Het is mogelijk om de apparaatnaam rechtstreeks te selecteren als u de exacte resolutie niet weet. U kunt dus Kindle, Google, Samsung, Motorola, Apple selecteren in de vervolgkeuzelijst en de pagina-indeling in de bijbehorende resolutie controleren.

Bovendien kunt u met Screenfly een aangepaste schermgrootte in pixels instellen en deze op uw pagina toepassen. Zo bekijk je eenvoudig webpagina's in vrijwel elke resolutie.

Bovendien kunt u het scherm draaien, het scrollen op webpagina's in- of uitschakelen, of een proxyserver gebruiken om de webpagina te testen.

Andere gratis online bron, waar u de site eenvoudig in verschillende resoluties kunt bekijken. Op de site vind je een goed aanbod aan apparaten desktop computer, laptop, tablet naar smartphone. Bovendien kunt u hiermee handmatig de resolutie invoeren en de pagina-indeling controleren.

Er is ook een "in browser"-optie die ruimte laat voor browserranden en bedieningselementen, evenals de taakbalk in het voorbeeldvenster.

Vervolgens komt er nog een gratis hulpmiddel, waarmee u de site in verschillende resoluties kunt testen. Het is mogelijk om te kiezen uit de voorgestelde resolutiemogelijkheden of uw eigen afmetingen voor de site in te voeren.

Deze site biedt er twee verschillende opties display: ramen en kozijnen. De raamoptie past er goed bij lage resolutie scherm, echter als de geselecteerde resolutie grotere maat scherm kunt u de optie Frames gebruiken om de compatibiliteit met uw schermgrootte te controleren.

definieert ook huidige resolutie uw scherm en geeft het ter referentie weer.

Nog een webtool waarmee u websitepagina's kunt testen verschillende maten. De site werkt het beste met Internet Explorer en geeft webpagina's weer in de geselecteerde resolutie. De lijst met machtigingen is echter zeer beperkt. Dit betekent dat u webpagina's in slechts 8 resoluties kunt bekijken, waaronder 800×600, 1024×768, 1280×960, 1440×900, 1600×1200, 1680×1050 en 1920×1200.

Heeft niet zoveel opties als andere vergelijkbare websites, maar het is het proberen waard.

Goede dag voor iedereen, mijn lieve vrienden en gasten van mijn blog. Ik herinner me dat ik nog maar drie jaar geleden nog nooit van een concept als adaptieve lay-out of mobiel had gehoord...

Bekijk de site op verschillende resoluties– een van die taken waarmee een webmaster te maken krijgt die zijn keuze heeft gemaakt voor adaptief ontwerp.

Nog niet zo lang geleden heb ik het ontwerp van mijn blog veranderd. Ik heb eenvoudigweg de sjabloon gewijzigd (Waar te downloaden?). Deze procedure is al meerdere keren uitgevoerd. 5 keer precies.

Reden laatste keer werd dat ik besloot de laadsnelheid van mijn site te controleren Google-service Snelheid Inzicht. Naast deze functie was er ook de mogelijkheid om het gebruiksgemak van de site voor bezoekers via mobiele apparaten te zien.

Wat ik zag beviel mij niet.

Zelf heb ik daar uiteraard niets nieuws ontdekt. Ik weet het heel goed zwakke kanten jouw blog. Dit zette mij echter aan het denken. Als ik de site aanpas aan verschillende resoluties, dan voorkom ik dat ik dagelijks die 5% van de bezoekers kwijtraak die mijn site bezoeken vanaf mobiele apparaten. Dus als deze 5% voorheen een minpunt voor mij was op basis van gedragsfactoren, zal het nu een pluspunt voor mij zijn.

Diezelfde dag heb ik het sjabloon uitgezocht dat je nu ziet. En verder dit moment Volgens Yandex Metrica heb ik in plaats van de eerdere weigering van 50% voor mobiele apparaten slechts 5-10%. Wat volgens mij heel goed is. Bovendien merkte ik een lichte toename van het verkeer. Het is moeilijk te zeggen of de verandering aan de site ten gunste van het aanpassingsvermogen impact heeft gehad, of dat andere werkzaamheden op de site effect hebben gehad, maar ik wil erin geloven.

Hoe dan ook, alleen echt gebruiksvriendelijke sites kunnen volledig concurreren op internet en een goede positie in de zoekresultaten innemen.

Voor degenen die het nog steeds niet weten, hoe zijn website eruit ziet in verschillende resoluties, zal ik een kleine lijst met online services plaatsen waarmee u de site op verschillende apparaten kunt bekijken. Ik weet zeker dat de link naar WordPress-thema's, die ik aan het begin van het artikel gaf, je zult het zeker nodig hebben na wat je zag.

De site controleren op verschillende apparaten

Er zijn nogal wat online diensten waar u dit kunt controleren hoe de site eruit zal zien op verschillende mobiele apparaten. Maar ik vond de stationaire het leukst Opera-programma Mobiele klassieke emulator

Opera Mobile klassieke emulator

Ik zag ergens op het forum dat dit niet altijd het geval is online diensten geven een nauwkeurige weergave. Om deze reden heb ik besloten om te installeren dit programma om de site op verschillende apparaten te controleren.

Het heeft een vrij eenvoudige interface, dus het is simpelweg niet nodig om de functionaliteit ervan te beschrijven.

Het doel van je bewegingen is om de schermen van verschillende apparaten te imiteren.

Gelukkig is er een indrukwekkende reeks online tools die verschillende apparaatgroottes simuleren. Natuurlijk heeft elk van hen zijn eigen voor- en nadelen, we zullen verschillende van deze tools bekijken.

Voor het testen heb ik gekozen voor de echt responsieve website PajamasOnYourFeet.com, de site is gebouwd op basis van een HTML5-sjabloon die gratis wordt verstrekt door EGrappler.