طراحی سایت بر اساس موبایل
توسط حمیدرضا عباسی
امروزه هر فردی که درگیر مقوله SEO یا همان بهینه سازی سایت برای موتورهای جستجو باشد، باید حتما که ورژن موبایل وب سایت او نیز در دسترس کاربران وب سایت باشد، زیرا در غیر اینصورت در معرض الگوریتم گوگل قرار خواهد گرفت که این نتیجه خوبی در بر نخواهد داشت.
تحقیقات نشان داده است که هم اکنون برخلاف بسیاری از روندهای دنیای SEO یا همان Search Engine Optimization ، استفاده از mobile web و یا همان طراحی وب سایت برای موبایل و تبلت روندی صعودی دارد، اگرچه که بسیاری از سایت ها صرفا ادعا می کنند که ساختار آنها mobile friendly است.
به یاد داشته باشیم که ط راحی یک وب سایت واقعا زمانی برای موبایل و تبلت طراحی شده است که کاربران در دستگا های موبایل و تبلت به خوبی وب سایت و صفحه وب سایت مورد نظر را ببینند. در حال حاضر نه تنها mobile web در حال گسترش می باشد بلکه در حال انفجار است. طبق بررسی انجام شده از طرف Statista میزان ترافیک تحت وب در سال ۲۰۱۹ حدود ۲۴.۳ اگزابایت تخمین زده شده است، که رقمی است فراتر از ۴.۲ اگزابایت در سال ۲۰۱۵.
صرفا برای اطمینان از اینکه موضوع را درک کرده باشید باید به اطلاع برسانم که هر اگزابایت معادل یک میلیارد گیگابایت است.
در این مقاله از سلسله مقاله های طراحی وب سایت و بهینه سازی سایت و سئو که در شرکت طراحی سایت وب شهر برای شما تهیه شده است, قصد داریم تا شما را با طراحی سایت برای موبایل و تبلت و همچنین واکنش بازدید کنندگان وب سایت برای دیدن این وب سایت ها آشنا نماییم.
طبق گفته های گروه Nielsen-Norman ، با وجود اینکه مدارک نشان می دهند که بازدیدکنندگان جهت وب گردی از موبایل های خود بهره می برند و از این دستگاه ها زیا استفاده مینمایند ولی تنها برخی از طراحی های وب سایت ها بر پایه موبایل است و بیشتر طراحان وب سایت این استانداردها را رعایت نمی نمایند. به این معنا که طراح وب سایت به خوبی استاندارد های طراحی سایت برای موبایل و تبلت یاهمان responsive را رعایت نمی نماید.
تعداد کاربرانی که در سرتاسر دنیا از smartphone ها استفاده می کنند بیشتر از کاربرانی است که از لپ تاپ و desktop بهره می برند اما استفاده و یا کاربری وب سایت هایی بر پایه موبایل و اپلیکیشن ها همچنان کمتر از نسخه های مشابه بر پایه desktop است.
البته که برخی از کاربران وب سایت ها خواهان این مورد هستند که نه تنها وب سایت آنها مورد پذیرش گوگل بوده بلکه کاربران نیز تجربه خوبی در زمان بازدید از سایت آنها داشته باشند ویا طراحی مطابق با نظر کاربر باشد. به همین دلیل آنها طراحی خود را در این راستا انجام می دهند. بیشتر طراحان امروزه دوست دارند تا استاندارد های طراحی سایت برای موبایل و تبلت را رعایت نمایند.
دیدگاه خود را مشخص نمایید
اکثریت مردم دیدن وب سایت ها در موبایل و تبلت را دوست دارند و این مورد را تحت نام طراحی سایت Responsive میشناسند. با این حال طراحی responsive تنها استراتژی موجود و برترین دیدگاه نمی باشد. در حقیقت بهترین گزینه بر این پایه استوار است که شما می خواهید تا بازدیدکنندگان چگونه با محتویات سایت شما تعامل نمایند. مهم این است که کاربران بتوانند با بالاترین کیفیت و بهترین شرایط به مطالب داخل وب سایت ها دسترسی داشته باشند و آنها را ببیننند و حتی این مطالب و صفحات وب سایت را به دیگران هم معرفی نمایند.
طراحی سایت Responsive
استفاده از media query ها برای نمایش سایت بر اساس اندازه صفحه نمایش، روشی متداول برای طراحی بر پایه چند دستگاه (multiple devices) است. و این بدان معناست که شما یکبار سایت را طراحی می نمایید و از آن به بعد کار را به CSS می سپارید تا بر اساس اندازه صفحه نمایش، تغییر در اندازه را انجام دهد.
طراحی سایت تعاملی
این طراحی متکی به طراحی صفحات استاتیک برای breakpoint های متفاوت است. یعنی زمانی که اندازه صفحه نمایش تشخیص داده می شود بهترین layout نمایش داده شود. در اینجا شما نیازمند آن هستید که layout های متفاوتی برای صفحات نمایش مختلف طراحی نمایید.در اغلب موارد شش layout برای width های رایج طراحی می شوند که بصورت روبرو است: ۳۲۰px , 480px , 760px , 960px , 1200px , 1600px
طراحی نرم افزارهای موبایل
زمانی از این اپلیکیشن ها بهره می برید که طراحی بر اساس iOS ، اندروید و یا Windows app انجام داده اید و قصد ارائه محتوای سایت خود به کاربرانی که از موبایل استفاده می کنند را دارید.
سیستم طراحی وب سایت Responsive چگونه کار میکند
امروزه پیدا کردن وب سایتی که نوعی از تعامل را به کاربر ارائه ندهد و کاربر نتواند با آن وب سایت کار نماید و تعامل داشه باشد دشوار است. یک وب سایت می تواند در حیطه تجارت، مجموعه اطلاعاتی از مشتریان آتی یک شرکت را و یا فعالیت آن در زمینه تجارت الکترونیک و سایت های فروشگاهی را ارائه دهد و یا سایتی جهت بررسی رویدادها و یا location ها توسط کاربران باشد. در هر حالت کاربر در حال فراهم نمودن اطلاعات، انجام انتخاب و کلیک بر روی button هاست و شما باید به این نکته توجه نمایید که تمامی موارد بر روی گوشی های موبایل متفاوت است.
در ابتدا بر روی ویژگی های مهم تمرکز نمایید. این مورد نیازمند انجام تغییراتی در ساختار سایت شماست، بدان معنا که شاید نیاز باشد تا از درج نمودن برخی از المان ها صرف نظر نمایید. انجام این مورد نه تنها از بهم ریختگی سایت شما جلوگیری می کند بلکه به شما اجازه می دهد تا بتوانید button ها و یا برخی از المان ها را درشت تر نمایید تا لمس آن نیز آسان تر شود و تا جایی که ممکن است کاربر نیازی به وارد نمودن text نداشته باشد.
اگرچه که موبایل آنها دارای کیبوری برای تایپ نمودن است ولی ما خوب می دانیم که زمان استفاده از آن، مشکلات زیادی از قبیل autocorrect و یا قابلیت پیشگویی متن (text predict) برای کاربر رخ می دهد. بعلاوه این احتمال وجود دارد که کانکشن ارتباطی و اینترنت کاربر قطع گردد. در حقیقت هر چه درگیری کاربر با سایت کمتر باشد، درصد رضایت نیز افزایش پیدا می کند.
به کاربران خود کمک نمایید تا سایت را بهتر بپیمایند
برای SEO یا همان بهینه سازی سایت در موتورهای جستجو طراحان وب سایت در طی سال های متمادی تلاش نموده اند که منوی ها navigation پیچیده ای را طراحی نمایند که اسپایدرهای موتورهای جستجو بتوانند همه چیز را index کنند. همچنین این مزیت را برای کاربران دارند تا بتوانند در قالب منوی navigation به آنچه که می خواهند دست یابند. اما این مورد برای کاربران وب سایت که قصد دارند از موبایل خود در این راستا استفاده کنند کار را دشوار کرده و موجب شده تا sitemap ، crawler های موتور جستجو را به هر جایی که مدنظر شماست ارسال نماید.
به جای لیستی طولانی از آیتم ها برای منو، سعی کنید آیتم های شما از ۶ عدد تجاوز نکند تا بازدیدکنندگانی که از طریق موبایل سایت شما را رصد می کنند نیازی به scroll کردن نداشته باشند. بعلاوه submenu ها را نیز حذف نمایید. علامت کوچک + نیز که هدف از آن کلیک کاربر بر روی آن برای باز شدن منو است نیز بایستی دارای استایل منحصر بفردی باشد. بر اساس اظهارات Apple UI Design Basics یک انگشت معمولی مساحتی حدود ۴۴ پیکسل را اشغال می کند.
روند طراحی وب سایت های تک صفحه ای را نیز باید در دستور کار قرار داد، البته با این فرض که بازدیدگنندگان با موبایل نیز به آن دسترسی یابند. در این حالت سایت به کاربر اجازه می دهد که با scroll کردن در همان صفحه به تمامی اطلاعات مورد نیاز دسترسی پیدا کند. این نوع طراحی وب سایت موجب شده تا کاربر بدون مواجهه با پیچیدگی سایت های چند صفحه ای بتواند به راحتی به تمامی محتویات دسترسی یابد.
هدف خود را فدا نکنید
زمانی که به کاربرانی که با موبایل به سایت شما دسترسی می یابند فکر می کنید نباید صرفا غرق در این موضوع شوید و هدف خود را فراموش نمایید. حتما از استواری نام تجاری و همچنین لوگوی مورد نظرتان اطمینان حاصل نمایید. اگرهم سایت شما دارای محتوای زیادی است مطمئن شوید که کاربرانی که با موبایل به سایت شما دسترسی می یابند به تمام مطالب دسترسی داشته باشند. در غیر اینصورت پنهان نمودن و یا اشاره نکردن به برخی از مطالب در قالب صفحه نمایش موبایل کاربر را وادار می کند که از نسخه desktop استفاده کند.
به عنوان طراح سایت ما این ایده را در کار خود لحاظ نموده ایم. در واقع هر ساله لیستی از تمامی مدهای و متدهای رایج معرفی می گردد که بایستی به آنها توجه نماییم. که طراحی برای کاربرانی که با موبایل به سایت شما دسترسی می یابند جزو آنها نمی باشد. این حقیقتی است که صنعت طراحی وب ما در حال گذر به سمت آن است و تنها صفحات نمایش با اندازه های متفاوت است که هر روزه ارائه می شوند تا با آنها کار کنیم.
شما، سازمان شما ، مشتریان و تمامی سهامداران شما بایستی نکات مهم را در نظر گرفته و سایت خود را بر اساس این المان ها ایجاد نمایید. اما باید به بازدیدکنندگان از سایت خود نیز فکر کنید زیرا این همان چیزی است که به حساب می آید. تجربه کاربر نباید در این راستا باشد که آنچه که ما فکر می کنیم و می بینیم درست است. ما قادر نیستیم که کاربران را وادار کنیم که بهترین تجربه را از بازدید سایت ما داشته باشند. اما در عوض ما می توانیم به راحت ترین حالت ممکن آنچه را که می خواهند در اختیارشان قرار دهیم.
بنابراین قبل از آنکه به دنبال checklist یا راهنمایی باشیم که به ما بگوید بهترین تجربه کاربری چیست، به این موضوع بیاندیشیم که بایستی چه بگوییم و بازدیدکنندگان وب سایت ما خواستار شنیدن چه موضوعی هستند.
حمیدرضا عباسی
حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.
مطالب پیشنهادی
روش هایی جهت حفظ رتبه در موتورهای جستجو
25 مهر 1396