Responsive веб дизајн

Responsive веб дизајн

Актуелниот модерен тренд со појавата на паметните телефони и компјутерите на допир, овозможи нови теоретски рамки за развојот на идниот World Wide Web.

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

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

Потреба

Овој концепт потекнува од предизвикот за креирање веб-страна што ќе користи наједноставнa семантичка HTML структура и едноставен CSS стил, а притоа ќе може да биде Чувствителен (Risponsive) за сите модерни уреди. Тоа подразбира задржување на основните компоненти за создавање веб-страна (HTML/CSS) и притоа самата да може да се прилагоди кон контекстот и уредот што ја посетува.

Книги за Responsive Web & Mobile First

Книгите на Итан Маркоте и на Лук Вроблевски се најдобриот начин за запознавање со овие нови концепти на веб дизајн.

Дизајнерите на веб-страни до пред пет години имаа кориснички концепт за дизајн на веб-страна поставена за домашен компјутер што стои на биро, со релативно голем екран и негово користење со тастатура и глушец. Првите знаци на проширени хоризонти се појавија со iPhone. Apple освен што си отворија работа на самите себе си, ни отворија работа и на сите. Затоа сум им бескрајно благодарен што на крај сите видовме „аир“ од новата мода.

Јohn Polacek Пример за чувствителен дизајн

Пример за дизајн на чувствителна веб-страна. Посетете ја со мобилен, таблет или регуларен компјутер за целосното искуство, или само намалувајте и зголемувајте го интернет прелистувачот.

Нов начин на користење

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

Gestureworks Open Gesture Library

Библиотеката на guestworks е една од познатите такви интерактивни јазици за уреди со допир.

Тоа што се користи со прсти израсна во посебен јазик, сличен на јазикот што е многу почитуван и благороден – јазикот што го користат глувонемите луѓе.

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

Познати концепти за дизајн на визуелен распоред што се користат заедно со Чувствителен веб дизајн, сé:

  1. Fluid или течен изглед;
  2. Adaptive или прилагодлив;
  3. Flexible или флексибилен и најновиот;
  4. Responsive или чувствителен.

Сите овие визуелни шеми се теоретски и за дизајн на една веб-страна се користат мешано или поединечно во зависнот од намената на веб-страната.

Контекст на користење

Последниот елемент што е најважен, од каде што се разви и Mobile First (прво мобилен) моделот, е поврзан со можните околности при користење интернетот на даден уред. Градење на целата приказна околу новиот пристап во дизанјот на вебот додаде уште еден фактор, уред во рака спроти уред на маса. Ако го замислиме екранот на телефонот и само ги распоредиме визуелните елементи низ него без да процениме што ќе прави корисникот со тој материјал и какво искуство ќе има (user expirience (UX) / корисничко искуство) од посетата на дадената веб-страна, имаме незавршени аспекти што ќе го оддалечат од нашиот софтвер. Првиот проблем е како содржината се прикажува на телефонот. Имаме мал екран, што може да прикаже релативно мал број на елементи од веб-страната, не смее да биде премногу хардверски исцрпуван поради батеријата и користи релативно слаба интернет врска.

Што значи тоа?

  • Прво, дизајнот на веб-страната треба да биде семантички перфектен, напишан во добро структуриран HTML.
  • Второ, визуелна презентација да биде со најмалку (што е можно) користење на CSS,
  • Трето, слики што може да бидат флексибилни и притоа да не тежат многу,
  • Четврто, користењето на JavaScript по можност да го нема, но ако веќе го има треба да биде оптимизиран за една до три функции. Затоа постои jQuery и jQuery mobile,
  • Петто, скриптниот јазик или програмскиот јазик, ако се користи, треба да биде поставен по теркот на сите претходно наведени точки, плус да ја користи Semantic Web филозофијата.

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

gravatar
Автор: Капсаров Благој
За авторот:

Од сите сплетки и досетки се обидувам да инспирирам доволен број на луѓе што сакаат да го користат мозокот за креативен и позитивен развој. Мотото го позајмив од Рене Декарт: Cogito ergo sum! повеќе…

5 Коментари

  1. Штета што јазикот ни е толку оскуден во технолошка смисла.

    Иако adaptive е прилагодлив, responsive повеќе би го превела исто прилагодлив, отколку чувствителен… не е чувствителен како жена или како кочница на кола, туку одговара на уредот на кој се отвара и се прилагодува на него за да изгледа што поприродно на самиот уред.

    Во секој случај мило ми е што конечно има што да се прочита на македонски 🙂

    • Во тој контекст го користам Чувствителен, оти има чувство на одговорност кон уредот со кој веб-страната е посетена. И јас прво се залетав со прилагодлив, ама после со layouts моделите ми се спои :). Ама ајде да исковаме термини… Поздрав!

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

    • Најверојатно „приспособлив“ веб-дизајн е најблиску до смислата. Тој збор ги вклучува сите елементи на Resposnive web design.

  3. Na koj e-mail moze da vi pratam moe cv? Fala