Skip to main content

Test Drupal 8 default theme on Multiple Devices in Multiple Browsers

In this post, I will be sharing my experience of testing Drupal 8 default theme on various devices in multiple browsers. If ever a problem is encountered, I will report it in the issue queue. Bartik was tested on four different OS: Android, IOS, Windows and Ubuntu.

 The first device I will be using is an HP Pavilion 15 Notebook PC on Ubuntu 16.04 in various browsers.

 1. Google Chrome
Hp Pavilion Ubuntu 16.04 Google Chrome
Hp Pavilion Ubuntu 16.04 Google Chrome console
2. Mozilla Firefox
Hp Pavilion Ubuntu 16.04 Firefox
Hp Pavilion Ubuntu 16.04 Firefox console 
As you can observe, the console detected an error:

  • Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/  jquery.min.js:4:15202
I noticed that similar issue has already been reported. I added a screenshot in the comments.
 Next, we will be testing the same HP Pavilion 15 Notebook PC but running on Windows 10.
 1. Microsoft Edge
Hp Pavilion Windows 10 Microsoft Edge
Hp Pavilion Windows 10 Microsoft Edge console
2. Google Chrome
Hp Pavilion Windows 10 Google Chrome 
Hp Pavilion Windows 10 Google Chrome console

3. Mozilla Firefox
Hp Pavilion Windows 10 Firefox
Hp Pavilion Windows 10 Firefox console

Here again, Mozilla firefox met 4 issues:
  • Error in parsing value for ‘-webkit-text-size-adjust’.  Declaration dropped.  normalize.css:12:28
  • Unknown pseudo-class or pseudo-element ‘-webkit-inner-spin-button’.  Ruleset ignored due to bad selector.  normalize.css:346:22
  • Unknown pseudo-class or pseudo-element ‘-webkit-search-cancel-button’.  Ruleset ignored due to bad selector.  normalize.css:367:22
  • Unknown property ‘appearance’.  Declaration dropped.  reset-appearance.module.css:9:12

 I did not find similar concerns in the issue queue. Hence, I reported the problem. The second device I will be using is a Lenovo Ideapad 500 running on Windows 10.
1. Google Chrome

Lenovo Windows 10 Google Chrome
Lenovo Windows 10 Google Chrome console
2. Microsoft Edge
Lenovo Windows 10 Microsoft Edge
Lenovo Windows 10 Microsoft Edge console

3. Mozilla Firefox
Lenovo Windows 10 Firefox
Lenovo Windows 10 Firefox console

No apparent issues were found regarding its appearance: same colours, same fonts and same layout. The consoles confirmed the assumption.
 The next two devices I will be making use of are TVs integrated with an Android Box.
 
 1. Mibox3 with Google Chrome
Philips TV with Mibox3 Google Chrome
2. Mibox3 with Internet Browser
Philips TV with Mibox3 Internet Browser
3. MXQpro with default Browser
LG TV with MXQpro default Browser

 After much observation, I found that the MiBox3 showed a different tone of blue. However, I do not consider this a real issue as the display depends on the TV.

 Coming to smartphones, I will be testing a Samsung Galaxy S5 first.
1. Firefox
Samsung Galaxy S5 Android with Firefox
2. Google Chrome
Samsung Galaxy S5 Android with Google Chrome
3. Internet Browser
Samsung Galaxy S5 Android Internet browser
4. Opera Mini
Samsung Galaxy S5 Android with Opera Mini
5. Dolphin Browser
Samsung Galaxy S5 Android with Dolphin

Samsung Galaxy S5 showed no errors at all. Now, I will be using an iPhone 6s to test Bartik.
1. Google Chrome

Iphone 6s  IOS with Google Chrome
2. Safari
Iphone 6s  IOS with Safari
No visible errors were found in the Iphone 6s. The last smartphone to be tested is an HTC Desire 526G on 2 different browsers:

1. Default Internet Browser
HTC Desire 526G  Android with Internet Browser
2. Google Chrome

HTC Desire 526G  Android with Google Chrome

Aesthetic-wise, I did not find any variation in the colours or fonts. After a tedious and a complete investigation, none of the smartphones seemed to have an issue with Bartik.

The last device i will be making use of is the Samsung Galaxy Tab A on 2 broswers:

1. Google Chrome

Samsung Galaxy Tab A Google Chrome
 2. Internet Browser
Samsung Galaxy Tab A Internet Browser

Bartik appear to perform well on the Samsung Galaxy Tab A too.
Except the errors seen in Mozilla Firefox, Bartik theme worked perfectly on the other devices. Thank you for reading my blog! 😊

