نکات و ترفندهای طراحی قالب ریسپانسیو در سال ۲۰۱۸
نکات و ترفندهای طراحی قالب ریسپانسیو در سال 2018 » در این مقاله، 12 نکته در زمینه طراحی ریسپانسیو قالب وب سایت را که در سال 2018 اهمیت دارند معرفی می کنیم.

نکات و ترفندهای طراحی قالب ریسپانسیو در سال ۲۰۱۸

Quick Responsive Web Design Tips & Tricks for 2018

ترفندهای طراحی قالب ریسپانسیو

 

لزوم طراحی قالب وب‌سایت بصورت ریسپانسیو:

این روزها طراحی ریسپانسیو قالب های وب سایت یک "باید" می باشد. رشد روزافزون تعداد افرادی که با گوشی های موبایل خود از وب سایت ها بازدید می کنند و یا برای یافتن محصول یا سرویسی خاص در گوگل جستجو می کنند، دلیل محکمی بر این مدعاست که باید قالب وب سایت کسب و کار ما واکنش گرا (ریسپانسیو:responsive) باشد. حتی گوگل نیز در اعلام نتایج سرچ، از وب سایت های ریسپانسیو بیشتر استقبال می کند. بنابراین قصد داریم در این مقاله، نکاتی را در زمینه طراحی قالب های جذاب و واکنش گرا بیان کنیم که مورد استفاده شما عزیزان قرار بگیرد.

 

نحوه پیاده سازی یک قالب ریسپانسیو:

ترفندها و نکاتی که در بخش زیر بیان می کنیم به شما کمک می کند که هم سایت خود را بصورت ریسپانسیو طراحی کنید و هم موبایل-پسند (mobile-friendly). این نکات، بهترین و کاربردی ترین نکات در این زمینه می باشند:

 

۱- یاد بگیرید کاربران چگونه وب سایت شما را در موبایل مشاهده می کنند:

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

بعنوان مثال اگر کاربران بدنبال لینک تماس با ما در سایت تان می گردند، آیا می توانند در موبایل، این لینک را براحتی پیدا کنند؟

 

۲- ابتدا طرح قالب سایت خود را برنامه ریزی کنید:

توصیه می شود ابتدا طرح (Layout) قالب وب سایت خود را طرح ریزی کنید. در واقع غالب طراحان وب، ابتدا طرح خود را با وایر فریم (wire frame) شروع می کنند و سپس طرح بصری (visual design) آنرا آماده می کنند، قبل از اینکه وارد مراحل کدنویسی آن شوند. رعایت این قضیه، نه تنها باعث می شود متوجه شوید که قالب شما از لحاظ ظاهری به چه شکل می باشد، بلکه باعث می شود که طراح وب سایت ساده تر بتواند تمپلیت سایت را ویرایش و شخصی سازی کند و مطابق برند کسب و کار آنرا آپدیت کند.

ابزارهای ایجاد نمونه اولیه واکنش‌گرا (Responsive Prototype):

سعی کنید چندین نمونه اولیه (Prototype) از قالب سایت خود طراحی کنید و آنرا در اسکرین های مختلف (انواع موبایل-تبلت-دسکتاپ) تست کنید تا مطمئن شوید قالب طراحی شده ریسپانسیو می باشد. در زیر، ابزارهایی را برای ایجاد نمونه های اولیه واکنش گرا (responsive prototype) معرفی می کنیم:

  • Adobe Edge Reflow: این ابزار شرکت ادوبی (Adobe) امکان طراحی ویژوال قالب یک وب سایت را به شما خواهد داد بطوریکه می توان فایل psd فتوشاپ قالب سایت را به کدهای html-css تبدیل کرد و از نقاط شکست (break-point) اسکرین های مختلف مانند موبایل نیز پشتیبانی می کند.
  • InVision: به لطف این نرم افزار شما می توانید نمونه اولیه (prototype) طرح یک وب سایت را بصورت تعاملی (interactive) ایجاد کنید. پس از ایجاد پروتوتایپ، کاربران قادرند همانند یک سایت واقعی با آن رفتار کنند مانند: اسکرول، کلیک روی لینک، دکمه (button)، منو (navigation) و… InVision ابزاری مفید است برای اینکه متوجه شویم وب سایت ما در محیط ها و بسترهای مختلف چگونه رفتار می کند.

 

InVision

 

  • Wirefy: ابزار wirefy این امکان را به شما می دهد که طرح اولیه قالب سایت خود را بر اساس محتوا (content) پیاده سازی کنید. بطوریکه امکان استفاده از گریدهای واکنش گرا (responsive grid) و وایرفریم (wireframe) را به شما خواهد داد. بدون اینکه نیاز باشد بصورت دستی طول و اندازه بخش ها را تعیین کنید.

 

۳- مراقب منو (Navigation) باشید:

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

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

 

۴- بهینه‌سازی تصاویر وب‌سایت:

