چرا از باید از responsive design استفاده کنیم؟

تصویر چرا از باید از responsive design استفاده کنیم؟

وب کاران - اگر شما در سالهای اخیر سایتی را ساخته اید حتما responsive design به گوشتان خرده است. اولین بار در سال ۲۰۱۰  توسط طراحی به نام Ethan Marcotte بیان شد که شامل تکنیک هایی می شد که به طراحی سایت انعطاف پذیر این قابلیت را افزود تا صفحه وب را به ابعاد گوناگون در بیاورد.

در سالها از زمانی که responsive تبدیل به یکی از انتخابهای سایت مناسب گوشی مدرن شد.  نمایش آن باعث ایجاد بحث و ابهام شد. برخی از طرفداران responsive design را برای هر Project استفاده می شد در حالی که مخالفان ادعا کردند که این ویژگی جلوی آزادی عمل آنها را می گیرد.برخی از سرویس گیرنده ها باور دارند که که بایستی بین responsive و native یکی را انتخاب کنند اگر به عنوان دیگری استفاده شود. در برخی از شرایط آزار دهنده ما دیده ایم که هر کدام از Mobile, Tablet, Desktop می توانند ظاهر خاص خود را به عنوان Responsive داشته باشند.

 

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

 

Responsive چیست؟

Ethan Marcotte در کتاب خود تکنیک هایی را بیان کرده که به کمک آن می توان سایت Responsive را ایجاد کرد که برای کسانی که می خواهد تا جزئیات آن را در بیاورند بسیار مفید است. در مراحل بالا ما می توانیم به اجزای گوناگون تقسیم کنیم.

 

یک طرح انعطاف پذیر و روان ایجاد کنید

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

 

پرسجو های رسانه ای می بایستی انعطاف پذیر باشند

طرح های قابل تغییر فرم نمی توانند شدید شوند: طراحی که در مانیتور ۲۷ اینچی به خوبی نمایش داده می شود ممکن است برای نمایش بر روی گوشی ۴ اینچی دچار مشکل شود.طراحان تشخیص می دهند موقعیت هایی را که طراحی ها متوقف می شدند. و از conditional CSS Rule ها استفاده می کنیم تا دستورالعمل های ساختار را برای breakpoint ها انجام دهیم. بر روی گوشی های بایک و طویل برای مثال Sidebar ها ممکن است به پایین مقاله منتقل شوند تا فضای بیشتری را برای متن آزاد کنند. بر روی صفحه desktop عناوین عکس می توانند بر پشت عکس ها قرار گیرند تا از مزیت فضای بیشتر بهره مند شوند.

 

تصاویر و رسانه خا باید انعطاف پذیر باشند

عکس های با عرض ثابت و پخش کننده های ویدئو و افزونه ها همگی می توانند در طرح شما تاثیر بگذارند. حلت دادن به این اجزا می بایست از درصد و نسبت استفاده کند. همچنین تضمین کند که آنها به طرح Responsive متناسب باشند. ابزاری همانند FitVid.js و Picture Element مخصوص HTML می توانند این کار را آسانتر کنند

به قابلیت ها پاسخ دهید و نه دستگاه های خاص

مهمترین اصل بسیار ساده است: responsive design بیشتر برای قابلیت ها و سناریو ها برنامه دارد تا اینکه برای اجزای سخت افزاری داشته باشد. به جای Sniffing که در iPhone استفاده می شود و HTML و CSS های گوناگونی را می سازد. سایت responsive تنها از یک HTML استاندارد استفاده می کند. قوانین شرطی CSS و اسکریپت ها ی Client Side برای شرایط خاصی همانند نمایشگر های کم کیفیت استفاده می شوند. گوشی های همراه با قابلیت های GPS و غیره می باشند. که تضمین می کند طراحی به  طور هومند به هر دستگاهی که شرایط مذکور را داشته باشد پاسخ می دهد و داستان طولانی دستگاههای قدیمی تر اغلب اوقات توسط آخرین حالت رد  می شود.

 

همچنین تشخیص دستگاه markup های تنظیم شده و سایر تکنیک ها می توانند بر روی responsive design طبقه بندی شوند شروع طراحی responsive راحت ترین نقطه شروع می باشد.

تکنیک های مکمل سازی

در افزوده آن اصول حیاتی  تیم ما به این نتیجه رسیده که نتیجه های مطلوب همراه با تکنیک های responsive قابل دریافت است. هر پروژه responsive design اینگونه کار نمی کند ولی آن پروژه  ای که اینگونه است بهتر نتیجه می دهد.

 

ابتدا برای محتوا برنامه ریزی کنید

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

 

طراحی برای موبایل

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

فاجزا را نیز به همراه صفحات طراحی کنید.

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

 

ایجاد کردن Wireframe

فایل های pdf گزینه های مناسبی برای طراحی ها هستند ولی اولین بار که responsive design به طور جدی مطرح شد هیچ چیزی به به پای HTML و CSS نمی رسید. نمایش دادن WireFrame ها در دستگاه های گوناگون به نسبت چرخیدن برای جدا اسزی Wireframe برای هر فاصله به Stackholder ها کمک می کند تا خیال کنیم که طراحی ما در دنیای واقعی چگونه پیاده سازی می شود. و همچنین کمک می کند تا تیم طراحی را صادق نگه داریم ضمانت می کند که ایده هایی که با آن در ارتباطند چگونه در browser کار می کنند.

 

