طراحی سایت اختصاصی

۳. Media Query
مهم ترین تکنیک در ساخت وب سایت عکس العمل گرا Media Queries در CSS میباشد. این قابلیت در CSS2 معرفی شد و در CSS3 بدون نقص‌خیس شد. طراح با یاری‌به چنگ آوردن از تگ media@ در CSS قادر است خصوصیت‌های دستگاه‌های گوناگون (رسانه‌ها) را آزمایش نماید و براساس فیض‌ی آزمایش کمی را برای المانی تعریف و تمجید نماید. پهنا و طول و همینطور Viewport (پاره ای از ورقه‌ی اینترنت که استفاده کننده می‌بیند) در هر دستگاه معلوم میباشد. به عنوان مثال در ورقه‌اکران تلویزیون،‌ کامپیوتر یا این که لپ‌تاپ دستکم Viewport عددی معین میباشد، یعنی ۸۰۰ پیکسل. اینترنت دیزاینر قادر است طوری کد CSS را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن محاسبه گردد و در صورتی دست‌کم ۸۰۰ پیکسل بود، آن‌وقت المانی یه خرده طراحی سایت اخصاصی معین پیدا نماید (قطعه‌کد ذیل).
قطعه‌کد ذیل نمونه دیگری برای این قابلیت و امکان بسیار کاربردی در CSS میباشد. در صورتی Viewport در دستگاهی که وب سایت را گشوده می‌نماید ۴۸۰ پیکسل یا این که بیشتر باشد، منو سمت چپ برگه ظواهر شود؛ وگرنه منو در بالای محتوای کاغذ اکران داده می گردد.
مزیت ها و خصوصیت‌ های اینترنت طراحی صفحه ریسپانسیو
فکرمی کنم مزیت‌های وبسایت‌های عکس العمل گرا تاحد متعددی معین شد‌ه‌است. به عبارتی‌طور که اشاره شد، اینترنت دیزاینرها در دنیایی وب سایت پیاده سازی می‌نمایند که هرروز در آن دستگاهی با خصوصیت‌هایی تازه روانه‌ی بازار می شود. علاوه‌بر دستگاه‌ها، یوزرها از مرورگرها (Google Chrome, Microsoft Edge, Mozilla Firefox , Safari , …) مختلفی به کارگیری می‌نمایند. هر مرورگر پیکربندی CSS خاص خودش را داراست و در‌صورتی‌که تارنما عکس العمل گرا پیاده سازی نشده باشد، ممکن میباشد به‌صدق در برخی مرورگرها اکران داده نشود. پس وبسایت‌های ریسپانسیو به دور و اطراف مرورگرها هم عکس العمل آرم می دهند.

پیاده سازی برخورد گرا نوعی‌از تامل صفحه آرایی در طراحی سایت میباشد. منش و نگاهی به اینترنت صفحه ارایی میباشد که سعی وبسایت را ضمانت می‌نماید. پس صفحه ارایی ریسپانسیو برای استفاده کننده، مالک تارنما (مخصوصا وب سایت‌های فروشگاهی) و پیشرفت‌دهنده مزایایی داراست:

بهبود تجربیات کاربری وبسایت: تارنما‌ها برای هدف ها مشخصی پیاده سازی می گردند. وبسایت‌ها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا‌هستند که یوزرها از آنان بازدید نمایند. در شرایطی که وب سایت تجربیات کاربری خیر و خوبی نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
امداد به بهینه سازی تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما اساسی میباشد زیرا به تجارب کاربری ربط پیدا می‌نماید. بدین ترتیب، سایتی که برخورد گرا صفحه آرایی نشده میباشد،‌ برای سئوشدن هم خلل خواهد داشت.
صرفه‌جویی در وقت و هزینه: درصورتی که قرار باشد از هر وبسایت نسخه‌های مختلفی پیاده سازی و بسط داده گردد، انگار مالک وبسایت بایستی هزینه‌ی پیاده سازی یک‌سری وب سایت را بپردازد. و اینترنت دیزاینر هم بایستی برای پیاده سازی تعدادی وب سایت مجال بگذارد.

فریمورک‌‌ها و ابزارهای ساخت سایت برخورد گرا
درصورتی که مقداری در تکنیک‌هایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه نمائید، متوجه میشوید که محاسبات و نسبت‌سنجی‌های متعددی داراست. پیدا‌کردن تک تک نسبت‌های صحیح و کدنویسی آنها، مخصوصا در صورتیکه تعداد عکس‌ها و المان‌های صفحه های تارنما زیاد باشد، شغل سادگی وجود ندارد. بایستی دستگاه‌های متعدد و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.

