Жооптуу веб-дизайн үчүн 50 фантастикалык курал

Автор: Monica Porter
Жаратылган Күнү: 17 Март 2021
Жаңыртуу Күнү: 17 Май 2024
Anonim
50 STEAM ОЮНУ АКЫСЫЗ 💲 ОЙНОО ҮЧҮН АКЫСЫЗ ОЮНДАР 2021
Видео: 50 STEAM ОЮНУ АКЫСЫЗ 💲 ОЙНОО ҮЧҮН АКЫСЫЗ ОЮНДАР 2021

Мазмун

Этан Маркотт өзүнүн "Жооптуу Веб Дизайн" аттуу макаласында жана ошондой эле эң көп сатылган китебинде киргизилген / ойлоп тапкандыктан, сайтка жооп берүү үчүн үч элемент керек:

  1. Ийкемдүү / суюк тор
  2. Жооптуу сүрөттөр
  3. Медиа суроолор

Ыкчам веб-дизайнга байланыштуу мотивдерди, түшүнүктөрдү жана техниканы камтыган башка көптөгөн сонун макалалар бар, ошондуктан биз ушул макалада сизге жоопкерчиликтүү мамиле кылууга жардам берүүчү айрым мыкты куралдарга көңүл бурабыз.

Баштоо үчүн шаймандар

Сайтыңызды курууну баштаардан мурун, баракчанын элементтери ар кандай шаймандардын ар кандай браузердин өлчөмүнө ылайыкташып, кандайча ылайыкташа тургандыгын эскиздеп, адатта, биринчи кезекте ойлонуп, ажырап калбашыбыз керек. иштөө столунун дизайны жана калган жоопторду кайталоо (кийинчерээк ойлонуу) (айрыкча Стефани (Салливан) Ревистин комментарийин караңыз).

01. Responsive Web Design Sketch Sheets

Джереми П Элфорддун жооп берген эскиз баракчаларынын топтому, баракча бөлүктөрү кандайча өзгөрүлө тургандыгын картада баштоо үчүн мыкты башталыш болуп саналат.


02. Responsive Design Sketchbook

Эгерде сиз бардык эскиздериңизди бир жерде сактоону кааласаңыз, анда App Sketchbook компаниясынын 50 жооптуу эскиз баракчасынан турган бул зым менен байланышкан китебин карап көрүңүз.

03. Responsive Wireframes

Тез жооп берүүчү веб-сайттарды куруунун кыйынчылыктарынын бири - жооптуу дизайн кандай иштээрин көрсөтүү үчүн сим кадрларды колдонуу. Adobe компаниясынын кызматкери Джеймс Меллерс бул эксперименталдык куралды комплекстүү макеттердин зымдуу рамкалары канчалык деңгээлде жооп берерин көрсөтүү үчүн топтоду.


04. Көп шайманды жайгаштыруу үлгүлөрү

Ыкчам дизайнды пландаштырууда сизден мурун башка адамдар ага кандайча кайрылгандыгын билүү пайдалуу, андыктан Люк Вроблевскийдин мисалдарга шилтемелери менен популярдуу үлгүлөрдүн тизмесин камтыган Көп шайманды жайгаштыруу үлгүлөрү эң сонун башталат.

05. Style Tiles

Саманата Уоррендин Style Tiles ыкмасы ылайыктуу доордо дизайн үчүн жаңы ыкманы сунуш кылат; тескерисинче, белгиленген туурасы дизайн макеттери, бул майда-чүйдөсүнө чейин жок, жалпы долбоорлоо ыкмасын көрсөтөт бөлүштүрүүчү же маанайборд сыяктуу.

Ийкемдүү / суюктук тор үчүн шаймандар

Жогоруда айтылгандай, жооптуу дизайн үчүн зарыл болгон биринчи компонент ийкемдүү / суюктук тору болуп саналат.Төмөнкүлөр мурунтан эле курулган: аларды жүктөп алышыңыз керек, ошондо сиз тезирээк жооптуу сайттын жолуна түшөсүз.


06. Алтын тор тутуму

Ошондой эле Less Framework программасын иштеп чыккан Джони Корпи, жооптуу дизайн үчүн ишенимдүү сетка тутумунун ушул жаңы версиясын чыгарды. 16дан сегизге, төрт тилкеге ​​оңой эле ыңгайлашкандыктан "бүктөлгөн" деп эсептелген Алтын тор тутуму браузердин кичинекей катмарын камтыйт, бул сиздин баракчаларыңыздагы торду текшерип көрөт.

07. Foldy960

Paravel, Incтеги таланттуу гендер, алардын жооптуу долбоорлорунун негизи катары колдонулган 960.gs торун чыгарышты.

08. SimpleGrid

SimpleGrid, Conor Muirhead тарабынан, бышырылган жооп менен курулган, ошондуктан сиздин веб-сайтыңыздын долбоору менен туруп, иштөө оңой.

09. 1140px CSS Grid

Мелбурндун дизайнери Энди Тейлордун дагы бир мыкты жооптуу тармактык тутуму - бул кеңири иштөө режиминен мобилдик телефонго өткөн 1140px CSS Grid.

10. Columnal CSS тор тутуму

Pulp + Pixels атыккан креативдик директор Ник Горслайн тарабынан түзүлгөн Columnal сетка системасы, 1140px сетка системасына негизделген, бирок эскиздик таблицалар жана симовая схемалар менен дизайн топтому, ошондой эле CSS мүчүлүштүктөрүн оңдоо стилдери сыяктуу кошумча жакшылыктар менен коштолгон.

11. Семантикалык тор тутуму

Sass жана LESS сыяктуу алдын-ала иштелип чыккан CSS кеңейтүүлөрү уламдан-улам популярдуу болуп баратат жана керексиз класстарды же элементтерди колдонбоону талап кылган Тайлер Тэйттин Semantic grid тутуму аларды ушул тармак тутумунда эң жогорку деңгээлде колдонот. Кененирээк coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ дарегинен окуңуз.

12. SUSY

Семантикалык сетка тутуму сыяктуу Oddbirdдин SUSY кошумча белгилөө же атайын класстарды колдонбогон тор тутумун түзгөн, бирок SUSY Sass колдонуучуларына гана багытталган (жана анын кеңейтүүсү, Компас).

13. Gridpak

Gridpak, Эрскайн Дизайн тарабынан, эң жаңы электр тармактарынын бири болуп саналат. Сиздин тилкелериңизди жана арыктарыңызды бир нече чекиттерге орнотууга мүмкүнчүлүк берет, андан кийин CSS, JavaScript жана PNG файлдарын чыгарат, ошондо сиздин командаңыз бир эле баштапкы чекиттен иштейт.

14. Gridset

Гридсеттин үстүндө дагы деле болсо бир аз сыр бар, анткени мен аны жазып жаткан учурда, ал чындыгында чыга элек. Бирок Марк Боултон Дизайндын куралы атайын, буйрук бербеген, сетка тутумдарын жана тармактарыңызды онлайн режиминде сактап, башкаруунун жолдорун убада кылат.

15. RWD үчүн жакшыраак Photoshop сети

Elliot Jay Stocks эски 960px де-факто сетка стандартынан баш тартууну жана анын ордуна 1000px базасынан иштөөнү сунуштап, бардык пайыздык эсептөөлөр менен иштөөнү жеңилдетет. Эгер макул болсоңуз, анда ал сиз менен иштешүү үчүн PSD жасады.

16. Суюктук торчолору

Эгерде сиздин дизайныңыз жогорку деңгээлде адистештирилген болсо жана сиз өзүңүздүн жеке торду түзүшүңүз керек болсо, аны .net Awards мыкты жаңы талапкер Номинанты Гарри Робертстин суюктук сеткасы калькулятору менен жасай аласыз.

17. Жооптуу Калькулятор

Калькулятордун дагы бир пикселдери, бирок Стю Робсон жазган CSS эрежелеринин бардыгын башкаларга салыштырмалуу бир топ алдыга жылдырат, демек, аларды көчүрүп, стилиңиздин ичине чаптап алсаңыз болот.

Ыкчам сүрөттөрдү (жана текстти) куралдары

Ыкчам веб-дизайндын дагы бир маанилүү компоненти суюк сүрөттөр. Суюк сүрөттөргө жетүү ыкмасы жөнөкөй болсо дагы, ар кандай шаймандардын иштешин жана барак жүктөмүн оптимизациялоо сезгич веб-дизайндагы эң чоң көйгөйлөрдүн бири окшойт. Бул жерде маселени чечүү үчүн бир нече ресурстар бар.

18. Жооптуу сүрөттөр

Filament Group экрандын чечилишинин негизинде ылайыктуу көлөмдөгү сүрөттү жөнөтүүнүн жолун ойлоп тапты. Масштабдуу жана масштабдуу масштабдагы мобилдик биринчи сүрөттөр менен жасалган бул тажрыйба шилтеме берүү үчүн ар кандай көлөмдөгү эки сүрөттүн болушун талап кылат.

19. Адаптацияланган сүрөттөр

Мэтт Уилкокс адаптацияланган сүрөттөрдү жаратуу үчүн Responsive Images куралынан дем алып, PHP жана кичинекей JavaScript колдонуп, колдонуучунун түзмөгүнө эч кандай кошумча белгилөөнү талап кылбай, тиешелүү сүрөттөрдү тейлейт.

20. Sencha.io Src (мурунку Tinysrc)

Sencha булут кызматын сунуштайт, алар жайгаштырылган сүрөттөрдүн шайманынын көлөмүнө ылайыкташтырылган оптималдаштырылган нускаларын жөнөтөт. Аны кантип колдонууну билүү үчүн, docs.sencha.com/io/src/ караңыз.

21. FitText

Paravel, Inc компаниясынын дагы бир асыл ташы - бул FitText.js, jQuery плагини, веб-типтин аталышы дизайнга жана шайманга жооп берет. Көбүрөөк маалымат алуу үчүн trentwalton.com/2011/05/10/fit-to-scale/ дарегинен караңыз.

22. slabText

FitText жана SlabType алгоритминен шыктанган Брайан Макаллистердин slabText - бул jQuery плагини, ал тексттин калың блокторун аныкталган кеңдикте сактоодо, алардын көлөмүн сезгичтик менен өзгөртөт.

Медиа сурамдардын куралдары

Эми ар кандай түзмөктөрдө, суюктук торунда жана суюк сүрөттөрдө сиздин жайгашууңуз кандайча өзгөрө тургандыгы жөнүндө элестетсеңиз, баракчанын элементтерин жооп берүүчү абалга өткөрүү үчүн медиа сурамдары керек.

23. Respond.js

Жооптуу дизайндагы бир маселе, медиа сурамдарды окуй албаган браузерлердин артта калуусу. Бул сиздин максаттуу аудиторияңызга байланыштуу маселе болбошу мүмкүн, бирок колдонуучуларды эски браузерлерге жайгаштыруу жакшы тажрыйба бойдон калууда. Respond.js, Скотт Джел тарабынан, мини-туурасы жана макс-туурасы касиеттери гана колдоого алынат.

Көбүрөөк маалымат алуу үчүн filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Wouter van der Graaf тарабынан чыгарылган CSS3-Mediaqueries.js, IEдин жана башка браузерлердин эски версияларында медиа-суроолордун бардык түрлөрүн натыйжалуу текшерүүгө жана колдонууга мүмкүнчүлүк берет.

25. Adapt.js

960.gs сетка тутумунун автору Натан Смит Adapt.js сценарийин жазган, ал браузердин өлчөмдөрүн аныктап, талап кылынган стилдик баракчаларды гана тейлейт - медиа сурамдары сыяктуу, бирок медиа суроолорсуз, демек, ал эски браузерлерде дагы иштейт.

26.ategorizr

Бул карама-каршы бурулган түзмөктү аныктоо - Бретт Жанкорддун Категоризр сценарийи, эгерде бул башкача стол же планшет деп табылбаса, шаймандар мобилдик деп божомолдоп, браузерлерге ресурстарды тейлөөгө мүмкүнчүлүк берет.

