Буквално секој нов клиент, покрај конвенционалната, бара и мобилна верзија на својот веб сајт. Ова е сосема разумно, особено бидејќи има корисници на BlackBerry, iPhone, iPad, NetBook, Kindle и многу други мобилни уреди.
Еден нов дизајнер мора да е во тек со иновациите во светот на технологијата, а сето тоа бара време, особено со континуираната еволуција.
Веб дизајнот и веб програмирањето многу брзо се приближуваат до точка во која не можат да ги следат технологијата на уредите и резолуциите кои се појавуваат на пазарот. Невозможно е, и непрактично, да се креира по една верзија на веб сајтот за секој од постоечките уреди. Меѓутоа, од друга страна, сопствениците на веб сајтови не може да ги жртвуваат корисниците на одредени уреди, особено не со конкуренцијата која ја имаат. Тогаш, која е другата опција?
Прилагодливиот веб дизајн е техника на веб дизајн и програмирање со која веб страниците се креираат на начин кој им дозволува да ги менуваат карактеристиките на распоредот во зависност од околината (уредот и платформата) и однесувањето на корисникот (ориентацијата). Во овој пристап, флексибилните мрежи и распореди на страницата се употребуваат заедно со апликација на медиа прашалници во CSS.
Кога еден корисник ќе се префрли од лаптоп на iPad, прилагодливиот веб сајт автоматски ќе се вклопи во новата големинат на слика, резолуција и скрипти за тој уред. Токму затоа овој пристап ве ослободува од потребата да креирате различни фази во развојот и дизајнот секој пат кога ќе се појави нов уред на пазарот.
Како функционира прилагодливиот дизајн
Прилагодливиот веб дизајн е позајмен од концепт познат како прилагодлива архитекстура, во која просторот/собата автоматски се прилагодува во зависност од бројот и движењата на луѓето во тој простор. Употребува најразлични техники и инсталации за да ги прошири, собере или искриви ѕидните структури врз основа на бројот на луѓе и нивните движења во однос на ѕидот.
Сличната идеја се употребува и во веб дизајнот. Наместо да креира сајт за секоја корисничка група (на различен уред) посебно, креира дизајн кој автоматски се прилагодува слично како и прилагодливата архитектура.
Е сега, на зграда може да се употребат сензори за движење и роботика, но во веб дизајнот, прилагодливиот аспект мора да се воведе преку апстрактно размислување и употреба на техники кои веќе постојат-медиа прашалници, флуидни распореди и скрипти, за да може хомогено да се реформатираат ознаките и веб страниците.
Прилагодливиот веб дизајн е многу повеќе од слики кои автоматски ја менуваат големината и ја прилагодуваат резолуцијата на екранот. Тој воведува целосно нов начин на дизајнирање и карактеристи, кои ќе ги продискутираме во продолжение.
Прилагодување на резолуцијата на екранот
Секој нов уред значи уште една варијанта на резолуција, ориентација и дефиниција на екраните. Некои од нив се дизајнирани за да поддржуваат разлики во големина, функционалност и боја. Како се дизајнира за вертикални, хоризонтални и квадратести екрани и како сето тоа се префрла и менува од еден во друг?
Точно е дека може да ги групирате големините на екрани во поголеми категории и да дизајнирате за секоја категорија, но и тоа е многу, особено ако помислиме дека секој ден се појавуваат и дизајнираат нови уреди. Исто така, помислете и на тоа дека некои корисници не ги зголемуваат, ниту намалуваат прелистувачите, туку ги употребуваат во предодредената големина. Едноставно-има премногу варијанти.
Да направиме сé да е флексибилно
Пред неколку години флексибилните распореди на страница беа луксуз за веб сајтовите. Тогаш само текстот и структурните елементи имаа флексибилност. Дури и тогаш, додавањето на слики можеше да предизвика прекршувања во распордот на елементите на страницата, а под одредени услови, и флексибилните структурни елементи можеа да доведат до истото.
Прилагодливиот дизајн ја зголемува флексибилноста на повеќето работи на еден веб сајт, како на пример, автоматско прилагодување на слики, распореди и многу повеќе опции со поголеми разлики во големината на екранот, резолуциите и ориентациите, како од лаптоп до iPad.
Најчестите техники вклучуваат креирање на комбинации од флуидни слики, флуидни мрежи и паметни ознаки кои ќе интервенираат кога е неопходно. Флуидните слики се креираат на три основни начини:
- Криење и прикажување на делови од сликата
- Креирање на лизгачки слики составени од повеќе делови
- Поставување на сликите во предниот дел така што тие може да се градираат со разлики во распоредот
Можеби изгледа едноставно, но станува збор за многу повеќе од обично вметнување на карактеристики. Некои делови можеби ќе треба да се исечат за да се задржи квалитетот при менување на големината, а некои пак остануваат пропорционални при менувањето. Секако ова не се однесува на сите оние комплекни ситуацуии кога распоредите се претерано скратени или стеснети, па изгледаат чудно.
Работење со слики
Голем дел од предизвикот кој ви го носи прилагодливиот веб дизајн е како да креирате флексибилност на слика. Најчестиот метод е да ја употребите командата за максимална ширина во CSS, каде ширината е поставена на 100%. Тогаш сликите се прикажуваат 100% , освен кога ширината на екранот е потесна од 100%. Сликата тогаш се стеснува согласно ширината на екранот.
Времето на превземање на сликата и резолуциите се поважни со мобилните уреди, особено онаму каде сликите првично биле наменети за поголеми уреди. Техниката која може да го реши ова ги вклучува својствата за собирање на слика, па така поголемите слики нема да зафаќаат голем простор на мали уреди. Овој метод е поддржан од сите модерни прелистувачи, за разлика од претходниот кој го беше оневозможен на Internet Explorer.
Средување на распоредите
Со екстремните промени во големината, неопходно е да се менува и распоредот. Може да имате засебни листи со стилови, но сепак, поефикасен метод е доколку употребите CSS медиа прашалници.Во овој метод, повеќето стилови ги задржуваат оригиналните карактеристики. Само одредени листи на стилови ќе ги наследат стиловите, разместувајќи ги елементите како што е побарано, а при тоа употребувајќи висини, ширини, лебдење, итн.
На пример, може да има една главна листа со стилови како предодредена, и со неа да се дефинираат главните структурни елементи и предодредените флексибилни лебдења и ширини. Ако листата со стилови која се употребува прави дел од содржината да е прекратка, превисока, преширока или претесна, проблемот се детектира и се поставува нова листа со стилови. Оваа нова листа со стилови ги прифаќа сите карактеристики на предодредената листа со стилови, само што на неа распоредот на страницата е редефиниран.
Заклучок
Прилагодливиот дизајн денес е една од оние работи кои како веб дизајнер или девелопер задолжително ќе мора да ги познавате. Доколку сте нови во оваа област или пак сакате да ги надополните своите знаења од HTML и CSS, подготвивме серија курсеви за прилагодлив дизајн.
