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

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

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

طراحی ریسپانسیو چیست؟

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

 

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

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

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

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

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

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

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

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

Grid های شناور

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

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

به منظور محاسبه نسبت های هر یک از المان های صفحه، شما باید المان هدف را بر زمینه ی آن تقسیم کنید. در حال حاضر بهترین روش برای این کار این است که اول یک mockup دقیق در یک ادیتور تصویری پیکسلی مانند فوتوشاپ ایجاد کنید. با این mockup شما می توانید المان های یک صفحه را اندازه گیری کرده و آن بر عرض کامل صفحه تقسیم کنید. برای مثال اگر آرایش شما یک آرایش معمولی با ۹۶۰ پیکسل است، پس این مقدار container شما خواهد بود. بنابراین المان هدف شما یک مقدار اختیاری مانند ۳۰۰ پیکسل خواهد داشت. اگر نتیجه را ضرب در صد کنیم، مقدار درصدی ۳۱٫۲۵% را خواهیم داشت که می توانیم آن را بر المان هدف خود اعمال کنیم. در زیر عملیات ریاضی را می بینید:

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

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

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

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

مدیا کوئری

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

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

 

.content {

float: left;

}

 

.social_icons {

display: none

}

 

// and so on...

 

}

با استفاده از یک سری از مدیا کوئری ها مانند این می توانیم به سوی رزولوشن های بالاتر حرکت کنیم. مجموعه عرض های مطلوب با پیکسل های زیر توصیه می شود:

  • ۳۲۰px
  • ۴۸۰px
  • ۶۰۰px
  • ۷۶۸px
  • ۹۰۰px
  • ۱۲۰۰px

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

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

 

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

مطالب مرتبط

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

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

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

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

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

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

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