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

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

طراحی گردش محور

مشکل

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

  • این طرح شما چگونه باید در دستگاه هایی که اندازه کوچک تری دارند به نمایش گذاشته شود؟
  • سلسله مراتب محتواهای شما به چه صورت است؟
  • پیمایش صفحات در این صفحات کوچکتر به چه صورت است؟

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

کار بیشتر یا کار موثرتر؟

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

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

راه حل : راهنمای اولویت بندی

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

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

صفحات مختلف

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

اجازه ندهید که سادگی شما را گول بزند

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

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

نکته ای در مورد چهارچوب

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

برای دسترسی به مقالات بیشتر می توانید به بخش مقالات لیو سایت ساز مراجعه نمایید.