Katty Watkins و Alex Duloz از پروژه‌ی Pastry Box از متخصصان پیشرو در صنعت وب درخواست کرده‌اند توصیه‌های برتر خود درباره‌ی ساخت صفحات وب کارآمدتر را بیان کنند.
یک وب بهتر به معنای یک تجربه‌ی بهتر برای همه است. کاربران باید بتوانند بدون نگرانی درباره‌ی این‌که چگونه به اینترنت دسترسی پیدا می‌کنند به چیزهایی که نیاز دارند دست پیدا کند. توسعه‌دهنده‌ها و طراحان باید سایت‌هایی ایجاد کنند که به راحتی روزآمد و نگهداری شود. یک وب بهتر به غیر از این‌که فقط کار کند کارهای بیش‌تری انجام می‌دهد، این وب برای کسانی که آن را طراحی و مصرف می‌کنند به خوبی کار می‌کند. یک وب بهتر یک وب کارآمدتر است.
کارآیی در قلب پروژه‌های ما قرار دارد چه از منظر قابلیت دسترسی، پاسخ‌گویی، استراتژی محتوایی یا کارآیی بازگذاری صفحات. از انتخاب مشخصات دُرُست و صحیح CSS تا پرسیدن سؤالات حیاتی از خودتان که کل یک پروژه را به چیزی ارزشمند تبدیل می‌کند، کارآیی فقط درباره‌ی سریع‌تر بودن نیست بلکه به بهتر ساختن چیزها نیز مربوط می‌شود. ما از طراحان و توسعه‌دهنده‌های مشهور وب سؤال‌هایی در این زمینه‌ها پرسیده‌ایم. پیشنهادات آنان گستره‌ی وسیعی از مطالب را دربر می‌گیرد که یک وب بهتر و کارآمدتر در قلب همه‌ی این توصیه‌ها قرار دارد. هر یک از این توصیه‌ها دری به سوی یک طرز تفکر جدید باز می‌کند که ما شما را دعوت می‌کنیم به آن‌ها توجه نموده و این توصیه‌ها را به کار بگیرید. هرچه بیشتر بخوانیم بیشتر یاد می‌گیریم.
ما امیدواریم شما نیز حوزه‌های جدیدی برای تفحص پیدا کرده و آن را با ما در میان بگذارید، حتی اگر یک طراح وب تمام وقت و حرفه‌ای نباشید.
1. سؤال بپرسید
Dylan Wilbanks, UX designer (www.dylanwilbanks.com)برای چه کسی طراحی می‌کنید؟ چرا آن‌ها به آن نیاز دارند؟ کجا از آن استفاده می‌کنند؟ از چه دیوایس‌هایی بهره می‌گیرند؟ آیا با آن‌ها صحبت کرده‌اید؟ اگر نه، چه کسی با آن‌ها حرف زده؟ طرح تست‌تان چیست؟ آیا کسی یک نمونه‌ی اولیه‌ی از آن می‌سازد؟ آیا از چیزی که قرار است خلق کنید آگاهی کامل دارید؟ آیا پاسخی برای این سؤالات دارید؟ ندارید؟ پس قبل از ساخت صفحه به آن‌ها پاسخ دهید.
2. به کُد خود گوش کنید
Anne Gibson, Information architect (www.kirabug.com)Screen readerها دقیقاً همان چیزی که با استفاده از HTML نوشته‌اید نمایش می‌دهند. بنابراین موتورهای جست‌وجو را بگردید. نوشتن HTML یکپارچه، تجربه‌ی حاصل را برای هر دو ارتقا می‌دهد و شامل مزایای دیگری هم می‌شود (برای این که در این باره اطلاعات بیش‌تری کسب کنید نگاهی به مطلب Paul Boag در آدرس netm.ag/semantic-269 بیندازید).
کیفیت دستور زبان HTML صفحات خود را با گوش کردن به آن‌ها بر روی یک screen reader چک کنید. اگر صفحه‌ی شما به اندازه‌ی لازم مرتب نیست و شلوغ به نظر می‌رسد HTML خود را پاک‌سازی کنید. Screen readerها می‌توانند بیشتر از یک ابزار دسترسی صِرف باشند. آن‌ها می‌توانند برای کمک به ما در جهت نوشتن نشانه‌گذاری‌های تمیزتر که نگهداری‌شان ساده‌تر است کمک نمایند.
3. قابلیت دسترسی وب را حفظ کنید
Rechel Andrew, co-founder, Perch (rechelandrew.co.uk)وب یک رسانه‌ی قابل دسترسی است. یک سند HTML می‌تواند از هر جا، توسط هر فرد، بر روی هر دیوایسی و با ضعیف‌ترین کانکشن‌ها مورد دسترسی قرار گیرد. هر انتخابی که به عنوان طراح یا توسعه دهنده انجام دهید می‌تواند از این قابلیت دسترسی محافظت به عمل آورد یا می‌تواند باعث از بین رفتن آن شود. این توان و قدرت زیادی است که در این زمینه دارید. از آن با هوشیاری و دقت استفاده کنید.
4. از مزیت بارگذاری مشروط بهره بگیرید
Brad Frost, web designer (bradfrost.com)هر صفحه‌ی وب از "the thing" تشکیل شده و بخش اعظمی از چیزها جزو این "the thing" نیستند. بارگذاری مشروط یک ابزار اساسی برای خلق تجربه‌های غنی در آینده است تا مطمئن شوید صفحات کماکان به سرعت بارگذاری می‌شوند و ارجحیت را به محتوای اصلی می‌دهند. به دنبال موقعیت‌هایی برای بارگذاری مشروط دکمه‌های رسانه‌ای، کامنت‌ها، محتوای مربوطه و غیره باشید.
برای کسب اطلاعات بیشتر نگاهی به مقاله‌ی Jeremy Keith در netm.ag/conditional-269 بیندازید.
5. از Ceaser برای نوشتن cubic-bezier استفاده کنید
Jamie Kosoy، مدیرعامل و سرپرست بخش تکنولوژی در Arbitrary انتقال‌های CSS در مقایسه با انیمیشن‌های keyframe می‌توانند ساده‌تر باشند اما سفارشی‌سازی آن‌ها با عملکردهای زمان‌بندی می‌تواند کار بسیار خسته کننده‌ای به شمار رود.transition-tining-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);/*linear easing*/
اگر نوشتن دوقلوهای بزیه توسط دست استیل شما نیست، ترسی به خود راه ندهید. با استفاده از ابزار انیمیشن Ceaser از Matthew Lein (matthewlein.com) می‌توانید از یکی از معادله‌های Robert Panner (robertpanner.com/easing) استفاده کنید یا نمونه‌ی مورد نظر خودتان را خلق کنید.
6. از پرس‌وجوهای رسانه‌ای height-based (مبتنی بر ارتفاع صفحه) استفاده کنید
Dan Denney, frontend developer, Code School (dandenney.com)از پرس‌وجوهای رسانه‌ای height-based استفاده کنید. این‌ها موقعیت‌هایی عالی برای ارتقای تجربه‌ی کاربری در زمانی که ارتفاع در دسترس محدود باشد به شمار می‌روند. این به نوع طراحی شما بستگی دارد اما با تنظیمات دُرُست و دقیق، اغلب می‌توانید نیاز به پیمایش و ارتقای قابلیت خواندن را کاهش دهید. اگر طراحی شما تعامل یا نوتیفیکیشن دارد اطمینان حاصل کنید که آن‌ها را نیز برای این ارتفاع محدود تنظیم نمائید. در netm.ag/vertical-269 مثالی در این زمینه وجود دارد.
7. تصویر بزرگ را در ذهن‌تان نگه دارید
Sally Jenjinson، مشاور و آرشیتکت راه‌حل در (sallyjenkins.co.uk) قبل از درک کامل مشکلاتی که باید برطرف کنید گزینه‌های تکنیکی‌تان را انتخاب ننمائید. معرفی راه حل، زودتر از زمان لازم می‌تواند به معنای این باشد که آن‌ها توسط تکنولوژی محدود می‌شوند یا چیزهایی را به شما دیکته می‌کنند که هر دو برای بازدیدکننده‌ها و اداره‌کنندگان سایت به یک نسبت مضر است. در عوض، گزینه‌های خود را براساس تصویر بزرگی که در ذهن دارید و در نظر گرفتن تیم گسترده‌تری که در پروژه‌ی شما کار می‌کنند انتخاب کنید. بسیاری از تکنولوژی‌ها می‌توانند "هر چیزی" و یا "همه چیز" را انجام دهند اما آیا باید این چنین باشند؟ تأثیر این‌ها بر روی افراد، فرآیندها، تکنولوژی و تجربیات چیست؟8. از namespacing برای فایل‌های CSS خود استفاده کنید
ClaudinaSarahe، طراح سیستم itsmisscs.meاسامی فایل‌های CSS یک موقعیت مناسب هستند. Namespacing سرنخ‌های مفیدی برای محتوای فایل فراهم می‌کنند. اگر یک partial خروجی تولید نمی‌کند، config.scss. را اِعمال کنید؛ اگر فایل partialهای دیگری را ایمپورت می‌کند manifest.scss.را اِعمال نمائید.
9. از fallbackهای ساده برای تصویر استفاده کنید
Mat Marquis, open web engineer Bocoup (matmarquis.com)تصاویر پاسخ‌گو پیچیده هستند اما در حالی که RICG این مشخصات را کنار هم قرار می‌داد ما به موقعیت‌های خوبی دست پیدا کردیم، سینتکس‌های کوتاه و خلاصه‌ای که می‌توانند تفاوت عمده‌ای برای کاربران ایجاد کنند. یکی از آن‌ها اضافه کردن یک نوع attribute بود که به شما اجازه می‌دهد فرمت‌های تصویر را با استفاده از fallbackهای پاسخ‌گو تغییر دهید:
WebP برای مرورگرهایی که از WebP پشتیبانی می‌کنند و یک ol"PNG ساده برای تصویرهایی که از آن پشتیبانی نمی‌کنند، و در هر دو صورت فقط یک درخواست وجود دارد.
10. در رفع باگ از JavaScript خبره شوید
Raquel Velez، مهندس نرم‌افزار npm (rckbt.me)هرگز قدرت console.log را دست کم نگیرید. وقتی تلاش می‌کنید یک خط خاص را درک کنید، آن را با یک قطعه اطلاعات سودمند برچسب بزنید. بعضی از افراد به console.log ("foo; a=;a) علاقه دارند که به شما کمک می‌کند بفهمید a چه ارتباطی با تابع foo دارد.
وقتی تلاش می‌کنید یک باگ را ایزوله نمائید، هر جایی که فکر می‌کنید مناسب است با "console.log ("boom1") , console.log ("boom2) و غیره log کنید تا بتوانید جای دقیقی که کُد می‌شکند مشاهده نمائید.
11. تصویر پس‌زمینه را پاسخ‌گو کنید
Julie Ann Horvath، طراح (julieannhorvath.com)برای عکس‌های زیبا و پاسخ‌گوی پس‌زمینه، صرف‌نظر از عرض صفحه از CSS property backgroung-size:cover استفاده کنید. علاوه بر مقیاس‌پذیری بصری، استفاده از backgroung-size:cover: باعث می‌شود هنگام مشخص نمودن سایز یک عنصر پس‌زمینه، نسبت پیکسلی تصویری که نمایش داده می‌شود بدون این که مجبور باشید قوانین یا markupهای اضافی بنویسید به شکل اتوماتیک تنظیم گردد.
12. از mixins برای خلق سیستم‌های شبکه‌ای پیچیده استفاده کنید
Sam Kapila، استاد طراحی، The Iron Yard (theironyard.com) دانشجویان من در حال یادگیری چگونگی ساخت سیستم‌های شبکه‌ای و همچنین آشنایی با قدرت Sass mixins هستند و بنابراین به عنوان یک کلاس، ما یک mixin ایجاد کردیم که می‌تواند به خلق یک سیستم شبکه‌ای انعطاف‌پذیر کمک نماید.شما می‌توانید آن را در CodePen و در آدرس netm.ag/mixin-269 پیدا کنید. در اولین نقطه، سیستم شبکه می‌تواند هر تعداد ستون داشته باشد اما خود mixin تعداد کل ستون‌ها را در کنار تعداد کل gutters (که برای هر ستون کم‌تر از یک gutter است) اضافه خواهد کرد. سپس یک margin-right به ستون شناور اضافه می‌شود. Mixin مستقل از متغیر است، خصوصاً عرض ستون و gutter. در نهایت، یک margin-right, last-of-type: و آخرین ستون در هر ردیف را reset می‌کند.
13. به مکالمات فکر کنید، نه صفحات
Paul Robert Lloyd، طراح گرافیک و توسعه‌دهنده frontend (paulrobertlloyd.com)فکر کردن به موبایل در ابتدای کار روشی سودمند برای دستیابی به محتوای صفحه و تصمیم‌گیری درباره‌ی بخش‌هایی که حیاتی بوده و آن‌هایی که بعداً باید به صورت مشروط بارگذاری شوند محسوب می‌گردد. هرچند، این روش کماکان حضور یک اینترفیس را در نظر می‌گیرد. برای ساخت وب‌سایت‌های واقعاً یونیورسال و قابل دسترسی، ما باید به چیزی ورای حضور بصری توجه نشان دهیم. یک روش جایگزین می‌تواند فکر کردن به این باشد که صفحات بخشی از یک مکالمه‌ی تلفنی هستند؛ یک کاربر ممکن است چه اطلاعاتی درخواست کند و یک صفحه‌ی وب ممکن است چگونه عکس‌العمل نشان دهد؟
14. پشتیبانی از صفحه کلید را فراهم کنید
Monika Piotrowicz، توسعه‌دهنده‌ی frontend در Shopify (monikapiotrowicz.com)وقتی اینترفیس‌های تعاملی خلق می‌کنید، فراهم نمودن پشتیبانی از صفحه کلید را از یاد نبرید. رویدادهای ماوس نیز می‌توانند به رویدادهای صفحه کلید bind شوند. تمرکز بر صفحه کلید باید با نمایش یا پنهان شدن محتوای جدید روزآمد شود و کلید escape می‌تواند به کنسل کردن تعامل‌ها کمک نماید.
با طی نمودن این گام‌ها، کاربران صفحه کلید می‌توانند از همان تجربه‌ی مشابه با هر کسی که از ماوس بهره می‌گیرد استفاده نمایند. برای دیدن یک دمو به netm.ag/keyboard-269 بروید.
15. در مرورگر طراحی کنید
Frances Berriman، طراح و توسعه‌دهنده‌ی frontend fberriman.comیک روش خوب برای طراحی ویژگی in-browser جدید، ترسیم چیزهای جدید مستقیماً در کُد است تا بقیه را نمایش دهد. نشانه‌گذاری عنصر والدِ ویژگی جدید با استفاده از یک کلاس مثل sketchy به شما اجازه می‌دهد استیل‌ها را به آن اِعمال کنید تا یک کار در حال انجام را نشان دهد یا سریعاً بر روی تمام بیت‌های sketchy کامنت بگذارید تا به یک دموی پاک و تمیز دست پیدا نمائید.
16. کُد خود را ساده کنید
Sacha Greif، کُدنویس و طراح، sachagreif.comآیا تا به حال به یک مقدار return نیاز داشته‌اید اما تنها در صورتی که یک تست دیگر، true را باز می‌گرداند؟ به عنوان مثال، ممکن است چیزی مثل این بنویسید:
if (user.isAdmin()) {
return password;
} else {
return false;
}
شما می‌توانید این کُد را به شکل زیر ساده کنید:
return user.isAdmin() && password;
اگر false, ()user.isAdmin را برگرداند، کل این عبارت false را برمی گرداند. هرچند چنان چه true , ()user.isAdmin را برگرداند، این عبارت مقدار password را برمی‌گرداند.
17. عرض‌های ثابت را به درصد تبدیل کنید
Inayaili de Leon Persson، طراح حرفه‌ای وب، yaili.comیک روش ساده برای شروع انتقال یک سایت با عرض ثابت به یک فرمت پاسخ‌گو، از طریق تبدیل تمامی عرض‌های آن به درصد و حذف شناورها صورت می‌گیرد. اگر container اصلی شما عرضی معادل 900px دارد، آن را به یک max-width تغییر دهید، به جای استفاده از یونیت‌های پیکسل، ستون‌ها و سایر عناصر را به درصدی که بر روی صفحه اِشغال می‌کنند برگردانید. سپس بر روی چند دیوایس به سایت خود نگاه کنید تا به ایده‌ی مناسبی از گام‌های بعدی دست پیدا کنید: ممکن است آن‌ها کم‌تر و ساده‌تر از چیزی که فکر می‌کنید شده باشند! فرآیند پاسخ‌گو ساختن Ubuntu.com در netm.ag/responsive-269 شرح داده شده است.
18. فیلد title را در آغوش بگیرید
Corey Vilhauer, UX strategists, Blend Interactive (eatingelephant.com)استفاده از title field می‌تواند روشی ساده برای طبقه‌بندی بر روی backend باشد. بابیان دقیق معنای هر یک از title fieldها، کار را برای ویرایش‌گرها آسان کنید. یکی باید برای navigation (Classes) و یگی دیگر باید برای نمایش عنوان صفحه باشد که title>(Our Classes>) را در خود جای می‌دهد.
و یکی نیز باید در CMS و برای کمک به مرتب نگه داشتن چیزها مورد استفاده قرار گیرد (Class Listing). تا جایی که سازمان شما نیاز دارد این‌ها را با هم تلفیق کرده و مطابقت دهید.
19. Git را پیکره‌بندی کنید
Stacey Mulcahy, Microsoft (thebitchwhocodes.com)با پیکره‌بندی Git در زمان خود صرفه‌جویی نمائید. یک ignore file جهانی برای فایل‌هایی که هرگز نیاز ندارید پیکره‌بندی نمائید. یک gitignore file در "gitignore./~" قرار دهید و سپس می‌توانید gitconfig-global core.excludesfile ~/.gitignore
انجام دهید.
20. از Git commit hooks استفاده کنید
Brian Suda, suda.co.ukبا ظهور تکنولوژی‌های جدید برای تسهیل جریان کاری، ما شروع به تطبیق بیشتر و بیشتر با وابستگی‌ها می‌کنیم. چه تعداد از مردم به طور منظم از Less یا Sass برای مدیریت بر styleهای خود یا ابزاری مثل JSLint برای JavaScript و ابزاری برای فشرده‌سازی، و cache دارایی‌های دیجیتال شما استفاده می‌کنند؟ ما به شکلی اجتناب‌ناپذیر اجرای برخی از فرمان‌ها را فراموش می‌کنیم و فایل‌های تاریخ گذشته بر روی سایت ما باقی می‌مانند.
ما از Git commit hooks استفاده می‌کنیم تا بدین ترتیب هرگز چیزی را فراموش ننمائیم. با ست‌آپ چند pre-commit hook، هر بار که تغییرات خود را اِعمال می‌کنیم همه‌ی این فرمان‌ها اجرا خواهند شد.
21. از مشکلات و خطاها درس بگیرید
Alex Duloz، توسعه‌دهنده، bitspushedaround.comفرقی نمی‌کند چند بار برنامه‌ی کاربردی خود را تست کرده‌اید، و چه تعداد دیوایس را در این تست‌ها به کار گرفته‌اید زیرا همیشه رفتارهای ناخواسته‌ای وجود دارد. شما هرگز یک برنامه‌ی کاربردی که باگ دارد اجرا نمی‌کنید بنابراین به کاربران اجازه دهید با مسائل و مشکلاتی که هنگام استفاده از وب‌سایت شما با آن‌ها روبرو می‌شوند آشنا گردند. با استفاده از یک فرم ساده، GitHubAPI وب‌سایت خود را ارتقا دهید. خطاهای سرور را ثبت و آن‌ها را تحلیل کنید. و از چیزی مثل window.onerror به منظور ردیابی خطاهای JavaScript استفاده کنید (یا در نقطه‌ی ورودی کُد خود از {} (try{} catch (e استفاده کنید). یک نفس عمیق بکشید و براساس هوشمندی خود کارتان را تکمیل نمائید.
22. سایت شما چقدر سریع است
lara Hogan، مدیر ارشد مهندسی کارآیی، Etsy (larahogan.me) Waterfalls تنها راه مشاهده‌ی کارآیی سایت‌تان نیست. در Webpagetest.org شما می‌توانید ویدئویی از چگونگی بارگذاری سایت خود در طول زمان ایجاد کنید و این کار را با علامت‌گذاری در کنار جعبه‌ی Capture Video در advanced settings انجام دهید.این کار حسی از میزان سرعت سایت‌تان در مکان‌های مختلف و بر روی دیوایس‌های مختلف در اختیار شما قرار می‌دهد و می‌توانید چیزی که کاربران شما واقعاً تجربه می‌کنند مشاهده نمائید.
23. از جعبه‌های انتخاب طولانی پرهیز کنید
Alice Bartlett، توسعه‌دهنده‌ی frontend, GOV.UK (alicebartlett.co.uk)استفاده از عناصر select برای وارد نمودن تاریخ تولد را متوقف کنید. فراهم نمودن تاریخ تولد بخشی از بیشتر مبادلات روی وب به شمار می‌رود. استفاده از جعبه‌های انتخاب برای وارد نمودن تاریخ تولد چیزی رایج است اما تحقیقات نشان می‌دهند که انتخاب‌های طولانی برای افرادی که به استفاده از تکنولوژی عادت ندارند بسیار سخت است ورودی‌های متنی در کنار ارزیابی سمت سرور به کاربرانی که از توانایی تکنیکی مناسبی برخوردار نیستند اجازه می‌دهد درک خود از فرم‌های کاغذی را به فرم‌های وب وارد کنند.
24. آیکونها را با background-image: cover ; مقیاس کنید
Julian Ann Horvath، طراح آزاد، Julieannnhorvath.vomاگر از background-image CSS property برای اضافه کردن style به آیکون یک تصویر استفاده می‌کنید یک گزینه‌ی دیگر برای مقیاس‌پذیری، background-image: contain است. در حالی که از نظر تئوری شما می‌توانید از background-image:cover استفاده کنید، اگر عنصر دربردارنده‌ی آیکون گوشه‌های گرد داشته باشد cover ممکن است بخش‌هایی از تصویر آیکون را ببُرد. Contain سایز آن را به درستی تنظیم می‌کند.
25. همه چیز را کوتاه و خوب حفظ کنید
Anne Gibson، آرشیتکت اطلاعات kirabug.comدر ای‌میل‌های خود مختصر بنویسید و در کامنت‌های مربوط به کُد خود قوی عمل نمائید. اگر به تمرین نیاز دارید، development community را در توئیتر دنبال کنید.
منبع مقاله :
ماهنامه کامپیوتری بزرگراه رایانه شماره‌ی 188، سال هجدهم، شهریور 1394
