نزديك 49% تمامي ترافيك وب، در سراسر جهان، برخواسته از دستگاه‌هاي موبايل (به‌جز تبلت‌ها) مي‌باشد. اگر شما وبسايت‌هايي سازگار با موبايل نسازيد، به احتمال زياد بخش بزرگي از مخاطبين خود را از دست خواهيد داد. همچنين اگر مي‌خواهيد سئوي خود را بهبود ببخشيد، نمي‌توانيد اهميت گوشي‌هاي هوشمند را ناديده بگيريد؛ گوگل به موبايل‌ها با فهرست‌سازي براي موبايل اولويت مي‌دهد.
تمامي اين‌ها خواستار يك طراحي وب است كه از طريق آن، عوامل وبسايت شما مي‌تواند بسته به ابعاد صفحه با آن همگام شود. زماني كه طراحي ريسپانسيو خود را مي‌سازيد ممكن است در نهايت مرتكب به تعدادي اشتباه معمول شويد. براي كمك به شما در پرهيز از اين اشتباهات، ما چند تا از مشكلات معمول طراحي پاسخگو يا ريسپانسيو و راه‌حل‌هاي آن‌ها را در كنار هم قرار داده و در ادامه آن‌ها را ذكر مي‌كنيم.
۱. استفاده از سايزهاي دستگاه‌ها براي نقاط وقفه يا Breakpoints
براساس OpenSignal، در سال 2015 بيش از 24000 دستگاه مختلف اندرويد وجود داشت؛ اين تعداد در طول پنج سال گذشته افزايش يافته است. از آنجايي كه تنوع دستگاه‌هاي مختلف بسيار زياد است، ابعاد صفحات نيز بسيار گسترده متغير است. براي اطمينان حاصل كردن از اينكه سايت شما يك تجربه مرورگري بي‌همتا بر روي تمامي دستگاه‌ها ارائه مي‌دهد، شما نياز داريد Breakpoint ها را جاهاي درست قرار دهيد.
اگر شما تنها بر نقاط وقته سايز موبايل‌ها تمركز كنيد، وبسايت شما ممكن است بر روي دستگاه‌هاي جديدتر به طرز صحيحي نمايش داده نشود. به جاي آن از طراحي‌هايي كه به درستي پاسخگو و ريسپانسيو هستند و بر روي تمامي اندازه‌هاي صفحات تطبيق مي‌يابند، استفاده كنيد.
"اگر شما تنها بر روي نقاط وقفه سايز دستگاه‌ها تمركز كنيد، وبسايت شما ممكن است بر روي دستگاه‌هاي جديدتر به درستي نمايش داده نشود."
يك فكر عالي اين است كه در ابتدا رويكردي بر پايه دستگاه‌هاي موبايل جايي كه وبسايت خود را براي كوچك‌ترين اندازه صفحات بسازيد و سپس مقياس آن‌را براي اندازه صفحات بزرگتر تغيير دهيد. اگر دستگاه‌هاي پوشيدني (wearable devices) براي وبسايت شما مهم هستند، شما بايد كار خود را در عوض، با آن‌ها شروع كنيد.
همان‌طور كه شما مقياس ها را بالا مي‌بريد، طراحي شما ممكن است در اول حسي خسته كننده القا كند. در چنين شرايطي، شما ميتوانيد جستارهاي رسانه‌اي براي ايجاد تغييرات ضروري اضافه كنيد. اين به شما كمك خواهد كرد كه طراحي شما در هر قدم حس راحتي القا كند. شما نياز خواهيد داشت روند را تا زماني كه به بزرگترين اندازه صفحات دست يافته‌ايد، ادامه دهيد. در حالت ايده‌آل اين اندازه به سقف 2800 پيكسل خواهد رسيد، چرا كه بيشتر كاربران كيفيت‌هايي پايين‌تر از اين دارند.
با استفاده از اين روش، نقاط وقفه شما تنها زماني كه به آن‌ها نياز است ارائه مي‌شوند، نه بر اساس سايز دستگاه. اين امر مي‌تواند به شما در ارائه تجربه مرورگري بي‌همتا به بينندگاني از تمامي دستگاه‌ها كمك كند. ما ميتوانيد براي بررسي اينكه آيا وبسايت شما بر روي تمامي دستگاه‌هاي جديد به خوبي رندر مي‌شود، از ابزارهايي مانند BrowserStack استفاده كنيد.
۲. در نظر نگرفتن اندازه‌هاي فايل
عوامل بصري مي‌تواند سايت شما را براي كاربران جذاب‌تر كند. هرچند، شما بايد زماني كه آن‌ها را به سايت خود اضافه مي‌كنيد احتياط كنيد. آن‌ها عموما از فايل‌هاي نوشتاري بزرگتر هستند و مي‌توانند سرعت بارگذاري سايت شما را كاهش دهند. با افزايش سرعت بارگذاري سايتتان، نرخ جهشتان نيز افزايش مي‌يابد. در حقيقت، بر اساس Akami، نرخ جهش هنگامي كه در دوران فصل تعطيلات سال 2017 كه زمان بارگذاري صفحات 1.5 ثانيه افزايش يافت، به ميزان 6% نرخ جهش افزايش يافت.
به همين دليل بهينه‌سازي تصاوير و ويديوهايتان براي كاهش سايز آن‌ها ضروري است. شما ميتوانيد از ابزارهايي مانند TinyPNG و يا Compress JPEG براي رسيدن به اين هدف استفاده كنيد. اگر شما يك كاربر وردپرس هستيد، ميتوانيد پلاگين Smush را براي انجام اين كار، استفاده كنيد.
حداقل‌سازي فايل‌هاي CSS، HTML و جاوااسكريپت‌تان نيز مي‌تواند مفيد باشد. همچنين بايد cache مرورگرها را نيز، كه مي‌تواند سرعت بارگذاري صفحات را براي كاربراني كه به سايت دوباره بازمي‌گردند افزايش دهد، در نظر بگيريد. درنهايت تمامي ابزارهاي واسطه و موارد واسته به جاوااسكريپت غير ضروري را حذف كنيد. براي بررسي سرعت بارگذاري صفحه فعلي‌تان و يافتن راه‌حل‌هاي احتمالي، شما ميتوانيد از Google PageSpeed Insights استفاده كنيد. شما همچنين ميتوانيد از ابزار Mobile Site Speed گوگل براي بررسي سرعت بارگذاري وبسايت‌تان در دستگاه‌هاي موبايل استفاده كنيد.
۳. عدم استفاده از مديريت انطباق‌پذير تصاوير
همان‌طور كه سايز فايل يك تصوير مهم است، ابعاد آن نيز حائز اهميت است. شما ممكن است نگران استفاده از تصاويري با ابعاد مختلف در يك سايت تعاملي نباشيد، هرچند زماني كه پاي يك طراحي ريسپانسيو باشد، بي‌توجهي به مديريت تصاوير مي‌تواند اثر فاجعه‌آوري بر روي تجربه كاربر شما داشته باشد. قطعا شما تمايلي به اين كه بينندگان شما تصاوير بزرگي بر روي يك صفحه كوچك ببينند، نداريد.
براي پرهيز از اين مشكل، بايد تكنيك هاي مديريت انطباق پذيري تصاوير داشته باشيد. ميتوانيد از روش زير براي رسيدن به اين هدف استفاده كنيد:
- انتخاب بر اساس كيفيت و رزولوشن: همان تصوير را به همراه كيفيت‌هاي متفاوت فراهم كنيد.
- انتخاب بر اساس نسبت پيكسل‌هاي دستگاه: تصاوير را تكه تكه ظاهر كنيد و مصنوعات محسوس را بر اساس اندازه صفحات كاهش دهيد.
- انتخاب بر اساس ويوپورت (viewport): تصاوير را بر اساس دستگاه‌هاي مورد استفاده و موقعيت آن متنوع سازيد.
- Art direction: تصاوير را بر اساس نمايش آن‌ها جهت بهبود تجربه مشاهده آن‌ها برش يا تغيير دهيد.
"عدم استفاده از مديريت تصاوير مي‌تواند تاثير فاجعه‌باري بر روي تجربه كاربر شما داشته باشد."
۴. پنهان كردن محتوا
يكي از بزرگترين اشتباهات كه هنگام ساختن يك طراحي ريسپانسيو در وبسايت‌تان، ممكن است به آن مرتكب شويد، پنهان كردن محتوايتان است. ممكن است اين كار را انجام دهيد تا وبسايت شما در يك صفحه با اندازه كوچك‌تر جا شود و يا اينكه سرعت بارگذاري صفحه خود را افزايش دهيد. هرچند، بايد به هر قيمتي از اين كار پرهيز كنيد. به ياد داشته باشيد، مردم تنها براي ديدن يك نمونه‌ي كوچك به وبسايت شما رجوع نمي‌كنند. آن‌ها مي‌خواهند همان تجربه كاربري كه بر روي دسكتاپ كسب مي‌كنند را داشته باشند.
هدف شما بايد ارائه اين تجربه omnichannel به آن‌ها باشد. اين امر ضروري است چراكه بسياري از آن‌ها ممكن است در طول يك روز با دستگاه‌هاي مختلفي به سايت شما دسترسي يابند. براي همين مهم است كه شما در طراحي ريسپانسيو خود ثبات محتوا را حفظ كنيد. هرچند، شما ميتوانيد، از طريق پيشرفت تصاعدي محتوا را به صورت‌هاي مختلف اولويت‌بندي كنيد.
۵. حفظ ناوبري متداوم
ارائه يك تجربه مرورگري متداوم به بينندگان از تمامي دستگاه‌ها از بيشترين اهميت برخوردار است. هرچند تداوم مطلق نيز خوب نيست. بزرگترين اشتباهي كه شما ممكن است در هنگام انجام اين كار به آن دچار شويد، اين است كه ناوبري ثابت را در تمامي اندازه صفحات حفظ كنيد.
زماني كه اندازه صفحه شما كاهش مي‌يابد، يك منوي ناوبري ثابت، ممكن است بيش از نصف صفحه را اشغال كرده و به طور كلي تجربه مرورگري را خراب كند. شما بايد كوچك كردن ناوبري بسته به اندازه سايت را در نظر گرفته و آن را به يك منوي كشويي يا همبرگري (Hamburger menu) تبديل كنيد.
همراه با ناوبري، اندازه دكمه‌ها و طرح‌بندي بصري نيز نبايد متداوم و ثابت بماند. هرچند سبك حروف(فونت‌ها)، لينك‌ها و رنگ‌بندي‌ها بايد ثابت باقي بمانند.
نظرات نهايي
اگر مايل هستيد كه به تمامي مخاطبين خود دسترسي داشته باشيد، شما نمي‌توانيد از يك طراحي ريسپانسيو پرهيز كنيد. هرچند، شما بايد هنگام پياده‌سازي آن محتاط بوده و از تمامي خطاهاي احتمالي پرهيز كنيد. به بينندگان خود يك تجربه مرورگري ثابت در تمامي دستگاه‌ها ارائه دهيد و هيچ اطلاعاتي را از آن‌ها پنهان نكنيد. اندازه فايل‌هاي خود را براي بهبود سرعت بارگذاري صفحه خود بهينه‌سازي كنيد. همچنين، از تكنيك‌هاي مديريت تصاوير انطباق‌پذير استفاده كنيد تا ابعاد تصاوير را بر اساس اندازه صفحه كاهش و يا افزايش دهيد.
راهبري خود را ثابت نگه نداريد چراكه ممكن است تجربه مرورگري را خراب كند. همين قانون براي دكمه‌ها و طرح‌بندي بصري نيز وجود دارد. در نهايت، به دنبال طراحي‌هايي كه حقيقتا ريسپانسيو بوده بگرديد و خود را به نقاط وقفه مبتني بر دستگاه‌هاي فعلي محدود نكنيد. نكته كليدي اين است كه هنگام طراحي وبسايت‌تان از دستگاه‌هاي موبايل شروع كنيد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید