نحوه تبدیل سایت به نسخه موبایل
توسط حمیدرضا عباسی
از زمانی که دستگاه های موبایل نسبت به نسخه های دسکتاپ پیشی گرفت, برای طراحان وب سایت بسیار اهمیت دارد تا برای این دستگاه ها طراحی های جدیدی را در ذهن داشته باشند.
اگر چه در بعضی از موارد ممکن است که از کنترل خارج شود. در بسیاری از موارد طراحان به دنبال سازگار نمودن نسخه دسکتاپ وب سایت خود با نسخه موبایل آن هستند. و در نتیجه بعضی از آبجکت ها در داخل صفحه وب سایت ممکن است به درستی به نسخه موبایل تبدیل نشود. طراحان وب سایت باید این نکته را متوجه شوند که نوع قرار گرفتن و طراحی و موقعیت دهی آبجکت ها در نسخه موبایل با نسخه کامپیوترهای رومیزی کاملا متفاوت میباشد. اما ممکن است بگویید که چگونه….
در ادامه همین مقاله با شما در مورد نکته ها و ترفندهای آن صحبت مینماییم.
باید کوتاه و مختصر بودن را بپذیرید
امروزه مختصر طراحی نمودن و خلاصه نمودن طراحی وب یکی از علاقه مندی ها و باید ها در طراحی وب سایت محسوب میشود. به دلیل اینکه کاربران به راحتی مطالب خود را در وب سایت پیدا نموده و احساس بهتری از دیدن وب سایت مربوطه خواهند داشت. موقعی که کاربری توسط موبایل خود وارد وب سایت شما میشود, مهمترین انتخاب او خلاصه بودن مطالب میباشد. این میتواند به بهبود عملکرد وب سایت شما کمک بسیار زیادی نماید.
بر طبق آخرین تحقیقات گروه Nielsen Norman Group کوتاه نمودن و بریدن مطالب یکی از بایدها در طراحی سایت ها برای موبایل میباشد. اما این مطلب برای طراحان چه معنایی میتواند داشته باشد و آنها در کل چه مطالبی را باید در نسحه موبایل وب سایت طراحی شده حذف نمایند؟
این به آن معنا میباشد که مطالب و محتویاتی که کاربران در موبایل و سایز کوچک صفحه های نمایش لزومی ندارد که آنها را مشاهده نمایند حذف گردد. به عنوان مثال اگر شما می خواهید وب سایت فروشگاه اینترنتی خود را از حالت دسکتاپ به نسخه موبایل آن تبدیل نمایید, نحوه نمایش محصولات را برای کاربران نگه دارید و آن را حذف نکنید. این میتواند یک نکته بسیار کلیدی باشد چرا که مشتریان دوست دارند تا در یک مغازه آنلاین همه چیز را داشته باشند تا در صورت لزوم آن را خریداری نمایند و در نقطه مقابل فروشگاه های اینترنتی از هر نوع باید همه کالاها را برای بازدید کنندگان خود فراهم نمایند.
لینک های دسترسی یا Navigation را مخفی نمایید
یکی از مهمترین نکته هایی که در وب سایت های نسخه های موبایل میتواند وجود داشته باشد منو از نوع همبرگر میباشد.منویی که با سه خط افقی مشخص شده و در همه جای بالای وب سایت میتوانیم آن را مشاهده نماییم. این میتواند یکی دیگر از بهترین راه حل هایی باشد که وب سایت را برای صفحه های نمایش کوچک طراحی مینماییم و این قدرت را به طراح میدهد تا موقعیت های آبجکت ها را عوض نماید.
استفاده از این منوهای همبرگری میتواند مزیت دیگری را هم داشته باشد و آن این است که طراح برای برگرداندن طرح از حالت دسکتاپ به موبایل لزومی ندارد تا بسیاری از آیتم ها و لینک ها را از داخل Navigation حذف نماید.
به وب سایت Bobby Flay’s که مغازه همبرگر فروشی است نگاهی بیاندازید. Navigation در سراسر بالای صفحه قابل مشاهده میباشد و زمانی که به حالت موبایل وب سایت میرویم, این Navigation کلی حذف میشود. و در نهایت در یک منوی همبرگری یا سه خط افقی نمایش داده میشود.
همچنین وب سایت Walmart هم در حالت نسخه موبایل نوع دسترسی همبرگری را به کاربر خود نمایش میدهد.
در حالت نسحه دسکتاپ وب سایت تمامی دپارتمان ها در یک منوی بازشونده که لایه دیگری را در داخل صفحه نمایش میدهد نشان داده میشود. در نسخه موبایل این حالت نمایش اصلا امکان پذیر نمیباشد و اجبارا منوی دوم در قالب یک منوی همبرگری به کاربر وب سایت نمایش داده میشود.
از تک ستون ها استفاده نمایید
به خاطر داشته باشید که طراحی راحتتر و خلاصه تر در نسخه های موبایل زمانی واقعا میتواند به حقیقت بپیوندد که شما از طراحی تک ستونی استفاده نمایید, چراکه کاربران در صفحه نمایش های کوچکتر به راحتی میتوانند وب سایت و محتویات داخل آن را مشاهده نمایند. یکی از مهمترین مزایای استفاده از طراحی تک ستونی این است که هرگز اسکرول افقی نخواهید داشت. بنابراین کاربران درگیر اسکرول افقی از راست به چپ با بالعکس نخواهند شد.
زمانی که شما وب سایت نسخه موبایل خود را با حالت تک ستونی به کاربران نشان دهید, در نهایت شما تجربه خوب و بهتری به کاربرانتان خواهید داد, از اینکه به راحتی میتوانند صفحه را اسکرول نمایند و مطالب را بخوانند و حتی بر روی لینکها کلیک نموده و صفحات جدیدتری را ملاحظه نمایند.
نسخه موبایل وب سایت The New York Times در حالت دسکتاپ دارای چندین ستون میباشد که برای کاربران با صفحه نمایش بزرگتر بسیار مناسب است. موقعی که کاربران موس خود را به سمت چپ و راست میبرند مشکلی را نخواهند داشت.
اما همین وب سایت در نسخه موبایل خود برای نمایش بهتر و موثرتر از طراحی تک ستونی استفاده نموده است.
ملاحظاتی که در طراحی وب سایت موبایل باید آنها را به خاطر بسپارید
به دلیل اینکه موبایل امروزه بر روی کاربران تاثیر زیادی داشته است, بنابراین طراحان باید نسخه موبایل وب سایت را هم طراحی نمایند. طراحی سایت برای موبایل تنها به این معنا نیست که فقط آبجکت ها را در داخل صفحه وب سایت کوچک نماییم. به این معنا است که بهترین حالت نمایشی و چیدمان را در صفحه های نمایشی کوچک برای آنها طراحی نماییم. البته امروزه یکی دیگر از مهمترین مواردی که در سئو وب سایت و بهینه سازی سایت میتواند برای طراحان وب سایت مهم باشد همین طراحی وب سایت برای نسخه های موبایل و تبلت میباشد.
** در حال حاضر اهمیت نسخه موبایل و شبکه های اجتماعی در سئو و بهینه سازی وب سایت خیلی بیشتر از گذشته شده به همین دلیل ریسپانسیو بودن و نسخه موبایل سایتتان از اهمیت بالایی برخوردار است.
حمیدرضا عباسی
حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.
مطالب پیشنهادی
روش هایی جهت حفظ رتبه در موتورهای جستجو
25 مهر 1396