فریمورک‌‌ها و ابزارهای طراحی سایت واکنش گرا

حامد 
  بازدید : 32
چهارشنبه 16 آذر 1401 زمان : 9:12 


1
2
3
4
5

ساخت سایت ریسپانسیو یا عکس العمل‌‌ گرا چیست؟ چرا مدتی میباشد ریسپانسیو بودن وبسایت بسیار اساسی گردیده‌است و همه از برخورد گرایی تارنما صحبت میزنند؟ سایت‌های ریسپانسیو چه ویژگی‌ها و مزیت‌هایی دارا هستند که آنان‌را از سایت‌هایی که ریسپانسیو نیستند غیر وابسته می‌کند؟ به این سوال‌های اساسی در وب صفحه ارایی در این نوشته ی علمی جواب خواهم بخشید. بگذارید مثالی بزنم تا قبل‌از هرچیز التفات آیتم برخورد‌گرابودن یا نبودن وبسایت‌ها بیشتر روشن شود.

طراحی سایت در مشهد

رایا پارس

ahrefs

طراحی سایت

شما را نمی‌دانم البته من با درگاه پرداخت آنلاین بانک سامان نقص‌ دارم. هنگامی می‌خواهم از خدمات الکترونیکی این بانک با لپ‌تاپم استعمال کنم هیچ مشکلی نیست. البته در‌حالتی که بخواهم از تلفن همراه وارد نت بانک سامان شوم و کاری را انجام دهم، عذاب‌آور می باشد. هیچ‌چیز در ورقه‌ی موبایلم معلوم نمی‌شود. مدام می بایست کاغذ را گران قدر کنم که خب همین خطاها دیگری را درست می‌کند. انگار نت بانک را فقط برای دسکتاپ ۱۳ اینچی طراحی کردند.
فکر میکنم این تجارب‌ی تلخ را شما هم دارید. چون خیلی‌ از ما بیشتروقت‌ها کارهای آنلاین را با موبایل یا تبلت ایفا می‌دهیم. برای شما هم پیش آمده که سایتی را با گوشی باز می کنید و با خودتان میگویید: ای کاش این شیت را باز نمی‌کردم! چون همگی‌چیز به‌هم ریخته می باشد و هیچ المانی در برگه سر جای خودش نیست. می دانید دلیل این به‌هم‌ریختگی چیست؟ تارنما عکس العمل گرا طراحی نشده هست.
آنچه در‌این نوشته خوا هیم داشت
طراحی سایت عکس العمل گرا (Responsive Web Design)
اصول و تکنیک های اصلی در برخورد گرایی وب سایت (Website Responsiveness)
۱. Fluid Grids
۲. Fluid Images
۳. Media Query
مزیت ها و ویژگی‌ های وب طراحی صفحه ریسپانسیو
فریمورک‌‌ها و ابزارهای ساخت وب سایت واکنش گرا
نمونه وبسایت ریسپانسیو
عده‌‌بندی و سود‌گیری
مولف
مهدیه اسماعیلی
طراحی وب عکس العمل گرا (Responsive Web Design)
در صورتی نگاهی به تاریخچه طراحی وب بیندازیم، معین می‌گردد که طراحی وب سایت وقتی آغاز شد که موبایل و تبلت و تلویزیون هوشمندی وجود نداشت. وب صفحه ارایی برای دسکتاپ‌هایی با اندازه‌های معین و معین انجام می‌شد و آحاد. البته خب تمامی‌ی ما می‌دانیم که امروز کاربران تنها با کامپیوتر به اینترنت وصل نمیشوند. دستگاه‌های مختلفی (تلویزیون‌ها، لپ‌تاپ‌ها، تبلت‌ها و گوشی‌ها) با بعدها مختلف این قابلیت و امکان را به کاربران می دهند تا به اینترنت متصل شوند.

