რესპონსიული ვებ დიზაინი

რესპონსიული ვებ დიზაინი (Responsive Web Design) ეს არის ვებ დიზაინის მიდგომა, რომლის მიზანია ვებგვერდების ისე აგება, რომ ისინი სწორად და კარგად გამოჩდნენ ყველა ზომისა და გარჩევადობის ეკრანზე, რაც უზრუნველყოფს კარგ გამოყენებადობას. ამ სტატიაში განვიხილავთ ტექნიკებს, რომლებიც დაგეხმარებათ რესპონსიული დიზაინის აგებაში.

რესპონსიული დიზაინის წინამორბედი: მობილური ვებ დიზაინი

იქამდე, სანამ რესპონსიული ვებ დიზაინი სტანდარტულ მიდგომად იქცეოდა, სხვადასხვა მოწყობილობაზე ვებსაიტების სწორად მუშაობისთვის, ვებ დეველოპერები საუბრობდნენ მობილურ ვებ დიზაინზე ან ზოგჯერ მობილურისთვის მოსახერხებელ დიზაინზე (mobile friendly). ეს ტერმინები ძირითადად იგივე მიზანს ემსახურებოდა, რასაც რესპონსიული ვებ დიზაინი (RWD), რომელიც უზრუნველყფობს ვებსაიტების სწორად მუშაობას სხვადასხვა მოწყობილობებზე. ისინი განსხვავდებიან ფიზიკური მახასიათებლებით (ეკრანის ზომა, გარჩევადობა) განლაგების, კონტენტის (ტექსტისა და მედიის) და წარმადობის თვალსაზრისით.

სხვაობა ძირითადად გამოყენებულ მოწყობილობებსა და იმ ტექნოლოგიებს ეხება, რომლებიც ამ პრობლემის გადასაჭრელად ხელმისაწვდომი იყო:

• ადრე ვსაუბრობდით მხოლოდ დესკტოპსა და მობილურზე, მაგრამ დღესდღეობით არსებობს მოწყობილობების მრავალი ტიპი, როგორიცაა დესკტოპი, ლეპტოპი, მობილური, ტაბლეტი, სმარტსაათი და სხვა. თუ ადრე ვცდილობდით რამდენიმე განსხვავებული ეკრანის ზომისთვის დიზაინის მორგებას, დღეს საჭიროა ისეთი სტანდარტებით ხელმძღვანელობა, რომელიც მოერგება ნებისმიერი ზომისა და ფორმის მოწყობილობას.
• მობილური მოწყობილობებს ადრე გააჩნდათ შედარებით სუსტი (CPU/GPU) და ნელი ინტერნეტი. ზოგიერთ მოწყობილობას არ ჰქონდა მხარდაჭერა არც CSS-ისთვის და ზოგჯერ არც HTML-ისთვისაც კი. ამის გამო, ხშირად გამოიყენებოდა სერვერის მხარეს ბრაუზერის ამოცნობა (Browser sniffing), რათა სერვერს განესაზღვრა მოწყობილობის ან ბრაუზერის ტიპი და შემდეგ მიეწოდებინა შესაბამისი ვებსაიტის ვერსია, რომელსაც კლიენტი წარმატებით ჩართავდა. ასეთ შემთხვევაში, მობილურ მოწყობილობებზე ხშირად მხოლოდ ძალიან მარტივი და შეზღუდული საიტის ვერსია იტვირთებოდა, რადგან მეტი შესაძლებლობა მათ არ ჰქონდათ. დღეს მობილური მოწყობილობები იმდენად მძლავრია, რომ შეუძლიათ იმავე ტექნოლოგიების გამოყენება, რაც კომპიუტერებს, ამიტომ მსგავსი მიდგომები უკვე ნაკლებად გამოიყენება.
  • მიუხედავად იმისა, რომ თანამედროვე მობილური მოწყობილობები ტექნიკურად საკმაოდ ძლიერია, საჭიროა მაინც საჭიროა მათი თავისებურებების გათვალისწინება.
  • UX (User experience) კვლავ მნიშვნოლოვანი საკითხია. მაგალითად, მომხარებელი მობილური მოწყობილობით ავიახაზების ვებსაიტზე შედის, სადაც უბრალოდ ფრენის დროისა და დაგვიანების შესახებ ინფორმაციის შემოწმება სურს და არა 3D ანიმირებული გლობუსის ნახვა, სადაც ფრენის მარშრუტები და კომპანიის ისტორიაა.
• თანამედროვე ტექნოლოგიები გაცილებით უკეთეს შესაძლებლობას იძლევა რესპონსიული ვებგვერდების შესაქმნელად. მაგალითად, რესპონსიული სურათებისა და მედიის ტექნოლოგიები დღეს უკვე საშუალებას იძლევა, სხვადასხვა მოწყობილობას მიეწოდოს შესაბამისი მედია, ყოველგვარი სერვერზე შემოწმების (sniffing) ტექნიკის გამოყენების გარეშე.

Media Queries

Media query (მედიის წაკითხვა) საშუალებას გვაძლევს, შევამოწმოთ მოწყობილობის გარკვეული მდგომარეობა (მაგალითად, არის თუ არა მომხმარებლის ეკრანი გარკვეულ სიგანეს ან გარჩევადობას ზემოთ, არის თუ არა მოწყობილობა ვერტიკალური ან ჰორიზონტალური ორიენტაციის და ა.შ), რომელზე დაყრდნობითაც შემდეგ აპლიკაციას გავსტილავთ.

მაგალითად, დავსტილოთ ვებგვერდის ფონი შავად, თუ მისი ეკრანის სიგანე (width) ნაკლებია 900px-ზე.

@media screen and (max-width: 900px) {
  body {
    background-color: black;
  }
}

ამ შემთხვევაში დაისტილება მომხარებლის ეკრანზე გამოსახული დიზაინი, ასევე შეგვიძლია მის ნაცვლად გამოვიყენოთ print, რომელიც მხოლოდ ამობეჭვდის დროს გამოისახება.

@media თვისების გამოყენება ფორმულა:

@media media_type and (media_feature) {
  /* სტილები */
}

• media_type შეიძლება იყოს: all, print ან screen.
• and გამოიყენება ერთი ან რამდენიმე თვისების გასაერთიანებლად.
• media_feature შეიძლება იყოს: any-hover, any-pointer, aspect-ratio, color, color-gamut, color-index, device-posture, display-mode, dynamic-range, forced-colors, grid, height, hover, inverted-colors, monochrome, orientation, overflow-block, overflow-inline, pointer, prefers-color-scheme, prefers-contrast, prefers-reduced-motion, prefers-reduced-transparency, resolution, scripting, update, video-dynamic-range, width.

მაგალითები:

@media print {
  /* ამობეჭვდისთვის განკუთვნილი სტილები */
}

@media screen, print {
  /* ეკრანზე და ამობეჭვდისთვის განკუთვნილი სტილები */
}

თუმცა მათი გაერთიანების ჩაწერა უფრო მარტივად შეიძლება all-ის გამოყენებით:

@media all {
  /* ორივე მედიის ტიპის გაერთიანება */
}

ეკრანის ზომიდან გამომდინარე სტილები

ხშირ შემთხვევაში, როცა რესპონსიული ვებ დიზაინის შექმნაზე მუშაობთ, დაგჭირდებათ ეკრანის ზომიდან გამომდინარე სტილების ცვლილებები. მაგალითად, გვსურს შევცვალოთ თანმიმდევრობა ელემენტების ზომიდან გამომდინარე.

@media screen and (max-width: 1024px) {
  .some_container .child {
    order: 1;
  }
}

ადრე სავალდებულო იყო max-width-ისა და min-width-ის გაწერა. ახლა უფრო მარტივად შეგვიძლია იგივე სტილების ჩაწერა:

@media screen and (width <= 1024px) {
  .some_container .child {
    order: 1;
  }
}

ხოლო min-width-ის შემთხვევაში:

@media (min-width: 1024px) {
  /* სტილები, როცა ეკრანის ზომა 1024px-ზე მეტია */
}

@media (min-width >= 1024px) {
  /* სტილები, როცა ეკრანის ზომა 1024px-ზე მეტია */
}

ასევე შეგვიძლია სპეციფიკურად დავსტილოთ დოკუმენტი, როცა ერკანის ზომა მოქცეულია გარკვეული ზომის ფარგლებში:

