Мазмұны
- Белгісізге арналған дизайн
- Дизайнға прагматикалық көзқарас
- Агностикалық орналасу
- Біртіндеп кодтау
- Белгілеуге батыру
Қазіргі кезде барлығы жауап беретін веб-дизайн туралы айтып отырған сияқты және бұл өте орынды; Интернетке қосылған құрылғылардың саны өсіп келе жатқанда - әрқайсысының мүмкіндіктері мен мүмкіндіктері әр түрлі - ені бекітілген веб-сайттарды құру ақылға сыймайды.
Шындық, ол ешқашан болған емес. Осы уақытқа дейін экранның ажыратымдылығы, өткізу қабілеттілігі немесе енгізу әдісі бойынша бірнеше болжамдар жасаған тәжірибелерді жобалау ең жақсы тәжірибе болып саналды. Егер сіз бұрын-соңды ені 960px болатын веб-сайтты құрған болсаңыз, оны тек досыңыздың кішкентай экрандағы нетбуктан көру үшін (иә, мен мұндағы ауыр оқиғалардан жазып отырмын), сіз неге бұл ерекше ақылды тәсіл емес екенін түсінесіз. Енді смартфондар мен планшеттер араласқан кезде, біздің дәстүрлі әдістер мақсатқа сай еместігі анық.
Бақытымызға орай, CSS медиа-сұрауларының пайда болуы және вебтің өздігінен ақпарат құралы екенін мойындау біз платформаның шынайы табиғатын қабылдай бастаймыз дегенді білдіреді, оның әмбебаптығы әлсіздік емес, күш деп білеміз.
Келесі бес күнде мен сізге осы фактіні танитын әдістемені басшылыққа аламын: жауап беретін веб-дизайн. Ethan Marcotte әзірлеген бұл сұйық макеттерді, икемді кескіндерді және медиа-сұрауларды біріктіріп, олар кез-келген ортаға бейімделетін сайттар құруға көмектеседі.
Мен сізге қарапайым медиа галереяны қалай құруға болатындығын көрсете отырып, осы тәсілді көрсетемін. Мен өзімнің мысалдарымда мен жақында Америка Құрама Штаттарына барған саяхат сапарымды құжаттау үшін шағын веб-сайт жасайтын боламын, бірақ өз қажеттіліктеріңізге сәйкес код пен дизайнды өзгерте аласыз.
Белгісізге арналған дизайн
Осы оқулықтың көп бөлігі сезімтал дизайнды дамыту аспектісіне айналады. Бірақ кез-келген кодты қарастырмас бұрын, шексіз орналасуы бар веб-сайтты қалай жобалауға болатынын ойлап көрейік.
Енді мен интерфейстерді жобалай алатыным үшін бақыттымын және оларды шындыққа айналдыратын алдыңғы кодты әзірлеу. Бұл, әрине, ерекше шеберлік емес - егер сіз өзіңіз үшін жұмыс жасасаңыз, онда сіз бірдей боласыз. Бірақ сұйықтықтың дизайнын жасау кезінде мазмұнның қалай бейімделіп, қайта ағып кететінін түсіну тиімді екені сөзсіз.
Мен сондай-ақ менің рөлім мамандандырылған үлкен команданың құрамында жұмыс істеймін. Мұндай ортада визуалды дизайнер тек сымсыз кадрларды тартымды, тартымды (қолтаңбаға қойылған, пиксельге сәйкес келмейтін) компаммаларға аударуға бағытталуы мүмкін. Әзірлеушілер үшін бұл орналасуларды арық және тиімді белгілеу мен CSS форматына ауыстырып, бөлек орналасуы ғажап емес.
Алайда, сызықтық және оқшауланған жұмыс ағындары дизайндардың әр түрлі ортаға қалай бейімделетінін бағалауды бастағаннан кейін тез бұзылады. Кез-келген жаңа құрал немесе технология сияқты, біз ынтымақтастықтың және ептіліктің жұмыс тәсілдерін қарастырған жөн. Жауапты веб-сайттарды жобалау кезінде кездесетін ең қиын проблемалардың көбін әңгіме, эксперимент және қайталау арқылы шешуге болады.
Дизайнға прагматикалық көзқарас
Дизайнерлер қандай да бір құрылғының шеңберінен тыс жұмыс істей алатындығы туралы ойлануға мүмкіндік жоқ деп айтуға болмайды.
Clearleft-те біз жұмыс үстелі тұрғысынан визуалды дизайнды бастаймыз. Біз негізгі дизайн мазмұны мен көрнекі эстетиканы анықтаудан бастаймыз, көбінесе бастапқы ізденістерді мазмұнның негізгі бөлігі негізінде жасаймыз. Мысалы, егер біз тамақ сайтының дизайнын жасайтын болсақ, біз рецепт парағынан бастаймыз; жаңалықтар сайты, оқиға беті үшін.
Бұл сайттағы маңызды бет ғана емес, сонымен қатар типографиялық палитра құруға жеткілікті құрылымдық мазмұнды қамтитын шығар. Сондай-ақ, біз осы сатыда ойдың ар жағында болса да, орналасудың қалай бейімделетіні туралы ойланамыз.
Дизайнды стресс-тестілеудің пайдалы тәсілдерінің бірі - осындай парақты алу және оны тар (~ 320px) экранға бейімдеу. Мүмкін, сіз осы енде жұмыс жасау үшін дизайнның кейбір аспектілерін қайта қарау керек болатынын білесіз. Міне бірнеше мысал:
- Типография: Үлкен тақырыптар кеңірек орналасуларда жақсы жұмыс істей алады, бірақ кішірек экрандарда олар тік кеңістікті алады, сондықтан қосымша айналдыруды қажет етеді. Сызықтардың ұзындығы өзгеретіндіктен, сызық биіктігін және басқа типографиялық емдеу әдістерін де ескерген жөн.
- Сілтемелер: Дизайн сенсорлы құрылғыларда қалай жұмыс істейді? Бізде бұларды анықтаудың оңай әдісі жоқ болса да (дизайнның барлық аспектілерін ескеру керек дегенді білдіреді), тар экранды жобалау сілтемелер мен басқа интерактивті элементтердің мақсатты аймақтары туралы ойлануға мүмкіндік береді. . IOS нұсқаулары бұлардың квадрат өлшемі кемінде 44 пиксель / нүкте болуын ұсынады, бұл мақсатты көрсеткіш болып табылады.
- Навигация: Бұл кез-келген жауап беретін дизайнның ең ыңғайсыз компоненті болуы мүмкін, әсіресе сіздің сайтыңызда көптеген бөлімдер және терең иерархия болса. Брэд Фрост қазіргі кезде қарастырылып жатқан навигацияға қатысты әртүрлі тәсілдердің қысқаша мазмұнын жазды.
- Артық мазмұн: Кейбір мазмұн қажет емес пе? Басқа мазмұн тек белгілі бір сценарийлерде көрсетілуі керек пе? Мен пайдаланушының қандай құрылғыны қолданатынына байланысты мазмұнды жасыруды ұсынбаймын, бірақ шартты жүктеу сияқты әдістер (біз осы аптаның соңында қарастырамыз) қажет болған жағдайда тек қосымша мазмұнды жүктейтін кішігірім беттерге қызмет ете алады.
Екі қарама-қарсы макеттерді жобалау дизайнның икемделетіндігі туралы идеяны күшейтеді, ал әлеуетті готчаларды ертерек үтіктейді. Бұл екі еселенген жұмыс сияқты көрінгенімен, біз әр парақты пиксельдік дәлдікпен жобаламаймыз. Керісінше, біз ауқымды дизайн тілін құруға назар аударамыз - оны кодта енгізуді бастаған кезде дамитын және жеке модульдер мен компоненттердің негізіндегі тіл.
Агностикалық орналасу
Тарихи түрде вебке баспа сияқты қарайтын сала үшін, ені бойынша бекітілген макеттер біз шығаратын көптеген нәтижелерге қол жеткізді. Біз бейімделетін ортаны жобалауды бастаған кезде, проблемаларды шешуге және идеяларды жеткізуге мүмкіндік беретін жаңа тәсілдер қарастырылуда, бұл ортаның сұйық табиғатын мойындайды. Менің таңдаулыларымның бірнешеуі:
- Бетті сипаттау сызбалары: Сымсыз кадрлар көбінесе орналасуды білдіре алады (және, осылайша, құрылғының белгілі бір түрін қабылдайды), беттің сипаттамасының диаграммалары бұл болжамды жояды және оның орнына құжатта басымдық тұрғысынан орналастырылған жеке компоненттерді сипаттайды.
- Стиль плиткалары: Дизайн идеяларын клиенттермен байланыстыру кезінде біз «веб-сайттардың суреттерін» ұсына аламыз. Егер біз мұқият болмасақ, клиенттер дизайнның басқа құрылғыларда қалай көрінетінін көрсететін тұжырымдамаларды көруді сұрайды. Бұл бізді бірнеше құрылғыларға арналған бірнеше беттерді шығарудың тұрақсыз жағдайына мәжбүр етуі мүмкін. Саманта Уоррен бұл мәселені ойластырып, стиль плиткаларын ойлап тапты. Олар көңіл-күй тақтасы (бірақ онша айқын емес) мен толық орындалған (бірақ дәлдігі аз) арасында орналасады және типографиямен, батырма стильдерімен және мастхедпен емдеу әдістерімен сөйлесуге көмектеседі. Олар сондай-ақ біздің клиенттермен пікірталастың анағұрлым жетілген деңгейіне ықпал етеді.
- Дизайн ойынының мобилизациясы: Бұл жаттығу бірлескен дизайнерлік семинарлар кезінде өте жақсы жұмыс істей алады. Бұл жаттығуда барлығы Post-it-ке белгілі бір бетте пайда болуы мүмкін элементтерді жазады. Одан кейін олар ұялы телефонға сызықтық көрінгендей болып, маңыздылығы бойынша қабырғаға жабысып қалады. Нәтижесінде талқылау таңқаларлық тұжырымдар тудыруы мүмкін. Мысалы, сіз навигация беттегі ең маңызды компонент емес екенін түсінуіңіз мүмкін. Бұл беттің жоғарғы жағында өткізіп жіберу сілтемесі төменгі колонтитулға сілтеме жасайтын дизайнға дейін жүруі мүмкін.
Әрине, біз қолданып жүрген құрал-саймандарға арналған орын әлі де бар, бірақ веб-сайтты кеңінен жобалаған кезде, оның орналасуы енді белгілі болмайтынын есте ұстауымыз керек.
Біртіндеп кодтау
Бақытымызға орай, біз жұмыс істеп жатқан мысалда көрнекі дизайн туралы алаңдамаймыз, өйткені бізге ауыр жұмыс жасалды! Керісінше, біз өз дизайнымызды толықтай жауап беретін веб-сайтқа кодтауға шоғырлана аламыз.
Біз бастамас бұрын тағы бір нәрсе. Біз жұмыс істейтін ортаның негізін қалаушы қағидатты ұмытпаған жөн: әмбебаптық. Бұл дегеніміз, қазіргі кездегі веб-құрылғылар үшін ғана емес, сонымен бірге кешегі және ертеңгі құрылғылармен үйлесімділікті қамтамасыз ету керек. Джон Аллсоп бұл принциптің не үшін маңызды екенін келесі 6 миллиардта жазған хабарламасында:
«Бұл келесі алты миллиард - Үндістандағы, Африкадағы, Қытайдағы электр қуаты мен желілерге қол жетімділігі үзілмелі балалар. Бұл Суматрадағы онжылдықтағы Wintel қорабындағы адам. Бұл жүздеген түрлі тілдерде сөйлейтін адамдар, ондаған түрлі жазу жүйелері.Олар өз отбасыларында бірінші болып оқи алатын және жаза алатын адамдар.Дүние жүзінде оқи алмайтын және жаза алмайтын адамдардың 20 пайызы.’
Біз веб туралы түсінігімізді өз кәсібімізге енген әр түрлі сәндерге қарап (жақсы сөзді қалау үшін) байқай аламыз: веб-стандарттар, қол жетімділік, қарапайым JavaScript ... барлығы бір тақырыптағы нұсқалар: прогрессивті жетілдіру. Жауапты веб-дизайнға да қатысты. Салу үшін шынымен жауап беретін веб-сайт - бұл тек кері үйлесімді ғана емес, сонымен қатар болашақта достасатын сайт құру.
Белгілеуге батыру
Жарайды, кіріспеге жеткілікті, мәтіндік редакторды ашатын кез келді.Біздің дизайнер бізге жұмыс үстеліне бағытталған дизайн ұсынды және оның тар көріністе де пайда болуы мүмкін екендігі туралы мысал келтіруге мейірімді болды.
Оларды бөлек кодтау азғыруы мүмкін, бірақ мен басқаша тәсіл ұсынамын. Дизайнды құрайтын бөлек компоненттерді - немесе өрнектерді бір параққа орналастыру арқылы біз өрнек портфолиосын жасай аламыз. Бұл бізге кез-келген беттің орналасу шеңберінен тыс компоненттерді дамытуға мүмкіндік береді және кез-келген регрессиялық тестілеу үшін кейінірек сілтеме жасауға мүмкіндік береді. Бастапқы түзетуді бірнеше түрлі құрылғыларда қарастырайық:
Біздің белгіленген үлгі портфолиосын қараңыз
Маған ұнайтын болады - бізде жауап беретін веб-сайт бар! Біздің мазмұн әр құрылғының шекарасына сәйкес келеді, мысалы, сәнді жаңа iPad немесе қолданыстан шығарылған телефон. Ол тіпті Lynx сияқты тек мәтінді шолғышта жұмыс істейді.
Әмбебаптықтың негізгі қағидаттарының арқасында веб үнсіздік бойынша жауап береді. Керемет, бірақ бұл бұдан былай біздің кодқа жасаған кез-келген әрекетіміз осы бейімделгіштікке нұқсан келтіруі мүмкін дегенді білдіреді.
Ертең: Біз мұқият басып, жауап берудің бірінші аспектісін қолдана бастаймыз: типография және сұйық торлар.