پس طراح و بسط‌دهنده‌ی وب سایت باید به این نکته‌ی خیلی اساسی توجه کند که سایتی که می‌سازد بایستی در دستگاه‌های متفاوت با صفحه‌‌نمایش‌هایی در بعد ها و رزولوشن‌های مختلف نمایش داده شود. وب دیزاینر چطور قادر است سایتی طراحی کند که در هر صفحه نمایشی (بسیار تبارک تا بسیار کوچک) درست و بی نقص نمایش داده خواهد شد؟ یعنی سایز عکس‌ها و نوشته‌ها با سایز صفحه‌ی نمایش متناسب خواهد شد و چیزی در برگه به‌هم نریزد؟
یک راه حل این میباشد که یک سری نسخه از یک تارنما برای دستگاه‌های مختلف طراحی خواهد شد. یعنی برای مثال یک نسخه برای دسکتاپ و یک نسخه برای موبایل با URL متعدد. ناگفته پیداست که این‌راه‌حل پرهزینه و نه‌چندان کاربردی است. البته راه حل‌های دیگری نیز توصیه گردیده‌است که هرمورد درعمل اشتباهات دیگری را ساخت‌و‌ساز می‌کنند و نقص‌ را نیز کاملا حل نمی‌‌کنند. در سال ۲۰۱۰ بود که Ethan Marcotte ایده‌ای نو را به دنیای وب طراحی صفحه معرفی کرد: Responsive Design. او ایده‌ی طراحی وب سایت ریسپانسیو را از مفهومی مشابه در معماری (Responsive Architecture) گرفته بود. ریسپانسیو‌بودن وب طراحی صفحه یا واکشن گرا کردن وبسایت کامل‌ترین و بهترین چاره می باشد.
[…] the concept of responsive web design (RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
مضمون‌ طراحی وب واکنش گرا گروه‌ای از تکنیک‌ها را دربرمی‌گیرد که به صفحه های وب امکان میدهد تا دکوراسیون تمامی المان‌ها و ظاهرشان را متناسب‌با عرض‌های متعدد ورقه‌نمایش، رزولوشن‌های متعدد و… تغییر و تحول دهند.
اصول و تکنیک های اساسی در برخورد گرایی سایت (Website Responsiveness)
روشن شد که منظور از عکس العمل گرایی وبسایت این میباشد که وبسایت (ساختار و کل المان‌های بصری آن) به محیطی (دستگاهی) که قرار میباشد در آن نمایش داده گردد و ویژگی‌های خاص آن اطراف واکنش علامت دهد و خودش را با آن تطبیق دهد. اصل مهم در طراحی ریسپانسیو انعطاف‌پذیری (Flexibility) است. درواقع‌، قدم اولیه در طراحی صفحه ریسپانسیو انعطاف‌پذیری میباشد. طراح و پیشرفت‌دهنده‌ی وب بایستی این‌طور درنگ کند که تا‌جایی‌که امکانش می‌باشد باید کلیه‌چیز انعطاف‌پذیر طراحی گردد.
اصل دوم این میباشد که طراح و بسط‌دهنده می بایست در پی بهترین شیوه‌ها و تکنیک‌هایی باشد که به طراحی برخورد گرا یاری می‌کند. نکته اینجاست که از سال ۲۰۱۰ تا امروز پیشرفت‌های زیادی در وب دیزاین و تکنیک‌های لازم برای ریسپانسیو‌بودن سایت اتفاق افتاده میباشد. این درست است که مجموعه تکنیک‌های مهم در طراحی واکنش گرا ۳ تکنیک می‌باشد، اما هر طراح و توسعه و گسترش‌دهنده‌ای براساس پروژه‌ای که داراست میتواند و ممکن می باشد از تکنیک‌های دیگر هم استعمال کند.
برای اینکه وب دیزاین واکشن گرا باشد در طراحی و پیشرفت‌ی تارنما می بایست حداقل ۳ تکنیک زیر رعایت شده باشد:
ریسپانسیو وب صفحه آرایی
۱. Fluid Grids
در هر شیت از سایت المان‌های مختلفی ازجمله عکس‌ها و متن‌ها بایستی کنار هم قرار بگیرند. روش‌ی قرارگرفتن این المان‌ها کنار هم بسیار مهم می‌باشد چون می بایست به‌گونه‌ای باشد که محتوای متنی برگه خوانایی و وضوح ما یحتاج را داشته باشد. سیستم Grid مجمو‌عه‌ای از ستون‌ها و ردیف‌ها (که باطن آنان containers برای قراردادن المان‌های مختلف تعریف میشود) میباشد که ساختار اصلی دکوراسیون قسمت‌های متفاوت وبسایت را برای طراح مشخص می‌کند. در طراحی وب سایت سیستم‌های مختلفی برای گریدبندی صفحه ها وجود داراست. اما از هر سیستمی که طراح وب سایت برای گریدبندی به کارگیری کند،‌ با اندازه‌ها سروکار داراست.
سوال اصلی این میباشد که اندازه‌ی فونت متن‌ها و دیگر لغت ها در ورقه و همچنین جمله ها در Gridبندی شیت چطور تنظیم شود تا آن ها در هر دستگاهی درست و واضح نمایش داده شوند؟ در ساخت سایت برای معلوم‌کردن اندازه‌ها می گردد از واحدهای مختلفی (pixel, percentage or ems) امداد گرفت. در طراحی برخورد گرا نباید در گریدبندی از اندازه‌ی ثابت بهره مند شد. به‌جای اندازه‌ی ثابت می بایست از نسبت‌ها و تبدیل‌کردن نسبت‌ها به درصد امداد گرفت. یعنی نخستین بایستی ببینیم المانی که میخواهیم اندازه‌ی آن را مشخص کنیم چه نسبتی با container‌ای که داخلش قرار می‌گیرد دارد. آنگاه آن نسبت را به درصد تبدیل می‌کنیم و به آن المان می‌دهیم.
۲. Fluid Images
هر عکسی که در وبسایت قرار داده می‌شود اندازه‌ای داراست. وب دیزاینر با‌اعتنا‌به عامل ها مختلف به عکس‌ها اندازه میدهد. در طراحی ریسپانسیو طوری باید به عکس‌ها اندازه اعطا کرد که اندازه‌ی آنان در اسکرین‌های متفاوت کوچک یا والا خواهد شد. برای برخورد گرایی عکس‌های تارنما می‌شود از تکنیک‌های مختلفی استفاده نمود. دارای اسم و رسم‌ترین و وارفته‌ترین تکنیک منفعت‌خریداری نمودن‌از یک کد بی آلایش‌ی CSS برای هر عکس میباشد.
img { max-width: 100%; }
درین تکنیک برای اندازه‌دادن به عکس‌ها از اندازه‌ی ثابت به کار گیری نمی‌شود. به‌جای آن طراح وب سایت حداکثر عرض را برای هر عکس ۱۰۰٪ قرار می‌دهد. این کد یعنی عرض هر عکس ۱۰۰٪ عرض اسکرین یا مرورگر باشد. پس وقتی عرض اسکرین یا مرورگر نادر گردد عرض عکس هم به‌همان نسبت نادر می شود.
۳. Media Query
مهم‌ترین تکنیک در طراحی وب سایت برخورد گرا Media Queries در CSS هست. این قابلیت و امکان در CSS2 معرفی شد و در CSS3 بی نقص‌تر شد. طراح با امداد‌فراهم کردن از تگ media@ در CSS می تواند ویژگی‌های دستگاه‌های متفاوت (رسانه‌ها) را تست کند و براساس سود‌ی تست مقداری را برای المانی تعریف و تمجید کند. عرض و ارتفاع و همچنین Viewport (کمی از برگه‌ی وب که مخاطب می‌بیند) در هر دستگاه معلوم می‌باشد. مثلا در شیت‌نمایش تلویزیون،‌ کامپیوتر یا لپ‌تاپ دست کم Viewport عددی مشخص میباشد، یعنی ۸۰۰ پیکسل. وب دیزاینر می‌تواند طوری کد CSS را بنویسید که شروع عرض و ارتفاع دستگاه یا رزولوشن آن پژوهش خواهد شد و در شرایطی‌که دست کم ۸۰۰ پیکسل بود، آن‌وقت المانی یه خرده معین پیدا کند (قطعه‌کد زیر).
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}
قطعه‌کد ذیل مثال دیگری برای این امکان بسیار کاربردی در CSS است. در صورتی Viewport در دستگاهی که تارنما را باز می‌کند ۴۸۰ پیکسل یا بیشتر باشد، منو سمت چپ کاغذ ظاهر شود؛ وگرنه منو در بالای محتوای ورقه نمایش داده می‌شود.
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
مزیت ها و ویژگی‌ های وب صفحه ارایی ریسپانسیو
فکرمیکنم مزیت‌های وب سایت‌های عکس العمل گرا تاحد زیادی مشخص شده است. همان‌طور که اشاره شد، وب دیزاینرها در دنیایی وب سایت طراحی می‌کنند که هرروز در آن دستگاهی با ویژگی‌هایی نو روانه‌ی بازار میشود. علاوه‌بر دستگاه‌ها، کاربران از مرورگرها (Google Chrome, Microsoft Edge, Mozilla Firefox , Safari , …) مختلفی استعمال می‌کنند. هر مرورگر تنظیمات CSS خاص خودش را داراست و در حالتی‌که وب سایت واکنش گرا طراحی نشده باشد، ممکن میباشد به‌صحت در بعضا مرورگرها نمایش داده نشود. پس سایت‌های ریسپانسیو به فضا مرورگرها هم برخورد علامت میدهند.
طراحی عکس العمل گرا نوعی‌از درنگ صفحه آرایی در طراحی سایت است. روش و نگاهی به وب صفحه ارایی می‌باشد که کوشش وب سایت را تضمین می‌کند. پس صفحه ارایی ریسپانسیو برای کاربر، مالک تارنما (مخصوصا تارنما‌های فروشگاهی) و توسعه و گسترش‌دهنده مزایایی دارد:
بهبود تجربیات کاربری سایت: وب سایت‌ها برای اهداف مشخصی طراحی میگردند. وبسایت‌ها با هر هدفی که طراحی و ساخته شوند نیاز دارند که کاربران از آنان بازدید کنند. در‌حالتی که تارنما تجارب کاربری خیر نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
امداد به سئو وب سایت: برای موتورهای جستجو هم واکنش گرایی سایت اساسی می‌باشد چون به تجربه کاربری ربط پیدا می‌کند. به این ترتیب، سایتی که عکس العمل گرا طراحی صفحه نشده هست،‌ برای سئوشدن هم نقص‌ خواهد داشت.
صرفه‌جویی در وقت و هزینه: در صورتی‌که قرار باشد از هر سایت ورژن‌های مختلفی طراحی و توسعه داده گردد، انگار صاحب و مالک تارنما می بایست هزینه‌ی طراحی یکسری سایت را بپردازد. و وب دیزاینر هم می بایست برای طراحی یکسری سایت زمان بگذارد.
فریمورک‌‌ها و ابزارهای ساخت وب سایت برخورد گرا
در صورتیکه یه خرده در تکنیک‌هایی که برای طراحی ریسپانسیو ضروری می‌باشند دقت فرمایید، متوجه می شوید که محاسبات و نسبت‌سنجی‌های زیادی دارد. پیدا‌کردن مجموع نسبت‌های درست و کدنویسی آن ها، مخصوصا در شرایطی که تعداد عکس‌ها و المان‌های صفحه ها وبسایت زیاد باشد، فعالیت آسانی نیست. بایستی دستگاه‌های متعدد و مرورگرهای مختلف و جزئیات زیادی را درنظر گرفت.
به‌همین‌استدلال، شرکت‌های نرم‌افزاری زیادی فریمورک‌هایی را برای وا رفته‌ترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژه‌‌ای که باید طراحی کند و همچنین آشنایی‌اش با فریمورک‌ها قادر است یکی‌از را انتخاب کند. البته قطعا معروف‌ترین و بهترین فریمورک برای وب صفحه آرایی برخورد گرا بوت استرپ (Bootstrap) می‌باشد. Bulma.io فریمورک مجانی و منبع باز دیگری برای طراحی به طور کامل ریسپانسیو می‌باشد که طراح را از کدنویسی CSS بی‌نیاز می‌کند.
فریمورک ها و ابزار های طراحی ریسپانسیو
درکنار فریمورک‌ها، ابزاهایی هم برای تست‌کردن عکس العمل‌گرایی وب سایت وجود دارد. با این ابزارها به‌راحتی می‌قدرت فهمید سایت ریسپانسیو طراحی شده یا نه. اولی و بهترین ابزار Google Mobile-Friendly Test میباشد. کافی میباشد آدرس وبسایت را به‌این ابزار بدهید تا در یک‌سری دقیقه پاسخ را به شما بدهد. دومی ابزار Chrome DevTools (Developer Tools) می‌باشد. کروم مجموعه ابزارهایی برای توسعه‌دهندگان وب داراست که به‌عنوان Extensions به‌راحتی به کروم افزوده می شود.
نمونه سایت ریسپانسیو
قبل‌از تمام‌کردن این نوشته‌ی‌علمی، عالی هست نمونه‌ای از وبسایت عکس العمل گرا را باهم ببینیم. تارنما برخورد‌ گرای زیر متعلق به کمبریج دیکشنری است. اولی تصویر تارنما را در یک اسکرین ۱۳ اینچی نشان میدهد و تصویر دوم در یک اسکرین ۴.۷ اینچی.
نمونه سایت ریسپانسیو
خصوصیات و مزیت های وب سایت ریسپانسیو
برای دیدن نمونه‌های بیشتر از وب سایت‌های ریسپانسیو در دستگاه‌های مختلف، توصیه میکنم قطعا به تارنما Mediaqueri.es سری بزنید و تصاویر چندصد وبسایت‌ برخورد گرا را در دستگاه‌های متعدد مشاهده کنید.
اصول طراحی سایت برخورد گرا
گردآوری‌‌بندی و بهره‌گیری
۱. طراحی سایت بایستی عکس العمل گرا باشد. واکنش گرایی با سئو سایت ارتباط داراست و بر تجربه کاربری و شیوه‌ی تعامل کاربر با تارنما نیز تاثیر مستقیم می‌گذارد.
۲. در طراحی سایت ریسپانسیو کلیه‌چیز به نسبت‌ها (نسبت المان‌ها بایکدیگر) و موقعیتی که المان‌ها در کاغذ دارند برمی‌شود.
۳. CSS در ساخت سایت واکنش گرا بسیار سهم دارد.
۴. طراحی ریسپانسیو همان‌قدرکه اصلی میباشد ممکن میباشد سخت و بغرنج هم باشد. طراح تارنما میتواند از فریمورک‌های مختلفی کمک بگیرد و صفحه آرایی برخورد گرا را سهل‌تر ایفا دهد.
۵. در حالتی که طراح وب سایت با واکنش گرایی و تکنیک‌های آن آشنا نباشد، انگار با وب دیزاین آشنا نیست. به‌همین‌دلیل، در زمان طراحی سایت اصول و تکنیک‌های مهم برای برخورد‌گرایی وب سایت و همچنین فعالیت با بوت استرپ آموزش داده می‌شود.