طراحی سایت ریسپانسیو - نسخه قابل چاپ +- Parsi Coders (http://parsicoders.com) +-- انجمن: Network & Internet section (http://parsicoders.com/forumdisplay.php?fid=138) +--- انجمن: Other (http://parsicoders.com/forumdisplay.php?fid=139) +--- موضوع: طراحی سایت ریسپانسیو (/showthread.php?tid=6334)

طراحی سایت ریسپانسیو - mohi72 - 12-03-2017 طراحي وب واکنش‌گرا Responsive web design يک روش طراحي وب سايت است که هدف آن نمايش مطلوب صفحه در طيف گسترده‌اي از دستگاه‌ها از تلفن‌هاي همراه تا نمايشگر کامپيوترهاي روميزي است. يک سايت طراحي شده به روش واکنش‌گرا با لايه‌هاي انعطاف‌پذير، طراحي‌هاي شناور،تصاوير انعطاف‌پذيرو مديا کوئري‌هاي CSS? سازگار است. مفهوم شبکه‌هاي انعطاف‌پذير اين است که در آن براي اندازه عناصر صفحه به جاي واحدهاي مطلق مانند پيکسل يا پوينت از واحدهاي نسبي مانند درصد استفاده مي‌کنيم اندازه تصاوير انعطاف‌پذير نيز با واحدهاي نسبي تعيين مي گردد تا بيرون از عنصر نمايش‌دهنده خود نشان داده نشود مديا کوئري‌ها امکان استفاده از CSS هاي مختلف براي صفحه براساس ويژگي‌هاي دستگاه نمايش‌دهنده (معمولاً براساس عرض مرورگر وب) فراهم مي‌کنند. طراحي سايت ريسپانسيو چيست؟ وب سايت واکنش گرا يا وب سايت ريسپانسيو (responsive) وب سايتي است که اندازه و چيدمان اجزاي آن شناور است و با ابعاد و رزولوشن دستگاههاي مختلف تغيير مي کند تا کاربران صرف نظر از اينکه صفحه نمايش دستگاهشان کوچک باشد (مثل اکثر گوشي هاي موبايل) يا نمايشگري متوسط و بزرگ داشته باشند مثل تبلت، لپتاپ و کامپيوترهاي رو ميزي، تجربه کاربري راحتي داشته باشند. تفاوت وب سايت واکنشگرا و غير واکنشگرا در چيست و راهکار براي تشخيص داد؟ براي تشخيص ريسپانسيو بودن يک وب سايت و تفاوت وب سايتهاي ريسپانسيو و سايت غير ريسپانسيو،وب سايت مورد نظرتان را در سيتم پي سي باز کنيد و عرض مرورگر را به آهستگي کم و زياد کنيد. اگر وب سايت واکنش گرا باشد مشاهده مي کنيد که اندازه و چيدمان اجزاي آن مطابق با تغيير عرض صفحه تغيير مي کند به گونه اي که اسکرول افقي پديد نمي آيد. اما در سايتهاي غير ريسپانسيو چنين تطابقي رخ نمي هد و اسکرول افقي لازم است تا بتوان قسمتهاي پنهان شده چپ و راست صفحه را مرور کرد. وب سايت ما نومنه اي از وب سايت هاي ريسپانسيو هست که ميتوانيد اين تست را روش انجام بديد. طراحي سايت ريسپانسيو چگونه و به چه دليل بوجود آمد؟ براي درک بهتر طراحي سايت واکنش گرا بهتر است بررسي کنيم که طراحي وب سايت ريسپانسيو براي حل و فصل چه نيازهايي بوجود آمده است؟ همانطور که مي دانيد امروزه ديگر کامپيوترها و لپتاپها نه تنها وسايلي نيستند که براي مرور صفحات وب مورد استفاده کاربران قرار مي گيرند بلکه از محبوبيت روز به روز کمتري قرا مي گيريند و کاربران بيشتر با گوشي هاي هوشمند و تبلت به وب گردي مي پردازند انواع موبايلهاي هوشمند، فبلت ها، تبلت ها، کنسولهاي بازي و تلويزيون ها نيز قابليت مرور صفحات وب را دارند و گجتهاي پوشيدني نظير عينک گوگل نيز به بازار راه يافته اند. جداي از آمار توليد و فروش اين دستگاهها، در کشور ما نيز به هر سو که بنگريم انواع گوشي هاي هوشمند و تبلت ها را در دست مردم مي بينيم و با توجه به ارائه خدمات نسل جديد اينترنت هاي پر سرعت ، روند رو به رشد استفاده از اين ديوايزها ريز و درشت براي اتصال به اينترنت و مرور و وب گردي امري بديهي است. بنابراين سايزهاي مختلف و رزولوشن هاي مختلف اين دستگاهها تبديل به مشکل بزرگي براي وبسايتهاي اينترنتي قديمي شده است. چرا که يک وب سايت بايد در ابعاد مختلفي براي مخاطبانش به نمايش در آيد و طبيعي است که کاربران انتظار دارند با هر دستگاهي بتوانند صفحات سايت را براحتي ببينند و مرور کنند. براي رفع اين مشکل ابتدا طراحي نسخه وب موبايل سايت مرسوم شد. يعني مالکان و مديران وبسايتها دو بار هزينه مي کردند، يک بار براي طراحي و مديريت و بهينه سازي سايت اصلي (جهت نمايش درPC) بار ديگر براي وب سايت نسخه موبايل. اما گستره ابعاد نمايشگر ها چنان وسيع و متنوع شد که ساخت سايت براي هر يک از آنها عملا غير اقتصادي و ناممکن است. بنابراين طراحي سايت واکنشگرا براي رفع اين مشکل معرفي شد و بوسيله آن يک سايت به گونه اي طراحي مي شود که اجزاي آن شناور بوده و خود را با هر صفحه رزوليشن نمايشي چنان تطبيق دهد که کاربران از هر دستگاهي که استفاده کنند تجربه کاربري قابل قبول داشته باشند. آمارها حاکي از آن است که سايت هايي که بصورت واکنش گرا طراحي شده اند نسبت به رقباي خود داراي مزيت هستند و نرخ از دست دادن بازديدکنندگاني که از گوشي هاي هوشمند و تبلت استفاده مي کنند در آنها کمتر است. آيا طراحي سايت به صورت واکنشگرا تاثيري در نتايج گوگل دارد؟ گوگل رسما طراحي وبسايتها بصورت واکنش گرا را توصيه کرده است. و در صورتي که وب سايتي از اين قابليت پشتيباني نکند از نظر گوگل در رده بعد نصبت به رقبا هست ، طراحي يک سايت واکنش گرا براي يک پايگاه اينترنتي به جاي طراحي سايت موبايل در کنار سايت اصلي، هم براي گوگل اين مزيت را داردو هم براي سايت اين مزيت را دارد که رنک صفحات آن روي يک آدرس اينترنتي (URL) تجميع مي شود و اين موضوع براي رتبه بندي در نتايج جستجوي گوگل بسيار مهم است. همچنين لينک دهي، به اشتراک گذاري و تعامل با محتوايي که در يک سايت و يک آدرس اينترنتي (URL) قرار دارد براي کاربران راحت تر است و گوگل به اين موضوع نيز بسيار اهميت مي دهد. مطمئنا مديريت محتوا و اجراي بهينه سازي سايت براي موتورهاي جستجو (سئو) نيز در يک سايت آسان تر و اقتصادي تر از انجام آنها براي دو سايت است. آيا طراحي سايت به صورت ريسپانسيو ضرورت دارد يا مي توان از روش هاي ديگر طراحي سايت نيز استفاده کرد؟ در سال 2013 آمار فروش جهاني تبلتها و موبايلهاي هوشمند از فروش کامپيوتر پيشي گرفت و پيش بيني مي شود آمار بازديدهاي اينترنتي بوسيله اين دستگاهها از لپتاپ بيشتر شود. پس مي توان گفت در آينده اي نزديک وبسايت شما بيش از اين بوسيله موبايل و تبلت مورد استفاده بازديدکنندگان قرار مي گيرد و تحقيقات نشان داده است که حتي اگر وب سايتي در نتايج بالاي گوگل باشد اما ريسپانسيو نباشد نرخ پرش (bounce rate) آن در موبايل و تبلت افزايش مي يابد. اين به معناي زنگ خطري است براي وبسايتهاي غير واکنش گرا. مخصوصا اگر رقباي آنها از طراحي واکنش گرا استفاده کرده باشند. و از سوي ديگر طراحي سايت واکنش گرا مزيتي است نسبت به رقبايي که هنوز سايتشان ريسپانسيو نيست. آيا طراحي سايت واکنشگرا از لحاظ فني نسبت به روش هاي قبلي تفاوت هاي زيادي دارد؟ طراحي وب سايت واکنش گرا نسبت به روش هاي سنتي طراحي سايت متفاوت است. در طراحي هاي پيشين، ستونها و اجزاي سايت با عرض ثابت و چيدمان ثابت طراحي مي شدند که اين باعث مي شد محتواي صفحه در نمايشگرهاي کوچک ريز و ناخوانا شود و کاربر مجبور مي شود از زوم استفاده کند که در اين صورت نيز بايد براي خواندن محتوا و استفاده از قسمتهاي مختلف سايت دائما به چپ و راست اسکرول کند. استفاده از تصاوير با رزولوشن متناسب با رزولوشن دستگاههاي مختلف و شناوري سايز عکسها نيز در طراحي سايت واکنش گرا بسيار اهميت دارد. در مجموع وب سايتي بخوبي به روش واکنش گرا طراحي شده است که براي مرور آن نياز به اسکرول افقي نباشد. به همين علت اين روش طراحي سايت به لحاظ فني و ميزان خلاقيت مورد نياز براي آن با روشهاي پيشين کاملا متفاوت است و براي حصول نتيجه مناسب و طراحي سايتي که در دستگاههاي مختلف کاربر پسند باشد نياز به دقت فراواني دارد.