به‌همین‌برهان، کمپانی‌های قابل انعطاف‌افزاری متعددی فریمورک‌هایی را برای شل‌ترکردن ساخت سایت ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژه‌‌ای که بایستی پیاده سازی نماید و همینطور شناخت‌اش با فریمورک‌ها می تواند یکی از را تعیین نماید. ولی به طبع مشهور‌ترین و شایسته ترین فریمورک برای اینترنت طراحی صفحه برخورد گرا بوت استرپ (Bootstrap) میباشد. Bulma.io فریمورک بدون پول و منبع گشوده دیگری برای پیاده سازی به طور کامل ریسپانسیو میباشد که طراح را از کدنویسی CSS بی‌نیاز می‌نماید.

درکنار فریمورک‌ها، ابزاهایی هم برای آزمایش‌کردن برخورد‌گرایی تارنما وجود دارااست. با این ابزارها به‌راحتی می‌قدرت فهمید وب سایت ریسپانسیو پیاده سازی گردیده یا این که خیر. اولی و شایسته ترین ابزار Google Mobile-Friendly Test میباشد. کافی میباشد نشانی وبسایت را بدین ابزار بدهید تا در یک‌سری دقیقه جواب را به شما بدهد. دو‌مین ابزار Chrome DevTools (Developer Tools) میباشد. کروم تیم ابزارهایی برای توسعه و گسترش‌دهندگان اینترنت دارااست که به‌تیتر Extensions به‌راحتی به کروم افزوده می‌گردد.

مثال وب سایت ریسپانسیو
پیشین‌از مجموع‌کردن این نوشته ی علمی، عالی میباشد مثال‌ای از تارنما عکس العمل گرا را باهم ببینیم. وبسایت عکس العمل‌ گرای ذیل وابسته به کمبریج دیکشنری میباشد. اولی تصویر وبسایت را در یک اسکرین ۱۳ اینچی نشانه می دهد و تصویر دوم در یک اسکرین ۴.۷ اینچی.

برای دیدن مثال‌های بیشتر از تارنما‌های ریسپانسیو در دستگاه‌های گوناگون، سفارش میکنم مطلقا به تارنما Mediaqueri.es خصوصی بزنید و تصاویر چندصد وبسایت‌ برخورد گرا را در دستگاه‌های متفاوت ملاحظه کنید.

۳. Media Query
مهم ترین تکنیک در ساخت وب سایت عکس العمل گرا Media Queries در CSS میباشد. این قابلیت در CSS2 معرفی شد و در CSS3 بدون نقص‌خیس شد. طراح با یاری‌به چنگ آوردن از تگ media@ در CSS قادر است خصوصیت‌های دستگاه‌های گوناگون (رسانه‌ها) را آزمایش نماید و براساس فیض‌ی آزمایش کمی را برای المانی تعریف و تمجید نماید. پهنا و طول و همینطور Viewport (پاره ای از ورقه‌ی اینترنت که استفاده کننده می‌بیند) در هر دستگاه معلوم میباشد. به عنوان مثال در ورقه‌اکران تلویزیون،‌ کامپیوتر یا این که لپ‌تاپ دستکم Viewport عددی معین میباشد، یعنی ۸۰۰ پیکسل. اینترنت دیزاینر قادر است طوری کد CSS را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن محاسبه گردد و در صورتی دست‌کم ۸۰۰ پیکسل بود، آن‌وقت المانی یه خرده طراحی سایت اخصاصی معین پیدا نماید (قطعه‌کد ذیل).
قطعه‌کد ذیل نمونه دیگری برای این قابلیت و امکان بسیار کاربردی در CSS میباشد. در صورتی Viewport در دستگاهی که وب سایت را گشوده می‌نماید ۴۸۰ پیکسل یا این که بیشتر باشد، منو سمت چپ برگه ظواهر شود؛ وگرنه منو در بالای محتوای کاغذ اکران داده می گردد.
مزیت ها و خصوصیت‌ های اینترنت طراحی صفحه ریسپانسیو
فکرمی کنم مزیت‌های وبسایت‌های عکس العمل گرا تاحد متعددی معین شد‌ه‌است. به عبارتی‌طور که اشاره شد، اینترنت دیزاینرها در دنیایی وب سایت پیاده سازی می‌نمایند که هرروز در آن دستگاهی با خصوصیت‌هایی تازه روانه‌ی بازار می شود. علاوه‌بر دستگاه‌ها، یوزرها از مرورگرها (Google Chrome, Microsoft Edge, Mozilla Firefox , Safari , …) مختلفی به کارگیری می‌نمایند. هر مرورگر پیکربندی CSS خاص خودش را داراست و در‌صورتی‌که تارنما عکس العمل گرا پیاده سازی نشده باشد، ممکن میباشد به‌صدق در برخی مرورگرها اکران داده نشود. پس وبسایت‌های ریسپانسیو به دور و اطراف مرورگرها هم عکس العمل آرم می دهند.

