Web Developer News: Opera 15, Chrome 28 and IE 11 for Windows 7

5. August 2013 15:32 by Daniel Herken
Welcome to this months web developer browser news. Opera 15  Opera has released it's new version 15 of the Opera desktop browser. Opera 15 is powered by the blink engine (just like Google Chrome). Moreover Opera has announced to switch to the rapid release cycle.  You can read more about this here. Chrome 28 Google has released the version 28 of Chrome. The most important changes are 11 security fixes. You can read the changelog here.   IE 11 for Windows 7 Microsoft has released a preview version of Internet Explorer 11 for Windows 7. This way you can start testing websites for IE 11 on you're current windows machine. You can download the preview here. Of course BrowseEmAll does already support Chrome 29, Opera 15 and IE 11. Try the 14-Day free Trial now:  Download BrowseEmAll14-Day Free Trial    

Internet Explorer 11: The First Web Developer Review

25. June 2013 14:31 by Daniel Herken
                Yesterday Microsoft released the first beta of the next Windows 8 generation: Windows 8.1. Part of this beta release is the new Internet Explorer 11 which is especially interesting for web designers and developers around the world. In this post you'll learn which new Web Standards and features Internet Explorer 11 supports and we'll take a look at the improved developer tools (finally!).  Compatibility Changes Before we enter the big changes let me quickly show some web development relevant changes made to the general browser behavior.  New User Agent String Of course the Internet Explorer 11 User Agent String has been changed. The new User Agent String is: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko   In direct comparison the Internet Explorer 10 User Agent String is: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)   The new User Agent String is more consistent with other browsers which should be a good thing.  Web Standards Currently Firefox and Chrome are raising the bar for web standards compatibility month after month. If Microsoft want's to keep up they will need to make quite a few improvements in this area. Let's start out with a browser comparison:  Browser Acid3 HTML5test.com CSS4 Selectors Internet Explorer 11  100/100  355+6/500  75% Internet Explorer 10  100/100  320+6/500  75% Chrome 27  100/100  463+13/500  83% Firefox 22  100/100  395+14/500  79%   So clearly we can see a step forward in the new Internet Explorer 11. But still we are nowhere near the level of Firefox or Google Chrome. That's sad because many people still use whatever IE version comes with the operating system as there main browser. Regardless Internet Explorer 11 brings some new feature to the table which will gain a wider adoption once the browser is released.  So What's new? The most important new features in Internet Explorer 11 are: WebGL                                   With Internet Explorer 11 WebGL lands in the last of the major browsers. As WebGL enables developers to create dynamic 2D and 3D graphics, games and content we'll see more usage of this great feature in the future. Of course the WebGL implementations by Microsoft has some specialties which are documented quite well in the developer guide. You can try this out for yourself using the examples at IEWebGL.com. Mutation Observer The Mutation Observers, as specified in the W3C DOM4 specification, can be used to replace property change events. These observers provide a way to declare which DOM manipulations you want to monitor and be notified of changes after script execution but before a new frame is rendered and displayed. The observers can be used like this: var observer = new MutationObserver(mutationCallback); observer.observe(targetObject, {    attributes: true,   attributeFilter: ["name", "id"],   attributeOldValue: true,   childList: true }); You can find more information and source code examples at MSDN. Device Orientation Support Internet Explorer 11 implements a new JavaScript event which is mainly useful for mobile devices and tablets, the deviceorientation event. This event get's fired whenever the device detects a change in orientation (the user changes the orientation of the physical device). This event can be found on the window object. More information are available in the specification. Canvas enhancements Internet Explorer 11 includes 3 new features for the Canvas element: msImageSmoothingEnabled, even-odd Fill rule and dashed lines. The msImageSmoothingElabled property can turn off bilinear scaling and activate nearest-neighbor scaling. This is especially useful for game sprites which will appear sharper scaled that way. You can clearly see the differences (bilinear scaling on the left, nearest-neighbor scaling to the right).           The even-odd filling rule can be used to fill shapes created by a path. This way you can fill the even parts and let out the odd parts of a shape. Maybe a picture makes it more clear?                   The last new canvas features are dashed lines which does what you might expect it to do, it draws dashed lines. You can use setLineDash, getLineDash and lineDashOffset to create the lines. You can find more details and code examples on MSDN. Enhanced HTML 5 Video support More features have been added to the HTML 5 video playback including Dynamic TextTracks, Encrypted Media Extensions, Fullscreen API, Simple Delivery Profile, Streaming XHR cache control and Media Source Extensions. You can find out anything you want about these features at the IE 11 Developer Guide. Embedding custom non-visible data Support for custom data attributes and the property dataset have been added. This means you can use the data- prefix to add any custom data to the DOM. This data can later be used inside JavaScript code. A simple example: <div id="test-data" data-my-custom-data="Here could be your custom data"></div> <script type="javascript/script">    function ReadWriteCustomData(newData) {       var mydata = document.getElementById('test-data').dataset.mycustomdata;       document.getElementById('test-data').dataset.mycustomdata = newData;   } </script> Flexible box layout The CSS flexbox layout was already introduced in Internet Explorer 10 using the Microsoft vendor prefix ms-. In Internet Explorer 11 this prefix has been removed for most properties and values. Moreover the shorthand property flex has been added. A list of all changed properties can be found at MSDN. Developer Tools The developer tools in Internet Explorer 11 have final been rebuild and are now a decent competition for Chrome and Firebug. Especially the UI Responsiveness tool comes in rather handy. Some of the new features are:  Console In the new console window you can see errors, warnings and other messages including debug output. Just like in Chrome or Firefox you can also inspect and run JavaScript code in the console. Measure UI Responsiveness Using the UI Responsiveness tool you can profile any website and identify bottlenecks and what processes takes more time than they should. It is especially useful to optimize JavaScript driven UI's and web applications.    Memory Analysis This tool can track the memory usage of any website over it's lifetime. Aside from a timeline of overall memory usage you can create snapshots for a specific point in time. Unfortunately I could not get the snapshots to work on my test machine.      Autocompletion In the new console and DOM explorer the developer tools provide you with auto completion whenever you to type in HTML, CSS or JavaScript.  GPS emulation No more pain while testing any websites GPS functionality. Using the new emulation tool you can simulate different GPS position to simplify the testing workflow. It is really great!        All new features are described in depth in the developer documentation on MSDN. Conclusion All in all I'd say that Internet Explorer 11 is another step in the right direction. Especially I like the new developer tools which are way more usable than the old ones ever where. In regard to standards compatibility and browser features Microsoft widens the gap between Internet Explorer and other browser like Chrome and Firefox. This will slow down the process of new feature adoption inside the development community because nearly no one can simply ignore Internet Explorer users altogether. Let's hope that Microsoft will release new IE versions independently of Windows in the future to speed up the development process and release cycles.  Sources / More Information Introducing IE 11 IE 11 Developer Guide Microsoft IE Testdrive

