Поглед у бољу типографију за модерне веб странице

Дигитални текст се може форматирати на толико различитих начина. Даљњим напредовањем веб фонтова и скрипти претраживача, видјели смо нови пројектни код за програмере који ће га користити. Веб дизајнери, такође, траже најбољу стратегију за кодирање својих веб страница и изградњу јединственог типографског стила између свих њихових страница.

Мноштво професионалних веб дизајнера написало је на тему укључујући ажуриране функције и услуге. Сваку веб страницу морате сматрати јединственим документом који прекида ваш дизајн корена. Под овим приказом лако је видјети како типографија може тећи од странице до странице и понудити јединствени излаз за креативност. Ово постаје посебно уочљива изградња јединствених класа за ваше параграфе и наслове.

Испод ћу погледати неке фантастичне идеје за амбициозне дизајнере типографије заинтересоване за изградњу веба. Блогови, друштвене мреже и предузећа увек желе да ажурирају свој тренутни веб сајт. ЦСС стилови за веб типографију пружају одличан извор за освежавање страница.

Разлике у данашњем интернету

Модерни веб је драматично напредовао од почетка 2000. године. Постоји много нових могућности за веб дизајнере да направе фантастичне радове графичког дизајна, логотипа, банера и практично било чега другог. Издавање ХТМЛ5 и ЦСС3 спецификација такође је узело свој данак на старом начину израде веб фонтова.

Сада је потпуно могуће укључити сопствене фонтове са ЦСС-ом @ фонт-фаце својство. Можете користити било који ТруеТипе(.ттф) или ОпенТипе(.отф) фајл и сачувајте копију локално на вашем серверу. Затим са неком ЦСС3 магијом укључите породицу било где на вашој веб страници!

Само под овом техником могуће је видети како је развијен наш модерни интернет.

А са повећањем популарности јКуери сваки дан, не чуди се да можемо направити невероватне ефекте анимације заједно са прилагођеним фонтовима. Као алтернатива методу изнад ТТФГен додатка за јКуери омогућава да укључите било који ТруеТипе фонт на своју веб страницу.

Овај метод је мало поузданији, јер вам не треба модеран претраживач који подржава ЦСС3 стандарде да би био успешан. Наравно, наслеђени претраживачи као што је Интернет Екплорер 6 ће се борити за исправно приказивање.

Али хвала богу, већина корисника је прешла на новији софтвер за прегледавање који подржава ове стандарде! А када се развијате за веб, треба да размислите о коме је ваше тржиште. Не можеш задовољити све време, али сигурно можеш покушати да се приближиш.

Сврха дигиталне типографије

Нека чудна идеја коју треба размотрити, али шта је права сврха дигиталног текста? Да пренесете информације, поделите изворе и понудите своје мишљење свету корисника Интернета. Текст је најједноставнији облик медија за размјену мисли и идеја. Али то је такође врло сложено и садржи главне детаље које фотографије / видео записи једноставно не могу користити.

Ваши посетиоци ће вероватно пронаћи ваш сајт на основу кључних речи у вашем тексту или наслову - само још један разлог да обратите пажњу на вашу копију на вебу. Једном када сте привукли неку пажњу на своју веб страницу, морате задржати њихову концентрацију. То је најлакше урадити подебљаним насловима и текстом странице са равномјерним размаком.

Ако пишете чланак или туториал, морате користити јасан језик. Његово подједнако важно како изгледа текст ваше странице и квалитет вашег садржаја. Што је ваш текст већи, то ћете лакше читати и тражити кључне ријечи. Будући да ће параграфи садржавати већину садржаја, требали бисте потрошити много времена на израду прототипова за исправно уклапање. Одломци се користе за преношење ваше поруке у делове величине битова рашчлањених у реченице. Разумите како пишете и планирате унапред да бисте добили одговарајући изглед странице.

Поред тога, са текстом странице долази и медиј и секундарни садржај. Ако параграфи садрже примарне информације, можда имате графиконе или слике да бисте зачинили страницу. Ови акценти су само прави додир који корисницима омогућава да се крећу кроз ваш сајт.

Видеозаписи и слике могу да разбију ваш садржај и да изгледају као да се читаоци брже крећу кроз ваш чланак. Али користите ове ставке штедљиво и не дозволите да вам ишта преплави основну поруку. Корисници (углавном) долазе на ваш сајт ради информација и не желе превише ометања.

Све остале опције форматирања се користе за спецификацију функционалности или сврхе. На пример, текст хипервезе је често другачији од осталих да би се истакао “цлицкабле”. Можете радити с подебљаним или курзивим ријечима додајући нагласак у ваше реченице. А употреба блоковских цитата или преформатираног текста може помоћи да се одреде основне изјаве или веб код.

Заглавља Веб страница

Једна од најважнијих ствари за вашу веб типографију су ознаке наслова. Ако нисте упознати са ХТМЛ насловима у распону од

до

са првим држањем најзначајније, а касније најмање. Ова ознака је корисна за разумевање јер Гоогле такође рангира ваш домен и веб странице на основу структуре садржаја. Тако ћете у коначници имати контролу над кључним ријечима које користите и које врсте наслова требате.

