আধুনিক ব্রাউজার ব্যবহার করে আইকন, অ্যাড্রেস বারের রঙ এবং কাস্টম টাইলসের মতো নির্দিষ্ট কিছু কম্পোনেন্ট সহজেই কাস্টমাইজ করা যায়। এইসব সহজ পরিবর্তন এনগেজমেন্ট বাড়াতে এবং ব্যবহারকারীদের আপনার সাইটে ফিরিয়ে আনতে পারে।
আধুনিক ব্রাউজার ব্যবহার করে আইকন, অ্যাড্রেস বারের রঙ এবং এমনকি কাস্টম টাইলসের মতো নির্দিষ্ট কিছু কম্পোনেন্ট সহজেই কাস্টমাইজ করা যায়। এইসব সহজ পরিবর্তন এনগেজমেন্ট বাড়াতে এবং ব্যবহারকারীদের আপনার সাইটে ফিরিয়ে আনতে পারে।
দুর্দান্ত আইকন ও টাইল প্রদান করুন
কোনও ব্যবহারকারী আপনার ওয়েবপেজে এলে, ব্রাউজার 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
Chrome ও Opera icon.png ব্যবহার করে, যা ডিভাইসের মাধ্যমে প্রয়োজনীয় সাইজে
স্কেল করা হয়। অটোমেটিক স্কেলিং প্রতিরোধ করতে, আপনি sizes অ্যাট্রিবিউট নির্দিষ্ট করে অতিরিক্ত
সাইজও প্রদান করতে পারেন।
Safari
হোম স্ক্রিন আইকন নির্দেশ করতে Safari-ও rel অ্যাট্রিবিউট সহ <link> ট্যাগ ব্যবহার করে: apple-touch-icon
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
apple-touch-icon-এর জন্য ১৮০px বা ১৯২px স্কোয়ারের ট্রান্সপারেন্ট নয় এমন PNG আদর্শ।
sizes অ্যাট্রিবিউটের মাধ্যমে একাধিক ভার্সন অন্তর্ভুক্ত করার সাজেশন দেওয়া হয় না।
আগে, iOS-এর জন্য Safari ভিজ্যুয়াল এফেক্ট যোগ করা এড়াতে -precomposed কীওয়ার্ড বিবেচনা করত, কিন্তু iOS 7 থেকে এটি আর প্রয়োজন হয় না।
Internet Explorer এবং Windows Phone
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">
Internet Explorer-এ টাইল
Microsoft-এর "পিন করা সাইট" এবং রোটেট করা "লাইভ টাইল" অন্যান্য প্রয়োগের থেকে অনেক বেশি এবং এই গাইডের আওতার বাইরে। আপনি MSDN-এর কীভাবে লাইভ টাইল তৈরি করতে হয় থেকে আরও জানতে পারবেন।
ব্রাউজার এলিমেন্টের রঙ
বিভিন্ন meta এলিমেন্ট ব্যবহার করে, আপনি ব্রাউজার এবং
এমনকি প্ল্যাটফর্মের এলিমেন্টও কাস্টমাইজ করতে পারবেন। মনে রাখবেন, কিছু এক্সটেনশন শুধুমাত্র নির্দিষ্ট প্ল্যাটফর্ম বা ব্রাউজারে কাজ করতে পারে, তবে সেগুলি আপনার অভিজ্ঞতাকে অনেক উন্নত করতে পারে।
Chrome, Firefox OS, Safari, Internet Explorer এবং Opera Coast আপনাকে ব্রাউজারের এলিমেন্টের জন্য রঙ এবং এমনকি মেটা ট্যাগ ব্যবহার করে প্ল্যাটফর্ম নির্ধারণ করতে দেয়।
Chrome ও Opera-এর জন্য মেটা থিমের রঙ
Android-এ Chrome-এর জন্য থিমের রঙ নির্দিষ্ট করতে, মেটা থিমের রঙ ব্যবহার করুন।
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari-র জন্য নির্দিষ্ট স্টাইলিং
Safari আপনাকে স্ট্যাটাস বার স্টাইল করতে এবং স্টার্টআপ ছবি নির্দিষ্ট করতে দেয়।
স্টার্টআপ ছবি উল্লেখ করুন
ডিফল্ট হিসেবে, লোড হওয়ার সময় Safari একটি ফাঁকা স্ক্রিন দেখায় এবং একাধিকবার লোড হওয়ার পরে
অ্যাপের আগের অবস্থার একটি স্ক্রিনশট দেখায়। আপনি Safari-কে একটি নির্দিষ্ট স্টার্টআপ ছবি দেখাতে বলে
এটি প্রতিরোধ করতে পারেন, এর জন্য rel=apple-touch-startup-image-এর সাথে একটি লিঙ্ক ট্যাগ যোগ করতে হবে। যেমন:
<link rel="apple-touch-startup-image" href="icon.png">
ছবিটি টার্গেট ডিভাইসের স্ক্রিনের নির্দিষ্ট সাইজের হতে হবে, অন্যথায় এটি ব্যবহার করা যাবে না। আরও তথ্যের জন্য Safari ওয়েব কন্টেন্ট নির্দেশিকা দেখুন।
এই বিষয়ে Apple-এর ডকুমেন্টেশনে খুব বেশি তথ্য না থাকলেও, ডেভেলপার কমিউনিটি উন্নত মিডিয়া কোয়েরি ব্যবহার করে সব ডিভাইসকে টার্গেট করার উপায় খুঁজে বের করেছে। এর মাধ্যমে উপযুক্ত ডিভাইস বেছে নিয়ে সঠিক ছবি নির্দিষ্ট করা যায়। এখানে একটি কার্যকরী সমাধান দেওয়া হল, tfausak-এর gist-এর সৌজন্যে
স্ট্যাটাস বারের চেহারা পরিবর্তন করা
আপনি ডিফল্ট স্ট্যাটাস বারের চেহারা black বা
black-translucent-এ পরিবর্তন করতে পারবেন। black-translucent-এর মাধ্যমে, স্ট্যাটাস বার ফুল স্ক্রিন কন্টেন্টের উপরে
ফ্লোট করে, এটিকে নিচের দিকে ঠেলে দেয় না। এটি লেআউটকে আরও উচ্চতা দেয়, তবে উপরের অংশকে বাধা দেয়। এখানে প্রয়োজনীয় কোড দেওয়া হল:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent ব্যবহার করে স্ক্রিনশট
black ব্যবহার করে স্ক্রিনশট