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