تهران، سعادت آباد، خیابان کوهستان،
مجتمع کوهستان، سرو ۴، طبقه ۳ واحد ۲
۲۲۱۳۴۴۹۶ ۰۲۱
۳۶۶۶۸۳۲۸ ۰۲۶
info[at]web-city.ir
support[at]web-city.ir

کاربردی کردن طراحی سایت ریسپانسیو در تمامی ابزارها

کاربردی کردن طراحی سایت ریسپانسیو در تمامی ابزارها

امروزه هر تجارتی نیاز به یک وب سایت دارد، اما این روز ها وب سایت ها تنها به آن چه که شما در صفحه کامپیوتر می بینید، ختم نمی شوند. مردم از اینترنت توسط ابزارهای مختلفی استفاده می کنند، از گوشی های هوشمند همراه گرفته تا کنسول های بازی. برخی کارشناسان پیش بینی می کنند که در سال های آینده، بیشترین حجم ترافیک اینترنتی از گوشی های همراه حاصل شود.

مشکل این جا است که بیشتر وب سایت های تجاری تنها برای دسک تاپ و یا لب تاپ بهینه سازی شده اند. زمانی که یک وب سایت تجاری معمولی را در مرورگرهای گوشی همراه مشاهده می کنید، نیاز به زوم کردن و اسکرول کردن دارید تا بتوانید تمام محتویات صفحه را به طور کامل ببینید. تعامل برقرار کردن با وب سایت ها در این صفحات لمسی می تواند بسیار خسته کننده باشد.

برای این که این مشکل رفع شود، خیلی از تجارت ها یک یا چند نسخه طراحی سایت خود را ساخته و برای گوشی های همراه بهینه سازی می کنند و از این رو سرور وب سایت، زمانی که ابزار گوشی همراه مورد استفاده کاربر را تشخیص داد، از این طراحی های بهینه سازی شده استفاده می کند. این قدم اول می باشد، ابزارهای گوشی همراه در اندازه ها و اشکال مختلفی در بازار وجود دارند. طراحی سایتی که در IPHONE عالی به نظر می رسد، ممکن است در KINDLE FIRE به خوبی عمل نکند.

ایده خوبی است تا یک طراحی وب سایت را برای تمامی ابزارهایی مورد استفاده کاربران سایت بسازیم که در هر اندازه و شکل صفحه نمایش ها به خوبی اجرا شود.

یک راه حل برای این موضوع، “طراحی سایت ریسپانسیو” می باشد که وب سایت تان را برای مدیریت کردن ارازان تر و ساده تر می سازد، این در حالی است که تجربه شگرفی را برای کاربران گوشی همراه نیز فراهم می کنید. این طراحی ریسپانسیو باعث می شود تا یک طراحی وب سایتی را بسازید که در هر ابزاری با هر اندازه و شکلی به خوبی اجرا شود، هم چنین می تواند حضور برند تان را در میان کاربران سایت و دنیای آنلاین نیز بسط دهد. به علاوه، نیاز کاربران به تایپ کردن در سایت نیز کاهش می یابد.

طراحی سایت ریسپانسیو به نوعی طراحی وب سایت گفته می شود که در آن وب سایت خود را برای نمایش در سایزهای مختلف صفحه سازگار می سازد و برای رویت و خواندن مطالب وب سایت لازم نیست کاربر بزرگنمایی نماید و یا از اسکرول چپ و راست استفاده نماید. در حقیقت ریسپانسیو سازی سازگاری نمایش وب سایت در موبایل و تبلت می باشد به نحوی که کاربر به راحتی بتواند مطالب وب سایت را مطالعه نماید و در صورت نیاز عملیات های لازم را بر روی وب سایت انجام دهد.

زمانی که یک کاربر به یک وب سایت با طراحی ریسپانسیو دست می یابد، سایت محدودیت ابزاری که کاربر استفاده می کند را تشخیص می دهد و به طور اتوماتیک بر اساس عملکرد و یا اندازه صفحه نمایش، تغییر می یابد تا به خوبی در این ابزار اجرا شود. این طراحی ریسپانسیو می تواند به طور مثال طرح بندی، تصاویر و منوی جستجویابی سایت را بر اساس نوع ابزار تغییر دهد.

روش های استفاده شده در طراحی سایت ریسپانسیو:

استفاده از ترکیبی از کوئری های CSS و افکت های حرکتی

یک نظریه در مورد استفاده از ترکیبی از کوئری های CSS و افکت های حرکتی CSS ارائه داده اند که مضمون آن به این شرح است:

شما برای طراحی یک سایت ریسپانسیو از کوئری های مدیا برای انطباق با عرض مروگر استفاده می کنید، و شما به صورت مداوم سایز مرورگر را تغییر می دهید تا واکنش سایت را مشاهده کنید، اما هر گاه یک کوئری وارد عمل می شود، استایل اول و دوم یک پرش فاحش است. پس چرا از افکت های حرکتی CSS برای جلوگیری از چنین پرش هایی بهره نبریم؟ با استفاده از چنین افکت هایی تغییرات به صورت انیمیشنی انجام می گیرند.

دراپ داون شدن منو

یکی دیگر از تکنیک ها در زمینه طراحی رسپانسیو، دراپ داون کردن یک منوی معمولی است زمانی که پنجره مرورگر باریک می شود. وقتی کاربر با مرورگر یا ابزاری کار می کند که صفحه باریکی دارد، نوار منو به شکل dropdown در می آید و با منویی روبرو می شوند که اگر در یک صفحه باریک قرار بود به شکل قبلی باشد بسیار زشت می بود، اما حالا انتخاب گزینه بسیار راحت تر است.

نمونه های طراحی ریسپانسیو سایت

یک مثال کاربردی خوب در مورد وب سایت ها این است که طوری طراحی شوند که نمایش آنها در دستگاههای تلفن همراه به مانند نمایش در کامپیوترهای خانگی باشد، به طوری که لینک ها در بالای منو زمانی که لیست عمودی است کاربردی تر از زمانی هستند که بصورت افقی نمایش داده می شوند. این نوع از جزییات توسط طراحی ریسپانسیو پشتیبانی می شود.

اگر زمانی که ۱۰ عکس کوچک بصورت عرضی به خوبی در کنار یکدیگر در صفحه نمایش یک مانیتور نمایش داده می شوند، این عکس ها زمانی که در یک دستگاه iPad یا iPhone نمایش دهده شوند شکل بدی به خود می گیرند.با استفاده از طراحی ریسپانسیو می توانید این موضوع را حل کنید بدین صورت که اگر عرض صفحه نمایش دستگاه به کوچکی iPad باشد فقط ۷ عکس را در کنار هم نمایش دهد و به همین شکل برای iPhone که ۴ عکس در کنار هم نمایش دهده می شوند.

فرم تماس اکثر وب سایت ها همراه با یک یا دو نوار کناری برای اهداف دیگر طراحی می شود.این کار برای نمایش در یک کامپیوتر خانگی عالی است ولی در یک گوشی هوشمند، فرم و نوار کناری هر دو برای خواندن بسیار کوچک نمایش داده می شوند.با استفاده از طراحی ریسپانسیو فرم می تواند طوری باشد که تمام صفحه را شامل شود و نوار کناری هم می تواند پنهان شود.در کل هر کاری با طراحی ریسپانسیو امکان پذیر است.

تصمیم بگیرید که طراحی سایت خود را چه زمانی باید تغییر دهید

طراحی سایت ریسپانسیو اساسا دارای روش متفاوتی در مدیریت کردن عوامل وب سایت می باشد. از این رو تبدیل کردن یک طراحی سایت ساده به طراحی ریسپانسیو بسیار سخت می باشد. در این صورت ممکن است بخواهید تا یک وب سایت جدید را با این نوع طراحی بسازید و یا این که وب سایت موجود خود را مجددا طراحی کنید.

روی میزان مخاطبین سایت خود نظارت داشته باشید

آمارهای سایت خود را بررسی کنید تا دریابید که چه میزان از بازدیدکنندگان وب سایت تان از گوشی های همراه حاصل شده اند. از این جهت رشد تجارت خود را در ۲ تا ۵ سال آینده برنامه ریزی کنید. هرچه میزان مخاطبین وب سایت تان در این ابزارها افزایش یابد، نیاز بیشتری به طراحی وب سایت ریسپانسیو خواهید داشت.

وب سایت رقیبان خود را در ابزارهای مختلف بررسی کنید

لیستی از URL وب سایت های مشابه با تجارت خود را تهیه کنید. ابتدا وب سایت آن ها را در کامپیوتر ها و سپس در تبلت ها و گوشی های همراه تست کنید. کدم یک از آن ها برای جستجویابی و استفاده ساده هستند و نیاز کمتری به زوم کردن یا اسکرول کردن دارند؟ می توانید از این موراد برای راهنمایی طراح وب سایت تان از آن چه که در ذهن دارید، استفاده کنید.

یک طراح سایت را با تجربه طراحی کردن وب سایت های ریسپانسیو انتخاب کنید

خیلی از طراحان سایت مشتریان تجاری کوچک و بزرگی دارند که برخی روی اجرای سایت ها در کامپیوتر ها و برخی هم روی هر دوی کامپویتر ها و گوشی های همراه تمرکز و تاکید دارند. اطمینان حاصل کنید که از طراح وب سایت خود نمونه های طراحی ریسپانسیوی که در گذشته انجام داده اند را بررسی می کنید. تنها به اسکرین شات های آن ها نیز بسنده نکنید و از آن ها URL این سایت ها را در خواست کنید تا آن سایت را در ابزارهای مختلفی تست کنید. در این حالت به نمای بصری و عملکرد وب سایت ها بسیار توجه داشته باشید.

چند قدم برای بهینه سازی کردن سایت ریسپانسیو

بهینه سازی سایز تصاویر

معمولا عکس ها با طراحی سایت واکنش گرا کاهش سایز میدهند با این وجود ممکن است یک عکس که در نسخه ی دسکتاپ بسیار زیبا به نظر میرسد، در نسخه ی موبایلی به یک بخش گیج کننده و زائد تبدیل شود. با اینکه عکس ها بر اساس ارزش آنها قابل تغییر سایز هستند، اما بعضی از آنها ممکن است کلا برای نسخه ی موبایل نیاز نباشند. در نظر بگیرید که یک عکس چطور در سایت ریسپانسیو شما ظاهر میشود. آیا یک جنبه ی گرافیکی تاثیرگذار دارد؟ اگر تصویر کل صفحه ی گوشی را اشغال کرده است یا به یک محور اصلی وبسایت تبدیل شده است، وقت آن است که درباره ی نحوه ی استفاده ی آن در دستگاه های مختلف تجدید نظر کنید. به عنوان مثال در راه حل سیمپسون، عکس ها به خوبی تغییر سایز داده نمیشوند و از صفحه ی موبایل بیرون میزنند که باعث بهم ریختگی سایت شده و در نتیجه فهم اینکه در سایت چه میگذرد را برای مخاطب مشکل میکند.

عکس هایی که در ورژن دسکتاپ به خوبی کار میکنند ( چه عکس و چه لوگو ) وقتی در ورژن موبایل کل صفحه ی تلفن همراه را اشغال میکنند ارزش خود را از دست میدهند و باعث میشوند که درک سایت مشکل شود.

پاپ آپ ها را از بین ببرید و از Overlay های موبایل استفاده کنید

تبلیغات پاپ آپ که برای نسخه ی دسکتاپ طراحی شده اند باعث حواس پرتی مخاطبان سایت های ورژن موبایل، از هدف اصلی او که به خاطر آن به این سایت آمده است میشود. به جای آن باید تمرکز بر روی یک هدف قرار بگیرد که آن هم هدف بازدید کننده از ورود به سایت است. استفاده از روش پاپ آپ یا Overlayهای دسکتاپ برای نسخه ی موبایل باعث از دست رفتن نرخ تبدیل خواهد شد. به دلیل این که پاپ آپ های مناسب برای دسکتاپ برای هماهنگی با ۱۹ هزار ترکیب متفاوت از سایز و رزولوشن مختلف در موبایل های امروزی طراحی نشده اند، استفاده از آنها در نسخه های موبایل منطقی به نظر نمیرسد . شما دوست ندارید که یک پاپ آپ تمام صفحه ی موبایل شما را اشغال کند (به دلیل این که این تبلیغات تغییر سایز نمیدهند) و کاربری سایت شما را غیر قابل تحمل کند.

یک پاپ آپ بد، مانند مثال زیر کاملا صفحه ی تلفن همراه را میپوشاند، از دیده شدن محتوای دیگر جلوگیری میکند ، بستن آن کاری سخت است و سایز آن نیز درخور صفحه ی موبایل نیست (مشاهده کنید که بخش ایمیل چگونه در مثال Last King بریده شده است ).

درعوض، بررسی نحوه ی رفتار بازدید کننده در سایت به شما کمکمی کند بدانید Overlay هایی که استفاده میکنید باید چه ویژگی هایی داشته باشند، به کجا انتقال داده شوند و حتی چه اطلاعاتی را دربر داشته باشند. با نگاهی به ضرورت های تکنیکی و همچنین رفتار کاربر موبایلی، میتوانید یک Overlay مناسب با نیاز های کاربر طراحی کنید.

