Адаптацияланган дизайн (жооптуу дизайн)

Adaptive design

Планшеттер жана уюлдук телефондор аркылуу Интернетке кирген колдонуучулар көбөйүүдө. Бул, буга чейин өзүңүз билгендей, биздин компьютерде жакшы көрүнгөн жакшы веб-баракчаны иштеп чыгуу жетишсиз болуп калат дегенди билдирет: аны ар бир мобилдик түзмөктөн көрүү керек. Маселе? Ар кандай экран өлчөмдөрү жана чечилиштери. Ошол себептен бардык медиага туура шайкеш келген дизайнды жасоо кыйынга турат (атактуу Responsive Дизайн, деп которулган ылайыкташтырылган дизайн).

Мына ушул мүнөздөмөлөргө ылайык дизайнды жасоодо бир нерсени эсиңизден чыгарбаңыз. Көңүл буруу!

Адаптациялык дизайн боюнча кеңештер

  1. Жөнөкөй шаблон жасаңызЖөнөкөй деп айтканда, мен жөнөкөй эмесмин. Мен жөнүндө айтып жатам түзүлүш Вебсайтыңыздын HTML: канчалык так болсо, ошончолук жакшы. Эсиңизде болсун, компьютердин экраны үч тик тилкени батыра алат; мобилдик экранда бирөөсүнө гана туура келет. Бул жөнүндө ойлонуп, элементтердин ордун кандайча жайгаштырасыз.
  2. Керексиз нерселердин бардыгын жок кылыңызБаракчаңыздын жүктөлүшүн жайлатуучу jQuery эффекттеринен, Flash анимацияларынан жана башка коддордон алыс болуңуз. Бул түрдөгү мазмун канчалык аз болсо, веб тезирээк жүктөлөт.
  3. Стилди аныктаңыз ар бир "өлчөм" үчүн cssАл карап турган түзмөктүн негизинде иштеген кичинекей.css, small.css жана big.css (мисалы) түзүңүз. Мисалы:

    @import url (tiny.css) (мин. туурасы: 300px);

    @import url (small.css) (мин. туурасы: 600px);

    @import url (big.css) (мин. туурасы: 900px);

  4. Эң көп колдонулган токтомдор320px / 480px / 720px / 768px / 900px / 1024px
  5. Өз шаблонуңузду ЭЛСЕЙК кылыңызКолдон келишинче, белгиленген суммалардын ордуна пайыздар менен иштеңиз. Бул жерде бир нече шилтеме барабар: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
  6. Типография Мурдагыга караганда көбүрөөк маанилүү Кээде сиздин түзмөгүңүздүн экраны ушунчалык кичинекей болушу мүмкүн, ошондо сиз текстти гана көрөсүз. Ошондуктан сайтыбыздагы мыкты шрифттерди тыкан тандап алышыбыз керек, алардын көлөмү кичирейгенде, алар түшүнүктү жоготпойт. Мындан тышкары, биз нейтралдуу шрифттерди башкалар менен айкалыштыра билишибиз керек, бул вебге керектүү мүнөз берет. Ошондуктан, биринчи кеңеш, сиз колдоно турган шрифттерди тандап алууга убакыт бөлүшүңүз керек.
  7. колдонуу жогорку сапаттагы сүрөттөрОрун кыскарган сайын сүрөттөр аны коштоп жүрөт. Төмөндөгөндө сапатын жоготпой, масштабы бирдей болгондорду тандаңыз. Төмөн сапаттуу сүрөт сиздин веб-сайтыңызды жаман көрсөтөт.
  8. Сиздин сүрөттөр ар дайым көрүнүп турат деп толукCSS файлыңызга img (туурасы: 100%;) кодун кошуп, сүрөттөрүңүздүн өчүп калуусунун алдын алыңыз. Ушундай жол менен, сиз түзмөккө сүрөттү бере турган бийиктикти кайра эсептеп, анын туурасы жүз пайызга көрүнүшү үчүн айтып жатасыз.
  9. Баары төмөн ошол эле URLWww.mysite.com/mobile сыяктуу субдомендерди унут, анткени тамыр папкасында ошол эле index.html файлы бардык түзмөктөрдө иштейт (эгер адаптивдүү дизайнды туура жасасаңыз). Артыкчылыгын мурунтан эле билесиз: субдомендер канчалык аз болсо, баракчага жүктөө ошончолук тез болот.
  10. Колдоолордун артыкчылыктарын пайдаланыңыз: Кыялкеч болуу Вебсайтты компьютерден, iPadдан же уюлдук телефондон караганда, бир эле нерсеге кирүү бирдей эмес. Биринчиси менен, сиз тынч жана жайбаракат багытта жүрөсүз. Акыркысы менен, бош убактарда жасап, зериккенден кийин терезени жаап саласыз. Ушул шарттардан пайдаланып, колдонуучунун көңүлүн ачып, аларды сизге арнаган бир нече мүнөттө көңүл ачыңыз. Балким, ал үйүнө келгенде, сизге жайбаракат келүүнү чечет.
  11. Рухтун жетеги менен алыңыз Санарип басылмаларда эмне үчүн мындай кеңеш бергенине таң каласың. Абдан оңой: санарип журналдар (жакшы) колдоонун артыкчылыгын кантип колдонууну билишет жана алардын дизайны өтө акылдуу. Алардан шыктанып, кетүү кыйын болгон веб-сайт жасаңыз.

Кошумча маалымат - Санарип журналдар

Булак - Splio, 960.gs, колумналдык


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

3 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Дидак Риос ал мындай деди:

    Мен көп деле макул болбогон нерселер бар.
    5-пунктта ... 200px = 15,38% жана андан кийинкилер ... бул шилтеме салыштыруу эч кандай ата-эненин өлчөөсүз жүргүзүлбөйт, пикселдин өлчөмү пайыздыкындай салыштырмалуу өлчөө эмес!

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

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

    Калгандары үчүн жакшы

    1.    Дидак Риос ал мындай деди:

      5-пунктта, алар сизди контекстке киргизип, 1300, 3 жана 200ден турган 300 тилке менен 1000px жалпы жайгашуусу жөнүндө айтып беришет.

      Эгерде сиз аны пайыздык көрсөткүчкө өткөрүп берсеңиз, анда алар сиз айткандай 15,38% ((200 * 100) / 1300) (төмөндө ондук, эл аралык тутум: P)

      Бирок биз 500px макети жөнүндө сөз кыла турган болсок, бизде 3 тилке бар, бири 200, экинчиси 200, экинчиси 100px, пайыздар бирдей болбой калды, бул учурда 200px = 40% ((200 * 100) / 500)

      Алар: 200px = 40% жана 100px = 10%

      Жүрүңүз, мен айткандай, алар сиз көрсөткөн шилтеме эмес, алар болгону 1300px макетиндеги маалымдама.

      Урматтоо менен

      1.    Lua louro ал мындай деди:

        Кандай гана ийгиликсиздик, сиз дүйнөдө таптакыр туура айтасыз! Дагы бир жолу рахмат ;)