সংস্করণ ৩.০: একটি পেজ বিল্ডার কীভাবে কাজ করা উচিত তা নতুন করে ভাবনা

আমরা জনসাধারণের জন্য Page Builder Sandwich উন্মুক্ত করার পর ১০ মাস কেটে গেছে। আমাদের এখন প্রায় ৬,০০০ সক্রিয় ইনস্টল রয়েছে এবং এটি আমাদের জন্য বেশ বড় একটি অর্জন। এর কারণে আমরা প্রচুর প্রতিক্রিয়াও পেয়েছি, ভালো এবং মন্দ উভয়ই। তবে সামগ্রিক মতামত হলো, বাজারে থাকা অন্যান্য পেজ বিল্ডারের তুলনায় এটি দিয়ে লেআউট তৈরি করা এবং কন্টেন্ট সাজানো কতটা সহজ তা মানুষ উপভোগ করছেন।

আমরা যে পরিমাণ প্রতিক্রিয়া পেয়েছি তার একটি বড় অংশ ছিল নতুন ফিচারের অনুরোধ, এবং গত কয়েক মাসে আমরা সেই ফিচারগুলোর অনেকগুলো যুক্ত করেছি। কিন্তু আমরা এটি করতে থাকার সাথে সাথে প্রক্রিয়াটিতে ধীরে ধীরে ইউজার ইন্টারফেসেও পরিবর্তন আনতে শুরু করেছিলাম। এবং ফলস্বরূপ, আমরা ব্যবহারকারীর অভিজ্ঞতাও পরিবর্তন করছিলাম… খারাপের দিকে। তবে এটি এমন একটি পর্যায়ে এসে পৌঁছেছিল যেখানে ইন্টারফেসটি নিয়ে আমাদের নতুন করে ভাবার প্রয়োজন হয়ে পড়েছিল, কারণ এটি আর আগের মতো মসৃণভাবে কাজ করছিল না এবং বিভিন্ন ফিচারগুলোও এর সাথে সঠিকভাবে মানানসই হচ্ছিল না।

অকার্যকর ইন্টারফেস

PBS-এর পূর্ববর্তী সংস্করণগুলোতে আমরা চেয়েছিলাম সবকিছু যেন বাটনের আকারে থাকে। কেন? কারণ বাটন ব্যবহার করা সহজ। আপনি কেবল… সেগুলোতে ক্লিক করবেন। ইন্সপেক্টরের (উপরের ছবিতে থাকা সাইডবার) পুরোনো সংস্করণগুলোতে, একটি বাটনে ক্লিক করলে মান বৃদ্ধি পেত, তারপর shift চেপে বাটনে ক্লিক করলে তা কমে যেত। এটা বেশ সহজ শোনাচ্ছে। কিন্তু ক্যারোজেল, ট্যাব, ম্যাপ এবং অন্যান্য নতুন উপাদান ও ফিচার যুক্ত হওয়ার পর, সেই সমস্ত বাটনগুলো বিভিন্ন ডিজাইনের ভিন্ন ভিন্ন আইকনের এক জগাখিচুড়ি হয়ে দাঁড়ায় এবং একটি আকর্ষণীয় ইন্টারফেসের চেয়ে বরং হায়ারোগ্লিফিক লিপির মতো দেখতে লাগছিল। অভিজ্ঞ ব্যবহারকারীদের জন্য এটি কোনো সমস্যা ছিল না, তবে আপনি যদি PBS-এ নতুন হন তবে এটি দেখতে বেশ ভীতিজনক ছিল।

এরপর, ইন্সপেক্টরে কয়েকটি সমস্যা দেখা দিতে শুরু করে। মূল ভাবনাটি ছিল ইন্সপেক্টরের ভেতরে সবকিছু সহজ এবং সহজলভ্য করা। আর সবকিছু বলতে আমি বুঝিয়েছি সবকিছু – টেক্সটকে শিরোনামে রূপান্তর করা থেকে শুরু করে ব্যাকগ্রাউন্ডের রঙ, ফন্টের রঙ পরিবর্তন ইত্যাদি যা কিছুই আপনি চান না কেন। তবে এর বর্তমান অবস্থায়, ইন্সপেক্টরে এখন এমন অনেক অপশন রয়েছে যার জন্য আপনাকে ক্রমাগত মাউসের চাকা ঘুরিয়ে উপরে ও নিচে স্ক্রোল করতে হবে। ব্যবহারকারীদের জন্য পূর্বে আমি যেমন ইন্সপেক্টর তৈরি করতে চেয়েছিলাম এটি তার চেয়ে বেশ আলাদা।

