আধুনিক ব্রাউজারগুলি আইকন, ঠিকানা বারের রঙের মতো নির্দিষ্ট উপাদানগুলিকে কাস্টমাইজ করা এবং এমনকি কাস্টম টাইলসের মতো জিনিসগুলি যোগ করা সহজ করে তোলে৷ এই সাধারণ পরিবর্তনগুলি ব্যস্ততা বাড়াতে পারে এবং ব্যবহারকারীদের আপনার সাইটে ফিরিয়ে আনতে পারে।
আধুনিক ব্রাউজারগুলি আইকন, ঠিকানা বারের রঙের মতো নির্দিষ্ট উপাদানগুলিকে কাস্টমাইজ করা এবং এমনকি কাস্টম টাইলসের মতো জিনিসগুলি যোগ করা সহজ করে তোলে৷ এই সাধারণ পরিবর্তনগুলি ব্যস্ততা বাড়াতে পারে এবং ব্যবহারকারীদের আপনার সাইটে ফিরিয়ে আনতে পারে।
মহান আইকন এবং টাইলস প্রদান
যখন একজন ব্যবহারকারী আপনার ওয়েবপৃষ্ঠা পরিদর্শন করে, ব্রাউজারটি HTML থেকে একটি আইকন আনার চেষ্টা করে। আইকনটি ব্রাউজার ট্যাব, সাম্প্রতিক অ্যাপ স্যুইচ, নতুন (বা সম্প্রতি দেখা) ট্যাব পৃষ্ঠা এবং আরও অনেক কিছু সহ অনেক জায়গায় প্রদর্শিত হতে পারে৷
একটি উচ্চ মানের ছবি প্রদান করা আপনার সাইটটিকে আরও স্বীকৃত করে তুলবে, ব্যবহারকারীদের জন্য আপনার সাইট খুঁজে পাওয়া সহজ করে তুলবে৷
সমস্ত ব্রাউজারকে সম্পূর্ণরূপে সমর্থন করার জন্য, আপনাকে প্রতিটি পৃষ্ঠার <head> উপাদানে কয়েকটি ট্যাগ যোগ করতে হবে।
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
ক্রোম এবং অপেরা
Chrome এবং Opera icon.png ব্যবহার করে, যা ডিভাইস দ্বারা প্রয়োজনীয় আকারে স্কেল করা হয়। স্বয়ংক্রিয় স্কেলিং প্রতিরোধ করতে, আপনি sizes বৈশিষ্ট্য উল্লেখ করে অতিরিক্ত মাপ প্রদান করতে পারেন।
সাফারি
Safari হোম স্ক্রীন আইকন নির্দেশ করতে rel অ্যাট্রিবিউট: apple-touch-icon সহ <link> ট্যাগ ব্যবহার করে।
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
180px বা 192px বর্গক্ষেত্রের একটি অ-স্বচ্ছ PNG অ্যাপল-টাচ-আইকনের জন্য আদর্শ।
sizes অ্যাট্রিবিউটের মাধ্যমে একাধিক সংস্করণ অন্তর্ভুক্ত করার পরামর্শ দেওয়া হয় না। পূর্বে, আইওএসের জন্য সাফারি ভিজ্যুয়াল এফেক্ট যোগ করা এড়াতে -precomposed কীওয়ার্ড বিবেচনা করবে, কিন্তু iOS 7 এর পর থেকে এটি প্রয়োজনীয় ছিল না।
ইন্টারনেট এক্সপ্লোরার এবং উইন্ডোজ ফোন
Windows 8 এর নতুন হোম স্ক্রীন অভিজ্ঞতা পিন করা সাইটের জন্য চারটি ভিন্ন লেআউট সমর্থন করে এবং চারটি আইকন প্রয়োজন৷ আপনি যদি একটি নির্দিষ্ট আকার সমর্থন করতে না চান তবে আপনি প্রাসঙ্গিক মেটা ট্যাগগুলি ছেড়ে দিতে পারেন৷
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
ইন্টারনেট এক্সপ্লোরারে টাইলস
মাইক্রোসফ্টের "পিন করা সাইট" এবং ঘূর্ণায়মান "লাইভ টাইলস" অন্যান্য বাস্তবায়নের বাইরে এবং এই গাইডের সুযোগের বাইরে। কিভাবে লাইভ টাইলস তৈরি করতে হয় তা আপনি MSDN-এ আরও শিখতে পারেন।
রঙিন ব্রাউজার উপাদান
বিভিন্ন meta উপাদান ব্যবহার করে, আপনি ব্রাউজার এবং এমনকি প্ল্যাটফর্মের উপাদানগুলি কাস্টমাইজ করতে পারেন। মনে রাখবেন যে কিছু শুধুমাত্র নির্দিষ্ট প্ল্যাটফর্ম বা ব্রাউজারে কাজ করতে পারে, তবে তারা অভিজ্ঞতাকে ব্যাপকভাবে উন্নত করতে পারে।
ক্রোম, ফায়ারফক্স ওএস, সাফারি, ইন্টারনেট এক্সপ্লোরার এবং অপেরা কোস্ট আপনাকে মেটা ট্যাগ ব্যবহার করে ব্রাউজারের উপাদান এবং এমনকি প্ল্যাটফর্মের জন্য রঙ নির্ধারণ করতে দেয়।
ক্রোম এবং অপেরার জন্য মেটা থিম রঙ
Android-এ Chrome-এর জন্য থিমের রঙ নির্দিষ্ট করতে, মেটা থিমের রঙ ব্যবহার করুন।
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
সাফারি নির্দিষ্ট স্টাইলিং
সাফারি আপনাকে স্ট্যাটাস বার স্টাইল করতে এবং একটি স্টার্টআপ ইমেজ নির্দিষ্ট করতে দেয়।
একটি স্টার্টআপ ইমেজ নির্দিষ্ট করুন
ডিফল্টরূপে, সাফারি লোডের সময় একটি ফাঁকা স্ক্রীন দেখায় এবং একাধিক লোড হওয়ার পরে অ্যাপটির পূর্ববর্তী অবস্থার একটি স্ক্রিনশট দেখায়। আপনি rel=apple-touch-startup-image সহ একটি লিঙ্ক ট্যাগ যোগ করে Safari কে একটি স্পষ্ট স্টার্টআপ ইমেজ দেখাতে বলে এটি প্রতিরোধ করতে পারেন। যেমন:
<link rel="apple-touch-startup-image" href="icon.png">
ইমেজ টার্গেট ডিভাইসের স্ক্রিনের নির্দিষ্ট আকারের হতে হবে বা এটি ব্যবহার করা হবে না। আরও বিস্তারিত জানার জন্য সাফারি ওয়েব কন্টেন্ট নির্দেশিকা পড়ুন।
অ্যাপলের ডকুমেন্টেশন এই বিষয়ে বিক্ষিপ্ত হলেও, ডেভেলপার সম্প্রদায় উপযুক্ত ডিভাইস নির্বাচন করতে এবং তারপরে সঠিক চিত্র নির্দিষ্ট করার জন্য উন্নত মিডিয়া ক্যোয়ারী ব্যবহার করে সমস্ত ডিভাইসকে লক্ষ্য করার একটি উপায় বের করেছে। এখানে একটি কার্যকরী সমাধান, tfausak এর সারাংশের সৌজন্যে
স্ট্যাটাস বারের চেহারা পরিবর্তন করুন
আপনি ডিফল্ট স্ট্যাটাস বারের চেহারা black বা black-translucent তে পরিবর্তন করতে পারেন। black-translucent সহ, স্ট্যাটাস বারটি পূর্ণ স্ক্রীনের বিষয়বস্তুর উপরে ভাসতে থাকে, এটিকে নিচে না দিয়ে। এটি লেআউটটিকে আরও উচ্চতা দেয়, তবে শীর্ষে বাধা দেয়। এখানে প্রয়োজনীয় কোড:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent ব্যবহার করে স্ক্রিনশট
black ব্যবহার করে স্ক্রিনশট