30 Корисни одговарајући веб дизајн туторијали
Дакле, стигли смо до краја нашег "Недеља прилагођавања веб дизајна", вечерашњи пост ће бити последњи у серији. Сви ћемо вам помоћи да усавршите своје вјештине у манипулацији тим кодовима како бисте одговорили по вољи када су приказани на различитим уређајима. А да бисмо то урадили, ми смо представљени 30 Водичи за прилагодљив веб дизајн фоунд онлине. Ова листа није замишљена да буде исцрпна, али ће вас почети разумјети основе дизајнирања адаптивне веб локације која ће задовољити све врсте екрана.
Почећемо са уводним туторијалима у 'Бреакинг тхе Ице', нешто попут класе РВД: 101 коју треба да похађате да бисте добили концепт пре него што пређемо на вежбе 'Старт Буилдинг'..
На крају ћемо завршити секцију 'До Море' у којој ћемо представити туторијале који се играју са хоризонталним распоредом, 'еластичним' видеозаписима, падајућим менијима и навигацијама са хармоником, минијатурама и лепљивим питањима са табелама.
Али прво…
Ево рекапитулације два водича која су раније ове недеље објавили наши аутори:
Респонсиве вебсите Навигатион
Тхорик Фирдаус - [Виев туториал]
Ево упутства које ће вам помоћи да направите вашу сопствену навигацију веб сајта. Један од најважнијих аспеката веб сајта је како се лако крећете кроз различите делове сајта. Сазнајте како да оптимизујете ово помоћу ЦСС3 уз овај водич.
Респонсиве Ресуме
Јаке Роцхелеау - [Виев туториал]
Ако сте професионалац на вебу и онлине животопис је већ саставни део ваше каријере, онда бисте требали искористити прилику да и тај резиме поново укључите. Олакшајте послодавцима и клијентима да вас пронађу на било ком уређају. И док сте на томе, ваш сопствени животопис се претвара у портфолио онога што можете да урадите као програмер.
Разбијање леда
Где смо стали? Ах да, хајде да почнемо с ледом!
Водич за почетнике за одговарајући веб дизајн
Ницк Петит - [Виев туториал]
Овај туторијал је одлична полазна тачка за почетнике јер описује шта веб дизајн одговара, како је дошао до изражаја, као и објашњења о флуидним мрежама и медијским упитима међу осталима. Погледајте и ресурсе наведене на дну туториала.
Увод у одговарајући веб дизајн: Видео
Ницк Петит - [Виев туториал]
Ово је туторијал који је дугачак 9 минута и скенира површину онога што одговара веб дизајну, како је настао, утицај који има на дизајн веб сајта и који су елементи укључени у израду веб-дизајна. . Ако желите да схватите о чему се ради у веб дизајну а да се прво не упишете у кодирање, требало би да почнете са овим видеом.
Како претворити било који сајт у одговарајући сајт
Роцхестер Оливеира - [Виев туториал]
Ово је још један туторијал који полази од основе, али разбија све по мало, укључујући оперативни систем и претраживаче којима се ваш сајт прилагођава, као и елементе који су погођени када се веб сајт прегледава са различитих уређаја. Аутор је такође представио неке корисне ВордПресс и јКуери додатке који ће вам олакшати рад.
Одговарајући дизајн у 3 корака
Би Ницк Ла - [Виев туториал]
Овај водич ће вам објаснити како можете да креирате одговарајући веб дизајн са мета таговима, ХТМЛ структуром и свим важним медијским упитима. Потребно вам је неко знање о ЦСС-у да бисте га разумели ...
Дизајнирање за одговарајући Веб
Мак Лузуриага - [Виев туториал]
Ево чланка који није толико туторијал колико је водич за креирање веб дизајна. Међутим, аутор вам дословно каже да је потребно и да не реагује на веб дизајн. Постоје објашњења о томе зашто одређене карактеристике нису довољно осјетљиве, како радити са пропорцијама и модулима, а што је најбоље од свега, релативно је кратко и лако се апсорбује.
Одговарајући веб дизајн: Визуелни водич
Андрев Гормлеи - [Виев туториал]
Ако текстуални водичи нису одрживи, покушајте са овим видео упутством. То је још увек технички, али ако се осећате боље, не морате много да читате. Дугачак је око 25 минута, а видео-уређај се брзо креће кроз делове где он кодира, а затим се враћа да објасни шта кодови раде.
Старт Буилдинг
У реду, хајде да почнемо да градимо неке одговарајуће дизајне, почевши од ...
Флуид Гридс
Етхан Марцотте - [Виев туториал]
Реците решетку, и помислили бисте "круте структуре", рецимо флуидне и помислили бисте да може да тече са једне стране екрана на дно или на врх или на страну када вршите притисак на претраживач, али ставите их заједно и вероватно бисте мислили да треба да погледате овај водич да бисте у потпуности схватили како течне мреже могу помоћи да ваш дизајн буде бржи.
Флуид Имагес
Етхан Марцотте - [Виев туториал]
До краја овог чланка, требало би да знате ко је Етхан Марцотте. Ево наговјештаја: он је тај који је смислио концепт и термин за веб дизајн. Његово име ће се у великој мери појавити у сваком другом водичу на овој листи, па зашто не бисте послушали савјете о флуидним сликама директно од самог мајстора?.
Скалабилни обрасци за навигацију у прилагодљивом веб дизајну
Мицхаел Мескер - [Виев туториал]
Овај туторијал говори о лекцијама које је аутор научио из рада на великом веб дизајну. Прочитајте његов „проход“ о томе како да креирате шаблоне које је лакше конфигурисати за усер-фриендли и респонсиве резултате. То је одличан поглед иза кулиса у разумевању како дизајнирати интерфејсе на најбољи начин за десктоп, таблет и мобилне приказе.
Одговарајући веб дизајн са ЦСС3 Медиа Куериес
Би Ницк Ла - [Виев туториал]
И још један одличан водич који ће вам помоћи да научите како да креирате шаблон веб-сајта који одговара веб претраживачу са ХТМЛ5 и ЦСС3. То је приступ корак-по-корак и постоје демо верзије веб-дизајна пре и након што су медијски упити примењени да би боље проценили утицај медијских упита.
ЦСС ефекти: Спаце Имагес Оут на висину текста
Зое Мицклеи Гилленватер - [Виев туториал]
Овај водич вам омогућава да научите како да направите слике са фиксном ширином и промените њихову величину и размак како бисте се сложили са пратећим текстом, без обзира на то како се промени прозор прегледача.
Адаптиве Лаиоутс витх Медиа Куериес
Аарон Густафсон - [Виев туториал]
Научите како да користите адаптивне или флексибилне распореде са ЦСС медијским упитима. Само следите вежбу да бисте научили да прилагодите дизајн дизајну двоструком приказу или приказу у једној колони, као и да припремите дизајн за иПхоне и иПад.
Одговарајуће слике: Експериментисање са прилагођавањем величине контекста
Сцотт Јехл - [Виев туториал]
Ево туториала који је користио буилд-фром-мобиле-фирст приступ. Ова техника одређује већу величину за слике које се користе на већим резолуцијама екрана, минус захтевима за слике као и УА сниффинг.
Учинити више
Еластиц Видеос
Би Ницк Ла - [Виев туториал]
Овај туторијал се бави скалирањем видео записа када се промени прозор прегледача. То је у суштини ЦСС трик и постоји демо за приказ трика на послу у самом туториалу.
Скривање и откривање делова слика
Зое Мицклеи Гилленватер - [Виев туториал]
Водич је заправо преузет из књиге аутора, описујући како открити или сакрити делове слика у зависности од резолуције екрана. Она вас учи како да динамички обрезујете слике када се промени величина екрана, показујући вам само део целокупне слике када је простор ограничен.
Одговарајући Навигатор Садржаја са ЦСС3
Мари Лоу - [Виев туториал]
Више волите начин на који корисници могу да се крећу по вашој страни? Затим, треба да прочитате овај водич да бисте сазнали како да кодирате неке цоол прелазе: фаде ин, слајдове, ротације и скалирање. Транзиције су у суштини садржајни слојеви који су приказани или сакривени специфичним кодирањем.
Креирајте одговарајући предложак за веб дизајн
Харри Аткинс - [Виев туториал]
Ово је кратак туторијал за стварање одговора веб темплате који ради и на десктопу као и на иПхонеу.
Одговарајући хоризонтални распоред
Мари Лоу - [Виев туториал]
Овај водич вас учи како да направите хоризонтални распоред са неколико панела са садржајем који се могу скроловати. Користећи Порекло врста као узорак текста, свако поглавље књиге је одвојено у колонама које се налазе једна поред друге у режиму пуног претраживача, али када су смањене на довољно мале, изглед се мења у потпуно вертикалну "књигу".
Конвертовање менија у падајући мени за мале екране
Цхрис Цоииер - [Виев туториал]
Овај водич ће вам показати како претворити изборник у падајућу листу када је прозор прегледника уски или када сте на мобилном уређају. Ред веза у горњем десном углу странице претвара се у падајући мени да би се уштедио простор без жртвовања опција за навигацију.
Флексибилно клизно на врху
Мари Лоу - [Виев туториал]
Научите како да направите једноставан и флексибилан распоред хармоника, са прелазима који ће се појављивати и подесивим ширинама на основу величине и резолуције екрана.
Како користити ЦСС3 оријентацију медија упита
Аутор: Риан Седдон - [Виев туториал]
На основу једноставног правила којим се дефинишу портретни (висински већи од ширине) и пејзажни (ширина већи од висине) режими, можете написати медијски упит да бисте циљали одређене стилове на основу начина на који га гледате. Овај водич ће нам показати како да урадимо управо то и долази заједно са линком на камелеон који мења боју и који користи боју како би демонстрирао ову промену док сте смањили прозор прегледача.
Одговарајући табели података
Цхрис Цоииер - [Виев туториал]
Таблице су извор главобоља када су у питању мале величине екрана, али то не значи да морамо потпуно избјегавати таблице. Научите како да користите медијске упите како бисте у потпуности променили формате табеле када се пребаците на величине екрана за мобилне уређаје. Погледајте демо да бисте добили идеју о магији коју можете направити на основу овог туториала.
Флуид ЦСС3 Слидесхов са ефектом паралаксе
Би Ринг Винг - [Виев туториал]
Креирајте ЦСС3 слидесхов гдје се користе двије позадинске слике и када се мијењају позиције позадине, види се ефект паралаксе. Осим тога, слидесхов је флексибилан, мијењајући величину себе док се прозор прегледника затвара.
Како направити одговорну галерију умањених сличица
Јосхуа Јохнсон - [Виев туториал]
Ово је одлично за веб локације које имају минијатуре у галерији. Када се промени прозор прегледача, изглед се мења тако да заузима између две колоне (мање величине екрана) и пет (максималних) колона. За више сличних слајдова и слајдера, погледајте наш 10 најбољих бесплатних сликовних галерија / слидесхов чланака.
Оптимизујте своју е-пошту за мобилне уређаје
Аутор: Рос Ходгекисс - [Виев туториал]
Чак и е-поруке могу бити оптимизиране за приказ на малом екрану, као што су веб-локације. Већину времена текст у ХТМЛ е-пошти се мијења до точке која није направљена за угодно читање; научите како да управљате овим и више из овог водича.
користећи оквире
Направите прилагођену мобилну веб страницу са скелетом
Јосхуа Јохнсон - [Виев туториал]
Скелетон је одличан оквир за изградњу одговарајућих сајтова са њим. Овај водич вас води у корак-по-корак водич о томе како користити Скелетон оквир за изградњу одличних одговарајућих дизајна. Бићете запањени да видите како је лако имплементирати.
Одговарајући веб дизајн са ХТМЛ5 & Лесс Фрамеворк 3
Лоуис Симонеау - [Виев туториал]
Ако нисте добро упознати са Лесс-ом, онда прво погледајте наш Лесс ЦСС туториал да бисте добили укус Лесс-а. У овом водичу, оквир Лесс је коришћен да бисте видели јасно ефекте медијских упита.
Закључак
И то закључује наше Респонсиве Веб Десигн сериес. Надамо се да су теме, алати и други ресурси приказани у овој серији помогли у откривању концепта прилагођеног веб дизајна нашим читатељима. Али како ћемо знати ако нам не кажете?
Јавите нам своје повратне информације на серији и ако имате приједлоге за више идеја које желите видјети на хонгкиат.цом. Ставите нам линију или коментар испод.
