হ্যালো, প্রিয় ব্লগ পাঠকদের. এটা আশ্চর্যজনক নয় যে অভিযোজিত নকশা রাশিয়ান ইন্টারনেটে আরও বেশি জনপ্রিয় হয়ে উঠছে। এবং অবশ্যই, লেআউট ডিজাইনারদের এটি অধ্যয়ন করতে হবে। যেহেতু প্রতিক্রিয়াশীল ডিজাইন শীঘ্রই প্রায় সমস্ত ওয়েবসাইটে থাকবে, কারণ আরও বেশি সংখ্যক লোক মোবাইল ডিভাইস ব্যবহার করছে।
এবং আমি বলতে চাই যে এটির সাথে সাইটগুলি এটি ছাড়ার চেয়ে এই জাতীয় ডিভাইসগুলিতে পড়তে অনেক বেশি সুবিধাজনক।
আজ আমি আপনাকে 5টি খুব দরকারী এবং দুর্দান্ত পরিষেবার সাথে পরিচয় করিয়ে দিতে চাই যার মাধ্যমে আপনি আপনার ওয়েবসাইটটি মানিয়ে নিতে পারেন।
এবং তাই, চলুন.
5টি পরিষেবা যেখানে আপনি অভিযোজনযোগ্যতার জন্য আপনার ওয়েবসাইট পরীক্ষা করতে পারেন। www.responsivedesigntest.netসাইট চেক করার জন্য একটি ভাল পরিষেবা। ট্যাবলেট এবং ফোন উভয়ের জন্য অনেক স্ক্রীন রেজোলিউশন আছে।
mattkersley.comMatt Kersley থেকে একটি ওয়েবসাইট চেক করার জন্য একটি সহজ পরিষেবা। সমস্ত জনপ্রিয় মোবাইল ডিভাইস রেজোলিউশনও উপলব্ধ।
একটি খুব দুর্দান্ত পরিষেবা যা কোনও সাইট পরীক্ষা করবে। আমি সত্যিই নকশা পছন্দ, সেইসাথে কার্যকারিতা.
খুব সুন্দর এবং কার্যকরী পরিষেবা। টিভিতে সাইটটি কেমন দেখাবে তা পরীক্ষা করাও সম্ভব :-)
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট পরীক্ষা করবেন? ওয়েবসাইট পরীক্ষা করার সময় কি সমস্যা দেখা দেয় বিভিন্ন ডিভাইস? কিভাবে একটি ডেস্কটপ মনিটরে একটি ওয়েবসাইট পরীক্ষা করা একটি মোবাইল ফোনের মতো একটি হ্যান্ডহেল্ড ডিভাইসে পরীক্ষার থেকে আলাদা? প্রতিক্রিয়াশীল ওয়েবসাইটগুলি পরীক্ষা করতে আমরা কোন সরঞ্জামগুলি ব্যবহার করতে পারি? আমাদের
প্রতিক্রিয়াশীল ওয়েব ডিজাইন কি?রেসপন্সিভ ওয়েব ডিজাইন (RWD) হল ওয়েব ডিজাইনের একটি পদ্ধতির একটি সংজ্ঞা যার লক্ষ্য একটি সর্বোত্তম অভিজ্ঞতা প্রদানের লক্ষ্য নিয়ে ওয়েবসাইট তৈরি করা - ন্যূনতম আকার, প্যানিং এবং স্ক্রোল করার সাথে পড়তে এবং নেভিগেট করা সহজ বিস্তৃত পরিসরডিভাইস (ডেস্কটপ থেকে কম্পিউটার মনিটরমোবাইল ফোনে)।
RWD দিয়ে নির্মিত একটি সাইট তরল, আনুপাতিক গ্রিড, প্রতিক্রিয়াশীল ছবি এবং CSS3 মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে দেখার পরিবেশের সাথে তার লেআউটকে নিম্নলিখিত উপায়ে অভিযোজিত করে:
- তরল গ্রিড ধারণার জন্য পৃষ্ঠা উপাদানের আকারগুলি পিক্সেল বা পয়েন্টের মতো পরম এককের পরিবর্তে শতাংশের মতো আপেক্ষিক ইউনিটে হওয়া প্রয়োজন।
- নমনীয় ছবিধারণকারী উপাদানের বাইরে রেন্ডার করা থেকে প্রতিরোধ করার জন্য আপেক্ষিক ইউনিটগুলিতেও মূল্যায়ন করা হয়।
- মিডিয়া কোয়েরিগুলি একটি পৃষ্ঠাকে যে ডিভাইসে সাইটটি প্রদর্শিত হচ্ছে তার বৈশিষ্ট্যগুলির উপর ভিত্তি করে বিভিন্ন CSS স্টাইলিং নিয়ম ব্যবহার করার অনুমতি দেয়, প্রায়শই ব্রাউজারের প্রস্থ।
অনেক লোক এখন ওয়েবসাইটগুলি অ্যাক্সেস করতে তাদের মোবাইল ফোন বা ট্যাবলেট ব্যবহার করে, তাই প্রতিক্রিয়াশীল ওয়েব ডিজাইন পরীক্ষা করা গুরুত্বপূর্ণ কারণ মোবাইল ডিভাইসে ব্যবহারকারীর অভিজ্ঞতা ডেস্কটপ কম্পিউটার থেকে খুব আলাদা।
সম্ভবত একটি কমপ্লায়েন্ট ওয়েবসাইট পরীক্ষা করার সবচেয়ে চ্যালেঞ্জিং অংশ হল ওয়েবসাইটটি একাধিক ডিভাইস এবং প্ল্যাটফর্মে প্রত্যাশিতভাবে কাজ করে, কিন্তু প্রকৃতপক্ষে বাজারে প্রতিটি মোবাইল ডিভাইসে পরীক্ষা করা আমাদের বেশিরভাগের জন্য অব্যবহারিক।
অনেক পরীক্ষক যারা প্রতিক্রিয়াশীল ওয়েব ডিজাইন পরীক্ষা করা শুরু করে তারা সাধারণত ভিউপোর্ট সাইজ ফিট করার জন্য ব্রাউজার উইন্ডোর আকার পরিবর্তন করে শুরু করে মোবাইল ফোন, ট্যাবলেট এবং ডেস্কটপ। এই পদ্ধতিটি সাধারণত বিভিন্ন ভিউয়িং পোর্টে একটি ওয়েবসাইটকে দ্রুত পরিদর্শন করার জন্য উপযুক্ত এবং আমরা যখন ব্রাউজার উইন্ডো কমাতে বা বড় করি তখন আমাদের অন্তর্নিহিত ডিসপ্লে সমস্যাগুলি সনাক্ত করতে সাহায্য করে।
যাইহোক, আসল মোবাইল ডিভাইসে পরীক্ষা করা সম্পূর্ণ ভিন্ন অভিজ্ঞতা।
এমুলেটর ব্যবহার করে
একটি মোবাইল এমুলেটর হল একটি ওয়েব-ভিত্তিক সিমুলেশন যা ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলি কীভাবে মোবাইল পরিবেশে প্রদর্শন করবে এবং কাজ করবে।
যদিও এমুলেটরগুলি আপনাকে সঠিক পরীক্ষার সরঞ্জামগুলি সরবরাহ করতে পারে না যা আপনার প্রয়োজন হবে, তারা এখনও একটি ওয়েবসাইটের উচ্চ-স্তরের কার্যকারিতা পরীক্ষা করার জন্য একটি সাশ্রয়ী সমাধান।
Google DevTools
DevTools-এ গুগল ক্রোমডিভাইস মোড নামে একটি বৈশিষ্ট্য রয়েছে যা প্রতিক্রিয়াশীল প্রকল্পগুলি পরীক্ষা এবং ডিবাগ করার জন্য দরকারী সরঞ্জামগুলির সাথে লোড করা হয়েছে।
অন্যান্য রেসপন্সিভ ডিজাইন টেস্টিং টুলের বিপরীতে যেগুলি কেবল আপনার স্ক্রীনের আকার পরিবর্তন করে, এই টুলটি আসলে মোবাইল ডিভাইসের অভিজ্ঞতাকে অনুকরণ করে, বিশেষ করে আপনার ওয়েব ব্রাউজারের মধ্যেই ট্যাপ এবং স্ক্রল করার মত স্পর্শ মিথস্ক্রিয়াগুলি।
কিছু সাধারণ নিয়মপ্রতিক্রিয়াশীল ওয়েব ডিজাইন পরীক্ষা করা:
ব্রাউজার উইন্ডো সঙ্কুচিত এবং প্রসারিত হওয়ার সাথে সাথে বা আপনি আপনার মোবাইল ডিভাইসটি ঘোরানোর সাথে সাথে মডিউলগুলির অবস্থান পরীক্ষা করুন৷ থেকে স্যুইচ করার সময় বিভিন্ন মডিউল অদৃশ্য হয়ে যেতে পারে ডেস্কটপ কম্পিউটারমোবাইলে, কিন্তু নিশ্চিত করুন যে আপনি ঠিক জানেন কোন মডিউল কোন ভিউপোর্টে উপস্থিত হওয়া উচিত।
উপসংহারে
আপনার ওয়েব অ্যাপ্লিকেশন কিভাবে ব্যবহার করা হচ্ছে খুঁজে বের করুন. আপনি পেতে পারেন বিশাল পরিমাণআপনার গ্রাহকরা আপনার ওয়েবসাইট অ্যাক্সেস করার জন্য কোন ডিভাইস ব্যবহার করেন তা দেখতে Google Analytics টুল থেকে তথ্য। মৌলিক চেক এবং উচ্চ-স্তরের কার্যকরী পরীক্ষা সম্পাদন করতে স্বয়ংক্রিয় সরঞ্জাম এবং এমুলেটর ব্যবহার করুন এবং এটিকে প্রকৃত ম্যানুয়াল ডিভাইস পরীক্ষার সাথে একত্রিত করুন।
ওয়েব টেকনোলজির বিকাশের সাথে সাথে ওয়েব ডেভেলপমেন্টের প্রয়োজনীয়তাও বৃদ্ধি পায়। ওয়েব ডেভেলপার, লেআউট ডিজাইনার বা আজকে বলা হয় ফ্রন্টএন্ড ডেভেলপাররা সবচেয়ে বেশি চাপ অনুভব করে।
এই নিবন্ধে আমরা অভিযোজিত বিন্যাস সম্পর্কে একটু কথা বলব, যেহেতু এই "কৌশল" এখন খুব ব্যয়বহুল। যখন অভিযোজিত বিন্যাসের কথা আসে, যেকোন স্তরের লেআউট ডিজাইনাররা গ্রাহকদের বা প্রকল্প পরিচালকদের দিকে তাকায়, এটিকে হালকাভাবে বলতে, রাগের সাথে, কারণ তারা বুঝতে পারে এটি কতটা কঠিন।
অনেক লোক নমনীয় লেআউটের সাথে অভিযোজিত বিন্যাসকে বিভ্রান্ত করতে শুরু করে এটি নবজাতক লেআউট ডিজাইনারদের একটি খুব সাধারণ ভুল। আপনি জিজ্ঞাসা কি পার্থক্য?
আসুন প্রথমে, যাতে এটি আপনার কাছে পরিষ্কার হয় এবং কথা বলতে, সমস্ত বিন্দু রাখুন এবং সেখানে কী ধরণের লেআউট রয়েছে তা দেখুন।
লেআউট 4 ধরনের আছে:
আসুন আরো বিস্তারিতভাবে সব ধরনের বিবেচনা করা যাক।
1. স্থির বিন্যাস
ব্লকগুলি তাদের প্রস্থ পরিবর্তন করে না। কম-রেজোলিউশন মনিটরে, একটি অনুভূমিক স্ক্রোল বার প্রদর্শিত হয়।
#temnyi, #svetlyi (প্রস্থ: 440px; )
2. রাবার লেআউট
ব্রাউজার উইন্ডোর আকারের উপর নির্ভর করে ব্লকগুলি তাদের প্রস্থ পরিবর্তন করে। এটি সর্বোচ্চ এবং সর্বনিম্ন মান (সর্বোচ্চ-প্রস্থ সম্পত্তি) নিতে পারে। কিন্তু আপনি 50% থেকে 50% থেকে 100% করতে পারবেন না কারণ স্ক্রীন ছোট হয়ে যায়।
#temnyi, #svetlyi (প্রস্থ: 50%;)
3. অভিযোজিত বিন্যাস
@media বা স্ক্রিপ্ট ব্যবহার করে বাস্তবায়িত। নির্দিষ্ট পরিচিত ডিভাইসের জন্য কাস্টমাইজড (320, 768, 1024, ইত্যাদি)। যেকোন পরিবর্তন ঘটবে ঝাঁকুনিতে, নির্দিষ্ট মাত্রার একটিতে পৌঁছানোর পর। জন্য অবশ্যই উপযুক্ত
#temnyi, #svetlyi ( প্রস্থ: 430px; ) @media (সর্বোচ্চ-প্রস্থ: 1220px) ( #temnyi, #svetlyi (প্রস্থ: 380px; ) ) @media (সর্বোচ্চ-প্রস্থ: 1120px) ( #temnyi, #svetly) : 325px; ) ) @media (সর্বোচ্চ-প্রস্থ: 680px) ( #temnyi, #svetlyi (প্রস্থ: 200px; ) )
4. প্রতিক্রিয়াশীল লেআউট
এটি তরল এবং অভিযোজিত বিন্যাসের সংমিশ্রণ। বাস্তবায়ন করা সবচেয়ে কঠিন। তবে ফলাফলটি সবচেয়ে গ্রহণযোগ্য। এটা বলা নিরাপদ যে সাইটটি যেকোনো ডিভাইসে মানিয়ে নেবে।
#temnyi, #svetlyi ( প্রস্থ: 50%; ) @media (সর্বোচ্চ-প্রস্থ: 1006px) ( #temnyi, #svetlyi (প্রস্থ: 100%; ) )
তাই আমরা ৪ ধরনের ওয়েবসাইট লেআউটের কথা বললাম। এখন সময় এসেছে আমাদের অলৌকিক অভিযোজিত বিন্যাস স্ক্রিপ্টের জন্য। আমি আশা করি আমার কিছু ব্যাখ্যা করার দরকার নেই, স্ক্রিপ্টটি বেশ সহজ, আমরা কেবল বলছি যে আপনি যখন পরিবর্তন করবেন তখন কিছু ব্লক কোথাও মিশ্রিত হবে এবং এটিই। অবশ্যই এর মাধ্যমেও করা যেতে পারে CSS শৈলী, তবে আপনাকে সমস্ত পদ্ধতি জানতে হবে কখনও কখনও কিছু জায়গায় কিছু কাজ করবে না এবং কিছু ঠিক হবে।
অভিযোজিত বিন্যাস স্ক্রিপ্ট:
/* আসুন একটি ভেরিয়েবল তৈরি করি যাতে আপনি কোডে তাদের সুবিধাজনক ব্যবহারের জন্য monogest ক্লাস রাখতে পারেন।< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
অর্থাৎ, এখানে এটি একবার তাদের সনাক্ত করে এবং এটিই, এবং প্রতিটি নমুনার আগে নয়! এটি একটি দরকারী বৈশিষ্ট্য */ var my = ( উইন্ডো: $(উইন্ডো));
/*আসলে ফাংশন নিজেই*/ $(window).resize(function() ( /*একটি ভেরিয়েবল যা উইন্ডোর প্রস্থ নির্ধারণ করে এবং এটিকে প্রস্থ ভেরিয়েবলে রাখে*/ var width = my.window.width( );
সেটাই। আপনার যদি কোন প্রশ্ন থাকে, মন্তব্যে লিখুন, যান
লেখকের কাছ থেকে: "এই ব্রাউজারটির আকার পরিবর্তন করা বন্ধ করুন, এটি শীঘ্রই মুছে ফেলা হবে!" কত ঘন ঘন আপনি এই শুনতে? ভাল, ঠিক আছে, প্রায়শই না, তবে আপনি যদি প্রতিক্রিয়াশীল ওয়েবসাইটগুলি বিকাশ করেন তবে আপনি জানেন যে আমি কী সম্পর্কে কথা বলছি: আপনি যতবার DOM বা CSS সম্পাদনা করেন, আপনি ব্রাউজারের প্রান্তটি সামনে পিছনে টেনে নিয়ে যাচ্ছেন, পরিবর্তনগুলি পরীক্ষা করছেন এবং ভুল খুঁজছেন.
সাধারণভাবে, এই প্রচেষ্টাগুলির বেশিরভাগই বিভিন্ন ডিভাইসের স্ক্রীনের আকার অনুকরণ করার একটি প্রচেষ্টা। আপনি যদি এন্টারপ্রাইজ ডেভেলপমেন্ট করছেন, তাহলে আপনার কাছে পরীক্ষা করার জন্য সম্ভবত অনেক কোম্পানি-প্রদত্ত ডিভাইস আছে। আমি যেখানে কাজ করি সেখানে আমাদের আইপ্যাড, আইফোন, একটি বা দুটি অন্যান্য ট্যাবলেট, ল্যাপটপ এবং ডেস্কটপ রয়েছে। আপনার যদি সেই বিলাসিতা না থাকে তবে আপনার হাতে যা আছে তা ব্যবহার করতে হবে।: Kindle এবং Nexus 7. আমি আমার ফ্রিল্যান্স উন্নয়ন পরীক্ষা করতে এই ডিভাইসগুলি ব্যবহার করি, কিন্তু এটা স্পষ্ট যে এটি একটি সম্পূর্ণ নির্বাচন নয়৷ মোটেই না iOS ডিভাইস, এবং যখন আমাকে একজন প্রাথমিক গ্রহণকারী হিসাবে বিবেচনা করা হয়, আমি প্রতিটি নতুন ফোন/ট্যাবলেট/ট্যাবলেট বিক্রি হওয়ার সাথে সাথে কেনার পরিকল্পনা করি না।
তাহলে একজন বিকাশকারীর কি করা উচিত? সৌভাগ্যবশত, ব্রাউজার-ভিত্তিক ক্রমবর্ধমান সংখ্যক সরঞ্জাম রয়েছে যা বিভিন্ন ডিভাইসের স্ক্রীনের আকার অনুকরণ করে। বিভিন্ন সরঞ্জাম, অবশ্যই, বিভিন্ন বৈশিষ্ট্যের সেট এবং দক্ষতার বিভিন্ন স্তরের সাথে আসে। আমরা এখানে তাদের কিছু তাকান হবে.
পরীক্ষার উদ্দেশ্যে, আমি আমার তৈরি করা প্রথম সত্যিকারের প্রতিক্রিয়াশীল ওয়েবসাইট, PajamasOnYourFeet.com নিয়েছি। এটি ব্রাউনি HTML5 টেমপ্লেটের উপর ভিত্তি করে, খুব উদারভাবে এবং অবাধে EGrappler-এ বিকাশকারী সম্প্রদায়কে সরবরাহ করা হয়েছে।
আমি কি প্রতিক্রিয়াশীল?আমি কি প্রতিক্রিয়াশীল? - এটি চারটি ভিন্ন ডিভাইসে কীভাবে প্রদর্শিত হবে তার পরিপ্রেক্ষিতে আপনার সাইটের সম্পূর্ণ সহজ, তাত্ক্ষণিক পূর্বরূপ৷ চারটিই iOS, এবং বিকাশকারী ওয়েবসাইটে তার পছন্দ ব্যাখ্যা করেছেন। এটি কোনো নিয়ন্ত্রণ বা নির্বাচন অফার করে না, শুধুমাত্র একটি খুব সহজ এবং মার্জিত প্রদর্শন। উইন্ডোর মাত্রা দেখুন:
ডেস্কটপ - 1600 x 992px, স্কেল দ্বারা কমছে (0.3181)
ল্যাপটপ - 1280 x 802px, স্কেলে কমছে (0.277)
ট্যাবলেট - 768 x 1024px, স্কেল দ্বারা হ্রাস (0.219)
মোবাইল - 320 x 480px, স্কেল দ্বারা হ্রাস (0.219)
বিকাশকারীকে উদ্ধৃত করতে: "এটি একটি পরীক্ষার সরঞ্জাম নয়, এটি বাস্তব ডিভাইসে এটি করা খুব গুরুত্বপূর্ণ। তবে এটি দ্রুত স্ক্রিনশট নেওয়ার জন্য একটি টুল (আমার জন্য) এবং ক্লায়েন্ট মিটিংয়ে আপনি যা বোঝাতে চেয়েছিলেন তা "ড্রিল ডাউন" করার একটি ভিজ্যুয়াল সুযোগ প্রদান করে৷"
deviceponsive কি আমি প্রতিক্রিয়াশীল সাইটের অনুরূপ? যেটি আপনার সাইটকে সহজ এবং সুন্দরভাবে প্রদর্শন করে, কিন্তু ডিভাইসের ক্ষেত্রে কোনো নিয়ন্ত্রণ বা উপলব্ধ বিকল্প নেই। একটি দীর্ঘ পৃষ্ঠায় তাদের সব একযোগে দেখানো হয়. এটির একটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে - আপনি এটির পটভূমির রঙ সম্পাদনা করে এবং আপনার নিজস্ব লোগো সন্নিবেশ করে শিরোনামটি সংশোধন করতে পারেন এবং তারপরে "এটি মুদ্রণ করুন"৷ এইভাবে, এক অর্থে, ক্লায়েন্টকে স্ক্রিনশট দেখানোর সময় আপনি আপনার সাইটকে ব্র্যান্ড করতে পারেন। এই সাইটে সিমুলেটেড ডিভাইস এবং স্ক্রিনের মাপ:
ম্যাকবুক - 1280 x 800
iPad (পোর্ট্রেট) - 768 x 1024
iPad (ল্যান্ডস্কেপ) - 1024 x 768
কিন্ডল (পোর্ট্রেট) - 600 x 1024
কিন্ডল (ল্যান্ডস্কেপ) - 1024 x 600
iPhone (পোর্ট্রেট ওরিয়েন্টেশন) - 320 x 480
iPhone (ল্যান্ডস্কেপ) - 480 x 320
গ্যালাক্সি (পোর্ট্রেট) - 240 x 320
গ্যালাক্সি (ল্যান্ডস্কেপ) - 320 x 240
বেশিরভাগ অনুরূপ সরঞ্জামগুলির মতো, স্ক্রোল বারগুলি ছোট ডিভাইসগুলিতে উপস্থিত হয়। IN বাস্তব ডিভাইসতারা প্রদর্শিত হবে না, কিন্তু আপনি একটি নন-টাচ ডিভাইসে পরীক্ষার দৃশ্য স্ক্রোল করতে সক্ষম হতে কিছু ছাড় দিতে হবে।
ডিভাইসপন্সিভের মতো, প্রতিক্রিয়াশীল পরীক্ষা আপনার সাইটটিকে একাধিক ডিভাইসে প্রদর্শন করে, কিন্তু সেগুলিকে একবারে এক পৃষ্ঠায় দেখানোর পরিবর্তে, আপনি পৃষ্ঠার শীর্ষে থাকা একটি সাধারণ মেনু থেকে কোন ডিভাইসটি দেখতে চান তা বেছে নিন। একটি মাঝারি আকারের ল্যাপটপে এই সাইটটি ব্রাউজ করে, আমি দেখেছি যে পৃষ্ঠাটি সঙ্কুচিত করা দুর্দান্ত কাজ করে, আমি যে ডিভাইসটি পরীক্ষা করছি তার উইন্ডোর ভিতরে আপনাকে পুরো সাইটটি দেখতে দেয়৷
এখানে তেরোটি ভিন্ন ভিউইং উইন্ডো পাওয়া যায়, থেকে বড় মনিটরতথাকথিত "ক্র্যাপি অ্যান্ড্রয়েড"-এ ডেস্কটপ কম্পিউটার (ন্যায্যভাবে বলতে গেলে, তাদের "" নামে একটি বিকল্পও রয়েছে অ্যান্ড্রয়েড ভালো"(Niceer Android)
আবার, ফায়ারফক্স এই সাইটে একটু হোঁচট খায়। স্ক্রিনশটে লক্ষ্য করুন - সবুজ শিরোনাম এবং একটি সাদা ব্যাকগ্রাউন্ড সহ বিষয়বস্তু অঞ্চলের মধ্যে - শুধুমাত্র একটি নীল বার রয়েছে যেখানে চিত্র স্লাইডারটি উপস্থিত হওয়া উচিত৷
এটি আগের দুটির সাথে খুব মিল, এবং শুধুমাত্র যে জিনিসটি প্রতিক্রিয়াশীল সেট করে তা হল একটি ডিভাইস থেকে অন্য ডিভাইসে ডিসপ্লের মসৃণ অ্যানিমেশন, সেইসাথে একটি স্বচ্ছ ওভারলে দেখায় যে সাইটের রিয়েল এস্টেট ভিউপোর্ট থেকে বেরিয়ে যাচ্ছে .
এখানে শুধুমাত্র উপলব্ধ ডিভাইস বিকল্পগুলি হল স্বয়ংক্রিয়, যা আপনার ব্রাউজার উইন্ডোটি পূরণ করে, যদি আপনি এটিতে ক্লিক করেন তবে আপনি এটি দেখতে পাবেন এমন সাইটটি দেখায়: ডেস্কটপ; ট্যাবলেট (ল্যান্ডস্কেপ অভিযোজন); ট্যাবলেট (প্রতিকৃতি অভিযোজন); স্মার্টফোন (ল্যান্ডস্কেপ ওরিয়েন্টেশন) এবং স্মার্টফোন (পোর্ট্রেট ওরিয়েন্টেশন), পিক্সেলের মাত্রা দেওয়া নেই।
আবারও, বিভিন্ন বৈশিষ্ট্য এবং বিকল্পগুলি অন্যান্য সাইটগুলি থেকে আলাদা করে স্ক্রিনকোয়েরি সেট করে৷ পোর্ট্রেট এবং এর মধ্যে স্যুইচ করার জন্য একটি পৃথক উপাদান সহ 14টি ফোন এবং 12টি ট্যাবলেট ডিভাইস রয়েছে আড়াআড়ি অভিযোজন. এগুলি একটি সংখ্যাযুক্ত পিক্সেল গ্রিডে প্রদর্শিত হয়, পরীক্ষা প্রদর্শনের নীচে ডানদিকে দেখানো মাত্রা সহ। ডিসপ্লের প্রান্তগুলি টেনে আনা যায় তাই আপনি কাস্টম আকারগুলি পরীক্ষা করতে পারেন৷ টেস্টিং এলাকায় টেনে আনুন বা ক্লিক করুন এবং পটভূমিটি ধূসর হয়ে যাবে, কম বিশৃঙ্খল চেহারা সহ।
আকর্ষণীয় বৈশিষ্ট্যএই সাইটের - একাধিক ডিভাইসের জন্য একটি "ট্রু ভিউ" বিকল্প রয়েছে যা আপনার সাইটটিকে সেই ডিভাইসের জন্য উপযুক্ত ভিউতে মোড়ানো দেখায় ক্রোম ব্রাউজার. দুর্ভাগ্যবশত, এবং আমি ইতিমধ্যেই এটিতে অভ্যস্ত, ফায়ারফক্স পরীক্ষার সাইটের চিত্র স্লাইডার প্রদর্শন করতে অক্ষম। চিন্তা করবেন না, ব্রাউজারগুলির ক্ষেত্রে আমি সত্যিই ফায়ারফক্স পছন্দ করি, কিন্তু ভাগ্যক্রমে আমাদের কাছে বিকল্প রয়েছে।
Screenfly সত্যিই ব্যবহারযোগ্যতা ফ্যাক্টর বৃদ্ধি. এটি ট্যাবলেটের চেয়ে বড় নয়টি ডিভাইস অফার করে, একটি 10-ইঞ্চি ল্যাপটপ থেকে একটি 24-ইঞ্চি ডেস্কটপ, পাঁচটি ট্যাবলেট, নয়টি স্মার্টফোন, তিনটি টিভি আকার এবং একটি কাস্টম স্ক্রিন আকারের বিকল্প। আপনি যে কোনো বিকল্প ব্যবহার করে প্রতিকৃতি বা ল্যান্ডস্কেপে ঘোরানো যেতে পারে স্বতন্ত্র উপাদানমেনু নিয়ন্ত্রণ। আপনি স্ক্রল করার অনুমতি দেবেন কি না তা চয়ন করতে পারেন এবং একটি বোতামের এক ক্লিকে একটি শেয়ারযোগ্য লিঙ্ক তৈরি করতে পারেন৷
সাইটটি যেভাবে পিক্সেল আকারের তথ্য উপস্থাপন করে তাতে সক্রিয়ভাবে কার্যকর। মেনুতে প্রতিটি ডিভাইস একটি নাম এবং পিক্সেল মাত্রা সহ দেখানো হয়, আপনার নিজের ব্রাউজার উইন্ডোর আকারটি উইন্ডোর উপরের ডানদিকে কোণায় দেখানো হয় এবং নির্বাচিত বিকল্পের মাত্রাগুলি প্রদর্শনের নীচে ফুটারে প্রদর্শিত হয় সাইটের URL পরীক্ষা করা হচ্ছে। এই ছোট বৈশিষ্ট্যটি স্ক্রিনশট নথিভুক্ত করা এবং ক্লায়েন্টদের সাথে তথ্য ভাগ করা সহজ করে তোলে।
উপরের সমস্তগুলি ইতিমধ্যেই এটিকে একটি আদর্শ সরঞ্জাম তৈরি করবে, তবে স্ক্রিনফ্লাই বিকাশকারীরা এটিকে সহজ করার একটি সুযোগ খুঁজে পেয়েছে উচ্চ শ্রেণীএবং প্রক্সি সম্পত্তি প্রদান. তাদের ওয়েবসাইট থেকে উদ্ধৃতি: "আপনি তাদের ওয়েবসাইট দেখার সময় স্ক্রিনফ্লাই ডিভাইসের ছদ্মবেশী করার জন্য একটি প্রক্সি সার্ভার ব্যবহার করতে পারে। প্রক্সি আপনার নির্বাচিত ডিভাইসগুলির ব্যবহারকারী এজেন্ট স্ট্রিংকে অনুকরণ করে, কিন্তু সেই ডিভাইসগুলির আচরণ নয়।" এখানে কভার করা অন্যান্য সমস্ত টুল একচেটিয়াভাবে CSS এর সাথে ডিল করে। স্ক্রিনফ্লাই একমাত্র যা ব্যবহারকারী এজেন্ট স্ট্রিং এর উপর ভিত্তি করে পরীক্ষার অনুমতি দেয়।
এইভাবে পরীক্ষা করে আমি বিদ্যমান একটি সাইট দিয়ে তৈরি করেছি মোবাইল সংস্করণ, আমি বলতে পারি যে ফলাফল খুব ভাল ছিল. আমি যেমন আশা করেছিলাম ঠিক তেমনই সবকিছু প্রদর্শিত হয়েছে এবং বৈশিষ্ট্যগুলি পরীক্ষাযোগ্য ছিল। এটি অবশ্যই বলা উচিত যে ব্যবহারকারী এজেন্ট স্ট্রিংগুলি পরীক্ষা করা ঐতিহ্যগত হয়ে উঠেছে, তবে এই সাইটটি অনেক আগে তৈরি করা হয়েছিল, এবং প্রক্সি সম্পত্তি প্রকৃতপক্ষে এটিতে একটি খুব দরকারী সংযোজন হিসাবে পরিণত হয়েছিল।
সুতরাং, আপনি দেখতে পাচ্ছেন যে প্রতিক্রিয়াশীল ওয়েবসাইটগুলি পরীক্ষা করার জন্য প্রচুর সংস্থান উপলব্ধ রয়েছে। তারা অনন্য বৈশিষ্ট্য পৃথক; আপনি কোন সাইটগুলি ব্যবহার করবেন তা আপনার ব্যক্তিগত পছন্দ এবং প্রয়োজনীয়তার উপর নির্ভর করবে এবং আমি আপনাকে সেগুলি অন্বেষণ এবং পরীক্ষা করতে উত্সাহিত করার চেষ্টা করি৷ আরো আমরা ডেভেলপারদের সত্যিই আছে দরকারী টুল, ভাল.
ফ্রেমওয়ার্ক, যেমন বা, যা পৃষ্ঠা বিন্যাসকে ব্যাপকভাবে সহজতর করে এবং গতি বাড়ায়।
সমস্ত ডিভাইস এবং মনিটর এক্সটেনশনে একটি ওয়েব পৃষ্ঠার চমৎকার প্রদর্শন বোঝায়। সম্ভবত, প্রতিটি লেআউট ডিজাইনারের তাদের লেআউট পরীক্ষা করার জন্য সমস্ত সম্ভাব্য প্রদর্শন এক্সটেনশন সহ ডিভাইসগুলির একটি সম্পূর্ণ সেট নেই। এটি আশ্চর্যজনক নয়, কারণ প্রযুক্তি আজকাল সস্তা নয়।
তাই। মোবাইল ফোন এবং ট্যাবলেটের পাহাড় কেনা একটি বিকল্প নয় - আমরা ভেঙে যাব। কি করতে হবে? এই কাজের জন্য, অভিযোজিত ওয়েবসাইটগুলি পরীক্ষা করার জন্য পরিষেবাগুলি তৈরি করা হয়েছে। তাদের অপারেশন নীতি খুব সহজ। প্রায়শই একটি নির্দিষ্ট আকারের একটি ফ্রেম থাকে যেখানে পৃষ্ঠাটি খোলে। যখন দেখার সময় প্রভাব প্রায় একই মোবাইল ডিভাইস. আমি নোট করতে চাই যে পরিষেবাটি সর্বদা সঠিকভাবে একটি ফোন বা ট্যাবলেটে পৃষ্ঠার প্রদর্শন দেখাবে না। কোডিং করার সময়, আপনার পরিষেবাগুলি ব্যবহার করে পরীক্ষা করা উচিত, তবে সমাপ্তির পরে, যদি সম্ভব হয়, সবচেয়ে সাধারণ ডিভাইসগুলিতে পরীক্ষা করুন।
তাই। আপনার মনোযোগের জন্য সেরা সরঞ্জামঅভিযোজিত ওয়েবসাইট পরীক্ষার জন্য।
Adobe থেকে প্রতিক্রিয়াশীল ওয়েবসাইট পরীক্ষা করার জন্য একটি টুল। এটি ব্যবহার করার জন্য আপনাকে এটি আপনার কম্পিউটারে ইনস্টল করতে হবে।
প্রোগ্রামটি আপনাকে WIFI এর মাধ্যমে আপনার ডিভাইসগুলিকে সিঙ্ক্রোনাইজ করতে এবং আপনার ডিভাইসে প্রদর্শিত হবে বলে সাইটটি দেখতে দেয়৷ চালু এই মুহূর্তেনিম্নলিখিত অপারেটিং সিস্টেম সহ ডিভাইসগুলি সমর্থিত: iOS, Android, Kindle Fire।