دست ننوشته‌های محسن!

چندی پست تکراری... ولی خواندنی!

دست ننوشته‌های محسن!

چندی پست تکراری... ولی خواندنی!

یاقوت
  • ۲
  • ۰
لازم است که وب سایتی را طراحی کنیم که هم در کامپیوتر و هم در موبایل و تبلت اطلاعات کسب و کار شما را شفاف و زیبا نمایش دهد...

ولی سوالاتی در این زمینه مطرح است:
طراحی واکنش گرا چیست و چگونه استفاده می شود؟
مزایا و معایب این کار چیست؟
چه کسانی می‌توانند سایت واکنش‌گرا داشته باشند؟
چه نکاتی را باید در این نوع طراحی به کار برد؟

طراحی واکنش گرا چیست؟ 
طراحی واکنش گرا در واقع یک روش جدید برای طراحی نوین وب سایت می باشد. تغییر در رفتار کاربران اینترنتی و استفاده بیشتر آنها از موبایل و تبلت، استفاده از طراحی واکنش گرا را ضروری کرده است. 
همانطور که شاید شنیده باشید، فروش کامپیوتر ها به طرز بی سابقه ای کاهش یافته است و طبق آمار IDC در یک چهارم اول 2013، شاهد کاهش 14% فروش کامپیوتر ها نسبت به همان زمان در سال 2012 بودیم.

این متن شامل خلاصه چند آموزش و مقاله است که لینکشان در مطلب موجود است!



Manish Dudharejia در سایت nextbigwhat مقاله ای نوشته و در آن 7 دلیل برای استفاده از طراحی واکنش گرا را بررسی کرده است:

  1. بدست آوردن بازه بیش‌تری از مخاطبین
  2. آینده نگری طراحی واکنش‌گرا (با توجه به فراگیر شدن اسمارت‌فون‌ها)
  3. گوگل طراحی واکنش‌گرا را می‌پسندد
  4. تجربه کاربری بهتر، کاربران راضی تر، و فروش بیشتر
  5. به روز رسانی و اضافه کردن ویژگی‌های جدید با هزینه و زمان کمتر
  6. کمک به ماندگاری محصول شما در ذهن مخاطب
  7. کمک به طراحی سایت با توجه به نگرش آینده وب

اصل این مطلب در nextbigwhat.com را از اینجا و ترجمه آن را که "کاریا" منتشر کرده می‌توانید از اینجا مطالعه کنید. 

حال چه کارهایی برای طراحی سایت واکنش‌گرا بایستی انجام دهیم؟

انعطاف پذیری در همه چیز!

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



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

عکس های انعطاف پذیر

عکس ها یکی از جدی ترین و پر بحث ترین بخش های طراحی واکنش گرا محسوب می شوند. روش های متنوعی برای تغییر اندازه عکس معرفی شده است که راحت ترین و پرکاربردترین آنها شاید “عکس های شناور” باشد. با این حال یکی از معروف ترین تکنیک ها استفاده از تگ  max-width در CSS است.


حداکثر اندازه تصویر ۱۰۰% است. در حقیقت اندازه عکس بزرگترین حالت آن می باشد. با کوچکتر شده صفحه، درصد بزرگی عکس نیز کاهش می یابد. این تکنیک که عکس های شناور نامیده می شود عکس را در اندازه اصلی معرفی می کند و بدون مشخص کردن اندازه طول و ارتفاع، تغییر اندازه عکس را بر عهده صفحه گذاشته است. 

در نظر داشته باشید که تگ معرفی شده در IE کاربر ندارد. این تگ را در IE با افزودن تگ width: 100% می توان برطرف کرد.

عکس های واکنش گرا Filament Groups

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

این روش نیاز به یک سری فایل دارد که در فایل های معروف Github وجود دارند. Rwd-images.js، .htaccess و فایل عکس rwd.gif. سپس با استفاده از یک کد ساده HTML دو عکس کوچک و بزرگ تولید شده با این روش را در مرورگر صدا می زنیم تا بر حسب نیاز یکی از آنها را نمایش دهد.



Data-fullsrc یک attribute در HTML5 است که که مشخص می کند که اگر رزولوشن صفحه بیشتر از ۴۸۰ بود عکس بزرگ را نمایش دهد در غیر این صورت فایل کوچکتر نمایش داده شود. 
نکته مثبت این روش این است که تقریبا در تمامی مرورگرهای جدید پشتیبانی می شود. مرورگرهایی مانند IE8+ و Safari، Chrome و Opera و نیز تمامی مرورگرهای تبلت و موبایل.