সর্বশেষে, আমরা সম্প্রতি চালু করেছি আপনার প্রিয় প্লাগইনগুলোর জন্য শর্টকোড ম্যাপিং. আপনার শর্টকোড সম্পাদনার অভিজ্ঞতা আরও আনন্দদায়ক করার জন্য এই ফিচারটির খাতিরে আমাদের টেক্সট ফিল্ড, নাম্বার স্লাইডার, চেকবক্স এবং অতিরিক্ত নতুন ধরনের অপশন তৈরি করতে হয়েছিল। প্রথমদিকে এটি একটি চমৎকার ধারণা ছিল, এবং হ্যাঁ, এটি আপনার জন্য শর্টকোড পরিচালনা করা সহজ করে তুলেছিল। কিন্তু আবারও, এই ফিচারটি আমাদের “কেবলমাত্র বাটন” নির্ভর ইন্টারফেস থেকে বিচ্যুত হয়ে পড়েছিল। পেছনের দিকে তাকালে বোঝা যায়, শর্টকোড অ্যাট্রিবিউট পরিবর্তনের জন্য শুধুমাত্র বাটন ব্যবহার করা আসলেই অসম্ভব ছিল। এখন, সর্বশেষ সংস্করণে, আমাদের কাছে ২ ধরণের নিয়ন্ত্রণ দাঁড়িয়েছে: বাটন এবং শর্টকোড ফিল্ড।

আরও কয়েকটি কারণ ছিল যা আমাদের এই সিদ্ধান্তে পৌঁছাতে বাধ্য করেছিল যে আমাদের ইন্টারফেসটি আর কার্যকর ছিল না (বা আমাদের প্রয়োজনের সাথে উপযুক্ত ছিল না), তবে উপরের পয়েন্টগুলোই প্রধান। তবে একটি বিষয় সর্বদা নিশ্চিত ছিল: আমরা জানতাম যে ইন্টারফেসটি আপডেট করতেই হবে।

আদর্শগতভাবে একটি পেজ বিল্ডারের কীভাবে কাজ করা উচিত তা নির্ধারণ করা

কোনো কিছুতে দ্রুত ঝাঁপিয়ে পড়ে তাৎক্ষণিক পরিবর্তনের পরিবর্তে, পেজ বিল্ডারের সামগ্রিক অভিজ্ঞতাটি দেখার জন্য আমরা একশো ধাপ পিছিয়ে গেলাম। আমরা ইন্টারফেসে নতুন প্রাণ ফিরিয়ে আনতে চেয়েছিলাম। সত্যি বলতে, আমরা প্রতি বছর এটি পুনরায় তৈরি করতে থাকতে চাইনি। এটি ক্লান্তিকর এবং অবশ্যই ওয়ার্ডপ্রেস সম্প্রদায়ের কাছে কোনো তাৎপর্যপূর্ণ সাহায্য নিয়ে আসে না। এবার, আমরা ধীরে ধীরে এবং সতর্কতার সাথে সবকিছু করার সিদ্ধান্ত নিয়েছি। আমরা Page Builder Sandwich-এর প্রতিটি দিক এবং কী এটিকে একটি ভালো পেজ বিল্ডার করে তোলে তা বিশ্লেষণ করেছি, এবং অবশেষে সামগ্রিক সম্পাদনার অভিজ্ঞতাটিকে কয়েকটি মূল ধারণার রূপ দিয়েছি।

অপরিহার্য ধারণা #১: বিষয়বস্তু সম্পাদনা করার জন্য সরাসরি আপনার কন্টেন্টে টাইপ করা

