Мазмун
- Жооптуу сүрөттөр
- Performance
- Шарттуу жана жалкоо жүктөө
- Жооптуу типография
- JavaScript'теги медиа суроолор
- Прогрессивдүү өркүндөтүү
- Макет
- CSS торчосунун жайгашуусу
- Акыры
Жооптуу веб-дизайн укмуштай жөнөкөй угулат. Макет үчүн ийкемдүү торчолорду тандап, ийкемдүү медианы (сүрөттөр, видео, iframeлер) колдонуңуз жана ушул өлчөөлөрдү жаңыртуу үчүн медиа сурамдарын колдонуп, каалаган көрүү терезесиндеги контентти мыкты жайгаштырыңыз. Иш жүзүндө биз бул чындыгында оңой эмес экендигин билдик. Ар бир долбоордун жүрүшүндө пайда болгон майда-барат маселелер бизди башыбызды тырмап, кээде столубузга тырмак траншеяларын түшүрүп салат.
Responsive Design Weekly жаңылыктарын жетектеп баштагандан бери, мен веб жамааттын көптөгөн мүчөлөрү менен баарлашып, алардын тажрыйбаларын угуу бактысына ээ болдум. Коомчулук чындыгында эмнени билгиси келгенин так билгим келип, окурмандарга сурамжылоо тараттым. Бул жерде жогорку натыйжалар:
- Жооптуу сүрөттөр
- Өнүмдүүлүктү жакшыртуу
- Жооптуу типография
- JavaScript'теги медиа суроолор
- Прогрессивдүү өркүндөтүү
- Макет
Ошол темаларды эске алып, мен бир катар подкасттарды жүргүзүп, айрым тармактык лидерлерибиздин ой-пикирлерин сурадым. Алардын жоопторунда бир пункт бир добуштан кабыл алынган: кызыктуу жана алдыңкы ыкмалар жөнүндө ойлоно электе эле, негиздерин туура түшүнүүгө көңүл буруңуз. Негизги нерселерди кайра карап чыгуу менен, биз түзмөктүн же колдонуучунун контекстинин мүмкүнчүлүктөрүнө жараша мүмкүнчүлүктөрдү катмарлап, баарына күчтүү интерфейс түзө алабыз.
’Ошентип ... бул алдыңкы техникалар жөнүндө эмне айтууга болот?’ Сиздин сурооңузду уктум. Менин оюмча, Стивен Хей муну эң мыкты жыйынтыктады: “RWD техникасы эң алдыңкы RWD ыкмаларын колдонбостон баштоо керек. Структураланган мазмундан баштаңыз жана жол куруңуз. Дизайн бузулганда жана мазмунунун буйругу болгондо гана чекитти кошуңуз ... жана ушул болду. '
Бул макалада, мен негиздеринен баштайм жана кырдаал мүмкүндүк бергендей татаал катмарларды кошуп, ошол өркүндөтүлгөн ыкмаларды колдонууга болот. Баштайлы.
Жооптуу сүрөттөр
Суюктук каражаттары Этан Маркотта тарабынан биринчи аныкталганда RWDдин негизги бөлүгү болгон. туурасы: 100%; , макс-туурасы: 100%; бүгүнкү күнгө чейин иштейт, бирок жооптуу сүрөт пейзажы бир топ татаалдашты. Экран өлчөмдөрүнүн, пикселдин тыгыздыгынын жана түзмөктөрдүн саны көбөйгөн сайын, биз көзөмөлдөөнү көбүрөөк каалайбыз.
Үч негизги көйгөйдү Responsive Images Community Group (RICG) аныктады:
- Биз зымдын үстүнөн жиберип жаткан сүрөттүн килобайт көлөмү
- Сүрөттүн физикалык көлөмү жогорку DPI түзмөктөрүнө жөнөтүлүп жатат
- Көрүү терезесинин белгилүү бир өлчөмү үчүн көркөм багыттагы түрдөгү сүрөт кесилиши
Yoav Weiss, Indiegogo компаниясынын жардамы менен, Blink программасын ишке ашыруу боюнча иштин көпчүлүк бөлүгүн аткарды - Google'дун WebKit тармагы жана аны окуп жатканда Chrome жана Firefox'то жүктөлүп берилет. Safari 8 srcset жөнөтөт, бирок чоңдуктардын атрибуту түнкүсүн гана иштейт жана сүрөт> дагы эле ишке ашырыла элек.
Веб иштеп чыгуу процессибизге жаңы бир нерсе келгенден кийин, аны баштоо кыйынга турат. Келгиле, кадам сайын бир мисал аркылуу.
img! - Сүрөттү колдобогон бардык браузерлердин арткы сүрөтүн жарыялаңыз -> src = "horse-350.webp"! - Сүрөттүн бардык өлчөмдөрүн srcset форматында жарыялаңыз. Ар бир сүрөттүн туурасы жөнүндө браузерге маалымдоо үчүн w дескрипторун колдонуп, сүрөттүн туурасын киргизиңиз .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Өлчөмдөр биздин сайттын макети жөнүндө браузерге маалымдайт. Бул жерде 64 см жана андан чоңураак көрүнөө терезелер үчүн, 70% көрүү аянтын ээлей турган сүрөттү колдонуңуз -> size = "(min-width: 64em) 70vw,! - Эгерде viewport андай болбосо чоң болсо, анда 37,5 нем жана андан чоңураак көрүү терезесинин 95% ээлеген сүрөттү колдонуңуз -> (min-width: 37.5em) 95vw,! - жана viewport андан кичине болсо, анда колдонуңуз 100% көрүү аянтын ээлеген сүрөт -> 100vw "! - ар дайым alt текстке ээ .--> alt =" Ат "/>
Өндүрүмдүүлүк көз карашынан алганда, мини-туурасы же макс-туурасы өлчөмдөр атрибутунда колдонулганыңыз маанилүү эмес, бирок булактын тартиби маанилүү. Браузер биринчи дал келген өлчөмдү колдонот.
Ошондой эле, биздин дизайнга түздөн-түз аныкталуучу чоңдуктардын атрибутун катуу коддоону унутпаңыз. Бул маселелер алдыга жылышы мүмкүн. Мисалы, эгер сиз сайтыңызды кайрадан иштеп чыксаңыз, анда img> же picture> стардын бардыгын карап чыгып, өлчөмдөрүн кайрадан аныктап алышыңыз керек болот. Эгер сиз CMS колдонуп жатсаңыз, анда аны куруу процессинин бир бөлүгү катары жеңүүгө болот.
WordPress буга чейин жардам бере турган плагин бар. Бул WP стандарттык сүрөт түрлөрү боюнча srcsetти аныктайт жана көлөмүн борбордук жерде жарыялоого мүмкүндүк берет. Баракча маалыматтар базасынан түзүлгөндө, ал img> боюнча бардык эскертүүлөрдү алмаштырат жана аларды сүрөт белгиси менен алмаштырат.
Негизги
- Чын эле сүрөт киргизиш керекпи же жокпу, ойлонуп көрүңүз. Сүрөттүн негизги мазмуну барбы, же декоративдүүбү? Бир аз сүрөт тезирээк жүктөө убактысын билдирет
- Сүрөттөрдү оптималдаштыруу үчүн ImageOptim программасын кошуңуз
- Сервериңиздеги же .htaccess файлындагы сүрөттөрүңүздүн жарактуулук мөөнөтү аяктаганда, орнотуңуз ("Performance" бөлүмүндөгү маалыматты караңыз)
- PictureFill сүрөттөрдү полифилля менен камсыз кылат
Өркүндөтүлгөн
- JQuery’дин Lazy Load плагинин колдонуп, жалкоо сүрөттөрүңүздү жүктөңүз
- Өзгөчөлүктү аныктоо үчүн HTMLImageElement.Sizes жана HTMLPictureElement колдонуңуз.
- Github'тан табылган өнүккөн PictureFill WP плагини сиз колдонуучунун сүрөт туураларын жана өлчөмдөрүн аныктоого мүмкүндүк берет
Performance
Биздин баракчаларда эң ылдамыраак иштөө үчүн, серверден келген биринчи жооптун ичинде биздин баракчабыздын жогорку бөлүгүн көрсөтүү үчүн талап кылынган бардык HTML жана CSS керек. Бул сыйкырдуу сан 14kb жана биринчи жолу баруу убактысынын (RTT) ичиндеги тыгынын терезесинин чоңдугуна негизделген.
Патрик Хаманн, Guardian компаниясынын техникалык лидери жана анын командасы фронт менен backend ыкмаларын аралаштырып, 1000 миль тоскоолдукту бузууга жетишти. Guardian ыкмасы талап кылынган мазмунду камсыз кылуу болуп саналат - макала - колдонуучуга мүмкүн болушунча тезирээк жана 14kb сыйкырдуу санынын ичинде жеткирилет.
Келгиле, жараянын карап көрөлү:
- Колдонуучу жаңылык окуясына шилтеме берген Google баскычын чыкылдатат
- Макала үчүн бир жолу бөгөттөө өтүнүчү маалыматтар базасына жөнөтүлөт. Буга байланыштуу окуялар же комментарийлер суралбайт
- Critical CSS камтылган HTML жүктөлгөн
- башында>
- "Горчицаны кесүү" процесси жүргүзүлүп, колдонуучунун шайман өзгөчөлүктөрүнө негизделген шарттуу элементтер жүктөлөт
- Макаланын өзүнө байланышкан же аны колдогон ар кандай мазмун (ага байланыштуу макаланын сүрөттөрү, макаланын комментарийлери жана башкалар) өз ордуларына жүктөлөт
Ушул сыяктуу критикалык көрсөтүү жолун оптималдаштыруу, баштын узундугу 222 сапты түзөт. Бирок, колдонуучу көрө алган критикалык мазмуну, жүктөлгөндө дагы 14кб баштапкы жүктөмдүн чегинде болот. Бул 1000ms тоскоолдукту бузууга жардам берген ушул процесс.
Шарттуу жана жалкоо жүктөө
Шарттуу жүктөө колдонуучунун түзмөк өзгөчөлүгүнө жараша тажрыйбасын жакшыртат. Modernizr сыяктуу шаймандар ушул функцияларды текшерип көрүүгө мүмкүнчүлүк берет, бирок браузер колдойт деп айтканы менен, бул ар дайым толук колдоону билдирбейт.
Бир ыкма - колдонуучу ошол мүмкүнчүлүктү колдонууну каалаганга чейин бир нерсени жүктөөнү токтотуу. Бул шарттуу деп эсептелет. Колдонуучу сөлөкөттөрдү сүзүп кеткенге же тийгенге чейин социалдык сүрөтчөлөргө жүктөөнү токтотуп койсоңуз болот, же колдонуучу атайын карта тиркемесине шилтемени жактыра турган чакан көрүү жайларына iframe Google Map жүктөлбөсөңүз болот. Дагы бир ыкма - "Горчицаны кесүү" - бул тууралуу кененирээк маалымат алуу үчүн жогорудагы кутучаны караңыз.
Жалкоо жүктөө деп ар дайым баракчага жүктөй турган нерсеңизди - макаланын бир бөлүгү болгон сүрөттөрдү, комментарийлерди же ага байланыштуу башка макалаларды айтыңыз, бирок колдонуучу контентти керектей башташы үчүн, ал жерде болбошу керек.
Негизги
- Файлдар үчүн gzipping иштетип, бардык статикалык мазмун үчүн мөөнөтү аяктоочу баштарды орнотуңуз (netm.ag/expire-260)
- Lazy Load jQuery плагинин колдонуңуз. Бул көрүнүш терезесине жакындаганда же белгилүү бир убакыттан кийин сүрөттөрдү жүктөйт
Advanced
- Ыкчам орнотуу же CloudFlare. Мазмунду жеткирүү тармактары (CDN) статикалык мазмунуңузду колдонуучуларга өз серверине караганда тезирээк жеткирип, кээ бир акысыз катмарларга ээ
- Параллель http сурамдары сыяктуу http2 мүмкүнчүлүктөрүн пайдалануу үчүн, http2 иштетилген браузерлер үчүн SPDY иштетүү
- Social Count социалдык белгилериңизди шарттуу жүктөөгө мүмкүндүк берет
- Static Maps API колдонуп, сүрөттөр үчүн Интерактивдүү Google карталарын өчүрүп салсаңыз болот. Брэд Фростун netm.ag/static-260 дарегине көз чаптырыңыз
- Ajax Include Pattern мазмундун үзүндүлөрүн дайындардан мурун, дайындар кийин же дайындарды алмаштыруу атрибутунан жүктөйт
Жооптуу типография
Типография - бул мазмунуңузду оңой сиңирүү. Жооптуу типография муну ар кандай шаймандарда жана көрүү жайларында окууну камсыз кылуу үчүн кеңейтет. Джордан Мур бул түрү ал баш тартууга даяр эмес экенин мойнуна алат. Керек болсо бир-эки сүрөт түшүрүңүз, бирок мыкты түрү бар экендигин текшериңиз.
Стивен Хэй HTML шрифтин өлчөмүн 100 пайызга коюуну сунуш кылат (окуу: жөн гана ошол бойдон калтырыңыз), анткени ар бир браузер же шайман өндүрүүчү белгилүү бир чечим же шайман үчүн жетиштүү деңгээлде окула турган дефолт кылат. Көпчүлүк рабочий браузерлер үчүн бул 16px.
Башка жагынан алганда, Мур айрым мазмун элементтери үчүн минималдуу арип өлчөмүн белгилөө үчүн REM бирдигин жана HTML арип өлчөмүн колдонот. Мисалы, макаланын сызыгы ар дайым 14px болушун кааласаңыз, анда HTML элементиндеги шрифттин көлөмүн негизги кылып орнотуңуз .byline {font-size: 1rem;}. Корпустун масштабын ченегенде: ариптин өлчөмү: көрүү терезесине ылайыкташтыруу үчүн .by-line стилине таасирин тийгизбейсиз.
Окуу сызыгынын узундугу да маанилүү - 45тен 65ке чейинки белгилерди камтыйт. Мазмунуңузду текшерүү үчүн колдоно турган кыстарма бар. Эгер сиз дизайныңыз менен бир нече тилди колдоп жатсаңыз, анда саптын узундугу дагы өзгөрүшү мүмкүн. Мур ал жактагы көйгөйлөрдү жаап-жашыруу үчүн: lang (de) макаласын {max-width: 30em} колдонууну сунуштайт.
Вертикалдык ритмди сактоо үчүн, чекиттин астын мазмунунун блокторуна, ul>, ol>, blockquote>, table>, blockquote> ж.б. белгилеңиз, алардын бийиктиги менен бирдей. Эгер ритм сүрөттөрдү киргизүү менен үзгүлтүккө учураса, анда аны Baseline.js же BaselineAlign.js кошуу менен оңдой аласыз.
Негизги
- Сиздин шрифтиңизди 100 пайыз тулкуңузга негиздеңиз
- Салыштырмалуу бирдиктерде иштөө
- Дизайныңызда вертикалдык ритмди сактап калуу үчүн, чек араңызды бийиктиктин сызыгына коюңуз
Өркүндөтүлгөн
- Enhance.js же артка жүктөлгөн шрифт менен арип жүктөөнү жакшыртыңыз
- Семантикалык аталыштар үчүн Sass @includes колдонуңуз.
- Көбүнчө h5 стилин h2 белгилөөсүн талап кылган каптал тилкесинин виджетинде колдонушубуз керек. Өлчөмдү көзөмөлдөө жана төмөнкү код менен семантикалык бойдон калуу үчүн Bearded’s Typographic Mixins колдонуңуз:
.sidebar h2 {@include heading-5}
JavaScript'теги медиа суроолор
Медиа сурамдар аркылуу ар кандай көрүү жайларынын макетин башкара алгандан бери, биз аны JavaScriptти иштетүү үчүн байлап коюунун жолун издеп жатабыз. JavaScriptти айрым көрүү кеңдигинде, бийиктикте жана багытта өрттөөнүн бир нече жолдору бар, ал эми кээ бир акылдуу адамдар Enquire.js жана Simple State Manager сыяктуу колдонууга жеңил болгон жергиликтүү JS плагиндерин жазышкан. Муну matchMedia аркылуу өзүңүз деле куруп алсаңыз болот. Бирок, сизде CSS жана JavaScript'тердеги медиа суроолоруңуздун көчүрмөсүн кайталоо керек болгон маселе бар.
Аарон Густафсондун тыкан ыкмасы бар, бул сиздин CSS жана JSдеги медиа суроолоруңузду башкарып, дал келбеши керектигин билдирет. Идея алгач Джереми Киттен чыккан жана бул мисалда Густафсон аны толугу менен ишке ашырган.
GetActiveMQ (netm.ag/media-260) колдонуп, корпустун аягына div # getActiveMQ-watchcher сайып, аны жашырыңыз. Андан кийин CSS ичинде # getActiveMQ-watcher {font-family: break-0;} биринчи медиа суроого, font-family: break-1; экинчисине, шрифт-үй-бүлө: break-2; үчүнчүсүнө жана башкалар.
Скриптте көрүү терезесинин көлөмү өзгөргөндүгүн текшерүү үчүн watchResize () (netm.ag/resize-260) колдонулат, андан кийин активдүү арип үй-бүлөсү кайра окулат. Эми муну JS өркүндөтүүлөрүн кошуу үчүн колдонсоңуз болот: dl> га кошумча интерфейс кошуу, көрүү терезеси уруксат бергенде, lightbox кыймыл-аракетин өзгөртүү же маалымат таблицасынын жайгашуусун жаңыртуу. GetActiveMQ Codepenди netm.ag/active-260 дарегинен караңыз.
Негизги
- Ар кандай көрүү жайлары үчүн JavaScript жөнүндө унутуңуз. Мазмунду жана веб-сайттын функцияларын колдонуучуларга бардык көрүү жайларында кире алгандай кылып камсыз кылыңыз. Бизге эч качан JavaScript керек эмес
Advanced
- Breakupды медиа сурамдарынын алдын-ала аныкталган тизмеси катары колдонуу жана getActiveMQ-watcher үчүн ариптердин үй-бүлөлөрүнүн тизмесин түзүүнү автоматташтыруу менен Густафсон ыкмасын кеңейтүү.
Прогрессивдүү өркүндөтүү
Прогрессивдүү өркүндөтүү жөнүндө кеңири тараган түшүнүк адамдар: "Ооба, мен бул жаңы мүмкүнчүлүктү колдоно албайм" деп ойлошот, бирок чындыгында, тескерисинче. Прогрессивдүү өркүндөтүү бул функцияны бир гана браузерде колдоого алынса, же аны колдоно албасаңыз, анда убакыттын өтүшү менен адамдар жаңы версиялар пайда болгондо жакшыраак тажрыйба алышат дегенди билдирет.
Эгерде сиз каалаган веб-сайттын негизги функциясын карасаңыз, анда аны HTML форматында жеткирип, бардык иштетүүнү сервер тарабына тапшырсаңыз болот. Төлөмдөр, формалар, Жактыруулар, бөлүшүү, электрондук почталар, панелдер - мунун бардыгы жасалышы мүмкүн. Негизги тапшырма курулуп бүткөндөн кийин, анын үстүнө биз укмуштуудай технологияларды катмарлай алабыз, анткени бизде кулап түшкөндөрдү кармоо үчүн коопсуздук торубуз бар. Бул жерде сөз кылган өнүккөн ыкмалардын көпчүлүгү прогрессивдүү өркүндөтүүгө негизделген.
Макет
Ийкемдүү макет жөнөкөй, бирок анын ар кандай ыкмалары бар. Nth-child () селекторун колдонуу менен азыраак белгилөө менен жөнөкөй тор макеттерин түзүңүз.
/ * тор үчүн мобилдик биринчи туурасын жарыялайт * / .grid-1-4 {float: left; туурасы: 100%; } / * Көрүү порту жок дегенде 37.5em болгондо, ар бир элемент үчүн сетканы 50% кылып коюңуз * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Биринчисинен КИЙИН ар бир экинчи элементти тазалап туруңуз. Бул тордогу 3, 5, 7, 9 ... максат кылат. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Мурунку тазалоону алып салыңыз * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Биринчисинен КИЙИН ар бир 4-элементти тазалап туруңуз. Бул сеткадагы 5, 9 ... максат кылат. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Позицияны колдонуу менен коштошуп, макеттериңизге калкып чыгыңыз. Алар бүгүнкү күнгө чейин бизге жакшы кызмат кылып келишсе дагы, макет үчүн колдонулушу зарыл хак болуп калды. Эми бизде эки жаңы бала бар, алар биздин бардык кыйынчылыктарыбызды жоюуга жардам берет - Flexbox жана Grids.
Flexbox ар бир модулдун ичиндеги мазмунунун жайгашуусун көзөмөлдөөчү, айрым модулдар үчүн мыкты. Flexbox аркылуу оңойураак жетишүүгө мүмкүн болгон макеттер бар жана бул жооптуу сайттарда дагы чын. Бул жөнүндө көбүрөөк маалымат алуу үчүн CSS Tricks’тин Flexbox же Flexbox Polyfill колдонмосун карап чыгыңыз.
CSS торчосунун жайгашуусу
Торчо макро деңгээлдин макети үчүн көбүрөөк. Grid layout модулу CSS ичиндеги макетиңизди сүрөттөөнүн мыкты жолун берет. Учурда ал долбоордун этабында болсо дагы, мен бул макаланы Рейчел Эндрюдун CSS Grid макети боюнча сунуштайм.
Акыры
Бул сиздин ыкчам тажрыйбаңызды кеңейтүү үчүн бир нече кеңеш. Кандайдыр бир жаңы жооптуу жумушка барганда, артка кадам таштап, негиздерди туура кабыл алганыңызга ынаныңыз. Мазмунуңуздан, HTML жана катмардын жакшыртылган тажрыйбаларынан баштаңыз, ошондо сиз дизайндарды алып барууга чек коюуга болбойт.
Бул макала алгач 260-санында чыккан net journal.
