রেস্পন্সিভ ওয়েব ডিজাইন এর জন্য ২৩টি প্রয়োজনীয় রিসোর্স

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

রেস্পন্সিভ করুন(Make it Responsive)

গুগল Make it Responsive এই ভুমিকা দিয়ে সুন্দর একটা টপিক লিখেছে। এই আর্টিকেলটি আপনাকে রেস্পন্সিভ ওয়েব ডিজাইন সম্পর্কে জানাবে। এই টপিক থেকে একাধিক স্ক্রিন সাইজ এবং বিভিন্ন ধরনের ডিভাইস এর মাপের সাইট বানাতে পারবেন। সেই সাথে আপনি আপনার রেস্পন্সিভ সাইটকে আরও দ্রুতগতি ও ফ্লেক্সিবল করে তুলতে পারবেন। সাইটের ঠিকানা https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsiv

রেস্পন্সিভ  এর লিস্ট(A List Apart’s Responsive Web Design Tutorial 

এই আর্টিকেলটিতে খুব গভীরভাবে রেস্পন্সিভ ডিজাইনের ফ্লুয়িড ডিজাইন এবং মিডিয়া কোয়েরি সম্পর্কে আলোচনা করা হয়েছি। এই আর্টিকেলটি ডিজাইনারদের জন্য খুবই উপকারি সে নতুন হোক আর যে এই পর্যন্ত বেশ কিছু প্রোজেক্ট নিয়ে কাজ করেছে। এই আর্টিকেলটি রেস্পন্সিভ ডিজাইনের জন্য একটি ভালো মানের সোর্স । নিচের লিঙ্ক থেকে আর্টিকেলটি পড়ুন, আর শিখুন। http://alistapart.com/article/responsive-web-design/

৫টি রেস্পন্সিভ ওয়েব ডিজাইন প্যাটার্ন (5 Really Useful Responsive Web Design Patterns)

DesignShack এর এটি একটি খুব সুন্দর আর্টিকেল। এই আর্টিকেল থেকে রেস্পন্সিভ ওয়েব ডিজাইন এর অনেকগুলো খুব সুন্দর প্যাটার্ন সম্পর্কে জানতে পারবেন যা আপনাকে ওয়ান পেজ এর লেয়াউট নিয়ে প্ল্যান করতে সাহায্য করবে। কিছু উদাহরণ সিম্পল আর বাকিগুলো HTML উপাদান ব্যবস্থা সম্পর্কে বর্ণাঢ্য ধারনা দেবে। সাইটের ঠিকানা https://codemyviews.com/blog/5-really-useful-responsive-web-design-patterns

রেস্পন্সিভ ওয়েব ডিজাইন (Responsive Web Design Tutorial) 

Shayhowe ওয়েব ডিজাইন পাঠের একটি চমৎকার সিরিজ বানিয়েছে। তাদের মধ্যে একজন কিভাবে যে কোনো পৃষ্ঠা মোবাইল বান্ধব করতে হয় তার লেসন দেবে। তারা একদম গোড়া থেকে তাদের লেসন শুরু করে এবং বিভিন্ন ভাবে তাদের লেসন পারফেকট ভাবে বুঝিয়ে দেয়। আরও বেশি জানতে চাইলে চলে যান নিচের লিংঙ্ক এ ।http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

৩টি স্টেপ(Responsive design in 3 steps)

 

এই আর্টিকেলটিতে রেস্পন্সিভ ডিজাইন শেখার খুব বেসিক দিকগুলো দেখান হয়েছে। এখানে শুধুমাত্র জরুরী বিষয় গুলোতে ফোকাস করা হয়েছে। যদি পড়তে চান আর্টিকেলটি এই ঠিকানায় চলে যান। http://webdesignerwall.com/tutorials/responsive-design-in-3-steps 

৯ টি বেসিক রুল(9 Basic Principles of Responsive Web Design)

এই আর্টিকেলটি খুবই মজার । এখানে নতুন এবং মজার একটি মাধ্যমে আপনাকে রেস্পন্সিভ ওয়েব ডিজাইন শেখাবে। সাইটের ঠিকানা

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

CSS ফ্রেমওয়ার্ক এর মাধ্যমে রেস্পন্সিভ ওয়েব ডিজাইন করা সবচেয়ে ভালো। নিচে রেস্পন্সিভ ওয়েব ফ্রেমওয়ার্কের কয়েকটি ভালো ফ্রেমওয়ার্কের লিস্ট দেওয়া হল।

Ink

এই ফ্রেমওয়ার্ক দিয়ে খুব দ্রুত রেস্পন্সিভ HTML ইমেল তৈরি করা যায় যা যেকোনো ডিভাইস ও ক্লায়েন্ট এর জন্য কার্যকরী। এমনকি এটি আঊটলুক এও কার্যকরী। সাইটের ঠিকানা http://zurb.com/ink/

Skeleton

এটি সিএসএস ফাইল এর একটি ছোট সংকলন। এটি দ্রুত আপনার সাইটগুলি তৈরি করতে সাহায্য করবে যা ডেস্কটপ থেকে মোবাইল যে কোনো ডিভাইসে সুন্দরভাবে সহজে খাপ খায়। এটি মূলত একটি রেস্পন্সিভ এর জন্য বয়লারপ্লেট। এর সাইটের ঠিকানাঃ

http://getskeleton.com/

Bootstrap 

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

Less Framework

এটিও একটি জনপ্রিয় ফ্রেমওয়ার্ক। এটি মূলত গ্রিড সিস্টেম দিয়ে করা যার ৪ টি লেআঊট (ডিফল্ট, ট্যাবলেট, মোবাইল এবং ওয়াইড মোবাইল) রয়েছে।

Entomic’s Responsive CSS

 

এক মিনিটের মধ্য খুব সুন্দরভাবে আপনার ওয়েব সাইট এর পেজকে রেস্পন্সিভ করুনডেস্কটপ, ট্যাবলেট এবং স্মার্টফোনের জন্য। ব্যাবহার করতে চাইলে নিচের ঠিকানায় চলে যান।

https://www.entomic.com/responsivecss

 jQuery তে অনেক দরকারী লাইব্রেরি ও প্লাগইন আছে যেগুলো ব্যাবহার করে ওয়েব সাইটে এক্সট্রা রেস্পন্সিভ ম্যাজিক দেওয়া যায়। নিচে কয়েকটি  দেওয়া হল।

Intention

Intention.js খুব হালকা এবং এটি পরিষ্কার ভাবে HTML কে রেস্পন্সিভ ভাবে নতুন করে পুনর্বিন্যাস করে। সাইটের ঠিকানা। http://intentionjs.com/

Restive

এটি মুলত একটি প্লাগিন। এটি দ্রুত এবং সহজে আপনার ওয়েব সাইটে ফিচার যোগ করে এবং বস্তুত প্রায় প্রতিটি ডিভাইস মানিয়ে যায়। সাইটের ঠিকানা http://restivejs.com/।

Fit Text

এটি ফন্টস কে ফ্লেক্সিবল করে। সাইট টি ভিসিট করুন http://fittextjs.com/

Collage Plus

এই জেকুয়েরি প্লাগিনটি আপনার ওয়েবসাইটের ইমেজগুলোকে সাইটের লেআউট এ যথাযথ ভাবে খাপ খাওয়াবে। গিথাব ঠিকানা https://github.com/ed-lea/jquery-collagePlus

OWL Carousel

এটি খুবই জনপ্রিয় একটি টাচ এনাবেল প্লাগিন, যা আপনাকে খুব সুন্দরভাবে রেস্পন্সিভ carousel স্লাইডার তৈরি করতে সাহায্য করবে। সাইট টি ভিসিট করুন।

http://owlgraphic.com/owlcarousel/ 

Swipebox

Swipebox ডেস্কটপ, মোবাইল এবং ট্যাবলেট জন্য একটি jQuery “লাইটবক্স” প্লাগইন। গিথাব ঠিকানা

http://brutaldesign.github.io/swipebox/

Slides

Slidesjs jQuery এর জন্য একটি রেস্পন্সিভ স্লাইডশো প্লাগইন যাতে বিভিন্ন ফিচার যেমন CSS3 এর transitions রয়েছে।

সাইটটি ঘুরে আসুন। http://slidesjs.com/

Glide

এটি টাচ ফ্রেন্ডলি রেস্পন্সিভ jQuery  স্লাইডার। এটা সহজ, লাইটওয়েট এবং দ্রুত। এর স্লাইড এমনভাবে ডিজাইন করা যা কমও নয় বেশিও নয়। সাইট এর ঠিকানা

http://glide.jedrzejchalubek.com/

FlickerPlate

এটিও একটি খুব সুন্দর প্লাগিন, যা সম্পূর্ণ রেস্পন্সিভ এবং টাচএবল । ঠিকানা http://getwebplate.com/plugins/flickerplate

FlexSlide

এটি একটি অসাম পুরো রেস্পন্সিভ জেকুয়রি স্লাইডার । ব্যাবহার করুন এই ঠিকানা থেকে, http://www.woothemes.com/flexslider/

Adobe Edge

ডিজাইন করার পর মোবাইল লেআউট চেক করা একটি ঝামেলার কাজ। এটি এডব তৈরি করেছে। ওয়েব ডিজাইনার যাদের বিভিন্ন ডিভাইসে তাদের সাইট টি চেক করতে হয় তাদের জন্য এটি একটি জরুরী অ্যাপ্লিকেশন। লাগলে এই ঠিকানায় যান। https://creative.adobe.com/products/inspect

Am I Responsive?

এটি আপনার ওয়েবসাইট রেস্পন্সিভ কিনা তা পরীক্ষা করে দেবে। যদি প্রয়োজন হয় নিচের লিংকে চলে যান।

http://ami.responsivedesign.is/

 আশা করি সব প্লাগিন এবং রিসোর্স আপনাদের উপকারে আসবে। সবাইকে হ্যাপি কোডিং।  

 

 

 

comments

featuredSponsored Tunesআউটসোর্সিংটিপস এন্ড ট্রিকসবিজ্ঞান ও প্রযুক্তি