آیتم های آزاردهنده در طراحی وب سایت

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

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

طراحی سایت آزاردهنده پیرامون همین موضوع بحث می کند. بسیاری از صاحبان سایت به ویژه افرادی که برای اولین بار تصمیم به طراحی سایت می گیرند، به پیاده سازی ایده های خود همراه با یک طراحی بیش از حد اصرار می ورزند. داشتن یک هدر (Header) جذاب برای صفحات سایت بد نیست، اما آیا واقعا آشفته کردن ذهن کاربر با استفاده از آن ضرورت دارد؟

صاحبان سایت اغلب این نکته را فراموش می کنند که سایشان باید پیامی برای کاربران در جهت معرفی شرکت باشد، نه مکانی برای نمایش میزان توانایی طراحان سایت.
آیا طراحی سایت شما آزاردهنده است؟
داشتن وب سایتی با طراحی آزاردهنده کار دشواری نیست و بسیاری از صاحبان سایت بطور ناخواسته در این زمینه پیشرو هستند. با بررسی موارد زیر در وب سایتِ خود از آزاردهنده بودن سایتتان مطلع شوید:

1- موسیقی زمینه:
در صورتیکه شما صاحب یک رادیوی آنلاین یا فروشگاه محصولات صوتی نیستید، استفاده از فایل های صوتی در پس زمینه صفحات سایت ضرورتی ندارد.

2- فونت های بزرگ:
اگر وب سایت شما برای افرادی که دچار ناتوانی بینایی هستند ساخته نشده است، استفاده از فونت های بزرگ درست مانند فریاد زدن به روی کاربران سایت می باشد که مورد پسند هیچ کاربری نیست.

3- فونت های کوچک:
اگر مایلید کاربران مطالب سایت شما را به راحتی بخوانند، از فونت های ریز استفاده نکنید.

4- پیغام های تمام صفحه:
نمایش اطلاعات بر روی یکدیگر در طراحی سایت می توانند بسیار مفید و کاربردی باشند، اما نه برای کوبیدن یک پیغام بر صورت کاربر. سعی نکنید کاربران را مجبور به خواندن پیغام های خود کنید.

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

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

دنبال کردن این مطلب

اصول طراحی وب سایت کاربردی

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


1- بهینه سازی برای موتورهای جستجو
اکثر بازدید کنندگان یک وب سایت، از صفحه نتایج موتورهای جستجو (SERP- Search Engine Result Page)، به همین دلیل، باید از بهینه بودن وب سایت خود اطمینان حاصل نمایید.
ایجاد و استفاده از نقشه سایت، میتواند به ربات های موتورهای جستجو در پیدا کردن محتوا وب سایت شما کمک کند. کوتاه بودن عنوان صفحات، اما هوشمندانه کمک بسزایی به ربات های موتورهای جستجو میکند. استفاده از کلید واژه ها (Keywords) در مطالب وب سایت و مرتبط به محتوای سایت در قسمت Head سایت یکی از عناصر مهم در بهینه سازی سایت میباشد.
استفاده از کلید واژه ها (Keywords) در Meta tag، عنوان صفحه و محتوای سایت، سایت شما را به سمت بهترین نتیجه هدایت میکند.
از دید بهینه سازی موتورهای جستجو، از فایل های فلش و جاوا کمتر استفاده کرده و بیشتر به محتوا و متن وب سایت خود بپردازید.


2- سازگار با مرورگری ها مختلف
مطمئن شوید که وب سایت شما با تمامی مرورگرها سازگار است.
منطبق بودن وب سایت با استانداردهای W3C، به سازگار بودن وب سایت شما با مرورگر های مختلف کمک میکند.
سازگار بودن وب سایت با مرورگرهای اینترنت اکسپلورر، فایرفاکس، گوگل کروم تقریبا تمام بازدیدکنندگان از بازدید وب سایت شما رضایت دارند.


3- تست کردن وب سایت
برای حفظ کیفیت وب سایت خود، به طور منظم وب سایت خود را تست کنید. مرحله تست وب سایت یکی از مهمترین مراحل طراحی وب سایت می باشد که طراحی وب سایت شما می بایست این مرحله را در زمان ساخت سایت شما انجام دهد.
اگر وب سایت شما مشکلی داشته باشد، مانند کار نکردن فرم فروش وب سایت، شما در زمان کمی مشتریان خود را از دست می دهید.

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

5- فاصله ها بسیار حیاتی هستند.
استفاده از فواصل بین خط ها، بین کلمات و در طراحی صفحه وب میتواند کمک زیادی در تعادل طراحی صفحه شما داشته باشد. فاصله بین خط ها، میتواند خواندن و تجزیه تحلیل را برای مخاطب آسان و سریع کند. فضای های بسیار کم و برعکس فضا های خالی و سفید بسیار زیاد باعث خستگی چشم بیینده میشود. فاصله بین خط ها را میتوان با استفاده از Line-Spacing در Css براحتی کنترل کرد.

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

6- استفاده از تصاویر گرافیکی
از بهینه بودن تصاویر گرافیکی وب سایت خود مطمئن شوید. سعی کنید از فرمت های .jpg و .gif استفاده کنید. یکی از نکاتی که باید به آن توجه کنید، پایین آوردن حجم تصاویر تا آنجایی که ممکن باشد. یکی از راه های کاهش زمان بارگزاری صفحات وب، توجه به این نکات میباشد. استفاده از ویژگی Alt در تصاویر وب سایت الزامی می باشد.

7- کم حجم بودن صفحه
بارگزاری صفحه های کم حجم بسیار آسان و سریع هستند. با بهینه سازی فایل های گرافیکی و کدهای وب سایت میتوانید حجم صفحه را کم کنید. اندازه یک صفحه وب باید ترجیحا بین 25KB-65KB باشد.

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


9- لینک های ناوبری (Navigation Links)
بازدید کندگان وب سایت شما باید قادر باشند تا خیلی سریع به اطلاعات و محتوا وب سایت شما دسترسی داشته باشند. برای این منظور می بایست سیاست درست و مشخصی برای لینک های منوی وب سایت خود داشته باشید. دکمه هایی که برای بخش منوی وب سایت خود استفاده می کنید، باید مشخص و در دسترس باشند.
بازدید کنندگان می بایست موقعیت خود را بعد از گذشتن از چند دسته بندی و زیر دسته بندی بدانند. این نکته میتوان با داشتن منوی درختی در هر صفحه مشخص کرد.

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

دنبال کردن این مطلب

موتورهای جست و جو چگونه کار میکنند؟

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

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

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

دنبال کردن این مطلب

نقش طراحی وب سایت در جذب مخاطب

نقش وب سایت ها در تجارت الکترونیکی و جذب و جلب مخاطب و مشتری مانند ویترین های مغازه است. هر قدر که ویترین مغازه شیک و تمیزتر باشد و به علاوه جمع و جور باشد، به مشتری در انتخاب خرید کمک بیشتری خواهد کرد و او را به خرید بیشتر راغب می کند. در طراحی  وب سایت های تجاری نیز باید این نکته را مد نظر داشت و نباید همه محصولات خود را از ریز و درشت روی صفحه اصلی Web Site قرار داد و انتظار داشت که مشتری بتواند سریع به محصول خود دست یابد، بلکه باید آنها را به صورت دسته بندی شده و منظم قرار داد و حرکت کاربر را هدفمند کرد، برای این منظور ۱۰ نکته را که از مهم ترین شاخصه ها در طراحی وب سایت برای جلب مخاطب بیشتر است، در زیر آورده ایم:

 

۱) داشتن هدف

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

 

۲) داشتن یک سبک نگارشی معین

سبک نوشتار شما در وب سایت باید اثرگذار و ثابت باشد که بیننده در تشخیص آن به مشکل برنخورد.

 

۳) داشتن شعار سازمانی
با بهره گیری از شعارهای سازمانی می توانید تصویر ذهنی اثرگذاری از وب سایت خود در ذهن بازدید کنندگان باقی بگذارید. شعار سازمانی خود را هیچ گاه تغییر ندهید و از آن به عنوان Head وب سایت خود استفاده کنید، زیرا موتورهای جست و جو (Search Engine) در شناسایی وب سایت شما سریعتر عمل خواهند کرد.

 

۴) به کارگیری لوگوی نوار نشانی
اکنون پیشرفته ترین Browser ها امکان شناسایی لوگوهای نوار نشانی را دارند، پس چه خوب است که شما لوگوی خود را در ابتدای نوار نشانی استفاده کنید.

 

۵) تثبیت لوگو
هر وب سایت را می توان با لوگویش شناخت، پس هرچه برای طراحی بهتر لوگوی خود سرمایه گذاری کنید، متضرر نمی شوید.

 

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

۷) حضور در شبکه های اجتماعی
شبکه های اجتماعی که در سال های اخیر رواج بیشتری یافته است، مکان هایی برای حضور افرادی است که علایق مشترک دارند و در یک زمینه خاص به دنبال یافتن اطلاعات هستند. این شبکه ها بر ایجاد ارتباط On line در بین علاقه مندان تمرکز دارند و روزانه از سوی میلیون ها نفر مورد بازدید قرار می گیرند. در صورت ورود سایت هایی به این شبکه ها حتماً شناخته تر خواهید شد و تعداد بازدید از سایت شما بالاتر خواهد رفت.

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

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

 

۱۰) تبلیغات
اگر در امر تبلیغات دارای محدودیت مالی هستید، بهتر است در شروع کار تنها به تبلیغات بپردازید و پس از آن به ارتقای محتوا و به کارگیری روش های ارزان وب سایت خود را ترویج کنید.

دنبال کردن این مطلب

چگونه طراح وب سايت خود را انتخاب کنيد؟

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

در اين مقاله سعي مي کنيم نکاتي را که براي انتخاب طراح وب سايت به صورت کلي بايد مد نظر قرار گيرد، بررسي کنيم.

وب سايت تنها رنگ و لعاب آن نيست

وب سايت ممکن است رنگهاي زيبا، سر تيتر هاي متحرک (Flash)، گرافيک هاي جذاب، موزيک و ديگر جزئيات گرافيکي را براي تحت تاثير قرار دادن بازديدکنندگان داشته باشد، هر چند ظاهر خوب يک وب سايت قطعاً در موفقيت آن سهم بسيار زيادي ايفا مي کند، اما اينکه ظاهر وب سايت مناسب مخاطبين و مطالب ارائه شده آن است و آيا اين ظواهر مکان قرارگيري در موتورهاي جستجو را بهبود مي بخشد يا خير حائظ اهميت است؟ آيا مشتريان بالقوه مي توانند وب سايت شما را يافته و در آن به گشت و گذار بپردازند؟ آيا اگر بازديد کننده وب سايت شما، مسن باشد و يا چشمان ضعيفي داشته باشد، باز هم مي تواند خطوط وب سايت شما را خوانده و از خدمات و يا کالاهاي شما مطلع شود؟

 

بهينه سازي براي موتور هاي جستجو

بهينه سازي وب سايت ها براي قرارگيري در صدر فهرست موتورهاي جستجو تقريباً تبديل به يک علم مجزا شده است که مي تواند در موفقيت وب سايت شما سهم بسزايي ايفا کند.

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

البته اين بدان معني نيست که وب سايت شما نمي تواند زيبا و جذاب باشد، اما بايد استاندارد هاي اصلي طراحي وب سايت در آنها رعايت شود.

آيا وب سايت طراح وب سايت مورد نظر شما، در موتورهاي جستجو در جايگاهي بالايي قرار مي گيرد؟ آيا شما بوسيله موتورهاي جستجو آنها را يافته ايد؟

 

زمان بارگذاري (لود شدن کامل سايت) را چک کنيد.

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

 

کد هاي استاندارد را چک کنيد.

اطمينان حاصل کنيد که طراح وب سايت مورد نظر شما، با استاندارد هاي وب مانند CSS، HTML 4، XHTML، RSS آشنا هستند. براي اطلاع از هر استاندارد به بخش لغت نامه مراجعه فرماييد. رعايت کردن اين استانداردها نه تنها به نمايش صحيح در تمام مرورگرها کمک خواهد کرد، بلکه مي تواند در بالا بردن رتبه وب سايت شما در موتورهاي جستجو کمک کند.

 

تطابق با مرورگرهاي وب

در حال حاضر بيشتر کاربران اينترنت از Internet Explorer براي بازديد وب سايت ها استفاده مي کنند (نزديک به 80% کل کاربران). اما اين بدان معني نيست که وب سايت شما تنها بايد براي اين مرورگر طراحي شود. اينترنت يعني آزادي و هر کاربري مي تواند از هر مرورگري که بدان علاقه دارد استفاده کند. متاسفانه از آنجا که طراحي وب سايتي که در تمام مرورگرها به درستي نمايش داده شود کار ساده اي نيست، بيشتر طراحان وب آن را ناديده مي گيرند. اما اين مسئله روز به روز از اهميت بالاتري برخوردار مي شود، چرا که کاربران Internet Explorer در حال کاهش و کابران ديگر مرورگرها در حال افزايش هستند. مطمئن شويد که وب سايت طراح و وب سايتي که براي شما طراحي خواهد شد با حداقل چهار مرورگر اينترنت زير تطابق کامل داشته باشد:

Chrome
Internet Explorer
Firefox
Opera

در غير اينصورت احتمال اينکه برخي کاربران را از دست بدهيد بالا خواهد بود.

 

پشتيباني

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

دنبال کردن این مطلب

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

نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت با استفاده از تکنیک CSS Reset

cross browser compatibility

سازگاری یک صفحه وب و کدهای آن با مرورگرهای گوناگون و متعددی که وجود دارند ( IE , FireFox , Opera , Chrome ) ، یکی از مشکلات و چالش های جدی برای طراحان وب سایت بوده است. یک طراح وب سایت گاهی مجبور به افزودن کدهای بسیار پیچیده در لابلای فایلهای CSS – سی اس اس خود است تا این ناسازگاری و تفاوت در نمایش صفحات در مرورگرهای متفاوت را به این نحو سازگار جلوه دهد.

این چالش تا به ابنجا پیش رفته است که ، توانایی در طراحی وب سایت ، به طوری که در تمامی مرورگرها به طور یکسان نمایش داده شود ( Cross Browser ) ، یک امتیاز بسیار خوب برای یک طراح وب است. بسیاری از گروه ها و طراحان وب سایت برای راحتی در استفاده از کدهای CSS – سی اس اس به این منظور راه حل ها و تکنیکهای گوناگونی را بررسی کرده اند ، و به نظر میرسد استفاده از تکنیک CSS Reset به این منظور از محبوبیت بیشتری برای طراحان وب سایت بر خوردار است .


CSS Reset چیست ؟

CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد . با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند بود و طراح وب سایت می تواند با استفاده از این روش استایل ها (CSS Style ) را با توجه به نیازهای خود تعیین کند.

بهتراست در استفاده از این تکنیک نکات زیر را در نظر داشته باشید

بسیاری از مقادیر در هنگام استفاده از این تکنیک معادل ( صفر ) تعیین می شوند و تعیین اندازه برای این عناصر ممکن است حجم فایل CSS شما را افزایش دهد.
توجه داشته باشید که ممکن است فراموش کنید مقادیری را که به صورت اولیه در آورده اید ، باز سازی کنید .
از تکنیک های استاندارد برای پیش فرض کردن ( CSS Reset ) استفاده کنید . استفاده از تکنیک های غیر استاندارد می تواند باعث بروز مشکلاتی برای کاربران و مخاطبان وب سایت شما شود. ( به طور مثال ، عدم توانایی در تعیین اندازه فونت توسط مرورگر و یا استفاده از کلید های میانبر (Shortcut Key ) )

