طراحي وب سايت ريسپانسيو يا برخورد گرا چيست؟ چرا مدتي مي باشد ريسپانسيو بودن وبسايت بسيار اصلي شده است و كليه از واكنش گرايي تارنما سخن مي‌زنند؟ وبسايت‌هاي ريسپانسيو چه ويژگي‌ها و مزيت‌هايي دارا‌هستند كه آنها را از وبسايت‌هايي كه ريسپانسيو نيستند غيروابسته مي‌كند؟ به‌اين سوال‌هاي اساسي در وب صفحه ارايي در اين نوشته‌ي علمي جواب خواهم داد. بگذاريد مثالي بزنم تا قبل‌از هرچيز عنايت موضوع برخورد‌گرابودن يا نبودن وبسايت‌ها بيشتر روشن گردد.شما را نمي‌دانم ولي من با درگاه پرداخت آنلاين بانك سامان نقص دارم. هنگامي مي‌خواهم از خدمات الكترونيكي اين بانك با لپ‌تاپم استفاده كنم هيچ مشكلي نيست. ولي در حالتي‌كه بخواهم از تلفن همراه وارد نت بانك سامان شوم و كاري را انجام دهم، عذاب‌آور است. هيچ‌چيز در ورقه‌ي موبايلم معلوم نمي‌شود. مدام بايد كاغذ را تعالي كنم كه خب همين ايرادات ديگري را درست مي‌كند. انگار نت بانك را فقط براي دسكتاپ ۱۳ اينچي طراحي كردند.فكر ميكنم اين تجربيات‌ي تلخ را شما هم داريد. چون خيلي از ما بيشتروقت‌ها كارهاي آنلاين را با گوشي يا تبلت انجام مي‌دهيم. براي شما هم پيش آمده كه سايتي را با گوشي باز مي كنيد و با خودتان مي‌گوييد: اي كاش اين برگه را باز نمي‌كردم! چون همگي‌چيز به‌هم ريخته مي‌باشد و هيچ الماني در برگه سر جاي خودش نيست. مي دانيد عامل اين به‌هم‌ريختگي چيست؟ وب سايت واكنش گرا طراحي نشده است.آنچه در اين نوشته خواهيم داشتساخت وب سايت واكنش گرا (Responsive Web Design)اصول و تكنيك هاي اساسي در عكس العمل گرايي تارنما (Website Responsiveness)۱. Fluid Grids۲. Fluid Images۳. Media Queryمزيت ها و ويژگي هاي وب صفحه ارايي ريسپانسيوفريمورك‌‌ها و ابزارهاي طراحي وب عكس العمل گرانمونه سايت ريسپانسيوعده‌‌بندي و سود‌گيريتاليف كنندهمهديه اسماعيليطراحي سايت عكس العمل گرا (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 سري بزنيد و تصاوير چندصد وبسايت عكس العمل گرا را در دستگاه‌هاي متعدد ببينيد.اصول ساخت وب سايت واكنش گراگردآوري‌‌بندي و سود‌گيري۱. طراحي وب مي بايست واكنش گرا باشد. برخورد گرايي با بهينه سازي وبسايت ارتباط داراست و بر تجربه كاربري و شيوه‌ي تعامل كاربر با سايت نيز تاثير مستقيم مي‌گذارد.۲. در طراحي وب ريسپانسيو كليه‌چيز به نسبت‌ها (نسبت المان‌ها بايكديگر) و موقعيتي كه المان‌ها در شيت دارا هستند برمي‌گردد.۳. CSS در طراحي سايت واكنش گرا بسيار سهم دارد.۴. طراحي ريسپانسيو همان‌قدركه مهم مي باشد ممكن هست سخت و غامض هم باشد. طراح تارنما مي تواند از فريمورك‌هاي مختلفي كمك بگيرد و صفحه آرايي عكس العمل گرا را سهل و آسان‌تر انجام دهد.۵. در صورتيكه طراح تارنما با عكس العمل گرايي و تكنيك‌هاي آن آشنا نباشد، انگار با وب صفحه آرايي آشنا نيست. به‌همين‌عامل، در طي طراحي سايت اصول و تكنيك‌هاي مهم براي عكس العمل‌گرايي تارنما و همچنين عمل با بوت استرپ آموزش داده ميگردد.
چهارشنبه ۱۶ آذر ۰۱ ۰۹:۱۲ ۱۶ بازديد
تا كنون نظري ثبت نشده است