Иако стандардна ХТМЛ5 спецификација укључује до 6 различитих стилова наслова, препоручујем да користите између 3-4. Није потребно да их све укључите на своје странице. Такође је мало вероватно да ћете наћи употребу за 6 различитих наслова. Када први пут седнете да бисте изградили своје стилове, покушајте да направите неколико примера за наслове да бисте видели шта желите.

Пхотосхоп је одличан за овај сценарио. Такође можете покушати да кодирате различите наслове у ХТМЛ-у да бисте видели како изгледају у претраживачу. Оно што је важно је да радите са вашим протоком страница и насловима дизајна према њиховом рангу.

На пример, ваш

Ознаке би требале бити највише истакнуте међу свим насловима ваших страница.

и

су најпопуларније ознаке које Гоогле препоручује за индексирање садржаја странице. Користећи ефекте дизајна као што су подебљани фонт, подцртане цртице, испрекидане границе или различите боје помоћи ћете да ваши наслови скоче са странице.

Размак је такође важан када су у питању наслови или било који део вашег садржаја у том смислу. Побрините се да додате додатне маргине између ваших наслова и главне области садржаја. Ако сте направили довољно велики фонт, сваки наслов би требало да се истакне као његов основни блок. Овај изглед је идеалан ако желите да пажњу својих читалаца привучете јасном поруком.

Изградња јединствених хиперлинкова

Има доста тога да се каже на тему линкова страница. На овај или онај начин морат ћете користити хипервезе у свом коду. Они су изузетно важни као главни интерфејс за навигацију између различитих страница на вашем сајту. Можете се повезати и са другим блоговима или чак са архивираним постовима на блогу за касније.

Требало би да пажљиво одаберете текст за задржавање вашег линка. Ово је специфичан садржај који ће бити наглашен стилом везе. На пример, "кликни овде" је веома популаран и користи се за директно преузимање већине времена. Покушајте да избегнете овај систематски приступ и уместо тога будите мало креативни са текстом хипервезе. Вашим посетиоцима је много већа вероватноћа да кликну на линк ако могу да препознају контекст и можда схвате шта ће нова страница садржати.

Када креирате стил линкова, размислите о следећем - како ће промене изгледати у подешавању ваше странице, на којој боји позадине радите, и која је боја текст за контраст?

Везе би требало да се појављују блиставо са странице као ставке са могућношћу кликања - на крају крајева, то је њихова функција. Зато стара плава боја са ефектом подцртавања текста добро функционише. Али ако откријете да алтернативна боја ради боље, требали бисте је испробати. Не постоји јединствено решење за дизајн линкова. Само мало прегледајте веб и сигурно ћете саставити нешто изванредно.

Једна интересантна тачка је неколико могућности које треба да испробате избегавање. Ствари као што је промена породице фонта или величине фонта могу бити веома неугодне. Ово ће узроковати изобличење и померање текста, што може поставити курсор миша ван зоне везе. На сличан начин треба избегавати додавање додатних маргина / падова вашим линковима или ефектима лебдења. Они раде много боље када останете једноставни. Промена боје или додавање подцртавања има дуг пут у корисничком искуству.

Израда стилизованих листа

Шансе су добре јер ћете морати да радите са листама у неком тренутку. Укључене су и наручене и неуређене листе у ХТМЛ-у. Они су савршени за пружање мале колекције идеја, производа, људи или веза на мрежи у веома малом простору. Стајлинг није све што се разликује од параграфа или наслова.

Ваши посјетиоци би требали одмах схватити да гледају листу ставки. Држите сваку ставку листе одвојену и налази се на новој линији на својој страници. Додајте додатни простор између њих, ако је могуће. Ово ће дати мало простора за дисање и појавити се као лијеп расцјеп за текст чланка. Ако желите, можете чак и подебљати фонтове или листе увлачења да би се удаљили од стандардних маргина распореда.

Додавање додатних функција које ће вам помоћи да истакнете листу није захтеван. Али ако уживате у стилу блок-распореда, заиста се фокусира на ваше листе. Можете покушати да додате светлу позадину или иконе. Апарат за листу има одличан опис на кроничним листама за које мислим да укључује неке веома моћне делове знања. Али ако задржавате садржај странице линеарно и користите блокове листе само када је то потребно, не би требало да наиђете на било који застој дизајна.

Како се креирају цитати на страници

Изглед цитата и цитата ових дана је веома ограничен. У раној веб-у не бисте видели много ових елемената у употреби. Можда у уводницима, есејима или образовним документима. Али ХТМЛ5 је свакако мало ажурирао правила што чини цитирање блоковских цитата много лакшим.

Веб страница ХТМЛ5 Доктора садржи фасцинантан ресурс за дискусију о овој тачној теми. Они разматрају употребу садржаја унутар блоковских цитата који се појављују унутар структуре документа. Можете укључити и наслове, параграфе, па чак и листе и подножја. Главна употреба а