Web Development Can Be Art - Literally

22. January 2013 19:09 by Daniel Herken
A few days ago the Net.Art project OneYouNeed came to me with two rather special cross-browser issues. The project aims to create a unique music video containing single frames made by people all around the world. If you have a webcam handy try it, it's really funny.  To implement the needed functionality across all major browsers, OneYouNeed faced two different problems which I would like to discuss in the following. Cross-browser webcam access To capture webcam pictures, you obviously need to access the webcam in some way. Flash and the HTML 5 Webcam API come to mind. Unfortunately, the preferred way (in my opinion) was blocked because of poor browser support. While Flash runs on a wide array of browsers including Internet Explorer 8, the HTML 5 Webcam functionality is only available in Chrome and Firefox.  Settling on a Flash solution, we looked into quite a few different possibilities to integrate nicely with JavaScript and the PHP backend. The jQuery webcam plugin does the trick quite nicely. Moreover, it's instantly compatible with all major browsers. The used functionality includes: Webcam selection (don't get me started on Windows webcam drivers) Picture capturing using JavaScript Picture processing using PHP Live and transparent webcam picture The next cross-browser problem came into view only after we switched away from our development browser and friend chrome. Because the participants need to recreate a frame as accurate as possible we wanted to display the live webcam picture 50% transparent over the original frame to give the user some perspective.  To do this, we crossed our fingers and simply added an opacity: 0.5 to the flash object tag. To our surprise this did work nicely in chrome but not in any other browser. This is actually a Flash security feature: It doesn't allow webcam access if the element is only partly visible. Why this is not present in chrome is beyond me.         So to get the transparency in all other browsers we added the opacity using JavaScript after the user allowed webcam access. This was done in the jQuery webcam plugin "debug" event.  Last but not least you need to add a parameter to the flash object to get this working in Internet Explorer: <param name="wmode" value="opaque"> The final result works quite nice and it's fun to see and create the pictures:                               Summary Until the Webcam access is possible in pure JavaScript and HTML 5 across all browsers, Flash will be the best method in my opinion. Unfortunately, this puts every mobile device (iPhone, iPad, Android) outside the reach of this solution.  Shameless Plug: Of course we used BrowseEmAll to test the website across all major browsers. Did you know that do-gooders (non-profit, charity, educational organization, art projects or open-source contributor) can get a free license just by asking?  

Does W3C Validation Still Matter?

6. November 2012 14:26 by Daniel Herken
Recently I put the final touches to my latest web project an decided it would be fun to know where it is in terms of W3C validation. So I submitted the page to the W3C Validator and sure enough it did find 5 errors and 5 warnings. After investigation I did not end up fixing any of the errors or warnings because that would not benefit any of the website users but the question remains; Does W3C Validation still matter? The W3C Validator For those of you who are not familiar with W3C validation, it’s simply a set of standards for determining whether an HTML webpage is properly written or not. For example, if you are creating a table and you want to specify the “width” attribute, you can either specify it as a separate tag within your table definition or you can specify an inline “style” tag containing the width instead. W3C recommends the latter instead of the former. The question is, how important is W3C validation when you design your website, and how much time should you spend ensuring that your code is compliant? Looking at the big guys The fact of the matter is that many websites in today’s world don’t care too much about W3C validation. We can take a hint from some of the largest sites – like Google, Facebook, and Reddit. After all, they are supposed to represent the “best in class” design techniques and we can learn a lot about the current state of the web by examining how they implement their own designs. The simple truth is that none of the above sites are 100% W3C compliant. There is no doubt that they have the resources to make them so – it’s just that they don’t think it’s worth it beyond a certain point. So where does that leave the rest of us who’re regular developers and designers?           Web standards are important! For what it’s worth, I think that the mere existence of HTML standards is extremely useful. The rules may be observed more in the breach, but at least they are there. We have some benchmark to compare to. Even if most websites do not validate completely, at least we have a consensus about how it “should” be in an ideal world.There are many benefits to having some sort of ideal. They make things easier for cross browser testing tools which will almost always have utilities to go through your code and tell you whether there are any issues. The easiest would be W3C validation also this is, of course, browser independent. If you get into the habit of trying to write HTML that complies with W3C standards, any errors that you receive will highlight the most egregious faults with your code. You will have an easier time correcting mistakes if there are fewer “red lines” rather than many. Easier cross-browser compatibility Secondly, validated HTML design is most likely to find the greatest amount of acceptance if you are keen on ensuring that your web application renders perfectly in every single browser. There are exceptions to this of course, but by and large it’s a good habit to keep your code as close to the W3C standards as possible without expending too much effort on the process.The bottom line is that even though most modern browsers and most websites do not strictly adhere to W3C valid code, the fact that a certain standard exists makes it easier for regular programmers like us. It ensures that no given browser is able to dominate the world of web standards by implementing its own unique HTML rules. And that is good for the entire web. Cross-browser reporting Did you know? BrowseEmAll can analyze your HTML and CSS to find browser specific issues. In lack of a better name (and imagination) we call it cross-browser report. Would like to see an example? Like what you see? Download and try BrowseEmAll today! Download BrowseEmAll14-Day Free Trial

Mobile Browsers that matter

29. October 2012 16:28 by Daniel Herken
There used to be a time when one of the great advantages of developing a web application was that you simply had to write the code once and it would run anywhere at any time and on any device in the world as long as it had an Internet connection. While that dream isn’t dead, it’s certainly lost some of its allure. Web developers now have to customize their application to ensuring that it runs on a wide variety of mobile devices in an optimal manner. Smartphones, tablets, and now intermediate devices like the Nexus 7, the Kindle Fire, and the iPad Mini all have their own variances. If you want your website to create the best possible experience for the customer (which is the goal), you should create test and optimize your web application for each type of device.For complicated web applications, this isn’t an easy job. Good web development involves separating the front end design from the backend functionality. If you follow this practice, it will be much easier to customize and test your websites with various mobile browsers. However it’s also important to realize that not all browsers work in the same way. Take iOS for instance. The dominant browser is Safari due to the fact that it comes preinstalled on every Apple device. It’s important to remember however that iOS cripples every other browser by design. Recently Google released chrome for iOS, but it suffers from a lack of speed because it simply does not possess the same resources and permissions as the inbuilt Safari browser. Of course the same can be applied to Internet Explorer and Windows Phone. Quirks like this can affect your web application in subtle ways that may not be immediately apparent. Which is why you need to perform intensive testing with every major mobile browser out there. Here are a few that you may want to test first: Chrome When chrome for Android first came out it was only available for Ice Cream Sandwich and above. Most Android smartphones are still running older versions but newer devices are quickly gaining ground. As this trend accelerates, we can be assured that more and more people will begin to use chrome as their primary browser on their mobile device. Chrome is now available on all major platforms including iOS. Even though it currently occupies a small share of the mobile browser market, it is expected to explode in usage in the near future. Safari Without a doubt, this is the dominant mobile browser in today’s world due to the sheer market power of Apple in the mobile space. Though there are more Android devices than iOS ones, not all Android users have the same browser and studies have shown that currently iOS users browse the web more. Due to the fact that it is impossible for any other browser on iOS to match up to Safari, this should be the first browser that you cross test for. Dolphin Dolphin is a relatively new browser for Android devices. It’s available on iOS as well as Android and has received rave use from the tech community. It has several unique features such as gestures that make it appealing to many individuals.   Firefox Firefox is trying to become a larger player in the mobile space. It has its own Web browser in Android but no presence on the iOS market because Apple forces every browser on iOS to use its own specific JavaScript engine which Firefox developers refuse to do.   Opera Mobile As mentioned sometime earlier, Opera may have a miniscule market share, but that market share is dedicated. It has a huge presence in certain countries and its impact in the mobile space should not be underestimated. It’s available on Android as well as iOS unlike Firefox. Testing your web application with all these mobile devices can be difficult. A stand-alone cross browser testing tool is your best option if you want to save time, money, and ensure that your development procedure is as efficient as possible. Chrome, Safari, Firefox and Opera are already available if you use BrowseEmAll. Try it out, it's free!   Download BrowseEmAll14-Day Free Trial

Why Use a Standalone Cross Browser Testing Tool?

19. October 2012 14:20 by Daniel Herken
The browser market today is more saturated than ever before. Compared to just a few years ago when Internet Explorer was the dominant force, browsers such as Chrome and Safari have established their own solid market share. The recent proliferation of mobile devices has only accelerated this trend. Many web designers now have dedicated “mobile only” versions of their websites. Some even go the extra mile and create an additional version specifically for tablets. In many ways the web is fragmented. Though it may seem as if a webpage behaves uniformly across browsers, this is far from true. Every browser has its own quirks and serious developers have to ensure that their websites work properly on all of them. It’s not enough to merely cater to the major players who have a large market share. Even a relatively minor browser like Opera which has a tiny presence worldwide, has achieved significant adoption in many Eastern European countries such as Ukraine where it commands a 43% market share. If your application caters to these countries, you simply cannot afford to ignore the way your webpage renders in these browsers. Cross browser testing of your website is not just another tick off a checklist - it is an essential component of your testing environment.                     Top Browser Version per Country (Statcounter) Standalone vs Online Services Cross browser testing tools fall into two broad categories – those where you can test webpages over the Internet, and applications that you install on your computer. Both have their uses. But if you’re a professional web designer, a standalone tool is indispensable. Online services are great for quick and ad hoc testing. Simply input the URL of your website and you can get an idea of how it renders across a variety of browsers. But there are several disadvantages as well. To start off with, you already need a live version of your website before you can test it. So if you don’t want your potential customers to see a broken page, you have to upload your projects to temporary URLs first.In addition, online testing tools are slow. Depending on the service you use, it can be several minutes before you receive your results. This is due to the inherent lag of Internet services. As mentioned before, if you’re a professional web developer this can get frustrating very quickly.A standalone cross browser testing tool however mitigates all these problems. You can configure it so that it automatically executes testing whenever you build your project. It doesn’t require your site to be live – it can work directly with HTML webpages stored on your local network. This means it is fast and can also check against a greater variety of web browsers. You can receive screenshots and detailed information instantly without having to wait for a long time.It also isolates you against failures in Internet connectivity at your end. With a stand-alone testing tool, you can be sure that your website works properly in all browsers before it is ready to go live.This is not to say that online testing tools are not useful. They are. But they simply cannot match the flexibility and configuration options of a dedicated testing application running locally on your machine. Don't have any handy method to test all these browsers? Try the 30-Day free Trial of BrowseEmAll:     Download BrowseEmAll14-Day Free Trial

Get your website Internet Explorer 10 ready

20. August 2012 15:51 by Daniel Herken
As you've surely already heard, the new Windows 8 will be out in October 2012. Microsoft has included lots of new features and bug fixes in this Windows version, including a new Internet Explorer version, version 10. Now every designer, developer and website owner has to make sure that their website will be displayed correctly using the new Internet Explorer. In this post I would like to point out some resources that will help you to get your website IE 10 ready.  Please keep in mind that currently Internet Explorer 10 is available on Windows 8 so make sure to install the release preview to test properly. Internet Explorer Compatibility Modes First you should find out in which mode Internet Explorer will show your page. To do this simply open your website using Internet Explorer and press F12 to open the Developer Tools.           Make sure that the browser mode and the document mode match your current Internet Explorer version. If not, please make sure you use the correct DOCTYPE (How to choose the right DOCTYPE) and the X-UA-Compatibility meta tag is set correctly (What is that?). Internet Explorer 10 Compat Inspector Microsoft has created a little JavaScript snippet to help you to detect compatibility issues for the new Internet Explorer. It's called Compat Inspector and you can get it for free! It's dead simple to use; just add this JavaScript to your page (you need to add it before all other scripts): <script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script> Now if you open the page this script adds a little widget to the top right of your page.          To get more details simply click this widget.                     This gives you a good place to start debugging website bugs.  Internet Explorer 10 Developer Guide Microsoft also created a detailed Guide for Developers which gives an overview of all the new features included in Internet Explorer 10. Please note that you cannot use any of these features if your Document Mode is set to Internet Explorer 9 or below. Make sure you didn't break anything After you've corrected every bug in Internet Explorer 10 you need to perform one last (but important) step. Fire up your cross-browser testing solution and iterate through all browsers to make sure you did not break anything. If, for example, you did edit DOCTYPE and X-UA-Compatibility meta tags take extra time to test all of the old Internet Explorer versions you want to support. Don't have any handy method to test all these browsers? Try the 30-Day free Trial of BrowseEmAll: Download BrowseEmAll14-Day Free Trial

Cross-browser test your website in 10 minutes or less

20. August 2012 15:49 by Daniel Herken
BrowseEmAll includes over 20 desktop browsers and many mobile simulators. However, testing your website on all of these can take a lot of time. To make your life easier BrowseEmAll includes cross-browser reporting. You just enter the URL and select the browsers you want to test. BrowseEmAll then iterates through all browsers, takes screenshots and analysis the HTML and CSS for you. You can even include these steps in your build environment. In the following section I will show you how to get started using BrowseEmAll cross-browser reporting. Define your report settings To create a new cross-browser report simply select the report button in the top bar:   You'll get the report settings windows in which you can enter the URL (or open a file), select a resolution and select all of the browsers and mobile devices you want to test. If you use the BrowseEmAll Standard version you won't be able to select the mobile devices.                          After you have set everything up just click the Start button. Wait and relax Now BrowseEmAll will automatically iterate through all selected browsers and mobile devices. You don't need to do anything... Doesn't that sound great? How to read the report After a few minutes the new cross-browser report will be available (and should automatically be opened in your browser).  The report starts with a quick summary which gives you the first suggestions of which browser may contain rendering errors. This summary will look something like this:                               As you can see, the best bet would be to check Internet Explorer 7, 8 and 9 on rendering errors. A quick click on Jump To Result gives you more details:                               In this detailed breakdown you can see a screenshot of the page rendered in the selected browser (in this case Internet Explorer 8) and a breakdown of HTML and CSS errors. As you can see in this example the CSS property box-shadow is not supported by Internet Explorer 8. This way you will be able to quickly identify and resolve many rendering issues in all supported browsers.  Too good to be true? Download the 30-Day Free Trial and try BrowseEmAll for yourself: Download BrowseEmAll14-Day Free Trial  

How good are the BrowseEmAll mobile simulators?

26. July 2012 13:42 by Daniel Herken
Every now and then one of my customers ask about the quality of the BrowseEmAll mobile simulators. How good is the rendering compared to real world devices? In this post I would like to show you some techniques used to develop mobile websites and a side-by-side comparison between real world devices and the BrowseEmAll simulator. Overview Mode Websites that are not optimized for mobile devices are displayed using the so called Overview Mode. This mode reduces the zoom until the user can see the whole page-width (even if you cannot read anything). This mode is triggered by all major mobile browsers and you don't need to take any additional steps to accomplish this. Maybe the most prominent example of this is the New York Times website and the iPhone (can you remember the keynote?). Let's compare the iPhone 4 and the BrowseEmAll simulator: Real device   BrowseEmAll Viewport You can use a special meta-tag (known as a viewport meta tag) to tell the mobile browser how wide your website should be rendered and what initial zoom the browser should apply. This enables you to create websites which are always 100% zoomed on mobile devices. You can read more about the viewport here: A tale of two viewports Apple Documentation Android Documentation The BrowseEmAll simulators do support the viewport tag. Let's take Google and Facebook as quick examples: Real device   BrowseEmAll   Real device   BrowseEmAll   Media Queries and Responsive Design The term responsive design is based on the idea to create website designs which automatically adapted to the users screen size. To do this you can use so called CSS media queries which allow you to define rules based on screen size. A quick example: @media only screen and (min-width : 1240px) { .header { max-width:70em;} }   Of course the BrowseEmAll simulators do support this as well. Let's take an example for great responsive design: OwlTastic (need more?) Real device   BrowseEmAll   Supported Devices Currently BrowseEmAll supports 19 different mobile devices and operation systems. Here is the list: Android (2.2, 2.3, 4.0, 4.1), Android tablet (3.2, 4.0, 4.1), iPhone (3G, 3GS, 4, 4S) and iPad (1, 2, 3) using iOS 4.2, 5.1 and 6 Beta. If you buy all these devices it would look something like this:                    If you cannot fit all these devices into your office please feel free to download and try BrowseEmAll! Download BrowseEmAll14-Day Free Trial      

4 Steps to cross-browser test an existing website

11. July 2012 18:09 by Daniel Herken
In this post I'll show you how to cross-browser test your existing website more efficiently. All 4 steps will be performed using the cross-browser testing tool BrowseEmAll.  To start off your cross-browser testing we will create a quick overview for all desktop browsers to pinpoint where to investigate further. In steps 1 and 2 we will concentrate on rendering issues in the different browsers. Once the rendering looks good we will move to step 3 and test dynamic content like JavaScript, Flash, Silverlight and so on. Finally, we will test the website for mobile devices such as iPhone, iPad and Android phones and tablets. I'll use a modified version of the BrowseEmAll homepage to demonstrate the process. For comparison, this is what the page should look like:   Step 1: Spot rendering errors using the cross-browser report To get a quick overview of the cross-browser compatibility progress we will start by creating a cross-browser report for our website. This will automatically iterate through all desktop browsers integrated in BrowseEmAll. To get this going just launch BrowseEmAll and select the report tool:        Now you can enter the URL (localhost or files are supported) of your page and select a resolution. Hit the "Start" button to create the report.                  Now you can go get a coffee while BrowseEmAll creates the report for you. The report contains screenshots and detailed HTML / CSS analyses for every desktop browser.                             Use this information to pinpoint the browsers you need to investigate further. As indicated by the report, we should take a detailed look at Internet Explorer 7. The screenshot for this browser looks like this:                           The red dotted outline around the tagline "Do cross-browser testing. Faster" is missing. Fortunately, the report provides some details about the HTML tags and CSS properties used in this webpage that could cause problems in Internet Explorer 7.       With this information we can move on to step 2.  Step 2: Analyze and resolve any errors using the different browsers Now you know which desktop browsers encounter rendering problems with your website. Once again we will use BrowseEmAll to help resolve the issues. We select Internet Explorer 7 in BrowseEmAll and browse the website we want to test. You can see that the red dotted outline is missing here as well.                             If we are not 100% sure what is causing the issue you can open "Inspect and compare" on the bottom right part of the screen. There you can inspect CSS and calculated layout for the selected browser.                                 Without a reference point it's sometimes hard to tell which variables are off, so try selecting another browser for comparison (Internet Explorer 9 in this example). Once again we navigate to the h1-tag and compare the different CSS styles and layout.                            Using this and the information of the cross-browser report we are now able to fix the rendering issue. We'll just change our CSS to work in the old and the new Internet Explorer.        After this you can start over with step 1 (maybe the fix has broken something else?). Do this until your website renders correctly in every browser. Step 3: Test dynamic content using the integrated desktop browser Your website now renders correctly in all desktop browsers! This is your first great achievement. Don't worry, it get's easier after that... Maybe you are lucky and your website does not contain any dynamic content. No JavaScript? No CSS animations or effects? Good on ya! You can leave this out and jump to step 4.  Otherwise, you will need to test all of this dynamic content using the different browsers. To do this, you need to iterate through all browsers using BrowseEmAll and test your dynamic content. This way you will be able to spot all problems without installing many different browsers or firing up virtual machines.  A quick look at the console - using "Inspect and compare" - can tell you more about JavaScript errors. Go ahead and correct every bug and retest all browsers to make sure nothing is broken.            After you did this for all dynamic content we can move on to step 4. Step 4: Use the mobile simulators to test for mobile devices In this last step we are going to test the website on different mobile devices. Unfortunately, I don't have every single revision of the iPhone or iPad let alone all of the Android versions out there. So we will, once again, use BrowseEmAll for this test.  Fire up BrowseEmAll, navigate to your website and select the first mobile simulator on the top left.                         The simulator will render the page just as the real device would do. You can zoom, scroll and switch between landscape and portrait mode.                            As in step 3, you need to iterate through all mobile devices to test your website. There are iPhone, iPad, Android and Android tablets to test.                           Finally! You made sure that the website renders correctly and is useable on all of these mobile devices. Now relax and upload your perfect cross-browser compatible website. Want to try this using BrowseEmAll? Download the free 30-Day Trial now:  Download BrowseEmAll14-Day Free Trial