In today’s mobile-first world, having a responsive website is critical. Desktops are no longer the primary device used to access the internet because many people do so from smartphones and tablets. With Moodle™ sites, it becomes necessary for one to select a responsive theme like Edwiser RemUI or Alpha Moodle theme that ensures the learning management system can be accessed from any device while providing an excellent user experience.
A responsive Moodle theme modifies layout, navigation, content, and functionality automatically so that they can fit different screen sizes. This is crucial in delivering course content effectively since non-responsive sites may prove unworkable or frustrating on mobile devices. Students as well as teachers should be able to view materials easily, participate in activities and navigate through the site whether they are using a phone, tablet, laptop or desktop.
Apart from making them more usable, there are also technical reasons why responsive designs matter for Moodle sites. According to Google’s mobile-friendly ranking factors which affect how high up you appear within search results pages; if your web design does not cater for this then it will not be considered as such by Google thus reducing visibility on search engines. Therefore it is advisable for one to use a mobile optimized responsive theme which might help increase visibility and improve SEO of your Moodle site.
Considering the significance of responsive design, we’ll examine two of the most popular themes for Moodle that are responsive. Edwiser RemUI and Alpha Moodle theme are two top-rated feature-packed themes that boast great responsiveness. But which one is better? Keep reading to know more.
Edwiser RemUI Theme Overview
Edwiser RemUI is a responsive theme for Moodle that costs money. It charges to give a modern, intuitive and customizable interface for e-learning websites based on Moodle. It wants to make things easier and better looking for system administrators, teachers or students.
Edwiser RemUI’s main features are:
- Fully responsive design that adapts to different devices and screen sizes seamlessly
- Extensive customization options using the Live Customizer, allowing you to modify colors, fonts, logos and more without coding
- Custom page builder to easily design and configure the Moodle site homepage with drag-and-drop blocks
- Demo importer to quickly set up pre-designed homepage templates
- Integration with Edwiser plugins like Edwiser Bridge for WordPress-Moodle integration and Edwiser Course Formats
- Optimized navigation and user experience enhancements
- Compatibility with popular Moodle course formats and third-party plugins
- Detailed documentation and responsive customer support
Alpha Moodle™ Theme Overview
Alpha is an upper-class responsive theme that was made with the intention of providing a world class user experience for E-learning sites in Moodle. It comes with a sleek intuitive design coupled with various customization settings which allow you to modify the appearance and feel of your moodle site so as to reflect your personal style.
Alpha theme’s main features are:
- Fully responsive design that adapts seamlessly to different devices and screen sizes
- Optional dark mode UI in addition to the default light mode
- Compatibility with popular Moodle course formats and plugins like Tiles, Collapsed Topics, Edwiser Course Format, and more
- Extensive color customization for top bar, sidebar, footer and other elements
- Custom login page with 5 different layout options
- Flexible front page block areas to add custom content
- Google Fonts and custom font support
- RTL layout support for languages like Arabic, Hebrew, Persian
- Detailed documentation
Alpha Theme vs Edwsier RemUI: A Showdown of Responsiveness
There are 5 most important parts of any eLearning site: the homepage, course list page, course page, navigation menus, and login page. We’ll compare the responsiveness of how those pages look using Alpha and Edwiser RemUI themes. Let’s begin!
#1. Homepages
The homepage of any site is, as its name says, the home to all content. Whatever goes on a site is shown and accessible from this particular page, and it’s also the default page that anyone sees when they open your URL directly from the address bar or through a search on your brand name. Therefore, the responsiveness of this page is most important not just for eLearning sites but for any site in general. Let’s see how Alpha and Edwiser RemUI have worked on it:
On computers
The homepages of Alpha and Edwiser RemUI theme are quite well-designed and polished, as you can see in the graphics below. But they’re not just well-designed and polished — they also work properly with all elements showing without any overlap and the content arranged professionally. Here’s what they look like:
Alpha homepage on computer
Edwiser RemUI homepage on computers
On tablets
Tablet optimization is an area that is often neglected by many Moodle themes, but thankfully, Alpha and Edwiser RemUI have done a terrific job at it. The homepages of both themes adjust the content quite nicely according to the size of tablet screens and provide an awesome user experience. Here’s the view:
Alpha homepage on Apple iPad 11 Pro | Edwiser RemUI homepage on Apple iPad 11 Pro |
On smartphones
Enough has been said about the importance of good web design for smartphones, and all of that applies to eLearning sites as well. A majority of learners today enjoy learning on the go, so it’s important for eLearning sites to work properly on mobile devices as well. Fortunately, Edwiser RemUI and Alpha themes provide an uncluttered and fully responsive design for mobile screens also. Here’s how it works:
Homepage of Alpha on iPhone 12 Pro | Homepage of Edwiser RemUI on iPhone 12 Pro |
Verdict
Overall, homepage designs provided by both Alpha and Edwiser RemUI themes are completely responsive as they adjust properly according to different screen sizes. So no clear winner here.
#2. Login page
The login page is where it all starts. Before a user can access any course and start learning, they must log in to a user account. So it’s important for the login page of an eLearning site to provide a good user experience across devices by utilizing the capabilities of responsive design. Let’s find out what Alpha and Edwiser RemUI offer for the responsiveness of their login pages!
On computers
As you can see below, the stylish login page of the Alpha theme loads quite nicely on a computer screen. Everything shows up above the fold (i.e., right in front of the eyes, without any need to scroll down), and everything also works properly.
Alpha login page on computer
The login page of Edwiser RemUI is also responsive and loads nicely on computer screens, as you can see below.
Edwiser RemUI login page on computer
In a nutshell, both themes have done a good job at designing their login pages properly for the computer screens. But the real test of web design is less on computers and more on smaller screens, so let’s check how these pages look on tablets and smartphones!
On tablets
The login pages of both Alpha and Edwiser RemUI load properly on tablets as well. Here’s what they look like:
Alpha login page on Apple iPad 11 Pro | Edwiser RemUI login page on Apple iPad 11 Pro |
We’ve included the screenshots of only iPad to keep things simple in this article, but they look almost similar on other tablets as well.
On smartphones
The smartphone appearance of login pages in both these themes is also no less than awesome, as you can see in the screenshots given below. While the Alpha theme makes space for the login form by completely eliminating the background design on smartphones, Edwiser RemUI manages to squeeze both the login form as well as the background image in the design to give a better appearance.
Alpha login page on iPhone 12 Pro | Edwiser RemUI login page on iPhone 12 Pro |
Verdict
In a nutshell, both Alpha and Edwiser RemUI are on-par with each other when it comes to the functionality of their login pages across the various screen sizes. Edwiser RemUI, however, arranges everything slightly better on smartphones as it provides some space for background image as well as login form without affecting the functionality in any way.
#3. Navigation menus
The navigation menu of any site helps users navigate between the various pages on the site. Therefore, it’s important for them to function properly across screen sizes if the site has to provide a good user experience. Let’s see how navigation menus work in Edwiser RemUI and Alpha!
On computers
On the computer, both Edwiser RemUI and Alpha have horizontal menus that are shown in the header, right next to the logo. Both of them work fine and open only when they are clicked upon instead of uncomfortable hover menus that may open unnecessarily even if the mouse pointer lands on them mistakenly. This is awesome!
Alpha navigation menu
Edwiser RemUI navigation menu
However, the area where navigation menus often suffer is not on computers but on tablets and smartphones. So let’s see how things are on those devices!
On tablets
When it comes to tablets, Alpha and Edwiser RemUI take a different approach. While both of them hide the menus by default under a hamburger icon in the header, Alpha still opens the menu horizontally while Edwiser RemUI opens it vertically from a sidebar. You can see the difference below:
Alpha navigation menu on Apple iPad 11 Pro (highlighted in Red) | Edwiser RemUI theme navigation menu on Apple iPad 11 Pro |
Functionally both menu styles work fine, and your users won’t face any issues. But we prefer Edwiser RemUI’s menu more because it’s quite practical for sites with many menu options. So we think Edwiser RemUI has a better menu design than Alpha.
On smartphones
As far as smartphones are concerned, both Edwiser RemUI and Alpha have a nice menu design that doesn’t overlap any options and also allows plenty of space between items to touch precisely. But the approach still remains similar to the tablet: Alpha’s menu opens from the top, while Edwiser RemUI’s menu opens as a sidebar.
Alpha navigation menu on iPhone 12 Pro | Edwiser RemUI navigation menu on iPhone 12 Pro |
Regardless of the approach adopted by both themes, the navigation menus work fine on both devices and there’s not much of a difference.
Verdict
The navigation menus offered by both themes are responsive, but Edwiser RemUI has a slight edge when it comes to the menu design on tablets.
#4. Course List Pages
The course list page of any eLearning site displays all available courses on the site. It’s the single most important page on any eLearning site as it allows the learners to switch between various courses, and therefore, it’s important for this page to load properly across the various screen sizes. Let’s see what we found when we compared its appearance and functionality on various devices.
On computers
The Alpha theme Course List page loads properly on all popular desktop and laptop screen sizes. The courses are divided into multiple sections, as you can see below, and the courses of section selected from the dropdown menu are shown in cards format.
Course list page of Alpha Theme
Edwiser RemUI course list page, on the other hand, provides multiple views of the course list page. There’s a cards view, a list view, and a summary view, and all of them load perfectly fine in popular desktop and laptop screen resolutions.
Course list page of Edwiser RemUI
On tablets
The course list pages of both Alpha and Edwiser RemUI look nearly perfect on all popular tablet screens as well. We arrived at this conclusion after comparing the functionality of both themes on several popular tablet devices in our testing. Here’s a comparison of how they appear on tablets (Apple iPad 11 Pro in this case, but it’s nearly similar on most Android tablets and other iPads also):
Alpha course list page on iPad Pro | Edwiser RemUI course list page on iPad 11 Pro |
On smartphones
While the course list pages of both themes work fine on smartphones as well, we’d say that Alpha is slightly better than Edwiser RemUI in this area because it shows course cards above the fold. In Edwiser RemUI, you can’t find course cards until you scroll down a bit. So Alpha is slightly better when it comes to responsiveness and overall UX on smartphones.
Alpha course list on iPhone 12 Pro | Edwiser RemUI theme course list on iPhone 12 Pro |
Verdict
Overall, both Alpha and Edwiser RemUI have well-designed and properly responsive course list pages. The only device where one of them exceeds another is a smartphone, where Alpha turns out slightly better in its appearance and design.
#5. Course pages
The course page is where all the magic happens. It shows the content of your courses, and all the learning happens on this particular page, so its responsiveness is more important than anything else. Let’s see how Alpha and Edwiser RemUI compare on this front:
On computers
The course page of the Alpha theme shows all course content properly on any laptop or desktop screen. It includes a menu in the sidebar that can be used to jump between various lessons or activities in the course quickly or can be closed if you don’t want to switch and want to focus on your course content only. Everything works just fine!
Alpha course page on a laptop
The course page of Edwiser RemUI also shows course content very well on desktop and laptop screens. It has multiple layouts for course pages, and all of them work fine. Some layouts include a sidebar that includes options to navigate between various lessons or activities of the course, while some layouts don’t have that feature. Regardless, all layouts load properly on computers, as we found in our testing.
Edwiser RemUI theme course page on a laptop
On tablets
Again, the course pages of both themes load properly and look well-designed on tablet devices as well. Here’s a quick look at what course content looks like with these themes:
Alpha course page on iPad 11 Pro | Edwiser RemUI course page on iPad 11 Pro |
As you can see for yourself, there’s not much of a difference, and both themes are on par with each other when it comes to the responsiveness of course pages.
On smartphones
The course pages of both Alpha and Edwiser RemUI load properly and look well-designed on smartphones as well. Here’s what we got when we tested the course pages of both themes on smartphones:
Course page of Alpha on iPhone 12 Pro | Course page of Edwiser RemUI on iPhone 12 Pro |
We didn’t encounter any sort of issues with reading the course content or switching between different lessons in both themes. So again, no differences really.
Verdict
Overall, we can say that as far as course pages are concerned, both Edwiser RemUI and Alpha are once again on par with each other. The course content loads properly on all devices, and there’s literally no nuisance for your learners, regardless of which theme you choose among the two.
Final Verdict: Alpha Theme vs Edwiser RemUI – Which Moodle Theme is More Responsive?
So finally, it’s conclusion time. Here’s a quick look at the findings of our responsiveness testing for both Alpha and Edwiser RemUI:
Pages | Verdict |
Homepages | Equally responsive |
Login pages | Equally responsive, but Edwiser RemUI has a slightly better design |
Navigation menus | Equally responsive, but Edwiser RemUI has better menu design on tablets |
Course List Pages | Equally responsive, but Alpha’s smartphone design is slightly better |
Course Pages | Equally responsive |
What our comparison essentially reveals is that both themes are almost on par with each other with minimal differences when it comes to responsiveness. While Edwiser RemUI has a slightly better-designed login page that shows all elements including the background, the Alpha Moodle theme is slightly better when it comes to the Course list page.
This essentially means that you won’t face any major issues with either of them — at least not in terms of responsive design. So you can choose whichever theme you like more based on your own criteria. All the best!
Checkout Edwiser RemUI’s Reviews
Explore more moodle themes: Top 5 Premium Moodle themes in 2024 compared (Best Picks)
Join our FaceBook Group Moodle LMS Tips and Tricks and stay updated