Потребителски вход

Запомни ме | Регистрация
Постинг
02.02.2012 13:05 - Инструменти за създаване на адаптивен уеб дизайн
Автор: edgesoft Категория: Технологии   
Прочетен: 2395 Коментари: 3 Гласове:
1



Неслучайно адаптивния уеб дизайн попадна в списъка с най-горещи тенденции в уеб дизайна, очаквани през 2012 година. Поддръжниците на идеята за един дизайн за всички устройства стават все повече. Налице са и отлични инструменти, които правят създаването на адаптивен дизайн по-лесна и по-бърза за реализиране задача. Най-любимите ни инструменти, както и такива, които намираме за особено полезни, макар да не сме имали възможност лично да ги използваме, ще откриете в настоящата статия.

в блога на edge soft можете да  прочетете оригиналната статия: Инструменти за създаване на адаптивен уеб дизайн 

Вече писахме по темата адаптивен уеб дизайн, а също така отбелязахме, че една от топ тенденциите в уеб дизайна през 2012 се очаква да бъде именно разработването на уеб сайтове, които са с адаптивен уеб дизайн. Именно защото намираме темата за интересна, бихме искали да ви представим един списък с полезни инструменти, които могат да бъдат в помощ при разработването на сайт с адаптивен уеб дизайн.

В книгата си "Responsive Design" Итън Маркот посочва три важни елемента, от които имаме нужда, за да създадем сайт с адаптивен дизайн:
  • гъвкава решетка (responsive grid)
  • адаптивни изображения (responsive images)
  • медийни заявки (media queries)
Съществуват различни инструменти, които могат да ни помогнат да набавим всеки от тези елементи и в настоящата статия сме събрали някои от най-любимите ни, както и такива, които намираме за полезни, макар да не сме имали възможност да ги използваме лично.

Гъвкава решетка

320 and up

В повечето случаи, когато правим адаптивен дизайн, започваме с оформление на сайта за висока резолюция и от там намаляваме до най-ниската резолюция. Създателите на 320 and up - Анди и Кийт Кларксмятат, че обратният подход е по-добър и това им виждане е залегнало в разработения от тях инструмент.

Skeleton

Skeleton е отличен инструмент, който представлява колекция от CSS и JS файлове. Макар да не представлява цялостно решение, ускорява разработката на сайтове с адаптивен дизайн и лесно се интегрира с вече съществуващи системи, които може да използвате.

Less

Един изключително популярен CSS фреймуърк, за който има редица инструменти и плъгини. Идва с 4 CSS оформления за резолюции от 992 px и по-ниски.


Адаптивни изображения

filament group предоставя едно отлично решение за адаптивни изображения, което не само, че променя размера на изображенията, но и използва две версии на изображението (мобилна и пълноразмерна) с цел оптимизиране на общия размер на страницата и по-бързно зареждане.

Друг интересен инструмент е Sencha.io Src, който представлява облачна услуга, предоставяща изображения с оптимален размер, в зависимост от резолюцията на устройството.


Медийни заявки

Media Queries са част от CSS3 и съответно всеки модерен браузер ги поддържа. Накратко с използването на медийни заявки можем да зададем стилове, които да се прилагат, според възможностите на използваното устройство. Съответно медийните заявки се използват широко, за да бъде постигнат адаптивен дизайн и съществуват някои инструменти, които улесняват работата ни с медийни заявки в значителна степен.

Темплейт медийни заявки

Анди Кларк, дизайнер и автор на редица статии и дори книга на тема адаптивен уеб дизайн, е съставил много полезен темплейт с медийни заявки, който можете директно да използвате при създаване на сайтове с адаптивен уеб дизайн.

Respond.js

Както споменахме, медийните заявки се поддържат в CSS3. Какво обаче се случва с браузерите, които не поддържат CSS3? Липсата на поддръжка за медийни заявки в по-старите браузери е проблем, чието решение намираме с използването на Respond.js. Макар функционалността да се свежда до установяване на минимална и максимална широчина на екрана, това в повечето случай е достатъчно, а и е много по-добре от нищо.