طرح ساختاری (CSS) قابل تغییر 
در تغییر اندازه های زیاد بیشتر زمان ها نیاز است که طرح را نیز تغییر دهیم. برخی مواقع نیاز به تغییر استایل برخی مکان ها کافی است، برخی مواقع نیاز است که فایل های CSS به کلی تغییر کند. این کار معمولا سختی نداشته و اکثر مواقع با تغییر اندازه طول و عرض بلاک ها در CSS هایی که از همدیگر ارث بری می کنند کار تمام می شود.
ممکن است به این فکر کنید که مثلا style.css را به عنوان استایل اصلی و استایل فرزند برای موبایل را در mobile.css تعریف کنید.
اما در اینجا روشی را بررسی می‌کنیم تا همه سیستم‌ها از یک فایل CSS استفاده کنند. یکی از دلایل آن هم این است که نیاز به کدهای اضافه برای هرکدام از فایل ها نخواهد بود.


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




این کد نشان می دهد در صورتی که مرورگر این صفحه را نمایش دهد و نیز عرض صفحه نمایش ۴۸۰ باشد فایل استایل Shetland.css را اجرا کند. 
در CSS3 می توان جهت صفحه را از portrait به landscape و برعکس تغییر داد و نیز می توان بر حسب ابزار نمایش دهنده عرض صفحه را با استفاده از امکاناتی مثل device-width و min-device-width انعطاف پذیر کرد.
با استفاده از min-width و max-width نشان می دهیم که این استایل در محدوده صفحه نمایش مورد نظر فعال خواهد بود و خارج از این محدوده این استایل کار نخواهد کرد.




کلاس hereIsMyClass که در بالا تعریف شد، به دلیل پیش‌ شرطی که گذاشته شده، زمانی فعال می شود که حداقل عرض صفحه نمایش ۶۰۰px باشد.




این کد نیز برای حداکثر عرض صفحه نمایش محدوده تعریف خواهد کرد.
min-width و max-width هم برای صفحه نمایش و هم برای اندازه مرورگر قابل استفاده می باشد. برخی موارد نیاز داریم این محدوده را فقط برای صفحه نمایش در نظر بگیریم بدون در نظر گرفتن اینکه عرض مرورگر اکنون چقدر است. این کار را با min-device-width و max-device-width انجام می دهیم.


جاوا اسکریپت 
راه دیگر در طراحی واکنش گرا استفاده از Javascript به جای CSS است. این راه حل مخصوصا برای ابزارهایی که از CSS به درستی پشتیبانی نمی کنند، کاربرد خواهد داشت. معمولا به عنوان پشتیبان CSS نیز بکار می روند. 
یک کتابخانه استاندارد از javascript وجود دارد که برای سازگار ساختن مرورگرهای قدیمی با CSS3 نوشته شده است. برای استفاده از این کتابخوانه به –css3-mediaqueries.js می توانید مراجعه کنید. 
در زیر نمونه ای از کدهای جاوااسکریپت را مشاهده می کنید که بر ااس اندازه صفحه، استایل مورد نظر را باز می کند.





نمایش و عدم نمایش محتوا 
در زمانی که صفحه کوچک یا بزرگ می شود باید در طراحی واکنش گرا امکان کوچک کردن فضاها و جابجا کردن باکس ها را داشته باشیم.
CSS امکان حذف محتوا را به راحتی در اختیار قرار داده است. (کد ;display: none)
Visibility:none فقط قادر است محتوا را مخفی کند ولی display امکان مخفی کردن هر بخشی را میسر می کند.
در زیر نمونه ای از کاربرد این بخش را مشاهده می کنید:






صفحه نمایش های لمسی 
به تازگی بسیاری از تولیدکنندگان علاقه زیادی به صفحه نمایش های لمسی پیدا کرده اند. البته دلیل اصلی آنها نیز استفاده راحت تر آنها در صفحه های کوچک است. با این حال صفحه نمایش های بزرگ زیادی هستند که قابلیت لمسی نیز برای آنها قرار داده شده است! 
مسلما طراحی ها برای صفحه نمایش های لمسی با صفحه نمایش های معمولی متفاوت است. به عنوان مثال برای صفحه های لمسی چیزی به عنوان hover بی معنی خواهد بود زیرا cursor ای وجود ندارد که بر روی لینک قرار بگیرد و تغییر حالت دهد. 
برای مطلعه بیشتر برای طراحی واکنش گرا برای صفحه های لمسی پیشنهاد می کنم مقاله Designing for Touchscren را مطالعه فرمایید.


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


این مطلب، تخلیصی از مجموعه مقالات طراحی واکنش‌گرا از سایت‌های برسام، Google Developers، کاریا، nextbigwhat و سایر سایت‌هاییست که یادم نمیاد! :)

نظرات (۱)

  • سارا ایرانی
  • چقدر مطالب شما عالی و دوست داشتنیه....
    پاسخ:
    ممنون از انتقاد دوستانه شما :)

    ارسال نظر

    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    تجدید کد امنیتی