تصاویر نقش مهمی در طراحی یک وب سایت ایفا می کنند. از طریق تصاویر شما می توانید با کاربران سایت تان ارتباط عاطفی (emotional connection) برقرار کنید و محصول یا سرویسی که می خواهید از طریق سایت در معرض دید کاربران قرار دهید را از لحاظ بصری زیباتر ارائه کنید. بنابراین بهینه سازی (optimization) تصاویر وب سایت یک الزام می باشد.

 

بهینه‌سازی تصاویر وب‌سایت

 

در این راستا می توانید از ابزار کاربردی و رایگان TinyPng استفاده کنید. این وب سایت قادر است حجم تصاویر با فرمت jpg و یا png را بدون کاهش کیفیت، کم کند. کاهش سایز فایل های تصاویر باعث می شود صفحات وب سایت سریع تر لود شوند و در مصرف پهنای باند سایت نیز صرفه جویی شود.

 

 5- در نظر گرفتن متد mobile-first: 

روش دیگری که می توان توسط آن به طراحی واکنش گرا (responsive design) برسیم طراحی برای موبایل و اسکرین های کوچک است. بدین صورت که ابتدا طراحی قالب سایت را برای دستگاه های کوچک مانند موبایل انجام می دهیم و اگر تمام المان ها مانند لینک، دکمه، منو و… در موبایل بدرستی نمایش یابند، در اسکرین های بزرگ مانند دسکتاپ نیز مشکل نخواهند داشت.

» مطالعه مقاله بهینه سازی وب سایت برای موبایل

 

۶- یادگیری نحوه استفاده از مدیا کوئری (Media-Query):

مدیا کوئری‌ها از ابتدا در CSS تعریف شده بودند و تنها بصورت تئوری وجود داشتند اما از سال ۲۰۱۲ که مرورگرها از Media Query ها پشتیبانی کردند بصورت عملیاتی و کاربردی در CSS مطرح شدند و مورد استفاده قرار گرفتند. هدف و وظیفه اصلی مدیا کوئری بهینه سازی قالب وب سایت در اسکرین ها و دسنگاه های مختلف می باشد. وقتی از مدیا کوئری ها در CSS سایت خود بهره می برید، محتوای سایت تان نسبت به تغییر سایز اسکرین در دستگاه های مختلف واکنش نشان می دهد.

مدیا کوئری (media-query) وضوح (Resolution)، عرض (Width) و جهت (Orientation) دستگاه را تشخیص داده و به نسبت این اطلاعات، استایلهای CSS مناسب آنها را اعمال می کند.

نمونه ای از مدیا کوئری به صورت زیر است:

@media screen and (min-width:500px) {

    your CSS rules here

}

» مطالعه مقاله آموزش مدیا کوئری برای طراحی ریسپانسیو

 

۷- نمایش صفحه کلید مناسب هر فیلد در فرم های سایت:

منظور اینست که بعنوان مثال اگر فیلدی که کاربر باید وارد کند شماره تماس است، صفحه کلید کاربر در موبایل بصورت عددی (numerical) نمایش داده شود. اگر آدرس ایمیل است، صفحه کلید کاربر دارای علامت @ و .com باشد و…

 

۸- توجه به قابلیت آسان کلیک شدن دکمه ها در موبایل:

به اندازه دکمه ها (buttons) در دستگاه های موبایل دقت ویژه ای داشته باشید. سعی شود دکمه ها در اسکرین های کوچک مانند موبایل بقدری بزرگ و مشخص باشند که کاربر بتواند براحتی و بدون زحمت روی آنها کلیک کند. رنگ دکمه ها نیز از اهمیت ویژه ای برخوردار است و توصیه می شود دکمه ها به نسبت سایر المان های صفحه واضح تر باشند.

 

۹- بهینه سازی تایپوگرافی (Typography Optimization):

وقتی درباره متون صفحات وب صحبت می کنیم باید اطمینان پیدا کنیم که محتوای سایت تان در اسکرین های کوچک مانند موبایل براحتی خوانده می شود و کاربران مشکلی با خواندن متن مقالات و یا صفحات سایت شما ندارند. بهترین سایز فونت برای متون یک وب سایت ۱۶ پیکسل (یا ۱em) می باشد. تیترهای هدینگ (H1,H2,H3,…) را متناسب با این سایز تعیین کنید. توصیه می شود ارتفاع خطوط (line height) را برابر ۱٫۵em در نظر بگیرید تا مطمئن شوید پاراگراف ها فضای کافی برای نفس کشیدن دارند!

نکته دیگری که باید در مورد متون وب سایت خود در موبایل رعایت کنید استفاده از فونت خوانا (legible font) و اجتناب از فونت های فانتزی و ناخوانا می باشد. زیرا اینگونه فونت ها در اسکرین های کوچک مانند موبایل بسیار ناخوانا خواهند بود.

 

