Our customer is one of the world's leading learning platform providers with many active users worldwide. The platform is used in all levels of education, from primary schools to universities, helping teachers make education more inspiring and valuable for today’s students. User feedback heavily drives the development, so high user adaptation and satisfaction has been achieved.
The learning platform has many active users and many of them wish to use their mobile devices to access the platform. To support that, our customer decided to apply Responsive Web Design approach to the platform. The approach defines some patterns for developing webpage layouts. A page implemented using such patterns looks fine both in desktop browsers and on mobile devices. The main challenge was that the platform already had 1200+ pages.
First of all, most of the pages and some of existing controls have been redesigned to render more straightforward HTML markup. Then, a new library of CSS classes has been implemented. That library contained many generic CSS classes for different elements/parts of the pages. The main idea was to avoid using CSS classes specific to a page. Therefore, the similar elements will have the same CSS classes on different pages. In addition, it should reduce duplication of CSS styles. Alter that, in order to support mobile devices, CSS3 media queries were applied to the CSS classes for different display resolutions. It allows having different views of the same page on different devices.
The proposed approach allowed the customer’s application to support such popular platforms as mobile devices without implementing native applications. Therefore, the web application looks perfect and usable both on desktop and on mobile devices.