بسیاری از کسانی که به منظور توسعه کسب و کار خود اقدام به طراحی و ایجاد وب سایت میکنند، این تصور را دارند که با ایجاد سایت، کار به پایان رسیده و میتوانند به راحتی از آن کسب درآمد کنند. باید گفت این مسئله به هیچ عنوان درست نیست. قطعا هر سایتی پس از این که ایجاد میشود، دارای یکسری مشکلات و اشتباهات ریز و درشت است. برخی از این اشتباهات به سادگی قابل کشف و حل نیستند. اشتباهاتی مانند تایپوگرافی، طراحی، مشکلات فنی، گرافیکی و … . مهمترین آنها، اشتباهات رایج در طراحی سایت ریسپانسیو است. اهمیت کشف و حل این اشتباه انقدر زیاد است که اگر هدف شما از ایجاد سایت کسب درآمد باشد میتواند آن را تحت الشعاع قرار دهد و باعث افت سایت شما شود.
سایت ریسپانسیو
واژه ریسپانسیو یک کلمه لاتین و به معنی واکنشگرا است. سایت ریسپانسیو به سایتی گفته میشود که در مقابل پیمایش صفحه در هر نوع دستگاهی بر اساس اندازه و رزولیشن صفحه آن دستگاه واکنش نشان دهد. تغییرات لحاظ شده در آن به تناسب صفحه نمایشگر است.
به عنوان مثال فرض کنید نمایش سایت در کامپیوتر شخصی با نمایش سایت در گوشی همراه فرق داشته باشد. اگر سایتی را با گوشی همراه خود باز کردید و در استفاده از آن دچار مشکل ابعاد و جابه جایی صفحه بودید، آن سایت ریسپانسیو نیست. برعکس این موضوع نیز صحیح است. در سایتهایی که با تلفن همراه نمایش داده میشوند اگر ابعاد سایت با ابعاد گوشی یا تبلت یک اندازه بود و در استفاده از مطالب آن دچار مشکل پیمایش به طرفین نبودید، این سایت دارای ریسپانسیو است. در نظر داشته باشید که ریسپانسیو بودن سایت از اهمیت بسیار زیادی برخوردار است.
اهمیت طراحی ریسپانسیو سایت
در عصر کنونی همگان از اهمیت وجود دستگاه تلفن همراه باخبر هستند. به صراحت میتوان گفت بسیاری از کسب و کارهای موفق اینترنتی و فعال، به وسیله تلفنهای همراه پیش میروند. از طرفی بسیاری از کسانی که به عنوان مخاطب یا مشتری به این فعالیتها دسترسی دارند، از طریق گوشی همراه این کار را میکنند. طبق یک تحقیق انجام شده در دنیا، حدود پنجاه درصد از ترافیک وب در جهان به وسیله تلفن همراه مصرف میشود. این به معنی است که ۵۰ درصد مخاطبان سایتها از طریق گوشی تلفن همراه اقدام به مشاهده مطالب قرار گرفته در سایت میکنند.
حال اگر این سایتها ریسپانسیو نباشند، به سرعت درصد بازدید کنندگان و مخاطبان آنها کاهش مییابد؛ چراکه بیش از نیمی از مخاطبان آن از طریق تلفن همراه وارد شدهاند. حال که از اهمیت این موضوع مطلع شدید و به دنبال راههایی برای ریسپانسیو کردن سایت خود هستید بهتر است به اشتباهات رایج در طراحی ریسپانسیو سایت بپردازیم.
اشتباهات رایج در طراحی ریسپانسیو سایت
در برخی موارد ریسپانسیو کردن سایت به شکل نادرستی صورت میپذیرد. مقیاس بندی، انعطاف پذیری و ریسپانسیو بودن سه موضوع اصلی است که در طراحی ریسپانسیو سایت باید به آن توجه داشت. در زمان برنامه نویسی سایت، باید کدنویسی به شکلی باشد که با تغییر در اندازه صفحه نمایشگر سایت، ابعاد سایت نیز تغییر کند. این تغییرات نباید خللی در خوانایی مطالب ایجاد کند. در ادامه مشکلات رایج در طراحی ریسپانسیو سایت را به صورت مفصل بررسی میکنیم.
نامنظم بودن منو
وقتی سایتی دارای منو یا نوار پیمایش است و شما قصد دارید این سایت را از طریق گوشی یا تبلت مشاهده کنید، طراح ریسپانسیو سایت باید به شکلی این نوار را طراحی کند که به تناسب صفحه نمایش برخی از موارد جزئی از آن حذف و یا به آن اضافه شوند. به عنوان مثال در صفحه نمایشهای کوچک مانند گوشی، لازم نیست نامهای درج شده در منو به همراه عکس باشند؛ چرا که این حجم عکس متناسب با صفحه نیست و سبب به هم ریختگی منو و در نهایت سردرگمی کاربر میشود. بنابراین توجه به نوار پیمایش و اطلاعات به نمایش گذاشته در آن در ریسپانسیو کردن سایت مهم است.
تصاویر ثابت
به طور معمول در بسیاری از سایتها مطالب به همراه عکس به نمایش گذاشته میشوند. اگر در عکسهای به کار گرفته شده در محتوای سایت از عکسی با عرض ثابت استفاده شود، عملیات ریسپانسیو کردن سایت با مشکل مواجه خواهد شد. تصور کنید سایتی را با تبلت باز کرده و مطالب همگی به صورت منظم و خوانا قرار دارند اما عکس قرار گرفته در بین مطالب و عنوان ها از کادر صفحه بیرون است. این مشکل را باید با استفاده از واحدهای نسبیتی حل کرد.
قرارگیری نادرست ستون ها
تصور کنید با تغییر اندازه صفحه نمایش چه اتفاقی برای ستونهای قرار گرفته در سایت میافتد. ممکن است با کوچکترین اشتباه تمام نظم سایت بابت جایگیری نادرست ستونها به هم بریزد. در بیشتر سایتها مطالب به صورت ستونی قرار گرفتهاند. پس بهتر است این اشتباه رایج را در نسخه ریسپانسیو سایت خود برطرف کنید.
مطالب طولانی
از دیگر مشکلاتی که فرآیند ریسپانسیو سایت را با اختلال مواجه میکند، طولانی بودن مطالب قرار گرفته شده در سایت یا نادیده گرفتن بارگذاری صفحات سایت است. عنوانها و مطالب سایت باید بسیار مختصر و کوتاه باشد. مطالعه مطالب طولانی و تعدد عنوانها در صفحه نمایشگر کوچکی مانند صفحه تلفن همراه، کار دشواری است و سبب خستگی چشم و ایجاد کسالت در بازدید کننده و مخاطب سایت میشود.
برای رفع این مشکل، تمامی مطالب سایت را به یک باره به مخاطب نشان ندهید. بلکه چند سطر کلیدی و مهم آن را به نمایش بگذارید و از کلیدهای ادامه مطلب یا بیشتر استفاده کنید. این گونه خود کاربر تصمیم میگیرد که آیا قصد مطالعه ادامه مطلب یا عنوان را دارد یا خیر. به این شکل شما چندین مطلب مختلف را میتوانید به راحتی در اختیار کاربر قرار دهید تا به دلخواه اقدام به خواندن آن کند.
طراحی سایت برای دسکتاپ
یکی از اشتباهات رایج طراحان این است که ابتدا وب سایت را برای دسکتاپ طراحی می کنند. زیرا بر این باورند که تبدیل آن به یک طرح ریسپانسیو برای سایر دستگاه ها آسان خواهد بود. اما این اشتباه در مرحله برنامه ریزی به خودی خود می تواند به یک مسئله بزرگ تبدیل شود. این موضوع می تواند باعث دوباره کاری شده و خطاها نیز به حالت بعد انتقال داده شوند. ممکن است ابتدا، ایجاد وب سایت برای تلفن همراه وقت گیر یا دشوار باشد. زیرا شما هنوز به این روش عادت ندارید.
URL جداگانه برای تلفن همراه
داشتن یک آدرس اینترنتی جداگانه برای نشان دادن سایت در تلفن همراه می تواند یک فاجعه کامل باشد و بدون شک می توان گفت که هدف اصلی یک طراحی ریسپانسیو را در وهله اول شکست می دهد. در نهایت کاربران وقتی وب سایت را با گوشی همراه خود باز می کنند مدت زمانی طول می کشد تا صفحه اصلی به آن ها نشان داده شود و همچنین به طور جدی به رتبه بندی موتور جستجوگر شما آسیب می رساند. اما مطمئنا داشتن URL های مختلف مزایایی نیز دارد. از این طریق می توانید سایت های تلفن همراه را با صفحات سبک تر که در دستگاه های هوشمند عملکرد بهتری دارند ایجاد کنید. همچنین این سایت برای مشاهده در سیستم عامل های خاص نیز بیشتر مورد توجه قرار خواهد گرفت، ولی متاسفانه نکات منفی داشتن URL های جداگانه تلفن همراه بیشتر از نکات مثبت آن است و باید از آن پرهیز کرد.
توسعه ندادن وب سایت برای تلفن های لمسی
امروزه اکثر دستگاه ها دارای صفحات لمسی هستند، حتی بسیاری از لپ تاپ ها دارای قابلیت لمسی در دسترس هستند. از این رو مهم است که هنگام ایجاد یک طراحی ریسپانسیو از اهمیت کنترل لمسی غافل نشوید. اندازه انگشت کاربران برای کلیک در نظر داشته باشید.
سخن پایانی
انجام عملیات طراحی ریسپانسیو کردن سایت بسیار ضروری و لازم میباشد؛ چون همانطور که در مطالب فوق بیان شد، درصد بسیار زیادی از بازدید کنندگان از سایتها از طریق گوشیهای تلفن همراه و تبلت ها اقدام به مشاهده سایت مورد نظر خود میکنند. ریسپانسیو بودن یا نبودن سایت اثر مستقیم بر روی دیده شدن سایت دارد. ممکن است که هزینههای بسیار زیادی صرف طراحیهای گرافیکی و ساختار اصلی سایت کنید اما سایت با استقبال خوبی همراه نباشد. در این مرحله اولین مشکلی که باید اقدام به کشف و پیداکردن آن بکنید، واکنشگرا بودن یا ریسپانسیوی سایت است.
الان وقتشه!
جهت مشاوره و ساخت طراحی سایت حرفه ای و بهینه سازی سایت و تولید محتوا تماس بگیر
نویسنده
مدیر سایت
حمیده عابدی کارشناس کامپیوتر رشته نرم افزار هستم و مشغول کار در در زمینه طراحی سایت با وردپرس و آشنا به سئو و بهینه سازی سایت، تولید محتوا، برنامه نویسی HTML, CSS هستم.