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

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

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

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

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

Wikipedia

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

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

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

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

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

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

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

თუ გსურთ რეაგირებადი საიტის მოქმედებაში ნახოთ, მიუთითეთ თქვენი Google Chrome ბრაუზერი (მე მჯერა, რომ Firefox- ს იგივე თვისება აქვს) Highbridge. ახლა აირჩიეთ View> Developer> Developer Tools მენიუდან. ეს ბრაუზერის ბოლოში ჩაიტვირთება ინსტრუმენტების ჯგუფში. დეველოპერული ხელსაწყოების მენიუს ზოლის მარცხნივ, მარცხნივ, დააჭირეთ მობილურის პატარა ხატულას.

რეაგირების ტესტირება-ქრომი

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

3 კომენტარები

  1. 1

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

  2. 2

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

რას ფიქრობთ?

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.