اشتباهات رایج در ساخت یک وب سایت

[آبجی]

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

۱.استفاده از کدهای قدیمی
وب سایت رابطه مستقیمی با تکنولوژی دارد و تکنولوژی نیز دائما در حال رشد و پیشرفت است. یکی از مواردی که باید در یک وب سایت استاندارد رعایت شود بروز بودن کدهای HTML,XHTML,CSS و … با استاندارد های سازمان بین المللی استانداردهای وب W3C است . رعایت این استانداردها فواید بسیار زیادی برای وب سایت ها خواهد داشت .
برای آشنا شدن با آخرین استاندارد ها سری به وبسایت w3school (http://www.w3schools.com/) بزنید.
۲.استفاده از تصاویر گیج کننده و آزار دهنده
زمانی که اینترنت شروع به کار کرد مردم بسیار هیجان زده بودند برای اینکه بتوانند مطالب و اطلاعات خود را هر چه زودتر منتشر کنند و گسترش دهند ، وکمتر در فکر خوانایی و نحوه نمایش آن بودند . بنابر این در انتخاب تصاویر و نحوه نمایش مطالبشان دقت خاصی نداشتند و استانداردی نیز برای آن موجود نبود ،اما امروزه با افزایش رغابت در عرصه اینترنت و همچنین تعیین استانداردها ، نحوه نمایش اطلاعات و انتخاب تصاویر و گرافیک وب سایت بسیار تعیین کننده است. در انتخاب یک تصویر مناسب علاوه بر زیبایی ، نکات دیگری نیز مورد توجه قرار می گیرد مانند گویایی ، هم خوانی با مطالب وب سایت ، حجم و همچنین عدم انحراف ذهن مخاطب. بنابراین سعی کنید از تصاویری استفاده کنید که موجب آزردگی مخاطبانتان نشود.گاهی زیبایی در سادگی نهفته است.
۳.استفاده از فونت های غیر استاندارد
وب سایتی را در تصور کنید که فونت های استفاده شده در آن در کامپیوتر شما موجود نیست و محتویات این وب سایت به شکل یک زبان مریخی نمایش داده می شود.!؟
فونتها از اجزاء اصلی تشکیل دهنده یک وب سایت هستند که عدم رعایت استاندارد در استفاده از آنها می تواند باعث عدم مقبولیت و یا کارایی وب سایت شما باشد.از فونتهایی استفاده کنید که با تمامی سیستم ها و مرورگرها سازگاری داشته باشد.فونتهای استاندارد زیادی برای زبان انگلیسی وجود دارد ولی در زبان فارسی بیشتر از فونت Tahoma برای متن ها و از Arial و یا Time برای عنوانها استفاده می شود.در انتخاب اندازه فونتها نیز بسیار دقت کنید زیرا همه با هر توانایی دیدی باید بتوانند مطالب وب سایت شما را بخوانند.از دستورات Css برای تعیین فونتهای جایگزین استفاده کنید، به این معنا که در صورت پشتیبانی نکردن یک فونت ، جایگزینی برای آن موجود باشد .
۴.استفاده از رنگ زمینه نامناسب
رنگ زمینه زرد با فونت سبز فسفری جیغ!؟ چطوره؟
مطالب داخل وب سایت برای استفاده و مطالعه مخاطبان در وب سایت قرار داده شده است، بنابر این برای بهتر دیده شدن این مطالب برای مخاطبان باید تفاوت رنگی مناسبی بین فونت ها و پس زمینه وجود داشته باشد (contrast)، بنابر این در انتخاب رنگ فونتها و پس زمینه آنها دقت کنید تا دچار اشتباه نشوید. سعی کنید رنگ تیره تر را برای فونتها انتخاب کنید .
۵.جدول ها (Table )
در گذشته استفاده از Table ها در طراحی ساختار یک وب سایت بسیار مرسوم بود ، ولی در حال حاضر و بر اساس استاندارد های امروزی ازTable ها فقط در نمایش نمودارها استفاده می شود .
بر طبق اصول طراحی امروزی برای تشکیل ساختار یک وب سایت ازDIV ها استفاده می شود زیرا استفاده از Table ها در ساختار یک وب سایت باعث بیشتر شدن کدها و در نتیجه سخت تر شدن کنترل و ویرایش و همچنین سنگین تر شدن صفحات وب می شود ودر مقابل آن استفاده ازDIV ها موجب بهینه شدن وب سایت برای موتورهای جستجو( SEO ) ، کاهش حجم صفحات وب ، انعطاف پذیری در طراحی و چینش صفحات ، توانایی بیشتر در ویرایش و در نتیجه ایجاد صفحات زیباتر و کار آمد تر وب است.
۶.استفاده بیش از اندازه کلمات Bold
این بسیار خوب است که مهمترین کلمات را برای تاکید بیشتر به صورت مشخص و Bold نمایش دهیم ولی استفاده بیش از حد از این روش باعث کمرنگ شدن تاثیر آن بر روی خواننده و همچنین عدم خوانایی مطالب وب سایت می شود.بنابراین در استفاده از کلمات Bold دقت کنید و سعی کنید مهمترین کلمه را برای خواننده مشخص کنید و نه تمام پاراگراف را.
۷.نوشتن برای موتورهای جستجو و نه برای خواننده
بسیاری بر این باورند که استفاده بیش از حد از کلمات کلیدی در متن وب سایت باعث علاقه بیشتر موتورهای جستجو می شود. اما باید بگویم که سخت در اشتباهند. موتورهای جستجو مانند گوگل روش های بسیار پیچیده ای را برای بررسی وب سایتها دارند که در طول زمان بسیار هوشمند شده است.مسلما این فکر برای گول زدن موتورهای جستجو در فکر توسعه دهندگان این موتورهای جستجو نیز بوجود آمده است با این تفاوت که آنها بسیار پیشتر از ما این موضوع را بررسی کرده اند و برای مبارزه با این موضوع راهکار های ویژه ای نیز دارند.بنا براین با استفاده بیش از حد از کلمات کلیدی در وب سایت خود دچار اشتباه نشوید.
سعی کنید در توضیح خدمات خود از ساده ترین روش استفاده کنید و بر این اعتقاد باشید که برای یک انسان مطلب می نویسید و نه برای عنکبوت های موتورهای جستجو.
این نکته را در اینجا اضافه میکنم که بهترین راه ساده ترین راه است بنابر این در فکر راههای پیچیده برای گول زدن موتورهای جستجو نباشید زیرا احتمالا شکست خواهید خورد.سعی کنید مطالبی ساده ، گویا و مفید برای مخاطبان خود بنویسید تا هر چه بیشتر آنها را جذب کنید و این روش ، بیشتر باعث پیشرفت و مقبولیت شما خواهد شد تا قرار گرفتن در اولین صفحه نتایج گوگل؟! ترافیک بالا بدون داشتن خدمات و مطالب مفید نتیجه معکوسی در تبلیغات شما خواهد داشت بنابر این در فکر افزایش کیفیت مطالب و خدمات وب سایت خود باشید تا قرار گرفتن در اولین صفحات گوگل ، مقبولیت در بین مخاطبان خود به خود باعث افزایش رتبه شما در موتورهای جستجو نیز خواهد شد.
۸.استفاده از کدهای CSS بهینه شده
استفاده از کدهای CSS یکی از نکات کلیدی در استاندارد سازی وب سایت دارد.استفاده از کدهای CSS نکات مثبت بسیاری دارد. سبکتر شدن و تمیز تر شدن کدهای وب سایت ، افزایش کنترل بر روی کدها ، سبک تر شدن صفحات ، افزایش قدرت ویرایش و در نهایت ایجاد صفحات زیبا و استاندارد وب. اما استفاده از کدهای CSS نیز اصول و استانداردهای خاصی را می طلبد که در زیر به ذکر دو مورد بسند میکنم.
اول خلاصه نویسی کدهای CSS
دوم استفاده نکردن از کدهای CSS تکراری
به طور مثال فرض کنید از چندین DIV درون همدیگر استفاده کرده اید . برای تعیین یک خصوصیت یکسان مانند رنگ نوشته ها و یا چینش ( مگر در موارد خاص ) احتیاجی به تعیین تک به تک این خصوصیات برای تمامی تگها نیست و می توان با چند خط کوتاه این خصوصیات را برای تمامی تگهای مشابه تعیین کرد. و یا به این نکته توجه کنید در صورت تعیین نشدن خصوصیت برای یک تگ ، این تگ خصوصیات تگ منشاء ( Parent ) خود را می گیرد.از این نکته نیز می توان در خلاصه سازی کدهای CSS استفاده نمود.
۹.غیبت مدیریت محتوا
امروزه تقریبا تمامی وب سایتها از سیستم مدیریت محتوا برای بروز رسانی ، کنترل و ویرایش مطالب وب سایت استفاده میکنند ، این مدیریت محتوا می تونه به بروز بودن وب سایت و همچنین ایندکس شدن سریعتر وب سایت شما توسط موتورهای جستجو کمک کنه ، استفاده از این سیستمها مزایای زیادی داره که می تونید به راحتی استفاده کنید.
البته در حال حاضر سیستم های بسیاری در داخل کشور به عنوان سیستم مدیریت محتوا معرفی می شوند که از نظر کارایی و گرافیک بسیار ضعیفند ، طبق یک برنامه اصولی ساخته نشده اند ، قابل توسعه نیستند و هزاران مشکل دیگر …
تعدادی از سیستم های قوی مدیریت محتوا که حتی کدهای رایگان انها را می توانید به سادگی در اینترنت پیدا کنید در زیر معرفی خواهیم کرد ، البته این نکته را باید اضافه کنیم که کار کردن حرفه ای با این سیستم ها احتیاج به اطلاعات فنی کامل دارد.



Wordpress (http://www.wordpress.org/)

Joomla (http://www.joomla.org/)

Drupal (http://drupal.org/)

ExpressionEngine (http://expressionengine.com/)

Cushy (http://www.cushycms.com/)

(http://www.cushycms.com/)
10.استفاده از تکنیکهای گرافیک به صورت نامناسب
یک نوشته پر رنگ قرمز با حاشیه های بسیار عریض که بسیار ترسناک به نظر می رسد…!؟
فضای بسیار محدودی در وب سایت برای ارائه کارهای گرافیکی موجود است با این حال باید بیننده را در اولین لحظات لود شدن صفحه جذب کنند.شما ترجیح می دهید از چه چیزی برای جلب توجه مخاطبان استفاده کنید.یک نوشته با مشخصات بالا و یا یک نوشته ساده؟
استفاده از تکنیکهای گرافیکی در همه موارد مناسب به نظر نمی رسد چه بسا به نظر مخاطب بسیار نا مناسب نیز باشد. بنابراین در استفاده از تکنیکهای گرافیکی بسیار دقت کنید تا مخاطبانتان را یکی پس از دیگری از دست ندهید. راز مقبولیت یک وب سایت در سادگی و پر محتوایی آن است.می توانید برای دریافت تجربه در استفاده از تکنیکهای گرافیکی موارد موفق را بررسی کنید و از آنها ایده بگیرید.
۱۱.صفحات اعتبار سنجی نشده (Not validating)
اگر با استانداردهای کد نویسی و طراحی وب سایت آشنایی کامل داشته باشید و از آنها در طراحی و پیاده سازی وب سایت استفاده کنید validate کردن صفحات وب کار سختی هم نیست.
Validate کردن صفحات وب سایت نشان دهنده استاندارد بودن وب سایت است و این نکته باعث کسب اعتبار بیشتر و همچنین مقبولیت بیشتر در نظر موتورهای جستجو می گردد.




W3C HTML Validator (http://validator.w3.org/)
W3C CSS Validator (http://jigsaw.w3.org/css-validator/)
W3C Link Checker (http://validator.w3.org/checklink)
W3C RSS Validator (http://validator.w3.org/feed/)
ThruSites SEO Validator (http://www.thrusites.com/tools/validator/index.php)


12.نگارش بد متون و غلط های املائی
این نکته بسیار مهم است که بدانید مخاطبان از نوع نگارش شما اعتبار شما را می سنجند. بنابر این در استفاده از کلمات و نوع نگارش مورد استفاده دقت کافی را به عمل آورید. استفاده از علامات نگارشی برای سهولت در خواندن در عین سادگی بسیار مفید هستند . غلط های املائی دید بسیار منفی مخاطبان را به همراه دارند هر چند که سهوی باشند.بنا بر این چندین بار متون خود را بخوانید و بررسی کنید.



منبع: ittutorial

[آبجی]

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



http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-1.png


در تصویر زیرین نیز باز همین موضوع را مشاهده می کنید که لینک اصلا به راحتی قابلا تشخیص نمی باشد.


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-1-1.gif


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


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-2.png


ولی در جایی که چند مطلب و عکس محدود داریم، بهتر است همه را یکجا قرار دهیم تا کاربر اذیت نشود.


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-2-1.png


هیچ راهی برای تماس وجود نداشته باشد!
یکی از مهمترین بخش های یک وب سایت داشتن بخش تماس با سایت است که هر کاربر بتواند به راحتی با سایت تماس داشته باشد و سایت باید با مخاطبان خود ارتباطات قوی ای برقرار نماید


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-3.jpg


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


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-5.gif


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


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-7.jpg


ولی اکنون به تصویر زیر نگاه کنید کاربر لذت می برد و می فهمد به راحتی که کجا باید کلیک کند :


http://weblog.azemat.com/images/entries/web-design/mistakes-web-design-7-1.jpg



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

[آبجی]

10 اشتباه نابخشودني طراحان وب

بارها پيش آمده كه خواسته و ناخواسته، براي بهتركردن وب‌سايت ازنشانه‌هايي استفاده كرديم كه بعدا به ضرر وب‌سايت تمام شده‌اند، اين نشانه‌ها، كه معمولا براي اطلاع‌رساني و تمركز روي يك چيز خاص است، باعث آزردگي چشم يا ذهن مخاطب مي‌شود. در ادامه به چند مورد از بدترين كارهايي كه يك طراح مي‌تواند انجام دهد، مي‌پردازيم:


1- ‌Pop up‌ها و صفحات خودكار:يكي از روش‌هاي تبليغ داخل بسياري از وب‌سايت‌ها، باز شدن پنجره‌هاي موسوم به پاپ‌آپ است اما جالب اين‌جاست كه بدترين روش براي تبليغ نيز همين است. كاربران معمولا به‌جاي بستن پنجره پاپ‌آپ، پنجره وب‌سايت را هم مي‌بندند و ديگر به آنجا سر نمي‌زنند مگر اينكه مجبور باشند.
2– نوشته‌ها مهم هستند ‌ ‌
در يك همه‌پرسي كه توسط موسسه ‌Landslide‌ انجام شد، حدودا دو سوم از آراء، فونت نامناسب را دليل نخواندن سايت مورد نظر مي‌دانستند. ‌ ‌
3– لينك‌هاي غير استاندارد
اين 5روش كليدي را در كليه لينك‌ها به‌كار گيريد:
– زير لينك‌ها خط بكشيد. (ولي جاهايي كه لينك نيستند را ‌Underline‌ نكنيد.)
– لينك‌هاي كليك شده را رنگي كنيد.
– براي بهتر‌شدن سايت از نظر جستجو ‌(SEO)‌ داخل سايت به‌جاي عبارت "اينجا را كليك كنيد"،متن را بنويسيد و لينك كنيد.
– از به كار بردن متدهاي جاوا اسكريپت كه قابليت تعاملي لينك را پايين مي‌آورد خودداري كنيد.
– صفحات را در يك پنجره جديد باز نكنيد مگر در يك سري موارد خاص مانند باز كردن ‌PDF‌ يا پركردن فرم كه آن هم ضدارزش است.
4– فلش
استفاده نابجا از فلش يك شكست بزرگ در طراحي وب است. در سال 2005 ادوبي فلش، مدال برنز را در آزار‌دهندگي پيدا كرد! با وجود تمام تمهيدات انجام شده و توصيه‌هاي انجام گرفته، اكثر وب‌سايت‌هاي فلش از كاربردهاي نابجا و عناصر غيرمفيد اين نرم‌افزار استفاده كرده‌اند. اگر شما يك محتواي نامناسب داريد، مطمئن باشيد كه با استفاده از تكنيك‌هاي حركتي نمي‌توانيد سايت خود را بهبود بخشيد. بنابراين بهتر است به جاي اين كارها از عكس‌هاي زيبا‌تر و متون پخته‌تر استفاده كنيد.
5– محتواي مختص وب
داخل هر صفحه يك مطلب ارزشمند براي ارائه داشته باشيد. نوشته براي وب؛ كوتاه، خوانا و هدفمند است. همچنين بهتر است پاسخگوي سوالات كاربران باشد و از زبان‌مردمي به‌جاي استفاده از كلمات عجيب و ابداعي استفاده كند.
6– جستجوي بد
رعايت كردن موارد بالا تا به‌حال آسان بود اما متاسفانه درست كردن جستجوي سايت موردي است كه شركت‌ها براي نيل به‌ آن بايد سرمايه‌گذاري كنند. در كشور ما به دليل رعايت‌نشدن بسياري از استاندارد‌ها انجام دادن اين امر در رابطه با كشور‌هاي غربي بسيار آسان‌تر است.
7– عدم تطابق با ‌Browser‌ در باز شدن سايت
در حال حاضر در بيشتر كشورهاي غربي ‌Firefox‌ و در كشور ما ‌IE‌ به عنوان ‌Browser‌هاي استاندارد استفاده مي‌شود. اما شما نمي‌توانيد كاربرتان را براي استفاده از ‌Browser‌ محدود كنيد. با رعايت استانداردهاي ‌C3W‌ و ‌4 Html‌ وب‌سايت شما در اكثر ‌Browser‌ها يكسان ديده مي‌شود.
8– فرم‌هاي ورود اطلاعات طولاني و پيچيده:
خوب به ذهن بسپاريد كه هيچ‌كس تمايل ندارد يك فرم 5صفحه‌اي را پاي كامپيوتر خود پر كند. بنابراين اطلاعات را تا حد امكان ساده كنيد.
9–عدم‌درج اطلاعات تماس با ما يا اطلاعات مربوط به كمپاني
علاوه بر اين كه فرم تماس با ما و درباره ما و شماره تلفن براي يك وب‌سايت حياتي است، قرار دادن يك سري ‌Email‌ از افراد حقيقي نيز در وب‌سايت‌ها اعتبار دهنده است. نمي‌شود به شركتي كه آدرس ندارد، پولي پرداخت كرد يا به‌ اندازه كافي به آن اعتماد كرد.
‌ ‌10– بزرگ شدن نا‌مناسب عكس‌ها
يكي از ويژگي‌هايي كه اخيرا خيلي مورد نياز است، نمايش عكس محصول مورد فروش به مشتري در يك پنجره جديد و بزرگتر با يك دكمه بستن است. هنگامي كه مشتري تصوير محصول مورد نظر خود را مي‌بيند، اعتمادش بيشتر جلب مي‌شود.
معمولا وب‌سايت‌ها اين نكته را رعايت مي‌كنند اما بزرگترين مشكل آنجا است كه با كليك بر روي عكس فعلي يك عكس با همين ابعاد در يك پنجره جديد ايجاد مي‌شود. درست است كه شما مي‌خواهيد سرعت لود بالايي داشته باشيد تا كاربر خسته نشود اما هنگامي كه كاربر بر روي عكس براي بزرگ شدن كليك مي‌كند، حتما انتظار ‌Download‌ شدن آن‌را نيز تحمل مي‌كند.




منبع: روزنامه جام جم - ضمیمه کلیک