পেজ বিল্ডার ইনস্টল করার অন্যতম প্রধান কারণ হলো ওয়ার্ডপ্রেসের ব্যাকএন্ড টেক্সট এডিটরের সীমাবদ্ধতা থেকে বেরিয়ে আসা। এমন নয় যে ব্যাকএন্ড এডিটর ভালো নয়, তবে আপনার ওয়েবপেজ তৈরি করার সময়, এটি অবিলম্বে আপনার সাইট ভিজিটরদের কাছে আপনার ওয়েবপেজটি দেখতে কেমন লাগবে তা দেখায় না, বা এক-কলামের লেআউটের বাইরে আপনার কন্টেন্ট সাজানোর সুযোগও দেয় না। আপনি সেখানে কেবল আপনার টেক্সট এবং কিছু ছবি দেখতে পান, তবে বিস্তারিত উপাদানগুলোর (যেমন: কন্টাক্ট ফর্ম) কোনোটিই নয়। আপনি শর্টকোড যোগ করতে পারেন, হ্যাঁ, তবে সেগুলো তাদের রেন্ডার করা আকারে দেখা যাবে না*।

* এটি সমাধানের জন্য অন্যদের দ্বারা তৈরি প্লাগইন রয়েছে যেমন Shortcake UI, তবে সেটি ভিন্ন বিষয়।

সেখানেই ফ্রন্টএন্ড পেজ বিল্ডারগুলোর আগমন ঘটে। তারা সম্পাদনার অভিজ্ঞতাকে ব্যাকএন্ড থেকে বের করে ফ্রন্টএন্ডে নিয়ে আসে, যেখানে আপনার দর্শকরা যেভাবে সাইটটি বাস্তবে দেখতে পাবেন, আপনি সেভাবেই সাইটটি সম্পাদনা করেন. পিপিন যেভাবে বলতেন: আপনি যা দেখছেন, ঠিক তা-ই পাচ্ছেন (WYSIWYG)।

ফ্রন্টএন্ড এডিটর হওয়ার আরেকটি ভালো দিক হলো এটি আপনাকে সরাসরি আপনার টেক্সট সম্পাদনা করার সুযোগ দেয়। শিরোনাম এবং অনুচ্ছেদগুলোতে সরাসরি টাইপ করা ওয়েবসাইট তৈরির ক্ষেত্রে সাধারণ ওয়ার্ড প্রসেসর ব্যবহারের মতো সহজ অনুভূতি দেয়। বাটন এবং ট্যাবের লেবেলগুলোও শুধু সেগুলোতে ক্লিক করে টাইপ করার মাধ্যমেই পরিবর্তনযোগ্য হওয়া উচিত।

এই জায়গাতেই বেশিরভাগ অন্যান্য পেজ বিল্ডার আশানুরূপ ফলাফল দিতে পারে না। তাদের বেশিরভাগই আপনাকে সবকিছু সম্পাদনা করার জন্য একটি টেক্সট ফিল্ডের ভেতরে টাইপ করতে বাধ্য করে। কিন্তু প্রকৃত ফ্রন্টএন্ড পেজ বিল্ডারের ক্ষেত্রে এমনটি হওয়া উচিত নয়। সরাসরি টেক্সট টাইপ ও সম্পাদনা করা সংস্করণ ২ থেকেই Page Builder Sandwich-এর একটি শক্তিশালী দিক ছিল, এবং সংস্করণ ৩-এও যেন এটি বজায় থাকে তা আমরা নিশ্চিত করেছি।

অপরিহার্য ধারণা #২: দ্রুত পরিবর্তনের জন্য মাউসের ব্যবহার

মাউস একটি শক্তিশালী সরঞ্জাম যা প্রায়শই পেজ বিল্ডারে অবহেলিত হয়। প্রায়শই, পেজ বিল্ডারগুলো মানুষকে উপাদান টেনে বিভিন্ন স্থানে ড্রপ করতে অথবা বাটন বা ইনপুট ফিল্ডে ক্লিক করার কাজে মাউস ব্যবহার করতে দেয়। যদিও এটি ঠিক আছে, তবে পেজ তৈরির ক্ষেত্রে মাউস দিয়ে আরও অনেক কিছু করা সম্ভব।

প্রথমত, পেজ সম্পাদনার হাতিয়ার হিসেবে মাউস ব্যবহারে দারুণ ভিজ্যুয়াল প্রতিক্রিয়া পাওয়া যায়, বিশেষ করে মার্জিন, প্যাডিং এবং সাইজের মতো ভিজ্যুয়াল বৈশিষ্ট্যগুলো সমন্বয় করার ক্ষেত্রে। এখন, আপনার উপাদানগুলো সূক্ষ্মভাবে সমন্বয় করা একটি স্বাভাবিক অভিজ্ঞতা হয়ে উঠবে।

