طراحی سایت عکس العمل گرا (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 در ساخت سایت برخورد گرا بسیار سهم دارد.
۴. طراحی ریسپانسیو همانقدرکه مهم میباشد ممکن می باشد طاقت فرسا و بغرنج هم باشد. طراح تارنما میتواند از فریمورکهای مختلفی امداد بگیرد و دیزاین عکس العمل گرا را سهل و آسانتر اجرا دهد.
۵. در شرایطیکه طراح تارنما با واکنش گرایی و تکنیکهای آن آشنا نباشد، انگار با وب طراحی صفحه آشنا نیست. بههمینبرهان، در طول طراحی وبسایت اصول و تکنیکهای اصلی برای برخوردگرایی سایت و همچنین فعالیت با بوت استرپ آموزش داده میگردد.
پس طراح و بسطدهندهی وبسایت بایستی به این نکتهی خیلی اصلی دقت کند که سایتی که میسازد می بایست در دستگاههای متعدد با صفحهنمایشهایی در بعد ها و رزولوشنهای گوناگون نمایش داده خواهد شد. وب دیزاینر چطور می تواند سایتی طراحی کند که در هر شیت نمایشی (بسیار تعالی تا بسیار کوچک) درست و بی نقص نمایش داده شود؟ یعنی سایز عکسها و نوشتهها با سایز برگهی نمایش متناسب خواهد شد و چیزی در برگه بههم نریزد؟
یک چاره این میباشد که چندین نسخه از یک وب سایت برای دستگاههای گوناگون طراحی گردد. یعنی از جمله یک نسخه برای دسکتاپ و یک نسخه برای گوشی با 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 در ساخت سایت برخورد گرا بسیار سهم دارد.
۴. طراحی ریسپانسیو همانقدرکه مهم میباشد ممکن می باشد طاقت فرسا و بغرنج هم باشد. طراح تارنما میتواند از فریمورکهای مختلفی امداد بگیرد و دیزاین عکس العمل گرا را سهل و آسانتر اجرا دهد.
۵. در شرایطیکه طراح تارنما با واکنش گرایی و تکنیکهای آن آشنا نباشد، انگار با وب طراحی صفحه آشنا نیست. بههمینبرهان، در طول طراحی وبسایت اصول و تکنیکهای اصلی برای برخوردگرایی سایت و همچنین فعالیت با بوت استرپ آموزش داده میگردد.
طراحی سایت عکس العمل گرا (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 در ساخت سایت برخورد گرا بسیار سهم دارد.
۴. طراحی ریسپانسیو همانقدرکه مهم میباشد ممکن می باشد طاقت فرسا و بغرنج هم باشد. طراح تارنما میتواند از فریمورکهای مختلفی امداد بگیرد و دیزاین عکس العمل گرا را سهل و آسانتر اجرا دهد.
۵. در شرایطیکه طراح تارنما با واکنش گرایی و تکنیکهای آن آشنا نباشد، انگار با وب طراحی صفحه آشنا نیست. بههمینبرهان، در طول طراحی وبسایت اصول و تکنیکهای اصلی برای برخوردگرایی سایت و همچنین فعالیت با بوت استرپ آموزش داده میگردد.
پس طراح و بسطدهندهی وبسایت بایستی به این نکتهی خیلی اصلی دقت کند که سایتی که میسازد می بایست در دستگاههای متعدد با صفحهنمایشهایی در بعد ها و رزولوشنهای گوناگون نمایش داده خواهد شد. وب دیزاینر چطور می تواند سایتی طراحی کند که در هر شیت نمایشی (بسیار تعالی تا بسیار کوچک) درست و بی نقص نمایش داده شود؟ یعنی سایز عکسها و نوشتهها با سایز برگهی نمایش متناسب خواهد شد و چیزی در برگه بههم نریزد؟
یک چاره این میباشد که چندین نسخه از یک وب سایت برای دستگاههای گوناگون طراحی گردد. یعنی از جمله یک نسخه برای دسکتاپ و یک نسخه برای گوشی با 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 در ساخت سایت برخورد گرا بسیار سهم دارد.
۴. طراحی ریسپانسیو همانقدرکه مهم میباشد ممکن می باشد طاقت فرسا و بغرنج هم باشد. طراح تارنما میتواند از فریمورکهای مختلفی امداد بگیرد و دیزاین عکس العمل گرا را سهل و آسانتر اجرا دهد.
۵. در شرایطیکه طراح تارنما با واکنش گرایی و تکنیکهای آن آشنا نباشد، انگار با وب طراحی صفحه آشنا نیست. بههمینبرهان، در طول طراحی وبسایت اصول و تکنیکهای اصلی برای برخوردگرایی سایت و همچنین فعالیت با بوت استرپ آموزش داده میگردد.
ابزارها و شیوههای یافتن شایسته ترین مجال پست گذاشتن در اینستاگرام