Ыкчам дизайн (жана мобилдик) казандар

Натыйжалуу иштөө агымынын духунда, казан плита дизайндарды браузерге тезирээк көчүрүү процессин жеңилдетет. Бул от казандардын көпчүлүгү жогоруда айтылган шаймандардын мыктыларын бир тыкан топтомго бириктирип турат: сценарийлер менен өркүндөтүлгөн ийкемдүү тор, биринчи кезекте мобилдик мазмунду камтыган философия.

27. 320 жана андан жогору

Andy Clarke's 320 and Up - бул мобилдик биринчи казан, ал LESS жана Bootstrap сыяктуу көптөгөн башка заманбап веб-дизайн куралдары менен интеграцияланган (# 30 караңыз). Бул сайтты тез арада иштетүү үчүн жеңил жана шамдагай ыкма. Ошондой эле Энди менен болгон маегибизди карап көрүңүз, анда ал жаңы версия жөнүндө көбүрөөк маалымат берет.

28. Gridless

Gridless бул HTML5 жана CSS3 табагы, ал сиздин типтүү дизайныңызга негиз болуп бере алат, типографияга жана браузердин кайчылаш-шайкеш келишине көңүл бурат.

29. Скелет

Баштапкы чекити эң кичине чечилген мурунку эки казан идиштерден айырмаланып, Дэйв Гамач тарабынан түзүлгөн Skeleton development kit 960.gs тор тутумуна негизделген жана мобилдик түзүмгө өткөн. Скелет, ошондой эле иштеп чыгуучуларга стилдерди курууга сонун стилдик алкакты камтыйт.

30. Bootstrap

Twitter тарабынан курулган жана азыр ачык булактардан турган Bootstrap - бул сайтты тез арада онлайн режиминде алуу үчүн алкак жана компоненттердин сериясы, жана анын эки бөлүгүнө ылайык, анын негизги бөлүктөрү иштейт.

Plugins, shims and polyfills

Заманбап браузерлерде жана программалык камсыздоодо жооп берүүгө ыңгайлуу болгонуна карабастан, кээде биз туруктуу тажрыйба менен камсыз кылуу үчүн кошумча куралдарды колдонушубуз керек.

31. Responsive Plugin

Мариос Люблински учурдагы WP темасын жооптуу темага айлантууга убада берген WordPress плагинин жазды. Бул кандайча иштээрин мен азырынча билбейм, анткени ал жазылганга чейин чыга элек, бирок эгер ал убадасын аткарса, анда ал абдан пайдалуу болушу керек.

32. кулатуу

Мазмунду ташып кетүү менен иштөө рабочий браузерлерде жакшы иштейт, бирок эски мобилдик браузерлер аны карама-каршылыктуу иштетишет. Эмгекчил Filament Group компаниясынын полифилли бардык мобилдик колдонуучулардын мыкты тажрыйба топтошуна ынануу менен, шаймандардын арасынан ырааттуу ырайымсыздыкты кошот.

33. MediaTable

Марко Пегораронун jQuery плагини, MediaTable, Respond.js менен иштейт, сиз чоң маалымат таблицаларын кичинекей экрандарда кантип чагылдырып, жооптуу мамычаларды жасап, ыңгайлуу жерге шоу / жашыруу өчүргүчүн кошуңуз.

"Тестирлөө, тестирлөө: 1-2-3 ..."

Ыкчам иштөө агымынын дагы бир аспектиси - бул сиздин максаттуу түзмөктөрүңүздү жана чечимдериңизди билип, андан кийин аларды сынап көрүү.

34. resizeMyBrowser

resizeMyBrowser, frontend иштеп чыгуучусу Чэнь Луо, сиздин браузериңиздин терезесинде бир нече алдын-ала орнотулган өлчөмдөргө жооп берип, иштелип чыккан баракчаларды текшерип же керектүү нерсеңизди таба албасаңыз, жаңы алдын-ала орнотуп аласыз.

35. responseivepx