PBS সংস্করণ ৩-এ, আপনি মাউস ব্যবহার করে বেশ কয়েকটি বিষয় সমন্বয় করতে পারবেন। আপনি পৃথক উপাদানগুলোর মধ্যকার মার্জিন/স্পেসিং, আপনার কলামগুলোর ভেতরের প্যাডিং, সেইসাথে ছবি, আইকন এবং ম্যাপের সাইজ সমন্বয় করতে পারবেন। আমরা সংখ্যাসূচক মান পরিবর্তনের বাটনগুলোকে স্লাইডার দিয়ে প্রতিস্থাপন করেছি।

অপরিহার্য ধারণা #৩: টেক্সট সহজে স্টাইলযোগ্য হওয়া উচিত

আপনার মনিটর থেকে একটু পিছিয়ে তাকালে লক্ষ্য করবেন যে আপনার ওয়েবপেজে যা কিছু যোগ করেন তার বেশিরভাগই টেক্সট কন্টেন্ট। হ্যাঁ, এগুলোর সাথে ছবি এবং আইকন থাকে – এবং সম্প্রতি আমরা আমাদের সাইটগুলোতে তুলনামূলকভাবে বড় ছবি যোগ করার দিকে ঝুঁকছি। কিন্তু গুরুত্বপূর্ণ বিষয়বস্তুর সিংহভাগই টেক্সট: শিরোনাম, বুলেট তালিকা, অনুচ্ছেদ, উদ্ধৃতি ইত্যাদি। এর পাশাপাশি রয়েছে আমাদের ডিজাইনের সাথে মিল রেখে টেক্সটকে কীভাবে স্টাইল করি। আমরা সেগুলোর আকার ও রঙ পরিবর্তন করি, কিংবা বোল্ড বা ইতালিক করি। এটি আমাদের কন্টেন্টকে পাঠকদের কাছে আরও সহজপাঠ্য, প্রাসঙ্গিক এবং আকর্ষণীয় করে তোলার জন্য।

যেহেতু আমরা প্রায়শই টেক্সট স্টাইল করে থাকি, তাই স্টাইল পরিবর্তনের বাটনগুলো খুব সহজে ব্যবহারের উপযোগী হওয়া উচিত। সেগুলো এমন কোনো পপ-আপ বক্সের মধ্যে লুকিয়ে থাকা উচিত নয় যা আমাদের প্রথমে খুলতে হবে। অধিকাংশ পেজ বিল্ডারই এই ব্যাধিতে ভোগে। তাদের ইউজার ইন্টারফেসকে ‘ঝামেলামুক্ত’ হিসেবে পরিচিত করার জন্য, এমনকি সর্বাধিক ব্যবহৃত অপশনগুলোকেও চোখের সামনে থেকে আড়াল করে রাখা হয়।

এটি সমাধান করতে, আমরা সর্বাধিক ব্যবহৃত ওয়ার্ড প্রসেসরগুলোর দিকে নজর দিয়েছি। আমরা লক্ষ্য করেছি যে সেগুলোতে সাধারণত টেক্সট ফরম্যাট করার জন্য স্ক্রিনের শীর্ষের কাছাকাছি অংশে প্রচুর বাটনের একটি সারি থাকে, এবং আমরা সংস্করণ ৩-এর জন্য একই লেআউট গ্রহণ করেছি। আমাদের এখন স্ক্রিনের শীর্ষে সর্বদা টেক্সট স্টাইলিংয়ের সমস্ত বাটনের একটি সারি বিদ্যমান রয়েছে। এটি স্টাইলিংকে সত্যিই দ্রুত করে তোলে এবং টেক্সট সম্পাদনার ক্ষেত্রে এটিকে আপনার সহজাত অভ্যাসের মতো করে তোলে।

অপরিহার্য ধারণা #৪: অ্যাডভান্সড স্টাইলিং অপশনগুলো নমনীয় অথচ সহজে বোঝার মতো হওয়া উচিত

পেজ বিল্ডারের মূল কথা হলো এটি মানুষকে সহজেই চমৎকার ডিজাইন তৈরি করার সুবিধা দেবে। এর অর্থ হলো শেখার কঠিন ধাপগুলোর সাথে আপস না করেই আমাদের বিভিন্ন সেটিংস ও অপশন প্রদান করা উচিত। মার্জিন, প্যাডিং সমন্বয় করা এবং টেক্সট স্টাইল করা দুর্দান্ত, তবে সেগুলো দিয়ে কেবল সীমিত কাজই হয়। কাজটি সম্পন্ন করার জন্য আপনার আরও বিশদ অপশনের প্রয়োজন হবে, যেমন ব্যাকগ্রাউন্ড ইমেজ, প্যাটার্ন, বর্ডার, ফিক্সড ব্যাকগ্রাউন্ড এবং আরও অনেক কিছু। এই সমস্ত ভিন্ন ভিন্ন সেটিংস একসাথে জড়ো করা কিছুটা জটিল হয়ে পড়তে পারে, তাই সংস্করণ ৩-এ বিষয়গুলোকে আরও সহজবোধ্য করার জন্য আমরা এগুলোর কয়েকটি সরলীকরণ করেছি এবং ক্যাটাগরি অনুসারে সাজিয়েছি।

অপরিহার্য ধারণা #৫: শর্টকোড সমর্থন

পরিশেষে, আসুন ভুলে না যাই যে আমাদের পেজ বিল্ডারটি ওয়ার্ডপ্রেসের ভিত্তির উপর প্রতিষ্ঠিত। আমাদের এই প্ল্যাটফর্ম এবং এর ফিচারগুলোকে সাদরে গ্রহণ করা উচিত, সেগুলোকে সীমাবদ্ধ করা বা সেগুলো থেকে বিচ্যুত হওয়া উচিত নয়। ওয়ার্ডপ্রেসের দেওয়া একটি বিশাল ফিচার হলো শর্টকোড। এর মানে এই নয় যে পুরো কন্টেন্ট শর্টকোড দিয়ে তৈরি হতে হবে – তা বিশৃঙ্খল হবে – বরং আমাদের কেবল সেগুলোর সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত। প্রচুর প্লাগইন এবং থিম শর্টকোড ব্যবহার করে, এবং সেগুলোকে উপেক্ষা করাটা হবে অনেক বড় ক্ষতি। প্রকৃতপক্ষে, পেজ তৈরির ক্ষেত্রে শর্টকোড ব্যবহারকারীদের সর্বোচ্চ নমনীয়তা প্রদান করে।

কয়েক সপ্তাহ আগে আমরা আমাদের শর্টকোড ম্যাপিং সিস্টেম চালু করেছি, এবং এর ফলে আমরা শত শত প্লাগইন থেকে শত শত শর্টকোড ম্যাপ করেছি। আমরা ওয়ার্ডপ্রেস প্লাগইন ডিরেক্টরিতে পাওয়া সর্বাধিক জনপ্রিয় প্লাগইনগুলোকে অগ্রাধিকার দিয়েছি, তাই আপনার নিজের সাইটেও সেগুলোর মুখোমুখি হওয়ার ভালো সম্ভাবনা রয়েছে। সংস্করণ ৩-এ এটি কেবল আরও জোরদার হয়েছে, এবং আগামী দিনে আমরা এটি উন্নত করে যাব।

উপসংহার

আমরা উপরের সমস্ত অপরিহার্য বৈশিষ্ট্যগুলো নিয়ে সেগুলোকে Page Builder Sandwich সংস্করণ ৩-এ অন্তর্ভুক্ত করেছি। এটি এখন পর্যন্ত ওয়ার্ডপ্রেসের জন্য আমাদের তৈরি সেরা পেজ বিল্ডার। এটি ব্যবহারে আরও স্বজ্ঞাত এবং আরও বেশি স্বাভাবিক, আগের চেয়ে দ্রুত পারফর্ম করে, সহজে ব্যবহার করা যায় এবং আগের চেয়ে আরও বেশি ব্যবহারকারী-বান্ধব।

পেজ বিল্ডারের কোনো অপরিহার্য ফিচার সম্পর্কে আপনার কোনো মতামত থাকলে নিচে মন্তব্য করে আমাদের জানান।