ساخت وب سایت واکنش گرا (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 سری بزنید و تصاویر چندصد سایت عکس العمل گرا را در دستگاههای مختلف ملاحظه کنید.
اصول ساخت سایت واکنش گرا
جمعبندی و بهرهگیری
۱. ساخت سایت بایستی برخورد گرا باشد. برخورد گرایی با seo تارنما رابطه دارااست و بر تجارب کاربری و شیوهی تعامل استفاده کننده با وبسایت نیز اثر بدون واسطه میگذارد.
۲. در طراحی سایت ریسپانسیو تمامیچیز به نسبتها (نسبت المانها بایکدیگر) و موقعیتی که المانها در ورقه دارند برمیشود.
۳. 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 سری بزنید و تصاویر چندصد سایت عکس العمل گرا را در دستگاههای مختلف ملاحظه کنید.
اصول ساخت سایت واکنش گرا
جمعبندی و بهرهگیری
۱. ساخت سایت بایستی برخورد گرا باشد. برخورد گرایی با seo تارنما رابطه دارااست و بر تجارب کاربری و شیوهی تعامل استفاده کننده با وبسایت نیز اثر بدون واسطه میگذارد.
۲. در طراحی سایت ریسپانسیو تمامیچیز به نسبتها (نسبت المانها بایکدیگر) و موقعیتی که المانها در ورقه دارند برمیشود.
۳. 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 سری بزنید و تصاویر چندصد سایت عکس العمل گرا را در دستگاههای مختلف ملاحظه کنید.
اصول ساخت سایت واکنش گرا
جمعبندی و بهرهگیری
۱. ساخت سایت بایستی برخورد گرا باشد. برخورد گرایی با seo تارنما رابطه دارااست و بر تجارب کاربری و شیوهی تعامل استفاده کننده با وبسایت نیز اثر بدون واسطه میگذارد.
۲. در طراحی سایت ریسپانسیو تمامیچیز به نسبتها (نسبت المانها بایکدیگر) و موقعیتی که المانها در ورقه دارند برمیشود.
۳. 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 سری بزنید و تصاویر چندصد سایت عکس العمل گرا را در دستگاههای مختلف ملاحظه کنید.
اصول ساخت سایت واکنش گرا
جمعبندی و بهرهگیری
۱. ساخت سایت بایستی برخورد گرا باشد. برخورد گرایی با seo تارنما رابطه دارااست و بر تجارب کاربری و شیوهی تعامل استفاده کننده با وبسایت نیز اثر بدون واسطه میگذارد.
۲. در طراحی سایت ریسپانسیو تمامیچیز به نسبتها (نسبت المانها بایکدیگر) و موقعیتی که المانها در ورقه دارند برمیشود.
۳. CSS در طراحی وب واکنش گرا بسیار سهم دارااست.
۴. پیاده سازی ریسپانسیو به عبارتیقدرکه اصلی است ممکن است سخت و پیچیده هم باشد. طراح سایت می تواند از فریمورکهای مختلفی کمک بگیرد و صفحه ارایی برخورد گرا را راحتخیس اعمال دهد.
۵. درصورتی که طراح وب سایت با برخورد گرایی و تکنیکهای آن آشنا نباشد، انگار با اینترنت صفحه ارایی آشنا وجود ندارد. بههمینعامل، در طی پیاده سازی وب سایت اصول و تکنیکهای اساسی برای عکس العملگرایی وب سایت و همینطور عمل با بوت استرپ یادگرفتن داده می گردد.
سئوی آن پیج برای ارتقاء ورودی