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