طراحی سایت سازگار با کلیه مرورگرهای اینترنتی

تست سازگاری وب سایت با تمام مرورگرها را تمام صاحبان وب سایت باید انجام دهند. اگرچه ممکن است که شما در مرورگر خود بتوانید ببینید ولی ممکن است که کاربران از مرورگرهای مشابه شما استفاده نکنند.

آیا سایت شما با تمام مرورگرها سازگاری دارد؟

مرورگرهای اصلی موجود عبارتند از: اینترنت اکسپلورر، فایرفاکس، سافاری، اپرا و غیره. برای مرورگرهای مبتنی بر متن برای سیستم عامل های لینوکس برنامه Lynx Viewer جهت تست صفحات وب شما در دسترس است.

وب سایت شما برای هر کدام از مرورگرهایی که در بالا ذکر شد، به چه صورت دیده می شود؟

چگونه می توانم سایت خود را برای تمام مرورگر ها سازگار کنم؟

برای ایجاد یک وب سایت سازگار با تمام مرورگرها :

1. فقط از برنامه نویسی استاندارد صفحه استفاده کنید.
2. از تگ های خاص html استفاده نکنید.

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

3. صفحات وب خود را تأیید کنید.

• کد HTML / XHTML خود را با استفاده از سرویس معتبر W3C رایگان، تأیید کنید.
• با استفاده از سرویس تأیید اعتبار رایگان W3C، استایل شیت های خود را تائید کنید.

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

اهمیت سازگاری وب سایت با تمام مرورگرها

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

آمار و ارقام استفاده از مرورگرها

بر اساس آمار W3C ، تا 97 در صد از کاربران از کروم، فایرفاکس، اینترنت اکسپلورر (IE) استفاده می کنند. بیشترین آمار مربوط به IE با حدود 45 درصد کاربران و پس از آن فایرفاکس با 29 درصد از کاربران از کل بازدیدکنندگان وب سایت ها هستند.

چند نکته برای طراحی سایت سازگار با کلیه مرورگرها

چند نکته مهم وجود دارد که شما مطمئن شوید که وب سایت شما در تمام مرورگرها به درستی مشاهده می شود. یک راه حل ساده این است که کد های HTML و CSS خود را بدهید و آن را در تمام مرورگرها مشاهده کنید.

بهتر است که صفحات وب سایت خود را طوری طراحی کنید که در مرورگر های مختلف یکسان به نظر برسند. این وب سایت ها اغلب به عنوان وب سایت های سازگار با تمام مرورگرها هستند.

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

در اینجا چند راهنمایی مفید برای طراحی سایت متناسب با تمام مرورگرها گفته شده است:

 آن را ساده نگه دارید

همیشه کیفیت بهتر از کمیت است. طراحی سایت را به صورت ساده نگه دارید، یک هدر، یک ستون میانی و یک فوتر کافی است. اگر طراحی شما دارای 7 جعبه سایدبار باشد این کار برای سایتتان خطرناک است. از عناصر تو در تو استفاده نکنید. برای نوارمنو از UL  و LI  استفاده کنید. از یک جدول یا مجموعه ای از عناصر p استفاده نکنید. تمامی قالب بندی های سایت باید در CSS باشد و HTML شما باید برای محتوا باشد، نه سبک. ده خط کد را به یک ویژگی اختصاص ندهید که می توان آن را با سه خط کد نوشت. کد های ساده نه تنها برای نمایش در تمام مرورگرها بهتر است بلکه در هنگام اشکال زدایی، راحت تر می توان آن را اشکال زدایی کرد.

اعتبار

برای جلوگیری از بروز مشکلات، قبل از آپلود سایت خود، کد های HTML و CSS  خود را تائید اعتبار کنید. کدهای معتبر باعث می شوند، سایت شما در تمامی مرورگرها به درستی کار کند ولی کد نامعتبر می تواند باعث به وجود آمدن مشکلات غیر قابل پیش بینی شود.

می توانید از HTML Validator W3C و CSS Validator برای اطمینان از اینکه کدهای شما بدون خطا هستند، استفاده کنید. شما همچنین می توانید از پلاگین های مخصوص این کار مانند HTML Validator Firefox برای چک کردن صفحات خود استفاده کنید.

اجتناب از حالت پیش فرض مرورگر(استفاده از DOCTYPE)