برای استفاده از این تکنیک ، کافی است کدهای CSS که نمونه هایی از آن را در زیر ملاحظه خواهید نمود در ابتدای سند و فایل CSS وب سایت خود قرار دهید.

در لیست زیر تعدادی از محبوب ترین CSS Reset ها و همچنین Css Reset مورد استفاده در اینسایت را ملاحظه می فرمائید

 

Eric Meyer’s reset

 

CSS Mini Reset

 

The Yahoo! User Interface CSS Reset

 

Webtarget.ir CSS Reset

دنبال کردن این مطلب

۱۰ نکته کاربردی در طراحی وب سایت

اشتباهاتی که نباید در طراحی وب سایت خود مرتکب شوید

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


لیبل فرم هایی که ارتباطی با اطلاعات ورودی آنها ندارند

استفاده از خصوصیت “for” به کاربر اجازه می دهد با کلیک کردن روی لیبل قسمتی از فرم را که میخواهد انتخاب کند.این خصوصیت ، برای check box و یا radio button برای ایجاد منطقه بزرگتری برای کلیک کردن مهم تر است، ولی سعی کنید این خصوصیت را در تمامی قسمتهای فرم رعایت نمائید .

لوگویی که به صفحه اصلی لینک نباشد

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

معلوم نبودن لینکهای دیده شده

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

نشان داده نشدن فیلد فعال یک فرم

شما می توانید از انتخابگر “focus” در بسیاری از عناصر استفاده کنید ،اما حتما این گزینشگر را در فرم ها برای نشان دادن فیلد مورد نظر استفاده نمائید . با اضافه کردن استایل CSS برای تغییر حالت ، مثلاً با پر رنگ شدن مرز یا تغییر ظریف در رنگ پس زمینه میتوانید منطقه یا فیلد مورد نظر را مشخص نمائید .

تصویری بدون متن جایگزین

به یاد داشته باشید که همیشه یک متن توصیفی جایگزین برای تصاویر قرار دهید مگر اینکه آنها برای تزئین به کار روند که حتی در این موارد نیز ویژگی “alt” را میتوان تنها خالی گداشت (اما همچنان باید وجود داشته باشد!). زمانیکه یک تصویر را به عنوان لینک استفاده می کنیم، باید توضیح دهیم که لینک به کجا میرود. این توضیح دقیقا متن جایگزین تصویر است که با استفاده از “alt” در تصویر قرار گرفته است .

قرار دادن عکس پس زمینه بدون رنگ پس زمینه

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

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

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

خط کشیدن زیر متنی که لینک نیست

همه می دانند متنی که زیر آن خط کشیده شده است، یا رنگی متفاوت دارد احتمالاً باید لینک باشد . بنابراین بازدید کننده ها را با خط کشیدن زیر متن هایی که لینک نیستند گیج نکنید! برای جلب توجه به یک کلمه خاص از تگهای em و strong استفاده کنید.

گفتن به مردم که اینجا را کلیک کنید

کلمات “اینجا را کلیک کنید” از زمان بوجود آمدن اینترنت بوده است ، ولی با توجه به وجود گزینه های مفیدتر از آنها اجتناب نمائید . استفاده از کلمات “اینجا را کلیک کنید” نیازمند این است که کاربر کل جملات را بخواند تا متوجه شود چه اتفاقی افتاده است . اما بهتر است متن لینک ، توضیح دهد که چه اتفاقی خواهد افتاد وقتی روی لینک کلیک می شود.

استفاده از متن “justify” شده

