প্রতিক্রিয়াশীল ওয়েব ডিজাইন অনেক উপায়ে মোবাইল ফোনের প্রতিক্রিয়া ছিল। স্মার্টফোনের আবির্ভাব হওয়ার আগে, খুব কম লোকই হ্যান্ডহেল্ড ডিভাইসগুলিতে ওয়েবসাইটগুলি দেখতে এবং কেমন হওয়া উচিত তা গুরুত্বের সাথে বিবেচনা করে। এটি অন্তর্নির্মিত ওয়েব ব্রাউজার সমন্বিত মোবাইল ফোনের উত্থানের সাথে পরিবর্তিত হয়েছে।
প্রতিক্রিয়াশীল ওয়েব ডিজাইন এমন একটি মানসিকতাকে উত্সাহিত করেছে যা অনুমানকে প্রশ্নবিদ্ধ করে। যেখানে পূর্বে একটি ওয়েবসাইট শুধুমাত্র একটি ডেস্কটপ কম্পিউটারে দেখা হবে বলে অনুমান করা সাধারণ ছিল, এখন ফোন এবং ট্যাবলেটের জন্য একই ওয়েবসাইট ডিজাইন করার জন্য এটি আদর্শ অনুশীলন। প্রকৃতপক্ষে, মোবাইল ব্যবহার এখন ওয়েবে ডেস্কটপ ব্যবহারকে গ্রহন করেছে ।
এই প্রতিক্রিয়াশীল মানসিকতা ভবিষ্যতের জন্য আপনাকে ভাল পরিবেশন করবে। এটি সম্পূর্ণভাবে সম্ভব যে আপনার ওয়েবসাইটগুলি এমন ডিভাইস এবং স্ক্রিনে দেখা হবে যা আমরা আজ কল্পনাও করতে পারি না। আর এই মানসিকতা পর্দার বাইরেও প্রসারিত। এমনকি এখন লোকেরা আপনার সামগ্রী অ্যাক্সেস করার জন্য কোনও স্ক্রিন ছাড়াই ডিভাইস ব্যবহার করছে৷ আপনি যদি শব্দার্থিক HTML এর একটি শক্তিশালী ভিত্তি ব্যবহার করেন তাহলে ভয়েস সহকারীরা আপনার ওয়েবসাইটগুলি ব্যবহার করতে পারে৷
পর্দার জগতেও পরীক্ষা-নিরীক্ষা চলছে। আজ বাজারে ভাঁজযোগ্য স্ক্রিন সহ ডিভাইস রয়েছে। এটি আপনার ডিজাইনের জন্য কিছু চ্যালেঞ্জ প্রবর্তন করে।
দ্বৈত পর্দা
ভাঁজযোগ্য ডিভাইসের ব্যবহারকারীরা বেছে নিতে পারেন যে তারা তাদের ওয়েব ব্রাউজার শুধুমাত্র একটি স্ক্রীন দখল করতে চান বা উভয় স্ক্রীন জুড়ে স্প্যান করতে চান। যদি ব্রাউজারটি উভয় স্ক্রীনকে বিস্তৃত করে, তাহলে প্রদর্শনে থাকা ওয়েবসাইটটি দুটি স্ক্রিনের মধ্যে কব্জা দ্বারা ভেঙে যাবে। এটা চমৎকার দেখায় না.
ভিউপোর্ট সেগমেন্ট
আপনার ওয়েবসাইটটি ডুয়াল-স্ক্রিন ডিভাইসে প্রদর্শিত হচ্ছে কিনা তা সনাক্ত করার জন্য একটি পরীক্ষামূলক মিডিয়া বৈশিষ্ট্য রয়েছে। মিডিয়া বৈশিষ্ট্যের প্রস্তাবিত নাম viewport-segments । দুটি জাত রয়েছে: horizontal-viewport-segments এবং vertical-viewport-segments ।
যদি horizontal-viewport-segments মিডিয়া বৈশিষ্ট্যটি 2 এর মান রিপোর্ট করে এবং vertical-viewport-segments 1 এর মান রিপোর্ট করে যার মানে হল ডিভাইসের কব্জা উপরের থেকে নীচে চলে, আপনার সামগ্রীকে দুটি পাশাপাশি প্যানেলে বিভক্ত করে।
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
যদি vertical-viewport-segments মিডিয়া বৈশিষ্ট্য 2 এর মান রিপোর্ট করে এবং horizontal-viewport-segments 1 এর মান রিপোর্ট করে, তাহলে কব্জাটি এপাশ থেকে ওপাশে চলে, আপনার বিষয়বস্তু দুটি প্যানেলে বিভক্ত করে, একটি অন্যটির উপরে।
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
যদি vertical-viewport-segments এবং horizontal-viewport-segments উভয়ই 1 এর মান রিপোর্ট করে তবে এর মানে হল ওয়েবসাইটটি শুধুমাত্র একটি স্ক্রিনে প্রদর্শিত হচ্ছে, এমনকি ডিভাইসটিতে একাধিক স্ক্রিন থাকলেও। এটি কোনো মিডিয়া ক্যোয়ারী ব্যবহার না করার সমতুল্য।
পরিবেশ পরিবর্তনশীল
viewport-segments মিডিয়া বৈশিষ্ট্য নিজেই আপনাকে সেই বিরক্তিকর কব্জাটির চারপাশে ডিজাইন করতে সহায়তা করবে না। আপনি কবজা আকার জানার একটি উপায় প্রয়োজন. যে যেখানে পরিবেশ ভেরিয়েবল সাহায্য করতে পারে.
CSS-এ এনভায়রনমেন্ট ভেরিয়েবল আপনাকে আপনার শৈলীতে বিশ্রী ডিভাইসের অনুপ্রবেশকে ফ্যাক্টর করার অনুমতি দেয়। উদাহরণস্বরূপ, আপনি safe-area-inset-top , safe-area-inset-right , safe-area-inset-bottom এবং safe-area-inset-left পরিবেশের মানগুলি ব্যবহার করে iPhone X-এ "খাঁজ" এর চারপাশে ডিজাইন করতে পারেন . এই কীওয়ার্ডগুলি একটি env() ফাংশনে মোড়ানো হয়।
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
এনভায়রনমেন্ট ভেরিয়েবল কাস্টম প্রপার্টির মত কাজ করে। এর মানে হল যে এনভায়রনমেন্ট ভেরিয়েবলের অস্তিত্ব না থাকলে আপনি একটি ফলব্যাক বিকল্পে পাস করতে পারেন।
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
আইফোন এক্স-এ কাজ করার জন্য সেই পরিবেশের ভেরিয়েবলের জন্য, viewport তথ্য নির্দিষ্ট করে এমন meta উপাদান আপডেট করুন:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
এখন আপনার পৃষ্ঠার বিন্যাস সম্পূর্ণ ভিউপোর্ট গ্রহণ করবে এবং ডিভাইস-প্রদত্ত ইনসেট মানগুলির সাথে ডকুমেন্টটিকে নিরাপদে প্যাড করবে৷
ভাঁজযোগ্য স্ক্রিনের জন্য, ছয়টি নতুন পরিবেশের ভেরিয়েবল প্রস্তাব করা হচ্ছে: viewport-segment-width , viewport-segment-height , viewport-segment-top , viewport-segment-left , viewport-segment-bottom , viewport-segment-right ।
এখানে দুটি কলাম সহ একটি লেআউটের একটি উদাহরণ, একটি অন্যটির চেয়ে প্রশস্ত৷
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
একটি উল্লম্ব কব্জা সহ দ্বৈত পর্দার জন্য, প্রথম কলামটি প্রথম পর্দার প্রস্থ এবং দ্বিতীয় কলামটি দ্বিতীয় পর্দার প্রস্থ হিসাবে সেট করুন৷
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
দ্বৈত পর্দাকে একটি সুযোগ হিসাবে বিবেচনা করুন। সম্ভবত একটি স্ক্রিন স্ক্রোলযোগ্য পাঠ্য সামগ্রী প্রদর্শন করতে ব্যবহার করা যেতে পারে যখন অন্যটি একটি চিত্র বা মানচিত্রের মতো একটি নির্দিষ্ট উপাদান প্রদর্শন করে।
ভবিষ্যৎ
ফোল্ডেবল ডিসপ্লে কি পরবর্তী বড় জিনিস হয়ে উঠবে? কে জানে। কেউ ভবিষ্যদ্বাণী করতে পারেনি যে মোবাইল ডিভাইসগুলি কতটা জনপ্রিয় হয়ে উঠবে তাই ভবিষ্যতের ফর্ম ফ্যাক্টরগুলি সম্পর্কে খোলা মনে রাখা মূল্যবান।
সর্বোপরি, এটি নিশ্চিত করা মূল্যবান যে আপনার ওয়েবসাইটগুলি ভবিষ্যতে যা কিছু নিয়ে আসতে পারে তাতে সাড়া দিতে পারে। প্রতিক্রিয়াশীল ডিজাইন আপনাকে এটিই দেয়: কেবলমাত্র ব্যবহারিক কৌশলগুলির একটি সেট নয়, তবে একটি মানসিকতা যা আপনাকে আগামীকালের ওয়েব তৈরি করার সাথে সাথে আপনাকে ভালভাবে পরিবেশন করবে।
আপনার উপলব্ধি পরীক্ষা করুন
স্ক্রিন কনফিগারেশন সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
কোন মিডিয়া ক্যোয়ারী একটি বিভক্ত ল্যান্ডস্কেপ মোডে একটি ভাঁজযোগ্য ডিভাইসকে লক্ষ্য করে?
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1) পরিবেশ পরিবর্তনশীল কি? যেমন env(safe-area-inset-top)