কন্টেন্ট
- অজানা জন্য ডিজাইনিং
- নকশা করার জন্য একটি ব্যবহারিক পদ্ধতি
- অজোনস্টিক হয়ে উঠছে
- প্রগতিশীল কোডিং
- মার্ক আপ আপ মধ্যে ডাইভিং
দেখে মনে হচ্ছে সবাই আজকাল প্রতিক্রিয়াশীল ওয়েব ডিজাইনের কথা বলছেন, এবং সঙ্গত কারণেই; যেহেতু ওয়েব-সক্ষম ডিভাইসগুলির সংখ্যা বাড়তে থাকে - প্রতিটি আলাদা আলাদা ক্ষমতা এবং বৈশিষ্ট্য সহ - এটি স্থির-প্রশস্ত ওয়েবসাইটগুলি তৈরি করা আর বোধগম্য নয়।
সত্য, এটি কখনও ছিল না। তবুও এখন পর্যন্ত অভিজ্ঞতার নকশা করা সবচেয়ে ভাল অনুশীলন হিসাবে বিবেচিত হয়েছিল যা বেশ কয়েকটি অনুমান তৈরি করেছিল, সেগুলি পর্দার সমাধান, ব্যান্ডউইথ বা ইনপুট পদ্ধতির আশেপাশে হোক। আপনি যদি কখনও কোনও 960px- প্রশস্ত ওয়েবসাইট ডিজাইন করে থাকেন তবে কেবল বন্ধুর ছোট পর্দার নেটবুকটিতে এটি দেখতে (এবং হ্যাঁ, আমি এখানে বেদনাদায়ক অভিজ্ঞতা থেকে লিখছি), আপনি বুঝতে পারবেন কেন এটি বিশেষত চালাক দৃষ্টিভঙ্গি নয়। এখন, স্মার্টফোন এবং ট্যাবলেটগুলি মিশ্রণে ফেলে দেওয়া, এটি স্পষ্ট যে আমাদের traditionalতিহ্যগত পদ্ধতিগুলি এখন আর উদ্দেশ্য অনুসারে উপযুক্ত নয়।
ধন্যবাদ, সিএসএস মিডিয়া প্রশ্নের উদ্ভব এবং ক্রমবর্ধমান স্বীকৃতি যে ওয়েবটি তার নিজস্বভাবে একটি মাধ্যম, এর অর্থ আমরা প্ল্যাটফর্মের প্রকৃত প্রকৃতিটি গ্রহণ করতে শুরু করেছি, এটি স্বীকার করে নি যে এর সর্বজনীনতা একটি শক্তি, কোনও দুর্বলতা নয়।
পরের পাঁচ দিন ধরে, আমি আপনাকে এমন কৌশলটির মাধ্যমে গাইড করব যা এই সত্যটিকে স্বীকৃতি দেয়: প্রতিক্রিয়াশীল ওয়েব ডিজাইন। ইথান মার্কোট দ্বারা বিকাশযুক্ত, এটি তরল বিন্যাস, নমনীয় চিত্র এবং মিডিয়া প্রশ্নের সমন্বয় করে আমাদের এমন সাইটগুলি তৈরি করতে সহায়তা করে যা তারা যে কোনও পরিবেশের মুখোমুখি খাপ খায়।
কীভাবে একটি সাধারণ মিডিয়া গ্যালারী তৈরি করতে হয় তা দেখিয়ে আমি এই পদ্ধতির প্রদর্শন করব। আমার উদাহরণগুলিতে, আমি আমেরিকা যুক্তরাষ্ট্র জুড়ে নিয়েছি এমন একটি সাম্প্রতিক রাস্তা ভ্রমণের দলিল করার জন্য একটি ছোট ওয়েবসাইট তৈরি করব, তবে আপনার নিজের প্রয়োজন অনুসারে কোড এবং ডিজাইনের বিন্যাস নির্দ্বিধায় করুন।
অজানা জন্য ডিজাইনিং
এই টিউটোরিয়ালটির বেশিরভাগটি প্রতিক্রিয়াশীল ডিজাইনের বিকাশের দিকটি ঘিরে থাকবে। তবে যে কোনও কোডের খনন করার আগে, আমরা কীভাবে এমন কোনও ওয়েবসাইট ডিজাইন করতে পারি যাতে অনুমিতভাবে অসীম বিন্যাস থাকতে পারে তা ভেবে কিছুটা সময় নেওয়া যাক।
এখন, আমি ভাগ্যবান যে আমি ইন্টারফেস ডিজাইন করতে পারি এবং ফ্রন্টএন্ড কোড বিকাশ করুন যা তাদের বাস্তব করে তোলে। এটি অবশ্যই কোনও অনন্য দক্ষতা নয় - আপনি যদি নিজের জন্য কাজ করেন তবে আপনি সম্ভবত একই হন। তবে তরল ডিজাইন তৈরি করার সময় সামগ্রী কীভাবে মানিয়ে নিতে এবং পুনরায় প্রবাহিত করতে পারে তা বোঝা সুবিধাজনক।
আমি আরও বৃহত্তর দলের অংশ হিসাবেও কাজ করি যেখানে আমার ভূমিকা আরও বিশেষায়িত। এই জাতীয় পরিবেশে, ভিজ্যুয়াল ডিজাইনার কেবলমাত্র তারের ফ্রেমগুলিকে আকর্ষণীয়, আকর্ষক (সাইন-অফ, পিক্সেল-নিখুঁত) কমপগুলিতে অনুবাদ করতে মনোনিবেশ করতে পারে। এই লেআউটগুলিকে হাতা এবং দক্ষ মার্কআপ এবং সিএসএসে অনুবাদ করে বিকাশকারীদের আলাদাভাবে অবস্থান করা অস্বাভাবিক নয়।
তবে, ডিজাইনগুলি কীভাবে ভিন্ন ভিন্ন পরিবেশের সাথে খাপ খাইয়ে নেবে তা মূল্যায়ন শুরু করার পরে এই জাতীয় লিনিয়ার এবং বিভাজনযুক্ত কার্যপ্রবাহগুলি দ্রুত ভেঙে যায়। যে কোনও নতুন সরঞ্জাম বা প্রযুক্তির যতটুকু, আমাদের কাজের আরও সহযোগী এবং চটজলদি বিবেচনা করা উচিত। প্রতিক্রিয়াশীল ওয়েবসাইটগুলি ডিজাইন করার সময় যে সমস্ত জটিল সমস্যাগুলির মুখোমুখি হয়েছিল তা কেবল কথোপকথন, পরীক্ষা-নিরীক্ষার মাধ্যমে সমাধান করা যায়।
নকশা করার জন্য একটি ব্যবহারিক পদ্ধতি
এটি ডিজাইনারদের কোনও নির্দিষ্ট ডিভাইসের সীমানার বাইরে কোনও নকশা কীভাবে কাজ করতে পারে সে সম্পর্কে ভাবার সুযোগ নেই বলার অপেক্ষা রাখে না।
ক্লিয়ারলেফ্টে, আমরা ডেস্কটপের দৃষ্টিকোণ থেকে ভিজ্যুয়াল ডিজাইনটি শুরু করি। আমরা একটি ওভাররিচিং ডিজাইনের ভাষা এবং ভিজ্যুয়াল নান্দনিক সংজ্ঞা দিয়ে শুরু করি, প্রায়শই সামগ্রীর মূল অংশের আশেপাশে প্রাথমিক অনুসন্ধানগুলিকে ভিত্তি করে। উদাহরণস্বরূপ, যদি আমরা কোনও খাদ্য সাইট ডিজাইন করি তবে আমরা একটি রেসিপি পৃষ্ঠা দিয়ে শুরু করব; একটি সংবাদ সাইটের জন্য, একটি গল্পের পৃষ্ঠা।
এটি কেবল সাইটের একটি গুরুত্বপূর্ণ পৃষ্ঠা নয়, তবে এটিতে সম্ভবত আমাদের জন্য টাইপোগ্রাফিক প্যালেট তৈরির জন্য পর্যাপ্ত কাঠামোগত সামগ্রী রয়েছে। লেআউটটি কীভাবে খাপ খাইয়ে নিতে পারে সে সম্পর্কে আমরাও চিন্তা করব - এমনকি যদি এই পর্যায়ে এটি কেবল আমাদের মনের পিছনে থাকে।
ডিজাইনের উপর চাপ দেওয়ার এক কার্যকর উপায় হ'ল এই জাতীয় একটি পৃষ্ঠা নেওয়া এবং এটি একটি সংকীর্ণ (~ 320px প্রশস্ত) পর্দার জন্য অভিযোজিত। আপনি সম্ভবত আবিষ্কার করতে পারবেন যে এই প্রস্থে কাজ করার জন্য ডিজাইনের কিছু দিকগুলির পুনর্বিবেচনা করা দরকার। এখানে কিছু উদাহরন:
- টাইপোগ্রাফি: বৃহত্তর শিরোনামগুলি বিস্তৃত বিন্যাসগুলিতে ভাল কাজ করতে পারে তবে ছোট পর্দায় তারা প্রচুর পরিমাণে উল্লম্ব স্থান নিতে পারে এবং তাই অতিরিক্ত স্ক্রোলিংয়ের প্রয়োজন। লাইনের দৈর্ঘ্য পরিবর্তিত হওয়ার সাথে সাথে আপনাকে লাইন হাইট এবং অন্যান্য টাইপোগ্রাফিক চিকিত্সাগুলিও বিবেচনা করা উচিত।
- লিঙ্কগুলি: আপনার ডিজাইন টাচস্ক্রিন ডিভাইসে কীভাবে কাজ করবে? যদিও এখনও এগুলি সনাক্ত করার সহজ উপায় আমাদের কাছে নেই (অর্থাত আমাদের ডিজাইনের সমস্ত দিক বিবেচনা করা উচিত), সঙ্কীর্ণ স্ক্রিনের জন্য নকশা আমাদের লিঙ্ক এবং অন্যান্য ইন্টারেক্টিভ উপাদানগুলির জন্য লক্ষ্য অঞ্চলগুলি সম্পর্কে চিন্তাভাবনা করার সুযোগ দিতে পারে । আইওএসের গাইডলাইনগুলি এগুলি কমপক্ষে 44 পিক্সেল / পয়েন্ট বর্গক্ষেত্রের প্রস্তাব দেয় যা লক্ষ্য করা ভাল চিত্র figure
- নেভিগেশন: এটি সম্ভবত কোনও প্রতিক্রিয়াশীল ডিজাইনের সবচেয়ে বিশ্রী উপাদান হবে, বিশেষত যদি আপনার সাইটে অনেকগুলি বিভাগ এবং গভীর শ্রেণিবদ্ধ থাকে। ব্র্যাড ফ্রস্ট বর্তমানে বিবেচিত নেভিগেশনে কিছু ভিন্ন পদ্ধতির সংক্ষিপ্তসার লিখেছেন।
- অতিরিক্ত অতিরিক্ত সামগ্রী: কিছু সামগ্রী প্রয়োজন হয় না? অন্যান্য বিষয়বস্তুগুলিকে কেবল কিছু নির্দিষ্ট দৃশ্যে দেখানো দরকার? কোনও ব্যবহারকারী কোন ডিভাইসটি ব্যবহার করছে তার উপর ভিত্তি করে বিষয়বস্তু আড়াল করার পক্ষে আমি সমর্থন করি না, তবে শর্তযুক্ত লোডিংয়ের মতো কৌশল (যা আমরা এই সপ্তাহের শেষে দেখব) প্রয়োজনে কেবলমাত্র পরিপূরক সামগ্রী লোড করা ছোট পাতাগুলি পরিবেশন করতে সহায়তা করতে পারে।
দুটি বিপরীত লেআউট ডিজাইন করা এই ধারণাটিকে আরও শক্তিশালী করে তোলে যে কোনও নকশা মানিয়ে নেবে, যখন সম্ভাব্য গোচাগুলি প্রথম দিকে আয়রন করা হবে। এটি কাজের দ্বিগুণ হওয়ার মতো মনে হলেও মনে রাখবেন যে আমরা প্রতিটি পৃষ্ঠা পিক্সেল-নিখুঁত নির্ভুলতার জন্য ডিজাইন করছি না। পরিবর্তে, আমরা একটি স্কেলযোগ্য ডিজাইনের ভাষা তৈরিতে ফোকাস করছি - এটি কোডে প্রয়োগ করা শুরু হওয়ার সাথে সাথে বিকশিত হবে এবং পৃথক মডিউল এবং উপাদানগুলির আশেপাশের একটি।
অজোনস্টিক হয়ে উঠছে
আশ্চর্যজনকভাবে, এমন একটি শিল্পের জন্য যা printতিহাসিকভাবে ওয়েবকে মুদ্রণের মতো চিকিত্সা করেছে, স্থির-প্রস্থের লেআউটগুলি আমাদের উত্পাদনের অনেকগুলি সরবরাহ করেছে। যেহেতু আমরা একটি অভিযোজ্য মাধ্যমের জন্য ডিজাইনিং শুরু করি, নতুন পদ্ধতির বিষয়টি বিবেচনা করা হচ্ছে যা আমাদের মাঝারিটির তরল প্রকৃতির স্বীকৃতি দেওয়ার সময় সমস্যাগুলি সমাধান করতে এবং ধারণাগুলি যোগাযোগের সুযোগ দেয়। এখানে আমার পছন্দের একটি কয়েক:
- পৃষ্ঠা বিবরণ ডায়াগ্রাম: যদিও ওয়্যারফ্রেমগুলি প্রায়শই বিন্যাসকে বোঝায় (এবং এইভাবে একটি নির্দিষ্ট ধরণের ডিভাইস ধরে নেওয়া যায়), পৃষ্ঠা বিবরণ ডায়াগ্রামগুলি এই অনুমিতিটি সরিয়ে দেয় এবং পরিবর্তে অগ্রাধিকারের শর্তে নথিতে সজ্জিত পৃথক উপাদানগুলি বর্ণনা করে।
- স্টাইল টাইলস: ক্লায়েন্টদের সাথে ডিজাইনের ধারণাগুলি যোগাযোগের সময়, আমরা আমাদের "ওয়েবসাইটের চিত্রগুলি" উপস্থাপন করতে পারি। আমরা যদি সাবধান না হয়ে থাকি তবে ক্লায়েন্টরা সঠিকভাবে এমন ধারণাটি দেখতে জিজ্ঞাসা করবে যা প্রদর্শন করে যে কোনও নকশা অন্যান্য ডিভাইসে কীভাবে দেখবে। এটি আমাদের একাধিক ডিভাইসের জন্য একাধিক পৃষ্ঠাগুলি তৈরির একটি অস্থিতিশীল পরিস্থিতিতে জোর করতে পারে। সামান্থা ওয়ারেন এই সমস্যাটি নিয়ে ভাবেন এবং স্টাইল টাইলস নিয়ে এসেছেন। এগুলি মেজাজ বোর্ডের (তবে কম অস্পষ্ট) এবং সম্পূর্ণরূপে উপলব্ধি করা কম্পগুলি (তবে কম সুনির্দিষ্ট) এর মধ্যে কোথাও বসে এবং টাইপোগ্রাফি, বোতামের শৈলী এবং মাস্টহেড চিকিত্সার যোগাযোগে আমাদের সহায়তা করে। তারা আমাদের ক্লায়েন্টদের সাথে আরও পরিপক্ক আলোচনার জন্য উত্সাহ দেয়।
- গতিশীল নকশা গেম: এই অনুশীলনটি সহযোগী ডিজাইনের ওয়ার্কশপের সময় সত্যই ভাল কাজ করতে পারে। এই অনুশীলনে, সকলেই পোস্ট-এ লিখেছেন এটি একটি নির্দিষ্ট পৃষ্ঠায় প্রদর্শিত হতে পারে এমন উপাদানগুলিকে নোট করে। এরপরে এগুলি প্রাচীরের সাথে গুরুত্বের সাথে আটকে থাকে, যেন তারা কোনও মোবাইল ফোনে লিনিয়ার হাজির হয়ে থাকে। ফলস্বরূপ আলোচনাটি কিছু আশ্চর্য উপসংহার তৈরি করতে পারে। উদাহরণস্বরূপ, আপনি বুঝতে পারেন যে নেভিগেশন পৃষ্ঠার সর্বাধিক গুরুত্বপূর্ণ উপাদান নয়। এটি নকশাটি অনুসরণ করতে পারে, যেখানে পৃষ্ঠার শীর্ষে থাকা একটি স্কিপ লিঙ্কটি পাদলেখের নেভিগেশনে লিঙ্ক করে।
ইতিমধ্যে অবশ্যই আমরা ইতিমধ্যে অবশ্যই ব্যবহার করছি এমন সরঞ্জামগুলির জন্য জায়গা রয়েছে, তবে কোনও ওয়েবসাইটকে বিস্তৃত শর্তে ডিজাইন করার সময় আমাদের মনে রাখা উচিত যে লেআউটটি আর পরিচিত জ্ঞাত নয়।
প্রগতিশীল কোডিং
ধন্যবাদ, আমাদের যেমন কঠোর পরিশ্রম করা হয়েছে তেমন উদাহরণ হিসাবে আমরা ভিজ্যুয়াল ডিজাইনের বিষয়ে চিন্তা করার দরকার নেই! পরিবর্তে, আমরা একটি সম্পূর্ণ প্রতিক্রিয়াশীল ওয়েবসাইটে আমাদের ডিজাইন কোডিংয়ে মনোনিবেশ করতে পারি।
আমরা আরম্ভ করার আগে আরও একটি জিনিস। আমরা যে মাধ্যমের সাথে কাজ করছি তার একটি প্রতিষ্ঠাতা নীতিটি মনে রাখা গুরুত্বপূর্ণ: সর্বজনীনতা। এর অর্থ আজকের ওয়েব-সক্ষম ডিভাইসগুলির জন্য কেবল বিল্ডিংই নয়, গতকাল এবং আগামীকালকের সাথেও সামঞ্জস্যতা নিশ্চিত করা। জন অলস্প্প বর্ণনা করেছেন যে এই নীতিটি তার পোস্ট নেক্সট 6 বিলিয়নতে কেন গুরুত্বপূর্ণ:
"এই পরবর্তী ছয় বিলিয়ন হ'ল গ্রামীণ ভারত, আফ্রিকা, চীন অঞ্চলের শিশুরা যেখানে বিদ্যুতের অ্যাক্সেস এবং নেটওয়ার্কগুলি একসাথে হতে পারে Su লেখার ব্যবস্থা.এই ব্যক্তিরা যারা তাদের পরিবারে প্রথম লিখতে এবং লিখতে সক্ষম হলেন, এটি বিশ্বব্যাপী 20 শতাংশ মানুষ যারা পড়তে বা লিখতে পারেন না Yet তবুও।’
আমাদের পেশার মধ্যে থাকা বিভিন্ন ফ্যাশনগুলি (আরও ভাল শব্দের প্রয়োজনে) দেখে ওয়েব সম্পর্কে আমাদের উপলব্ধিটি আবিষ্কার করা যেতে পারে: ওয়েব মান, অ্যাক্সেসিবিলিটি, অবিচ্ছিন্ন জাভাস্ক্রিপ্ট ... সব একই থিমের রূপ: প্রগতিশীল বর্ধন। প্রতিক্রিয়াশীল ওয়েব ডিজাইনের ক্ষেত্রেও একই কথা। গড়তে a সত্যই প্রতিক্রিয়াশীল ওয়েবসাইটটি এমন একটি সাইট তৈরি করা যা কেবল পিছনের দিকে সামঞ্জস্যপূর্ণ নয়, ভবিষ্যতের বন্ধুত্বপূর্ণও।
মার্ক আপ আপ মধ্যে ডাইভিং
ঠিক আছে, উপস্থাপনের জন্য যথেষ্ট, পাঠ্য সম্পাদক খোলার সময় এসেছে।আমাদের ডিজাইনার আমাদের একটি ডেস্কটপ-ওরিয়েন্টেটেড ডিজাইন সরবরাহ করেছেন এবং এটি কীভাবে সংকীর্ণ ভিউপোর্টে প্রদর্শিত হতে পারে তার উদাহরণ প্রদানের জন্য যথেষ্ট দয়াবান হয়েছেন।
এগুলি আলাদাভাবে কোড করার জন্য লোভনীয় হতে পারে তবে আমি আলাদা পদ্ধতির পরামর্শ দিচ্ছি। পৃথক উপাদানগুলি - বা নিদর্শন - রেখে যা একটি একক পৃষ্ঠায় নকশা তৈরি করে, আমরা একটি প্যাটার্ন পোর্টফোলিও তৈরি করতে পারি। এটি আমাদের যে কোনও পৃষ্ঠা বিন্যাসের সীমানার বাইরে উপাদানগুলি বিকাশ করতে দেয় এবং যেকোন রিগ্রেশন পরীক্ষার জন্য পরে আমাদের উল্লেখ করার জন্য কিছু দেবে। আসুন কয়েকটি আলাদা ডিভাইসে প্রাথমিক মার্কআপটি দেখতে দিন:
আমাদের চিহ্নিত করা প্যাটার্ন পোর্টফোলিও দেখুন
ঠিক আছে, আমাকে অভিশাপ দেওয়া হবে - আমাদের ইতিমধ্যে একটি প্রতিক্রিয়াশীল ওয়েবসাইট রয়েছে! আমাদের বিষয়বস্তু প্রতিটি ডিভাইসের সীমাবদ্ধতার সাথে খাপ খাইয়ে নিচ্ছে, সে যেন নতুন অভিনব আইপ্যাড বা বাতিল হওয়া বৈশিষ্ট্যযুক্ত ফোন। এমনকি এটি লিংকের মতো কেবল একটি পাঠ্য ব্রাউজারেও কাজ করে।
সর্বজনীনতার অন্তর্নিহিত নীতিগুলির জন্য ধন্যবাদ, ওয়েব ডিফল্ট হিসাবে প্রতিক্রিয়াশীল। এটি দুর্দান্ত, তবে এর অর্থ হ'ল এখন থেকে কোডটিতে আমরা যা কিছু করি তা এই দেশীয় অভিযোজনযোগ্যতার সাথে আপস করতে পারে।
আগামীকাল: আমরা সাবধানে পদক্ষেপ নেব এবং প্রতিক্রিয়াশীল ডিজাইনের প্রথম দিকটি প্রয়োগ করতে শুরু করব: টাইপোগ্রাফি এবং তরল গ্রিড।