@media (min-width: 500px) and (max-width: 800px) {
  /* … */
}

@media (500px <= width <= 800px) {
  /* … */
}

@media (800px >= width >= 500px) {
  /* … */
}

ახალი სინტაქსით შეგვიძლია, როგორც <=-ისა და >=-ის, ასევე <-ისა და >-ის გამოყენება.

რესპონსიული განლაგების ტექნოლოგიები

რესპონსიული განლაგებისთვის შეგიძლიათ გამოიყენოთ ფლექსბოქსები და გრიდები.

ნაგულისხმევად ორივე ტექნოლოგიას გააჩნია რამდენიმე თვისება, რომელიც განსაზღვრავს რესპონსიულობას. თუმცა ხშირად მაინც საჭიროა კონკრეტულ ეკრანის ზომაზე სტილიზაციის მორგება.

Flexbox

Flexbox-ში ელემენტები (flex items) ავტომატურად იზრდებიან ან იკუმშებიან, იმის მიხედვით, რამდენი სივრცეა ხელმისაწვდომი მათ მშობელ კონტეინერში. flex-grow და flex-shrink პარამეტრების შეცვლით შეგიძლიათ განსაზღვროთ, როგორ უნდა მოიქცნენ ეს ელემენტები მაშინ, როცა მეტი ან ნაკლები ადგილი აქვთ ირგვლივ.

ქვემოთ მოცემულ მაგალითში, თითოეული ელემენტი კონტეინერში თანაბარ სივრცეს დაიკავებს. ამისათვის გამოყენებულია შემოკლებული ჩანაწერი flex: 1, რომელიც დეტალურად უკვე განხილულია ფლექსბოქსის სტატიაში.

<div class="wrapper">
  <div class="col1">
    <p>ეს განლაგება რესპონსიულია. სცადეთ დააპატარავოთ ან გაადიდოთ ბრაუზერის ფანჯარა და ნახეთ, რა მოხდება.</p>
  </div>
  <div class="col2">
    <p>HTML (HyperText Markup Language - ჰიპერტექსტური მარკაპის ენა) არის მარკაპის ენა, რომელიც მუითებებს ბრაუზერს, თუ როგორი სტრუქტურა მისცეს ვებგვერდს. HTML-ში გამოიყენება ელემენტები, რომ ტექსტური კონტენტი შევკრათ ან მოვნიშნოთ (mark up), რათა ამ კონტენტს გარკვეული გარეგნობა, ქცევა ან დანიშნულება შეეძინოს.</p>
    <p>HTML შედგება ელემენტებისგან, რომლებიც გამოიყენება კონტენტის სხვადასხვა ნაწილის შესაფუთად, რათა მას მიენიჭოს განსხვავებული გარეგნობა ან დანიშნულება. ნიმუშად ავიღოთ მარტივი ტექსტი, რომელსაც მარკაპს გავუკეთებთ: მე მინდა ვისწავლო მეტი!</p>
  </div>
</div>

.container {
  display: flex;
}

.item {
  flex: 1;
}

@media (width >= 600px) {
  .wrapper {
    display: flex;
  }

  .col1 {
    flex: 1;
    margin-right: 5%;
  }

  .col2 {
    flex: 2;
  }
}

დააპატარავეთ ან გაადიდეთ ბრაუზერის ფანჯარა. როცა ზემოთ მოცემული მაგალითის სიგანე გადაცდება 600 პიქსელის ზღვარს, განლაგება გადაირთვება ერთსვეტიანიდან ორსვეტიან რეჟიმზე.

CSS grid

CSS Grid განლაგებაში fr ერთეული საშუალებას იძლევა, ხელმისაწვდომი სივრცე გადანაწილდეს გრიდის ბილიკებს შორის. შემდეგი მაგალითი ქმნის გრიდ კონტეინერს სამი ბილიკით, სადაც თითოეული შვილობილი ელემებტი ზომაში არის 1fr. ეს ნიშნავს, რომ შეიქმნება სამი სვეტი, რომლებიც კონტეინერის სივრცეს თანაბრად გაინაწილებენ. ამ მიდგომას უკვე გაეცანით CSS grid-ის სტატიაში.