این یک راهنمایی دیگر برای داشتن وب سایت مفیدتر است . متن “justify” شده به نظر تمیز و مرتب به چشم می آید، ولی میتواند باعث بوجود آمدن مشکلات خوانایی شود، مخصوصاً برای کسانی که به بیماری “Dyslexic” مبتلا هستند یعنی کسانی که سخت می توانند فواصل نا هماهنگ در متون “justify” شده را تشخیص دهند.

 

گروهی طراحی وب سایت شبکه فناوری اطلاعات و ارتباطات فاواکو

دنبال کردن این مطلب

هشت مرحله مهم در طراحی وب سایت


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

مرحله اول : اهداف و استراتژی وب سایت

ابتدایی ترین گام در طراحی یک وب سایت بررسی و تعیین اهداف ، سیاست و استراتژی وب سایت شما در نحوه معرفی و ارائه خدمات ، نوع و نیاز مخاطبان ، امتیازات رقابتی ،نحوه ارتباط با مخاطبان و … می باشد. بررسی و مطالعه دقیق در این مرحله می تواند در بازدهی و بهره وری وب سایت و تبلیغات شما بسیار تعیین کننده و سودمند باشد . برای تعیین اهداف و استراتژی وب سایت تان موارد زیر را مدنظر قرار دهید :
هشت مرحله مهم در طراحی وب سایت
هدف شما از داشتن وب سایت
نوع مخاطبان
نوع خدمات
تحلیل خواسته های مخاطبان
فضای رقابتی و ویژگیهای رقابتی

مرحله دوم : محتوا

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

مرحله سوم : طبقه بندی اطلاعات ، چینش محتویات ، نوع نگارش و دسترسی وب سایت,

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

مرحله چهارم : گرافیک وب سایت

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

مرحله پنجم : رعایت استانداردها در طراحی

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

مرحله ششم : مدیریت وب سایت

امروزه وب سایتهای داینامیک و پویا سهم عمده ای از دنیای وب را تشکیل میدهند. این وب سایتها با استفاده از زبانهای برنامه نویسی و بانکهای اطلاعاتی به وجود می آیند و حرکت می کنند. با توجه به گستردگی زبانهای برنامه نویسی تحت وب ، عناصر : علم روز ، تجربه و خلاقیت در استفاده از زبانها و بانکهای اطلاعات نقش تعیین کننده ای در بازدهی و بهره وری وب سایت شما دارد .در وب سایتهای داینامیک بخشی با عنوان مدیریت وب سایت ، برای مدیریت ( بروزرسانی ، ویرایش و … ) اجزاء و مطالب وب سایت در اختیار شما قرار میگیرد. سادگی در نحوه استفاده ، امکانات و امنیت از نکات مهم در مدیریت وب سایت هستند. این بخش توسط مخاطبان عادی وب سایت شما غیر قابل رویت می باشد و در عین حال قسمت اصلی تشکیل دهنده وب سایت های داینامیک است.
وب سایت داینامیک و استاتیک چیست ؟
می توان وب سایت ها را با توجه به نحوه در دسترس قرار دادن اطلاعات ، مدیریت و یا ویرایش اطلاعات به دو گروه استاتیک و داینامیک تقسیم بندی نمود. در تصور عامیانه ” داینامیک ” به وب سایتهایی گفته می شود که دارای تصاویر و یا اجزاء متحرک هستند و وب سایت های “استاتیک” دارای فضایی غیر متحرک !؟ بر خلاف تصور عامیانه ، تفاوت وب سایتهای داینامیک و استاتیک در توانایی و یا عدم توانایی در مدیریت ، ویرایش و بروز رسانی محتویات وب سایت خلاصه میشود. به این معنی که در وب سایتهای استاتیک مطالب و محتویات غیر قابل ویرایش و تغییر هستند و در وب سایتهای داینامیک قابلیت مدیریت مطالب ، محتویات و اجزاء ، به صورت انلاین وجود دارد.

مرحله هفتم : بهینه سازی وب سایت برای موتورهای جستجو SEO

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

مرحله هشتم : تبلیغات

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

دنبال کردن این مطلب