Განსაზღვრავს სიგანე შენი ვებ გვერდი

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

რატომ განვიხილოთ რეზოლუცია

1995 წელს, სტანდარტული 640x480 რეზოლუციის მონიტორები იყვნენ ყველაზე დიდი და საუკეთესო მონიტორები. ეს იმას ნიშნავდა, რომ ვებ დიზაინერებმა ყურადღება გაამახვილეს იმ გვერდებზე, რომლებშიც კარგად იყო ჩანერგილი ვებ ბრაუზერები, რომლითაც 12-დიუმიანი 14-დიუმიანი მონიტორის გაშვება მოხდა.

ამ დღეებში, 640x480 რეზოლუცია უმეტესად 1% -ზე მეტია ვებ-გვერდის ტრაფიკის მიხედვით. კომპიუტერებს ბევრად უფრო მაღალი რეზოლუციები აქვთ, მათ შორის 1366x768, 1600x900 და 5120x2880. ხშირ შემთხვევაში, 1366x768 რეზოლუციის ეკრანის პროექტირება.

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

ბრაუზერის სიგანე

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

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

კლიენტების ანგარიშის შემდეგ, რომლებიც მაქსიმალურად ან არ იყენებენ, ვიფიქროთ ბრაუზერის საზღვრებზე. ყველა ბრაუზერი აქვს გადახვევის ბარი და საზღვრები მხარეებს, რომლებიც შეამცირონ 800-დან 740 პიქსელიდან ან ნაკლები 800x600 რეზოლუციებით და 980 პიქსელებით მაქსიმალურ ფანჯრებზე 1024x768 რეზოლუციებით. ამას ეწოდება ბრაუზერი "ქრომი" და მას შეუძლია თქვენი გვერდის დიზაინისთვის გამოსაყენებელი სივრცის გამოყენება.

ფიქსირებული ან თხევადი სიგანე გვერდები

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

ფიქსირებული სიგანე

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

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

თხევადი სიგანე

თხევადი სიგანე გვერდები (უწოდებენ მოქნილი სიგანე გვერდები) განსხვავდება სიგანე იმის მიხედვით, თუ რამდენად ფართო ბრაუზერის ფანჯარაა. ეს საშუალებას გაძლევთ შექმნათ გვერდები, რომლებიც უფრო მეტ ყურადღებას აქცევს თქვენს კლიენტებს. პრობლემა თხევადი სიგანე გვერდებთან ერთად არის ის, რომ მათ შეიძლება ადვილად იკითხონ. თუ ტექსტის ხაზის სიგრძე 10-დან 12-მდე გრძელია, ან 4-დან 5-მდე მოკლეა, შეიძლება რთული იყოს წაკითხული. ეს იმას ნიშნავს, რომ მკითხველს დიდი ან პატარა ბრაუზერის ფანჯრები აქვს პრობლემები.

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

და გამარჯვებული არის: CSS მედია შეკითხვებს

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