<div class="wrapper">
  <div class="col1">
    <p>ეს განლაგება რესპონსიულია. სცადეთ დააპატარავოთ ან გაადიდოთ ბრაუზერის ფანჯარა და ნახეთ, რა მოხდება.</p>
  </div>
  <div class="col2">
    <p>HTML (HyperText Markup Language - ჰიპერტექსტური მარკაპის ენა) არის მარკაპის ენა, რომელიც მუითებებს ბრაუზერს, თუ როგორი სტრუქტურა მისცეს ვებგვერდს. HTML-ში გამოიყენება ელემენტები, რომ ტექსტური კონტენტი შევკრათ ან მოვნიშნოთ (mark up), რათა ამ კონტენტს გარკვეული გარეგნობა, ქცევა ან დანიშნულება შეეძინოს.</p>
    <p>HTML შედგება ელემენტებისგან, რომლებიც გამოიყენება კონტენტის სხვადასხვა ნაწილის შესაფუთად, რათა მას მიენიჭოს განსხვავებული გარეგნობა ან დანიშნულება. ნიმუშად ავიღოთ მარტივი ტექსტი, რომელსაც მარკაპს გავუკეთებთ: მე მინდა ვისწავლო მეტი!</p>
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (width >= 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 5%;
  }
}

დააპატარავეთ ან გაადიდეთ ბრაუზერის ფანჯარა. როცა ზემოთ მოცემული მაგალითის სიგანე გადაცდება 600 პიქსელის ზღვარს, განლაგება გადაირთვება ერთსვეტიანიდან ორსვეტიან რეჟიმზე.

რესპონსიული სურათები/მედია

ჩვეულებრივ, მედია გამოისახება იმ ზომით, რა ზომაც გააჩნია მის კონტენტს, მაგალითად 1200 პიქსელის სიგანის სურათი <img> თეგში იქნება ავტომატურად 1200 პიქსელის სიგანის. ეს ბუნებრივია, შექმნის რესპონსიულობის პრობლემებს. იმისათვის, რომ მედია არასოდეს აღემატებოდეს მის რესპონსიურ კონტეინერს, შეიძლება გამოვიყენოთ შემდეგი მიდგომა:

img,
picture,
video {
  max-width: 100%;
}

რესპონსიული ტიპოგრაფია

რესპონსიული ტიპოგრაფია გულისხმობს ფონტის ზომების ცვლილებას ეკრანის ზომიდან გამომდინარე.

Media query-ს გამოყენება რესპონსიული ტიპოგრაფიისთვის

ამ მაგალითში, გვსურს, რომ ჩვენი პირველი სათაურის ელემენტი იყოს 4rem, რაც ჩვენი საწყისი ფონტის ზომის ოთხმაგს ნიშნავს. ეს საკმაოდ დიდი სთაურია! ჩვენ გვინდა ასეთი დიდი სათაური მხოლოდ დიდ ეკრანებზე იყოს გამოყენებული. ამიტომ თავდაპირველ ზომას გავუწეროთ 2rem, ხოლო შემდეგ 4rem, როცა ეკრანის ზომა 1200px-ზე დიდია.

<h1>დაუკვირდი ჩემს ზომას</h1>
<p>სხვა ტექსტი შესადარებლად</p>

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (width >= 1200px) {
  h1 {
    font-size: 4rem;
  }
}

როცა ეკრანის ზომა 1200px-ზე დიდი იქნება, მხოლოდ მაშინ დავინახავთ სათაურის გადიდებულ ვერსიას. თუმცა ეს მიდგომა მოითხოვს სხვადასხვა ეკრანის ზომაზე სხვადასხვა ფონტის ზომის მინიჭებას. შეგვიძლია ეკრანის დაპატარავებასთან ერთად, ფონტის ზომაც დინამიურად ვცვალოთ.

რესპონსიული ტიპოგრაფიისთვის viewport ერთეულების გამოყენება

Viewport-ის ერთეული vw ასევე გამოიყენება რესპონსიული ტიპოგრაფიისთვის, Media query-ის ბრეიქპოინტების (პიქსელებში მინიჭებული მნიშვნელობა) დაყენების გარეშე. 1vw შეადგენს viewport-ის (ეკრანის) სიგანის 1%-ს, რაც ნიშნავს, რომ თუ ფონტის ზომას vw ერთეულში დააყენებთ, ის ყოველთვის იქნება დამოკიდებული ეკრანის ზომაზე.

