Kaptain Kitty
دسته ها :Html و Css
انتشار :۷ شهریور ۱۳۹۳
بازدید :1068 بار

طراحی ریسپانسیو

طراحی ریسپانسیو

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

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

محتوا

هنگام ساختار بندی منوی ریسپانسیو خود و محتوای آن، ابتدا این کار را برای وب سایت موبایل انجام دهید (Mobile First). طراحی همراه با محدودیت به شما این امکان را می دهد که محتوای وب سایت خود را مجددا بررسی کنید و مشخص کنید که چه چیزهای لازم و چه چیزهایی اضافه است. این کار بر کل وب سایت شما اعمال می شود اما navigation مورد توجه بیشتری قرار می گیرد. اگر یکی از آیتم های مربوط به navigation در وب سایت موبایل عمل نکند، آیا اصلا ارزش دارد که در وب سایت یا navigation اولیه قرار گیرد؟ طراحی وب سایت های ریسپانسیو باعث می شود که ما به صورت متمرکز تر فکر کنیم و یک تجربه ی آنلاین قابل اعتماد و کارآمد ایجاد کنیم.

طراحی

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

طراحی responsive

طراحی responsive

 

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

پیاده سازی

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

راه حل ها

فریم ورک های CSS

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

http://getbootstrap.com/components/#navbar

نسخه ی ۳ از فریم ورک بوت استرپ به صورت پیش فرض یک navigation ارائه می دهد که در صفحه نمایش موبایل به صورت collapse شده و قابل باز شدن است و همچنان که عرض viewport افزایش یابد، به صورت افقی تبدیل می شود.

http://foundation.zurb.com/docs/components/topbar.html

فریم ورک Foundation 5 یک navigation خارج از صفحه ارائه می دهد و هنگامی که navigation فعال شود به درون viewport وارد می شود. این یک navigation قدیمی قابل collapse شدن با نوار ثابت navigation است.

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

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

پلاگین ها

اگر شما از یک فریم ورک CSS استفاده نکنید یا از فریم ورکی استفاده کنید که دارای navigation ریسپانسیو نیست، به مشکل برخواهید خورد زیرا استفاده از navigation این فریم ورک ها به تنهایی و با dependency ها دشوار است.  بهتر است از منابعی که دیگران تهیه کرده اند برای شروع کار خود استفاده کنید. در این جا به معرفی چند پلاگین محبوب می پردازیم.

  • ResponsiveNav

http://responsive-nav.com

این مورد برای navigation های ساده مناسب است و پیاده سازی آن هم آسان است. این پلاگین کوچک جاوا اسکریپتی از رویداد های لمسی و انتقالات CSS برای بهترین تجربه ی ممکن استفاده می کند.

  • FlexNav

http://jasonweaver.name/lab/flexiblenavigation/

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

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

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

 

  • Sidr

http://www.berriart.com/sidr/

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

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

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

راه حل سفارشی

ایجاد یک راه حل سفارشی همواره گزینه ی خوبی بوده است و شما نیازی ندارید که از یک برنامه نویس دیگر بخواهید که روشی را به شما ارائه دهد. این کار ساده تر از چیزی است که فکر کنید که بستگی به پیچیدگی navigation شما دارد.

نتیجه گیری

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

برچسب‌ها, , , , , , , ,

مطالب مرتبط

بهتر از من می دانید که دنیای برنامه نویسی هر روز با تغییرات جدی روبه رو است. هر روز که صفحات اینترنتی را باز می کنید می بینید که فریم ورک جدیدی وارد بازار شده که تا دیروز حتی اسمش را هم نشنیده بودید. با کمی تحقیق می بینید که اتفاقا بسیار کارامد هم هست. […]

نمی دانم برای شما هم پیش آمده است که روی پروژه ای مشغول کدنویسی باشید که در آن از افکت های سنگین ۳ بعدی و انیمیشنی بخواهید استفاده کنید یا خیر؟! اما من در چند وقت گذشته در یک پروژه ی وب اپلیکیشن مشغول کد نویسی بودم که هدفش انیمیشن سازی آنلاین در وب است. یک برنامه شبیه […]

یکی از بهترین و فوق العاده ترین پلاگین های جاوااسکرپیتی، پلاگینی است با عنوان ai2html، که کوتاه شده ی عبارت Adobe Illustrator to html می باشد. به طور خلاصه: می توانید فایل گرافیکی ساخته شده توسط نرم افزار Adobe Illustrator را به کدهای html تبدیل کنید. و این یکی از هیجان انگیزترین کارهای ممکن در وب است. […]

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

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه