Skip to content

Instantly share code, notes, and snippets.

@otuoma
Last active November 26, 2018 11:33
Show Gist options
  • Save otuoma/5d5bda0ea7e87b4d20aae0ccad59d365 to your computer and use it in GitHub Desktop.
Save otuoma/5d5bda0ea7e87b4d20aae0ccad59d365 to your computer and use it in GitHub Desktop.
Overview of Mirage 2 theme and what responsive design is
Display the source blob
Display the rendered blob
Raw
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Introduction to Mirage 2 Theme\n",
"\n",
"Mirage 2 theme was developed by @mire and first introduced in DSpace 5 as an optional theme. It still is optional in the current DSpace 6.3. Its predorminant feature is the **responsive design.**\n",
"\n",
"## Responsive Design\n",
"\n",
"Previously, DSpace had a theme for mobile devices and another for large screens. With the advent of responsive design, Mirage 2 theme was developed to simplify managing themes such that instead of having one theme for smaller vewports and another for larger viewports, a single theme can be used for both.\n",
"\n",
"A theme is said to be responsive in design when it is able to change the organization of content on a web page to intuitively display the content without hiding content or requiring the user to scroll horizontally.\n",
"\n",
"There are several ways you can use to check if a website is responsive or not.\n",
"\n",
"1. One, of course, is to open it with a mobile phone or tablet device and see if its content displays correctly and does not require you to scroll horizontally for you to see everything on the page.\n",
"\n",
"2. The other way is to resize your browser. If it is responsive, then you will notice that the content of the page reorganizes automatically as you adjust the window size.\n",
"\n",
"3. Google also has a [mobile-friendly tool](https://search.google.com/test/mobile-friendly) you can use to test the responsiveness of a website\n",
"\n",
"4. Finally, most modern web browsers have developer tools that allow you to test the responsiveness of a website as you develop it. To access it in mozilla firefox, open the **menu** -> **web developer** -> **responsive design mode**\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In dspace (with Mirage 2), you will notice that the sidebar disappears as the window size gets smaller and reappears when you click on the menu icon at the top."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Advantages\n",
"1. Higher ranking on google - In 2015, google announced that its search algorithm had been adjusted to rank higher, those sites that were responsive than those that were not.\n",
"\n",
"2. Improved user experience - Statistics from [statista.com](https://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share/) indicate that **52.2%** of all global web pages were served to mobile phones. It also shows that the trend has been growing over the years and this is likely to increase even higher.\n",
"\n",
"3. Faster web development - For the developers of dspace, this has reduced time required to roll out a new theme. For users, it means better quality of the software since the developers have more time on their hands.\n",
"4."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### NEXT : Building DSpace 6 with Mirage 2"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Bash",
"language": "bash",
"name": "bash"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment