
This is a quick follow-up to the deveopment series. When designing a website, every effort should be made so the site looks the same across different web browsers, and different devices. Sounds simple, yes? Actually, it's not. Nor is it even possible to make a website that looks exactly the same across ALL web browsers, let alone all devices capable of surfing the internet.
While all web browsers have the same functions, and many are built on the same platform (many use Chrome these days), they rarely render a webpage the exact same way.
Even Microsoft finally gave up on creating a web browser that is all Microsoft code (thankfully), as their newest entry into the web browser market, Edge, is built on the Google Chrome platform.
Upon it'e release, Google's Chrome started on a path of market domination - much like everything else Google has done. Currently, Chrome holds roughly 65% of the browser market share world-wide.
Some mmay see that as a good thing, I'm a little more pessimistic about it. History has proven that once a company gets a majority market share in this particular industry, ads targetting starts to take over.
That's a topic for another discussion, however.
With regards to website rendering, a number of factors begin to appear, even on browsers based on a common engine. How the browser renders a website does and will differ - Chrome, Firefox, Edge, Safari and all others have enough difference in code that colors, boxes, images, effects (drop shadows) and even fonts can and usually will render slightly different. Then, moving from one device to another exacerbates the problem. How the browser communicates with the operating system will have an impact as well. Viewing the same website on the same browser on a Windows PC will differ from what you will see on a Mac or Linux machine.
Then there are mobile devices...
Mobile devices typically run either Android or Apple iOS. Yes there are more, but these are the two with the largest market share. Your website will likely look slightly different between these types of devices. Whether it's a phone or a tablet, Samsung or Apple - there are bound to be some differences. Yes, many can be adjusted in the website CSS settings and provide decent fixes to get things mostly similar for the SCREEN format. However, that's where the fix will end. The differences caused by the browser and the device operating system cannot be edited out, patched or tweaked.
The best course is to keep your site responsive between device types, make sure the site looks proportional between device viewing formats, and ensure that all features work on all devices where possible. It's simply a fact in website design and development that there will likely be slight differences in how your site appears on different browers/device types/operating systems.
This quick 15 minute video give a good summary:
/cdn.vox-cdn.com/uploads/chorus_image/image/65613211/microsoftedgenewlogo.5.jpg)
Even Microsoft finally gave up on creating a web browser that is all Microsoft code (thankfully), as their newest entry into the web browser market, Edge, is built on the Google Chrome platform.

Upon it'e release, Google's Chrome started on a path of market domination - much like everything else Google has done. Currently, Chrome holds roughly 65% of the browser market share world-wide.
Some mmay see that as a good thing, I'm a little more pessimistic about it. History has proven that once a company gets a majority market share in this particular industry, ads targetting starts to take over.
That's a topic for another discussion, however.
With regards to website rendering, a number of factors begin to appear, even on browsers based on a common engine. How the browser renders a website does and will differ - Chrome, Firefox, Edge, Safari and all others have enough difference in code that colors, boxes, images, effects (drop shadows) and even fonts can and usually will render slightly different. Then, moving from one device to another exacerbates the problem. How the browser communicates with the operating system will have an impact as well. Viewing the same website on the same browser on a Windows PC will differ from what you will see on a Mac or Linux machine.

Mobile devices typically run either Android or Apple iOS. Yes there are more, but these are the two with the largest market share. Your website will likely look slightly different between these types of devices. Whether it's a phone or a tablet, Samsung or Apple - there are bound to be some differences. Yes, many can be adjusted in the website CSS settings and provide decent fixes to get things mostly similar for the SCREEN format. However, that's where the fix will end. The differences caused by the browser and the device operating system cannot be edited out, patched or tweaked.
The best course is to keep your site responsive between device types, make sure the site looks proportional between device viewing formats, and ensure that all features work on all devices where possible. It's simply a fact in website design and development that there will likely be slight differences in how your site appears on different browers/device types/operating systems.
This quick 15 minute video give a good summary: