0     سبد خرید
FA | EN

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

در ادامه به بررسی اشتباهاتی می پردازیم که طراح وبسایت باید از آن ها دوری کند تا طرح responsive مطمئن و کارآمد باشد.

 

1- پنهان کردن اطلاعات از کاربران

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

 

2- عدم عطف میان دستگاه و انسان

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

 

3- استفاده از کتابخانه های متعدد جاوااسکریپت

اگر یک طراح وب هستید حتماً منوهایی را دیده اید که برای باز شدن به مثلاً 20 کتابخانه javascript متصل می شوند، خب این مسئله برای کامپیوتر های دسکتاپ زیاد مضر به نظر نمی رسد و حداقل به زیبایی کار اضافه می کند، اما برای کاربران موبایل این مسئله شبیه به یک فاجعه می باشد. اگر باور نمی کند با ابزار timeline مرورگر دسکتاپ خود زمان بارگذاری هر درخواست را مشاهده کنید، سپس یکبار مقدار های آن ها را با سرعت پاسخگویی شبکه موبایل خود محاسبه کنید، خواهید دید که کاربران موبایل دچار چه دشواری بزرگی می شوند. پس سعی کنید تعداد کتابخانه های جاوااسکریپت را کاهش دهید، همچنین می توانید از شبکه های تحویل محتوا (CDN ها) برای این منظور استفاده نمایید.

 

4- خلاصه کردن همه چیز در Layout

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

 

5- نمایش یکجای محتوای زیاد

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

همیشه توجه کنید که برای جلب توجه بازدید اولی ها وقت زیادی وجود ندارد، گاهی فقط چند ثانیه!

 

6- زیاد متکی بودن بر ابعاد دستگاه

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

 

طراحی سایت واکنش گرا 

 

7- بارگذاری منابع بیش از حد

در نظر بگیرید که سایت شما در قبل از باز شدن نیاز به فراخوانی 80 سورس مختلف از قبیل CSS ها و جاوااسکریپت های بسیار دارد؟ وحشتناک است نه؟ این کار سرعت را به شدت پایین می آورد، حالا در نظر بگیرید این اتفاق در موبایل چقدر آسیب رسان خواهد بود!

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

برای پایین آوردن تعداد request ها و همچنین حجم فایل ها می توانید آنها را با ابزارهای نظیر SASS و یا Uglify فشرده و یکپارچه کنید. این اصل را در طراحی سایت برای همه انواع دسکتاپ، تبلت و یا گوشی های هوشمند حتماً رعایت کنید.

 

8 - دستکاری کردن وبسایت موجود برای دستیابی به یک طراحی Responsive

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

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

 

9 - طراحی سایت برای دسکتاپ در اولویت بالاتر!

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

 

10 - سرریز تصاویر

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

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

اما برای نیل به این هدف راه حل هایی وجود دارد که تصاویر را بسته رزولیشن و ابعاد دستگاه و به صورت داینامیک بهینه سازی کنیم. یکی از این راه حل ها استفاده از ابزار Adaptive Images برای سایت های PHP می باشد.

 

11 - ایجاد URL های جدا برای نسخه موبایل

خب البته این موضوع قابل بحث است و باید قبل از طراحی سایت به آن فکر کرد، از یک طرف ارائه یک نسخه مجزا برای کاربران موبایل قابلیت ها را به شکل فوق العاده ای بالا می برد و این موضوع می تواند کاملاً user friendly باشد (شاید بتوان از واژه device friendly) هم استفاده کرد، از طرفی هم این مسئله به سئوی سایت شما آسیب جدی وارد می کند. سعی کنید اولویت های خود را مشخص کنید و سپس در این مورد تصمیم بگیرید. مثلاً طراحی سایت برای نرم افزارهای SAAS مانند CRM ها می تواند گاهی شامل نسخه مجزا برای وبسایت (یا به عبارت بهتر نرم افزار وب) بشود، زیرا در چنین نرم افزارهایی بحث سئو به حاشیه می رود و کارایی اولویت بیشتری پیدا می کند، اما سایت یک فروشگاه اینترنتی به صورت جدی به سئو نیاز دارد. پس شاید بهتر باشد قبل از طراحی نرم افزار را برای این موضوع نیاز سنجی کنیم.

 

12 – پیوندهای مبهم

به جای اینکه کاربران را با خوراک های ناوبری مبهم گیج کنیم، بهتر است به آن ها یکسری امکانات دیداری نظیر دکمه های زیبا بدهیم که به راحتی آن ها را به مسیرهای مهم هدایت کنند.

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

 

13 – عدم استفاده از قابلیت های لمسی

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

 

14 – بلا استفاده کردن قابلیت های لمسی

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

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

 

15 – بستن در به روی کاربران

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

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

 

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

 

 

 

 

برگرفته از: blog.usabilla.com

کلمات کلیدی:
تماس با ما (021) 88037820