بسیاری از مرورگرها دارای حالت "پیش فرض" هستند که به شکل نسخه های قدیمی تر مرورگربه نظر می رسد. حالت های پیش فرض، برای سایت نامناسب هستند زیرا وب سایت شما را به صورت غیر استاندارد  نمایش می دهد. برای جلوگیری از این مشکل می توانید از کد DOCTYPE در HTML  استفاده کنید.

از آنجا که مرورگرهای مختلف دارای استاندارد های مختلف هستند، شما باید DOCTYPE  را در خط اول کد HTML  خود بازنویسی کنید.

به طور کلی اگر در کد HTML  خود از عبارت DOCTYPE  استفاده نکنید، صفحه وب سایت شما به حالت پیش فرض میرود. بنابراین برای اطمینان از اینکه صفحه سایتتان به حالت پیش فرض نمیرود مطمئن شوید که از کد DOCTYPE  در کدنویسی html استفاده کرده اید.

از قوانین بازنشاندن  CSS استفاده کنید

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

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

توسعه در فایرفاکس

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

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

از آنجا که همه مرورگرهای مدرن دارای مزایای زیادی هستند. مهم است که تست های خود را در طیف گسترده ای از مرورگرها تست کنید.

کدنویسی دستی

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

ولی با این حال الویت این است که کد های html ، css   و  xml  را به صورت دستی وارد کنید.

از فریم ورک استفاده کنید

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

نظرات شرطی

نظرات شرطی به شما اجازه می دهند که STYLSHEET  خود را با تمام مرورگرها لینک کنید.

آماده شدن برای تغییرات

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

ابزارهای تست سازگاری مرورگرها

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

ابزار BrowserShots

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

گوگل کروم ، dillo  ، elinks ، موزیلا فایرفاکس ، epiphany ، galleon

و سیستم عامل هایی که ساپورت می کنند:

لینوکس ، ویندوز ، مک ، BSD  

IE tester

اگر شما یک توسعه دهنده هستید که نیاز دارید که از ابزاری استفاده کنید که فقط از اینترنت اکسپلورر پستیبانی کن، برای شما این ابزار مناسب است. IE TESTER یک ابزار رایگان تست مرورگر است که به شما اجازه می دهد که سایت را با استفاده از اینترنت اکسپلورر 5، 6، 7، 8 و 9 ببینید.

ابزار مجازی DotMobi

این ابزار یک ابزار رایگان مجازی است که به شما این اجازه را می دهد که وب سایت های خود را در دستگاه هایی مانند iphone  ، با استفاده از تکنولوژی دسترسی از راه دور بررسی کنید. برای استفاده از این سرویس، شما باید یک کارت اعتباری به منظور جلوگیری از سواستفاده از دستگاه، داشته باشید.

ابزار CloudTesting

این ابزار یک ابزار رایگان است که به توسعه دهندگان وب اجازه می دهد تا وب سایت های خود را با استفاده از هر یک از مرورگرهای ذکر شده در زیر مشاهده کنند. مرورگرهایی که پشتیبانی می کنند عبارتند از:

• اینترنت اکسپلورر 6، 7، 8
• موزیلا فایرفاکس
• اپل سافاری
• گوگل کروم
• اپرا

ویژگی ها:

برای توسعه دهندگان وب سایت ها

مشکلات را به سرعت پیدا خواهید کرد

 تست کردن سایت در چند مرورگر موجب میشود که مشکلات را به سرعت،  پیدا کنید.

چند مرورگری

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

ابزارهای مقایسه

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

اتوماتیک

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

تکرارپذیری

تست ها روز به روز تکرار می شوند تا تغییرات ایجاد شده در وب سایت را دنبال کنید.

همه مناطق را تأیید کنید

تمام مناطق سایت مانند نتایج جستجو و یا سبد های خرید را تائید کنید.

عکس از مرورگرها

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

جزئیات خدمات:

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

CrossBrowserTesting

این ابزار وب سایت شما را با یک مرورگر و VNC از راه دور تست می کند. با استفاده از این ابزار شما می توانید آجاکس، جاوا و فلش خود را در همه مرورگرها تست کنید. کافی است فقط URL را وارد کنید، یک مرورگر را انتخاب کرده و سپس نرم افزار را اجرا کنید.

این ابزار مرورگرهایی که پشتیبانی می کنند عبارتند از:

• مرورگر Android
• گوگل کروم 5 تا 8
• فایرفایکس
• اینترنت اکسپلورر 5 تا 9
• موبایل سافاری
• اپرا
• موزیلا
• و غیره