Како да тестирате одговорен дизајн бесплатно. Одговорен распоред со помош на JavaScript скрипта Тестирање одговорен дизајн

Здраво, драги читатели на блогови. Не е изненадувачки што адаптивниот дизајн станува сè попопуларен на рускиот Интернет. И, се разбира, дизајнерите на распоред треба да го проучат. Бидејќи респонзивниот дизајн наскоро ќе се најде на речиси сите веб-страници, бидејќи се повеќе луѓе користат мобилни уреди.

И би сакал да кажам дека страниците со него се многу попогодни за читање на такви уреди отколку без него.

Денес сакам да ве запознаам со 5 многу корисни и кул услуги со кои можете да ја проверите вашата веб-страница за приспособливост.

И така, ајде да одиме.

5 услуги каде што можете да ја проверите вашата веб-страница за приспособливост. www.responsivedesigntest.net

Добра услуга за проверка на сајтови. Има многу резолуции на екранот и за таблетите и за телефоните.

mattkersley.com

Едноставна услуга за проверка на веб-страница од Мет Керсли. Сите популарни резолуции за мобилни уреди се исто така достапни.

screenqueri.es

Многу кул услуга која ќе ја провери секоја страница. Многу ми се допадна дизајнот, како и функционалноста.

quirtools.com

Многу убава и функционална услуга. Дури е можно да се провери како ќе изгледа страницата на ТВ :-)

Од авторот: „Престанете да ја менувате големината на овој прелистувач, наскоро ќе биде избришан!“ Колку често го слушате ова? Па, во ред, можеби не толку често, но ако развивате одговорни веб-локации, знаете за што зборувам: секој пат кога уредувате DOM или CSS, го влечете работ на прелистувачот напред-назад, тестирајќи ги промените и барајќи неточности.

Општо земено, повеќето од овие напори се обид да се имитираат големини на екранот на различни уреди.

Ако правите развој на претпријатие, веројатно имате многу уреди обезбедени од компанијата за тестирање. Каде што работам, имаме iPad, iPhone, уште еден или два таблети, лаптопи и десктоп компјутери. Ако го немате тој луксуз, мора да го искористите тоа што го имате при рака.

Дома имам два различни лаптопи, два различни Андроид уреди: Kindle и Nexus 7. Ги користам овие уреди за да ги тестирам моите хонорарни случувања, но јасно е дека ова не е исцрпна селекција. Воопшто не iOS уреди, и додека се сметам за ран посвојувач, не планирам да го купувам секој нов телефон/таблет/таблет веднаш штом ќе излезе на продажба.

Значи, што треба да направи развивачот? За среќа, има се поголем број на алатки базирани на прелистувач кои симулираат големина на екранот на различни уреди. Различни алатки, се разбира, доаѓаат со различни групи на функции и различни нивоа на ефикасност. Ќе разгледаме некои од нив овде.

За цели на тестирање, ја зедов првата навистина одговорна веб-страница што ја создадов, PajamasOnYourFeet.com. Се заснова на шаблонот Brownie HTML5, многу великодушно и слободно доставен до заедницата на програмери на EGrappler.

Дали реагирам?

Дали реагирам? – целосно лесен, моментален преглед на вашиот сајт во однос на тоа како ќе се појави на четири различни уреди. Сите четири се iOS, а развивачот го објаснува својот избор на веб-страницата. Не нуди никакви контроли или селекции, само многу едноставен и елегантен дисплеј. Погледнете ги димензиите на прозорецот:

Десктоп - 1600 x 992 пиксели, се намалува по скала (0,3181)

Лаптоп - 1280 x 802 px, се намалува во размер (0,277)

Таблет - 768 x 1024 px, се намалува по скала (0,219)

Мобилен - 320 x 480 пиксели, се намалува по скала (0,219)

Да го цитирам развивачот: „Ова не е алатка за тестирање, многу е важно ова да се направи на вистински уреди. Но, тоа е алатка за правење брзи снимки од екранот (за мене) и обезбедување визуелна можност да се „продлабочи“ на состаноците со клиентите што мислевте“.

