{"id":62,"date":"2009-07-16T18:45:51","date_gmt":"2009-07-16T18:45:51","guid":{"rendered":"http:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/"},"modified":"2009-07-16T18:45:51","modified_gmt":"2009-07-16T18:45:51","slug":"how-does-your-website-look-on-the-other-guy-s-computer","status":"publish","type":"post","link":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/","title":{"rendered":"How does your website look on the other guy\u2019s computer?"},"content":{"rendered":"

One major challenge for web developers is to have the site look just right on the various web browsers.  <\/span>While there are official standards how all the browsers are supposed to interpret HTML and CSS, in practice, each browser has its quirks, and while the page may look one way on my computer, if one is unscrupulous in web development, the page may look unexpectedly different when someone else views it.<\/font><\/p>\n

Download major browsers<\/o:p><\/font><\/span><\/b><\/p>\n

The first thing you need to do is to download all the major browsers.  <\/span>While most of the world will view your website through either Internet Explorer or Firefox, it’s advisable to also cover less common browsers, such as Opera, Safari, and Konqueror.  <\/span>These can be downloaded on their respective websites.  <\/span>It is also recommended to have both the most recent and previous versions of these browsers. For more complete testing, it is also advisable to have different types of operating systems and computers, such as Windows, Macintosh, and Linux, available. Another test is to install different graphic resolutions on the computers to see how the page looks when the screen is larger is smaller.<\/font><\/p>\n

Once this is done, you need to test each web page on all the possible platforms.  <\/span>For more thorough testing, it is also advisable to do screenshots of each page view, paste them in a graphics program, and measure the size and spacing of everything.<\/font><\/p>\n

This may seem quite a bit time consuming, and it really is.  <\/span>Whoever is paying for the development of the website will have to decide whether it is enough for the website to look just right to 95% of the world or if the extra resources should be used to perfect the site for 99% of the Internet-viewing world.<\/font><\/p>\n

Reasons why appearance may vary<\/o:p><\/font><\/span><\/b><\/p>\n

1.<\/font>       <\/span><\/span><\/span><\/b><\/span>Bugs in different browsers<\/o:p><\/font><\/font><\/b><\/p>\n

Some of the major browsers have bugs, where the HTML or CSS is not rendered correctly.  <\/span>Unfortunately, those reading the web page usually do not know this, so it’s the developer who looks bad, not the web browser.  <\/span>It’s the developer’s job to clean up after the web browser’s bugs and find the workarounds to make the site look Ok.<\/font><\/p>\n

2.<\/font>       <\/span><\/span><\/span><\/b><\/span>Different strictness in interpreting HTML and CSS<\/o:p><\/font><\/font><\/b><\/p>\n

For example, if I write a tag <a href=”http:\/\/anywhere.com>, Internet Explorer will cover up my mistake of omitting the closing quotation mark, while Firefox will not forgive, and all the content of the page following this will be considered part of the reference, and much of the remaining content on the page will not visible.  <\/span>Syntax of such pages needs to be carefully checked, either manually or with an automated syntax checker, many of which are available online.<\/font><\/p>\n

3.<\/font>       <\/span><\/span><\/span><\/b><\/span>Different rules for inheritance..<\/o:p><\/font><\/font><\/b><\/p>\n

Take the following example:<\/font><\/p>\n

<div style=”width:10px;padding:10px”><\/font><\/p>\n

<div style=”width:10px”>hello<\/div><\/font><\/p>\n

<\/div><\/font><\/p>\n

In Internet Explorer, the inner DIV inherits the padding property from the outer DIV’s padding property, so it will also have a 10 pixel padding, making the overall length 10 pixels larger on each side.  <\/span>In Firefox, however, only the outer DIV will have the 10 pixel padding.<\/font><\/p>\n

 <\/font><\/o:p><\/p>\n

How to fix the appearance<\/o:p><\/font><\/span><\/b><\/p>\n

1.<\/font>       <\/span><\/span><\/span><\/b><\/span>Use debuggers<\/o:p><\/font><\/font><\/b><\/p>\n

Each browser should have debugging add-ons, which can be downloaded.  <\/span>I use DebugBar for Internet Explorer and FireBug for Firefox.  <\/span>With these debuggers, one can view how the DOM is actually rendered and how the CSS is interpreted.  <\/span>Once I do this, I usually see where the problem is.<\/font><\/p>\n

2.<\/font>       <\/span><\/span><\/span><\/b><\/span>Check the Internet<\/o:p><\/font><\/font><\/b><\/p>\n

Fortunately for me, when there is some quirk in a particular browser, there have been thousands of other developers who noticed it before me, some of them who will write about it on the Internet.  <\/span>To find articles and discussions about such issues, I formulate the key words about my issue and enter it into my favorite search engine.  <\/span>Additionally, many web browsers have their own forums to discuss issues specific to the browsers.  <\/span>Most of the time, I will find an article or discussion with a solution to the problem I am having.<\/font><\/p>\n

Here, we see that, following a series of straight-forward steps, any web developer with basic knowledge of the major tools we use can make the site look just right for most of the Internet audience.<\/font><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

One major challenge for web developers is to have the site look just right on the various web browsers.  While there are official standards how all the browsers are supposed to interpret HTML and CSS, in practice, each browser has its quirks, and while the page may look one way on my computer, if one … <\/p>\n

Continue reading “How does your website look on the other guy\u2019s computer?”<\/span><\/a><\/p>\n\n\n","protected":false},"author":375,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[63,12,53,59,60,61,62,64,58],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-browser","tag-css","tag-development","tag-explorer","tag-firefox","tag-html","tag-internet","tag-programming","tag-web","entry"],"yoast_head":"\nHow does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer\" \/>\n<meta property=\"og:description\" content=\"One major challenge for web developers is to have the site look just right on the various web browsers.  While there are official standards how all the browsers are supposed to interpret HTML and CSS, in practice, each browser has its quirks, and while the page may look one way on my computer, if one … Continue reading "How does your website look on the other guy\u2019s computer?"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/\" \/>\n<meta property=\"og:site_name\" content=\"Yirmi's World of Web Widgets by Yirmiyahu Fischer\" \/>\n<meta property=\"article:published_time\" content=\"2009-07-16T18:45:51+00:00\" \/>\n<meta name=\"author\" content=\"yirmi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yirmi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/\"},\"author\":{\"name\":\"yirmi\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/#\\\/schema\\\/person\\\/3ad2fc75c4041622134d8f0f14a2102e\"},\"headline\":\"How does your website look on the other guy\u2019s computer?\",\"datePublished\":\"2009-07-16T18:45:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/\"},\"wordCount\":787,\"commentCount\":0,\"keywords\":[\"browser\",\"CSS\",\"development\",\"Explorer\",\"Firefox\",\"HTML\",\"Internet\",\"programming\",\"web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/\",\"url\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/\",\"name\":\"How does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/#website\"},\"datePublished\":\"2009-07-16T18:45:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/#\\\/schema\\\/person\\\/3ad2fc75c4041622134d8f0f14a2102e\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/2009\\\/07\\\/16\\\/how-does-your-website-look-on-the-other-guy-s-computer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How does your website look on the other guy\u2019s computer?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/#website\",\"url\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/\",\"name\":\"Yirmi's World of Web Widgets by Yirmiyahu Fischer\",\"description\":\"Blog of a PHP Web Programmer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/#\\\/schema\\\/person\\\/3ad2fc75c4041622134d8f0f14a2102e\",\"name\":\"yirmi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/wp-content\\\/uploads\\\/avatars\\\/375\\\/8c2adaf748317e659d83f249c32af044-bpfull.jpg\",\"url\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/wp-content\\\/uploads\\\/avatars\\\/375\\\/8c2adaf748317e659d83f249c32af044-bpfull.jpg\",\"contentUrl\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/wp-content\\\/uploads\\\/avatars\\\/375\\\/8c2adaf748317e659d83f249c32af044-bpfull.jpg\",\"caption\":\"yirmi\"},\"url\":\"https:\\\/\\\/jobshuk.com\\\/yirmi\\\/author\\\/yirmi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/","og_locale":"en_US","og_type":"article","og_title":"How does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer","og_description":"One major challenge for web developers is to have the site look just right on the various web browsers.  While there are official standards how all the browsers are supposed to interpret HTML and CSS, in practice, each browser has its quirks, and while the page may look one way on my computer, if one … Continue reading \"How does your website look on the other guy\u2019s computer?\"","og_url":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/","og_site_name":"Yirmi's World of Web Widgets by Yirmiyahu Fischer","article_published_time":"2009-07-16T18:45:51+00:00","author":"yirmi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yirmi","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/#article","isPartOf":{"@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/"},"author":{"name":"yirmi","@id":"https:\/\/jobshuk.com\/yirmi\/#\/schema\/person\/3ad2fc75c4041622134d8f0f14a2102e"},"headline":"How does your website look on the other guy\u2019s computer?","datePublished":"2009-07-16T18:45:51+00:00","mainEntityOfPage":{"@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/"},"wordCount":787,"commentCount":0,"keywords":["browser","CSS","development","Explorer","Firefox","HTML","Internet","programming","web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/","url":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/","name":"How does your website look on the other guy\u2019s computer? - Yirmi's World of Web Widgets by Yirmiyahu Fischer","isPartOf":{"@id":"https:\/\/jobshuk.com\/yirmi\/#website"},"datePublished":"2009-07-16T18:45:51+00:00","author":{"@id":"https:\/\/jobshuk.com\/yirmi\/#\/schema\/person\/3ad2fc75c4041622134d8f0f14a2102e"},"breadcrumb":{"@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jobshuk.com\/yirmi\/2009\/07\/16\/how-does-your-website-look-on-the-other-guy-s-computer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jobshuk.com\/yirmi\/"},{"@type":"ListItem","position":2,"name":"How does your website look on the other guy\u2019s computer?"}]},{"@type":"WebSite","@id":"https:\/\/jobshuk.com\/yirmi\/#website","url":"https:\/\/jobshuk.com\/yirmi\/","name":"Yirmi's World of Web Widgets by Yirmiyahu Fischer","description":"Blog of a PHP Web Programmer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jobshuk.com\/yirmi\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jobshuk.com\/yirmi\/#\/schema\/person\/3ad2fc75c4041622134d8f0f14a2102e","name":"yirmi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jobshuk.com\/yirmi\/wp-content\/uploads\/avatars\/375\/8c2adaf748317e659d83f249c32af044-bpfull.jpg","url":"https:\/\/jobshuk.com\/yirmi\/wp-content\/uploads\/avatars\/375\/8c2adaf748317e659d83f249c32af044-bpfull.jpg","contentUrl":"https:\/\/jobshuk.com\/yirmi\/wp-content\/uploads\/avatars\/375\/8c2adaf748317e659d83f249c32af044-bpfull.jpg","caption":"yirmi"},"url":"https:\/\/jobshuk.com\/yirmi\/author\/yirmi\/"}]}},"_links":{"self":[{"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/users\/375"}],"replies":[{"embeddable":true,"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":0,"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jobshuk.com\/yirmi\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}