ფაილი მარკეტინგულიმარკეტინგისა და გაყიდვების ვიდეოებიმარკეტინგის ინფოგრაფიკამობილური და ტაბლეტების მარკეტინგი

რა არის საპასუხო დიზაინი? (ახსნა ვიდეო და ინფოგრაფიკა)

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

რა არის საპასუხო დიზაინი?

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

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

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

საპასუხო დიზაინი CSS Viewport მოთხოვნები

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

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

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

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

ლუსინდა დანკალფი, მონეტატის აღმასრულებელი დირექტორი

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

საპასუხო ვებ – დიზაინის ინფოგრაფიკა

არის თქვენი საიტი საპასუხო?

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

მეტი სიზუსტისთვის მიუთითეთ თქვენი Google Chrome ბრაუზერი თქვენს საიტზე. აირჩიეთ View> Developer> Developer Tools მენიუდან. ეს ჩატვირთავს უამრავ ხელსაწყოს პანელში ან ახალ ფანჯარაში. დააწკაპუნეთ პატარა ხატულაზე Developer Tools მენიუს ზოლის მარცხნივ, რომელიც ჰგავს მობილური და ტაბლეტის ხატულას. შეგიძლიათ აირჩიოთ რამდენიმე სტანდარტული მოწყობილობა და შეცვალოთ გვერდის ჰორიზონტალურად თუ ვერტიკალურად ნახვა.

  • ქრომის დეველოპერის ხელსაწყოების საპასუხო ტაბლეტი
  • ქრომის დეველოპერის ხელსაწყოები რეაგირებს მობილურ ჰორიზონტალურად
  • ქრომის დეველოპერის ხელსაწყოების საპასუხო მობილური
  • ქრომის დეველოპერის ხელსაწყოების საპასუხო სამუშაო მაგიდა

შეგიძლიათ გამოიყენოთ ნავიგაციის ვარიანტები ზემოდან, რომ შეცვალოთ ხედი ლანდშაფტიდან პორტრეტზე, ან თუნდაც აირჩიოთ წინასწარ დაპროგრამებული ხედვის პორტის ზომის ნებისმიერი რაოდენობა. შეიძლება გვერდის გადატვირთვა მოგიწიოთ, მაგრამ ეს მსოფლიოში ყველაზე მაგარი იარაღია თქვენი რეაგირების პარამეტრების გადამოწმებისთვის და თქვენი საიტის ყველა მოწყობილობაზე შესანიშნავად უზრუნველყოფისთვის!

Douglas Karr

Douglas Karr არის CMO of OpenINSIGHTS და დამფუძნებელი Martech Zone. დუგლასი დაეხმარა ათეულობით წარმატებულ MarTech სტარტაპს, დაეხმარა 5 მილიარდ დოლარზე მეტის შეძენისა და ინვესტიციების გამომუშავებაში და აგრძელებს კომპანიებს მათი გაყიდვებისა და მარკეტინგული სტრატეგიების განხორციელებაში და ავტომატიზაციაში. დუგლასი არის საერთაშორისოდ აღიარებული ციფრული ტრანსფორმაციის და MarTech ექსპერტი და სპიკერი. დუგლასი ასევე არის Dummie's-ის სახელმძღვანელოს და ბიზნეს ლიდერობის წიგნის გამოქვეყნებული ავტორი.

დაკავშირებული სტატიები

დაბრუნება ღილაკზე
დახურვა

Adblock აღმოჩენილია

Martech Zone შეუძლია მოგაწოდოთ ეს კონტენტი უფასოდ, რადგან ჩვენ ვაკეთებთ ჩვენი საიტის მონეტიზაციას რეკლამის შემოსავლების, შვილობილი ბმულების და სპონსორების მეშვეობით. ჩვენ მადლობელი ვიქნებით, თუ ჩვენს საიტს ნახულობთ თქვენს რეკლამის ბლოკერს.