۱۰- استفاده از فریم‌ورک‌های ریسپانسیو:

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

 

استفاده از فریم‌ورک‌های ریسپانسیو

 

شما همچنین می توانید در صورت نیاز، از قالب های آماده وردپرس نیز در سایت خود بهره ببرید و یک بخش بلاگ داشته باشید.

 

قالب های آماده وردپرس

 

۱۱- استفاده از طراحی مینیمال:

در سالهای اخیر، طراحی مینیمال (Minimalist Design) محبوب تر شده است و استفاده از اینگونه طرح ها رشد روزافزونی دارد. در طراحی مینیمال شلوغی و بهم ریختگی وجود ندارد و کاربر می تواند سریع تر محتوای وب سایت را بخواند در نهایت منتج به تولید Lead بیشتر خواهد شد و سرعت لود سایت نیز افزایش می یابد زیرا از المان های کمتری در قالب های مینیمال استفاده می شود.

 

۱۲- استفاده صحیح از دکمه‌های اشتراک‌گذاری در شبکه های اجتماعی (Share Buttons):

درج دکمه های به اشتراک گذاری در سوشیال مدیا در مقالات سایت باعث می شود مطالب سایت تان بیشتر دیده شود و به ترافیک بیشتری منتج شود. هرچند استفاده ناصحیح از share button می تواند باعث بلاک شدن محتوای سایت شود بدین معنی که در اسکرین های کوچک مانند موبایل، دکمه های شبکه های اجتماعی روی محتوای سایت نمایش داده شوند و به کاربر اجازه ندهد براحتی مطلب را بخواند. بنابراین باید سعی کنید با استفاده از مدیا کوئری ها در css در اندازه های کوچکتر از ۷۶۸ پیکسل (۷۶۸px) اندازه دکمه های social media را کوچکتر کنید و یا آنها را مخفی کنید.

 

بررسی ریسپانسیو بودن وب سایت:

هنگامیکه نکات طراحی قالب واکنش گرا را رعایت کردید، وقت آنست که چک کنید آیا الان وب سایت شما ریسپانسیو (واکنش گرا:Responsive) می باشد یا خیر.

ابزارهای آنلاین و رایگان متعددی برای بررسی واکنش گرایی (responsiveness) وب سایت ها وجود دارد که ما در اینجا به بهترین ابزارها در این زمینه اشاره می کنیم:

 

۱- تست موبایل‌پسند بودن (Mobile-Friendly) توسط گوگل:

سایت گوگل ابزار mobile friendly test را معرفی و پیشنهاد می کند. مطابق تصویر زیر، URL سایت خود را در باکس مربوطه وارد کنید و دکمه Run Test را بزنید.

 

تست موبایل‌پسند بودن (Mobile-Friendly)

 

پس از اجرای تست واکنش گرایی، اگر وب سایت شما ریسپانسیو باشد، یک پیغام سبزرنگ (مطابق تصویر زیر) نمایش داده می شود:

 

اجرای تست واکنش گرایی

 

و اگر قالب وب سایت شما ریسپانسیو نباشد، گوگل دلایل responsive نبودن آن را اعلام خواهد کرد و می توانید نسبت به رفع مشکلات آن اقدام کنید.

 

۲- Screenfly:

ابزار اسکرین‌فلای (ScreenFly) که وب سایت quirktools ارائه می دهد، به شما این امکان را می دهد که وب سایت خود را در اندازه های مختلف اسکرین مشاهده کنید.

 

Screenfly

 

برخلاف ابزاری در مورد ۱ معرفی کردیم (ابزار تست ریسپانسیو گوگل)، ابزار screenfly نکات و مشکلات ریسپانسیو نبودن سایت را به شما اعلام نمی کند اما نحوه نمایش وب سایت را در دستگاه های مختلف مانند انواع موبایل، کامپیوترهای دسکتاپ و حتی تلویزیون های بزرگ را ارائه می دهد.

 

۳- MobileTest.me

وب سایت mobiletest.me این امکان را به طراحان وب سایت می دهد که با ورود آدرس سایت خود، نحوه نمایش و تعامل سایت را در دستگاه های مختلف تست کنند. مانند نحوه نمایش وب سایت در مدل خاصی از موبایل یا تبلت. شما می توانید با وب سایت تان در دستگاه های مختلف تعامل (interact) کنید. مانند پر کردن فرم و زدن دکمه آن و تست تجربه کاربری وب سایت (UX: User Experience)

 

MobileTest.me

 

نتیجه گیری:

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

 

منبع: https://business.tutsplus.com/articles/quick-responsive-web-design-tips-tricks


برچسب‌ها:

تایپوگرافیریسپانسیو 2018طراحی ریسپانسیوطراحی مینیمالطراحی واکنش گراقالب ریسپانسیوقالب واکنش گرامدیا کوئریوب سایت ریسپانسیو

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 + شانزده =