پیاده سازی برخورد گرا نوعی‌از تامل صفحه آرایی در طراحی سایت میباشد. منش و نگاهی به اینترنت صفحه ارایی میباشد که سعی وبسایت را ضمانت می‌نماید. پس صفحه ارایی ریسپانسیو برای استفاده کننده، مالک تارنما (مخصوصا وب سایت‌های فروشگاهی) و پیشرفت‌دهنده مزایایی داراست:

بهبود تجربیات کاربری وبسایت: تارنما‌ها برای هدف ها مشخصی پیاده سازی می گردند. وبسایت‌ها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا‌هستند که یوزرها از آنان بازدید نمایند. در شرایطی که وب سایت تجربیات کاربری خیر و خوبی نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
امداد به بهینه سازی تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما اساسی میباشد زیرا به تجارب کاربری ربط پیدا می‌نماید. بدین ترتیب، سایتی که برخورد گرا صفحه آرایی نشده میباشد،‌ برای سئوشدن هم خلل خواهد داشت.
صرفه‌جویی در وقت و هزینه: درصورتی که قرار باشد از هر وبسایت نسخه‌های مختلفی پیاده سازی و بسط داده گردد، انگار مالک وبسایت بایستی هزینه‌ی پیاده سازی یک‌سری وب سایت را بپردازد. و اینترنت دیزاینر هم بایستی برای پیاده سازی تعدادی وب سایت مجال بگذارد.

فریمورک‌‌ها و ابزارهای ساخت سایت برخورد گرا
درصورتی که مقداری در تکنیک‌هایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه نمائید، متوجه میشوید که محاسبات و نسبت‌سنجی‌های متعددی داراست. پیدا‌کردن تک تک نسبت‌های صحیح و کدنویسی آنها، مخصوصا در صورتیکه تعداد عکس‌ها و المان‌های صفحه های تارنما زیاد باشد، شغل سادگی وجود ندارد. بایستی دستگاه‌های متعدد و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.

به‌همین‌برهان، کمپانی‌های قابل انعطاف‌افزاری متعددی فریمورک‌هایی را برای شل‌ترکردن ساخت سایت ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژه‌‌ای که بایستی پیاده سازی نماید و همینطور شناخت‌اش با فریمورک‌ها می تواند یکی از را تعیین نماید. ولی به طبع مشهور‌ترین و شایسته ترین فریمورک برای اینترنت طراحی صفحه برخورد گرا بوت استرپ (Bootstrap) میباشد. Bulma.io فریمورک بدون پول و منبع گشوده دیگری برای پیاده سازی به طور کامل ریسپانسیو میباشد که طراح را از کدنویسی CSS بی‌نیاز می‌نماید.

درکنار فریمورک‌ها، ابزاهایی هم برای آزمایش‌کردن برخورد‌گرایی تارنما وجود دارااست. با این ابزارها به‌راحتی می‌قدرت فهمید وب سایت ریسپانسیو پیاده سازی گردیده یا این که خیر. اولی و شایسته ترین ابزار Google Mobile-Friendly Test میباشد. کافی میباشد نشانی وبسایت را بدین ابزار بدهید تا در یک‌سری دقیقه جواب را به شما بدهد. دو‌مین ابزار Chrome DevTools (Developer Tools) میباشد. کروم تیم ابزارهایی برای توسعه و گسترش‌دهندگان اینترنت دارااست که به‌تیتر Extensions به‌راحتی به کروم افزوده می‌گردد.

مثال وب سایت ریسپانسیو
پیشین‌از مجموع‌کردن این نوشته ی علمی، عالی میباشد مثال‌ای از تارنما عکس العمل گرا را باهم ببینیم. وبسایت عکس العمل‌ گرای ذیل وابسته به کمبریج دیکشنری میباشد. اولی تصویر وبسایت را در یک اسکرین ۱۳ اینچی نشانه می دهد و تصویر دوم در یک اسکرین ۴.۷ اینچی.

برای دیدن مثال‌های بیشتر از تارنما‌های ریسپانسیو در دستگاه‌های گوناگون، سفارش میکنم مطلقا به تارنما Mediaqueri.es خصوصی بزنید و تصاویر چندصد وبسایت‌ برخورد گرا را در دستگاه‌های متفاوت ملاحظه کنید.