ساخت سایت ریسپانسیو یا واکنش گرا چیست؟ چرا مدتی میباشد ریسپانسیو بودن وبسایت بسیار اساسی شده است و همه از برخورد گرایی سایت کلام می‌زنند؟ وب سایت‌های ریسپانسیو چه ویژگی‌ها و مزیت‌هایی دارند که آن ها را از تارنما‌هایی که ریسپانسیو نیستند مستقل می‌کند؟ به‌این سوال‌های اساسی در وب دیزاین در این نوشته ی علمی جواب خواهم بخشید. بگذارید مثالی بزنم تا پیشین‌از هرچیز التفات آیتم عکس العمل‌گرابودن یا نبودن وب سایت‌ها بیشتر روشن خواهد شد.
شما را نمی‌دانم ولی من با درگاه پرداخت آنلاین بانک سامان نقص دارم. هنگامی میخواهم از خدمات الکترونیکی این بانک با لپ‌تاپم استعمال کنم هیچ مشکلی نیست. ولی درصورتی که بخواهم از گوشی وارد نت بانک سامان شوم و کاری را انجام دهم، عذاب‌آور میباشد. هیچ‌چیز در شیت‌ی موبایلم معین نمی‌شود. مدام می بایست کاغذ را بزرگ کنم که خب همین مشکلات دیگری را درست می‌کند. انگار نت بانک را تنها برای دسکتاپ ۱۳ اینچی طراحی کردند.
میپندارم این تجارب‌ی تلخ را شما هم دارید. چون خیلی از ما بیشتروقت‌ها کارهای آنلاین را با موبایل یا تبلت جاری ساختن می دهیم. برای شما هم پیش آمده که سایتی را با تلفن همراه باز می کنید و با خودتان می‌گویید: ای کاش این برگه را باز نمی‌کردم! چون تمامی‌چیز به‌هم ریخته میباشد و هیچ المانی در شیت رمز جای خودش نیست. می‌دانید استدلال این به‌هم‌ریختگی چیست؟ وب سایت برخورد گرا طراحی نشده میباشد.
آنچه در این نوشته خوا هیم داشت
طراحی وب سایت برخورد گرا (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 در ساخت سایت عکس العمل گرا بسیار سهم داراست.
۴. طراحی ریسپانسیو همان‌قدرکه مهم است ممکن هست مشقت بار و غامض هم باشد. طراح وبسایت میتواند از فریمورک‌های مختلفی کمک بگیرد و صفحه ارایی واکنش گرا را سهل وآسان‌تر ایفا دهد.
۵. در صورتی طراح وبسایت با عکس العمل گرایی و تکنیک‌های آن آشنا نباشد، انگار با وب طراحی صفحه آشنا نیست. به‌همین‌استدلال، در زمان طراحی وب سایت اصول و تکنیک‌های مهم برای برخورد‌گرایی وبسایت و همچنین کار با بوت استرپ آموزش داده میشود.
- چهارشنبه ۱۶ آذر ۰۱ ۰۹:۱۲
- ۲۰ بازديد
- ۰ ۰
- ۰ نظر