At VCH, when Moodle was implemented as a Learning Management System (LMS) in 2009, the interfaces for content was not very user friendly. Two years later, with the new Moodle version, our IT team figured out how to give us CSS access to customize the.
Although people felt that a page with a stretch factor (not fixed width) was a solution to have content adjust to different screen sizes, it was actually a problem. The design would fall apart when canvas width changed (larger monitor). Furthermore, while there was no agreement on the size among instructional designers, SMEs and designer, we continued developing courses on a not standardized template – creating more bad design. Even with the pages that had a fixed size, different people had different view on what the width should be.<\/p>\n
Approach to a better design solution:<\/strong> Determining the width of the page The problem with our LMS was that it could not feature responsive design and the use of div tags, nor column structures (i.e. Newspaper style) which was essential if we were to move towards a 100% width. We could not even implement codes to make the page behave adaptive.<\/p>\n I researched for an element in the design that would serve as a guide or constraint. I was searching for an element that would be constant. Before that I set some rules: In my research I came across CPL Character Per Line. Studies showed that approx. 75 CPL is the standard. I calculated what 75 CPL would be in width. At 12px font size, it came to under 640 pixel page width. With a default page of 950px I was able to propose wider table of content and a structure that organized video, image, and text very well.<\/p>\n <\/p>\n [\/et_pb_text][et_pb_blurb title=”skeleton.pdf” image=”http:\/\/ahssan.com\/wp-content\/uploads\/2019\/09\/pdf.png” _builder_version=”3.27.4″ hover_enabled=”0″ _i=”1″ _address=”0.0.0.1″ url=”http:\/\/ahssan.com\/wp-content\/uploads\/2019\/09\/skeleton.pdf” url_new_window=”on” icon_placement=”left” content_max_width=”903px” header_level=”h5″][\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" Problem: At VCH, when Moodle was implemented as a Learning Management System (LMS) in 2009, the interfaces for content was not very user friendly. Two years later, with the new Moodle version, our IT team figured out how to give us CSS access to customize the. Although people felt that a page with a stretch […]<\/p>\n","protected":false},"author":1,"featured_media":5460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":" At VCH we started using Moodle as a Learning Management System (LMS) in 2009. Over the next few years the challenge was to create a theme that looked aesthetically pleasing. The first step in having some design control of the layout was eliminating the default percentage factor of the page. Shortly after, CSS was required and implemented to customize the entire interface.<\/p>
The first step in having some design control of the layout was to eliminating the default percentage factor of the page. I introduced a fixed dimension.<\/p>\n
Many felt that we needed more space for content. Reference was made to of Jacob Nielson\u2019s research about wide space and people in the team quickly embraced that. Yes Jackob Nielson did make a statement about trends and space usage but forgot to talk about how to make use of the space. So naturally people thought that it was okay to have text run from the left side of the monitor to the right side of the monitor.<\/p>\n
1. My page consisted of a width which had to be defined. In it I had two columns. One column for content and the other column for table of content (links).
2. Although the width of content was much larger than the width of the TBC, the exact width of each had to be defined.
3. The content page had to be large enough to display video, image, and variations of text format (one column, two column, and 3 if possible).<\/p>\n![\"skeleton\"](\"http:\/\/ahssan.com\/portfolio\/wp-content\/uploads\/2015\/02\/skeleton.jpg\")
<\/p>\n
![\"pdf\"](\"http:\/\/ahssan.com\/portfolio\/wp-content\/uploads\/2015\/02\/pdf.png\")
NPOlayout_v1<\/a><\/p>