منوی های ناوبری را ساده سازی کنید

شاید مهم ترین ویژگی یک سایت موبایل داشتن یک منوی ناوبری ساده و کاربردی باشد. یک منوی قابل رویت با دسترسی آسان و یا یک نوار جستجو به بازدید کننده کمک میکند که سریع تر به جایی که میخواهد منتقل شود. بیشتر بازدید کنندگان ورژن موبایل با یک هدف مشخص وارد سایت میشوند و با استفاده از نوار ناوبری یا جستجوی کلید واژه و رفتن به پیج مورد نظر از اتلاف وقت خود جلوگیری میکنند.

فهم این که یک مشتری موبایلی برای چه به سایت شما آمده و به دنبال چه میگردد یک قدم اصلی برای این است که بتوانید سایت را بر اساس نیازهای آنها سفارشی سازی کنید . شما ممکن است دریابید که بیشتر کاربران ورژن موبایل سایت شما ترجیح میدهند به جای استفاده از دکمه های فراخوان، از نوار جستجو استفاده کنند، درنتیجه سایت خود را به نحوی بازطراحی میکنید که تمرکز اصلی بر روی نوار جستجو باشد تا کاربران بتوانند سریع تر به اهداف خود در سایت برسند . علاوه بر این فهمیدن این که کاربران در سایت شما به دنبال چه چیزی هستند به شما نشان خواهد داد که در چه بخش هایی کمبود دارید، چه بخش هایی به اندازه ی کافی واضح نیستند و چه بخش هایی نیاز به بهینه سازی دارند .

به دلیل این که کاربران سایت های ورژن موبایل اکثرا در حرکت هستند در نتیجه بیشتر به دنبال آدرس و یا شماره تلفن شما هستند که راحت تر به شرکت شما دسترسی پیدا کنند . شرکت هایی که اجناس حقیقی به فروش میرسانند باید به این نکته توجه ویژه ای نشان دهند که میبایست یک صفحه ی تماس با ما با دسترسی آسان داشته باشند و یا حتی اطلاعات تماس را در صفحه ی اصلی سایت خود قرار دهند . مشتری های این سایت ها بیشتر مایل هستند که برای تکمیل سفارش از فروشگاه فیزیکی بازدید کنند و اگر اطلاعات دسترسی به شرکت شما در دسترس تر باشد احساس رضایت بیشتری خواهند داشت.

طراحی دکمه های فراخوان (CTA) و واضح تر کردن آنها

یک سایت موبایل باید یک هدف اصلی داشته باشد که دکمه فراخوان (CTA)از آن پشتیبانی کند. این دکمه باید اولین عنصری باشد که یک بازدید کننده ی موبایل توجهش به آن جلب میشود و باید به سرعت به او بفهماند که کار آن دکمه چیست. برای مثال سایت Udemy که یک سایت آموزش آنلاین است یک دکمه ی فراخوان بسیار واضح را در بالای صفحه ی اصلی نسخه ی موبایلی خود قرار داده است که کاملا با هدف شرکت هماهنگ است. آنها میدانند که بازدید کننده برای یادگیری به سایت آمده است پس به او کمک میکنند که این هدف را به سرعت تحقق بخشد، آنها یک دکمه برای پیدا کردن دوره ی مورد نظر و یک نوار جستجو برای مشخص تر شدن دستیابی برای کاربر مهیا کرده اند.

درحالی که هدف از طراحی ریسپانسیو برای بازدید کنندگان سایت ورژن موبایل است، برای افزایش نرخ تبدیل و ساختن یک تجربه ی بهتر در نسخه ی موبایل و یا دیگر دستگاه ها، شرکت ها باید مشتری های خود را بهتر بشناسند و رفتارها و ذهنیت های آنها را درک کنند قبل از اینکه ساده ترین و راحت ترین راه که ممکن است نرخ تبدیل و رضایت را پایین آورد را انتخاب کنند. پس همیشه قبل از طراحی یک صفحه و یا یک سایت جدید، نیازها و رفتارهای کاربر موبایل را نیز درنظر بگیرید.

اشتراک

مجید احدی

مجید احدی هستم‌،توسعه دهنده سایت،قبلا در زمینه دوربین های مداربسته فعالیت داشتم مدتی به کار در حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان توسعه دهنده سایت فعالیت میکنم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 + هجده =