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 device 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 of layout of web pages. So a page implemented using such patterns looks fine both in desktop browsers and on mobile devices. The main challenge was that the platform already has 1200+ pages.
First of all the 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 of using of 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 as on desktop as on mobile devices.