<h1>დაუკვირდი ჩემს ზომას</h1>
<p>სხვა ტექსტი შესადარებლად</p>

h1 {
  font-size: 2vw;
}

calc

როგორ მოვიქცეთ თუ გვსურს მინიმალურად რაღაც საწყისი ზომის მინიჭება? ამისათვის შეგვიძლია გამოვიყენოთ calc() ფუნქცია.

h1 {
  font-size: calc(2vw + 16px);
}

ასე მივიღებთ ეკრანის ზომის ორ პროცენტს დამატებული 16px.

clamp

თუ გვსურს ფონტის ზომის მინიმალურ და მაქსიმალურ ზომაში მოთავსება მაშინ შეგვიძლია გამოვიყენოთ clamp() ფუნქცია.

მისი ფორმულა შემდეგია:

h1 {
  font-size: clamp(მინიმუმი_ზომა, სასურველი_ზომა, მაქსიმალური_ზომა);
}

<h1>დაუკვირდი ჩემს ზომას</h1>
<p>სხვა ტექსტი შესადარებლად</p>

h1 {
  font-size: clamp(16px, 3vw, 40px);
}

ასე განვსაზღვრავთ, რომ ფონტის ზომა იყოს არაუმცირეს 16px-ისა და არაუდიდეს 40px-ისა, ხოლო ამ ზომების ინტერვალში ფონტის ზომა იქნება 3vw. ეკრანის დაპატარავებიდან გამომდიანრე დინამიურად შეიცვლება მისი ზომაც.

viewport მეტა თეგი

თუ დააკვირდებით რესპონსიული გვერდის HTML კოდს, ჩვეულებრივ, დოკუმენტის <head> ნაწილში ნახავთ შემდეგ <meta> თეგს:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

ეს viewport მეტა თეგი ეუბნება მობილურ ბრაუზერებს, რომ უნდა დააყენონ viewport-ის სიგანე მოწყობილობის სიგანის შესაბამისად და დოკუმენტი გამოსახონ ზომის ცვლილების გარეშე, 1.0 სკალით. ასე დოკუმენტი მობილურზე გამოისახება ოპტიმიზირებულ ზომაში.

რატომ არის ეს საჭირო? იმიტომ, რომ მობილური ბრაუზერები ხშირად არ ასახავენ სწორად თავიანთი viewport-ის სიგანეს.

ეს მეტა თეგი არსებობს იმიტომ, რომ როცა სმარტფონები პირველად გამოჩნდა, ვებსაიტების უმეტესობა მობილურზე ოპტიმიზირებული არ იყო. ამიტომ, მობილური ბრაუზერები აყენებდნენ viewport-ის სიგანეს 980 პიქსელზე, ამ სიგანით რენდერდებოდა (გამოისახებოდა) გვერდი და შედეგი ნაჩვენები იყო, როგორც desktop განლაგების დაპატარავებული ვერსია. მომხმარებლებს შეეძლოთ ხედის გადიდება და გვერდზე გადაადგილება, რომ დაენახათ საინტერესო ნაწილები, მაგრამ ვიზუალურად ეს ცუდად გამოიყურებოდა და არასასიამოვნო პროცესი იყო.

როდესაც აწესებთ width=device-width, ამით ცვლით მობილური მოწყობილობის ნაგულისხმევ მნიშვნელობას, მაგალითად iPhone-ს აქვს width=980px მოწყობილობის ფაქტობრივი სიგანე. მის გარეშე, თქვენი რესპონსიული დიზაინის breakpoint და media query შესაძლოა მობილურ ბრაუზერებზე არასწორად მუშაობდეს.

ამიტომ ყოველთვის უნდა ჩართოთ viewport მეტა თეგი დოკუმენტის head ნაწილში.

შეჯამება

ამ სტატიაში განვიხილეთ რესპონსიული ვებ დიზაინის (RWD) მნიშვნილობა, ტექნიკები და თანამედროვე მიდგომები.

გამოყენებული ლიტერატურა

• Responsive web design