طراحی وب برخورد گرا (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 خاص خودش را داراست و درصورتی که وبسایت برخورد گرا پیاده سازی نشده باشد، ممکن می باشد بهصدق در بعضی مرورگرها اکران داده نشود. پس وب سایتهای ریسپانسیو به دور و اطراف مرورگرها هم برخورد علامت میدهند.
پیاده سازی واکنش گرا نوعیاز تامل صفحه آرایی در طراحی وب سایت میباشد. طریق و نگاهی به اینترنت صفحه آرایی میباشد که کوشش تارنما را ضمانت مینماید. پس صفحه آرایی ریسپانسیو برای استفاده کننده، صاحب و مالک وب سایت (مخصوصا وبسایتهای فروشگاهی) و گسترشدهنده مزایایی داراست:
بهبود تجربیات کاربری تارنما: سایتها برای هدف ها مشخصی پیاده سازی می شوند. تارنماها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا هستند که یوزرها از آن ها بازدید نمایند. در شرایطیکه وبسایت تجارب کاربری خیر نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
یاری به seo تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما مهم میباشد زیرا به تجربیات کاربری ربط پیدا مینماید. بدین ترتیب، سایتی که عکس العمل گرا صفحه ارایی نشده می باشد، برای سئوشدن هم نقص خواهد داشت.
صرفهجویی در وقت و هزینه: در صورتیکه قرار باشد از هر وب سایت نسخههای مختلفی پیاده سازی و توسعه داده شود، انگار مالک وب سایت می بایست هزینهی پیاده سازی یکسری تارنما را بپردازد. و اینترنت دیزاینر هم می بایست برای پیاده سازی یکسری وب سایت مجال بگذارد.
فریمورکها و ابزارهای طراحی سایت برخورد گرا
چنانچه پاره ای در تکنیکهایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه کنید، متوجه می شوید که محاسبات و نسبتسنجیهای متعددی دارد. پیداکردن مجموع نسبتهای صحیح و کدنویسی آنان، مخصوصا در صورتیکه تعداد عکسها و المانهای صفحه های تارنما زیاد باشد، عمل سادگی وجود ندارد. می بایست دستگاههای گوناگون و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.
بههمینادله، کمپانیهای قابل انعطافافزاری متعددی فریمورکهایی را برای وارفتهترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژهای که می بایست پیاده سازی نماید و همینطور شناختاش با فریمورکها می تواند یکیاز را گزینش نماید. اما به طبع دارای اسم و رسمترین و شایسته ترین فریمورک برای اینترنت دیزاین برخورد گرا بوت استرپ (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 خاص خودش را داراست و درصورتی که وبسایت برخورد گرا پیاده سازی نشده باشد، ممکن می باشد بهصدق در بعضی مرورگرها اکران داده نشود. پس وب سایتهای ریسپانسیو به دور و اطراف مرورگرها هم برخورد علامت میدهند.
پیاده سازی واکنش گرا نوعیاز تامل صفحه آرایی در طراحی وب سایت میباشد. طریق و نگاهی به اینترنت صفحه آرایی میباشد که کوشش تارنما را ضمانت مینماید. پس صفحه آرایی ریسپانسیو برای استفاده کننده، صاحب و مالک وب سایت (مخصوصا وبسایتهای فروشگاهی) و گسترشدهنده مزایایی داراست:
بهبود تجربیات کاربری تارنما: سایتها برای هدف ها مشخصی پیاده سازی می شوند. تارنماها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا هستند که یوزرها از آن ها بازدید نمایند. در شرایطیکه وبسایت تجارب کاربری خیر نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
یاری به seo تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما مهم میباشد زیرا به تجربیات کاربری ربط پیدا مینماید. بدین ترتیب، سایتی که عکس العمل گرا صفحه ارایی نشده می باشد، برای سئوشدن هم نقص خواهد داشت.
صرفهجویی در وقت و هزینه: در صورتیکه قرار باشد از هر وب سایت نسخههای مختلفی پیاده سازی و توسعه داده شود، انگار مالک وب سایت می بایست هزینهی پیاده سازی یکسری تارنما را بپردازد. و اینترنت دیزاینر هم می بایست برای پیاده سازی یکسری وب سایت مجال بگذارد.
فریمورکها و ابزارهای طراحی سایت برخورد گرا
چنانچه پاره ای در تکنیکهایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه کنید، متوجه می شوید که محاسبات و نسبتسنجیهای متعددی دارد. پیداکردن مجموع نسبتهای صحیح و کدنویسی آنان، مخصوصا در صورتیکه تعداد عکسها و المانهای صفحه های تارنما زیاد باشد، عمل سادگی وجود ندارد. می بایست دستگاههای گوناگون و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.
بههمینادله، کمپانیهای قابل انعطافافزاری متعددی فریمورکهایی را برای وارفتهترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژهای که می بایست پیاده سازی نماید و همینطور شناختاش با فریمورکها می تواند یکیاز را گزینش نماید. اما به طبع دارای اسم و رسمترین و شایسته ترین فریمورک برای اینترنت دیزاین برخورد گرا بوت استرپ (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 خاص خودش را داراست و درصورتی که وبسایت برخورد گرا پیاده سازی نشده باشد، ممکن می باشد بهصدق در بعضی مرورگرها اکران داده نشود. پس وب سایتهای ریسپانسیو به دور و اطراف مرورگرها هم برخورد علامت میدهند.
پیاده سازی واکنش گرا نوعیاز تامل صفحه آرایی در طراحی وب سایت میباشد. طریق و نگاهی به اینترنت صفحه آرایی میباشد که کوشش تارنما را ضمانت مینماید. پس صفحه آرایی ریسپانسیو برای استفاده کننده، صاحب و مالک وب سایت (مخصوصا وبسایتهای فروشگاهی) و گسترشدهنده مزایایی داراست:
بهبود تجربیات کاربری تارنما: سایتها برای هدف ها مشخصی پیاده سازی می شوند. تارنماها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا هستند که یوزرها از آن ها بازدید نمایند. در شرایطیکه وبسایت تجارب کاربری خیر نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
یاری به seo تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما مهم میباشد زیرا به تجربیات کاربری ربط پیدا مینماید. بدین ترتیب، سایتی که عکس العمل گرا صفحه ارایی نشده می باشد، برای سئوشدن هم نقص خواهد داشت.
صرفهجویی در وقت و هزینه: در صورتیکه قرار باشد از هر وب سایت نسخههای مختلفی پیاده سازی و توسعه داده شود، انگار مالک وب سایت می بایست هزینهی پیاده سازی یکسری تارنما را بپردازد. و اینترنت دیزاینر هم می بایست برای پیاده سازی یکسری وب سایت مجال بگذارد.
فریمورکها و ابزارهای طراحی سایت برخورد گرا
چنانچه پاره ای در تکنیکهایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه کنید، متوجه می شوید که محاسبات و نسبتسنجیهای متعددی دارد. پیداکردن مجموع نسبتهای صحیح و کدنویسی آنان، مخصوصا در صورتیکه تعداد عکسها و المانهای صفحه های تارنما زیاد باشد، عمل سادگی وجود ندارد. می بایست دستگاههای گوناگون و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.
بههمینادله، کمپانیهای قابل انعطافافزاری متعددی فریمورکهایی را برای وارفتهترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژهای که می بایست پیاده سازی نماید و همینطور شناختاش با فریمورکها می تواند یکیاز را گزینش نماید. اما به طبع دارای اسم و رسمترین و شایسته ترین فریمورک برای اینترنت دیزاین برخورد گرا بوت استرپ (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 خاص خودش را داراست و درصورتی که وبسایت برخورد گرا پیاده سازی نشده باشد، ممکن می باشد بهصدق در بعضی مرورگرها اکران داده نشود. پس وب سایتهای ریسپانسیو به دور و اطراف مرورگرها هم برخورد علامت میدهند.
پیاده سازی واکنش گرا نوعیاز تامل صفحه آرایی در طراحی وب سایت میباشد. طریق و نگاهی به اینترنت صفحه آرایی میباشد که کوشش تارنما را ضمانت مینماید. پس صفحه آرایی ریسپانسیو برای استفاده کننده، صاحب و مالک وب سایت (مخصوصا وبسایتهای فروشگاهی) و گسترشدهنده مزایایی داراست:
بهبود تجربیات کاربری تارنما: سایتها برای هدف ها مشخصی پیاده سازی می شوند. تارنماها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا هستند که یوزرها از آن ها بازدید نمایند. در شرایطیکه وبسایت تجارب کاربری خیر نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
یاری به seo تارنما: برای موتورهای کاوش هم برخورد گرایی تارنما مهم میباشد زیرا به تجربیات کاربری ربط پیدا مینماید. بدین ترتیب، سایتی که عکس العمل گرا صفحه ارایی نشده می باشد، برای سئوشدن هم نقص خواهد داشت.
صرفهجویی در وقت و هزینه: در صورتیکه قرار باشد از هر وب سایت نسخههای مختلفی پیاده سازی و توسعه داده شود، انگار مالک وب سایت می بایست هزینهی پیاده سازی یکسری تارنما را بپردازد. و اینترنت دیزاینر هم می بایست برای پیاده سازی یکسری وب سایت مجال بگذارد.
فریمورکها و ابزارهای طراحی سایت برخورد گرا
چنانچه پاره ای در تکنیکهایی که برای پیاده سازی ریسپانسیو ضروری می باشند توجه کنید، متوجه می شوید که محاسبات و نسبتسنجیهای متعددی دارد. پیداکردن مجموع نسبتهای صحیح و کدنویسی آنان، مخصوصا در صورتیکه تعداد عکسها و المانهای صفحه های تارنما زیاد باشد، عمل سادگی وجود ندارد. می بایست دستگاههای گوناگون و مرورگرهای متفاوت و جزئیات متعددی را درنظر گرفت.
بههمینادله، کمپانیهای قابل انعطافافزاری متعددی فریمورکهایی را برای وارفتهترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژهای که می بایست پیاده سازی نماید و همینطور شناختاش با فریمورکها می تواند یکیاز را گزینش نماید. اما به طبع دارای اسم و رسمترین و شایسته ترین فریمورک برای اینترنت دیزاین برخورد گرا بوت استرپ (Bootstrap) میباشد. Bulma.io فریمورک رایگان و منبع گشوده دیگری برای پیاده سازی تماما ریسپانسیو میباشد که طراح را از کدنویسی CSS بینیاز مینماید.
فریمورک ها و ابزار های پیاده سازی ریسپانسیو
درکنار فریمورکها، ابزاهایی هم برای آزمایشکردن برخوردگرایی وب سایت وجود داراست. با این ابزارها بهراحتی میقدرت فهمید وب سایت ریسپانسیو پیاده سازی گردیده یا این که خیر. اولین و شایسته ترین ابزار Google Mobile-Friendly Test میباشد. کافی است نشانی وب سایت را به این ابزار بدهید تا در یکسری دقیقه جواب را به شما بدهد. دومی ابزار Chrome DevTools (Developer Tools) می باشد. کروم تیم ابزارهایی برای بسطدهندگان اینترنت دارد که بهتیتر Extensions بهراحتی به کروم افزوده میشود.
مثال تارنما ریسپانسیو
پیشیناز تک تککردن این نوشتهیعلمی، خوب است مثالای از وب سایت برخورد گرا را باهم ببینیم. وبسایت عکس العمل گرای زیر وابسته به کمبریج دیکشنری میباشد. اولین تصویر وب سایت را در یک اسکرین ۱۳ اینچی علامت میدهد و تصویر دوم در یک اسکرین ۴.۷ اینچی.
مثال وبسایت ریسپانسیو
خصوصیات و مزیت های تارنما ریسپانسیو
برای دیدن مثالهای بیشتر از وب سایتهای ریسپانسیو در دستگاههای مختلف، توصیه میکنم مطلقا به وبسایت Mediaqueri.es محرمانه بزنید و تصاویر چندصد سایت عکس العمل گرا را در دستگاههای مختلف ببینید.
اصول طراحی وب سایت برخورد گرا
جمعبندی و بهرهگیری
۱. طراحی وب باید برخورد گرا باشد. عکس العمل گرایی با seo وب سایت رابطه دارااست و بر تجارب کاربری و شیوهی تعامل کاربر با وبسایت نیز اثر بی واسطه میگذارد.
۲. در طراحی سایت ریسپانسیو تمامیچیز به نسبتها (نسبت المانها بایکدیگر) و موقعیتی که المانها در ورقه داراهستند برمیشود.
۳. CSS در طراحی سایت عکس العمل گرا بسیار سهم دارااست.
۴. پیاده سازی ریسپانسیو به عبارتیقدرکه اساسی میباشد ممکن میباشد مشقت بار و پیچیده هم باشد. طراح وبسایت قادر است از فریمورکهای مختلفی یاری بگیرد و طراحی صفحه برخورد گرا را سهل وآسانخیس اعمال دهد.
۵. درصورتی که طراح وبسایت با عکس العمل گرایی و تکنیکهای آن آشنا نباشد، انگار با اینترنت صفحه ارایی آشنا وجود ندارد. بههمیناستدلال، در طی پیاده سازی وب سایت اصول و تکنیکهای اساسی برای عکس العملگرایی وبسایت و همینطور کار با بوت استرپ یادگرفتن داده میگردد.
خطاها رایج در طیبندی پستها