1. ویژگیهای یک طراحی وبسایت خوب چیست؟
آیا می خواهید با یک نگاه بفهمید سایت مورد نظر چقدر حرفه ای طراحی شده؟ این مقاله نه برای طراحان حرفه‌ای با تجربه است و نه برای کسانی که اصلا دلشان به دنیای دیزاین راهی ندارد. این مقاله برای گرافیستهای عزیزی که تازه از دنیای چاپ وارد طراحی اینتراکتیو وب شده اند، و نیز برای برنامه نویسان وب که اصلا فکر نمی کنند که گرافیک صفحات وب هم می تواند مهم باشد و تفاوتی بین Web Design و Web Programming قائل نیستند حتما مفید خواهد بود. حتی برای افرادی که در هر زمینه ای کار دیزاین انجام می دهند نیز حرفهایی برای گفتن دارد!
2.طراحی استاتیک وب CSS Based
غالبا طراحان حرفه‌ای وب، شمایل سایت و یونیفرم گرافیکی سایت را در نرم افزارهایی مثل فتوشاپ طراحی و تعریف می کنند. مرحله بعد اجرای این طرح هاست، که نیاز به درک درست از کد نویسی استاتیک HTML و CSS دارد. در طراحی قدیمی وب، غالبا از تگ Table یا جدولها برای لی آوت استفاده می شد، و بخش عمده ای از طرح زدن را همان تگهای HTML به عهده داشتند اما با همه گیر شدن قابلیتهای CSS در مرورگرها، انقلابی در طراحی وب رخ داد. دیگر Tableها دور ریخته شدند، زیرا قرار بود HTML فقط نقش تقسیم بندی محتوا یا Markup را داشته باشد و کار دیزاین به دنیای انعطاف پذیر CSS سپرده شود. بدین ترتیب از تگ Div و به کمک CSS برای ساختارهای انعطاف پذیرتر استفاده شد.
این جدایی محتوا از دیزاین باعث شد به راحتی بتوانیم با تغییر یک فایل CSS قالب یک سایت را عوض کنیم، بدون اینکه محتوای اصلیمان از بین برود ضمن اینکه مزایای دیگری هم داشت: حجم کمتر، کدهای سازمان یافته تر، استفاده از جاوا اسکریپت برای تغییر CSS به صورت real-time و ایجاد محیطهای تعاملی نظیر منوها، تب‌ها، اسلایدها و… . مزیت دیگر استفاده از ساختار Div-Based به جای Table Based نحوه بارگزاری صفحه در مرورگرهاست: در صفحاتی که از جداول برای لی آوت استفاده می شود، تا زمانی که تمام صفحه بارگزاری نشود، صفحه نمایش داده نمی شود! برعکس صفحات بدون Table، که هر اندازه محتوای سایت لود می شود همان لحظه نمایش داده می شود. حالا متوجه شدید چرا بعضی سایتها تا 99 درصد لود می شود اما هنوز چیزی در صفحه سفید روبرو نمی بینیم؟!
3.سایت را تا جای ممکن کم حجم طراحی کنید
شاید یکی از مهمترین اصولی که خیلی از طراحان، چه آنهایی که طراحی بروز دارند و چه گرافیستهای چاپی و چه مهندسان پرتال نصب کن!
توجهی به آن ندارند حجم سایت است. ناگفته پیداست که یک وبسایت سنگین چه زیانهایی می رساند: بسیاری از کاربران را خسته و پشیمان می کند، آمار بازدیدکنندگانی که برای چندمین بار به سراغ سایت ما می آیند کم می کند، تعداد بازدید از صفحات داخلی را کم می کند، حوصله موتورهای جستجو را برای ایندکس کردن سر می آورد و رتبه ما را در موتورهای جستجو می کاهد. البته سبک یا سنگین بودن حجم یک سایت نسبی است و بستگی به میانگین سرعت مخاطبانمان دارد. قطعا برای کاربر عادی ایرانی 100 کلیوبایت وزن قابل توجهی است ولی برای یک نفر در مکانی که خارج از کشور است! شاید یک مگابایتش هم چیز زیادی نباشد.
طبق تجربه، طراحی کم حجم می تواند یکی از خصوصیاتی باشد که مشتریان را به سوی طراحان وب جذب کند. اما چه عواملی در سرعت سایت تاثیر گذار است؟ اول اینکه شیوه کد نویسی استاتیک بسیار مهم است اینکه تا چه حد از CSS استفاده مفید بکنید. کدهای داینامیک نظیر php و asp معمولا به خاطر سرعت بالای سرورها در کمتر از یک ثانیه اجرا می شوند که زیاد به حساب نمی آیند! پس روی کدهای استاتیک که تر و تمیز باشند، و تمام CSS ها بیرون از محتوا و در یک یا چند فایل جدا ذخیره شوند تاکید بیشتری باید داشت. زیرا این باعث می شود در بارگزاری مجدد، این فایل از روی Cache کامپیوتر کاربر لود شود و در سرعت تاثیر مثبت دارد.
در مورد فایلهای جاوا اسکریپت نیز وضع به همین منوال است. کدها را ترجیحا در فایلهای جدا باید ذخیره کرد و در هدر سایت فراخوانی کرد. در مواردی که ناچاریم کدها را در فایل اصلی بیاوریم، ترجیحا همه را به پایینترین خطوط کدهای استاتیک انتقال دهیم تا حوصله موتورهای جستجو از سر و کله زدن با این کدها سر نرود، و اگر برود چیز زیادی از دست نداده باشیم! ضمنا در استفاده از افکتهایی که با کتابخانه‌هایی نظیر jQuery اجرا می شوند، باید حواسمان باشد که آیا استفاده از هسته جی کوئری (حدود 80 کلیوبایت) به اضافه کدهای آن افکت به صرفه هست یا نه!
مساله مهم و حیاتی دیگر حجم و تعداد تصاویری است که در طراحی به کار می بریم. باید تا جای ممکن از تصاویر کمتر و کم حجمتر استفاده کنیم، و از ساختارهای پر عکس بپرهیزیم (باز هم قابل توجه گرافیستان چاپی). برای ذخیره تصاویر نیز حتما از بخش Save for web در فتوشاپ استفاده کنید. تصاویری که تعداد رنگهای محدودتری دارند، با پسوند gif و تصاویری که سایه روشن یا تنوع طیف رنگی بیشتری داند با پسوند jpg کم حجمتر می‌شوند. پسوند جدیدتر png-24 نیز که از قابلیت شفافیت آن نیز در مرورگرهای جدیدتر می توان استفاده کرد، معمولا از دو نوع قبلی پر حجم تر اما بسیار با کیفیت تر است. چاره دیگر استفاده از تصاویر کوچکی است که تکرار (repeat) می شوند. این روش برای سایه روشنها (gradient) و بافتها (patterns) بسیار کاربردی است.
4.فشرده کردن کدهای وب سایت
عوامل دیگری نظیر میزان محتوا (متن و تصویر) در هر صفحه و نیز سرعت سرور، در سرعت بارگزاری صفحات وب موثرند.
برای فشرده کردن فایلهای CSS و js و… از قابلیت gzip کردن در فایل htaccess می توان استفاده کرد. برای این منظور می توانید به بخش Compression در کنترل پنل (Cpanel) مراجعه نمایید.
شاید بد نباشد این را هم بگویم که قالبهای از پیش طراحی شده اکثر پرتالهای آماده (از جوملا گرفته تا تالارهای گفتگو) معمولا بسیار سنگین هستند و ساختارهایشان نیز پر از فایلهای خارجی و کدهای اضافه است.
5.خوانا و در دسترس بودن سایت بدون تصاویر
همیشه باید فکر احتمالات بود. باید در نظر داشته باشید سایت شما بدون اینکه هیچ تصویری در آن لود شود چه شکلی خواهد داشت. مثلا ممکن است رنگ متن شما روشن باشد و بک گراندتان یک تصویر تیره. حالا اگر به هر دلیلی (پایین بودن سرعت، قطع شدن ارتباط و…) تصویر لود نشود هیچ چیز خوانا نیست! برای حل این مشکل، باید در بخشهایی که یک تصویر بک گراند شده است، یک رنگ مناسب را نیز برای پشت آن در نظر گرفت. در مواردی نیز که فایل عکس به عنوان محتوا در HTML درج می شود نیز (مثلا یک لوگو) حتما از خاصیت alt در تگ آن برای جایگزینی متن استفاده شود. اگر از تصاویر بزرگ نیز مثلا برای بنر یا هدر استفاده می کنید، حتما طول و عرض آن را مشخص کنید تا ساختار سایتتان با لود نشدنش به هم نریزد.
6.معماری وب و ساختار نقشه سایت
تمام بخشهای سایت باید طبقه بندی شده و به شکل زیر شاخه ای تنظیم شده باشد. چیزی که ذهن ما ایرانیها اصلا عادت به آن ندارد!
در واقع لازمه تدوین یک نقشه سایت منطقی، مشخص بودن سیاست کلی سایت و نیز هدف گذاری صحیح برای آن است تدوین نقشه سایت، مثل نقشه یک ساختمان، اولین مرحله از طراحی و اجرای یک سایت است، و با یک نقشه سلسله مراتبی و مشخص کار طراحی و برنامه نویسی سیستم مدیریت سایت بسیار راحت تر می شود
بخشهای اصلی سایت باید از تمام صفحات سایت و از طریق منوی اصلی در دسترس باشد. و جایگاه محتوای سایدبارها در نقشه مشخص باشد. بسیار دیده می شود که در سایتها کادری با چند لینک و محتوا باز شده است و هیچ جایگاهی در ساختار منطقی و سلسه مراتبی نقشه سایت ندارد. و بنابراین مخاطب در میان صفحات سایت گم می شود و نمی داند چی به چی است و کی از کجاست!