автор: Орлин Радев, edge soft

в блога на edge soft можете да  прочетете и други интересни и полезни статии на тема уеб дизайн и онлайн маркетинг, както и самата оригинална статия: Инструменти за създаване на адаптивен уеб дизайн 



Гласувай:
1



1. анонимен - Ugg Sale
26.10.2012 06:15
vtvkgtkyx
http://www.buybootugg.com/ Cheap Ugg
http://www.uggboots-discout.com/ Ugg Sale
http://www.cheapbootugg.com/ Uggs Outlet
http://www.uggboots-winter.com/ uggs for sale
http://www.winter-uggboots.com/ Cheap Uggs
http://www.uggbootsbuyalot.com/ Cheap Ugg Boots
http://www.backuggboots.com/ Cheap Ugg Boots
http://www.uggbootstoback.com/ Ugg Sale
http://www.uggbootsaledollar.com/ Ugg Boots Sale
http://www.discountbootsale.com/ uggs for sale
http://www.shoesforwinter.com/ Uggs Outlet
http://www.bootsonline-ugg.com/ Ugg Sale
http://www.bootoutletssale.com/ Ugg Boots
oxbxerkqv
<a href=http://www.buybootugg.com/#zkshnclip>Ugg Outlet</a>
<a href=http://www.uggboots-discout.com/#aaagwzhmc>uggs outlet</a>
<a href=http://www.cheapbootugg.com/#gppfryfkz>Ugg Sale</a>
<a href=http://www.uggboots-winter.com/#efclqlybr>Uggs Sale</a>
<a href=http://www.winter-uggboots.com/#olvkmwwfv>Ugg Boots</a>
<a href=http://www.uggbootsbuyalot.com/#vkqlclzwk>Uggs</a>
<a href=http://www.backuggboots.com/#zkmmxgnxz>Cheap Ugg Boots</a>
<a href=http://www.uggbootstoback.com/#zgevspuiq>Cheap Ugg</a>
<a href=http://www.uggbootsaledollar.com/#flrhvbwio>Ugg Boots</a>
<a href=http://www.discountbootsale.com/#tcpcxahpn>Ugg Sale</a>
<a href=http://www.shoesforwinter.com/#mryvckpgs>Cheap Ugg Boots</a>
<a href=http://www.bootsonline-ugg.com/#xjzpgfgmt>Cheap Ugg</a>
<a href=http://www.bootoutletssale.com/#pgjjvtdqw>uggs outlet</a>
dsxafbklf
<a href=http://www.buybootugg.com/#wcmaonrkh>Cheap Ugg</a>
<a href=http://www.uggboots-discout.com/#botpscowe>Ugg Sale</a>
<a href=http://www.cheapbootugg.com/#uefdumwja>Uggs</a>
<a href=http://www.uggboots-winter.com/#datygupav>Cheap Uggs</a>
<a href=http://www.winter-uggboots.com/#awihuljpq>Cheap Ugg Boots</a>
<a href=http://www.uggbootsbuyalot.com/#wbmrgmtzc>Cheap Ugg Boots</a>
<a href=http://www.backuggboots.com/#slsickbnz>uggs outlet</a>
<a href=http://www.uggbootstoback.com/#pefextpmn>Ugg Boots Sale</a>
<a href=http://www.uggbootsaledollar.com/#kxawhtlkv>uggs for sale</a>
<a href=http://www.discountbootsale.com/#sbjigcwte>Cheap Ugg Boots</a>
<a href=http://www.shoesforwinter.com/#xmcvywuxp>Uggs Sale</a>
<a href=http://www.bootsonline-ugg.com/#penynwkpu>Uggs</a>
<a href=http://www.bootoutletssale.com/#ncaxfuvew>Ugg Boots</a>
цитирай
2. анонимен - uggs outlet
26.10.2012 10:45
ywzwlynrx
http://www.buybootugg.com/ Cheap Ugg
http://www.uggboots-discout.com/ Uggs Sale
http://www.cheapbootugg.com/ Ugg Boots Sale
http://www.uggboots-winter.com/ Uggs
http://www.winter-uggboots.com/ Ugg Outlet
http://www.uggbootsbuyalot.com/ uggs for sale
http://www.backuggboots.com/ Ugg Boots Sale
http://www.uggbootstoback.com/ Uggs Outlet
http://www.uggbootsaledollar.com/ Ugg Sale
http://www.discountbootsale.com/ uggs for sale
http://www.shoesforwinter.com/ Uggs Sale
http://www.bootsonline-ugg.com/ uggs outlet
http://www.bootoutletssale.com/ uggs for sale
opujnelly
http://www.buybootugg.com/#drrjofqym - Cheap Ugg
http://www.uggboots-discout.com/#yyowtparz - Ugg Outlet
http://www.cheapbootugg.com/#gptqbhjft - Ugg Outlet
http://www.uggboots-winter.com/#xkcrahijh - Ugg Boots Sale
http://www.winter-uggboots.com/#hruipylkt - Uggs
http://www.uggbootsbuyalot.com/#cjtkwzhdo - uggs outlet
http://www.backuggboots.com/#suzaqbxvo - Uggs Outlet
http://www.uggbootstoback.com/#uoklomaeu - Ugg Boots Sale
http://www.uggbootsaledollar.com/#mpudtosnz - uggs outlet
http://www.discountbootsale.com/#orasxxzum - Ugg Sale
http://www.shoesforwinter.com/#fcyyldwlo - Cheap Ugg Boots
http://www.bootsonline-ugg.com/#zxzbcbsbv - Ugg Boots
http://www.bootoutletssale.com/#ctocspjfc - Ugg Sale
bfsekqgza
<a href=http://www.buybootugg.com/#mxnrhxxcq>Uggs</a>
<a href=http://www.uggboots-discout.com/#optxkjati>Cheap Uggs</a>
<a href=http://www.cheapbootugg.com/#btgboasuj>Ugg Outlet</a>
<a href=http://www.uggboots-winter.com/#mybxaufrv>Cheap Ugg Boots</a>
<a href=http://www.winter-uggboots.com/#creglycow>Ugg Boots Sale</a>
<a href=http://www.uggbootsbuyalot.com/#zgkkbenoz>Uggs</a>
<a href=http://www.backuggboots.com/#kzleyimuk>Uggs Sale</a>
<a href=http://www.uggbootstoback.com/#mmjdrzixo>Ugg Boots Sale</a>
<a href=http://www.uggbootsaledollar.com/#dcozgkiar>Uggs Sale</a>
<a href=http://www.discountbootsale.com/#taizbyyzr>Uggs Sale</a>
<a href=http://www.shoesforwinter.com/#oyhuclkvm>Uggs Outlet</a>
<a href=http://www.bootsonline-ugg.com/#wcnlisote>Uggs</a>
<a href=http://www.bootoutletssale.com/#fxjmhvucd>Ugg Sale</a>
цитирай
3. анонимен - Ugg Boots Sale
31.10.2012 16:18
http://www.beautybootssale.com/ uggs for sale
http://www.takebootsugg.com/ Ugg Boots Sale
http://www.cheapboots-ugg.com/ Cheap Ugg
http://www.bootscheapugg.com/ Cheugg boot clearanceap Ugg
http://www.comeonugg.com/ uggs outlet
<a href=http://www.beautybootssale.com/>Ugg Boots</a>
<a href=http://www.takebootsugg.com/>Cheap Ugg Boots</a>
<a href=http://www.cheapboots-ugg.com/>ugg boot clearance</a>
<a href=http://www.bootscheapugg.com/>Ugg Boots Sale</a>
<a href=http://www.comeonugg.com/>uggs outlet</a>
цитирай
Търсене

За този блог
Автор: edgesoft
Категория: Технологии
Прочетен: 35161
Постинги: 10
Коментари: 13
Гласове: 11
Архив
Календар
«  Март, 2024  
ПВСЧПСН
123
45678910
11121314151617
18192021222324
25262728293031