Components of Web Design 6 – Designing for Different Browsers/Devices – U21-P1

Warning – Due to not being able to change the embedding some of the links have a different format that I can’t currently fix.

Browsers

As there are a wide variety of different and unique web browsers that are currently available and are used by the entire population that has access to the internet in some way. There must be consideration into how a website will look when being used on different browsers especially since each one has differing levels of connectivity that could have an impact on the viewing experience of a website. Some examples of this are below.

1- The different browsers have different levels of performance, for example the different browsers consume more RAM space when in use, this is especially apparent on low-end machines which only have access to 4GB of RAM with a weak processor it tends to fall behind its competitors. The main solution to this would be to ensure that the website itself does not utilise too many functionalities that could cause any freezing or lag, this problem wouldn’t be fixed completely as with this being an issue no matter the website as with Firefox just minimising the issue could serve a benefit. Fortunately this problem has not transferred over to the newer Firefox Quantum as it many reviews it has been highlighted as being “just as fast or faster than chrome” although Chrome has has similar problems with managing RAM space and the Processor the main difference comes with the handling of resources when transitioning to another page as Chrome tends to perform better without the same issues that plague the original Firefox browser.

2 – Unlike the first point this is an issue that applies to all browsers and is able to have a significant effect on whether or not a website usable on different browsers is the layout of the browsers themselves. For example since every browser is using a different layout with their functions that can influence how websites are perceived, although the likelihood of major impact to website viewing as incredibly minimal this wouldn’t be guaranteed on different platforms. For example when utilising the mobile versions of web browsers can impact the usage of a website as unlike a standard desktop the compromises which are present on mobile devices involve the significant differences in hardware and software.

Another aspect of a website that must be considered across different browsers is how the different websites utilise different Rendering Engines for their text and imagery with the pages of a website. For example to two biggest browsers currently in use by the global populous (Firefox, Chrome) utilise different rendering engines for their browsers, with Google previously using Webkit (now using Blink) as theirs, whereas Firefox uses Gecko. The amount of changes that could occur from using a website from browser to the next has wide variance, especially where the use of incompatible elements and implementation. This means that consideration into the different areas of each browsers abilities as to ensure that all of the browsers can be used in a form of common ground (not excluding any based on functionality).

One final aspect is the design of the website to compensate for the different websites, although the different browser have very similar overall designs, this is more significant when analysing the usage of different browsers within your own customer base. It is common for websites to view their traffic logs for their website (with Google Analytics being a common method), this method would also translate into the analysis of what devices are being used since analytical software often include that as a capability. A result of this could be that it would allow for possible modification to the website so that the website would change based on the browser used (possibly utilising additional code for more functionalities).

Devices

As time has continued forwards along with the advances in technology the methods in which the average person could access the internet has also expanded greatly in the past decade. This means that with that advancing technology comes with the need of ensuring that a website is accessible equally on any platform that has the capacity to access information on the web. A common route in doing this simply with the design of a website is by choosing one of two design methods. The first is a Responsive layout for a website, which means that adapts to the given screen size of the device the website is displayed on as well as the orientation of the device itself (explains when a website can change from horizontal to vertical). The other method is through an Adaptive layout for a website, the key difference of Adaptive is that unlike Responsive which is built to ensure that any practical screen size can be used in tandem with the website. Whereas with Adaptive it utilises a set of fixed layout sizes for a website, with there being a detection system in place on the website where it detects the screen size of the device in use, then it automatically selects the closest screen size that is appropriate.

Another area of significance within the web design for the different devices also involves the screen sizes for the devices themselves. Since when compared to the average desktop/laptop computer the amount of available space on the screen is drastically cut down especially since most devices are intended for portable on the go usage instead of immobilising the user there are sacrifices which will impact the website viewing, This means that common elements in desktop web design have to be either edited to compensate for the different hardware, or be pushed aside in exchange for maintaining functionality. A good example of this with the changes that are often made involving the compression of a dropdown menu, which on a desktop, laptop, or even tablet would function as intended, whereas with a smartphone for example the menu itself would be limited in space in comparison to the former meaning that the layout would require changes as to maintain the correct functionality of the website on the platform.

Example of the differences between a dropdown menu on different platforms

Bibliography

Browsers

http://hawaii-computer-support.com/whats-the-difference-between-different-web-browsers/

https://www.exede.com/blog/pros-cons-internet-browser/

https://www.conversioner.com/glossary/browser-compatibility

https://hackernoon.com/firefox-ffe71d0e16c3

https://www.pcmag.com/encyclopedia/term/61819/browser-rendering-engine

https://www.quora.com/What-are-the-pros-and-cons-of-Gecko-vs-WebKit-Would-there-be-any-downside-if-Mozilla-abandoned-Gecko-and-switched-to-WebKit

Devices

https://developers.google.com/web/fundamentals/codelabs/your-first-multi-screen-site/

https://www.lifewire.com/multi-device-web-design-3470008

https://www.lifewire.com/responsive-vs-adaptive-web-design-4010591

https://www.nngroup.com/articles/responsive-web-design-definition/

https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

https://www.bluefountainmedia.com/blog/desktop-vs-mobile-three-key-website-design-differences