Реми Шарп тарабынан курулган resizeMyBrowser, responseivepx сыяктуу, баракчаларыңызды терезеге жүктөйт, анда сиздин туураңызды жана бийиктигиңизди текшерип, сиздин медиа суроолоруңуздун канчалык деңгээлде атылып жаткандыгын жана дизайндагы чекиттер кайда экендигин аныктай аласыз.

36. Responsive Design Testing

Дизайнер жана иштеп чыгуучу Мэтт Керсинин укмуштуудай пайдалуу куралы: ар кандай браузердин көлөмүндө кандайча иштээрин көрүү үчүн, жооп берүүчү сайттын URL дарегин Responsive Design Testing сайтына киргизиңиз.

37. Респонсинатор

URL киргизиңиз жана Респонсор шайман роботтун эффективдүүлүгү менен кандайча жалпы шайман өлчөмүндө көрсөтүлөрүн көрсөтөт. Буга Тама Пугсли менен Энди Хови жооп беришет.

38. Responsive.is

Дагы бир беттеги эмулятор, Responsive.is, URL киргизип, андан кийин ар кандай алдын-ала орнотулган аранын ичинде анын көлөмүн тез өзгөртөт. Аны алдыдагы Typecast колдонмосунун артында турган команда жасады.

39. Screenqueri.es

Дагы бир браузердин өлчөмүн аныктоочу шайман, бирок Мандар Ширктен Screenqueri.es мобилдик жана планшеттик алдын ала орнотуулар топтому, ошондой эле тор жана ченегичтерди жакшы өлчөөнү жеңилдеткен өзгөчөлүктөрү бар.

40. Aptus

Сайттарды бир нече аныкталган өлчөмдөрдө тестирлөө үчүн дагы бир колдонмо, бирок Aptus - түпнуска Mac. Бул Mac App Store аркылуу жеткиликтүү жана жергиликтүү болуу жеңил скриншоттор жана оффлайн колдоо сыяктуу кошумча функцияларды алып келет.

41. Responsive Design Bookmarklet

Виктор Кулон абдан жөнөкөй, бирок эффективдүү буклеттер жасады; аны каалаган веб-баракчаңызда активдештиргенде, ал куралдар панелин кошуп, экрандын төрт жалпы өлчөмүн которуштурууга мүмкүнчүлүк берет, ошондо сиздин сайтыңыздын ар кандай өлчөмдө кандайча иштей тургандыгын көрө аласыз.

42. Responsive Design Test Bookmarklet

Бенджамин Киндин бул Bookmarklet түзмөгүңүздүн көлөмүн өзүңүз каалагандай жана анча-мынча белгилеп, көбүрөөк настройкага мүмкүнчүлүк берет. Иштетилгенде, ал сайты тандалган бардык өлчөмдөрдө, оңой салыштыруу үчүн жанаша көрсөтөт.

43. Screenfly

Screenfly, QuirkTools тарабынан, сайтты ар кандай чечилиштерде, жумушчу стол, планшет, мобилдик жана сыналгыда сынап көрүүгө мүмкүнчүлүк берет. Учурда жумушчу столду сыноо Safari менен гана чектелүүдө, ал эми планшетте жана мобилдик түзмөктөрдө жана браузерлерде көбүрөөк мүмкүнчүлүктөр бар. Телекөрсөтүү Опера менен гана чектелет.

44. Media Query Indicator

Йохан Брук браузерден медиа суроо башталганда, тестирлөөнүн таза CSS ыкмасын сунуштайт. Медиа Суроо Индикатору - сыноонун жана дизайнды бузуу чекиттери менен ойноонун дагы бир жакшы куралы.

45. Шим

Бостон Глобусту кайра иштеп чыгууда колдонулган шаймандардын бири, RWD кыймылынын плакатчысы Шим бул Node.js тиркемеси, ошол эле Wifi тармагындагы бир нече түзмөктөрдө веб-баракча иштетип, түзмөктөр аралык тестирлөөнү бир топ жеңилдетет. .

46. ​​Кирүү

