آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه

خانه » بلاگ » bootstrap » آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه

آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه

دوست داشتم درباره طراحی سایت رسپونسیو یا همان واکنش گرا responsive برای شما دوستان عزیز وب یاری مطلبی بنویسم که دیدم آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه را دوست خوبمون آقای نور هانی مطلبی درباره آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه پس خیلی راحت شروع به تمرین و طراحی کنید با مطالب عالی آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه زیر

 

 

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

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

طراحی برای صفحات نمایش لمسی

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

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

توسعه پوسته

بعد از ترسیم طرح اولیه پوسته و تعیین نقاط مرجع جهت تغییر چیدمان ها ، نوبت به نگارش کدهای پوسته وردپرس خواهد رسید. در صورتی که با تگ های پوسته وردپرس آشنایی ندارید می توانید از پوسته های مرجع و فریم ورک هایی که به همین منظور طراحی شده است استفاده نمایید به عنوان مثال پوسته Bones ،BootsrapWP ، WP-Foundation

شروع طراحی از نسخه موبایل

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

جهت دستیابی به بینش و روش صحیح طراحی پوسته از نسخه موبایل به کتاب Mobile First مراجعه نمایید.

آموزش طراحی سایت رسپونسیو واکنشگرا در۱۰ دقیقه

پشتیبانی از چیدمان فایل های رسانه ای در مرورگرهای قدیمی

از آنجایی که هدف از طراحی واکنشگرا دستیابی به چیدمان صحیح صفحات سایت در دستگاه های هوشمند و گوشی های همراه است جهت پشتیبانی از فایل های رسانه ای در مرورگر های قدیمی استفاده از اسکریپت های از پیش تعریف شده مانند Respond.js الزامی به نظر می رسد. (مانند IE 7 و ۸)

گزینه دوم جهت نمایش صحیح رسانه در مرورگر های قدیمی ، مشخص کردن حداکثر عرض نمایش ( به عنوان مثال ۱۰۰ درصد )  برای کلاس درحالت کلی و سپس اختصاص کلاسی شرطی به رسانه به همراه  عرض مناسب جهت نمایش در مرورگرهای قدیمی می باشد. جهت آشنایی بیشتر با این روش به مقاله Leaving Old Intenet Explorer Behind مراجعه نمایید.

 تصاویر در یک پوسته واکنشگرا

به نظر می رسد با عرضه ipad ها و گوشی های هوشمند که کیفیت تصویر فوق العاده ای را ارائه می دهند نوبت به تجدید نظر در کیفیت تصاویر استفاده شده در پوسته ها می باشد.

کدهای CSS و icon font گزینه های  مناسبی جهت جایگزینی تصاویر پوسته می باشند.هر چه میزان تصاویر استفاده شده در پوسته کاهش یابد سرعت بارگذاری افزایش خواهد یافت به خصوص در هنگام استفاده از گوشی های همراه که از اینترنت با پهنای باند پایین بهره می برند.

آزمایش ،آزمایش و آزمایش

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

آزمایش پوسته برای گوشی های همراه

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

یکی از مفیدترین راه ها آزمایش پوسته جدید به صورت آنلاین در سایت Screenfly می باشد.

ساخت نسخه موبایل پوسته با استفاده از افزونه ها

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

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

کلیات

تنظیم تصاویر به شکلی که عرض تگ در برگیرنده خود را اتخاذ نماید کار ساده ای به نظر می رسد به عنوان مثال می توانید عرض تصویر را در شیوه نامه اصی یا شیوه نامه Normalize پوسته خود به شکل زیر تعریف نمایید :
<div class="img-container">
<img src="logo.png"/></div>
<style>img {max-width: 100%;}</style>

 

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹

<div class=“img-container”>   <img src=“logo.png”/> </div> <style> img {     max-width: 100%; } </style>

در بیشتر موارد تعریف فوق به درستی عمل خواهد کرد بدین صورت که با کاهش عرض صفحه، کلاس img-container باریکتر خواهد شد و در نقطه ای که عرض این کلاس از عرض تصویر logo.png کمتر شود عرض تصویر را به اجبار کاهش خواهد داد . در حقیقت با تعریف max-width و اختصاص مقدار ۱۰۰% به آن عرض تصویر وابسته به عرض کلاس احاطه کننده تصویر (img-container) شده و با کاهش عرض این کلاس عرض، تصویر نیز کاهش خواهد یافت .

همچنین اختصاص max-width با مقدار ۱۰۰% از نمایش تصویر با ابعاد بزرگتر از مقدار واقعی جلوگیری خواهد کرد.

برخی از کاربران جهت نمایش تصویر به صورت تمام صفحه  مقدار ۱۰۰% را به صفت width اختصاص می دهند این تعریف در مواردی که عرض تصویر کمتر از عرض container یا عرض صفحه باشد باعث کشیدگی تصویر یا نمایش آن در ابعادی بزرگتر از مقدار واقعی و کاهش کیفیت آن خواهد شد.

البته در صورتی که تمایل دارید پوسته با مروگر های IE6 و IE7  سازگار باشد به جای صفت max-width باید از width در شیوه نامه های فرعی که جهت این مرورگرها طراحی می کنید استفاده نمایید.

اگر علاقمند به طراحی  و کدنویسی برای وب هستید حتما با واژه تصاویر Retina آشنایی دارید این اصطلاح توسط apple و جهت معرفی کیفیت صفحات نمایش دستگاه های تولید شده توسط این شرکت معرفی شده است .

فرض کنید شما قصد دارید لوگوی سایت را در ابعاد ۲۰۰*۲۰۰ و با کیفیتی بالاتر از حالت عادی نمایش دهید راه حلی که در این مورد به نظر می رسد ساخت تصویری با ابعاد ۴۰۰*۴۰۰ و نمایش آن در ابعاد ۲۰۰*۲۰۰ خواهد بود بدین ترتیب چگالی پیکسل ها ۲ برابر شده و کیفیت بهتری از تصویر را خواهید داشت سوالی که این جا مطرح است نحوه نمایش تصویر ۴۰۰*۴۰۰ در ابعاد ۲۰۰*۲۰۰ خواهد بود اولین راه حل اختصاص عرض ۲۰۰ به تصویر به شکل زیر است :

img.sitelogo {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> max-width: 200px;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }

۱ ۲ ۳

img.sitelogo {     max–width: 200px; }

متاسفانه تعریف فوق به شکلی که انتظار دارید عمل نخواهد کرد و بزرگنمایی تصویر نسبت به تصاویر دیگر صفحه دچار اشکال شده ، با کاهش عرض صفحه بیرون زدگی و اختلال در چیدمان المان های صفحه را منجر خواهد شد . ( چون شما حداکثر مقدار عرض تصویر را مستقلا ۲۰۰ تعریف کرده اید عرض تصویر هیچ گونه وابستگی به عرض صفحه یا تگ های احاطه کننده تصویر نخواهد داشت).

در این موارد کافیست تگ img را داخل تگ احاطه کننده ای به شکل زیر قرار داده سپس مقدار max-width : 200px را به این تگ احاطه کننده اختصاص دهید با این کار تصویر ۴۰۰*۴۰۰ شما با عرض ۲۰۰*۲۰۰ نمایش داده شده و در صورت کاهش عرض صفحه و عرض تگ احاطه کننده مجددا عرض تصویر کاهش خواهد یافت:

<div class=”img-container”><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img src”logo-400*400.png” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p><style><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> .img-container {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> max-width: 200px;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> .img.sitelogo {<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> max-width : 100%;<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </style>

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲

<div class=“img-container”>   <img src“logo-400*400.png” /> </div> <style> .img-container {     max-width: 200px; } .img.sitelogo {    max-width : 100%; } </style>

 اشکالات عملیاتی

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

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

در مثال قبل شما تصویر logo.png را با حجم ۲۰KB و ابعاد ۴۰۰*۴۰۰ توسط سرور برای تمام نمایشگرها (مانیتورهای عریض تا تلفن های همراه ) ارسال کرده ، در هنگام نمایش با استفاده از کدهای CSS این تصویر را متناسب با نمایشگر مورد نظر نمایش دادید. به این ترتیب حجم اطلاعات ارسالی به کاربران مختلف یکسان خواهد بود، اما کاربرانی که از تلفن همراه استفاده می کنند تنها تصویری با ابعاد ۲۰۰*۲۰۰ را مشاهده خواهند کرد.

در مثالی دیگر فرض کنید تصویر سربرگ شما در ابعاد ۹۰۰*۶۰۰ و حجم ۱۰۰KB طراحی شده و حجم آن در ابعاد ۲۰۰*۲۰۰ تنها ۱۷KB باشد، به این ترتیب ۸۳kb از ترافیک سرورهای خود و پهنای باند کاربرانی که نمایشگر کوچکی دارند (تلفن همراه )  تنها برای این تصویر و در یک بار بارگذاری سایت به هدر رفته و این کاربر با وجود مصرف ۱۰۰KB  از ترافیک خود ،تنها تصویری به ابعاد  ۲۰۰*۲۰۰ (متناسب با نمایشگر تلفن همراه) را مشاهده خواهد کرد.

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

آیا سرعت بارگذاری ، ترافیک سایت و کیفیت دسترسی کاربرانی که از پهنای باند پایین بهره می برند جزو الویت های شماست ؟

هنگامی که به عرصه طراحی وب سایت های واکنشگرا وارد شدم پیش زمینه ذهینم این بود که می توان تصاویر را با ابعاد مختلف درون صفحه جایگذاری کرد سپس با استفاده از مدیا کوئری ها (media@) و کدهای CSS  از نمایش تصاویری که حجم و ابعاد بزرگتری دارند در نمایشگرهای کوچکتر جلوگیری کرد. به نظر منطقی می رسه! آیا مخفی کردن تصاویر بزرگ از ارسال آنها توسط سرور به مرورگر ها جلوگیری خواهد نمود؟

مشکل اینجاست که مرورگرها بسیار سریعتر از ما عمل می کنند! به منظور دستیابی به سرعت بارگذاری بالاتر، مرورگر ها تمامی تصاویر موجود در Source هر صفحه را قبل از کدهای CSS و جاوا اسکریپت پیش-بارگذاری می کنند. همانطور که می بینید این نمایشگرهای تلفن همراه هستند که باید جریمه بیشتری را بپردازند چون مجبور هستند تمام تصاویر را از سرور دریافت کنند در حالی که قادر به نمایش بیشتر آن ها نیستند!

به خاطر پیش-بارگذاری تصاویر توسط مرورگرهای ما مجبور هستیم از کدها و نشانه گذاری های خاص Html ، CSS و جاوا اسکریپت استفاده کنیم یا source صفحات را قبل از ارسال توسط سرور به مرورگر ویرایش کرده متناسب با نمایشگر مورد نظر تنظیم نماییم.

Sherri Alexander

شناسایی پهنای باند کاربران

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

ٌW3C در حال کار بر روی  Network Information API است که در آینده می تواند ابزار مفیدی در این زمینه باشد اما هم اکنون تنها بخش معدودی از دستگاه ها از این قابلیت پشتیبانی می کنند و  استفاده انبوه از آن دور از انتظار می باشد.

اندازه گیری پهنای باند مشکل است و به نظر نمی رسد استفاده از مدیا کوئری های پهنای باند (Bandwicth Media Queries) در آیند نزدیک امکان پذیر باشد.

Yoav Weiss

اسکریپت Foresight.js که توسط Adam Bradley طراحی شده قبل از بارگذاری تصاویر ، با ارسال یک تصویر ۵۰KB برای کاربر زمان ارسال را محاسبه کرده و بررسی می کند که آیا کاربر از پهنای باند مناسبی بهره می برد یا خیر. سپس با استفاده از توابع خود ارسال یا عدم ارسال تصاویر را برای کاربران کنترل می نماید. امروزه بسیاری از راه کارهای تصاویر واکنشگرا به نحوی از این متد جهت بررسی پهنای باند کاربران بهره می برند.

Foresight.js

 مسئله کوچک نمایی تصویر و محو شدن جزئیات ضروری آن Art Direction

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

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

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

 

 

 

انتخاب راه کار مناسب

خوشبختانه در صنعت طراحی و توسعه وب افراد خلاق و باهوشی فعالیت دارند که به دنبال ارائه راه کارهای مناسب جهت رفع مسائل فوق می باشند و روی دیگر سکه راه کارهای فراوانی است که به منظور ایجاد تصاویر واکنشگرا با خصوصیات ذکر شده توسط توسعه دهندگان وب ارائه شده است.

حال چطور بهترین راه حل را برای پروژه خود انتخاب کنیم؟

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

اینجا تعدادی فاکتور جهت انتخاب بهترین راه کار لیست شده است :

• آیا مسئله Art Direction برای شما مهم می باشد ( کیفیت ، برش ها و اندازه های متناسب با عرض نمایشگر های مختلف )؟
• آیا یک وب سایت بزرگ با انبوهی از مطالب ارسال شده دارید که بازگشت و ویرایش تگ تصاویر همه آن ها کار دشواری به نظر می رسد؟
• آیا از سیستم های ارسال محتوا مانند وردپرس ، دروپال ، جوملا و … بهره می برید؟
• آیا تمامی تصاویر در هنگام بارگذاری صفحه به مرورگر ارسال می شوند یا برخی از تصاویر به صورت پویا و به وسیله جاوا اسکریپت بارگذاری خواهند شد؟
• آیا تمایل دارید پهنای باند کاربران را آزمایش کرده در مورد ارسال تصاویر حجیم و با کیفیت بالا برای هر کاربر تصمیم بگیرید؟
• آیا راه کار مورد نظر از پلتفرمی که در دسترس شما نیست بهره می برد ( مانند PHP یا jQuery) ؟
• آیا راه حل هایی که بر پایه خدمات شرکت ها و سایت های  توسعه دهنده وب استوار است قابل قبول می باشد ، یا شما اسرار دارید تمامی مشکلات را بر روی هاست و سرور شخصی خود حل نمایید؟

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

PICTUREFILL

حقیقتا وب بسیار پهناور است و ما باید با این حقیقت روبرو شویم که تمام کاربران وب به اینترنت پر سرعت و ۴G دسترسی ندارند. برای اولین بار Scott Jehl در سفر کاری خود به جنوب آسیا به این تفاوت دسترسی به امکانات دیجیتال در میان کاربران پی برد او یکی از طرفداران طراحی واکنشگرا و طراحی وب سایت از نسخه موبایل می باشد. اسکریپت او (PictureFill) امکان نمایش تصاویر در سایزهای مختلف را مانند تگ picture در html5 فراهم می آورد.

 

 

PICTUREFILL احتیاجی به jQuery ندارد و تنها کافیست اسکریپت picturefill.js را در بخشی از صفحه معرفی و وارد نمایید. همچنین جهت نمایش تصاویر در سایزهای مختلف به تعدادی تگ خاص div با صفات مختص این اسکریپت نیاز می باشد. صفت data-media مانند (media@) مدیا کوئری های CSS عمل می کند.

برای نمایش تصاویر در مرورگرهایی که از مدیا کوئری CSS پشتیبانی نمی کنند می توان از کامنت های شرطی مانند مثال زیر استفاده نمود ( به طور مثال IE8) . جهت اطمینان از نمایش تصویر در مرورگرهای که جاوا اسکریپت را اجرا نمی کنند نیز از تگ <noscript> استفاده می شود.

<span data-picture data-alt=”Descriptive alt tag”><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <span data-src=”images/myimage_sm.jpg”></span><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <span data-src=”images/myimage_lg.jpg” data-media=”(min-width: 600px)”></span></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> <!–[if (lt IE 10) & (!IEMobile)]> //تگ شرطی برای نمایش تصویر در مرورگر IE<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <span data-src=”images/myimage_sm.jpg”></span><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <![endif]–></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> <!– Fallback content for non-JS browsers. –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <noscript> //جهت نمایش تصویر در مرورگهایی که جاوا اسکریپت را اجرا نمی کنند<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img src=”images/myimage_sm.jpg” alt=”Descriptive alt tag” /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </noscript><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </span>

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳

<span data–picture data–alt=“Descriptive alt tag”>     <span data–src=“images/myimage_sm.jpg”></span>     <span data–src=“images/myimage_lg.jpg” data–media=“(min-width: 600px)”></span>     <!—[if (lt IE 10) & (!IEMobile)]> //تگ شرطی برای نمایش تصویر در مرورگر IE     <span data–src=“images/myimage_sm.jpg”></span>     <![endif]—>     <!— Fallback content for non–JS browsers. —>     <noscript> //جهت نمایش تصویر در مرورگهایی که جاوا اسکریپت را اجرا نمی کنند         <img src=“images/myimage_sm.jpg” alt=“Descriptive alt tag” />     </noscript> </span>

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

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

یک مژده برای کاربران وردپرس افزونه ای با نام picturefillwp توسط Kylereicks و بر پایه این اسکریپت نوشته شده است. با نصب این افزونه به طور خودکار تصاویر پست ها و نوشته های شما بر اساس عرض نمایشگرهای مختلف به صورت واکنشگرا به نمایش در خواهد آمد. ( اندازه اصلی، میانه و بند انگشتی تصاویر به همراه سایز ۲x آن ها جهت نمایش در نمایشگرهای با کیفیت و با دستور العمل فوق جایگزین تگ img در source نوشته ها و صفحات وردپرس شده و بعد از شناسایی عرض نمایشگر کاربر آدرس سایز مناسب جهت نمایش به تگ img ارسال می شود .)

HiSRC

HiSRC توسط Marc Grabanski و Christopher Schmitt و بر پایه jQuery  نوشته شده است . شما می توانید سایزهای مختلف تصویر ( کم حجم ، متوسط ، با کیفیت بالا ) را  با صفتهای src ، data-x1 و data-x2 به تگ img معرفی کنید ، این اسکریپت بعد از بررسی نمایشگر کاربر از نظر قابلیت نمایش تصاویر با کیفیت و پهنای باند مصرفی بهترین گزینه را جهت نمایش به مرورگر ارسال خواهد کرد.

 

 

جهت استفاده از این متد ابتدا مطمئن شوید jQuery و اسکریپت HiSRC در بخشی از صفحه شما معرفی و وارد شده باشد.

در صفحه خود تصویر را به حالت عادی و با تگ img وارد نمایید آدرس کوچکترین یا کم کیفیت ترین سایز تصویر را به صفت src اختصاص داده سایز های میانه و سایز بزرگ یا کیفیت بالای تصویر را به ترتیب به صفت های data-x1 و data-x2 اختصاص دهید . در مرحله بعد می بایست کلاسی (مانند hisrc) را به تگ img یا تگ در برگیرنده تصویر اختصاص دهید تا مشخص شود کدام دسته از تصاویر می بایست توسط این اسکریپت عملیاتی شوند.

<img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> src=”http://placekitten.com/200/100″<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-1x=”http://placekitten.com/400/200″<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-2x=”http://placekitten.com/800/400″ class=”hisrc” />

۱	<img src=“http://placekitten.com/200/100” data–1x=“http://placekitten.com/400/200” data–2x=“http://placekitten.com/800/400” class=“hisrc” />

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

$(document).ready(function(){<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> $(“.hisrc”).hisrc();<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> });

۱ ۲ ۳

$(document).ready(function(){   $(“.hisrc”).hisrc(); });

با اجرای صفحه ابتدا کوچکترین سایز تصویر  که به src اختصاص داده اید نمایش داده می شود سپس اسکریپت بررسی می کند که آیا نمایشگر کاربر قابلیت نمایش تصاویر Retina را داراست و کاربر از پهنای باند مناسب بهره می برد در این صورت تصویر data-x2 جایگزین تصویر اولیه می شود ، در صورتی که کاربر از پهنای باند مناسبی بهره می برد اما نمایشگر او قابلیت نمایش تصاویر Retina را ندارد تصویر data-x1 جایگزین می شود. اما در صورتی که هیچ یک از شرایط فوق برقرار نباشد اسکریپت تصویر اولیه را بدون تغییر رها خواهد کرد .

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

ADAPTIVE IMAGES

بر خلاف ۲ متد گذشته Adaptive Images  یک متد سمت سرور می باشد این متد جهت اجرا به PHP 5 ، Apache 2 ، کتابخانه GD و کمی جاوا اسکریپت خواهد داشت.

نصب :

1. افزودن یا ویرایش فایل  .htaccess
2. افزودن تعدادی فایل PHP به وب سایت
3. ویرایش فایل افزوده شده جهت معرفی نقاط انتقال (شکست) منطبق با مدیا کوئری های شیوه نامه شما
4. افزودن چند خط جاوا اسکریپت ( جهت بررسی عرض نمایشگر کاربر)

 

 

جزییات نصب فایل ها و اجرای این متد کمی طولانی می باشد جهت مشاهده جزییات به صفحه آن مراجعه نموده روی منوی Detail کلیک نمایید.

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

محدودیت های این متد :

• از آنجایی که  ترکیبی از PHP و Apache جهت اجرا این متد نیاز است ممکن است با وب سایت شما سازگار نباشد.
• تغییر ساز تصاویر در سمت سرور انجام می گیرد و تصاویری که از هاست دیگر درون صفحات بارگذاری می شوند توسط این متد ویرایش نخواهند شد.
• این متد پهنای باند کاربران را محاسبه نخواهد کرد.
• این متد مسئله Art Direction را حل نمی کند زیرا تنها به تغییر سایز تصاویر پرداخته هیچ گونه قابلیتی جهت برش یا افزایش کیفیت تصاویر ندارد.

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

SENCHA .IO SRC

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

 

 

فرض کنید تصویر بزرگ و حجیمی با نام image.png در صفحه نخست خود جایگذاری کرده اید :

<img src=”http://www.your-domain.com/path/to/image.jpg” alt=”My large image” />

۱	<img src=“http://www.your-domain.com/path/to/image.jpg” alt=“My large image” />

جهت ارجاء این تصویر به Sencha و دریافت تصویر متناسب با نمایشگر کاربر کافیست تگ img را به شکل زیر ویرایش نمایید :

<img src=”http://src.sencha.io/http://www.your-domain.com/path/to/image.jpg” alt=”My large image” />

۱	<img src=“http://src.sencha.io/http://www.your-domain.com/path/to/image.jpg” alt=“My large image” />

Sencha تصاویر شما را جهت تطبیق با عرض نمایشگر کاربر تغییر سایز می دهد ، به طور معمول این سایز برای تلفن های همراه ۳۲۰ پیکسل و برای تبلیت ها ۷۶۸ پیکسل خواهد بود. همچنین با تنظیم پیش وندهای خاص Sencha.io می توانید ابعاد و سایزهای متفاوتی را بر اساس درصد و یا محاسبات پیچیده از این سایت دریافت نمایید.

در ضمن گزارش کاملی از تصاویر ارسال شده توسط این سایت به نمایشگر کاربران به همراه جزییات و نمودار ها در بخش کنترل پنل کاربری به شما ارائه خواهد شد.

جهت مشاهده ویژگی و خدمات ارائه شده توسط این سایت به آدرس زیر مراجعه نمایید :

Sencha.io Src

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

راه کاری هایی جهت بررسی

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

CAPTURING / MOBIFY.js 2.0

Capturing یکی از ویژگی های اسکریپت در حال توسعه Mobify.js 2.0 می باشد، که به شما اجازه کنترل تگ های HTML صفحه را قبل از ارسال به مرورگر جهت بارگذاری خواهد داد. به این ترتیب شما می توانید تگ img را دریافت کرده صفت src آنرا قبل از دانلود توسط مرورگر تغییر داده آدرس تصویر متناسب با نمایشگر کاربر را جایگزین آدرس اولیه نمایید همچنین می توانید بعد از دریافت تگ img صفحه یکی از متد های قبلی را مانند PictureFill جهت نمایش تصویر استفاده نمایید.

 

آموزش طراحی سایت رسپونسیو واکنشگرا در10 دقیقه

 

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

نکته دیگر آن که Capturing بر روی مرورگرهای قدیمی به خصوص مروگر IE قابل اجرا نمی باشد و اگر شما به این مرورگر های اهمیت می دهید دچار مشکل خواهید شد .

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

• Webkit ،Safari, Chrome تمامی نسخه ها
• فایر فاکس نسخه +۴.۰
• Opera نسخه +۱۱.۰
• IE نسخه +۱۰.۰

RESRC.IT

ReSRC.it نیز یکی از سایت های ارائه کننده خدمات تصاویر واکنشگرا می باشد نحوه راه اندازی آن بسیار ساده و شبیه به Sencha.io می باشد.  در این تکنیک نوع نمایشگر کاربر بررسی نمی شود بلکه پهنای باند و فیلتر های تصویر از اهمیت برخوردار می باشند.

آموزش طراحی سایت رسپونسیو واکنشگرا در10 دقیقه

 

برای شروع ابتدا می بایست در این سایت عضو شده و شناسه کاربری مختص سایت خود را ایجاد نمایید عضویت اولیه به مدت ۳۰ روز رایگان بوده و اجازه تبادل یک گیگا بایت اطلاعات را به کاربران خواهد داد. برای مشاهده پلن ها و جزئیات و قیمت هر مورد به لینک زیر مراجعه نمایید:

ReSRC.it

در مرحله بعد می بایست اسکریپت این متد را در بخشی از صفحه خود وارد نمایید :

<script src=”//use.resrc.it”></script>

۱	<script src=“//use.resrc.it”></script>

حال فرض کنید تصویری به شکل زیر در صفحه خود دارید :

<img src=”http://path/to/image.jpg” alt=”My large image” />

۱	<img src=“http://path/to/image.jpg” alt=“My large image” />

در این مرحله آدرس تصویر را به آدرسی از ReSRC.it پیشوند زده کلاس resrc را به تگ img بیافزایید – توجه کنید که سایت ReSRC از ۲ سرور جهت ویرایش تصاویر استفاده می کند یک سرور مربوط به اکانت های حرفه ای و سرور دیگر مربوط به اکانت های آزمایشی می باشد :

<img src=”http://trial.resrc.it/http://www.your-domain.com/path/to/image.jpg” alt=”My large image” class=”resrc” />

۱	<img src=“http://trial.resrc.it/http://www.your-domain.com/path/to/image.jpg” alt=“My large image” class=“resrc” />

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

تصاویر Retina :

<html><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <head></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> <title>ReSRC HiDPI (Retina) Support</title><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <style>.resrc {width: 100%}</style><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </head><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/o=80/http://www.your-site.co/image.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dog” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!– Manually force a pixel ratio of 1.5 –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img data-resrc-dpi=”1.5″<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/o=80/http://www.your-site.co/image.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dog” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <script src=”//use.resrc.it”></script><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </html>

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲

<html> <head>   <title>ReSRC HiDPI (Retina) Support</title>   <style>.resrc {width: 100%}</style> </head> <body>   <img data–src=“http://app.resrc.it/o=80/http://www.your-site.co/image.jpg” alt=“An awesome dog” class=“resrc”/>   <!— Manually force a pixel ratio of 1.5 —>   <img data–resrc–dpi=“1.5” data–src=“http://app.resrc.it/o=80/http://www.your-site.co/image.jpg” alt=“An awesome dog” class=“resrc”/>   <script src=“//use.resrc.it”></script> </body> </html>

افکت های تصویر :

<html><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <head></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <p> <title>ReSRC Image Control And Effects</title><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <style>.resrc {width: 100%}</style><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </head><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!– Crop the image to show just the dog –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/c=w1360,h850,xof100p,yof22p/http://www.your-site.co/image-control.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dog tightly cropped” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!– Crop the image to show just the dogs head enlarged –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/c=w500,h312,xof76p,yof12p/http://www.your-site.co/image-control.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dogs head” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!– Flip the image horizontally, add the greyscale effect and<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> optimize to 60% –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/r=h/e=g/o=60/http://www.your-site.co/image-control.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dog in black and white” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!– Optimize to 70% –><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <img<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> data-src=”http://app.resrc.it/o=70/http://www.your-site.co/image-control.jpg”<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> alt=”An awesome dog” class=”resrc”/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <script src=”//use.resrc.it”></script><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </html>

۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷

<html> <head>   <title>ReSRC Image Control And Effects</title>   <style>.resrc {width: 100%}</style> </head> <body>   <!— Crop the image to show just the dog —>   <img data–src=“http://app.resrc.it/c=w1360,h850,xof100p,yof22p/http://www.your-site.co/image-control.jpg” alt=“An awesome dog tightly cropped” class=“resrc”/>   <!— Crop the image to show just the dogs head enlarged —>   <img data–src=“http://app.resrc.it/c=w500,h312,xof76p,yof12p/http://www.your-site.co/image-control.jpg” alt=“An awesome dogs head” class=“resrc”/>   <!— Flip the image horizontally, add the greyscale effect and optimize to 60% —>   <img data–src=“http://app.resrc.it/r=h/e=g/o=60/http://www.your-site.co/image-control.jpg” alt=“An awesome dog in black and white” class=“resrc”/>   <!— Optimize to 70% —>   <img data–src=“http://app.resrc.it/o=70/http://www.your-site.co/image-control.jpg” alt=“An awesome dog” class=“resrc”/>   <script src=“//use.resrc.it”></script> </body> </html>

جهت مشاهده نمونه کدها و پیش نمایش های این سایت به آدرس زیر مراجعه نمایید :

resrc.it/demos

آزمایش، آزمایش و آزمایش !

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

YSLOW

YSLOW ابزار آزمایش صفحات وب است که توسط یاهو طراحی شده و در سمت کاربری (توسط مرورگر کاربر یا وب مستر) ۲۳ قانون قابل آزمایش را جهت نحوه عملکرد صفحه مورد نظر بررسی می کند ، این قوانین توسط یاهو به عنوان معیار عمکرد صفحات وب در نظر گرفته شده است . YSLOW صفحه مورد نظر را نسبت به هر یک از قوانین بررسی کرده و رتبه دهی می نماید سپس راه کار بهبود رتبه و عملکرد سایت را برای هر یک از قوانین به صورت جداگانه پیشنهاد می کند. این افزونه بر روی مرورگر های Chrome, FireFox, Safari و  Opera قابل استفاده می باشد.

WEBPAGETEST

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

نویسنده : Sherri Alexander
منبع : SmashingMagazine