позитивен уред

deviceponsive е сличен на страницата Дали сум одговорна? оној што ја прикажува вашата страница едноставно и уредно, но нема контроли или достапни опции кога станува збор за уреди. Сите тие се прикажани истовремено на една долга страница. Има интересно својство - можете да го менувате заглавието со уредување на бојата на позадината и вметнување на сопственото лого, а потоа „да го испечатите“. На овој начин, во извесна смисла, можете да ја брендирате вашата страница кога прикажувате слики од екранот на клиентот. Уреди и големини на екран симулирани на оваа страница:

Macbook - 1280 x 800

iPad (портрет) - 768 x 1024

iPad (пејзаж) - 1024 x 768

Kindle (портрет) - 600 x 1024

Kindle (пејзаж) - 1024 x 600

iPhone (ориентација на портрет) - 320 x 480

iPhone (пејзаж) - 480 x 320

Галакси (портрет) - 240 x 320

Галакси (пејзаж) - 320 x 240

Како и кај повеќето слични алатки, лентите за лизгање се појавуваат на мали уреди. Тие нема да се појават на вистински уред, но за да можете да го скролувате тестот приказ на уред без допир, мора да направите некои отстапки.

одговорен тест

Како уредно, така и респонзивниот тест ја прикажува вашата страница на повеќе уреди, но наместо да ги прикажува сите одеднаш на една страница, вие избирате кој уред да го гледате од едноставното мени на врвот на страницата. Прелистувајќи ја оваа страница на лаптоп со средна големина, открив дека смалувањето на страницата функционира одлично, што ви овозможува да ја видите целата локација во прозорецот на уредот што се тестира.