Эгерде сизде Shim иштетүү үчүн Node.js сервер жок болсо, анда Скотт Джел Drive-In деп аталган жөнөкөй версиясын жасады, ал түп-тамырынан бери ушундай иштейт, бирок PHP, Apache жана .htaccess файлын колдонот.

47. Adobe Shadow

Adobe бул алыскы мүчүлүштүктөрдү оңдоо куралы менен веб-технологияларды өнүктүрүүнү улантууда. Shadow жана Chrome кеңейтүүсүн Mac же Windows, ошондой эле Shadow кардарын Android же iPhone орнотуп, веб-баракчаларды ар кандай түзмөктөр менен бөлүшсөңүз болот.

48. Opera Mobile Emulator + Remote Debug

Мобилдик баракчаларды мүчүлүштүктөрдү оңдоонун оңой жолу - Opera жана Opera Mobile Emulator орнотуп, экөөнү Алыстан Мүчүлүштүктөрдү Түзөтүү опциясы менен туташтыруу. Орнотуу жөнөкөй жана тез жана WebKitтен да көптү тестирлөөнүн кошумча артыкчылыгы бар.

Андан ары илхам

Башкалар өзүлөрүнүн дизайнын кандайча кабыл алып жаткандыгы жөнүндө түшүнүк алгыңыз келеби?

49. MediaQueri.es

Эгер сиз буга чейин көрө элек болсоңуз, Mediaqueri.es сайты жооп берүүчү тарапка өтүп кеткен сайттардын саны өсүп баратат.

50. @RWD

Этан Маркотт RWD дүйнөсүндөгү акыркы жаңылыктарды, шаймандарды жана витриналарды алып келген Twitter аккаунтун иштетет.

Денис Джейкобс спикер, автор, веб-дизайн боюнча машыктыруучу жана чыгармачыл евангелист болууну жакшы көрөт, ал эми Питер Гасстон CSS3 китебинин автору жана Broken Links блогун жазган ардагер веб-иштеп чыгуучу.

Бул жактыбы? Буларды оку!

  • Мобилдик веб-сайтты куруу боюнча кеңештер
  • CSS жана JavaScriptтин мыкты ыкмалары
  • Колдонмону кантип курса болот
  • Дизайнерлер үчүн мыкты акысыз веб шрифттер
  • Кеңейтилген Чындыктын кийинки кадамдары менен таанышыңыз
  • Акысыз текстураларды жүктөп алыңыз: жогорку разряддуу жана азыр колдонууга даяр
Мурунку Макала

Мыкты трейлерди кантип түзүү керек: 10 про кеңеш
Кийинки Макалада

Веб-дизайн жана иштеп чыгуунун жаңы куралдары: 2012-жылдын июль айы
Кызыктуу Басылмалар
Бул укмуштай кагаз искусствосу сизди кубандырат
Окуу

Бул укмуштай кагаз искусствосу сизди кубандырат

Май 2024
Кагаз искусствосуна келгенде, кичинекей нерселерден айырмачылыктар бар; татаал оймо-чиймелер, кичинекей, таланттуу кесимдер жана ар бир дюйм үчүн тандалган өзгөчө түстөр. Эстониялык дизайнер Эйко Ожал...
Интерактивдүү прототиптерди түзүү үчүн Framer X колдон
Окуу

Интерактивдүү прототиптерди түзүү үчүн Framer X колдон

Май 2024
Дизайнерлер катары ар дайым протеинге кандай прототиптөөчү куралдарды колдонуу керек деген суроо туулат. Вирфрэйминг (биздин эң мыкты симфрамма куралдарыбызды жана мыкты веб-сайт куруучуларды караңыз)...
3D басып чыгарууга мүмкүн болгон структураларды балдар деле жасай алышат
Окуу

3D басып чыгарууга мүмкүн болгон структураларды балдар деле жасай алышат

Май 2024
3D басып чыгаруу жана коддоо сыяктуу көндүмдөргө ээ болуу, айрыкча балдар арасында билим берүү тутуму бул көндүмдөрдү математика, илим жана тарых менен катар үйрөнүүнүн зарылчылыгына ээ болду.Класста ...