You are here:

16 نکته در طراحی وب

فرستادن به ایمیل چاپ

Tags: تجربیات | تخصصی | سئو | سایت | وب

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

 

از قالب های درون خطی(Inline CSS) استفاده نکنید.

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

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

<p style="color: red;">Hello World! </p>

از این روش استفاده کنید حتماً :

p.important {

color: red;

}

تمام شیوه نامه های خارجی را در برچسب Head قرار دهید.

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

 

فایلهای جاوااسکریپت را در انتهای صفحه قراردهید

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

<p>And now you know my favorite kinds of corn. </p>

<script type="text/javascript" src="/path/to/file.js"></script>

<script type="text/javascript" src="/path/to/anotherFile.js"></script>

</body>

</html>

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

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

 

استفاده از فایرباگ را فراموش نکنید.

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

 

از برچسب های H1-H6 زیاد استفاده کنید .

تا جایی که امکان دارد از برچسب های H1-H6 استفاده کنید . این برچسب ها که برای نشان دادن مطالب مهم تر استفاده می شوند، تاثیر زیادی در سئوی سایت یا همان ظاهر شدن در نتایج اولیه موتورهای جستجو ایفا خواهند کرد چون به موتورهای جستجو، مناطق مهم تر متن را به سادگی نشان می دهند.

 

سرعت لود شدن سایت را حتماً بررسی کنید

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

 

فایلهایتان را فشرده کنید.

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

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

اندازه عکس و خاصیت Alt آنرا حتماً تعیین کنید.

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

 

اصول گرافیک دیجیتال را یاد بگیرید

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

 

عضویت در سایتهای طراحی وب را جدی بگیرید

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

 

تا جایی که امکان دارد از شبکه های توزیع محتوا استفاده کنید

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

 

سئوی سایت را جدی بگیرید.

امروزه سئوی سایتها یا همان دیده شدن در نتایج جستجو از نان شب هم واجب تر شده است . پس هنگام طراحی سایت ، به نکاتی که باعث بهبود سئوی سایت خواهد شد، حتماً توجه کنید. مقاله گوگل در این زمینه مفید و مختصر است . اما به طور خلاصه عنوان صفحات، پر کردن مناسب برچسب متا، سرعت لود، لینک داخلی صفحات به یکدیگر، عنوان های مناسب برای لینک ها، کاربرد درست برچسب های H1-H6 و محتوای تازه و غیرتکراری از عوامل مهم افزایس سئوی یک سایت هستند.

 

از چهارچوب های CSS استفاده کنید.

قبلا در مقاله ای ضرورت این موضوع را توضیح داده ام اما به طور خلاصه، برای نمایش درست صفحات در تمام مرورگرها نیازمند کتابخانه های جاوااسکریپت هستیم . از طرفی وجود سیستمی برای چیدمان درست عناصر در یک صفحه (بدون استفاده از جدول) ما را به سمت کتابخانه های آماده CSS می کشاند. انتخاب یک CSS Framework ما را از بسیاری از این مسائل بی نیاز می کند. خودم به شخصه از G5 استفاده میکنم که جزء سیستمهایی نوین و پشتیبانی کننده از HTML5 و CSS3 است.

 

تمام برچسب های اچ تی ام ال و css را یاد داشته باشید

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

 

سایتتان را با مرورگرهای مختلف تست کنید

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

نظرات (0)Add Comment

نظرتان را بنویسید
کوچکتر | بزرگتر

busy
آخرین بروزرسانی ( جمعه ، 22 مهر 1390 ، 20:28 )