Labels:

Comments

Post a comment

Popular posts from this blog

How to add a slider to your Drupal Website/ Blog

Views Slideshow module is very handy to display any images you want. In this tutorial, we are going to create a slideshow of all my articles. Installation We start by downloading the Views Slideshow module  by copying the link of the tar.gz file and then downloading it from our terminal. wget https://ftp.drupal.org/files/projects/views_slideshow-8.x-4.6.tar.gz Extract the contents of the file. tar -xvzf views_slideshow-8.x-4.6.tar.gz -x   Extracts to disk from the archive. -v  Produces verbose output i.e. show progress and file names while extracting files. -z  Uncompresses the resulting archive with gzip command. -f  Read the archive from the mentioned file Next, for Drupal to recognise the module so that we are able to download it, we move the module to the module subdirectory of Drupal. mv views_slideshow /var/www/html/drupal/modules We can now install the module so that we are able to use from our local website. Heading over to localhost/drupal/admi
Post a comment
Read more

Finish Entire Drupal Ladder [Git Basics]

Getting Started with Git At first, Drupal ladder introduced a little Git introduction and the benefits of its usage. It was fascinating. I knew it would help me in the future. There were three links:  http://try.github.com/levels/1/challenges/1 , http://pcottle.github.com/learnGitBranching , and  http://git-scm.com/book . Both three were useful to understand Gits tree structure. Learning Git Branching Install Git Coming to Git installation, I had to put some git commands into practice: git show, git log, git branch, git status among others. As it was something new to me, I took some time to grasp all the commands. Its installation was pretty easy; I only had to follow Drupal Ladder's steps. Installing Git Configuring Git Write a patch Downloading a project using Git Before starting, I had to learn two of the prerequisites: getting used with the issue queue and Drupal sandbox. I had no problem hosting Drupal sandbox and creating an issue. Coming to
Post a comment
Read more

How i installed Drupal 8 on Ubuntu 16.04

Drupal 7 or Drupal 8? With some research, I had an idea on which Drupal version to opt for. I got to know that D7 is more documented and actually has more modules than D8 whereas D8 is more user-friendly with improved editing flexibility but with some modules not ported yet. Finally, I decided to give a chance to the latest Drupal version. As a beginner, I do not think I will need to work with advanced modules. Therefore in this step by step document, we will be installing Drupal 8 ! Step 1: Make sure everything is up to date First, I made sure all of my system packages are up to date by running the following commands. Using sudo su was very useful for not to waste time entering the same password again and again. sudo su sudo apt-get update sudo apt-get upgrade Step 2: Install LAMP(Linux, Apache, Mysql, Php) Using Tasksel allowed me to install all packag e s LAMP server contain. During the process, I had to enter a password for Mysql. This password was found to be needed later
1 comment
Read more

IETF 102 - Implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE)

Hey there, welcome back to another blog post. In this one, I will document my experience in implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE) for the IETF 102 Hackathon. Rahul and I paired up for this task. In the last hackathon, he implemented TLS 1.3 in the check_http Nagios plugin ( PR#368 ) and was quite familiar with Nagios already. What are Nagios and NRPE ? In short, Nagios monitors systems, networks and infrastructure. It alerts users when things go wrong and warn them again when the problem has been resolved. NRPE, as the name tells, allows the user to be able to execute Nagios Plugins remotely. The encryption part between check_nrpe and NRPE security protocol could only support up to TLSv1.2. How we made it? On the first day, we quickly set up our virtual machines, cloning the NRPE repo and going through the code. Everything went fine. The testing part was a little bit more tricky but at the end, we made it through even if Rahul was pretty sick.
Post a comment
Read more

Set up Drupal with Docker

In short, Docker is an open source tool that allows the use of containers. Containers consist of predefined lines of code built by the community. Anyone can push his docker file for other people to use. Of course, Docker has a lot more functionality that I just mentioned: mounting volumes, linking containers and so on. In this blog, I will document my little experience on setting up a full Drupal Development Environment! As usual, Google search engine was my hero. I came up with many tutorials which helped me to get started with Docker. Step 0: Install Docker At first, this step was confusing... docker commands were known for its long commands. Mainly due to flags. But hopefully, I only had to follow the steps command by command! Step 1: Set up Drupal Development Environment 1.1 . To start with, a database was needed for local development. In this command, I run a database from the MariaDB image, put 'drupal' as database password and named the container 'drupaldo
1 comment
Read more