Овде се нудат 13 различни прозорци за гледање, од голем монитор Десктоп компјутерна таканаречениот „Crappy Android“ (да бидам искрен, тие имаат и опција наречена „ Андроид е подобар„(Поубав Андроид).

Уште еднаш, Firefox малку се сопнува на оваа страница. Забележете на сликата од екранот - помеѓу зеленото заглавие и областа за содржина со бела позадина - има само сина лента каде што треба да се појави лизгачот на сликата.

одговора.е

Тој е многу сличен на претходните два, а единственото нешто што го издвојува responsive.is од нив е непречената анимација на екранот од еден уред до друг, како и проѕирна прекривка што покажува дека недвижниот имот на страницата паѓа надвор од приказот за гледање. .

Единствените достапни опции на уредот овде се автоматските, кои го пополнуваат прозорецот на вашиот прелистувач, прикажувајќи ја страницата онака како што би ја виделе ако одите до неа: Десктоп; Таблет (ориентација на пејзаж); Таблет (ориентација на портрет); Паметен телефон (ориентација на пејзаж) и паметен телефон (ориентација на портрет), димензиите на пикселите не се дадени.

Screenqueries

Уште еднаш, неколку различни функции и опции ги издвојуваат Screenqueries од другите сајтови. Има 14 телефонски и 12 таблет уреди со посебен елемент за префрлување на режими на портрет и пејзаж. Тие се прикажани на нумерирана мрежа со пиксели, а димензиите се прикажани во долниот десен агол на екранот за тестирање. Рабовите на екранот се влечат за да можете да ги тестирате сопствените големини. Повлечете или кликнете над областа за тестирање и заднината ќе стане сива, со помалку неуреден изглед.

Интересна карактеристикаоваа страница - за неколку уреди постои опција „Вистински приказ“, која ја прикажува вашата страница завиткана во прелистувачот Chrome доделен на овој уред. За жал, а јас веќе се навикнав на ова, Firefox не може да го прикаже лизгачот за слики на местото за тестирање. Не грижете се, јас навистина го претпочитам Firefox кога се во прашање прелистувачите, но за среќа имаме опции.

Screenfly

Screenfly навистина го зголемува факторот на употребливост. Нуди девет уреди поголеми од таблети, од 10-инчен лаптоп до 24-инчен десктоп, пет таблети, девет паметни телефони, три големини на телевизор и опција за прилагодена големина на екранот. Секоја опција што ќе ја изберете може да се ротира во ориентација на портрет или пејзаж користејќи посебна контрола во менито. Можете да изберете дали да дозволите лизгање или не и да генерирате врска што може да се сподели со еден клик на копче.

Веб-страницата е проактивно корисна во начинот на кој прикажува информации за големината на пикселите. Секој уред во менито е прикажан со име и димензии на пиксели, големината на вашиот сопствен прозорец на прелистувачот е прикажана во горниот десен агол на прозорецот, а димензиите на избраната опција се прикажани во подножјето под екранот заедно со URL на страницата што се тестира. Оваа мала карактеристика го олеснува документирањето на слики од екранот и споделувањето информации со клиентите.

Сето горенаведено веќе би ја направило идеална алатка, но програмерите на Screenfly најдоа можност да ја направат едноставно врвна класа и обезбедија својство на прокси-сервер. Цитирање од нивната веб-локација: „Screenfly може да користи прокси-сервер за да ги имитира уредите додека ја гледате нивната веб-локација. Проксито ја симулира низата на кориснички агенти на уредите што ги избирате, но не и однесувањето на тие уреди“. Сите други алатки опфатени овде се занимаваат исклучиво со CSS. Screenfly е единствениот што дозволува тестирање врз основа на низата на кориснички агент.

Откако ја тестирав на овој начин еден сајт што го создадов со постоечката мобилна верзија, можам да кажам дека резултатите беа многу добри. Сè беше прикажано точно како што очекував и карактеристиките беа тестирани. Мора да се каже дека тестирањето на низи на кориснички агенти стана традиционално, но оваа страница е направена многу одамна, а имотот на прокси се покажа како многу корисен додаток за него.

Заклучок

Значи, можете да видите дека има многу ресурси достапни за тестирање на одговорни веб-страници. Тие се разликуваат по уникатни својства; кои страници ќе ги користите ќе зависат од вашите лични преференци и барања, и се обидувам да ве охрабрам да ги истражувате и експериментирате со нив. Колку повеќе ние програмерите имаме навистина корисни алатки, толку подобро.

Онлајн продавницата треба да се оптимизира за мобилни уреди. Овој проблем е решен со помош на адаптивен дизајн, кој овозможува страницата да се прикажува правилно на која било платформа. Сепак, имплементирањето на одговорен дизајн доаѓа со стандарден сет на стапици. Да ги наведеме 8-те најчести проблеми типични за сајтовите за онлајн шопинг.

Занемарување на анализата на однесувањето на посетителите

Брзањето да се влезе во мобилниот сегмент ги принудува трговците на мало да дизајнираат веб-страница без да спроведат сериозна анализа на однесувањето на посетителите. Анализата на однесувањето на посетителите е најважната фаза на подготовка, која ви овозможува да ги идентификувате најпопуларните мобилни уреди и прво да ја оптимизирате страницата за нив. Анализата помага да се одреди „најпопуларното“ корисничко дејство, на пример, зголемување на сликата на производот; ја покажува стапката на конверзија на мобилните посетители итн. Овие податоци ќе обезбедат увид во поставките за однесувањето на корисниците и ќе помогнат да се исполнат очекувањата на мобилната публика. Анализа мобилен сообраќајпотребно е систематско и доследно да се спроведуваат резултатите, финализирање и оптимизирање на страницата за да се задоволат потребите на клиентите.

Дизајнирање продавница за десктоп

Вообичаено, десктоп верзијата на онлајн продавницата е редизајнирана за мобилни екрани, иако пологично е да се земе малиот екран на мобилниот уред и потоа да се зголеми на работната површина. Трговците на мало често не ги сфаќаат техничките проблеми со доведување на веб-локација дизајнирана за работна површина со големина на паметен телефон.
Почетен дизајн за мобилни екрани, се фокусирате на искуството на мобилниот корисник. Како резултат на тоа, ќе ви биде полесно да дизајнирате за двата канали: десктоп и мобилен.

Тестирање одговорен дизајн

Тестирањето на мобилниот распоред на онлајн продавницата е задолжителна фаза на лансирање, но многу сопственици често го занемаруваат и стартуваат без тестирање. Како резултат на тоа, на живата верзија на страницата за мобилни уреди, може да се појават грешки дури и за време на процесот на купување и нарачка.

Недостатоците на адаптивниот дизајн лесно се идентификуваат со прелиминарно тестирање на онлајн продавницата, но многу продавачи немаат ресурси за ова. За да го намалите ризикот од губење пари, тестирајте ги рутите на клучните корисници околу страницата во главните прелистувачи - Chrome, IE, Firefox, Safari и оперативни системи- Windows, Mac OS, Android, IOS на популарни Мобилни уреди. Тестирајте секогаш кога правите промени; услугите како BrowserStack или Viewport Resizer може да помогнат да се намали времето за тестирање на неколку часа.

Мали елементи за мобилни екрани

Во обид да вклопат повеќе простор на екранот на паметниот телефон, сопствениците на онлајн продавници штедат на големината на нивните копчиња „повик за акција“. Не ги принудувајте корисниците да зумираат за да кликнат на копчето Купи и не ставајте мали елементи премногу блиску еден до друг, инаку вашите корисници ќе изберат да одат на поудобна локација. Дизајнирајте интерфејси со големи елементи за навигација и големини на копчињата за повик за акција.

Бавна брзина на вчитување на страницата

Мобилната публика сака брзи сајтови и минимално време на вчитување. Оценете ги компонентите на вашите мобилни страници - слики, копчиња, текст, скрипти - тие треба да бидат оптимизирани за мобилни уреди. Google го зема предвид времето за вчитување на страницата во своите SERP и ги рангира мобилните сајтови и им дава предност на врвот, така што „лесните“ страници добиваат дополнителна сериозна предност.

Одделете ја содржината во различни јазичиња, на пример, страницата на производот може да содржи само основна слика, опис, цена и копче „Купи“. Прегледите и видеата од клиентите може да се стават на посебно јазиче и да ја намалат „тежината“ на главниот дел од страницата. Покрај содржината, оптимизирајте ги другите елементи кои влијаат на брзината на вчитување - CSS-датотеки, слики и скрипти, испраќајте ги само потребните податоци. Алатките што ја намалуваат големината на датотеките со ресурси и нивното време за вчитување ќе ви помогнат во ова: Uglify или JSCompress.

Сечење содржина за мобилни корисници

Често, програмерите кријат дел од содржината, така што вчитувањето на мобилните уреди е побрзо. Меѓутоа, често големината на страницата всушност не се намалува и содржината едноставно не се прикажува на корисникот. Вашата продавница треба да може динамички да генерира страница, намалувајќи ја тежината на страницата и времето на вчитување за посетителите на мобилните телефони. Дополнително, давањето помала содржина на мобилните корисници е лошо и негативно влијае на искуството на потрошувачите. Обично, за време на процесот на купување тие ги користат различни уреди, околу 90% од онлајн купувачите го прават тоа. Ограничувањето на методите за дизајн што реагираат е голема грешка.

Поддржува слики во само една резолуција

Добра веб-локација со респонзивен дизајн автоматски ја менува резолуцијата на сликите во зависност од типот на уредот; тешките слики го зголемуваат времето на вчитување. Постојат неколку начини за автоматско прилагодување на големината на сликата за да одговара специфичен уред. „Флексибилните“ слики (флуидни слики) се метод базиран на CSS кој ви овозможува да компресирате и истегнете слика во зависност од ширината на елементот што ја содржи, или елемент HTML5 кој ви овозможува да вчитате слика со потребната големина за секоја тип на уред.

„Неодговорни“ е-пораки

Се случува сè да е во ред со самата страница; респонзивниот дизајн добро функционира на десктоп и мобилни уреди. Но, е-поштата не реагираат, а мобилните корисници треба да се мачат да ги проверат деталите за нарачката или да се движат низ бескрајната листа на препорачани производи за да стигнат до нивните завршени набавки. Е-поштата се клучна точка на допир на клиентите, затоа интегрирајте одговорен дизајн на е-пошта во вашата мобилна стратегија. Дизајнирајте ги и тестирајте ги вашите писма и билтени; шаблоните за писма треба да бидат „лесни“ и да содржат само важни информации.

Со развојот на веб технологиите се зголемуваат и барањата за веб развој. Најголем притисок чувствуваат веб-програмерите, дизајнерите на распоред или како што се нарекуваат денес фронтенд програмери.

Во оваа статија ќе зборуваме малку за адаптивниот распоред, бидејќи овој „трик“ сега е многу скап. Кога станува збор за адаптивниот распоред, дизајнерите на распоред од кое било ниво гледаат на клиентите или проект менаџерите, благо кажано, со лутина, бидејќи разбираат колку е тешко.

Многу луѓе почнуваат да го мешаат адаптивниот распоред со флексибилен распоред; ова е многу честа грешка на почетниците дизајнери на распоред. Која е разликата што прашуваш?

Ајде прво, за да ти биде јасно и така да се каже, да ги ставиме сите точки и да погледнеме какви видови распоред има.

Постојат 4 типа на распоред:

Фиксен распоред

Распоред на гума

Прилагодлив распоред

Одговорен распоред

Ајде да ги разгледаме сите видови подетално.

1. Фиксен распоред

Блоковите не ја менуваат нивната ширина. На мониторите со ниска резолуција, се појавува хоризонтална лента за лизгање.

#temnyi, #svetlyi ( ширина: 440 px; )

2. Распоред на гума

Блоковите ја менуваат својата ширина во зависност од големината на прозорецот на прелистувачот. Може да потрае максимални и минимални вредности (својство со максимална ширина). Но, не можете да направите 50% од 50% до 100% бидејќи екранот станува помал.

#temnyi, #svetlyi ( ширина: 50%; )

3. Адаптивен распоред

Имплементиран со користење @media или скрипти. Приспособено за одредени познати уреди (320, 768, 1024, итн.). Секоја промена се случува во грчеви, откако ќе се достигне едно од наведените нивоа. Дефинитивно погоден за

#temnyi, #svetlyi ( ширина: 430 px; ) @media (max-width: 1220 px) ( #temnyi, #svetlyi ( ширина: 380 px; ) ) @media (max-width: 1120 px) ( #temnyi, #svetly : 325 px; ) ) @media (максимална ширина: 680 px) ( #temnyi, #svetlyi ( ширина: 200 px; ) )

4. Одговорен распоред

Ова е комбинација од течен и адаптивен распоред. Најтешко за спроведување. Но, резултатот е најприфатлив. Слободно може да се каже дека страницата ќе се прилагоди на кој било уред.

#temnyi, #svetlyi ( ширина: 50%; ) @media (макс-широчина: 1006 px) ( #temnyi, #svetlyi ( ширина: 100%; ) )

Значи, разговаравме за 4 типа на распоред на веб-страници. Сега дојде време за нашата чудесна адаптивна скрипта за распоред. Се надевам дека нема потреба да објаснувам ништо, сценариото е прилично едноставно, само велиме дека кога ќе промените некој блок ќе се меша некаде и тоа е тоа. Се разбира, ова е можно и преку CSS стилови, но треба да ги знаете сите методи; понекогаш на некои места некои нема да работат, а некои ќе бидат исправни.

Скрипта за приспособлив распоред:

/* Ајде да создадеме променлива во која можете да ставите класи на моногест, за удобна употреба на истите во кодот. Односно, овде ги детектира еднаш и тоа е тоа, а не пред секој примерок! ова е корисна карактеристика */ var my = ( прозорец: $(прозорец) ); /*Всушност самата функција*/ $(window).resize(function () ( /*Променлива која ја одредува ширината на прозорецот и ја става во променливата ширина*/ var width = my.window.width( ); /*услов за трансформација на прозорецот, т.е. состојба што се извршува кога ширината на прозорецот ќе достигне одредена големина */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

Тоа е се. Ако имате какви било прашања, пишете во коментари, одете на