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

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

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

یکی از بزرگترین موانع هنگام ایجاد یک وب سایت با طراحی واکنش گرا ، پیاده سازی 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 خود، چالش های خود را مشخص کنید، سپس بررسی کنید که کدام روش طراحی بهترین انطباق را با آن محتوا دارد و در آخر کدام روش پیاده سازی به بهترین شکل آن طرح را پیاده می کند.

bootstrap navigation در ریسپانسیو بوت استرپ طراحی responsive طراحی ریسپانسیو طراحی سایت طراحی وبسایت فریم ورک foundation فریم ورک بوت استرپ
مطالب مرتبط

فرمت Gif ابتدا در سال ۱۹۸۷ ابداع و توسط استیو ویلهایت از شرکت Compuserve به نمایش عمومی درآمد. Gif ها (Graphics Interchange Format یا قالب مبادله گرافیکی) با ایجاد امکان استفاده از ۲۵۶ رنگ و در عین حال حفظ فرمت فشرده که می توانستند توسط افرادی با مودم های کند هم بارگذاری شوند، در تصاویر […]

گرچه HTML5 تغییرات چشمگیری در روش مارک آپ کردن محتوا ایجاد می کند، اما باید توجه داشت که این تغییرات باعث نمی شوند مرورگرهای قدیمی نتوانند با آن کار کنند و هم اینکه منجر به مشکلات در Layout و خطای صفحه نمی شوند. این یعنی شما می توانید هر پروژه ی قدیمی که حاوی HTML4 […]

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

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

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

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

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