از tweak های مبتنی بر سرور استفاده کنید تا  بازگذاری را بهتر کنید

اینگونه که responsive design توسط تنولوژی هایی همچون CSS و منطق مبتنی بر سرور هنوز می تواند کمک کند. زمانی که طرح نیاز دارد تا برای کاربر استفاده شود برای مثال منطق های شرطی بر روی سرر هنوز می توانند قالب های مختلف را تقویت کنند. اسکریپت های مبتنی بر مشتری همچنین می توانند از افزونه های خاص و یا محتوا ها موجود در سرور در صورتی که لازم است استفاده کنند, دوری کردن از هزینه دانلود هر قسمت از محتوا و رسانه بر روی دستگاهها که فقط قسمت کوچکتر را نشان می دهد. طراحی به نام Luke Wroblewski این تکنیک را RESS نام گذاری کرد: Responsive Design and Server Side Components .

 

فهمیدن چالش ها

همانند سایر تکنیک ها responsive design ابزار مهمی به حساب می آید ولی نه به عنوان حلال تمام مشکلات مربوط به دنیای وب. قبل از اینکه به داخل اولین پروژه responsive شیرجه بزنیم, این نکته حائز اهمیت است که برخی نکات را در ذهن بخاطربسپاریم.

 

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

طراحی که برای نمایشگر های چندگانه و وضوح تصویر است نمی تواند گوناگونی طرح و محتوا را از یک سایز به سایز دیگر تغییر دهد.برخی از انتخاب های طراحی همانند تغییر مکات و حالت اشکال توسط موس بر روی هر دستگاهی کار نمی کند . اقتصاد Responsive Design بیشترین تاثیر را زمانی که سایز های گوناگون صفحه وب ترکیب می شوند و زمانی که desktop و سایت mobile شما بایستی کارایی مناسبی را بروز دهد.

 

این خیلی خوب نیست که از طراحی سایتهای تکی برای هر وسیله استفاده کنیم.

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

 

سرعت و راحتی به طور اتوماتیک به وجود نمی آیند

Responsive design می تواند مزایای بسیاری را برای کاربران موبایل به همراه داشته باشد ولی مطمئن شوید که سایت سریعا بارگذاری می شود. که هنوز به کار کردن نیاز دارد. در اینجا هیچ چیزی از پیاده سازی بد responsive از محدود کردن کاربران به تصاویر با کیفیت بالا جلوگیری نمی کند ویدئو های پخش کننده خودکار و third party javascript می باشد. تکنیک هایی همجون بارگزاری شرطی رسانه ها تست کردن restricted bandwidth scenario ها و setting clear performance budget  قبل از اینکه شما بسازید حیاتی است.

 

ترکیب کردن تیلیغات نیاز به برنامه ریزی اضافه دارد

بریا سایت هایی که برطبق ماژول ad revenue هستند responsive design می تواند سخت باشد. همچنین در اینجا هیچ چیزی نیست که جلوی شما را برای تغییر مقیاس صفحه بگیرد  و یا آنها را برهم بزند را بر روی صفحه تا طرح تغییر کند تاثیر زیبایی شناسی آنها می تواند برای پیشبینی بدون تست کردن سخت تر باشد. سرنوشت کاربران بلیغاتی رشد کرده تا قبول کنند در برخی از سایت های desktop می توانند حوصله سر بر باشد تا بر روی صفحه کوچک نمایش دهند و تبلیغ کننده هایی که برای نقطه های خاص در صفحه may need hand-holding برای فهمیدن تغییرات نقطه به نقطه در طرح responsive استفاده می شود.

 

با دیدن نشانوند برنامه منحرف نشوید

برنامه نویسان موبایل در قسمت web apps versus natuve apps از app store در سال ۲۰۰۸ محدود شدند.responsive design اغلب اوقات به دام آن نشانوند می افتند حتی اگر بخش جدگانه ای باشد. در این روز ها حتی برنامههای محلی موبایل از responsive design به عنوان سایت استفاده می کنند. برنامه معمولی اندروید نیاز دارد تا با هزاران سایز نمایشگر و وضوح تصویر متفاوت در ارتباط باشد.اگر سازمان شما به برنامه موبایل نیاز داشته باشد سایت شما نیایستی دستگاه را راه اندازی کند و صفحه نمایشگر نباید بزرگتر شود.

 

آیا سایت شما حتما باید responsive باشد؟

بگذارید مساله را ساده کنیم. بله responsive design کم هزینه رین راه برای ارتباط با آرایه های دستگاه است و راحت ترین راه برای تضمین آینده سایت شماست. در ضبط صوتی مخصوص responsive design افرادی به نام های Karen McGrane و Ethan Marcotte در مورد باره میزان چالش ها و قیمت ها بحث کردند : که هیچ شکی در کارا بودن آن نیست.

 

Mark jannot گفت که ما می توانیم به شما بگوییم که بسیار کارا تر از آن چیزی بود که ما فرض می کردیم و به برنامه شرکتها اضافه کرد تا ترافیک شبکه موبایل ها دو برابر شود.

 

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

برچسب ها: 
میدان آرژانتین - خیابان وزرا - خیابان شهید رفیعی (۲۰) - پلاک ۱۰ - طبقه ۴ - واحد ۷ و ۸
طراحی سایت با دروپال (وب کاران)