paint-brush
দুর্দান্ত ওয়েবসাইট ডিজাইনের 4টি পর্যায় (চিটশিট সহ!)দ্বারা@anarossetto
523 পড়া
523 পড়া

দুর্দান্ত ওয়েবসাইট ডিজাইনের 4টি পর্যায় (চিটশিট সহ!)

দ্বারা Ana Rossetto9m2023/10/18
Read on Terminal Reader

অতিদীর্ঘ; পড়তে

একটি ওয়েব ডেভেলপমেন্ট বুটিকের জন্য একটি নতুন ওয়েবসাইট তৈরি করার প্রক্রিয়াটি কার্যকরভাবে অনলাইনে কোম্পানিকে উপস্থাপন করার গুরুত্বের উপর জোর দেয়। প্রক্রিয়া অন্তর্ভুক্ত: - স্পষ্ট লক্ষ্য স্থাপন করা এবং ওয়েবসাইটের উদ্দেশ্য বোঝা। - লক্ষ্য শ্রোতাদের সনাক্ত করা এবং একটি বাধ্যতামূলক বার্তা তৈরি করা। - বিদ্যমান ওয়েবসাইট মূল্যায়ন এবং প্রতিযোগীদের গবেষণা. - পছন্দসই বৈশিষ্ট্য এবং কার্যকারিতার একটি তালিকা তৈরি করা। - সহযোগিতামূলক নকশা পর্ব, ব্যবহারকারী-কেন্দ্রিক নকশা, ওয়্যারফ্রেমিং, এবং একটি নকশা সিস্টেম তৈরির উপর জোর দেওয়া। - বিকাশের পর্যায়ে একটি প্রযুক্তিগত স্ট্যাক নির্বাচন করা, একটি মডুলার পদ্ধতি ব্যবহার করা এবং অ্যাস্ট্রো, স্যানিটি এবং নেটলিফাইয়ের মতো সরঞ্জামগুলি নিয়োগ করা জড়িত। - স্প্রিন্ট, স্বচ্ছ প্রকল্প ব্যবস্থাপনা, এবং বিষয়বস্তু সন্নিবেশ সহ চতুর বিকাশ। - কার্যকরী, কর্মক্ষমতা, এবং ক্রস-ব্রাউজার/ডিভাইস টেস্টিং সহ গুণমানের নিশ্চয়তা। - SEO বিবেচনা, 301 পুনঃনির্দেশ, এবং Google কনসোল আপডেট সহ ওয়েবসাইট লঞ্চের জন্য প্রস্তুতি। - চলমান পোস্ট-লঞ্চ অপ্টিমাইজেশান এবং ভবিষ্যতের পুনরাবৃত্তির জন্য নমনীয়তা। নিবন্ধটি একটি কার্যকর ওয়েবসাইট তৈরিতে জড়িত পদক্ষেপগুলির একটি বিস্তৃত ওভারভিউ প্রদান করে, সহযোগিতা, ব্যবহারকারীর অভিজ্ঞতা এবং এসইও সেরা অনুশীলনগুলিতে ফোকাস করে৷
featured image - দুর্দান্ত ওয়েবসাইট ডিজাইনের 4টি পর্যায় (চিটশিট সহ!)
Ana Rossetto HackerNoon profile picture

একটি ওয়েবসাইট নতুন ব্যবসার সুযোগের জন্য একটি গুরুত্বপূর্ণ গেটওয়ে হিসাবে কাজ করে। একটি নতুন ওয়েবসাইট তৈরি করা বা আবার ডিজাইন করা একটি চ্যালেঞ্জিং যাত্রা হতে পারে। আমার কোম্পানির ওয়েবসাইটের পুনঃডিজাইন নেতৃত্ব দেওয়ার পরে, আমি আমাদের যাত্রার কিছুটা ভাগ করার সিদ্ধান্ত নিয়েছি। আপনি যদি একটি নতুন ওয়েবসাইট তৈরি করার বা আপনার বর্তমানটিকে নতুনভাবে ডিজাইন করার কথা বিবেচনা করেন, আমরা আশা করি এটি আপনার যাত্রাকে আরও মসৃণ করে আপনাকে সাহায্য করবে৷

মূল্যায়ন

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


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


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


সেই পদক্ষেপগুলির কয়েকটি পুরো দলের সাথে একসাথে করা হয়েছিল। একটি ছোট দল হওয়ায়, আমরা প্রত্যেককে কিছুটা হলেও এই প্রক্রিয়ায় যুক্ত করতে চেয়েছিলাম। এই প্রথম মূল্যায়নের পর, আমরা বিভক্ত ও জয়ী হতে শুরু করেছি এবং আমাদের নতুন ওয়েবসাইটকে বাস্তবে রূপান্তরিত করার জন্য দায়ী দলের সদস্যদের নিবেদিত করেছি।

ডিজাইন

আমরা আমাদের ওয়েব প্রকল্পের জন্য ডিজাইন প্রক্রিয়ার মধ্যে ডুব দিতে উত্তেজিত ছিলাম। UI/UX ডিজাইন যেকোন ওয়েব প্রজেক্টের একটি গুরুত্বপূর্ণ দিক। আমাদের একটি বহু-বিভাগীয় দল জড়িত ছিল, কিন্তু ডিজাইনার ছিলেন শো-এর তারকা, আমরা আমাদের দর্শকদের কাছে যে বার্তাটি দিতে চেয়েছিলাম তার ভিজ্যুয়াল উপস্থাপনা তৈরি করার জন্য দায়ী।


আমাদের বার্তাটি দৃশ্যমানভাবে জানাতে এবং সেই অনুযায়ী বিষয়বস্তু গঠন করার জন্য ডিজাইনারের জন্য প্রকল্পের প্রয়োজনীয়তা এবং প্রত্যাশাগুলি স্পষ্টভাবে বোঝা অপরিহার্য ছিল। আমরা সঠিক টোন সহ একটি সংক্ষিপ্ত, আকর্ষক ডিজাইনের লক্ষ্য করেছি।


প্রকল্পের এই পর্যায়ে, আমরা এই পদক্ষেপগুলি অনুসরণ করেছি:

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


আমরা পুরো প্রক্রিয়া জুড়ে ফিগমা ব্যবহার করেছি, যা দলের সাথে সহযোগিতা করা এবং পুনরাবৃত্তি করা সহজ করে তুলেছে। কিছু পুনরাবৃত্তির পরে, আমাদের কাছে একটি সর্বোত্তম সংস্করণ ছিল যা আমাদের বিকাশকারীরা কাজ করতে পারে।

উন্নয়ন

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

প্রযুক্তিগত স্ট্যাক নির্বাচন করা হচ্ছে

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


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

আমরা এই প্রকল্পের জন্য একটি সহজ, দ্রুত, এবং সুন্দর ওয়েবসাইট চেয়েছিলাম।


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


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


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


Astro এবং Sanity ছাড়াও, আমরা আমাদের প্রকল্পের জন্য Netlify ব্যবহার করার সিদ্ধান্ত নিয়েছি। ভাল, আমরা সবসময় করি। Netlify এর নির্বিঘ্ন স্থাপনা এবং হোস্টিং ক্ষমতা সাধারণত আমাদের গো-টু কনটেন্ট ডেলিভারি নেটওয়ার্ক (CDN)। আমরা অ্যানিমেশনের জন্য বিভিন্ন লাইব্রেরিও ব্যবহার করেছি, যা আমরা অন্য একটি ব্লগ পোস্টে আরও গভীরভাবে আলোচনা করেছি (শীঘ্রই আসছে)।


উন্নতির একটি দিক হল সম্ভাব্য গ্রাহকদের আমাদের কাছে পৌঁছানোর জন্য আমরা যে ফর্ম তৈরি করেছি। আমরা Netlify-এর ফর্ম ব্যবহার করেছি, যা Astro-এর সাথে ফর্মগুলির সমস্যার কারণে সেরা বিকল্প হিসাবে প্রমাণিত হয়নি। আমরা একটি সমাধান খুঁজে পেয়েছি (হট-ফিক্স) এবং আমাদের যোগাযোগ ফর্মের জন্য একটি একক পৃষ্ঠা তৈরি করেছি। ভবিষ্যতের জন্য কীভাবে এটি পরিবর্তন করা যায় তা আমরা এখনও বিবেচনা করছি।

উন্নয়ন প্রক্রিয়া

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


কোড সংগ্রহস্থলের জন্য, আমরা GitHub (GH) ব্যবহার করেছি এবং এর প্রজেক্ট ম্যানেজমেন্ট বোর্ড এবং স্প্রিন্ট পরিকল্পনা বৈশিষ্ট্যগুলি ব্যবহার করেছি। GH সাধারণত ভার্সন কন্ট্রোল সিস্টেমের জন্য আমাদের পছন্দ, কিন্তু আমরা ধারণা প্রকল্প ব্যবহার শুরু করেছি এবং প্রকল্প পরিচালনার জন্য এটি পছন্দ করছি।


আমরা নকশা বাস্তবায়ন শুরু. আমরা চটপটে পদ্ধতি অনুসরণ করেছি এবং স্প্রিন্টে কাজ করেছি যাতে আমরা ট্র্যাকে ছিলাম এবং নির্ধারিত সময়সীমার মধ্যে ফলাফল প্রদান করি। একটি ছোট নোট: এটি একটি অভ্যন্তরীণ প্রকল্প ছিল, এবং আমাদের প্রধান অগ্রাধিকার ছিল আমাদের ক্লায়েন্টের প্রকল্পগুলিতে৷ এর মানে আমাদের দল অন্যান্য প্রকল্প থেকে বিরতি নেওয়ার পরেই স্প্রিন্টগুলি ঘটবে। এটি সাধারণত আমরা কীভাবে কাজ করি তা নয়, তবে আমরা এটি কীভাবে পরিচালনা করেছি এবং এটি পুনরাবৃত্তি না করার একটি পাঠ শিখেছি।


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


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

গুণ নিশ্চিত করা

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


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


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

গো-লাইভ প্রস্তুতি

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


অতএব, আমরা সার্চ ইঞ্জিন এবং ব্রাউজারগুলিকে জানাতে 301 পুনঃনির্দেশ ব্যবহার করার সিদ্ধান্ত নিয়েছি যে আসল URL স্থায়ীভাবে একটি নতুন দিয়ে প্রতিস্থাপিত হয়েছে। আমরা যা করেছি তা এখানে:

  • বর্তমান ওয়েবসাইট থেকে সমস্ত পৃষ্ঠার তালিকা:
  • যদি একটি পৃষ্ঠার URL গঠন একই রাখা হয়, 301 পুনঃনির্দেশ কাজ করছে তা নিশ্চিত করুন।
  • যখন পুরানো পৃষ্ঠার URL নতুন ওয়েবসাইটে না থাকে, তখন সবচেয়ে উপযুক্ত পৃষ্ঠায় একটি পুনঃনির্দেশ তৈরি করুন।
  • Google-এ সূচীকৃত পৃষ্ঠাগুলি তালিকাভুক্ত করুন যাতে আমরা তাদের সকলের জন্য পুনঃনির্দেশ করেছিলাম।
  • তাদের ধাপগুলি অনুসরণ করে সবকিছু পুনর্নির্দেশ করতে Netlify ব্যবহার করুন নেটলিফাই ডকুমেন্টেশন .
  • কনসোলের পরিবর্তন সম্পর্কে Google-কে অবহিত করুন ঠিকানা পরিবর্তন টুল.
  • Google কে নতুন ডোমেনটি পুনরায় সূচী করতে বলুন যাতে পুরানো পৃষ্ঠাগুলি উপস্থিত না হয়৷ এটি সরাসরি Google কনসোলে উপলব্ধ পদক্ষেপগুলি অনুসরণ করে করা হয়েছিল৷ গুগল কনসোল ডকুমেন্টেশন।


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

  • সার্চ ইঞ্জিনের ফলাফলে উচ্চতর স্থান পেতে এবং জৈব ট্র্যাফিককে আকর্ষণ করার জন্য প্রাসঙ্গিক কীওয়ার্ডগুলির জন্য নতুন ওয়েবসাইটটি অপ্টিমাইজ করতে, জনপ্রিয় এবং কম প্রতিযোগিতামূলক কীওয়ার্ডগুলি আবিষ্কার করতে আমরা Google কীওয়ার্ড প্ল্যানার বা SEMrush-এর মতো সরঞ্জামগুলি ব্যবহার করে একটি কীওয়ার্ড অনুসন্ধান অনুসরণ করি।
  • আমরা প্রতিটি ওয়েবপৃষ্ঠায় মেটা শিরোনাম ট্যাগ এবং মেটা বিবরণ অপ্টিমাইজ করার জন্য যথাসম্ভব চেষ্টা করেছি, প্রাসঙ্গিক কীওয়ার্ডগুলি অন্তর্ভুক্ত করে এবং ব্যবহারকারীদের সার্চ ইঞ্জিন ফলাফল পৃষ্ঠাগুলি (SERPs) থেকে ক্লিক করতে প্রলুব্ধ করার জন্য কল-টু-অ্যাকশন অন্তর্ভুক্ত করে।
  • নিশ্চিত করুন যে URLগুলি পরিষ্কার, সংক্ষিপ্ত এবং লক্ষ্যযুক্ত কীওয়ার্ড অন্তর্ভুক্ত
  • Alt Text: ছবির জন্য বর্ণনামূলক Alt টেক্সট প্রদান করুন, যেখানে উপযুক্ত কীওয়ার্ড ব্যবহার করুন
  • পেজ স্পিড অপ্টিমাইজেশান নিশ্চিত করুন (আমরা যে স্ট্যাকটি ব্যবহার করেছি তার সাথে এখানে একটি দুর্দান্ত ফলাফল পাওয়া কঠিন ছিল)।

ফলাফল

ওয়েল, আমাদের ওয়েবসাইট লাইভ না হওয়া পর্যন্ত এটি একটি দীর্ঘ যাত্রা ছিল। কিন্তু অনুমান করতে পার কি? লঞ্চের বাইরেও কাজ চলতে থাকে।


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


আমরা এখানে যা কিছু ভাগ করেছি তার সংক্ষিপ্তসারের জন্য, আমরা একটি ছোট চিট-শীট প্রস্তুত করেছি যাতে আপনি এটি আপনার প্রকল্পে ব্যবহার করতে পারেন।


নতুন ওয়েবসাইট চিট শীট

এছাড়াও এখানে প্রকাশিত.


L O A D I N G
. . . comments & more!

About Author

Ana Rossetto HackerNoon profile picture
Ana Rossetto@anarossetto
Head of Business and Product at a small but mighty tech shop from Portugal (https://marzee.co/)

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে...