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